/* Studentite REFRESH - public design system. Clean single stylesheet (DECISIONS §50): design VALUES harvested from the approved V2 mockup, rewritten organized. Self-hosted, no CDN/build. Sections: fonts -> tokens -> base -> buttons -> flash -> avatar -> header/nav -> footer -> responsive. Page/component CSS is appended per module (single-file rule). CANONICAL BREAKPOINTS (use these; avoid new ad-hoc widths): 560px = phone 768px = tablet 900px = small laptop 1100px = below full desktop PROJECT RULES: colours come from the :root tokens (never a raw hex that equals a token); inline styles ONLY for genuinely dynamic values (x-bind); prefers-reduced- motion is FORBIDDEN (animations always play). MODULE PREFIX LEGEND (BEM-ish, one per feature): qa=question thread ql=question list card mp=member profile mat/mcard=materials ccover=course cover card kcard/khub=contacts hub adg/adshow=ad gallery ahero/chero=detail hero band vidh=video hero dside/detail=detail sidebar crev/csec=channel review/section nfeat=news feature sfrow=shared-file row rthumb/fthumb/bthumb=list thumbnails imgdrop=image drop zone uav=user avatar */ /* ============ Fonts (self-hosted, variable, Cyrillic + Latin subsets) ============ */ @font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; } /* Source Serif 4 - used ONLY for the modern course-cover cards (x-course-cover), 1:1 with the mockup. Two weights (400 body/topic, 600 title/mark) x 5 subsets. */ @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-cyrillic-600.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-cyrillic-ext-400.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-cyrillic-ext-600.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-greek-400.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-greek-600.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/sourceserif4-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============ Tokens ============ */ :root { --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif; --font-body: 'Golos Text', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --c-primary: #377FA9; --c-primary-d: #2B5F82; --c-navy: #14344E; --c-navy-d: #0D2334; --grad-hero: linear-gradient(120deg, #14344E 45%, #20776F); --c-link: #2B6A8F; --c-accent: #F07B5D; --c-accent-strong: #D9603F; --c-teal: #2FA39A; --c-teal-d: #1F7A72; --c-amber: #F2B33D; /* Semantic status tokens (values match the hexes previously hardcoded in rules AND inline styles - see .edit-errs). One source of truth for alerts/pills so a restyle is a token edit, not a find/replace. */ --c-danger: #C4362E; --c-danger-bg: #FCEBEB; --c-danger-bd: #F0999A; --c-danger-ink: #A32D2D; --c-success: #1F9E88; --c-success-bg: #E7F6F4; --c-success-bd: #BEE5E0; --c-success-ink: #1F7A72; --c-page: #F4F8FA; --c-surface: #FFFFFF; --c-border: #E2ECF2; --c-divider: #EDF3F7; --c-hairline: #DEE9F0; --c-ink: #14344E; --c-text: #3E5B72; --c-muted: #7A93A6; --c-muted-2: #587489; --c-faint: #9AB0C0; --c-navy-text: #C9DCE9; --c-navy-muted: #8FAEC3; --c-navy-head: #6F93AB; --c-tint-blue: #EAF2F7; --c-surface-2: #E4EEF4; --c-brand: #377FA9; --c-line: #E2ECF2; --r-pill: 999px; --r-card: 16px; --r-feature: 18px; --r-banner: 20px; --r-input: 12px; --r-tile: 13px; --r-thumb: 8px; --sh-card: 0 1px 3px rgba(20,52,78,.05); --sh-float: 0 18px 44px rgba(0,0,0,.14); --sh-cta: 0 4px 12px rgba(240,123,93,.35); --ease-out: cubic-bezier(.22,.61,.36,1); --dur-fast: 150ms; --dur: 220ms; --container: 1360px; --pad: 40px; /* Single source of truth for the content + right-sidebar layout width. Every page's sidebar layout (ql/qa/ask/detail/uprofile/edit/cat/detail-body/q/chan) references this, so one change resizes the sidebar site-wide. */ --sidebar-w: 324px; --nav-h: 116px; } /* ============ Base ============ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } /* Always reserve the scrollbar gutter so opening a modal (which locks page scroll) never widens the page and shifts content sideways. */ html { scrollbar-gutter: stable; } body { margin: 0; background: var(--c-page); color: var(--c-ink); font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-ink); line-height: 1.15; margin: 0; overflow-wrap: anywhere; } a { color: var(--c-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:not([class]):hover { color: var(--c-accent-strong); } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; } [x-cloak] { display: none !important; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; } /* ============ Buttons ============ */ .btn { --bg: var(--c-surface); --fg: var(--c-ink); --bd: var(--c-border); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1.5px solid var(--bd); border-radius: var(--r-input); background: var(--bg); color: var(--fg); font: 600 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .btn:hover { transform: translateY(-1px); color: var(--fg); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .btn--accent { --bg: var(--c-accent); --fg: #fff; --bd: transparent; box-shadow: var(--sh-cta); } .btn--accent:hover { --bg: var(--c-accent-strong); } .btn--primary { --bg: var(--c-primary); --fg: #fff; --bd: transparent; } .btn--teal { --bg: var(--c-teal); --fg: #fff; --bd: transparent; } .btn--teal:hover { --bg: var(--c-teal-d); } .btn--ghost { --bg: transparent; --fg: var(--c-ink); --bd: #D8E4EC; } .btn--sm { min-height: 44px; padding: 9px 18px; } .btn--block { width: 100%; min-height: 48px; } .btn--danger { background: #fff; border: 1.5px solid #F0C4BE; color: #C0392B; } .btn--danger:hover { border-color: #C0392B; background: #FDECEA; } /* ============ Flash ============ */ .flash-banner { background: #E1F5EE; border-bottom: 1px solid #9FE1CB; color: #0F6E56; text-align: center; padding: 12px 20px; font: 500 14px var(--font-body); } .flash-banner--error { background: #FDECEA; border-bottom-color: #F5C6C0; color: #B3261E; } /* ============ Avatar (photo or monogram) ============ */ .uav { position: relative; display: inline-grid; place-items: center; border-radius: 50%; clip-path: circle(50%); background: linear-gradient(135deg, #3E86AE, var(--c-link)); color: #fff; font-weight: 700; flex: none; line-height: 1; } /* When an actual image is shown, drop the gradient entirely - nothing to peek out behind the photo as a ring. The gradient exists ONLY for the monogram fallback. */ .uav--img { background: none; } /* Avatar wrapped as a link to the member profile (detail/comment contexts). */ .uav-link { display: inline-flex; flex: none; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .uav-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 52, 78, .18); } /* The image fills the box and is clipped once, smoothly, by the container's clip-path. With .uav--img the container has no background, so there is nothing behind the photo to show as a ring - no need to oversize the image. */ .uav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Impersonation bar: see the ".imp-bar" block near the end of this file. An earlier draft lived here; its `.imp-bar button` selector (0,1,1) outranked `.imp-bar__btn` (0,1,0) and forced navy-on-dark text onto the real button - roughly 1.7:1. */ /* ============ Header + navigation ============ */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--c-ink); white-space: nowrap; flex: none; text-decoration: none; } /* Логото е ЕДНОЦВЕТЕН силует, затова се рисува през mask + currentColor вместо : така взима цвета на контекста си - navy в белия хедър, бяло върху тъмния футър и auth панела - с един файл и без филтри или втора картинка. */ .brand__mark { width: 40px; height: 40px; flex: none; background: currentColor; -webkit-mask: url('../img/logo.png') no-repeat center / contain; mask: url('../img/logo.png') no-repeat center / contain; } /* Старият вид (син плочка с бяла шапка) - добави --tile на span-а, за да го върнеш. */ .brand__mark--tile { border-radius: var(--r-tile); display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)); -webkit-mask: none; mask: none; } .brand__mark--tile svg { width: 22px; height: 22px; } .brand b { color: var(--c-primary); font-weight: 700; margin-left: -.05em; } .brand__txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap; } .brand__txt small { font: 600 8px var(--font-body); letter-spacing: .155em; color: #8299AB; white-space: nowrap; } .nav__actions { display: flex; align-items: center; gap: 10px; flex: none; } .nav__div { width: 1px; height: 28px; background: var(--c-border); flex: none; } /* Hamburger: hidden on desktop, a 44x44 icon button on collapse (shown in the <=1080 block). Lives as the first .nav child so it sits far-left on phones. */ .nav__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-border); border-radius: 11px; background: #F1F6F9; color: var(--c-primary); cursor: pointer; flex: none; transition: background-color .15s, color .15s; } .nav__toggle:hover { background: var(--c-tint-blue); color: var(--c-ink); } .nav__toggle:active { transform: scale(.96); } /* Drawer-only blocks (notification shortcuts + promoted CTAs): never on desktop. */ .drawer-shortcuts, .drawer-cta { display: none; } .nav-cta { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--grad-hero); border-radius: 13px; } .nav-cta a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 10px; font: 700 13px var(--font-body); white-space: nowrap; text-decoration: none; } .nav-cta__on { background: var(--c-accent); color: #fff; transition: background .15s ease; } .nav-cta__on:hover { background: var(--c-accent-strong); } .nav-cta__off { color: #CFE2ED; transition: color .15s ease, background .15s ease; } .nav-cta__off:hover { color: #fff; background: rgba(255,255,255,.08); } .nav-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #F1F6F9; border: 1px solid #E4EDF3; color: #5A7488; text-decoration: none; flex: none; transition: background-color .15s, color .15s, border-color .15s; } .nav-bell:hover { background: var(--c-tint-blue); color: var(--c-ink); } .nav-bell.is-on { background: #E7F0F6; border-color: #CFE0EC; color: var(--c-link); } .nav-bell__dot { position: absolute; top: -5px; right: -5px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--c-accent-strong); color: #fff; font: 700 10px/1 var(--font-body); display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; } .nav-bell__dot[hidden] { display: none; } .nav-bar { display: flex; align-items: center; height: 52px; border-top: 1px solid var(--c-divider); } .nav__links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; } .nav-list { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; margin: 0; padding: 0; } .nav-list > li { display: flex; flex: none; } .nav__link { padding: 8px 14px; border-radius: 10px; color: #4A6274; font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none; } .nav__link:hover { background: var(--c-tint-blue); color: var(--c-ink); } .nav__link[aria-current="page"] { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; } .nav-priority-hidden { display: none; } .nav-more { position: relative; } .nav-more-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; background: none; cursor: pointer; color: #43617A; font: 500 13.5px var(--font-body); border-radius: var(--r-pill); white-space: nowrap; } .nav-more-trigger:hover { background: var(--c-tint-blue); color: var(--c-ink); } .nav-more .caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .65; } .nav-more-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-float); z-index: 50; } .nav-more-dropdown .dropdown-item { display: block; padding: 9px 12px; border-radius: 9px; color: #43617A; font: 500 13.5px var(--font-body); text-decoration: none; white-space: nowrap; } .nav-more-dropdown .dropdown-item:hover { background: var(--c-tint-blue); color: var(--c-ink); } .nav-more-dropdown .dropdown-item.active { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; } /* ---- User menu ---- */ .usermenu { position: relative; } .usermenu__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: var(--r-pill); background: none; cursor: pointer; color: var(--c-ink); font: 600 13.5px var(--font-body); white-space: nowrap; transition: background-color .15s, border-color .15s; } .usermenu__trigger:hover { background: var(--c-tint-blue); border-color: var(--c-border); } .usermenu__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .usermenu__caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 3px 0 0; opacity: .55; } .usermenu__pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 236px; padding: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-float); z-index: 50; } .usermenu__head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; text-decoration: none; } .usermenu__id { display: flex; flex-direction: column; min-width: 0; } .usermenu__id b { font: 700 13.5px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usermenu__id small { font: 500 11.5px var(--font-body); color: var(--c-link); } .usermenu__sep { height: 1px; background: var(--c-divider); margin: 4px 6px; } .usermenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 9px; color: #43617A; font: 500 13.5px var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; text-align: left; } .usermenu__item svg { color: #7C93A6; flex: none; } .usermenu__item:hover { background: var(--c-tint-blue); color: var(--c-ink); } .usermenu__item:hover svg { color: var(--c-primary); } .usermenu__item.is-on { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; } .usermenu__item.is-on svg { color: var(--c-primary); } .usermenu__item--out { color: #C4563B; } .usermenu__item--out svg { color: #C4563B; } .usermenu__item--out:hover { background: #FDEBE5; color: #C4563B; } /* ============ Footer ============ */ .site-footer { background: var(--c-navy); color: #fff; position: relative; overflow: hidden; } /* Subtle diagonal-stripe texture (harvested from SimpleShop "Latte") - faint white lines over the navy footer. */ .site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, .03) 10px, rgba(255, 255, 255, .03) 11px); } .site-footer > * { position: relative; z-index: 1; } .site-footer .container { padding-block: 48px 30px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer-grid--wide { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } .footer-brand .brand { color: #fff; font-size: 13px; } /* Тъмен футър: маската взима currentColor (#fff от .footer-brand .brand). */ .footer-brand .brand__mark { width: 36px; height: 36px; background: currentColor; } .footer-brand .brand b { color: #6FA9CB; } .footer-brand p { margin: 14px 0 0; font: 400 13px/1.65 var(--font-body); color: var(--c-navy-muted); max-width: 300px; } /* The platform's own social accounts, in the brand column. The brand SVGs carry their own colour (#0866FF, #FF0069), which reads as noise on the navy - masked to white they stay one family with the rest of the footer. */ .footer-social { display: flex; gap: 10px; margin-top: 18px; } .footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .footer-social a:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); } .footer-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .footer-social__ic { width: 19px; height: 19px; background: #fff; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } .footer-col h4 { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--c-navy-head); margin: 0 0 14px; } .footer-col a { display: block; color: var(--c-navy-text); font: 400 13.5px var(--font-body); padding: 4.5px 0; } .footer-col a:hover { color: #fff; } .footer-col__btn { display: block; padding: 4.5px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--c-navy-text); font: 400 13.5px var(--font-body); transition: color .14s ease; } .footer-col__btn:hover { color: #fff; } /* ============ Cookie consent (granular) ============ */ .cconsent { position: fixed; inset: auto 0 0 0; z-index: 1200; display: flex; justify-content: center; padding: 16px; pointer-events: none; } .cconsent[hidden] { display: none; } .cconsent__card { pointer-events: auto; width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); box-shadow: 0 18px 50px rgba(15, 23, 42, .22); padding: 22px 24px; animation: cconsent-in .28s ease; } @keyframes cconsent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .cconsent__title { font: 700 17px var(--font-display); color: var(--c-ink); margin: 0 0 8px; } .cconsent__body { font: 400 13.5px/1.6 var(--font-body); color: var(--c-muted); margin: 0 0 14px; } .cconsent__link { color: var(--c-link); text-decoration: underline; } .cconsent__cats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .cconsent__cat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 11px; cursor: pointer; transition: background .14s ease; } .cconsent__cat:hover { background: var(--c-tint, #f2f6fb); } .cconsent__cat.is-locked { cursor: default; } .cconsent__cat.is-locked:hover { background: none; } .cconsent__cat-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cconsent__cat-tx b { font: 600 13.5px var(--font-body); color: var(--c-ink); } .cconsent__cat-tx small { font: 400 12px var(--font-body); color: var(--c-muted); } /* Това е ПРЕВКЛЮЧВАТЕЛ, не отметка: border: 0 го пази от глобалното правило по-долу, което иначе би му сложило рамка на квадратна отметка. */ .cconsent__cat input[type="checkbox"] { flex: 0 0 auto; width: 40px; height: 22px; appearance: none; -webkit-appearance: none; border: 0; background: #cbd5e1; border-radius: 999px; position: relative; cursor: pointer; transition: background .16s ease; } .cconsent__cat input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .16s ease; } .cconsent__cat input[type="checkbox"]:checked { background: var(--c-primary); } .cconsent__cat input[type="checkbox"]:checked::after { transform: translateX(18px); } .cconsent__cat input[type="checkbox"]:disabled { background: var(--c-success, #2fa39a); opacity: .8; cursor: default; } .cconsent__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } @media (max-width: 520px) { .cconsent { padding: 10px; } .cconsent__card { padding: 18px 18px; } .cconsent__acts { justify-content: stretch; } .cconsent__acts .btn { flex: 1 1 auto; } } .footer-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 22px; font: 400 12.5px var(--font-body); color: var(--c-navy-head); } /* ============ Responsive ============ */ @media (max-width: 1080px) { /* ---- Collapsed header: far-left hamburger + full-width drawer ---- */ :root { --nav-h: 64px; } /* header is now one 64px row */ .nav__toggle { display: inline-flex; } .nav { gap: 14px; } .brand { margin-right: auto; } /* [toggle][brand] .......... [actions] */ .nav-cta { display: none; } /* the two CTAs move into the drawer */ .usermenu__name { display: none; } /* avatar + caret only */ .nav-bar { position: static; height: 0; border-top: 0; overflow: visible; } .nav-bell { width: 44px; height: 44px; } /* touch floor while bells stay in the row */ /* Links are hidden until the drawer opens. */ .nav__links { display: none; } .nav__links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: 0; right: 0; top: 100%; /* drops below the header, wrap-safe */ max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 12px var(--pad) calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--sh-card); z-index: 40; } .nav__links.is-open .nav-list { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; } .nav__links.is-open .nav-list > li { width: 100%; } .nav__links.is-open .nav__link { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 12px 14px; font-size: 15px; } /* Always the full flat list in the drawer - no priority folding. */ .nav__links.is-open .nav-priority-hidden { display: flex; } .nav__links.is-open .nav-more { display: none !important; } /* Promoted CTAs at the drawer foot. */ .drawer-cta { display: grid; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--c-divider); } .drawer-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 11px; font: 700 14px var(--font-body); text-decoration: none; transition: background-color .15s, color .15s; } .drawer-cta__on { background: var(--c-accent); color: #fff; } .drawer-cta__on:hover { background: var(--c-accent-strong); } .drawer-cta__off { background: #F1F6F9; color: var(--c-primary); border: 1px solid var(--c-border); } .drawer-cta__off:hover { background: var(--c-tint-blue); color: var(--c-ink); } .drawer-cta__reg { background: var(--c-teal); color: #fff; } .drawer-cta__reg:hover { background: var(--c-teal-d); } } @media (max-width: 760px) { :root { --pad: 20px; } .footer-grid { grid-template-columns: 1fr 1fr; } /* Drop the decorative brand tagline early so the collapsed row never crowds (auth: brand + 3 bells + usermenu; guest: brand + Вход + register). */ .brand__txt small { display: none; } } @media (max-width: 560px) { /* Phones: the bells + dividers leave the crowded top row (which would otherwise overflow and, under overflow-x:clip, silently swallow the hamburger itself). They reappear as the drawer's 3-up shortcut strip. */ .nav__actions > .nav-bell, .nav__actions > .nav__div { display: none; } /* Guests: the wide register pill would shove Вход (and itself) off-screen, where overflow-x:clip silently swallows both. Keep only Вход in the row; register lives in the drawer (.drawer-cta__reg). */ .nav__actions > .btn--teal { display: none; } .nav { gap: 10px; } .drawer-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-divider); } .drawer-sc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 8px 6px; border: 1px solid var(--c-border); border-radius: 12px; background: #F7FAFC; color: var(--c-primary); text-decoration: none; transition: background-color .15s, color .15s; } .drawer-sc:hover { background: var(--c-tint-blue); color: var(--c-ink); } .drawer-sc.is-on { background: #E7F0F6; border-color: #CFE0EC; color: var(--c-link); } .drawer-sc__ic { position: relative; display: grid; place-items: center; } .drawer-sc__ic .nav-bell__dot { top: -7px; right: -10px; } .drawer-sc__lb { font: 600 11px var(--font-body); text-align: center; line-height: 1.2; color: var(--c-muted); } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ============ Forms ============ */ .field { display: flex; flex-direction: column; gap: 7px; } .label { font: 600 13px var(--font-body); color: var(--c-ink); } .label .req { color: var(--c-accent-strong); } .input, .select, .textarea { width: 100%; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; color: var(--c-ink); font: 400 14.5px var(--font-body); padding: 11px 14px; transition: border-color var(--dur-fast) var(--ease-out); } .input::placeholder, .textarea::placeholder { color: var(--c-faint); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(55,127,169,.12); } .textarea { resize: vertical; min-height: 120px; } .select { appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .field__hint { font: 400 12px var(--font-body); color: var(--c-muted); } .field__err { font: 500 12.5px var(--font-body); color: var(--c-accent-strong); } .check { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px var(--font-body); color: var(--c-text); cursor: pointer; } .check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-primary); flex: none; } /* ============ Отметки и радио бутони ============ Браузърният контрол се изключва (appearance:none) и се рисува наш, за да съвпада с админския. Отметката и точката са background-image, не псевдо-елемент, за да няма разлика между браузърите. Правилата на отделните компоненти по-надолу пак печелят. */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 17px; height: 17px; border: 1.5px solid #C9D9E4; border-radius: 5px; background-color: #fff; background-repeat: no-repeat; background-position: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--c-primary); } input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:indeterminate { background-color: var(--c-primary); border-color: var(--c-primary); } input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E"); background-size: 100% 100%; } input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E"); background-size: 100% 100%; } input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 44%, transparent 47%); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { background-color: var(--c-surface-2); border-color: var(--c-border); cursor: not-allowed; opacity: .65; } .chip-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid #C9D9E4; font: 500 12.5px var(--font-body); color: #43617A; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .chip-check input { width: 15px; height: 15px; } .chip-check:not(:has(input:checked)):hover { border-color: var(--c-primary); background: #F4F9FC; color: var(--c-ink); } .chip-check:has(input:checked) { background: var(--c-tint-blue); border-color: var(--c-primary); color: var(--c-ink); } /* ============ Auth portal ============ */ .auth-screen { min-height: 100vh; display: grid; grid-template-columns: 44% 56%; background: #fff; transition: grid-template-columns .35s var(--ease-out); } .auth-screen.is-reg { grid-template-columns: 34% 66%; } .auth-brand { background: linear-gradient(160deg, var(--c-navy), var(--c-navy-d)); color: #fff; padding: 52px 56px; display: flex; flex-direction: column; } .auth-brand__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 800 17px var(--font-display); } /* Тъмен auth панел: същото - логото става бяло само по себе си. */ .auth-brand__logo .brand__mark { width: 38px; height: 38px; background: currentColor; color: #fff; } .auth-brand__logo b { color: var(--c-primary); } .auth-brand__body { margin: auto 0; max-width: 440px; } .auth-brand__body h1 { color: #fff; font: 800 clamp(28px, 3vw, 40px)/1.14 var(--font-display); } .auth-brand__body p { margin-top: 18px; color: var(--c-navy-text); font: 400 16px/1.65 var(--font-body); } .auth-brand__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .auth-brand__points li { display: flex; align-items: center; gap: 11px; color: var(--c-navy-text); font: 500 14px var(--font-body); } .auth-brand__points svg { flex: none; color: var(--c-teal); } .auth-brand__foot { color: var(--c-navy-muted); font: 500 12px var(--font-body); display: flex; flex-direction: column; gap: 4px; } .auth-main { display: flex; justify-content: center; align-items: center; padding: 44px 40px; } .auth-panel { width: 100%; max-width: 400px; transition: max-width .35s var(--ease-out); } .auth-screen.is-reg .auth-panel { max-width: 660px; } /* auto-fit, so the strip collapses to a single full-width tab when registrations are closed from Site config and the "Регистрация" tab is not rendered. */ .auth-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 5px; background: var(--c-surface-2); padding: 5px; border-radius: 13px; margin-bottom: 26px; } .auth-tab { border: 0; background: none; padding: 11px; border-radius: 9px; font: 700 14px var(--font-body); color: var(--c-muted-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } /* Неактивният таб трябва да отговаря на мишката, иначе изглежда като надпис, не като бутон. Активният вече е бял, затова му се дава само лек тласък нагоре по сянката. */ .auth-tab:hover:not(.is-on) { background: rgba(255, 255, 255, .55); color: var(--c-ink); } .auth-tab.is-on { background: #fff; color: var(--c-ink); box-shadow: 0 1px 3px rgba(20, 52, 78, .12); } .auth-tab.is-on:hover { box-shadow: 0 2px 7px rgba(20, 52, 78, .16); } .auth-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .auth-form { width: 100%; padding: 0; } .auth-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .pwd { position: relative; } .pwd .input { padding-right: 42px; } .pwd .toggle { position: absolute; right: 10px; bottom: 8px; background: none; border: 0; color: var(--c-faint); cursor: pointer; padding: 4px; display: grid; place-items: center; } /* ---- Registration: smart password + confirm + interests counter + submit ---- */ .pw-wrap { position: relative; } .pw-wrap .input { padding-right: 42px; } .pw-wrap .toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--c-faint); cursor: pointer; padding: 5px; display: grid; place-items: center; border-radius: 7px; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .pw-wrap .toggle:hover { color: var(--c-primary); background: var(--c-tint-blue); } /* Live password requirements. Always rendered (not x-show), so the rule is readable BEFORE anything is typed - nobody should fill a whole form and only then learn it. */ .pw-reqs { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .pw-reqs li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); transition: color var(--dur-fast) var(--ease-out); } .pw-reqs__mark { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--c-hairline); position: relative; flex: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .pw-reqs li.is-ok { color: var(--c-success-ink); } .pw-reqs li.is-ok .pw-reqs__mark { background: var(--c-success); border-color: var(--c-success); } .pw-reqs li.is-ok .pw-reqs__mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); } .pw-meter { display: flex; align-items: center; gap: 9px; margin-top: 2px; } .pw-meter__bars { display: flex; gap: 4px; flex: 1; } .pw-meter__bars i { height: 4px; flex: 1; border-radius: 3px; background: var(--c-divider); transition: background var(--dur-med, .2s) var(--ease-out); } .pw-meter[data-s="1"] .pw-meter__bars i:nth-child(-n+1) { background: var(--c-accent-strong); } .pw-meter[data-s="2"] .pw-meter__bars i:nth-child(-n+2) { background: var(--c-amber); } .pw-meter[data-s="3"] .pw-meter__bars i:nth-child(-n+3) { background: var(--c-primary); } .pw-meter[data-s="4"] .pw-meter__bars i { background: var(--c-teal); } .pw-meter__label { font: 600 11.5px var(--font-body); color: var(--c-muted); min-width: 42px; text-align: right; } .pw-match { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font-body); margin-top: 1px; } .pw-match.is-ok { color: var(--c-teal-d); } .pw-match.is-no { color: var(--c-accent-strong); } .areas-count { color: var(--c-primary); font-weight: 700; } .btn .btn-spin { display: inline-flex; align-items: center; gap: 8px; } .btn .spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: btnspin .7s linear infinite; } .btn.is-loading { cursor: progress; } @keyframes btnspin { to { transform: rotate(360deg); } } /* Разделителят е ПОД заглавието на секцията: тънка линия през цялата ширина, върху която стои къса плътна чертичка, подравнена с номера. Линията разделя, чертичката я прави отчетлива, без да се утежнява формата с втора дебела черта. */ .auth-section + .auth-section { margin-top: 30px; } .auth-section__head { position: relative; display: flex; align-items: center; gap: 11px; font: 700 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); } .auth-section__head::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 46px; height: 3px; border-radius: 3px; background: var(--c-primary); } .auth-section__head span { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--c-primary); color: #fff; display: grid; place-items: center; font: 700 12px var(--font-display); box-shadow: 0 2px 6px rgba(55, 127, 169, .28); } .auth-section .reg-grid { margin-top: 0; } .reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; } .reg-grid .full { grid-column: 1 / -1; } .opt { font: 500 11px var(--font-body); color: var(--c-faint); } /* Registration: smart visible multiselect for science areas (search + scrollable chip grid) */ .apick { border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .apick:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(55, 127, 169, .12); } .apick__search { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--c-divider); color: var(--c-faint); } .apick__search > input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font-body); color: var(--c-ink); padding: 0; } .apick__search > input::placeholder { color: var(--c-faint); } .apick__clear { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--c-page); color: var(--c-muted); cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .apick__clear:hover { background: var(--c-surface-2); color: var(--c-ink); } .apick__list { display: block; padding: 6px 13px 12px; max-height: 230px; overflow-y: auto; } .apick__group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .apick__gh { flex-basis: 100%; margin: 8px 0 2px; padding: 0; font: 700 11px var(--font-body); letter-spacing: .06em; color: var(--c-muted); } .apick__group:first-child .apick__gh { margin-top: 0; } /* full-width custom dropdown inside form fields (was inline-block -> rendered narrow) */ .field > .uidrop { display: block; width: 100%; } .field > .uidrop .uidrop__btn { height: 46px; font: 500 14.5px var(--font-body); } /* clear-all areas button */ .areas-clear { margin-left: 8px; padding: 2px 9px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-muted-2); font: 600 11px var(--font-body); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .areas-clear:hover { background: var(--c-tint-blue); color: var(--c-primary); border-color: var(--c-primary); } .interests { border: 1.5px solid #D8E4EC; border-radius: 11px; padding: 11px 12px; display: flex; flex-wrap: wrap; gap: 7px; min-height: 46px; align-items: center; } .consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font: 400 12.5px/1.5 var(--font-body); color: #43617A; } /* align-items:flex-start слепва кутийката за горния ръб на реда - едно косъмче надолу я изравнява с първия ред текст (беше inline style на самия input). */ .consent input[type="checkbox"] { margin-top: 1px; } .consent a { color: var(--c-link); font-weight: 600; } .avatar-up { display: flex; align-items: center; gap: 16px; } .avatar-up__drop { width: 74px; height: 74px; border-radius: 50%; border: 2px dashed #C9D9E4; background: #F6FAFC; display: grid; place-items: center; color: var(--c-muted); cursor: pointer; overflow: hidden; flex: none; transition: border-color .15s, background .15s; } .avatar-up__drop:hover { border-color: var(--c-primary); background: #EEF5F9; } .avatar-up__drop img { width: 100%; height: 100%; object-fit: cover; } .avatar-up__title { font: 600 13px var(--font-body); color: var(--c-ink); } .avatar-up__acts { display: flex; gap: 8px; margin-top: 8px; } .avatar-up__btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px; border: 1.5px solid #D8E4EC; background: #fff; color: var(--c-link); font: 600 12.5px var(--font-body); cursor: pointer; } .avatar-up__btn:hover { background: var(--c-tint-blue); } .avatar-up__btn--rm { color: #C0392B; border-color: #F0C4BE; } @media (max-width: 860px) { .auth-screen, .auth-screen.is-reg { grid-template-columns: 1fr; } .auth-brand { padding: 34px 26px; } .auth-brand__body { margin: 20px 0; max-width: none; } .auth-brand__body h1 { font-size: 26px; } .auth-brand__points { display: none; } .auth-main { padding: 32px 24px; } .auth-screen.is-reg .auth-panel { max-width: 100%; } } @media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } } /* ============================================================ QUESTIONS module (Ф8.2) - list / detail / ask. Rebuilt VERBATIM from the V2 design system (app.css). V2 is the source of truth for the look. Logic stays etalon-bound. ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -- Module hero band: copied 1:1 from the V2 channel hero (.chero) -- */ .page-hero { color: #fff; padding-block: 36px; } /* CONSISTENT header band: whenever a hero carries breadcrumbs, the crumbs--hero (22px) IS the top offset - the hero must not add its own 36px on top. One rule for every variant (list/detail/area/mat), so they never drift apart again. */ .page-hero:has(.crumbs--hero) { padding-top: 0; } .page-hero h1 { color: #fff; font-size: 26px; font-weight: 700; } .page-hero--q, .page-hero--detail { background: var(--grad-hero); } .page-hero .sub { font: 400 14.5px/1.6 var(--font-body); color: #CFE2ED; margin: 8px 0 0; max-width: 640px; } .page-hero .sub b { color: #fff; } .page-hero .sub a { color: #fff; text-decoration: none; } .page-hero .sub a:hover { text-decoration: underline; } .msg-ghostbtn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); font: 600 13.5px var(--font-body); color: #fff; text-decoration: none; } .msg-ghostbtn:hover { color: #fff; background: rgba(255,255,255,.14); } /* All hero bands are top-aligned; the breadcrumb (crumbs--hero) is always the first row at a consistent offset, so it never shifts between pages. */ .chero { padding-block: 0; } .chero__id { display: flex; gap: 24px; align-items: flex-start; padding-block: 0 22px; } .chero__ava { width: 132px; height: 132px; border-radius: 16px; flex: none; display: grid; place-items: center; overflow: hidden; border: 3px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; } .chero__ava img { width: 100%; height: 100%; object-fit: contain; padding: 12px; } .chero__tt { flex: 1; min-width: 0; color: #fff; align-self: center; } .chero__tt h1 { font: 700 28px var(--font-display); color: #fff; } .chero__name { display: inline-block; font: 700 28px var(--font-display); color: #fff; text-decoration: none; } .chero__name:hover { color: #CFE2ED; } .chero__acts { display: flex; flex-direction: column; gap: 10px; flex: none; align-self: center; } .ctabs--hero { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.14); overflow-x: auto; } .ctabs--hero a, .ctabs--hero button { display: inline-flex; align-items: center; gap: 7px; color: #8FA3B5; padding: 12px 4px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 14px var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; } .ctabs--hero a:hover, .ctabs--hero button:hover { color: #fff; } .ctabs--hero a.on, .ctabs--hero button.on { color: #fff; border-bottom-color: var(--c-accent); } @media (max-width: 760px) { .chero__id { flex-wrap: wrap; } .chero__ava { width: 88px; height: 88px; } .chero__acts { align-self: stretch; } .chero__tt { flex-basis: 100%; } } /* -- List layout -- */ .ql-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 26px 48px; } .ql-feed { min-width: 0; } .ql-side { display: flex; flex-direction: column; gap: 16px; } /* -- List toolbar -- */ .ql-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .ql-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 9px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 16px; } .ql-search svg { color: var(--c-faint); flex: none; } .ql-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 13.5px var(--font-body); color: var(--c-ink); } .ql-search input::placeholder { color: var(--c-faint); } .ql-drop { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 15px; font: 500 13px var(--font-body); color: var(--c-ink); cursor: pointer; white-space: nowrap; } .ql-drop svg { color: var(--c-muted-2); } .ql-drop select { border: 0; outline: 0; background: transparent; font: 600 13px var(--font-body); color: var(--c-ink); cursor: pointer; } /* -- Question card list -- */ .ql-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; } /* Each question as its own card, one per row (etalon style) */ .ql-cards { display: flex; flex-direction: column; gap: 14px; } /* Публичните списъци ползват a.qcard - НЕ се пипа. "Моите данни" ползва article.qcard, защото там в картата има форма за изтриване, а форма в анкер е невалидна разметка. */ a.qcard, article.qcard { display: flex; gap: 18px; padding: 20px 24px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); position: relative; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; } a.qcard::before, article.qcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-primary); opacity: 0; transition: opacity .16s ease; } a.qcard:hover, article.qcard:hover { border-color: #BFD6E6; box-shadow: 0 10px 26px rgba(20,52,78,.10); transform: translateY(-2px); } a.qcard:hover::before, article.qcard:hover::before { opacity: 1; } /* Hover stripe signals answered state: our green if answered, soft red if not. */ a.qcard--ok::before, article.qcard--ok::before { background: var(--c-success); } a.qcard--need::before, article.qcard--need::before { background: var(--c-accent-strong); } a.qcard:hover .ql-title, article.qcard:hover .ql-title { color: var(--c-primary); } a.qcard:hover .qgo, article.qcard:hover .qgo { filter: brightness(.96); } /* Въпрос към УНИВЕРСИТЕТ. Стои редом с въпроси по научна област само в "Въпроси към мен", и там двата вида трябва да се различават от пръв поглед. Разликата е тинт по горния ръб плюс плътния навy чип - НЕ цветен ляв кант (забранен навсякъде в проекта); съществуващата лента отляво си остава каквато е, тоест само на hover. */ a.qcard--uni, article.qcard--uni { background: linear-gradient(180deg, #F6FAFD, #FFFFFF 96px); border-color: #D3E3EE; } a.qcard--uni:hover, article.qcard--uni:hover { border-color: #A9C8DC; } a.qcard--uni::before, article.qcard--uni::before { background: var(--c-navy); } /* Светъл тинт, не плътно navy: чипът стои редом с пастелните чипове на областите и плътният цвят го правеше тежък. Иконата носи разликата, цветът само подсказва. */ .chip-cat--uni { gap: 5px; background: #E6EDF4; color: #1D4468; } .chip-cat--uni svg { opacity: .65; } /* Картата в "Моите данни": заглавието е линкът и се разтяга върху цялата карта, а бутоните стоят НАД него. Така цялата карта пак се цъка, но "Редактирай" и "Изтрий" остават достъпни - което един обгръщащ анкер не позволява. */ article.qcard .qcard__link { color: inherit; text-decoration: none; } article.qcard .qcard__link::after { content: ''; position: absolute; inset: 0; } article.qcard:hover .qcard__link { color: var(--c-primary); } .qcard__acts { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { article.qcard { flex-wrap: wrap; } .qcard__acts { width: 100%; justify-content: flex-end; } } .qcard--empty { display: block; padding: 44px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); } .qempty__lnk { color: var(--c-link); font-weight: 600; text-decoration: none; } .qempty__lnk:hover { color: var(--c-primary-d); text-decoration: underline; } a.ql-row { display: flex; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--c-divider); position: relative; color: inherit; text-decoration: none; transition: background .15s; } a.ql-row:last-child { border-bottom: 0; } a.ql-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-primary); opacity: 0; transition: opacity .15s; } a.ql-row:hover { background: #F6FAFD; } a.ql-row:hover::before { opacity: 1; } a.ql-row:hover .ql-title { color: var(--c-primary); } a.ql-row:hover .qgo { filter: brightness(.96); } .atile { flex: none; width: 74px; height: 74px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .atile b { font: 700 19px var(--font-display); line-height: 1; } .atile span { font: 500 10.5px var(--font-body); } .atile--need { background: #FFF3EF; color: var(--c-accent-strong); } .atile--ok { background: var(--c-success-bg); color: var(--c-teal-d); } /* Compact answer-count tile for narrow sidebars (number only, no label). */ .atile--sm { width: 34px; height: 34px; border-radius: 9px; gap: 0; } .atile--sm b { font: 700 14px var(--font-display); } .ql-body { flex: 1; min-width: 0; } .ql-th { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ql-title { font: 700 15.5px var(--font-body); color: var(--c-ink); transition: color .15s; } .qbadge { font: 700 10.5px var(--font-body); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; } .qbadge--help { background: #FDEBE5; color: #C4563B; } .ql-excerpt { font: 400 13.5px/1.6 var(--font-body); color: var(--c-text); margin-top: 6px; } .ql-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; } /* Нулев по размер елемент, който заема цял ред и така пренася авторския ред надолу. Стандартният начин за принудителен пренос във flex - без него авторът се лепи до чиповете и редът се чете разбъркано при дълги имена на област/университет. */ .ql-meta__br { flex-basis: 100%; height: 0; margin: 0; } .ql-author { display: flex; align-items: center; gap: 7px; font: 500 12px var(--font-body); color: var(--c-muted); } .qgo { margin-left: auto; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: var(--r-pill); background: var(--c-tint-blue); color: var(--c-link); font: 600 12.5px var(--font-body); white-space: nowrap; transition: filter .15s; } .qgo--need { background: var(--c-primary); color: #fff; } /* The science-area filter grows to fill the toolbar but can shrink (was a rigid inline min-width:230px that grew the whole grid track past the viewport). */ .ql-toolbar .ql-sci.uidrop, .ql-toolbar .uidrop { flex: 1 1 220px; min-width: 0; } /* Phones: trim the fixed card chrome so the title/excerpt column is not starved. */ @media (max-width: 640px) { .qcard, a.ql-row { padding: 16px; gap: 12px; } .atile { width: 56px; height: 56px; } .atile b { font-size: 16px; } .qgo { padding: 9px 14px; } } /* -- Pagination -- */ .ql-pagin { display: flex; justify-content: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; } .ppage { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 11px; display: grid; place-items: center; font: 500 14px var(--font-body); background: #fff; border: 1px solid #D8E4EC; color: #43617A; text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease; } a.ppage:hover { background: var(--c-surface-2); border-color: #B4C9D7; color: var(--c-brand); } .ppage.active { background: var(--c-primary); color: #fff; font-weight: 600; border-color: var(--c-primary); } .ppage.gap { border: 0; background: none; } .ppage.off { opacity: .45; pointer-events: none; } /* -- Category (science area) chips -- */ .chip-cat { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill); font: 600 12px var(--font-body); } .chip-cat.sm { padding: 4px 11px; font-size: 11px; } .cat-med { background: #FDEBE5; color: #C4563B; } .cat-ped { background: #E2F3F1; color: var(--c-teal-d); } .cat-ikon { background: #FBF1DC; color: #9A6E14; } .cat-psi { background: #EDE9FB; color: #6A5ACD; } .cat-net { background: var(--c-tint-blue); color: var(--c-link); } .cat-blue { background: var(--c-surface-2); color: var(--c-link); } .chip-tag { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); font: 500 11px var(--font-body); background: var(--c-tint-blue); color: #43617A; } /* -- Sidebar cards (matched 1:1 to V2 side-card system) -- */ .side-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 22px 26px; } .side-card > h4 { font: 700 13px var(--font-body); color: var(--c-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-divider); } .side-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-divider); } /* Изрично, а не по наследство: h4 тук НЕ е пряк наследник на .side-card, значи правилото `.side-card > h4` (13px) не го хваща и заглавието падаше на 14.5px от body-то - а с широкия Unbounded два думи вече не се събираха на един ред. */ .side-card__head h4 { font: 700 13.5px var(--font-display); color: var(--c-ink); margin: 0; padding: 0; border: 0; } .side-card__more { font: 600 12px var(--font-body); color: var(--c-link); text-decoration: none; white-space: nowrap; flex: none; } .side-card__more:hover { text-decoration: underline; } .side-illus { border-radius: var(--r-feature); overflow: hidden; color: #fff; background: linear-gradient(135deg, #8A4936, var(--c-navy)); padding: 22px 20px; text-align: center; } .side-illus--q { background: linear-gradient(135deg, #2C6188, var(--c-navy)); } .side-illus--vid { background: linear-gradient(135deg, #20776F, var(--c-navy)); } .side-illus--book { background: linear-gradient(135deg, var(--c-teal-d), #0F3A36); } .side-illus--uni { background: linear-gradient(135deg, var(--c-primary-d), var(--c-navy)); } .side-illus--area { background: linear-gradient(135deg, var(--c-teal-d), var(--c-navy)); } .side-illus--search { background: linear-gradient(135deg, #22506F, var(--c-navy)); } .side-illus--mat { background: linear-gradient(135deg, var(--c-link), var(--c-navy)); } .side-illus__tile { width: 200px; max-width: 80%; aspect-ratio: 1 / 1; margin: 0 auto 15px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; } .side-illus__tile img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; } .side-illus__body { min-width: 0; } .side-illus__body .eyebrow { font: 500 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); } .side-illus__body h4 { font: 700 16px var(--font-display); color: #fff; margin-top: 4px; border: 0; padding: 0; } .side-illus__body p { font: 400 12.5px/1.55 var(--font-body); color: rgba(255,255,255,.72); margin: 6px 0 0; } .rules { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .rules .rule { display: flex; gap: 9px; font: 400 12.5px/1.55 var(--font-body); color: var(--c-text); } .rules .rule .g { font-weight: 700; flex: none; display: inline-flex; } .rules .g-ok { color: var(--c-teal); } .rules .g-no { color: var(--c-accent-strong); } .rules__foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-divider); font: 400 11.5px/1.5 var(--font-body); color: var(--c-faint); } .dir-rank { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; } .dir-rank__row { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; padding: 8px; margin: 0 -8px; border-radius: 10px; transition: background .14s; } .dir-rank__row:hover { background: var(--c-surface-2); } .dir-rank__n { font: 700 13px var(--font-display); width: 16px; flex: none; text-align: center; color: var(--c-faint); } .dir-rank__n.n-0 { color: var(--c-amber); } .dir-rank__n.n-1 { color: var(--c-faint); } .dir-rank__n.n-2 { color: #C89A6B; } .dir-rank__id { min-width: 0; } .dir-rank__id .nm { font: 600 12.5px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-rank__id .mt { font: 400 11px var(--font-body); color: var(--c-faint); } .dir-rank__row:hover .nm { color: var(--c-brand); } .side-stat { background: #30949d; border-radius: var(--r-feature); padding: 22px 26px; color: #fff; } .side-stat h4 { font: 700 13px var(--font-body); color: #fff; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.2); } .side-stat__rows { display: flex; flex-direction: column; gap: 10px; } .side-stat__row { display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--font-body); color: #fff; } .side-stat__row b { color: #fff; } .side-stat__row--live span { color: #fff; } .side-stat__row--live b { color: #4ADE80; } /* All content+sidebar layouts converge on a single 900 collapse (the .sidebar-stack breakpoint), so the 900-980 band keeps two columns on small laptops. minmax(0,1fr) (not bare 1fr) caps the single column at container width so a rigid child cannot grow the track past the viewport. */ @media (max-width: 900px) { .ql-layout, .qa-grid { grid-template-columns: minmax(0, 1fr); } } /* -- Question detail -- */ .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 5px; font: 500 12.5px var(--font-body); padding-block: 24px 18px; } .crumbs a, .crumbs .cur { padding: 7px 13px; border-radius: var(--r-pill); } .crumbs a { background: #fff; border: 1px solid var(--c-border); color: #43617A; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .crumbs .cur { background: #DCE9F1; color: var(--c-ink); font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crumbs .sep { color: #B4C9D7; display: inline-flex; } /* STANDARDIZED header band: this ONE rule sets the gap between the breadcrumb separator and the hero content for EVERY page-hero. Content wrappers below (chero__id/ahero-id/bookh/vidh/nhero/hero-split) must NOT add their own top spacing - change the gap here, in one place, and every hero stays consistent. */ .crumbs--hero { padding-block: 22px 16px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); } .crumbs--hero a { background: rgba(255,255,255,.1); border-color: transparent; color: var(--c-navy-text); } .crumbs--hero a:hover { background: rgba(255,255,255,.18); color: #fff; } .crumbs--hero .cur { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; } .crumbs--hero .sep { color: rgba(255,255,255,.4); } .qa-wrap { padding-block: 24px 44px; } .qa-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; } /* MUST come after the base: this base line is later in source than the shared .ql-layout/.qa-grid collapse above, so .qa-grid needs its own collapse here or it never drops to one column (content squishes to 0 and the title stacks vertically). */ @media (max-width: 900px) { .qa-grid { grid-template-columns: minmax(0, 1fr); } } .qa-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .qa-side { display: flex; flex-direction: column; gap: 16px; } .qa-q { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 26px 30px; } .qa-q__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } /* Редът е: кой пита -> заглавие -> текст. Линията е под автора, тоест отделя "кой пита" от самия въпрос. */ .qa-asker { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-divider); } .qa-q h1 { margin-top: 18px; font: 700 23px/1.3 var(--font-display); color: var(--c-ink); } .qa-asker__name { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; } .qa-asker__name:hover { color: var(--c-link); } .qa-asker__meta { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; } .qa-q__body { margin-top: 18px; font: 400 14.5px/1.75 var(--font-body); color: #2A3F52; white-space: pre-line; word-wrap: break-word; } .qa-q__bar { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-divider); } .qa-abtn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 9px 16px; font: 600 12.5px var(--font-body); color: #43617A; cursor: pointer; text-decoration: none; } .qa-abtn:hover { border-color: #C9DCE8; } .qa-abtn--fb img { display: block; } .qa-abtn--fb:hover { border-color: #0866FF; color: #0866FF; background: #F3F7FF; } .qa-abtn--muted { border: 0; color: var(--c-muted); padding: 9px 4px; } .qa-answers__head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .qa-answers__head h2 { font: 700 17px var(--font-display); color: var(--c-ink); } /* Без overflow:hidden - то би отрязало падащото меню на отговора. Заоблянето на лентата "най-добър отговор" се поема от самата лента. */ .qa-ans { position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; } .qa-ans--accepted { border: 1.5px solid var(--c-success-bd); } .qa-ans__banner { display: flex; align-items: center; gap: 8px; background: var(--c-success-bg); color: var(--c-teal-d); font: 700 12px var(--font-body); padding: 10px 24px; border-radius: 17px 17px 0 0; } /* ---- Меню на въпрос и на отговор ---- Един и същ спусък и в двата случая: седи в реда си и се избутва вдясно с margin-left:auto, вместо да плава абсолютно над картата. Формата повтаря .qa-tbtn (34px, радиус 9px), за да не изглежда като чуждо тяло до него. */ .qa-kebab { margin-left: auto; } .qa-ans__head .qa-kebab { align-self: flex-start; } .qa-kebab .more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--c-muted-2); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .qa-kebab .more:hover { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-ink); } .qa-kebab .more[aria-expanded="true"] { background: var(--c-tint-blue); border-color: var(--c-primary); color: var(--c-primary); } .qa-kebab .more:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* Попапът е по-тесен от профилния - там са пет действия, тук е едно. */ .qa-kebab .mp-kebab__pop { min-width: 186px; } .qa-ans__row { display: flex; gap: 16px; padding: 22px 24px; } .qa-score { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #D9915B; flex: none; align-self: flex-start; padding-top: 2px; } .qa-score b { font: 700 18px var(--font-display); color: #43617A; line-height: 1; } .qa-ans--accepted .qa-score { color: var(--c-teal); } .qa-ans--accepted .qa-score b { color: var(--c-teal-d); } /* Дългото име не бута менюто извън реда. */ .qa-ans__who { min-width: 0; } .qa-ans__main { flex: 1; min-width: 0; } .qa-ans__head { display: flex; align-items: center; gap: 11px; } .qa-ans__name { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; } .qa-ans__name:hover { color: var(--c-link); } .qa-ans__date { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; } .qa-ans__body { margin-top: 14px; font: 400 14px/1.7 var(--font-body); color: #2A3F52; white-space: pre-line; word-wrap: break-word; } .qa-tcount { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-body); color: var(--c-muted); } .qa-tcount .icon { color: #D9915B; } /* Тънка линия отделя действията от текста - четат се като футър на отговора, а не като поредния ред от него. */ .qa-ans__actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-divider); } .qa-tbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-border); border-radius: 9px; background: #fff; padding: 7px 13px; font: 600 12.5px var(--font-body); color: #43617A; cursor: pointer; } .qa-tbtn:hover { border-color: #C9DCE8; } .qa-tbtn.is-thanked { background: var(--c-success-bg); border-color: var(--c-success-bd); color: var(--c-teal-d); } .qa-tbtn .icon { color: #D9915B; } .qa-tbtn.is-thanked .icon { color: #E4483D; fill: #E4483D; } .qa-answers { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .qa-empty { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 34px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); } .qa-form { margin-top: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 22px 24px; } .qa-form h3 { font: 700 14.5px var(--font-body); color: var(--c-ink); padding-bottom: 12px; border-bottom: 1px solid var(--c-divider); } .qa-form__row { display: flex; gap: 12px; margin-top: 12px; } .qa-form__box { flex: 1; min-width: 0; } .qa-form__box .textarea { min-height: 80px; } .qa-form__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; } /* The comment/answer submit is a form action, not a hero CTA - drop the coral glow. */ .qa-form__foot .btn--accent { box-shadow: none; } .qa-form__err { margin-top: 10px; padding: 9px 13px; border-radius: 10px; background: #FDECEA; border: 1px solid #F5C6C0; color: #B3261E; font: 500 12.5px var(--font-body); } .cmeta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .cmeta__row { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--font-body); color: var(--c-muted); } .cmeta__row a, .cmeta__row b { color: var(--c-ink); font-weight: 600; text-align: right; text-decoration: none; } .cmeta__row a { color: var(--c-link); } .crev__head { display: flex; align-items: center; justify-content: space-between; } .crel { display: flex; align-items: center; gap: 11px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .14s ease; } .crel + .crel { border-top: 1px solid var(--c-divider); } .crel:hover { background: var(--c-surface-2); } .crel:hover .crel__tt b { color: var(--c-brand); } .crel__ava { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: #fff; font: 700 13px var(--font-body); flex: none; } .g-navy { background: linear-gradient(135deg, var(--c-navy), var(--c-navy-d)); } .crel__tt b { display: block; font: 600 13px var(--font-body); color: var(--c-ink); } .crel__tt small { font: 500 11.5px var(--font-body); color: var(--c-muted); } .simq { display: flex; align-items: flex-start; gap: 11px; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; transition: background .14s; } .simq + .simq { margin-top: 2px; } .simq:hover { background: var(--c-surface-2); } .simq__ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #EAF4FB; color: var(--c-brand); } .simq__tt { min-width: 0; } .simq__tt b { display: block; font: 600 13px/1.35 var(--font-body); color: var(--c-ink); transition: color .12s; } .simq:hover .simq__tt b { color: var(--c-brand); } .simq__tt small { display: block; font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 3px; } .qa-follow { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-primary), var(--c-link)); border-radius: var(--r-feature); padding: 24px 26px; color: #fff; } .qa-follow::after { content: ''; position: absolute; top: -80px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); } .qa-follow h4 { color: #fff; font: 700 17px var(--font-display); position: relative; border: 0; padding: 0; } .qa-follow p { margin: 8px 0 14px; font: 400 13px/1.55 var(--font-body); color: #CFE2ED; position: relative; } .qa-follow__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-link); border: 0; border-radius: var(--r-pill); padding: 10px 18px; font: 600 13px var(--font-body); cursor: pointer; } .qa-follow__btn:hover { background: var(--c-tint-blue); } .qa-askcta p { font: 600 14px var(--font-body); color: var(--c-ink); margin-bottom: 12px; } /* -- Ask a question -- */ .ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 22px 48px; } .ask-side { display: flex; flex-direction: column; gap: 16px; } .ask-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 30px 34px; } .ask-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ask-cell .label, .ask-block .label { display: block; margin-bottom: 7px; } .ask-block { margin-top: 18px; } .ask-full { grid-column: 1 / -1; } .ask-empty { padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--r-input); background: var(--c-tint-blue); font: 500 13px var(--font-body); color: var(--c-muted); } .ask-empty a { color: var(--c-link); font-weight: 600; } .req { color: var(--c-accent-strong); } .seg { display: flex; gap: 8px; } .seg__opt { flex: 1; display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 14px; font: 500 13px var(--font-body); color: #43617A; cursor: pointer; } .seg__opt.active { border: 2px solid var(--c-primary); background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; } .seg__dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #C9D9E4; flex: none; box-sizing: border-box; } .seg__opt.active .seg__dot { border: 5px solid var(--c-primary); } .ask-count { text-align: right; font: 400 11.5px var(--font-body); color: var(--c-faint); margin-top: 5px; } /* Unified submission (/izprati): 4-tile type picker + per-type field blocks. */ .subtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .subtile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 15px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; } .subtile:hover { border-color: var(--c-primary); background: var(--c-tint-blue); transform: translateY(-1px); } .subtile.active { border: 2px solid var(--c-primary); background: var(--c-tint-blue); padding: 12.5px 14px; } .subtile__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-muted); flex: none; transition: background .14s ease, color .14s ease; } .subtile.active .subtile__ic { background: var(--c-primary); color: #fff; } .subtile[data-type="otziv"] .subtile__ic { background: #FBF1DC; color: var(--c-amber); } .subtile[data-type="otziv"].active .subtile__ic { background: var(--c-amber); color: #fff; } .subtile__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .subtile__tx b { font: 600 14px var(--font-body); color: var(--c-ink); } .subtile__tx small { font: 400 12px var(--font-body); color: var(--c-muted); line-height: 1.35; } .lbl-opt { font-weight: 400; color: var(--c-faint); } /* Anonymous checkbox (Друго). */ .subcheck { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .subcheck input { position: absolute; opacity: 0; width: 0; height: 0; } .subcheck__box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--c-border); display: grid; place-items: center; color: #fff; background: #fff; flex: none; margin-top: 1px; transition: background .14s ease, border-color .14s ease; } .subcheck__box svg { opacity: 0; transition: opacity .12s ease; } .subcheck input:checked + .subcheck__box { background: var(--c-primary); border-color: var(--c-primary); } .subcheck input:checked + .subcheck__box svg { opacity: 1; } .subcheck__tx { display: flex; flex-direction: column; gap: 1px; } .subcheck__tx b { font: 600 13.5px var(--font-body); color: var(--c-ink); } .subcheck__tx small { font: 400 12px var(--font-body); color: var(--c-muted); } /* Native-radio checked state for .crev-rate (submit form runs plain JS, no Alpine). */ .crev-rate__o:has(input:checked) { border-color: var(--c-teal); background: #E9F6F4; } .crev-rate__o:has(input:checked) .crev-rate__ic { background: var(--c-teal); color: #fff; } .crev-rate__o--neg:has(input:checked) { border-color: var(--c-accent); background: #FFF1EC; } .crev-rate__o--neg:has(input:checked) .crev-rate__ic { background: var(--c-accent-strong); color: #fff; } /* Help card in the submit sidebar. */ .sub-help { text-align: center; padding: 22px 20px; } .sub-help__ic { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--c-tint-blue); color: var(--c-primary); margin-bottom: 10px; } .sub-help h4 { font: 700 15px var(--font-display); color: var(--c-ink); margin-bottom: 5px; } .sub-help p { font: 400 13px var(--font-body); color: var(--c-muted); line-height: 1.55; margin-bottom: 12px; } .sub-help__lnk { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--font-body); color: var(--c-link); } .sub-help__lnk:hover { gap: 9px; color: var(--c-primary); } @media (max-width: 560px) { .subtiles { grid-template-columns: 1fr; } } /* Отзиви за платформата (/otzivi): testimonial wall. */ .rev-summary { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 14px var(--font-body); color: rgba(255,255,255,.85); } .rev-summary b { color: #fff; font-weight: 700; } .rev-summary__dot { opacity: .5; } .rev-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .rev-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 22px 20px; transition: border-color .15s ease, transform .15s ease; } .rev-card:hover { border-color: var(--c-primary); transform: translateY(-2px); } .rev-card__star { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #FBF1DC; color: var(--c-amber); flex: none; } .rev-card__q { font: italic 400 15px/1.6 var(--font-body); color: var(--c-ink); flex: 1; } .rev-card__who { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--c-divider); } .rev-card__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .rev-card__id b { font: 600 13.5px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rev-card__id small { font: 400 12px var(--font-body); color: var(--c-muted); } .rev-card__chlink { color: var(--c-link); font-weight: 600; } .rev-card__chlink:hover { color: var(--c-primary); text-decoration: underline; } .rev-card__badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font: 600 11.5px var(--font-body); flex: none; } .rev-card__badge.is-pos { background: #E9F6F4; color: var(--c-teal); } .rev-card__badge.is-neg { background: #FFF1EC; color: var(--c-accent-strong); } .rev-empty { text-align: center; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .rev-empty__ic { color: var(--c-faint); } .rev-empty p { font: 400 15px var(--font-body); color: var(--c-muted); max-width: 420px; } @media (max-width: 900px) { .rev-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .rev-wall { grid-template-columns: 1fr; } } .ask-upload { display: flex; gap: 10px; flex-wrap: wrap; } .upl-cell { position: relative; } .upl-slot { position: relative; width: 96px; height: 72px; border-radius: 11px; border: 1.5px dashed #C9D9E4; display: grid; place-items: center; background: none; cursor: pointer; color: var(--c-faint); overflow: hidden; transition: border-color .15s, color .15s; } .upl-slot:hover { border-color: var(--c-brand); color: var(--c-brand); } .upl-slot--filled { border-style: solid; border-color: var(--c-brand); } .upl-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .upl-thumb { width: 100%; height: 100%; object-fit: cover; } .upl-plus { display: grid; place-items: center; pointer-events: none; } .upl-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--c-navy); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: 0 1px 4px rgba(20,52,78,.3); } .upl-x:hover { background: var(--c-navy-d); } .ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-divider); flex-wrap: wrap; } .ask-note { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px var(--font-body); color: var(--c-muted); } .ask-note svg { color: var(--c-teal); flex: none; } .ask-submit { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; border: 0; border-radius: var(--r-tile); background: var(--c-accent); color: #fff; font: 700 14.5px var(--font-body); box-shadow: 0 6px 16px rgba(240,123,93,.35); cursor: pointer; white-space: nowrap; } .ask-submit:hover { background: var(--c-accent-strong); } .rules-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .rules-head__chip { width: 34px; height: 34px; border-radius: 10px; background: var(--c-tint-blue); display: grid; place-items: center; color: var(--c-primary); flex: none; } .rules-head h4 { margin: 0; padding: 0; border: 0; } .rule-warn { margin-top: 16px; padding: 12px 15px; border-radius: 11px; background: #FDF6EC; border: 1px solid #F3E2C0; font: 400 12px/1.55 var(--font-body); color: #9A6E14; } .recent { display: flex; flex-direction: column; margin-top: 8px; } .recent__row { display: flex; gap: 11px; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; transition: background .14s; } .recent__row + .recent__row { margin-top: 2px; } .recent__row:hover { background: var(--c-surface-2); } .recent__row:hover .tx b { color: var(--c-brand); } .recent__row .tx { font: 500 12.5px/1.4 var(--font-body); color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recent__row .tx b { color: var(--c-ink); transition: color .12s; } .recent__row .mt { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; } @media (max-width: 720px) { .ask-fields { grid-template-columns: 1fr; } } @media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } } /* -- Help tip (reusable "?" popover, replaces Bootstrap popover) -- */ .help-tip { position: relative; display: inline-flex; align-items: center; color: var(--c-primary); cursor: help; margin-left: 6px; vertical-align: middle; } .help-tip__pop { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 240px; max-width: 60vw; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--sh-float); padding: 11px 13px; z-index: 40; display: none; text-align: left; } .help-tip:hover .help-tip__pop, .help-tip:focus .help-tip__pop, .help-tip:focus-within .help-tip__pop { display: block; } .help-tip__pop b { display: block; font: 700 12px var(--font-body); color: var(--c-ink); margin-bottom: 4px; } .help-tip__pop > span { display: block; font: 400 12px/1.5 var(--font-body); color: var(--c-text); } .help-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; } /* -- Subscribed areas ("Избрани области") -- */ .sarea { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .sarea__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; margin-inline: -10px; border-radius: 8px; text-decoration: none; transition: background var(--dur) var(--ease-out); } .sarea__row:hover { background: var(--c-surface-2); } .sarea__nm { font: 600 13px var(--font-body); color: var(--c-ink); transition: color var(--dur) var(--ease-out); } .sarea__row:hover .sarea__nm { color: var(--c-brand); } .sarea__c { font: 500 11.5px var(--font-body); color: var(--c-muted); white-space: nowrap; } .sarea__empty { font: 400 12.5px/1.55 var(--font-body); color: var(--c-text); margin-top: 4px; } .sarea__empty a { color: var(--c-link); font-weight: 600; } /* "Избран университет" (my-university panel) */ .myuni { display: flex; align-items: center; gap: 12px; text-decoration: none; } .myuni__logo { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; background: #fff; border: 1px solid var(--c-border); display: grid; place-items: center; } .myuni__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .myuni__logo--ph { color: var(--c-primary); background: var(--c-tint-blue); border-color: transparent; } .myuni__tx { min-width: 0; } .myuni__nm { display: block; font: 700 13.5px/1.3 var(--font-body); color: var(--c-ink); transition: color var(--dur) var(--ease-out); } .myuni:hover .myuni__nm { color: var(--c-brand); } .myuni__m { display: block; font: 500 12px var(--font-body); color: var(--c-muted); margin-top: 3px; } /* -- Channel cover in .crel rows (real image) -- */ .crel__ava--img { overflow: hidden; padding: 0; background: var(--c-surface-2); border-radius: 0; } .crel__ava--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -- Materials feed with file-type badge (paper/MIME) -- */ .side-feed { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .sfrow { display: flex; align-items: center; gap: 11px; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .14s; } .sfrow:hover { background: var(--c-surface-2); } .sfrow:hover .sfrow__tx b { color: var(--c-brand); } .sfrow__badge { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center; font: 800 9.5px var(--font-body); color: #fff; letter-spacing: .02em; } .sfrow__badge.badge-pdf { background: #C0392B; } .sfrow__badge.badge-ppt { background: #D35400; } .sfrow__badge.badge-doc { background: #2B6CB0; } .sfrow__badge.badge-xls { background: #1E824C; } .sfrow__badge.badge-arch { background: #6B5B95; } .sfrow__tx { min-width: 0; } .sfrow__tx b { display: block; font: 600 12.5px/1.35 var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sfrow__tx small { display: block; font: 400 11px var(--font-body); color: var(--c-muted); margin-top: 2px; } /* ========================================================================== MATERIALS module (search list / detail / share) - 1:1 from V2 (Ф8.2) ========================================================================== */ /* ---- Hero search ---- */ .page-hero--mat { background: var(--grad-hero); padding-top: 0; } .page-hero--mat h1 { margin-top: 0; } .page-hero--mat .sub { max-width: none; } .searchbar { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: var(--r-card); padding: 6px 6px 6px 20px; margin-top: 28px; max-width: 600px; box-shadow: 0 12px 32px rgba(0,0,0,.25); } .searchbar svg { color: var(--c-muted); flex: none; } .searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--font-body); color: var(--c-text); padding: 12px 8px; } .searchbar input::placeholder { color: var(--c-faint); } .searchbar .btn { min-height: 0; padding: 12px 26px; font-size: 15px; box-shadow: none; } .page-hero .searchbar { margin-top: 20px; max-width: 760px; box-shadow: none; } /* ---- Materials search list ---- */ .mat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding-block: 28px 48px; align-items: start; } .frail { display: flex; flex-direction: column; gap: 14px; } .fcard { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; } .fcard h3 { font: 700 13px var(--font-body); color: var(--c-ink); margin: 0; } .facet { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font: 500 13.5px var(--font-body); color: var(--c-text); } .facet label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .facet .cnt { margin-left: auto; color: var(--c-faint); font-weight: 400; } .facet input { width: 17px; height: 17px; accent-color: var(--c-primary); flex: none; } .fmore { color: var(--c-link); font-weight: 600; font-size: 13px; margin-top: 8px; display: inline-block; } .fchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .facet__row { display: flex; align-items: center; gap: 10px; color: var(--c-text); text-decoration: none; padding: 3px 0; transition: color .12s; } .facet__row:hover { color: var(--c-brand); } .facet__row.is-on { color: var(--c-brand); font-weight: 700; } .fchip { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid #D8E4EC; color: #43617A; font: 500 12px var(--font-body); background: none; cursor: pointer; text-decoration: none; transition: border-color .12s, background .12s, color .12s; } a.fchip:hover { border-color: #B4C9D7; } .fchip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; } .results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .results-head .cnt { font: 500 13.5px var(--font-body); color: var(--c-muted-2); } .results-head .cnt b { color: var(--c-ink); } .sort { position: relative; display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--font-body); color: #43617A; } .sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 172px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,52,78,.14); padding: 6px; display: flex; flex-direction: column; } .sort-menu a { display: block; padding: 9px 12px; border-radius: 8px; font: 500 13px var(--font-body); color: var(--c-text); text-decoration: none; } .sort-menu a:hover { background: var(--c-surface-2); } .sort-menu a.is-on { background: var(--c-primary); color: #fff; font-weight: 600; } button.fmore { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .sort-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #D8E4EC; border-radius: 10px; padding: 8px 13px; background: #fff; font: 600 13px var(--font-body); color: var(--c-ink); cursor: pointer; } .rlist { display: flex; flex-direction: column; gap: 12px; } .rcard { display: flex; gap: 20px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--sh-card); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } a.rcard:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.1); transform: translateY(-1px); } a.rcard h3 { transition: color .15s; } a.rcard:hover h3 { color: var(--c-brand); } .rthumbs { display: flex; gap: 5px; flex: none; } .rthumb { position: relative; width: 74px; height: 98px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #FBFDFE, var(--c-tint-blue)); border: 1px solid #C9D9E4; } .rthumb::before, .rthumb::after, .rthumb i { content: ""; position: absolute; height: 3px; border-radius: 2px; background: #D5E2EB; } .rthumb::before { inset: 10px 9px auto 9px; height: 5px; background: #B4C9D7; } .rthumb::after { inset: 20px 14px auto 9px; } .rthumb i { inset: 28px 20px auto 9px; } .rthumb .fb { position: absolute; bottom: 7px; left: 10px; padding: 2px 7px; border-radius: 4px; color: #fff; font: 700 9px var(--font-body); } .rthumb .fb.badge-pdf { background: #C4563B; } .rthumb .fb.badge-doc { background: #2B6CB0; } .rthumb .fb.badge-ppt { background: #D35400; } .rthumb .fb.badge-xls { background: #1E8E5A; } .rthumb .fb.badge-arch { background: var(--c-muted-2); } .rbody { flex: 1; min-width: 0; } .rtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .rtop h3 { font: 700 16.5px/1.35 var(--font-body); color: var(--c-ink); margin: 0; } .pbadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: #EAF6F0; color: var(--c-teal-d); font: 600 12px var(--font-body); flex: none; white-space: nowrap; } .rtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .rmeta { display: flex; align-items: center; gap: 18px; margin-top: 14px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .rmeta .who { display: inline-flex; align-items: center; gap: 8px; } .rmeta .who .uav { width: 22px; height: 22px; font-size: 9px; } .rmeta .st { margin-left: auto; display: inline-flex; gap: 14px; } .rmeta .st .dl { color: var(--c-link); font-weight: 600; } .rmeta .st .th { color: #D9915B; font-weight: 600; } .rmeta .st .dl, .rmeta .st .th { display: inline-flex; align-items: center; gap: 5px; } .mat-facetbox { width: 17px; height: 17px; border-radius: 5px; flex: none; background: #fff; border: 1.5px solid #C9D9E4; display: grid; place-items: center; color: #fff; transition: background .12s, border-color .12s; } .mat-facetbox svg { display: none; stroke-width: 3.5px; } .facet--check .facet__row { color: var(--c-text); font-weight: 500; padding: 0; } .facet--check .facet__row:hover { color: var(--c-navy); } .facet--check .facet__row.is-on { color: var(--c-text); font-weight: 500; } .facet--check .facet__row.is-on .mat-facetbox { background: var(--c-primary); border-color: var(--c-primary); } .facet--check .facet__row.is-on .mat-facetbox svg { display: block; } .mat-discipline__field { display: flex; align-items: center; gap: 9px; margin-top: 12px; border: 1.5px solid #D8E4EC; border-radius: 10px; padding: 9px 12px; transition: border-color .12s; } .mat-discipline__field:focus-within { border-color: var(--c-primary); } .mat-discipline__field svg { flex: none; color: var(--c-faint); } .mat-discipline__field input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: none; font: 400 13px var(--font-body); color: var(--c-ink); } .mat-discipline__field input::placeholder { color: var(--c-faint); } @media (max-width: 900px) { .mat-layout { grid-template-columns: 1fr; } .frail { flex-direction: row; flex-wrap: wrap; } .frail .fcard { flex: 1; min-width: 230px; } } @media (max-width: 560px) { .rcard { flex-direction: column; } .rmeta { flex-wrap: wrap; } } /* ---- Material detail ---- */ .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); column-gap: 24px; padding-block: 24px 48px; align-items: start; align-content: start; } .detail-layout > .detail-card { grid-column: 1; grid-row: 1; } .detail-layout > .comments-sec { grid-column: 1; grid-row: 2; } .detail-layout > .dside { grid-column: 2; grid-row: 1 / 3; align-self: start; } .detail-card { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; } .detail-card__head { padding: 26px 30px; border-bottom: 1px solid var(--c-divider); } .detail-card__head h1 { font-size: 22px; font-weight: 700; line-height: 1.3; } .detail-card__head .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } /* Material header: kicker (area > discipline) + title + meta strip. */ .detail-card__head .mhead__kick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; } .mhead__kick .mhead__sep { color: var(--c-faint); flex: none; } .mhead__kick .mhead__disc { font: 600 13px var(--font-body); color: var(--c-muted-2); } .mhead__area { display: inline-flex; text-decoration: none; transition: opacity .14s ease; } .mhead__area:hover { opacity: .82; } /* "Благодаря" heart turns pastel red on hover (only the heart, text unchanged). */ .thanks-heart .icon { transition: color .14s ease, fill .14s ease, transform .14s ease; } .thanks-heart:hover .icon { color: #F28B82; } /* Thanked = filled red heart (SimpleShop favourites feel). */ .thanks-heart.is-thanked .icon { color: #E4483D; fill: #E4483D; } .thanks-heart.is-thanked:hover .icon { color: #E4483D; } .detail-card__head .mhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--c-divider); } .mhead__meta > span { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-body); color: var(--c-muted); white-space: nowrap; } .mhead__meta .icon { color: var(--c-faint); flex: none; } .mhead__meta .mhead__ext { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--c-tint-blue); color: var(--c-muted-2); font: 700 10px var(--font-body); letter-spacing: .04em; } .detail-card__desc { padding: 24px 30px; } .detail-card__desc h3 { font: 700 14px var(--font-body); margin: 0 0 8px; } .detail-card__desc p { font: 400 14px/1.7 var(--font-body); color: var(--c-text); margin: 0; } .dside { display: flex; flex-direction: column; gap: 16px; } .sdcard { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 24px 26px; } .sdcard h3 { font: 700 13px var(--font-body); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-divider); } .file-id { display: flex; align-items: center; gap: 12px; } .file-id--link { text-decoration: none; color: inherit; margin: 0 -12px; padding: 8px 12px; border-radius: 14px; transition: background .14s ease; } .file-id--link:hover { background: var(--c-surface-2); } .file-id--link:hover .nm { color: var(--c-brand); } .file-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 11px var(--font-body); flex: none; background: #FDEBE5; color: #C4563B; } .file-id .nm { font: 700 15px var(--font-body); word-break: break-all; } .file-id .mt { font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 2px; } .sd-download { min-height: 50px; font-weight: 700; font-size: 15px; box-shadow: none; } .dl-secondary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; margin-top: 10px; } .dl-secondary .btn { min-height: 42px; padding-inline: 8px; gap: 6px; font-size: 12.5px; white-space: nowrap; min-width: 0; justify-content: center; } .file-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-divider); font: 500 12.5px var(--font-body); color: var(--c-muted); } .copyright-note p { font: 400 13px/1.7 var(--font-body); color: var(--c-text); margin: 8px 0 0; } .copyright-note p em { font-style: normal; } .copyright-note a { font-weight: 600; color: var(--c-link); text-decoration: none; } .copyright-note a:hover { color: var(--c-brand); } .copyright-note h3 { display: flex; align-items: center; gap: 7px; } .copyright-note h3 svg { color: var(--c-brand); } .similar { display: flex; flex-direction: column; gap: 2px; } .similar a { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; transition: background .14s; } .similar a:hover { background: var(--c-surface-2); } .similar a > span:last-child { min-width: 0; } .similar .cov { width: 34px; height: 44px; border-radius: 5px; flex: none; display: grid; place-items: center; color: #fff; font: 800 9px var(--font-body); background: var(--c-muted-2); } .similar .cov--pdf { background: #C4563B; } .similar .cov--ppt { background: #D35400; } .similar .cov--doc { background: var(--c-link); } .similar .cov--file { background: var(--c-muted-2); } .similar .t { display: block; font: 600 13px/1.35 var(--font-body); color: var(--c-ink); transition: color .12s; } .similar a:hover .t { color: var(--c-brand); } .similar .m { display: block; font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 2px; } .owner-tools h3 { margin-bottom: 12px; } .report-link { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: none; border: 0; padding: 4px 0; font: 500 12px var(--font-body); color: var(--c-faint); cursor: pointer; transition: color .15s; } .report-link:hover { color: var(--c-danger); } .report-link[aria-expanded="true"] { color: var(--c-danger); } /* Открит панел за сигнал. Тинт + ринг, НЕ цветна лява ивица (забранена в проекта). Действието е сериозно, затова носи семантичния danger цвят - преди това беше прозрачен ghost бутон, залепен вляво, който не личеше като действие изобщо. */ .report-panel { margin-top: 12px; padding: 14px; border: 1px solid var(--c-danger-bd); border-radius: var(--r-card); background: var(--c-danger-bg); } .report-panel__note { margin: 10px 0 0; font: 500 12px/1.55 var(--font-body); color: var(--c-muted-2); } .report-panel__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .report-panel__send { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--r-input); background: var(--c-danger); color: #fff; font: 700 13.5px var(--font-body); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .report-panel__send:hover { background: var(--c-danger-ink); box-shadow: 0 4px 12px rgba(196,54,46,.28); } .report-panel__cancel { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--r-input); background: transparent; color: var(--c-muted-2); font: 600 13px var(--font-body); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .report-panel__cancel:hover { color: var(--c-ink); background: rgba(255,255,255,.7); } /* Тесен сайдбар: двата бутона един под друг вместо да се смачкват. */ @media (max-width: 420px) { .report-panel__send, .report-panel__cancel { flex: 1 1 100%; } } .comments-sec { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 900px) { .detail-layout { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .detail-layout > .detail-card, .detail-layout > .comments-sec, .detail-layout > .dside { grid-column: auto; grid-row: auto; } .detail-layout > .comments-sec { margin-top: 0; } } /* ---- Document viewer (paged preview) ---- */ .fviewer { background: #E9F0F5; padding: 28px; } .fviewer__stage { display: flex; align-items: center; justify-content: center; gap: 18px; } .fviewer__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #D8E4EC; display: grid; place-items: center; color: #43617A; cursor: pointer; transition: box-shadow .15s, opacity .15s; } .fviewer__arrow:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(20,52,78,.14); } .fviewer__arrow:disabled { opacity: .35; cursor: default; } .fpage { position: relative; width: 420px; max-width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 14px 36px rgba(20,52,78,.16); overflow: hidden; } .fpage__view { height: min(560px, 72vh); overflow: hidden; } .fpage__doc { padding: 34px 40px; font: 400 14px/1.7 var(--font-body); color: #33475B; word-break: break-word; transition: transform .3s ease; will-change: transform; } .fpage__doc p { margin: 0 0 12px; } .fpage__doc h1, .fpage__doc h2, .fpage__doc h3, .fpage__doc h4, .fpage__doc h5, .fpage__doc h6 { font-family: var(--font-display); color: var(--c-ink); margin: 16px 0 8px; font-size: 16px; } .fpage__doc table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; display: block; overflow-x: auto; } .fpage__doc td, .fpage__doc th { border: 1px solid var(--c-divider); padding: 5px 9px; text-align: left; white-space: nowrap; } .fpage__doc pre { white-space: pre-wrap; font: 400 13px/1.6 ui-monospace, SFMono-Regular, monospace; color: #33475B; margin: 0; } .fpage__doc section { margin-bottom: 16px; } .fpage__doc section h4 { font-size: 12.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; } .fpage__gate { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 90px 12px 22px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 72%); } .fpage__pill { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; background: var(--c-navy); color: #fff; font: 600 12.5px var(--font-body); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(20,52,78,.28); } .fpage__pill:hover { background: #1B4A6A; } .fpage__pill--dl { background: var(--c-accent); box-shadow: 0 6px 16px rgba(240,123,93,.35); } .fpage__pill--dl:hover { background: var(--c-accent-strong); } .fpage__pill--ghost { background: #fff; color: #43617A; border: 1.5px solid #D8E4EC; box-shadow: none; } .fpage__pill--ghost:hover { background: #F4F8FB; } .fviewer__strip { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center; } .fthumb { position: relative; width: 44px; height: 58px; border-radius: 6px; background: #fff; border: 1px solid #D8E4EC; flex: none; cursor: pointer; padding: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .fthumb:hover { border-color: #B4C9D7; } .fthumb.is-active { border: 2px solid var(--c-primary); box-shadow: 0 4px 10px rgba(20,52,78,.12); } .fthumb__pg { position: absolute; top: 5px; left: 0; right: 0; text-align: center; font: 700 10px var(--font-body); color: #93A9BA; } .fthumb.is-active .fthumb__pg { color: var(--c-primary); } .fthumb i { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--c-surface-2); } .fthumb i:nth-of-type(1) { top: 24px; } .fthumb i:nth-of-type(2) { top: 31px; right: 14px; } .fthumb i:nth-of-type(3) { top: 38px; } .fthumb i:nth-of-type(4) { top: 45px; right: 12px; } .fthumb--locked { background: linear-gradient(180deg, #fff, var(--c-tint-blue)); display: grid; place-items: center; color: var(--c-muted); cursor: default; overflow: visible; } .fthumb--locked:hover { border-color: #D8E4EC; } .fviewer__cap { margin-left: 10px; font: 500 12.5px/1.4 var(--font-body); color: var(--c-muted-2); } .fviewer--none { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--c-muted); padding: 48px 24px; } .fviewer--none p { font: 500 14px var(--font-body); max-width: 340px; margin: 0; } @media (max-width: 560px) { .fviewer { padding: 16px; } .fviewer__stage { gap: 8px; } .fviewer__arrow { width: 34px; height: 34px; } .fpage__doc { padding: 22px 22px; } } /* ---- Share file ---- */ .dropzone { border: 2px dashed #9BC0D6; border-radius: var(--r-card); background: #F6FAFC; padding: 26px 22px; display: grid; place-items: center; gap: 8px; text-align: center; min-height: 150px; cursor: pointer; } .dropzone__ic { color: #7A9BB0; } .dropzone__t { font: 600 14px var(--font-body); color: var(--c-ink); } .dropzone__s { font: 400 12.5px var(--font-body); color: var(--c-muted); } .dropzone__btn { margin-top: 4px; padding: 9px 18px; border-radius: var(--r-input); border: 1.5px solid #D8E4EC; background: #fff; color: var(--c-link); font: 600 12.5px var(--font-body); cursor: pointer; } .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; } .switch__track { width: 40px; height: 24px; border-radius: var(--r-pill); background: #C9D9E4; position: relative; flex: none; transition: background var(--dur-fast) var(--ease-out); } .switch__track.on { background: var(--c-teal); } .switch__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--dur-fast) var(--ease-out); } .switch__track.on .switch__knob { left: 19px; } .switch__lbl { font: 500 13px var(--font-body); color: #43617A; } .ask-legal { margin-top: 14px; font: 400 12px/1.5 var(--font-body); color: var(--c-faint); text-align: center; } .contrib { display: flex; gap: 14px; align-items: center; } .contrib__n { font: 700 24px var(--font-display); color: var(--c-teal); flex: none; } .contrib__t { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted-2); } .contrib__t b { color: var(--c-ink); } /* ========================================================================== PROFILE module (public member profile + tiles) - 1:1 from V2 ========================================================================== */ /* ---- Hero cover ---- */ .mprofile-cover { position: relative; overflow: hidden; background: var(--c-navy); padding-block: 44px 0; } .mprofile-cover > .container { position: relative; z-index: 1; } .mprofile-id { display: flex; align-items: flex-end; gap: 26px; padding-bottom: 26px; flex-wrap: wrap; } .mp-avatar { position: relative; flex: none; } .mp-avatar__tile { position: relative; width: 116px; height: 116px; border-radius: 32px; background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)); display: grid; place-items: center; font: 800 34px var(--font-display); color: #fff; border: 3px solid rgba(255,255,255,.25); overflow: hidden; } .mp-avatar__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .mp-avatar__badge { position: absolute; bottom: -7px; right: -7px; width: 34px; height: 34px; border-radius: 50%; background: var(--c-amber); border: 3px solid var(--c-navy); display: grid; place-items: center; color: #fff; } .mp-id { flex: 1; min-width: 220px; } .mp-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mp-name h1 { font: 700 26px var(--font-display); color: #fff; } .mp-inactive { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); color: #CFE2ED; font: 600 11.5px var(--font-body); } .mp-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font: 500 13.5px var(--font-body); color: #9DBACD; } .mp-meta span { display: inline-flex; align-items: center; gap: 7px; } .mp-meta span:not(:first-child)::before { content: "\00B7"; color: #6E86A0; margin-right: 5px; font-weight: 700; } .mp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .mp-chip { padding: 5px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #CFE2ED; font: 500 12px var(--font-body); } .mp-acts { display: flex; gap: 10px; flex: none; padding-bottom: 6px; } .mp-acts .msg { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 14px var(--font-body); border: 0; cursor: pointer; text-decoration: none; } .mp-acts .more { width: 46px; height: 46px; border-radius: var(--r-input); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #CFE2ED; display: grid; place-items: center; cursor: pointer; } .mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: 16px 16px 0 0; overflow: hidden; } .mp-stat { background: rgba(255,255,255,.06); padding: 18px 26px; } .mp-stat b { font: 700 22px var(--font-display); color: #fff; display: block; } .mp-stat b.amber { color: var(--c-amber); } .mp-stat span { font: 500 12px var(--font-body); color: #9DBACD; margin-top: 3px; display: block; } /* ---- Tab bar ---- */ .uprofile-bar { background: #fff; border-bottom: 1px solid var(--c-border); padding-top: 26px; } .ptabs { display: flex; gap: 26px; font: 600 14px var(--font-body); flex-wrap: wrap; } .ptab { padding: 12px 4px; color: var(--c-muted); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap; text-decoration: none; transition: color .14s ease, border-color .14s ease; } .ptab:not(.active):hover { color: var(--c-ink); border-bottom-color: #D8E4EC; } .ptab.active { color: var(--c-ink); border-bottom-color: var(--c-accent); } /* ---- Grid ---- */ .uprofile-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 26px 48px; } .uprofile-main { display: flex; flex-direction: column; gap: 16px; } .profile-grid .uprofile-main { gap: 12px; } .cat-side { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 900px) { .uprofile-grid { grid-template-columns: minmax(0, 1fr); } .mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- "За мен" bio card ---- */ .profile-about__lead { font: 600 14px/1.5 var(--font-body); color: var(--c-ink); margin: 12px 0 0; } .profile-about__text { font: 400 13.5px/1.7 var(--font-body); color: var(--c-text); margin: 10px 0 0; white-space: pre-line; } .profile-about__lead + .profile-about__text { margin-top: 8px; } /* ---- Contribution card ---- */ .mp-mat { display: flex; gap: 18px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; } a.mp-mat { text-decoration: none; color: inherit; transition: border-color .12s ease, box-shadow .12s ease; } a.mp-mat:hover { border-color: #C9DCE8; box-shadow: 0 4px 14px rgba(20,52,78,.06); } .mp-mat .body { flex: 1; min-width: 0; } .mp-mat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .mp-mat__top .t { font: 700 15.5px/1.35 var(--font-body); color: var(--c-ink); } .mp-mat .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mp-mat .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 11px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .mp-mat .meta .st { margin-left: auto; display: flex; gap: 14px; } .mp-mat .meta .dl { color: var(--c-link); font-weight: 600; } /* Profile "За мен" dashboard sections (latest 3 of each + "Виж всички") */ .pdash { display: flex; flex-direction: column; gap: 10px; } .pdash__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .pdash__head h4 { display: flex; align-items: center; gap: 8px; font: 700 15px var(--font-body); color: var(--c-ink); } .pdash__n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--c-tint-blue); color: var(--c-primary); font: 700 11.5px var(--font-body); } .pdash__all { display: inline-flex; align-items: center; gap: 3px; font: 600 13px var(--font-body); color: var(--c-link); white-space: nowrap; transition: color .14s ease; } .pdash__all:hover { color: #1B5470; } .pdash__empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--c-border); border-radius: var(--r-input); background: var(--c-surface-2); color: var(--c-muted); font: 500 13.5px var(--font-body); } .mp-mat .meta .th { color: #D9915B; font-weight: 600; } .bthumb { position: relative; border-radius: 6px; background: linear-gradient(180deg, #FBFDFE, var(--c-tint-blue)); border: 1px solid #C9D9E4; flex: none; overflow: hidden; } .bthumb i { position: absolute; left: 6px; right: 6px; height: 3px; background: #D5E2EB; border-radius: 2px; } .bthumb i.a { top: 8px; height: 4px; background: #B4C9D7; } .bthumb i.b { top: 16px; } .bthumb .fmt { position: absolute; bottom: 4px; left: 6px; padding: 1px 4px; border-radius: 3px; color: #fff; font: 700 7.5px var(--font-body); } /* ---- Sidebar: recent activity + colleagues tiles ---- */ .actv { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; } .actv__row { display: flex; gap: 10px; text-decoration: none; color: inherit; padding: 10px; margin: 0 -10px; border-radius: 12px; transition: background .14s; } .actv__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; } .actv__row .tx { font: 400 12.5px/1.5 var(--font-body); color: var(--c-text); } .actv__row .tx b { color: var(--c-ink); } .actv__row .tm { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; } .up2head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .up2head h3 { font: 700 14px var(--font-body); color: var(--c-ink); } .up2head a { font: 600 12.5px var(--font-body); color: var(--c-link); text-decoration: none; } .utiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin-top: 2px; } .utile { position: relative; aspect-ratio: 1; max-width: 56px; border-radius: var(--r-input); display: grid; place-items: center; overflow: hidden; font: 700 12px var(--font-body); background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)); color: #fff; text-decoration: none; } .utile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .utile.more { background: #DCE9F1; color: #43617A; font-size: 11px; } /* ---- Kebab menu (follow) ---- */ .mp-kebab { position: relative; flex: none; } .mp-kebab__pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 216px; padding: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 12px 30px rgba(20,52,78,.22); } .mp-kebab__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 11px 12px; border: 0; background: none; border-radius: 10px; font: 600 13px var(--font-body); color: var(--c-ink); text-align: left; cursor: pointer; } .mp-kebab__item:hover { background: var(--c-surface-2); } .mp-kebab__item svg { flex: none; color: var(--c-muted); } .mp-kebab__item.is-on { color: var(--c-accent-strong); } .mp-kebab__item.is-on svg { color: var(--c-accent-strong); } /* ---- Pill pager ---- */ .pillpager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pillpager__pill, .pillpager__gap { min-width: 38px; height: 38px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; box-sizing: border-box; font: 500 13.5px var(--font-body); } .pillpager__pill { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; transition: border-color .12s ease, color .12s ease; } .pillpager__pill:hover { border-color: var(--c-primary); color: var(--c-primary); } .pillpager__pill.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; cursor: default; } .pillpager__gap { color: var(--c-faint); } .bthumb .fmt.badge-pdf { background: #C4563B; } .bthumb .fmt.badge-doc { background: #2B6CB0; } .bthumb .fmt.badge-ppt { background: #D35400; } .bthumb .fmt.badge-xls { background: #1E8E5A; } .bthumb .fmt.badge-arch { background: var(--c-muted-2); } .profile-empty { padding: 44px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); } /* "част от материалите са анонимни" - explains a count the list cannot show */ .anon-note { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 13px 16px; background: var(--c-tint, #f2f6fb); border: 1px solid var(--c-border); border-radius: var(--r-card); color: var(--c-muted); font: 500 13.5px/1.5 var(--font-body); } .anon-note svg { flex: none; color: var(--c-muted-2); } /* ---- Profile edit form (1:1 from V2) ---- */ .field { display: flex; flex-direction: column; gap: 7px; } .reg-grid .full, .field.full { grid-column: 1 / -1; } .edit-wrap { max-width: 820px; padding-block: 28px 56px; } .edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; padding-block: 22px 56px; align-items: start; } .edit-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Tab buttons with a leading icon: center the icon with the label. */ .ctabs--icons a, .ctabs--icons button { display: inline-flex; align-items: center; gap: 7px; } /* Taller science-areas picker on the profile edit (registration keeps the compact one). */ .apick--tall .apick__list { max-height: 640px; } /* Danger zone: self-deactivation card in Настройки. */ .danger-zone { border-color: var(--c-danger-bd); } .danger-zone__row { display: flex; align-items: center; gap: 16px; } .danger-zone__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--c-danger-bg); color: var(--c-danger); flex: none; } .danger-zone__tx { flex: 1; min-width: 0; } .danger-zone__tx b { display: block; font: 700 14px var(--font-body); color: var(--c-danger-ink); } .danger-zone__tx p { font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 3px; line-height: 1.5; } .danger-zone__row .btn--danger { flex: none; } @media (max-width: 560px) { .danger-zone__row { flex-wrap: wrap; } .danger-zone__row .btn--danger { width: 100%; } } .edit-layout > .edit-card { margin-top: 0; } @media (max-width: 900px) { .edit-layout { grid-template-columns: minmax(0, 1fr); } } .edit-errs { background: var(--c-danger-bg); border: 1px solid var(--c-danger-bd); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; color: var(--c-danger-ink); font: 500 13px var(--font-body); } .edit-errs ul { margin: 0; padding-left: 18px; } /* Auth/reset flow status alert (was inlined in the auth pages). */ .auth-alert { background: var(--c-success-bg); border: 1px solid var(--c-success-bd); color: var(--c-success-ink); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font: 500 13px var(--font-body); } .auth-alert--err { background: var(--c-danger-bg); border-color: var(--c-danger-bd); color: var(--c-danger-ink); } /* Standalone auth-page chrome (forgot/reset/gdpr) - the centering wrapper + card, tokenized surface (was a hardcoded #fff inline on 3 pages). */ .auth-simple { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: var(--c-page); } .auth-card { width: 100%; max-width: 420px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 34px 36px; box-shadow: var(--sh-card); } .auth-card--wide { max-width: 520px; } /* Tiny spacing/alignment utilities (replace the most-repeated one-off inline tweaks). */ .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .txt-center { text-align: center; } /* SweetAlert2 MODAL dialogs (confirmations / messages) - brand-styled (Studentite tokens), harvested from SimpleShop's Latte model. Centered modal, NOT a toast (scoped :not(.swal2-toast) so the corner toasts keep their own look). */ .swal2-container { z-index: 10080 !important; } .swal2-popup:not(.swal2-toast) { background: var(--c-surface) !important; border: 3px solid var(--c-primary) !important; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(20, 52, 78, .22) !important; padding: 28px 26px 22px !important; font-family: var(--font-body) !important; color: var(--c-ink) !important; } /* Delete/danger dialogs get a red frame to match the action. */ .swal2-popup.swal-danger:not(.swal2-toast) { border-color: var(--c-danger) !important; } .swal2-popup:not(.swal2-toast) .swal2-title { font: 700 21px/1.25 var(--font-display) !important; color: var(--c-navy) !important; padding: 6px 0 !important; } .swal2-popup:not(.swal2-toast) .swal2-html-container { font: 400 14.5px/1.55 var(--font-body) !important; color: var(--c-text) !important; margin: 6px 0 0 !important; padding: 0 !important; } .swal2-popup:not(.swal2-toast) .swal2-actions { gap: 10px !important; margin: 22px auto 2px !important; } .swal2-popup:not(.swal2-toast) .swal2-styled { border-radius: var(--r-input) !important; padding: 11px 22px !important; min-height: 44px !important; font: 600 14px var(--font-body) !important; box-shadow: none !important; margin: 0 !important; transition: background .14s ease !important; } .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm { background: var(--c-primary) !important; color: #fff !important; border: 0 !important; } .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:hover { background: var(--c-primary-d) !important; } .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel { background: var(--c-surface-2) !important; color: var(--c-text) !important; border: 1px solid var(--c-border) !important; } .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:hover { background: var(--c-border) !important; } .swal2-popup.swal-danger .swal2-styled.swal2-confirm { background: var(--c-danger) !important; } .swal2-popup.swal-danger .swal2-styled.swal2-confirm:hover { background: var(--c-danger-ink) !important; } .edit-hr { border: 0; border-top: 1px solid var(--c-divider); margin: 22px 0 0; } .edit-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; } /* Linktree editor (profile edit) */ .linktree-edit { display: flex; flex-direction: column; gap: 10px; } .lt-row { display: flex; align-items: center; gap: 10px; } .lt-row__ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-border); } .lt-row__ic img { width: 22px; height: 22px; display: block; } .lt-row__plat { flex: 0 0 168px; } .lt-row__url { flex: 1; min-width: 0; } .lt-row__del { width: 40px; height: 40px; border-radius: 10px; flex: none; border: 1px solid var(--c-border); background: #fff; color: var(--c-muted); cursor: pointer; display: grid; place-items: center; transition: background .14s ease, color .14s ease, border-color .14s ease; } .lt-row__del:hover { background: #FDECEC; border-color: var(--c-danger-bd); color: #C0392B; } .lt-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px dashed var(--c-border); background: #fff; color: var(--c-primary); font: 600 13px var(--font-body); cursor: pointer; transition: background .14s ease, border-color .14s ease; } .lt-add:hover { background: var(--c-tint-blue); border-color: var(--c-primary); } @media (max-width: 560px) { .lt-row { flex-wrap: wrap; } .lt-row__plat { flex: 1; } .lt-row__url { flex-basis: 100%; order: 3; } } /* Linktree display (profile) */ .linktree { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .lt-link { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c-border); background: #fff; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .lt-link:hover { border-color: #C9DCE8; box-shadow: 0 6px 16px rgba(20,52,78,.08); transform: translateY(-1px); } .lt-link img { width: 20px; height: 20px; flex: none; } .lt-link span { flex: 1; min-width: 0; font: 600 13.5px var(--font-body); color: var(--c-ink); } .lt-link__go { color: var(--c-faint); flex: none; } .lt-link:hover .lt-link__go { color: var(--c-primary); } .ask-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px 0; } .ask-head h1 { font-size: 26px; font-weight: 700; } .ask-head .sub { font: 400 14px/1.55 var(--font-body); color: var(--c-muted-2); margin-top: 6px; max-width: 640px; } .ask-head__link { flex: none; padding: 11px 20px; border-radius: var(--r-pill); border: 1.5px solid #D8E4EC; background: #fff; font: 600 13.5px var(--font-body); color: var(--c-link); white-space: nowrap; text-decoration: none; } .edit-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 26px 30px; } .edit-sec { font: 700 15px var(--font-body); color: var(--c-ink); margin: 26px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-divider); } .edit-sec:first-of-type { margin-top: 0; } .edit-avatar { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; } .edit-avatar__now { flex: none; } .edit-avatar__preview { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--c-border); } .edit-avatar__pick { display: flex; flex-direction: column; gap: 6px; cursor: pointer; align-items: flex-start; } .edit-avatar__pick .dropzone__btn { display: inline-flex; align-items: center; gap: 7px; } .edit-avatar__pick:hover .dropzone__btn { border-color: var(--c-primary); color: var(--c-primary); } .edit-avatar__hint { font: 500 12px var(--font-body); color: var(--c-muted); } /* "Премахни снимката" - quiet by default, danger only on intent. 44px tall so it clears the touch floor next to the (taller) file picker. */ .edit-avatar__rm { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-left: auto; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: transparent; color: var(--c-muted-2); font: 600 13px var(--font-body); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .edit-avatar__rm:hover { color: var(--c-danger); border-color: var(--c-danger-bd); background: var(--c-danger-bg); } @media (max-width: 560px) { .edit-avatar { flex-wrap: wrap; } .edit-avatar__rm { margin-left: 0; width: 100%; justify-content: center; } } /* Tabbed profile edit: panels toggle via x-show (tab nav sits in the navy hero). */ .edit-panel { min-height: 120px; } .edit-checks { display: flex; flex-direction: column; gap: 14px; } .edit-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .edit-check input { width: 16px; height: 16px; margin-top: 3px; flex: none; } .edit-check span { display: flex; flex-direction: column; } .edit-check b { font: 600 13.5px var(--font-body); color: var(--c-ink); } .edit-check small { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; } .ulink { color: inherit; text-decoration: none; } .ulink:hover { color: var(--c-brand); text-decoration: underline; } .sci-areas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } /* Profile hovers: colleague tiles, activity rows, message button */ a.utile { transition: transform .12s ease, box-shadow .12s ease; } a.utile:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(20,52,78,.2); } .actv__row .tx b { transition: color .12s; } a.actv__row:hover { background: var(--c-surface-2); } a.actv__row:hover .tx b { color: var(--c-brand); } .mp-acts .msg { transition: background .15s ease; } .mp-acts .msg:hover { background: var(--c-accent-strong); } /* Profile: answer item (richer) + linktree placeholder */ .mp-ans { align-items: flex-start; } .mp-ans__ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #EAF4FB; color: var(--c-brand); } .mp-ans__q { font: 600 12px var(--font-body); color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; } .mp-ans__body { font: 400 13.5px/1.65 var(--font-body); color: var(--c-text); margin: 8px 0 0; } .linktree-soon { font: 400 13px var(--font-body); color: var(--c-muted); margin-top: 12px; } .mp-kebab__item--danger, .mp-kebab__item--danger svg { color: var(--c-danger, #d14343); } /* ==================== НАУЧНИ ОБЛАСТИ (science areas, ex-groups) ==================== */ /* Ported 1:1 from the V2 build (index 2a + area hub 2b + subscribers 10b), rewired to PROD data. Look = V2 verbatim; only the area-ic colour variants use PROD's palette. */ /* --- index hero + search + A-Z bar --- */ .page-hero--area { background: var(--grad-hero); padding-top: 0; } .page-hero--area .hero-split { margin-top: 0; } .hero-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .hero-split .sub b { color: #fff; font-weight: 700; } .hsearch { display: flex; align-items: center; background: #fff; border-radius: 14px; padding: 5px 5px 5px 18px; width: 400px; max-width: 100%; flex: none; } .hsearch svg { color: var(--c-muted); flex: none; } .hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 10px 12px; font: 400 14px var(--font-body); color: var(--c-ink); } .hsearch input::placeholder { color: var(--c-faint); } .hsearch button { flex: none; padding: 10px 20px; border-radius: 10px; background: var(--c-accent); color: #fff; font: 600 13.5px var(--font-body); border: 0; cursor: pointer; transition: background .14s ease; } .hsearch button:hover { background: var(--c-accent-strong); } .catbar { position: sticky; top: var(--nav-h); z-index: 20; background: var(--c-page); border-bottom: 1px solid var(--c-border); padding-block: 14px; } .catbar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .catbar__note { margin-left: auto; font: 500 13px var(--font-body); color: var(--c-muted); } .catbar--white { background: #fff; } .aletter { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 600 13px var(--font-body); text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease; } a.aletter:not(.active):hover { background: var(--c-surface-2); border-color: #B4C9D7; color: var(--c-brand); } .aletter.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; } /* --- index area list --- */ .cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 26px 48px; } .list-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; } .lgroup { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; scroll-margin-top: calc(var(--nav-h) + 170px); } .lgroup.gap { margin-top: 26px; } .lgroup b { font: 800 22px var(--font-display); color: var(--c-primary); } .lgroup .rule { flex: 1; height: 1px; background: var(--c-hairline); } .area-row { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); transition: background .14s ease; } .area-row:last-child { border-bottom: 0; } .area-row:hover { background: var(--c-surface-2); } .area-row:hover .area-mid .top .t { color: var(--c-brand); } .area-ic { flex: none; width: 48px; height: 48px; border-radius: var(--r-tile); display: grid; place-items: center; } .area-ic--med { background: #FDEBE5; color: #C4563B; } .area-ic--ped { background: #E2F3F1; color: var(--c-teal-d); } .area-ic--ikon { background: #FBF1DC; color: #9A6E14; } .area-ic--psi { background: #EDE9FB; color: #6A5ACD; } .area-ic--blue { background: var(--c-surface-2); color: var(--c-primary); } .area-ic--net { background: var(--c-tint-blue); color: var(--c-link); } .area-mid { flex: 1; min-width: 0; } .area-mid .top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .area-mid .top .t { font: 700 14.5px var(--font-body); color: var(--c-ink); text-decoration: none; transition: color .14s ease; } .area-mid .top a.t:hover { color: var(--c-brand); } .subbed { padding: 3px 9px; border-radius: var(--r-pill); background: var(--c-success-bg); color: var(--c-teal-d); font: 600 10.5px var(--font-body); white-space: nowrap; } .area-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font: 500 12px var(--font-body); color: var(--c-muted); } .area-stats b { color: var(--c-link); } .area-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .area-right .subs { font: 500 11.5px var(--font-body); color: var(--c-muted); } .area-right .subs b { color: var(--c-ink); } .area-acts { display: flex; gap: 7px; } .abtn { padding: 7px 16px; border-radius: var(--r-pill); font: 600 12.5px var(--font-body); border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease; } .abtn--primary { background: var(--c-primary); color: #fff; } .abtn--primary:hover { background: var(--c-link); } .abtn--ghost { padding: 7px 14px; border: 1px solid #D8E4EC; background: #fff; color: var(--c-link); } .abtn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-page); } .abtn--sub { background: var(--c-tint-blue); color: var(--c-link); } .abtn--sub:hover { background: #DCEAF2; } /* --- area hub hero (navy) + tabs --- */ /* Same top offset as .chero: the crumbs--hero (22px) is the consistent first row; .ahero must NOT add extra padding above it (kept the header band inconsistent). */ .ahero { padding-block: 0; } .ahero-id { display: flex; align-items: center; gap: 20px; margin-top: 0; padding-bottom: 24px; flex-wrap: wrap; } .ahero-ic { width: 76px; height: 76px; border-radius: var(--r-banner); display: grid; place-items: center; color: #fff; border: 3px solid rgba(255,255,255,.2); flex: none; } .ahero-tt { flex: 1; min-width: 220px; } .ahero-tt h1 { font: 700 24px var(--font-display); color: #fff; } /* Every hero stat row (university / channel / area / book) reads as separated items with a subtle dot between them, not a gap-only run-on. */ .ahero-tt .stats { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 6px; margin-top: 9px; font: 500 13px var(--font-body); color: #9DBACD; } .ahero-tt .stats > span:not(:first-child)::before { content: '·'; margin: 0 11px; color: rgba(255, 255, 255, .5); font-weight: 700; } .ahero-tt .stats b { color: #fff; } .ahero-acts { display: flex; gap: 10px; flex: none; flex-wrap: wrap; } .ahero-acts .primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 14px var(--font-body); border: 0; cursor: pointer; text-decoration: none; transition: background .14s ease, transform .14s ease; } .ahero-acts .primary:hover { background: var(--c-accent-strong); transform: translateY(-1px); } .ahero-acts .ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-input); border: 1.5px solid rgba(255,255,255,.3); background: none; color: #fff; font: 600 14px var(--font-body); cursor: pointer; text-decoration: none; transition: background .14s ease, border-color .14s ease; } .ahero-acts .ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); } .ahero-rule { height: 1px; background: rgba(255,255,255,.14); margin-top: 2px; } .qtabs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 0; } .qtab { font: 600 14px var(--font-body); color: #8FA3B5; padding: 12px 4px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; text-decoration: none; transition: color .14s ease, border-color .14s ease; } .qtab:not(.active):hover { color: #fff; border-bottom-color: rgba(255,255,255,.28); } .qtab.active { color: #fff; border-bottom-color: var(--c-accent); } /* --- area hub body: filters + material cards --- */ .detail-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 26px 48px; } .dfilters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .dchips { display: flex; gap: 7px; flex-wrap: wrap; } .dchip { padding: 7px 15px; border-radius: var(--r-pill); background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 500 12.5px var(--font-body); cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; } a.dchip:hover { border-color: #B4C9D7; } .dchip.active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-weight: 600; } .dsort { font: 500 12.5px var(--font-body); color: var(--c-muted); } .dsort b { color: var(--c-ink); } .mlist { display: flex; flex-direction: column; gap: 11px; } .mcard { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s, color .15s; } a.mcard:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.1); transform: translateY(-1px); } a.mcard:hover .body .t { color: var(--c-brand); } .mcard .body { flex: 1; min-width: 0; } .mcard .body .t { font: 700 14.5px var(--font-body); color: var(--c-ink); } .mcard .meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font: 500 12px var(--font-body); color: var(--c-muted); } .mcard .meta .pv { color: var(--c-link); font-weight: 600; } .mcard .st { display: flex; gap: 14px; font: 600 12.5px var(--font-body); flex: none; } .mcard .st .dl { color: var(--c-link); } .mcard .st .th { color: #D9915B; } .seeall { display: flex; justify-content: center; margin-top: 20px; } .seeall a { padding: 11px 26px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid #D8E4EC; font: 600 13px var(--font-body); color: var(--c-link); text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease; } .seeall a:hover { background: var(--c-surface-2); border-color: #B4C9D7; color: var(--c-brand); } /* --- modern generated cover (x-course-cover) - 1:1 with the mockup gloss card -- Gloss gradient in the area colour + faint discipline motif + a serif part mark (or discipline icon) + (full) title & duration. Fills any square thumbnail slot (chan__thumb, vid-card__thumb, chan-cover, crel__ava). Colour from --cc. ----- */ .ccover { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; color: #fff; border-radius: inherit; background-color: var(--cc); background-image: linear-gradient(152deg, color-mix(in srgb, var(--cc) 82%, #fff) 0%, var(--cc) 46%, var(--cc-d) 100%); } .ccover__gloss { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 92% at 12% -6%, rgba(255, 255, 255, .32), transparent 52%); } .ccover__motif { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: rgba(255, 255, 255, .16); } .ccover__motif svg { display: block; width: 100%; height: 100%; } .ccover__head { position: relative; display: flex; align-items: center; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .20)); } .ccover__ic { display: block; } .ccover__mark { font-family: var(--font-serif); font-weight: 600; line-height: 1; letter-spacing: -.02em; } .ccover__foot { position: relative; margin-top: auto; } .ccover__title { display: block; font-family: var(--font-serif); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .14); } .ccover__meta { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .28); font-family: var(--font-serif); line-height: 1.3; color: rgba(255, 255, 255, .86); } /* full - the complete card (tuned for ~150-240px square slots) */ .ccover--full { padding: 15px 17px; container-type: inline-size; } .ccover--full .ccover__mark { font-size: 46px; } .ccover--full .ccover__title { font-size: clamp(15px, 11cqw, 20px); } .ccover--full .ccover__meta { font-size: clamp(11px, 7cqw, 13px); } /* mini - cover role (~150px hero), centred mark/icon, no text */ .ccover--mini { align-items: center; justify-content: center; padding: 12px; } .ccover--mini .ccover__head { justify-content: center; } .ccover--mini .ccover__mark { font-size: 54px; } /* badge - tiny (38px sidebar avatar), just the mark/icon */ .ccover--badge { align-items: center; justify-content: center; } .ccover--badge .ccover__head { justify-content: center; } .ccover--badge .ccover__mark { font-size: 18px; } .ccover--badge .ccover__motif { opacity: .5; } /* --- video grid (placeholder now; ready for the Channels module) --- */ .vid-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .vid-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .vid-card:hover { transform: translateY(-3px); box-shadow: var(--sh-float); } .vid-card__thumb { aspect-ratio: 1 / 1; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 30px; overflow: hidden; } .vid-card__body { padding: 14px 16px; } .vid-card__body .t { font: 600 13.5px var(--font-body); color: var(--c-ink); } .vid-card__body .m { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 4px; } .g-blue { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)); } /* --- hub sidebar CTA + avatar stack --- */ .side-cta { background: var(--c-primary); border-radius: var(--r-feature); padding: 24px 26px; color: #fff; } .side-cta h4 { font: 700 16px var(--font-display); color: #fff; line-height: 1.35; } .side-cta p { font: 400 13px/1.6 var(--font-body); color: #CFE2ED; margin: 8px 0 0; } .side-cta a { display: inline-flex; padding: 10px 20px; border-radius: 11px; background: #fff; color: var(--c-link); font: 700 13px var(--font-body); margin-top: 14px; text-decoration: none; } .avstack { display: flex; align-items: center; margin-top: 14px; } .avstack .avatar, .avstack .uav, .avstack__av { border: 2px solid var(--c-primary); } .avstack > * + * { margin-left: -8px; } .avstack__more { display: inline-flex; align-items: center; height: 34px; min-width: 34px; padding: 0 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); color: #fff; font: 600 10px var(--font-body); white-space: nowrap; } /* --- subscribers directory (10b) --- */ .dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .dir-search { display: flex; align-items: center; gap: 9px; flex: 1 1 260px; min-width: 220px; max-width: 340px; border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 10px 14px; color: var(--c-faint); } .dir-search input { border: 0; background: none; outline: none; width: 100%; font: 400 13px var(--font-body); color: var(--c-ink); } .dir-search input::placeholder { color: var(--c-faint); } .dir-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dir-select { border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 10px 15px; font: 500 13px var(--font-body); color: var(--c-ink); cursor: pointer; max-width: 240px; } .dir-go { border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 10px 16px; font: 600 13px var(--font-body); color: var(--c-link); cursor: pointer; } .dir-go:hover { background: #F1F6F9; } .dir-count { font: 500 12.5px var(--font-body); color: var(--c-muted); margin-bottom: 14px; } .member-list { display: flex; flex-direction: column; gap: 11px; } .member-row { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 20px; display: flex; gap: 15px; align-items: center; position: relative; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .member-row:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.1); transform: translateY(-1px); } .member-row:hover .member-row__name { color: var(--c-brand); } /* Whole card is clickable -> profile (stretched link); avatar + message stay above. */ .member-row__name::after { content: ''; position: absolute; inset: 0; } .member-row__avlink, .member-row__msg { position: relative; z-index: 1; } .member-row__avlink { display: block; line-height: 0; flex: none; border-radius: 50%; } .member-row__av { border-radius: 50%; flex: none; } .member-row__main { flex: 1; min-width: 0; } .member-row__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .member-row__name { font: 700 14.5px var(--font-body); color: var(--c-ink); text-decoration: none; } .member-row__name:hover { color: var(--c-link); } .member-row__tag { padding: 3px 10px; border-radius: var(--r-pill); background: #E7F0F6; color: var(--c-link); font: 600 10.5px var(--font-body); white-space: nowrap; } .member-row__sub { font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-row__stats { display: flex; gap: 20px; flex: none; text-align: center; } .member-stat b { display: block; font: 700 14px var(--font-body); color: var(--c-link); } .member-stat span { font: 400 10.5px var(--font-body); color: var(--c-faint); } .member-stat--alt b { color: var(--c-teal-d); } .member-row__msg { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 11px; background: #F1F6F9; color: #43617A; font: 600 12.5px var(--font-body); white-space: nowrap; text-decoration: none; } .member-row__msg:hover { background: #E7F0F6; color: var(--c-link); } .dir-empty { padding: 36px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); background: #fff; border: 1px solid var(--c-border); border-radius: 14px; } .dir-kv { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .dir-kv > div { display: flex; justify-content: space-between; gap: 12px; } .dir-kv b { color: var(--c-ink); } .dir-back { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; padding: 11px 14px; border: 1.5px solid #D8E4EC; border-radius: 11px; font: 600 13px var(--font-body); color: var(--c-link); text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease; } .dir-back:hover { background: var(--c-surface-2); border-color: #B4C9D7; color: var(--c-brand); } .dir-back svg { transition: transform .14s ease; } .dir-back:hover svg { transform: translateX(-3px); } .dir-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } .dir-bar { display: flex; align-items: center; gap: 10px; } .dir-bar__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; } .dir-bar__name { flex: 1; min-width: 0; font: 500 12.5px var(--font-body); color: #43617A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-bar b { font: 700 12.5px var(--font-body); color: var(--c-ink); flex: none; } .dot-0 { background: #C4563B; } .dot-1 { background: #9A6E14; } .dot-2 { background: var(--c-link); } .dot-3 { background: var(--c-teal-d); } .dot-4 { background: #6A5ACD; } /* --- science areas: responsive --- */ @media (max-width: 1100px) { .cat-layout, .detail-body { grid-template-columns: minmax(0, 1fr); } .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .vid-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .hero-split .hsearch { width: 100%; } } @media (max-width: 640px) { .member-row { flex-wrap: wrap; } .member-row__stats { order: 3; gap: 26px; margin-left: 61px; text-align: left; } .member-row__msg { order: 4; margin-left: auto; } .dir-search { max-width: none; } } /* ==================== /НАУЧНИ ОБЛАСТИ ==================== */ /* ==================== УНИВЕРСИТЕТИ (universities) ==================== */ /* Reuses the area module's hero/tabs/mcard/member-row/dir-*/side-* verbatim; only the university-specific bits below are new. */ /* --- index: city filter + uni rows --- */ .cchip { padding: 7px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 500 12.5px var(--font-body); text-decoration: none; transition: border-color .14s, background .14s, color .14s; } a.cchip:hover { border-color: #B4C9D7; background: var(--c-surface-2); color: var(--c-brand); } .cchip.active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-weight: 600; } .cat-layout .dir-count { margin: 2px 0 12px; } .uni-row { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); transition: background .14s ease; } .uni-row:last-child { border-bottom: 0; } .uni-row:hover { background: var(--c-surface-2); } .uni-thumb { flex: none; width: 48px; height: 48px; border-radius: var(--r-tile); display: grid; place-items: center; background: var(--c-tint-blue); color: var(--c-link); overflow: hidden; } .uni-thumb--img { background: #fff; border: 1px solid var(--c-border); padding: 4px; } .uni-thumb--img img { width: 100%; height: 100%; object-fit: contain; display: block; } .uni-desc { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Hero logo tile (white, logo contained) - overrides the g-blue gradient. */ .ahero-ic.uhero-logo { background: transparent; padding: 0; overflow: hidden; border: 0; } .uhero-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* Channel cover in the hero: plain square original photo, no frame, not rounded. */ .chan-cover { width: 190px; height: 190px; border-radius: 18px; overflow: hidden; display: block; flex: none; } /* uni index (redesigned): city dropdown + separate cards with a big logo */ .uni-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .uni-grad { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 0 4px 0 12px; color: var(--c-faint); transition: border-color .14s ease; } .uni-grad:hover { border-color: #B4C9D7; } .uni-grad select { border: 0; background: none; outline: none; padding: 10px 6px; font: 500 13px var(--font-body); color: var(--c-ink); cursor: pointer; max-width: 280px; } .uni-filter__count { font: 500 12.5px var(--font-body); color: var(--c-muted); } .uni-filter__count b { color: var(--c-ink); } .uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; } .uni-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 18px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .uni-card:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.1); transform: translateY(-1px); } .uni-card__logo { flex: none; width: 92px; height: 92px; border-radius: 13px; background: #fff; border: 1px solid var(--c-border); display: grid; place-items: center; overflow: hidden; } .uni-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .uni-card__logo--ph { background: var(--c-tint-blue); color: var(--c-link); border-color: transparent; } .uni-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .uni-card__name { font: 700 15px/1.3 var(--font-body); color: var(--c-ink); transition: color .14s ease; } .uni-card:hover .uni-card__name { color: var(--c-brand); } .uni-card__city { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 12px var(--font-body); color: var(--c-muted); } .uni-card__city .icon { color: var(--c-faint); } .uni-card__desc { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uni-card__stats { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font: 500 12px var(--font-body); color: var(--c-muted); } .uni-card__stats b { color: var(--c-link); } .uni-empty { grid-column: 1/-1; padding: 44px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); background: #fff; border: 1px solid var(--c-border); border-radius: 16px; } @media (max-width: 560px) { .uni-grid { grid-template-columns: 1fr; } } .uni-mid { flex: 1; min-width: 0; } .uni-mid .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .uni-mid .top .t { font: 700 14.5px var(--font-body); color: var(--c-ink); text-decoration: none; transition: color .14s ease; } .uni-row:hover .uni-mid .top .t { color: var(--c-brand); } .uni-city { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-tint-blue); color: #43617A; font: 600 11px var(--font-body); white-space: nowrap; } .uni-cta { flex: none; } /* --- Stream-Deck "Академична карта" --- */ .acmap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .acmap__head h3 { font-size: 16px; font-weight: 700; } .acmap__note { font: 500 12px var(--font-body); color: var(--c-muted); } .sdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; } .sdc { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; } .sdb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 15px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(0,0,0,.10); transition: transform .14s ease, filter .14s ease; } .sdc:hover .sdb { transform: translateY(-2px); filter: brightness(1.06); } .sdn { position: absolute; top: 5px; right: 6px; font: 600 10px var(--font-body); background: rgba(0,0,0,.24); color: #fff; padding: 1px 6px; border-radius: 99px; line-height: 1.5; } .sdb--more { background: var(--c-surface-2); color: var(--c-link); font: 600 15px var(--font-body); box-shadow: none; border: 1px dashed #B4C9D7; } .sdcap { font: 500 10.5px/1.2 var(--font-body); color: var(--c-muted-2); text-align: center; max-width: 82px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sdc:hover .sdcap { color: var(--c-brand); } /* --- Табло wall cards --- */ .upcard { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; } .uwall__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .uwall__head h3 { font-size: 16px; font-weight: 700; } .uwall__more { font: 600 12.5px var(--font-body); color: var(--c-link); text-decoration: none; } .uwall__more:hover { text-decoration: underline; } .unews, .uads { display: flex; flex-direction: column; gap: 2px; } .unews__row, .uads__row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .14s; } .unews__row:hover, .uads__row:hover { background: var(--c-surface-2); } .unews__ic, .uads__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c-tint-blue); color: var(--c-link); } .unews__c, .uads__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .unews__c .t, .uads__c .t { font: 600 13px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unews__row:hover .t, .uads__row:hover .t { color: var(--c-brand); } .unews__c .d, .uads__c .d { font: 400 11.5px var(--font-body); color: var(--c-muted); } .uads__p { flex: none; font: 700 12.5px var(--font-body); color: var(--c-teal-d); white-space: nowrap; } /* News as blog-article cards (etalon panelUniNews): cover + date + title + excerpt */ .news-list { display: flex; flex-direction: column; gap: 4px; } .news-art { display: flex; gap: 14px; align-items: flex-start; padding: 12px 8px; margin: 0 -8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .14s; } .news-art:hover { background: var(--c-surface-2); } .news-art__cover { flex: none; width: 116px; height: 78px; border-radius: 10px; overflow: hidden; background: var(--c-tint-blue); display: grid; place-items: center; } .news-art__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-art__cover--ph { color: var(--c-link); } .news-art__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .news-art__date { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--font-body); color: var(--c-faint); } .news-art__title { font: 700 14px/1.35 var(--font-body); color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-art:hover .news-art__title { color: var(--c-brand); } .news-art__excerpt { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 520px) { .news-art__cover { width: 88px; height: 66px; } } /* ============ Ad banners (image + HTML5; sidebar + leaderboard) ============ */ .ad { position: relative; display: block; overflow: hidden; border-radius: 16px; } .ad--img img { width: 100%; height: auto; display: block; } .ad__html { width: 100%; } /* HTML5 creative served into a sandboxed iframe. The inline height (from the banner's height field) wins when set; these are the per-zone defaults. */ .ad--html { overflow: hidden; } .ad__frame { display: block; width: 100%; border: 0; } .ad--sidebar.ad--html .ad__frame { height: 500px; } .ad--horizontal.ad--html .ad__frame { height: 120px; } .ad__tag { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(20,52,78,.55); color: #fff; font: 600 9.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; } /* sidebar = vertical rectangle */ .ad--sidebar { aspect-ratio: 3 / 5; max-width: 300px; margin-inline: auto; } /* horizontal = leaderboard */ .ad--horizontal { width: 100%; min-height: 96px; } /* Демо креативът е премахнат: банерите са истинско съдържание от BSS > Банери, а при празно място компонентът не рендерира нищо. */ /* ============ Custom select () ============ */ .uidrop { position: relative; display: inline-block; min-width: 0; } .uidrop__btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px 0 14px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-input); color: var(--c-ink); font: 600 13.5px var(--font-body); cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; } .uidrop__btn:hover { border-color: #BFD6E6; } .uidrop__btn[aria-expanded="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(43,106,143,.12); } .uidrop__ic { color: var(--c-muted); flex: none; } .uidrop__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uidrop__caret { color: var(--c-muted); flex: none; transition: transform .18s ease; } .uidrop__btn[aria-expanded="true"] .uidrop__caret { transform: rotate(180deg); } .uidrop__menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; min-width: 100%; padding: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 14px 34px rgba(20,52,78,.18); animation: uidropIn .14s ease; } @keyframes uidropIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .uidrop__opts { max-height: 300px; overflow-y: auto; } .uidrop__val.is-ph { color: var(--c-faint); font-weight: 500; } .uidrop__msg { padding: 14px 12px; text-align: center; color: var(--c-muted); font: 500 13px var(--font-body); } .uidrop__search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--c-divider); color: var(--c-faint); } .uidrop__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 13px var(--font-body); color: var(--c-ink); } .uidrop__group { padding: 8px 12px 4px; font: 700 10.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--c-faint); } .uidrop__opt { display: flex; align-items: center; min-height: 44px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--c-text); font: 500 13.5px var(--font-body); cursor: pointer; transition: background .12s ease, color .12s ease; } .uidrop__opt:hover, .uidrop__opt:focus-visible { background: var(--c-surface-2); color: var(--c-ink); outline: none; } .uidrop__opt.is-sel { background: var(--c-tint-blue); color: var(--c-primary); font-weight: 700; } /* ============ Видео уроци list (one channel per row, V2 look) ============ */ .page-hero--vid { background: var(--grad-hero); } /* Same top offset as .ahero/.chero: crumbs--hero (22px) is the consistent first row; .vidh must not inherit the base .page-hero 36px above it. */ .vidh { padding-block: 0; } .vidh__top { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-block: 0 34px; } .vidh__lead .sub { max-width: 560px; } .vidh__lead .sub b { color: #fff; font-weight: 700; } .vidh__stats { display: flex; gap: 28px; flex: none; align-items: stretch; } .vidh__stat { text-align: center; } .vidh__stat b { display: block; font: 700 24px var(--font-display); color: #fff; } .vidh__stat span { display: block; font: 500 12px var(--font-body); color: #7A99AE; margin-top: 3px; } .vidh__div { width: 1px; background: rgba(255,255,255,.14); } .vid-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 26px 48px; } .vid-main { display: flex; flex-direction: column; gap: 14px; } .vid-side { display: flex; flex-direction: column; gap: 16px; } .chan { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature, 18px); padding: 16px; box-shadow: 0 1px 3px rgba(20,52,78,.04); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } a.chan:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20,52,78,.1); transform: translateY(-1px); } .chan__thumb { position: relative; flex: none; width: 168px; height: 168px; border-radius: 16px; overflow: hidden; } .chan__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .chan__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 800 38px var(--font-display); color: #fff; } .chan__mono.sm { font-size: 28px; } .chan__body { flex: 1; min-width: 0; } .chan__body h3 { font: 700 17px var(--font-body); color: var(--c-ink); } .chan__body p { font: 400 13px/1.55 var(--font-body); color: var(--c-muted); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .chan__aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 14px; text-align: right; min-width: 104px; } .chan__lessons { font: 500 12.5px var(--font-body); color: var(--c-muted); } .chan__lessons b { display: block; font: 700 24px var(--font-display); color: var(--c-ink); line-height: 1; } .chan__dur { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--font-body); color: var(--c-teal-d); white-space: nowrap; } a.chan .cta { padding: 8px 16px; border-radius: var(--r-pill); background: var(--c-tint-blue); color: var(--c-link); font: 600 12.5px var(--font-body); white-space: nowrap; transition: background .15s; } a.chan:hover .cta { background: var(--c-primary); color: #fff; } @media (max-width: 900px) { .vid-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .chan { flex-direction: column; align-items: stretch; text-align: left; } .chan__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; } .chan__aside { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .vidh__top { gap: 20px; } .vidh__stats { gap: 18px; } } /* ============ Channel detail: tabs / sections accordion / about / reviews ============ */ .chan-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 28px; align-items: start; padding-block: 30px 46px; } .chan-main { min-width: 0; } /* Channel tabs live in the navy header band (.ctabs--hero, shared with Въпроси). Only the count badge is channel-specific; styled for the dark hero. */ .ctabs__n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 700 10px var(--font-body); } .ctabs--hero button.on .ctabs__n { background: var(--c-accent); color: #fff; } /* Progress bar (auth) */ .cprog { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--sh-card); } .cprog__h { display: flex; justify-content: space-between; font: 600 13px var(--font-body); color: var(--c-ink); } .cprog__bar { height: 8px; border-radius: 999px; background: #E7EFF4; margin-top: 10px; overflow: hidden; } .cprog__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-teal), var(--c-primary)); } /* Sections accordion */ .csecs { display: flex; flex-direction: column; gap: 12px; } .csec { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); } .csec__h { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; transition: background .12s ease; } .csec__h:hover { background: #F6FAFC; } .csec__n { width: 30px; height: 30px; border-radius: 9px; background: var(--c-tint-blue); color: var(--c-primary); display: grid; place-items: center; font: 700 13px var(--font-body); flex: none; } .csec__tt { flex: 1; min-width: 0; } .csec__tt b { display: block; font: 600 14.5px var(--font-body); color: var(--c-ink); } .csec__tt small { display: block; font: 500 12px var(--font-body); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csec__chev { display: inline-flex; color: var(--c-muted); transition: transform .18s ease; flex: none; } .csec__chev.open { transform: rotate(180deg); } .csec__b { border-top: 1px solid var(--c-divider); } .csec__row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--c-divider); text-decoration: none; color: inherit; transition: background .12s ease; } .csec__row:last-of-type { border-bottom: 0; } .csec__row:hover { background: #F6FAFC; } .csec__row.is-done { opacity: .72; } .csec__thumb { width: 44px; height: 30px; border-radius: 7px; background: var(--c-navy); display: grid; place-items: center; color: var(--c-accent); flex: none; } .csec__lt { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csec__open { display: block; padding: 12px 18px; font: 600 12.5px var(--font-body); color: var(--c-link); text-decoration: none; border-top: 1px solid var(--c-divider); transition: background .12s ease; } .csec__open:hover { background: #F6FAFC; } .csec-empty { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 36px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); } /* Role pill (student vs teacher) */ .role-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: 600 10.5px var(--font-body); flex: none; white-space: nowrap; } .role-pill--student { background: var(--c-tint-blue); color: var(--c-primary); } .role-pill--teacher { background: #EEF7F0; color: #2E8B57; } /* Status pills */ .pill { padding: 4px 11px; border-radius: 999px; font: 700 11px var(--font-body); background: #EEF2F5; color: var(--c-muted); flex: none; white-space: nowrap; } .pill.sm { padding: 3px 10px; font-size: 10.5px; } .pill--ok { background: #E2F3F1; color: var(--c-teal-d); } .pill--wip { background: #FFF3EF; color: var(--c-accent-strong); } .pill--exp { background: #F3E7E4; color: #A8543C; } /* За канала (rich description) */ .cabout { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 26px; box-shadow: var(--sh-card); } .cabout h3 { font: 700 16px var(--font-display); color: var(--c-ink); margin: 0 0 12px; } .cabout__rich { font: 400 14.5px/1.75 var(--font-body); color: var(--c-text); } .cabout__rich p { margin: 0 0 12px; } .cabout__rich p:last-child { margin-bottom: 0; } .cabout__rich ul, .cabout__rich ol { margin: 0 0 12px 18px; } .cabout__rich li { margin-bottom: 5px; } .cabout__rich a { color: var(--c-link); } .cabout__rich h3, .cabout__rich h4 { font-family: var(--font-display); color: var(--c-ink); margin: 16px 0 8px; } /* Отзиви (positive/negative, no stars) */ /* Channel reviews tab: form/prompt card on top, reviews-list card below (separate blocks). */ .crevtab { display: flex; flex-direction: column; gap: 16px; } .crev-prompt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); box-shadow: var(--sh-card); } .crev-prompt__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .crev-prompt__t b { font: 700 15px var(--font-display); color: var(--c-ink); } .crev-prompt__t span { font: 400 12.5px var(--font-body); color: var(--c-muted); } .crev-prompt .btn { flex: none; } @media (max-width: 520px) { .crev-prompt .btn { width: 100%; } } .creviews { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 4px 24px 16px; box-shadow: var(--sh-card); } .creviews__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0 8px; } .creviews__lead { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; } .creviews__head h3 { font: 700 17px var(--font-display); color: var(--c-ink); } .creviews__avg { display: inline-flex; align-items: center; gap: 5px; color: var(--c-teal-d); font: 700 13px var(--font-body); } .crev-add__cta { flex: none; } .crev-mine { display: flex; gap: 12px; align-items: flex-start; padding: 18px 22px; margin: 0; border: 1px solid var(--c-border); border-radius: var(--r-feature); background: #fff; box-shadow: var(--sh-card); } .crev-mine__rec { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; } .crev-mine__rec.is-pos { background: #E2F3F1; color: var(--c-teal-d); } .crev-mine__rec.is-neg { background: #FFF3EF; color: var(--c-accent-strong); transform: rotate(45deg); } .crev-mine__b { min-width: 0; } .crev-mine__b b { font: 700 13.5px var(--font-body); color: var(--c-ink); margin-right: 8px; } .crev-mine__b p { margin: 6px 0 0; font: 400 13.5px/1.6 var(--font-body); color: var(--c-text); } /* Channel-review form: a clean titled panel (not a nested "form in a card"). */ .crev-form { border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 20px 22px 18px; margin: 0; background: #fff; box-shadow: var(--sh-card); } .crev-form__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .crev-form__head h4 { font: 700 15.5px var(--font-display); color: var(--c-ink); } .crev-form__close { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--c-surface-2); color: var(--c-muted); display: grid; place-items: center; cursor: pointer; transition: background .14s ease, color .14s ease; } .crev-form__close:hover { background: var(--c-border); color: var(--c-ink); } .crev-form__lbl { display: block; font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: 10px; } .crev-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .crev-rate__o { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1.5px solid var(--c-border); border-radius: 12px; cursor: pointer; transition: border-color .14s ease, background .14s ease; } .crev-rate__o input { position: absolute; opacity: 0; width: 0; height: 0; } .crev-rate__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-muted); flex: none; transition: background .14s ease, color .14s ease; } .crev-rate__t { font: 600 13.5px var(--font-body); color: var(--c-ink); } .crev-rate__o:hover { border-color: var(--c-teal); } .crev-rate__o.is-on { border-color: var(--c-teal); background: #E9F6F4; } .crev-rate__o.is-on .crev-rate__ic { background: var(--c-teal); color: #fff; } .crev-rate__o--neg:hover { border-color: var(--c-accent); } .crev-rate__o--neg.is-on { border-color: var(--c-accent); background: #FFF1EC; } .crev-rate__o--neg.is-on .crev-rate__ic { background: var(--c-accent-strong); color: #fff; } .crev-form__ta { width: 100%; } .crev-form__act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } @media (max-width: 520px) { .crev-rate { grid-template-columns: 1fr; } } .crevrow { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--c-divider); } .crevrow__b { min-width: 0; } .crevrow__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .crevrow__top b { font: 700 13.5px var(--font-body); color: var(--c-ink); } .crevrow__rec { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 10.5px var(--font-body); } .crevrow__rec.is-pos { background: #E2F3F1; color: var(--c-teal-d); } .crevrow__rec.is-neg { background: #FFF3EF; color: var(--c-accent-strong); } .crevrow__b p { margin: 6px 0 0; font: 400 13.5px/1.65 var(--font-body); color: var(--c-text); } .crev-empty { padding: 30px 20px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); } @media (max-width: 900px) { .chan-body { grid-template-columns: minmax(0, 1fr); } } /* ============ Channel divisions + video item lists ============ */ .krazdel-list { display: flex; flex-direction: column; gap: 8px; } .krazdel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 14px; text-decoration: none; color: inherit; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .krazdel:hover { border-color: #BFD6E6; box-shadow: 0 8px 22px rgba(20,52,78,.08); transform: translateY(-1px); } .krazdel__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-hero); color: #fff; flex: none; } .krazdel__tt { flex: 1; min-width: 0; } .krazdel__tt b { display: block; font: 700 15px var(--font-body); color: var(--c-ink); } .krazdel__tt small { display: block; margin-top: 2px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .krazdel:hover .krazdel__tt b { color: var(--c-primary); } .krazdel__n { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--font-body); color: var(--c-link); white-space: nowrap; flex: none; } .kvid-list { display: flex; flex-direction: column; } .kvid { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-bottom: 1px solid var(--c-divider); text-decoration: none; color: inherit; transition: background .14s ease; } .kvid:last-child { border-bottom: 0; } .kvid:hover { background: var(--c-surface-2); } .kvid__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c-tint-blue); color: var(--c-primary); flex: none; } .kvid.is-seen .kvid__ic { background: var(--c-success-bg); color: var(--c-teal-d); } .kvid__c { flex: 1; min-width: 0; } .kvid__c .t { display: block; font: 600 14px var(--font-body); color: var(--c-ink); } .kvid__c .m { display: block; margin-top: 2px; font: 500 11.5px var(--font-body); color: var(--c-muted); } .kvid:hover .kvid__c .t { color: var(--c-primary); } .kvid__go { color: var(--c-faint); flex: none; } /* ============ Comment thread (AJAX) bits ============ */ .qa-ans__del { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--c-faint); cursor: pointer; display: grid; place-items: center; transition: background .14s ease, color .14s ease; flex: none; } .qa-ans__del:hover { background: var(--c-danger-bg); color: var(--c-accent-strong); } .btn.is-busy { opacity: .65; pointer-events: none; } /* ============ Video lesson watch page (V2 look; etalon Plyr player) ============ */ .watch-main { min-width: 0; } .watch-main > * + * { margin-top: 16px; } /* Lesson lead card (plain white, under the hero) */ .vlead { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 20px 24px; box-shadow: var(--sh-card); } .vlead__main { min-width: 0; } .vlead .eyebrow { font: 600 12px var(--font-body); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; } .vlead__title { font: 700 24px/1.32 var(--font-display); color: var(--c-ink); margin-top: 8px; } .vlead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin-top: 13px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .vlead__meta .lect { display: inline-flex; align-items: center; gap: 7px; color: var(--c-text); } .vlead__meta > span:not(.lect) { position: relative; padding-left: 16px; } .vlead__meta > span:not(.lect)::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--c-faint); transform: translateY(-50%); } /* Player: fixed 16:9 box, navy letterbox (not black), rounded, branded poster. Plyr fills the box (CSS-driven ratio); the harvested Plyr hardcodes a black wrapper bg, so we override it to navy. Content + poster are 16:9, so object-fit COVER fills the 16:9 frame with no sub-pixel navy slivers (the "black lines"). */ .vplayer { position: relative; aspect-ratio: 16 / 9; background: var(--c-navy-d); border-radius: var(--r-feature); overflow: hidden; box-shadow: 0 10px 30px rgba(20,52,78,.14); --plyr-color-main: var(--c-accent); } .vplayer .plyr, .vplayer .plyr__video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: var(--c-navy-d); } .vplayer .plyr__video-wrapper video { width: 100%; height: 100%; object-fit: cover; background: var(--c-navy-d); } .vplayer .plyr__poster { background-size: cover; background-color: var(--c-navy-d); } /* Controls bar in the site navy (replaces Plyr's slate-grey default gradient); plyr.css loads after app.css, so !important. */ .vplayer .plyr__controls { background: linear-gradient(transparent, rgba(20, 52, 78, .92)) !important; } /* The mandatory branded poster stays visible until playback starts (the harvested Plyr hides it once the source preloads); on play, .plyr--stopped is removed. */ .vplayer .plyr--stopped.plyr__poster-enabled .plyr__poster { opacity: 1; } /* Play button 1:1 with the etalon: Plyr's slate-blue circle + white triangle sits in the centre of the poster's green disc, wrapped in a soft light-green halo. (Plyr's default overlaid bg is already this slate; we keep it and add the ring.) plyr.css loads after app.css, so !important. */ .vplayer .plyr__control--overlaid { background: rgba(89, 127, 158, .92) !important; box-shadow: 0 0 0 16px rgba(120, 195, 150, .38) !important; transition: transform .14s ease, box-shadow .14s ease; } .vplayer .plyr__control--overlaid:hover, .vplayer .plyr__control--overlaid:focus { background: rgba(89, 127, 158, 1) !important; box-shadow: 0 0 0 20px rgba(120, 195, 150, .45) !important; } .vplayer .plyr__control--overlaid svg { color: #fff; fill: #fff; } .vplayer__badge { position: absolute; top: 14px; left: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(13,35,52,.72); color: #fff; font: 600 11.5px var(--font-body); pointer-events: none; } /* Guest gate (preview notice) */ .vgate { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid #F3D9A8; border-radius: var(--r-feature); background: linear-gradient(180deg, #FFF9EE, #FEF4E1); } .vgate__ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #FBEBCB; color: #C68A1E; } .vgate__tx { flex: 1; min-width: 0; } .vgate__tx .t { font: 700 14px var(--font-body); color: var(--c-ink); } .vgate__tx .s { font: 500 12.5px var(--font-body); color: #7A6636; margin-top: 3px; } .vgate__act { display: flex; align-items: center; gap: 9px; flex: none; flex-wrap: wrap; } .vgate__login { padding: 10px 16px; border-radius: 10px; border: 1.5px solid #E4CE9E; background: #fff; color: #8A6A22; font: 600 12.5px var(--font-body); text-decoration: none; transition: background .14s ease; } .vgate__login:hover { background: #FBEBCB; } .vgate__reg { padding: 10px 18px; border-radius: 10px; background: var(--c-accent); color: #fff; font: 600 12.5px var(--font-body); text-decoration: none; transition: background .14s ease; } .vgate__reg:hover { background: var(--c-accent-strong); } @media (max-width: 560px) { .vgate { flex-direction: column; align-items: flex-start; } } /* Inline owner/editor delete (answers, questions, materials) - subtle by default, soft-red on hover; pushed to the right in flex action rows. */ .moddel { display: inline-flex; margin-left: auto; } .moddel__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--c-border); border-radius: 9px; background: #fff; color: var(--c-muted); font: 600 12.5px var(--font-body); cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease; } .moddel__btn:hover { color: var(--c-accent-strong); border-color: color-mix(in srgb, var(--c-accent-strong) 40%, var(--c-border)); background: color-mix(in srgb, var(--c-accent-strong) 6%, #fff); } .mhead .moddel { margin-top: 12px; } /* Lesson description (rich) */ .vdesc { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 20px 24px; box-shadow: var(--sh-card); font: 400 14.5px/1.7 var(--font-body); color: var(--c-text); } .vdesc p { margin: 0 0 12px; } .vdesc p:last-child { margin-bottom: 0; } .vdesc a { color: var(--c-link); } .vdesc ul, .vdesc ol { margin: 0 0 12px 18px; } .vdesc h3, .vdesc h4 { font-family: var(--font-display); color: var(--c-ink); margin: 14px 0 8px; } /* Division intro line */ .dlead { font: 400 15px/1.6 var(--font-body); color: var(--c-muted); margin: 0 0 16px; } /* ============ Unsubscribe page ============ */ .unsub-wrap { display: flex; justify-content: center; padding: 60px 20px 80px; } .unsub-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); box-shadow: var(--sh-card); padding: 40px 36px; text-align: center; } .unsub-ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-tint, #f2f6fb); color: var(--c-primary); margin-bottom: 18px; } .unsub-ic--ok { background: color-mix(in srgb, var(--c-success) 14%, #fff); color: var(--c-success); } .unsub-title { font: 700 22px/1.3 var(--font-display); color: var(--c-ink); margin: 0 0 10px; } .unsub-body { font: 400 15px/1.65 var(--font-body); color: var(--c-muted); margin: 0 0 24px; } .unsub-body b { color: var(--c-text); } .unsub-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .unsub-acts form { margin: 0; } .unsub-manage { display: inline-block; margin-top: 20px; font: 500 13.5px var(--font-body); color: var(--c-link); } .unsub-manage:hover { text-decoration: underline; } .vlist { display: flex; flex-direction: column; } .vlist__row { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .14s ease; } .vlist__row:hover { background: var(--c-surface-2); } .vlist__row.is-active { background: var(--c-tint-blue); } .vlist__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-hero); color: #fff; flex: none; } .vlist__row.is-active .vlist__ic { background: var(--c-accent); } .vlist__tt { min-width: 0; } .vlist__tt b { display: block; font: 600 13px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vlist__tt small { font: 500 11px var(--font-body); color: var(--c-muted); } .vlist__row:hover .vlist__tt b { color: var(--c-brand); } /* ============ Scroll-to-top (progress ring) ============ */ .totop { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--c-primary); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(20,52,78,.22); opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), color .18s ease, box-shadow .2s ease; } .totop.is-on { opacity: 1; transform: none; pointer-events: auto; } .totop:hover { color: var(--c-accent); box-shadow: 0 12px 30px rgba(20,52,78,.32); } .totop:active { transform: scale(.94); } .totop__ic { position: relative; z-index: 1; transition: transform .18s ease; } .totop:hover .totop__ic { transform: translateY(-2px); } .totop__ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--c-accent) var(--p, 0%), rgba(43,106,143,.14) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); pointer-events: none; } @media (max-width: 560px) { .totop { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } } /* --- Табло: two-column feeds --- */ .uni-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; } .uni-two .side-card { margin: 0; } /* --- official site card --- */ .uweb { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--grad-hero); border: 0; color: #fff; } .uweb .eyebrow { font: 700 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #9DBACD; } .uweb__tx h3 { color: #fff; font-size: 17px; margin-top: 4px; } .uweb__tx p { font: 400 13px var(--font-body); color: #CFE2ED; margin: 6px 0 0; } .uweb__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-input); background: #fff; color: var(--c-link); font: 700 13px var(--font-body); text-decoration: none; transition: transform .14s ease; } .uweb__btn:hover { transform: translateY(-1px); } /* --- За университета --- */ .about-card h2 { font-size: 20px; margin-bottom: 14px; } .about-lead { font: 400 15px/1.7 var(--font-body); color: var(--c-text); } .about-rich { font: 400 14.5px/1.75 var(--font-body); color: var(--c-text); } .about-rich p { margin: 0 0 12px; } .about-rich a { color: var(--c-link); } .about-rich img { max-width: 100%; height: auto; } .about-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-divider); } .about-facts span { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .about-facts .icon { color: var(--c-faint); } @media (max-width: 760px) { .uni-two { grid-template-columns: 1fr; } } /* ==================== /УНИВЕРСИТЕТИ ==================== */ /* ==================== УЧЕБНИЦИ / ОБЯВИ (ads) ==================== */ /* thumb gradients (shared) */ .g-teal { background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)); } .g-coral { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong)); } .g-amber { background: linear-gradient(135deg, var(--c-amber), #D9915B); } .g-blue2 { background: linear-gradient(135deg, var(--c-primary-d), var(--c-navy)); } /* list hero */ .page-hero--book { background: var(--grad-hero); } .bookh { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .bookh .sub { color: #D3EEEA; max-width: 640px; } .bookh__cta { padding: 13px 26px; border-radius: var(--r-tile); background: #fff; color: var(--c-teal-d); font: 700 14.5px var(--font-body); box-shadow: 0 8px 20px rgba(0,0,0,.15); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .bookh__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); color: var(--c-teal-d); } /* list layout */ .book-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; padding-block: 28px 48px; } .book-side { display: flex; flex-direction: column; gap: 16px; } .book-layout .ql-toolbar { margin-bottom: 18px; } /* Ads toolbar: the "Всички области" filter is the primary control - ~2x its natural width; search fills the rest. Both shrink (min-width:0) so they never overflow. */ .book-layout .ql-toolbar .ql-search { flex: 1 1 240px; } .book-layout .ql-toolbar .uidrop { flex: 0 1 360px; min-width: 0; } /* listing card + rows */ .ad-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-card); } .ad-row { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); text-decoration: none; color: inherit; transition: background .12s ease; } .ad-row:last-child { border-bottom: 0; } .ad-row:hover { background: #F6FAFC; } .ad-thumb { width: 62px; height: 82px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; box-shadow: 4px 4px 0 var(--c-surface-2); overflow: hidden; } .ad-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .ad-body { flex: 1; min-width: 0; } .ad-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ad-titlerow .t { font: 700 15px var(--font-body); color: var(--c-ink); transition: color .12s ease; } .ad-row:hover .ad-titlerow .t { color: var(--c-primary); } .ad-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .ad-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .ad-price .p { font: 700 18px var(--font-display); color: var(--c-ink); white-space: nowrap; } .ad-price .p.gift { font-size: 16px; color: var(--c-teal); } .ad-price .cta { padding: 8px 18px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 600 12.5px var(--font-body); white-space: nowrap; transition: background .14s ease; } .ad-row:hover .ad-price .cta { background: var(--c-primary-d); } .chip-tag { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); font: 500 11px var(--font-body); background: var(--c-tint-blue); color: #43617A; } /* detail */ .ad-detail { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 26px 30px; box-shadow: var(--sh-card); } .ad-detail__head { display: flex; gap: 18px; align-items: flex-start; } .ad-detail .ad-thumb { width: 116px; height: 150px; border-radius: 10px; box-shadow: none; } .ad-detail__lead { flex: 1; min-width: 0; } .ad-detail__lead h1 { font: 700 22px/1.35 var(--font-display); color: var(--c-ink); } .ad-detail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ad-detail__price { flex: none; text-align: center; background: #EDF4F8; border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 22px; min-width: 108px; } .ad-detail__price--gift { background: var(--c-success-bg); border-color: var(--c-success-bd); } .ad-detail__price-lbl { display: block; font: 600 9.5px var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 5px; } .ad-detail__price .p { font: 800 22px var(--font-display); color: var(--c-primary); white-space: nowrap; } .ad-detail__price .p.gift { font-size: 16px; color: var(--c-teal); } .ad-detail__body { margin-top: 20px; font: 400 14.5px/1.7 var(--font-body); color: var(--c-text); white-space: pre-line; } .ad-detail__meta { display: flex; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-divider); font: 500 12.5px var(--font-body); color: var(--c-muted); } .ad-detail__owner { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-divider); } /* Ad detail: 2-col product layout (gallery | info); sidebar drops at 1100, this at 640 */ .adshow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; } .adg { position: sticky; top: 88px; } .adg__main { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-feature); background: linear-gradient(160deg, #F4F8FB, #E8F0F6); display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 4; } .adg__mainimg { width: 100%; height: 100%; object-fit: contain; display: block; } .adg__zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 52, 78, .72); color: #fff; cursor: zoom-in; opacity: 0; transition: opacity .16s ease, background .16s ease; } .adg__main:hover .adg__zoom { opacity: 1; } .adg__zoom:hover { background: var(--c-primary); } .adg__ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; } /* Inline question-attachment gallery (reuses .adg, but not sticky and landscape-friendly). */ .qimg.adg { position: static; margin: 16px 0 4px; max-width: 520px; } .qimg .adg__main { aspect-ratio: 16 / 10; } .adg__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .adg__thumb { width: 58px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--c-border); overflow: hidden; cursor: pointer; transition: border-color .14s ease, transform .14s ease; } .adg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .adg__thumb:hover { transform: translateY(-2px); border-color: #BFD6E6; } .adg__thumb.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); } .adshow__info { min-width: 0; } .adshow__title { margin: 0 0 10px; font: 700 25px/1.18 var(--font-display); color: var(--c-ink); overflow-wrap: anywhere; } .adshow__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; color: var(--c-muted); font: 500 13px var(--font-body); } .adshow__facts span { display: inline-flex; align-items: center; gap: 6px; } .adshow__price { display: inline-flex; flex-direction: column; align-items: flex-start; background: #EDF4F8; border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 22px; } .adshow__price.is-gift { background: var(--c-success-bg); border-color: var(--c-success-bd); } .adshow__price-lbl { font: 600 9.5px var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 4px; } .adshow__price .p { font: 800 26px var(--font-display); color: var(--c-primary); white-space: nowrap; line-height: 1; } .adshow__price .p.gift { font-size: 19px; color: var(--c-teal); } .adshow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip-tag--cond { align-items: center; gap: 4px; background: var(--c-success-bg); color: var(--c-teal-d); } .adshow__posted { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 10px; background: #F1F6FA; border: 1px solid var(--c-border); font: 500 13px var(--font-body); color: var(--c-muted); } .adshow__posted svg { color: var(--c-primary); flex: none; } .adshow__posted b { color: var(--c-ink); font-weight: 700; } /* ad validity/expiry surfaces only in "Моите обяви" */ .ad-row--exp { opacity: .72; } .ad-meta__exp { color: #A8543C; font-weight: 600; } /* Моите данни - unified management hub */ .mydata { padding-block: 26px 48px; display: flex; flex-direction: column; gap: 12px; min-height: 58vh; } .md-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px; transition: border-color .12s ease, box-shadow .12s ease; } .md-row:hover { border-color: #C9DCE8; box-shadow: 0 4px 14px rgba(20, 52, 78, .06); } .md-row__body { flex: 1; min-width: 0; } .md-row__t { display: inline-block; font: 700 15px var(--font-body); color: var(--c-ink); text-decoration: none; } .md-row__t:hover { color: var(--c-primary); } .md-row__t--gone { color: var(--c-muted); font-weight: 500; } .md-row__excerpt { margin: 4px 0 0; font: 400 13px/1.55 var(--font-body); color: var(--c-text); } .md-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .md-row__acts { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .md-del:hover { border-color: #E3B9AF; color: #A8543C; } .md-editform { margin-top: 8px; } .md-editform__foot { display: flex; gap: 8px; margin-top: 8px; } .md-empty { flex: 1 0 auto; min-height: 300px; background: #fff; border: 1px dashed var(--c-border); border-radius: var(--r-card); padding: 40px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .md-empty__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c-tint-blue); color: var(--c-primary); } .md-empty p { margin: 0; max-width: 420px; } .md-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .md-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 12px 16px; } .md-contact__id { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .md-contact__txt { display: flex; flex-direction: column; min-width: 0; } .md-contact__txt b { font: 700 14px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-contact__txt small { font: 500 12px var(--font-body); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-contact__id:hover b { color: var(--c-primary); } @media (max-width: 560px) { .md-row { flex-wrap: wrap; } .md-row__acts { width: 100%; justify-content: flex-start; } } .share-editnote { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 9px 13px; border-radius: 10px; background: #F1F6FA; border: 1px solid var(--c-border); font: 500 12.5px var(--font-body); color: var(--c-muted); } .share-editnote svg { color: var(--c-primary); flex: none; } .share-editnote b { color: var(--c-ink); } /* Моите контакти - hub category cards (each -> a standalone list page) */ .khub-wrap { padding-block: 26px 48px; } .khub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .kcard { aspect-ratio: 1 / 1; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 22px; text-decoration: none; color: inherit; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .kcard:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20, 52, 78, .10); transform: translateY(-2px); } .kcard--star { border: 2px solid var(--c-success-bd); } .kcard__head { display: flex; align-items: center; gap: 12px; } .kcard__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-tint-blue); color: var(--c-primary); } .kcard--star .kcard__ic { background: var(--c-success-bg); color: var(--c-teal-d); } .kcard__tt { display: flex; flex-direction: column; min-width: 0; } .kcard__tt b { font: 700 15px var(--font-body); color: var(--c-ink); } .kcard__tt span { font: 500 12px var(--font-body); color: var(--c-muted); } .kcard__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .kcard__num { text-align: center; line-height: 1; } .kcard__num b { display: block; font: 800 40px var(--font-display); color: var(--c-ink); } .kcard--star .kcard__num b { color: var(--c-teal-d); } .kcard__num span { display: block; margin-top: 5px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .kcard__avs { display: flex; align-items: center; justify-content: center; } .kcard__avs .uav { border: 2px solid #fff; } .kcard__avs .uav:not(:first-child) { margin-left: -10px; } .kcard__more { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; margin-left: -10px; border-radius: var(--r-pill); background: var(--c-surface-2); border: 2px solid #fff; color: var(--c-muted); font: 600 12px var(--font-body); } .kcard__cta { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 11px; border-radius: var(--r-input); background: var(--c-tint-blue); color: var(--c-primary); font: 600 13px var(--font-body); transition: background .14s ease; } .kcard:hover .kcard__cta { background: #DCE9F1; } .kcard--star .kcard__cta { background: var(--c-success-bg); color: var(--c-teal-d); } .kcard--star:hover .kcard__cta { background: #D8F0EA; } /* Contacts list page: sidebar category nav + follow button + member-row actions */ .kside { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; } .kside__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; text-decoration: none; color: var(--c-text); font: 600 13px var(--font-body); transition: background .12s ease, color .12s ease; } .kside__item:hover { background: var(--c-surface-2); color: var(--c-ink); } .kside__item.is-on { background: var(--c-tint-blue); color: var(--c-primary); } .kside__ic { flex: none; display: grid; place-items: center; color: var(--c-muted); } .kside__item.is-on .kside__ic { color: var(--c-primary); } .kside__t { flex: 1; min-width: 0; } .kside__n { font: 700 12.5px var(--font-body); color: var(--c-muted); } .kside__item.is-on .kside__n { color: var(--c-primary); } .member-row__acts { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: none; } .kfollow { display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--r-pill); border: 1.5px solid var(--c-primary); background: var(--c-primary); color: #fff; font: 600 12.5px var(--font-body); cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease; } .kfollow:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); } .kfollow--on { background: #fff; color: var(--c-teal-d); border-color: var(--c-success-bd); } .kfollow--on:hover { background: #FBF0ED; color: #A8543C; border-color: #E3B9AF; } @media (max-width: 620px) { .member-row__acts { order: 4; margin-left: auto; } } .adshow .ad-detail__body { margin-top: 16px; } /* Ad form: image slots grid (up to MAX; slot 1 = main) */ .adimg-hint { margin: 2px 0 12px; font: 500 12.5px var(--font-body); color: var(--c-muted); } /* Single drag-and-drop image zone (x-data="imageDrop"): one area, add/remove tiles. */ .imgdrop { border: 2px dashed #C6D6E2; border-radius: 14px; padding: 14px; background: #FAFCFD; transition: border-color .15s ease, background .15s ease; } .imgdrop.is-over { border-color: var(--c-primary); background: #EAF3F8; } .imgdrop__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .imgdrop__grid { display: flex; flex-wrap: wrap; gap: 12px; } .imgdrop__tile { position: relative; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--c-border); } .imgdrop__tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .imgdrop__x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(20, 52, 78, .74); color: #fff; font: 700 15px/1 var(--font-body); cursor: pointer; display: grid; place-items: center; transition: background .14s ease, transform .14s ease; } .imgdrop__x:hover { background: var(--c-accent-strong); transform: scale(1.08); } .imgdrop__add { width: auto; min-width: 150px; height: 104px; padding: 0 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed #C6D6E2; border-radius: 10px; background: #fff; color: var(--c-muted); font: 600 12px var(--font-body); line-height: 1.35; cursor: pointer; text-align: center; transition: border-color .14s ease, color .14s ease, background .14s ease; } .imgdrop__add:hover { border-color: var(--c-primary); color: var(--c-primary); background: #F3F9FC; } /* Empty state: the whole zone is one big, inviting drop area (no add-button-in-a-box). */ .imgdrop.is-empty { padding: 0; } .imgdrop.is-empty .imgdrop__grid { display: block; } .imgdrop.is-empty .imgdrop__add { width: 100%; min-height: 160px; height: auto; border: 0; background: transparent; padding: 34px 16px; font-size: 13px; } .imgdrop.is-empty .imgdrop__add:hover { background: transparent; } .imgdrop.is-empty .imgdrop__add svg { width: 30px; height: 30px; } /* Compact variant for the inline answer form. */ .imgdrop--compact { margin-top: 10px; padding: 10px; } .imgdrop--compact .imgdrop__tile { width: 78px; height: 78px; } .imgdrop--compact .imgdrop__add { min-width: 120px; height: 78px; font-size: 11.5px; } .imgdrop--compact.is-empty .imgdrop__add { min-height: 0; height: auto; padding: 16px; font-size: 12.5px; } .imgdrop--compact.is-empty .imgdrop__add svg { width: 22px; height: 22px; } /* Simple centred empty-state note (was inlined ~9x across list views). */ .empty-note { padding: 40px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); } .empty-note a { color: var(--c-link); } .empty-note--span { grid-column: 1 / -1; } /* Inline muted hint text (e.g. the "log in to comment/answer" prompt) - the box-less sibling of .empty-note. Replaces the repeated color+font inline block. */ .muted-note { color: var(--c-muted); font: 500 14px var(--font-body); } .muted-note a { color: var(--c-link); } .adimg-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 460px; } .adimg-slot { position: relative; aspect-ratio: 3 / 4; border: 1.5px dashed #C6D6E2; border-radius: 12px; background: #F7FBFD; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: border-color .14s ease, background .14s ease; } .adimg-slot:hover { border-color: var(--c-primary); background: #EFF6FB; } .adimg-slot__in { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .adimg-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; } .adimg-slot__ph { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #7C93A6; font: 600 11px var(--font-body); text-align: center; padding: 4px; } .adimg-slot__ph svg { color: var(--c-faint); } .adimg-slot__badge { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 700 9px var(--font-body); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; } @media (max-width: 640px) { .adshow { grid-template-columns: 1fr; gap: 18px; } .adg { position: static; max-width: 300px; } .adimg-slots { max-width: none; } } /* seller + related sidebar */ .seller { display: flex; align-items: center; gap: 12px; } .seller__id .n { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; } .seller__id a.n:hover { color: var(--c-link); } .seller__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 16px; border-radius: 11px; background: var(--c-primary); color: #fff; font: 600 13.5px var(--font-body); text-decoration: none; transition: background .14s ease; } .seller__cta:hover { background: var(--c-primary-d); color: #fff; } .seller__note { margin-top: 12px; font: 400 12px/1.5 var(--font-body); color: var(--c-faint); } .detail-side { display: flex; flex-direction: column; gap: 20px; } .seller__av { display: inline-flex; border-radius: 50%; transition: transform .14s ease, box-shadow .14s ease; } .seller__av:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(6, 22, 38, .55); } .seller__av:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; } .rel-news { display: block; padding: 12px 0; border-top: 1px solid var(--c-divider); text-decoration: none; } .rel-news:first-of-type { border-top: 0; } .rel-news__t { display: block; font: 600 13.5px/1.4 var(--font-body); color: var(--c-ink); transition: color .12s ease; } .rel-news:hover .rel-news__t { color: var(--c-link); } .rel-news__d { display: block; font: 500 11.5px var(--font-body); color: var(--c-faint); margin-top: 4px; } .rel-news__empty { font: 400 13px var(--font-body); color: var(--c-muted); } .rel-news__all { display: inline-block; margin-top: 14px; font: 600 13px var(--font-body); color: var(--c-link); } /* Sidebar ad row ("Подобни обяви"): ad thumb + title + price, with the site's standard row hover (bg fill, like the colleague/rank rows). */ .sad-row { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; padding: 8px; margin: 0 -8px; border-radius: 10px; transition: background .14s ease; } .sad-row:hover { background: var(--c-surface-2); } .sad-row__thumb { flex: 0 0 auto; width: 40px; height: 52px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; color: #fff; } .sad-row__thumb img { width: 100%; height: 100%; object-fit: cover; } .sad-row__tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sad-row__tx b { font: 600 13px/1.35 var(--font-body); color: var(--c-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .14s ease; } .sad-row:hover .sad-row__tx b { color: var(--c-brand); } .sad-row__tx small { font: 600 11.5px var(--font-body); color: var(--c-accent-strong); } .howto-cta { display: grid; place-items: center; height: 44px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 13.5px var(--font-body); margin-top: 16px; text-decoration: none; transition: background .14s ease; } .howto-cta:hover { background: var(--c-accent-strong); color: #fff; } @media (max-width: 900px) { .book-layout { grid-template-columns: minmax(0, 1fr); } } /* ==================== /УЧЕБНИЦИ ==================== */ /* ==================== НАЧАЛО (home) ==================== */ /* HERO */ .hero { position: relative; background: var(--c-navy); color: #fff; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 12%, rgba(55,127,169,.42), transparent 55%), radial-gradient(circle at 20% 112%, rgba(47,163,154,.20), transparent 55%); pointer-events: none; } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding-block: 64px 56px; } .hero__copy h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); font-weight: 700; line-height: 1.1; } .hero__sub { color: #B9D2E2; font-size: 16.5px; line-height: 1.6; margin: 16px 0 0; max-width: 520px; } .hero-rot { position: relative; display: inline-grid; vertical-align: bottom; } .hero-rot > span { grid-area: 1 / 1; opacity: 0; animation: heroWord 12s ease-in-out infinite; white-space: nowrap; } .hero-rot > span:nth-child(1) { color: #7CC0E8; animation-delay: 0s; } .hero-rot > span:nth-child(2) { color: #F0A35D; animation-delay: 3s; } .hero-rot > span:nth-child(3) { color: #5FC9BE; animation-delay: 6s; } .hero-rot > span:nth-child(4) { color: #B78BE6; animation-delay: 9s; } @keyframes heroWord { 0% { opacity: 0; transform: translateY(14px); } 3% { opacity: 1; transform: translateY(0); } 22% { opacity: 1; transform: translateY(0); } 25%, 100% { opacity: 0; transform: translateY(-14px); } } .hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .hero__tags .lbl { font: 500 12.5px var(--font-body); color: #7A99AE; } .tag-o { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.2); color: #CFE2ED; font: 500 12.5px var(--font-body); transition: background .14s ease, color .14s ease; } .tag-o:hover { background: rgba(255,255,255,.1); color: #fff; } .hero__proof { display: flex; align-items: center; gap: 15px; margin-top: 26px; } .hero__avatars { display: flex; } .hero__avatars .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-navy); display: grid; place-items: center; font: 700 11px var(--font-body); color: #fff; overflow: hidden; background: #243C52; } .hero__avatars .av .uav { width: 100%; height: 100%; border-radius: 0; clip-path: none; font-size: 11px; } .hero__avatars .av + .av { margin-left: -11px; } .hero__avatars .more { background: #243C52; color: #9DBACD; font-size: 10px; } .hero__proof p { margin: 0; font: 500 13px/1.5 var(--font-body); color: #9DBACD; } .hero__proof p b { color: #fff; } .hero__cards { position: relative; height: 360px; pointer-events: none; } /* Static halftone map of Bulgaria sitting behind the floating cards. The PNG is only the silhouette (a mask); the dots are drawn by the browser, so they stay crisp at any size and the asset stays small. */ .hero__cards::before { content: ""; position: absolute; inset: -20% -22%; z-index: 0; background-image: radial-gradient(circle at center, rgba(255, 255, 255, .34) 1px, transparent 1.1px); background-size: 4.5px 4.5px; -webkit-mask: url('../img/bgmap.png') no-repeat center / contain; mask: url('../img/bgmap.png') no-repeat center / contain; } .hero__cards .fcard { position: absolute; z-index: 1; background: #fff; color: var(--c-ink); box-shadow: var(--sh-float); animation: heroFloat 6s ease-in-out infinite; will-change: transform; } .hero__cards .fcard--video { animation-delay: -.5s; } .hero__cards .fcard--q { animation-delay: -3s; } .hero__cards .fcard--m { animation-delay: -4.5s; } .hero__cards .fcard--count { animation-delay: -1.8s; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .fcard--video { top: 10px; left: 0; display: flex; gap: 11px; align-items: center; border-radius: 14px; padding: 11px 15px; } .fcard--video .thumb { width: 46px; height: 32px; border-radius: 7px; background: var(--c-navy); display: grid; place-items: center; color: var(--c-accent); flex: none; } .fcard--video .t { font: 600 12.5px var(--font-body); } .fcard--video .s { font: 400 11px var(--font-body); color: var(--c-muted); margin-top: 2px; } .fcard--q { top: 0; right: 0; width: 330px; border-radius: var(--r-feature); padding: 18px; } .fcard--q .row { display: flex; align-items: center; gap: 10px; } .fcard--q .nm { font: 600 13.5px var(--font-body); } .fcard--q .tm { font: 400 12px var(--font-body); color: var(--c-muted); } .fcard--q .body { font: 400 13.5px/1.5 var(--font-body); color: var(--c-text); margin: 12px 0 0; } .fcard--q .acts { display: flex; gap: 8px; margin-top: 14px; } .fcard--m { bottom: 34px; left: 0; width: 300px; border-radius: var(--r-feature); padding: 16px 18px; display: flex; gap: 12px; } .fcard--m .t { font: 600 13.5px var(--font-body); } .fcard--m .s { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 3px; } .fcard--m .fstats { display: flex; gap: 10px; margin-top: 7px; font: 500 11.5px var(--font-body); color: var(--c-teal); } .fcard--m .fstats .amb { color: var(--c-amber); } .fcard--count { bottom: 0; right: 56px; display: inline-flex; align-items: center; gap: 9px; background: var(--c-teal); color: #fff; border-radius: var(--r-pill); padding: 10px 18px; font: 600 13px var(--font-body); box-shadow: 0 12px 30px rgba(0,0,0,.28); } .mini-btn { padding: 8px 16px; border-radius: 10px; font: 600 12.5px var(--font-body); border: 0; cursor: pointer; text-decoration: none; display: inline-block; } .mini-btn--pri { background: var(--c-primary); color: #fff; } .mini-btn--soft { background: var(--c-tint-blue); color: var(--c-link); } .paper { position: relative; background: linear-gradient(180deg, var(--c-tint-blue), #D8E4EC); border: 1px solid #C9D9E4; border-radius: 6px; flex: none; width: 44px; height: 56px; } .paper::before, .paper::after, .paper i { content: ""; position: absolute; height: 3px; border-radius: 2px; background: #C9D9E4; } .paper::before { inset: 8px 7px auto 7px; background: #B4C9D7; } .paper::after { inset: 16px 11px auto 7px; } .paper i { inset: 24px 12px auto 7px; } /* STATS strip - scoped `section.stats` so the bare `.stats` bars on detail heroes stay untouched */ section.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--c-hairline); border-bottom: 1px solid var(--c-hairline); } .stat { background: #fff; padding: 26px 32px; text-align: center; } .stat .n { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--c-primary); } .stat .l { font: 600 12px var(--font-body); color: var(--c-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; } .stat--live .n { color: var(--c-teal); } .stat--live .l { display: inline-flex; align-items: center; gap: 7px; } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; } .stat--live .dot-live { animation: dot-pulse 1.8s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,0); } } /* SECTION headers */ .sec { background: var(--c-page); padding-block: 52px 0; } .sec.tail { padding-bottom: 56px; } .sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .sec__head h2 { font-size: 24px; font-weight: 700; } .sec__head .sub { margin: 6px 0 0; font: 400 14px var(--font-body); color: var(--c-muted-2); } .sec__link { font: 600 14px var(--font-body); color: var(--c-link); white-space: nowrap; transition: color .14s ease; } .sec__link:hover { color: #1B5470; text-decoration: underline; text-underline-offset: 3px; } .sec__grid { display: grid; gap: 16px; max-width: var(--container); margin: 22px auto 0; padding-inline: var(--pad); } .sec__grid.mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .sec__grid.mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .sec__grid.mat-grid { grid-template-columns: minmax(0, 1fr); } } /* VIDEO carousel (reuses .vid-card) */ .vcarousel { position: relative; max-width: var(--container); margin: 22px auto 0; padding-inline: var(--pad); } .vcarousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 0 30px; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .vcarousel__track::-webkit-scrollbar { display: none; } .vcarousel__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } .vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .vcarousel .vid-card { flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start; } .vcarousel .vid-card:hover { box-shadow: 0 8px 22px rgba(20,52,78,.18); transform: translateY(-3px); } .vcarousel__track a, .vcarousel__track img { -webkit-user-drag: none; user-select: none; } @media (max-width: 1200px) { .vcarousel .vid-card { flex-basis: calc((100% - 3 * 16px) / 4); } } @media (max-width: 900px) { .vcarousel .vid-card { flex-basis: calc((100% - 2 * 16px) / 3); } } @media (max-width: 620px) { .vcarousel .vid-card { flex-basis: calc((100% - 16px) / 2); } .vcarousel { padding-inline: 16px; } } /* QUESTIONS + aside (V2 .q-row) */ .q-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .q-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .q-row { display: flex; align-items: stretch; gap: 15px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 18px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .q-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .q-row .l1 { font: 700 15px/1.4 var(--font-body); color: var(--c-ink); } .q-row .l1 b { font-weight: 700; } a.q-row:hover { border-color: #C9DCE8; box-shadow: 0 6px 18px rgba(20,52,78,.08); } a.q-row:hover .l1 { color: var(--c-brand); } .ans { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--r-pill); font: 700 12.5px var(--font-body); border: 1px solid transparent; } .ans--zero { background: #FFF3EF; border-color: #F8CDBF; color: var(--c-accent-strong); } .ans--ok { background: var(--c-success-bg); border-color: var(--c-success-bd); color: var(--c-teal-d); } /* Rich question card - the mobile design promoted to desktop too (owner 2026-07-22). */ .q-row__ava, .q-row__chip, .q-row__ans, .q-row .l2 { display: none; } .q-row__ansbadge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 58px; height: 58px; flex: none; align-self: flex-start; border-radius: 13px; background: #FFF3EF; border: 1px solid #F8CDBF; color: var(--c-accent-strong); } .q-row__ansbadge b { font: 700 20px var(--font-display); line-height: 1; } .q-row__ansbadge i { font: 600 9px var(--font-body); font-style: normal; } .q-row__ansbadge.is-ok { background: var(--c-success-bg); border-color: var(--c-success-bd); color: var(--c-teal-d); } .q-row__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 13px/1.55 var(--font-body); color: var(--c-text); margin-top: 6px; } .q-row__tags { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; } .q-row__subj { padding: 4px 11px; border-radius: 999px; background: var(--c-tint-blue); color: #43617A; font: 500 11px var(--font-body); } .q-row__meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font: 500 11.5px var(--font-body); color: var(--c-muted); } .q-row__meta .uav { flex: none; } .side { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .cta-card { background: var(--c-primary); color: #fff; border-radius: var(--r-feature); padding: 28px; } .cta-card h3 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; } .cta-card p { color: #CFE2ED; font: 400 13.5px/1.6 var(--font-body); margin: 10px 0 0; } .cta-card .btn { margin-top: 18px; background: #fff; color: var(--c-link); border-color: transparent; font-weight: 700; box-shadow: none; } .cta-card .btn:hover { background: var(--c-tint-blue); color: var(--c-link); } .review-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 26px; } .review-card__head { display: flex; align-items: center; gap: 10px; } .review-card__head .ic { width: 34px; height: 34px; border-radius: 10px; background: #FBF1DC; color: var(--c-amber); display: grid; place-items: center; } .review-card__head .t { font: 700 14px var(--font-body); color: var(--c-ink); } .review-card blockquote { margin: 14px 0 0; font: italic 400 13.5px/1.65 var(--font-body); color: var(--c-text); } .review-card .who { display: flex; align-items: center; gap: 9px; margin-top: 14px; } .review-card .who .nm { font: 600 12.5px var(--font-body); color: var(--c-ink); } .review-card .who .nm span { color: var(--c-muted); font-weight: 400; } .review-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-divider); } .review-card__all { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--font-body); color: var(--c-link); } .review-card__all:hover { gap: 8px; color: var(--c-primary); } .review-card__leave { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #FBF1DC; color: #8A5512; font: 700 12.5px var(--font-body); border: 1px solid #EBD9AE; transition: background .14s ease, border-color .14s ease, color .14s ease; } .review-card__leave:hover { border-color: #8A5512; background: #F5E6BF; } /* TEXTBOOK banner */ .tbanner { display: flex; align-items: center; gap: 28px; max-width: var(--container); margin-inline: auto; padding: 30px 36px; background: linear-gradient(120deg, var(--c-teal), var(--c-teal-d)); color: #fff; border-radius: var(--r-banner); } .tbanner__ic { width: 52px; height: 52px; border-radius: var(--r-card); background: rgba(255,255,255,.15); display: grid; place-items: center; color: #fff; flex: none; } .tbanner__tx { flex: 1; min-width: 0; } .tbanner__tx h3 { font-size: 18px; font-weight: 700; color: #fff; } .tbanner__tx p { font: 400 14px var(--font-body); color: #D3EEEA; margin: 5px 0 0; } .tbanner .btn { flex: none; background: #fff; color: var(--c-teal-d); border-color: transparent; font-weight: 700; box-shadow: none; } /* MATERIALS card (V2 .mat-card) */ .mat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } a.mat-card:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20,52,78,.1); transform: translateY(-2px); } a.mat-card:hover h3 { color: var(--c-brand); } .mat-card h3 { transition: color .15s ease; } .mat-card__top { display: flex; gap: 14px; padding-bottom: 16px; } .mat-card .file { width: 52px; height: 66px; } .mat-card .file .badge { position: absolute; bottom: 6px; left: 8px; padding: 1px 6px; border-radius: 4px; color: #fff; font: 700 8.5px var(--font-body); } .mat-card .file .badge.badge-pdf { background: #C4563B; } .mat-card .file .badge.badge-doc, .mat-card .file .badge.badge-ppt, .mat-card .file .badge.badge-xls, .mat-card .file .badge.badge-arch { background: #2B6CB0; } .mat-card__top h3 { font: 600 14px/1.4 var(--font-body); color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; overflow-wrap: anywhere; } .mat-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mat-card__foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-divider); font: 500 12px var(--font-body); color: var(--c-muted); } .mat-card__foot .r { color: var(--c-link); font-weight: 600; } /* responsive collapse */ @media (max-width: 1100px) { .q-layout { grid-template-columns: minmax(0, 1fr); } .side { flex-direction: row; } .side > * { flex: 1; } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 44px; } .hero__cards { display: none; } section.stats { grid-template-columns: repeat(2, 1fr); } .stat--live { grid-column: 1 / -1; } } @media (max-width: 680px) { .side { flex-direction: column; } .tbanner { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .q-row { align-items: stretch; gap: 13px; padding: 14px; } .q-row__ava, .q-row__chip, .q-row__ans, .q-row .l2 { display: none; } .q-row__ansbadge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 54px; height: 54px; flex: none; align-self: flex-start; border-radius: 13px; background: #FFF3EF; border: 1px solid #F8CDBF; color: var(--c-accent-strong); } .q-row__ansbadge b { font: 700 18px var(--font-display); line-height: 1; } .q-row__ansbadge i { font: 600 8.5px var(--font-body); font-style: normal; } .q-row__ansbadge.is-ok { background: var(--c-success-bg); border-color: var(--c-success-bd); color: var(--c-teal-d); } .q-row .txt { display: flex; flex-direction: column; } .q-row .l1 { font: 700 13.5px/1.35 var(--font-body); } .q-row__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 12px/1.5 var(--font-body); color: var(--c-text); margin-top: 5px; } .q-row__tags { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; } .q-row__subj { padding: 4px 10px; border-radius: 999px; background: var(--c-tint-blue); color: #43617A; font: 500 10.5px var(--font-body); } .q-row__meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 11px var(--font-body); color: var(--c-muted); } .q-row__meta .uav { flex: none; } } /* ==================== /НАЧАЛО ==================== */ /* ==================== НОВИНИ (news / media channel) ==================== */ .page-hero--news { background: var(--grad-hero); } .nhero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 18px; } .nhero__lead h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; } .nhero__lead .sub { color: #B9D2E2; margin-top: 8px; max-width: 560px; } .nhero__cta { margin-top: 15px; } .nfilter { display: flex; align-items: center; gap: 8px; } .nfilter__lbl { font: 600 13px var(--font-body); color: #B9D2E2; white-space: nowrap; } .nfilter .uidrop { width: 280px; } .nfilter .uidrop .uidrop__btn { background: #fff; } .home-newsg { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 680px) { .home-newsg { grid-template-columns: minmax(0, 1fr); } } .news-body { padding-block: 40px 60px; } /* Featured article (7/5 horizontal, page 1 only) */ .nfeat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); overflow: hidden; text-decoration: none; box-shadow: var(--sh-card); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); margin-bottom: 26px; } .nfeat:hover { box-shadow: 0 12px 30px rgba(20,52,78,.14); transform: translateY(-2px); } .nfeat__cover { position: relative; min-height: 300px; background: var(--c-tint-blue); overflow: hidden; } .nfeat__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nfeat__cover--ph { display: grid; place-items: center; color: #9DBAD0; background: linear-gradient(135deg, var(--c-tint-blue), #D8E4EC); } .nfeat__body { padding: 32px 34px; display: flex; flex-direction: column; } .nfeat__eyebrow { display: flex; align-items: center; gap: 9px; font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .nfeat__title { font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.25; color: var(--c-ink); margin-top: 12px; } .nfeat__excerpt { color: var(--c-text); font: 400 14.5px/1.65 var(--font-body); margin-top: 12px; } .nfeat__meta { display: flex; gap: 16px; margin-top: 16px; font: 500 12.5px var(--font-body); color: var(--c-muted); } .nfeat__meta span { display: inline-flex; align-items: center; gap: 5px; } .nfeat__cta { align-self: flex-start; margin-top: 18px; } /* News list (vertical stack of horizontal cards) */ .nlist { display: flex; flex-direction: column; gap: 14px; } .ncard { display: grid; grid-template-columns: 232px 1fr; gap: 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; text-decoration: none; box-shadow: var(--sh-card); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .ncard:hover { box-shadow: 0 10px 26px rgba(20,52,78,.12); transform: translateY(-2px); } .ncard:hover .ncard__title { color: var(--c-brand); } .ncard__cover { position: relative; overflow: hidden; background: var(--c-tint-blue); min-height: 156px; } .ncard__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ncard__cover--ph { display: grid; place-items: center; color: #9DBAD0; background: linear-gradient(135deg, var(--c-tint-blue), #D8E4EC); } .ncard__body { padding: 16px 20px; display: flex; flex-direction: column; } .ncard__cat { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); font: 700 10.5px var(--font-body); letter-spacing: .03em; text-transform: uppercase; } .ncard__cat.is-nat { background: #FDECE4; color: #C0532F; } .ncard__cat.is-uni { background: var(--c-tint-blue); color: var(--c-primary); } .ncard__title { font: 700 16px/1.35 var(--font-body); color: var(--c-ink); margin-top: 9px; transition: color var(--dur) var(--ease-out); } .ncard__excerpt { font: 400 13.5px/1.6 var(--font-body); color: var(--c-muted); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ncard__meta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 12px; font: 500 12px var(--font-body); color: var(--c-muted); } .ncard__meta span { display: inline-flex; align-items: center; gap: 5px; } .ncard__more { margin-left: auto; color: var(--c-link); font-weight: 700; } .nempty { text-align: center; padding: 60px 20px; } .nempty__ic { width: 66px; height: 66px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c-tint-blue); color: var(--c-primary); margin-bottom: 14px; } .nempty p { color: var(--c-muted); font: 500 15px var(--font-body); margin-bottom: 16px; } /* Article page (lives inside the shared .detail-card / .detail-layout) */ .detail-card > .narticle__cover, .detail-card > .narticle__video { margin: 0; } .narticle__cover img { width: 100%; max-height: 440px; object-fit: cover; display: block; } .narticle__video video { width: 100%; max-height: 460px; display: block; background: #000; } .narticle__content { padding: 22px 30px 28px; } .narticle__by { color: var(--c-primary); font-weight: 600; } .narticle__body { font-size: 16.5px; line-height: 1.8; color: var(--c-text); } .narticle__body p { margin-bottom: 1.15rem; } .narticle__body h2 { font: 700 22px var(--font-body); color: var(--c-ink); margin: 1.8rem 0 .9rem; } .narticle__body h3 { font: 700 18.5px var(--font-body); color: var(--c-ink); margin: 1.5rem 0 .8rem; } .narticle__body ul, .narticle__body ol { padding-left: 1.5rem; margin-bottom: 1.15rem; } .narticle__body li { margin-bottom: .4rem; } .narticle__body blockquote { margin: 1.5rem 0; padding: 14px 20px; border-left: 4px solid var(--c-accent); background: #F6F9FB; border-radius: 0 8px 8px 0; font-style: italic; color: var(--c-ink); } .narticle__body a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; } .narticle__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.2rem 0; } .narticle__source { margin-top: 22px; font: 500 13px var(--font-body); color: var(--c-muted); display: flex; align-items: center; gap: 6px; } .narticle__source a { color: var(--c-link); word-break: break-all; } /* Share */ .nshare { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-divider); } .nshare__lbl { font: 600 13px var(--font-body); color: var(--c-muted); margin-right: 4px; } .nshare__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: #fff; color: var(--c-ink); font: 600 13px var(--font-body); cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .nshare__btn--fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; } .nshare__btn--copy:hover { background: var(--c-tint-blue); border-color: var(--c-primary); color: var(--c-primary); } /* Sidebar: related news list */ .sdnews { display: flex; flex-direction: column; gap: 12px; } .sdnews a { display: flex; gap: 11px; align-items: center; text-decoration: none; } .sdnews__cov { width: 58px; height: 46px; border-radius: 9px; overflow: hidden; flex: none; background: var(--c-tint-blue); position: relative; } .sdnews__cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sdnews__cov--ph { display: grid; place-items: center; color: #9DBAD0; } .sdnews__tx { min-width: 0; } .sdnews__tx .t { font: 600 13px/1.35 var(--font-body); color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur) var(--ease-out); } .sdnews a:hover .t { color: var(--c-brand); } .sdnews__tx .m { display: block; font: 500 11.5px var(--font-body); color: var(--c-muted); margin-top: 3px; } .sdnews__all { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font: 600 13px var(--font-body); color: var(--c-link); } /* Article grid with an in-flow horizontal banner between article and comments */ .detail-layout--news > .news-hb { grid-column: 1; grid-row: 2; margin-top: 16px; } .detail-layout--news > .comments-sec { grid-row: 3; } .detail-layout--news > .dside { grid-row: 1 / 4; } /* Без активен банер компонентът не рендерира нищо, значи третият ред не бива да се пази: страничната лента разпределя височината си през редовете, които обхваща, и празният ред израстваше на ~105px между статията и коментарите. */ .detail-layout--news:not(:has(> .news-hb)) > .comments-sec { grid-row: 2; } .detail-layout--news:not(:has(> .news-hb)) > .dside { grid-row: 1 / 3; } @media (max-width: 900px) { .detail-layout--news > .news-hb { grid-column: auto; grid-row: auto; margin-top: 0; } } @media (max-width: 820px) { .nfeat { grid-template-columns: 1fr; } .nfeat__cover { min-height: 200px; } .narticle__content { padding: 20px; } } @media (max-width: 560px) { .ncard { grid-template-columns: 1fr; } .ncard__cover { min-height: 170px; } .nfilter { width: 100%; } .nfilter .uidrop { flex: 1; width: auto; } } /* ==================== /НОВИНИ ==================== */ /* ==================== ИЗВЕСТИЯ (notifications) ==================== */ /* Glass hero button (on the navy hero band). */ .btn--glass { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.22); color: #fff; } .btn--glass:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); } /* Feed row (Известия). */ .nrow { display: flex; align-items: center; gap: 15px; padding: 15px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(20,52,78,.06); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .nrow:hover { border-color: #C9DCE8; box-shadow: 0 10px 24px rgba(20,52,78,.1); } .nrow--unread { border-color: #D8E6EF; box-shadow: 0 2px 8px rgba(20,52,78,.06), inset 3px 0 0 var(--c-accent); } .nrow--unread:hover { box-shadow: 0 10px 24px rgba(20,52,78,.1), inset 3px 0 0 var(--c-accent); } .nrow__dot { flex: none; width: 12px; height: 12px; border-radius: 999px; border: 0; padding: 0; background: var(--c-accent); cursor: pointer; transition: background .15s ease, transform .12s ease; } .nrow__dot:hover { transform: scale(1.25); } .nrow__dot.is-read { background: transparent; box-shadow: inset 0 0 0 1.5px #C9D9E4; } .nrow__dot.is-read:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent); } .nrow__av { flex: none; } .nrow__ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--c-tint-blue); color: var(--c-primary); } .nrow__ic--m4 { background: #FDEBE5; color: var(--c-accent-strong); } .nrow__ic--m5 { background: var(--c-tint-blue); color: var(--c-primary); } .nrow__ic--m6 { background: #E7F6F4; color: var(--c-teal-d); } .nrow__ic--m7, .nrow__ic--m8 { background: #FBF1DC; color: #9A6E14; } .nrow__body { flex: 1; min-width: 0; } .nrow__text { font: 500 14px/1.5 var(--font-body); color: var(--c-navy); } .nrow--unread .nrow__text { font-weight: 600; } .nrow__time { margin-top: 3px; font: 400 12px var(--font-body); color: var(--c-muted); } .nrow__btn { flex: none; padding: 9px 16px; border-radius: 10px; background: var(--c-tint-blue); color: var(--c-link); font: 600 12.5px var(--font-body); text-decoration: none; transition: background .15s ease, color .15s ease; } .nrow__btn:hover { background: var(--c-primary); color: #fff; } /* Question-notification card (Въпроси към Вас). */ .qnrow { display: flex; align-items: center; gap: 15px; padding: 16px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); margin-bottom: 12px; box-shadow: 0 2px 8px rgba(20,52,78,.06); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .qnrow:hover { border-color: #C9DCE8; box-shadow: 0 10px 24px rgba(20,52,78,.1); } .qnrow--unread { background: #F4FAFD; border-color: #CFE1EE; } .qnrow--unread:hover { border-color: #C9DCE8; box-shadow: 0 10px 24px rgba(20,52,78,.1); } .qnrow__body { flex: 1; min-width: 0; } .qnrow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .qnrow__name { font: 700 14.5px var(--font-body); color: var(--c-navy); } .qnrow--unread .qnrow__name { font-weight: 700; } .qnrow__meta { font: 400 12.5px var(--font-body); color: var(--c-muted); } .qnrow__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .qnrow__subj { padding: 4px 11px; border-radius: 999px; background: var(--c-tint-blue); color: #43617A; font: 500 11.5px var(--font-body); } .qnrow__count { flex: none; width: 60px; min-height: 52px; display: grid; place-items: center; align-content: center; border-radius: 12px; border: 1px solid; line-height: 1; } .qnrow__count b { font: 700 17px var(--font-display); } .qnrow__count small { font: 500 9.5px var(--font-body); margin-top: 2px; } .qnrow__count.is-zero { background: #FFF3EF; border-color: #F8CDBF; color: var(--c-accent-strong); } .qnrow__count.is-answered { background: #E7F6F4; border-color: #BEE5E0; color: var(--c-teal-d); } .qnrow__cta { flex: none; padding: 10px 20px; border-radius: 11px; font: 600 13px var(--font-body); text-decoration: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .qnrow__cta.is-solid { background: var(--c-primary); color: #fff; } .qnrow__cta.is-solid:hover { background: var(--c-primary-d); } .qnrow__cta.is-soft { background: var(--c-tint-blue); color: var(--c-link); } .qnrow__cta.is-soft:hover { background: var(--c-primary); color: #fff; } /* Sidebar: unread summary + help CTA. */ .notif-sum { display: flex; align-items: center; gap: 14px; } .notif-sum__n { font: 700 24px var(--font-display); color: var(--c-accent); line-height: 1; } .notif-sum p { margin: 0; font: 500 12.5px/1.5 var(--font-body); color: var(--c-muted); } .help-cta { position: relative; overflow: hidden; background: var(--c-primary); border-color: transparent; color: #fff; } .help-cta::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 999px; background: rgba(255,255,255,.08); top: -70px; right: -50px; } .help-cta__ic { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.14); color: #fff; margin-bottom: 12px; } .help-cta h4 { position: relative; margin: 0; font: 700 15px var(--font-display); color: #fff; } .help-cta p { position: relative; margin: 8px 0 0; font: 500 12.5px/1.6 var(--font-body); color: var(--c-navy-text); } .help-cta__lnk { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font: 600 12.5px var(--font-body); color: #fff; text-decoration: none; opacity: .92; } .help-cta__lnk:hover { opacity: 1; gap: 8px; } /* Empty state (both feeds). */ .notif-empty { text-align: center; padding: 48px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); color: var(--c-muted); } .notif-empty__ic { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 999px; background: var(--c-tint-blue); color: var(--c-primary); margin-bottom: 14px; } .notif-empty p { margin: 0; font: 500 15px var(--font-body); } @media (max-width: 640px) { .nrow, .qnrow { flex-wrap: wrap; } .nrow__btn, .qnrow__cta { margin-left: auto; } } /* ==================== /ИЗВЕСТИЯ ==================== */ /* ==================== СЪОБЩЕНИЯ (ЛС) ==================== */ .msg-app { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: stretch; padding-block: 26px 48px; } .msg-app > * { min-height: 720px; } /* Left column: section-identity card + list card, stacked */ .msg-side { display: flex; flex-direction: column; gap: 18px; } /* Section identity card (dark teal) */ /* Colours match the site's module illustration cards (.side-illus--q): accent->navy. */ .msg-ident { position: relative; overflow: hidden; border-radius: var(--r-feature); background: linear-gradient(135deg, #2C6188, var(--c-navy)); box-shadow: 0 12px 26px rgba(16,46,58,.20); padding: 24px 20px; text-align: center; color: #fff; } .msg-ident__ic { display: inline-grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 20px; background: #fff; color: #2C6188; box-shadow: 0 8px 18px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); } .msg-ident__kicker { font: 500 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); } .msg-ident__name { font: 700 20px var(--font-display); color: #fff; margin-top: 4px; } .msg-ident__desc { margin: 7px 0 0; font: 400 12.5px/1.55 var(--font-body); color: rgba(255,255,255,.72); } .msg-ident__stats { display: flex; gap: 10px; margin-top: 18px; } .msg-ident__stat { flex: 1; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 11px 8px; } .msg-ident__stat b { display: block; font: 700 20px var(--font-display); color: #fff; } .msg-ident__stat span { font: 600 11px var(--font-body); color: rgba(255,255,255,.6); } .msg-ident__stat--accent b { color: #F4A683; } /* Left: conversation / blocked list */ .msg-list { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: 0 2px 8px rgba(20,52,78,.06); overflow: hidden; } .msg-list__top { flex: none; padding: 14px 14px 12px; border-bottom: 1px solid var(--c-border); } /* Bounded like the thread's .msg-stream (68vh): the column has no fixed height, so without a cap a member with hundreds of conversations gets a list that just keeps growing down the page instead of scrolling in place. */ .msg-list__scroll { flex: 1; min-height: 0; max-height: 68vh; overflow: hidden auto; padding: 8px; } .msg-seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: #F1F6F9; border-radius: 11px; } .msg-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #6E869A; font: 600 12.5px var(--font-body); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .msg-seg__btn:hover { color: var(--c-navy); } .msg-seg__btn.is-active { background: var(--c-surface); color: var(--c-navy); box-shadow: 0 1px 3px rgba(20,52,78,.12); } .msg-seg__n { display: inline-grid; place-items: center; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: #DDE5EC; color: #5B7183; font: 800 10.5px var(--font-body); } .msg-seg__n--hot { background: var(--c-accent); color: #fff; } .msg-search { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1.5px solid var(--c-border); border-radius: 11px; background: #F8FBFC; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .msg-search svg { flex: none; color: #9AB0C0; } .msg-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 13px var(--font-body); color: var(--c-ink); } .msg-search input::placeholder { color: #9AB0C0; } .msg-search:focus-within { border-color: var(--c-primary); background: var(--c-surface); box-shadow: 0 0 0 3px rgba(55,127,169,.10); } .msg-blocklist { display: flex; flex-direction: column; gap: 2px; } .msg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .14s ease, box-shadow .14s ease; } a.msg-row:hover { background: #F5F8FA; } .msg-row--active { background: #EAF5F2; box-shadow: inset 0 0 0 1px #CBE6DF; } .msg-row--active .msg-row__name { color: var(--c-teal-d); } .msg-row__avwrap { position: relative; flex: none; line-height: 0; } .msg-row--blocked .msg-row__ava { filter: grayscale(.35); opacity: .9; } .msg-row--blocked .msg-row__name { color: #43617A; } .msg-row__ban-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-surface); display: grid; place-items: center; color: #C0392B; } .msg-row__ava { flex: none; } .msg-row__body { flex: 1; min-width: 0; } .msg-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .msg-row__name { font: 700 13.5px var(--font-body); color: var(--c-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-row__time { flex: none; font: 500 11px var(--font-body); color: var(--c-muted); } .msg-row__time.is-unread { color: var(--c-primary); } .msg-row__snip { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .msg-row__text { flex: 1; min-width: 0; font: 400 12.5px var(--font-body); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-row__text.is-unread { font-weight: 600; color: var(--c-navy); } .msg-row__badge { flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-teal-d); color: #fff; font: 700 10.5px var(--font-body); } .msg-row__ban { flex: none; color: var(--c-accent-strong); display: inline-flex; } .msg-row__act { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-link); font: 600 11.5px var(--font-body); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background .14s ease, color .14s ease; } .msg-row__act:hover { background: var(--c-primary); color: #fff; border-color: transparent; } .msg-empty-list { padding: 40px 20px; text-align: center; color: var(--c-muted); font: 500 13.5px var(--font-body); } /* Right: thread */ .msg-thread { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: 0 2px 8px rgba(20,52,78,.06); overflow: hidden; } /* Swapping the pane over AJAX: dim it while the new conversation is on the wire. */ .msg-thread.is-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; } .msg-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--c-surface); border-bottom: 1px solid #EEF2F6; } .msg-head__back { display: none; } .msg-head__who { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; } .msg-head__id { display: flex; flex-direction: column; min-width: 0; } .msg-head__id b { font: 700 15px var(--font-body); color: var(--c-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-head__id small { font: 500 12px var(--font-body); color: var(--c-teal-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .msg-head__who:hover .msg-head__id b { color: var(--c-primary); } .msg-head__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } /* Header actions on the white header: light bordered pills + navy text, filling their accent (teal / amber / red) only on hover. */ .msg-hact--profile { --bg: #fff; --fg: var(--c-navy); --bd: #E4EBF0; } .msg-hact--profile:hover { --bg: var(--c-teal); --fg: #fff; --bd: transparent; } .msg-hact--block { --bg: #fff; --fg: var(--c-navy); --bd: #E4EBF0; } .msg-hact--block:hover { --bg: var(--c-amber); --fg: #3D2408; --bd: transparent; } .msg-hact--del { --bg: #fff; --fg: var(--c-navy); --bd: #E4EBF0; } .msg-hact--del:hover { --bg: #CF5236; --fg: #fff; --bd: transparent; } /* Отблокирай (positive) = white pill, fills solid primary on hover. */ .msg-head__acts .btn--primary { --bg: #fff; --fg: var(--c-primary); --bd: #E4EBF0; } .msg-head__acts .btn--primary:hover { --bg: var(--c-primary); --fg: #fff; --bd: transparent; } .msg-stream { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; overflow-y: auto; background: #FBFDFE; max-height: 68vh; } /* Minimalist chat scrollbar: a thin, floating, rounded thumb; no track. Firefox uses scrollbar-width/color; Chromium/Edge use the ::-webkit-scrollbar pseudo. The 2px transparent border + background-clip makes the thumb read as a slim floating pill. */ .msg-list__scroll, .msg-stream, .emoji-grid { scrollbar-width: thin; scrollbar-color: rgba(20,52,78,.22) transparent; } .msg-list__scroll::-webkit-scrollbar, .msg-stream::-webkit-scrollbar, .emoji-grid::-webkit-scrollbar { width: 9px; height: 9px; } .msg-list__scroll::-webkit-scrollbar-track, .msg-stream::-webkit-scrollbar-track, .emoji-grid::-webkit-scrollbar-track { background: transparent; } .msg-list__scroll::-webkit-scrollbar-thumb, .msg-stream::-webkit-scrollbar-thumb, .emoji-grid::-webkit-scrollbar-thumb { background: rgba(20,52,78,.20); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .msg-list__scroll:hover::-webkit-scrollbar-thumb, .msg-stream:hover::-webkit-scrollbar-thumb, .emoji-grid:hover::-webkit-scrollbar-thumb { background: rgba(20,52,78,.34); background-clip: padding-box; } .msg-list__scroll::-webkit-scrollbar-thumb:hover, .msg-stream::-webkit-scrollbar-thumb:hover, .emoji-grid::-webkit-scrollbar-thumb:hover { background: rgba(20,52,78,.46); background-clip: padding-box; } .msg-list__scroll::-webkit-scrollbar-thumb:active, .msg-stream::-webkit-scrollbar-thumb:active, .emoji-grid::-webkit-scrollbar-thumb:active { background: var(--c-primary); background-clip: padding-box; } .msg-stream__start { margin: auto; color: var(--c-muted); font: 500 13px var(--font-body); } .bubble { display: flex; gap: 9px; max-width: 74%; } .bubble--recv { align-self: flex-start; } .bubble--sent { align-self: flex-end; flex-direction: column; align-items: flex-end; } .bubble__ava { flex: none; align-self: flex-end; } .bubble__col { min-width: 0; } .bubble__body { padding: 9px 13px; font: 400 13.5px/1.55 var(--font-body); word-wrap: break-word; overflow-wrap: anywhere; } .bubble--recv .bubble__body { background: #EEF3F8; border: 1px solid #E0E9F0; color: #24404F; border-radius: 16px 16px 16px 5px; } .bubble--sent .bubble__body { background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)); color: #fff; border-radius: 16px 16px 5px 16px; box-shadow: 0 4px 12px rgba(31,122,114,.20); } .bubble__img { margin-top: 6px; max-width: 240px; } .bubble__img:first-child { margin-top: 0; } .bubble__body:has(> .bubble__img:only-child) { padding: 4px; } .bubble__img .adg__main { position: relative; display: inline-block; } .bubble__img .adg__mainimg { display: block; max-width: 100%; width: auto; height: auto; max-height: 260px; border-radius: 10px; cursor: zoom-in; } .bubble__img .adg__zoom { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(20,52,78,.55); color: #fff; cursor: zoom-in; opacity: 0; transition: opacity .15s ease; } .bubble__img:hover .adg__zoom { opacity: 1; } .bubble__meta { margin-top: 4px; font: 400 10.5px var(--font-body); color: var(--c-muted); } .bubble--sent .bubble__meta { text-align: right; } /* Composer */ .composer { display: flex; align-items: center; gap: 8px; margin: 14px 18px 18px; padding: 6px 8px; background: #F5F8FA; border: 1.5px solid #E4EBF0; border-radius: 14px; } .composer__attach { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--c-muted); cursor: pointer; transition: background .14s ease, color .14s ease; } .composer__attach:hover { background: var(--c-tint-blue); color: var(--c-primary); } .composer__mid { flex: 1; min-width: 0; } .composer__input { display: block; width: 100%; border: 0; background: transparent; resize: none; font: 400 14px/1.5 var(--font-body); color: var(--c-navy); padding: 9px 4px; max-height: 120px; } .composer__input:focus { outline: none; } .composer__preview { position: relative; display: inline-block; margin: 4px 0 2px; } .composer__preview img { display: block; max-height: 90px; border-radius: 8px; } .composer__preview button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; background: var(--c-navy); color: #fff; font: 700 13px/1 var(--font-body); cursor: pointer; } .composer__err { color: #C0392B; font: 500 12px var(--font-body); padding: 2px 4px; } .composer__send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 11px; background: var(--c-accent); color: #fff; cursor: pointer; box-shadow: var(--sh-cta); transition: background .14s ease, transform .12s ease; } .composer__send:hover:not(:disabled) { background: var(--c-accent-strong); } .composer__send:active:not(:disabled) { transform: translateY(1px); } .composer__send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .composer--off { margin: 14px; padding: 16px; text-align: center; color: var(--c-muted); font: 500 13px var(--font-body); background: #F1F6F9; border-radius: 12px; } /* Emoji picker (harvested from SimpleTalk: static map, native font, no lib) */ .composer__emojiwrap { position: relative; flex: none; } .composer__emoji { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; border-radius: 10px; color: var(--c-muted); cursor: pointer; transition: background .14s ease, color .14s ease; } .composer__emoji:hover { background: var(--c-tint-blue); color: var(--c-amber); } .emoji-pop { position: absolute; bottom: calc(100% + 8px); left: 0; width: 300px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(20,52,78,.16); padding: 8px; z-index: 40; } .emoji-tabs { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--c-divider); margin-bottom: 6px; } .ep-tab { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 5px 0; font-size: 17px; line-height: 1; cursor: pointer; opacity: .55; transition: background .12s ease, opacity .12s ease; } .ep-tab:hover, .ep-tab.is-active { background: var(--c-tint-blue); opacity: 1; } .emoji-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 6px; max-height: 300px; overflow-x: hidden; overflow-y: auto; } .emoji-grid button { border: 0; background: transparent; border-radius: 8px; padding: 5px 0; font-size: 20px; line-height: 1; cursor: pointer; transition: background .1s ease, transform .1s ease; } .emoji-grid button:hover { background: var(--c-tint-blue); transform: scale(1.15); } /* Read-receipt ticks on own bubbles (grey = sent, light-blue = read) */ .msg-checks { display: inline-flex; vertical-align: middle; margin-left: 4px; opacity: .55; } .bubble--sent .msg-checks { color: #fff; } .bubble--sent .msg-checks.is-read { opacity: 1; color: #BFE3FF; } /* Date divider + consecutive-sender grouping */ .daydiv { display: flex; justify-content: center; margin: 12px 0 8px; } .daydiv span { font: 700 11.5px var(--font-body); color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-border); padding: 4px 13px; border-radius: 999px; } .bubble--grouped { margin-top: -6px; } .bubble--grouped.bubble--recv .bubble__ava { visibility: hidden; } /* Scroll-to-latest button */ .msg-scrollwrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } /* Scroll-to-latest - 1:1 SimpleTalk: small centered rounded-square, fade+scale in. */ .to-latest { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 20; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-primary); box-shadow: 0 2px 8px rgba(20,52,78,.12); display: grid; place-items: center; animation: to-latest-in .18s ease; } .to-latest:hover { background: var(--c-tint-blue); transform: translateX(-50%) scale(1.08); } @keyframes to-latest-in { from { opacity: 0; transform: translateX(-50%) scale(.8); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .bubble__meta, .msg-row__time { font-variant-numeric: tabular-nums; } /* Blocked panel + blank state */ .msg-blocked, .msg-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 40px 24px; } .msg-blocked__ic, .msg-blank__ic { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--c-tint-blue); color: var(--c-primary); margin-bottom: 10px; } .msg-blocked h3 { margin: 0; font: 700 18px var(--font-display); color: var(--c-navy); } .msg-blocked p, .msg-blank p { margin: 0; max-width: 380px; color: var(--c-muted); font: 500 13.5px/1.6 var(--font-body); } .msg-blocked form { margin-top: 12px; } @media (max-width: 860px) { .msg-app { grid-template-columns: minmax(0, 1fr); } .msg-app > * { min-height: 0; } .msg-app--open .msg-side { display: none; } .msg-app:not(.msg-app--open) .msg-thread { display: none; } /* One scroll region on a phone: the list rides the page scroll, not its own. */ .msg-list { max-height: none; } .msg-list__scroll { max-height: none; overflow: visible; } .msg-head__back { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--c-navy); } .msg-head__back:hover { background: var(--c-tint-blue); } .bubble { max-width: 86%; } .to-latest { width: 44px; height: 44px; } /* Open conversation = full-height mobile app-shell. Hiding the page hero lets the thread start at the top; the fixed-height flex column (msg-thread) then pins the header up top and the composer at the bottom, leaving exactly one scroll region - the message stream. --nav-h is 64px here (collapsed header). */ body:has(.msg-app--open) .page-hero { display: none; } .msg-app--open { padding-block: 12px; } /* Keep the thread as a rounded card with a little air top and bottom - it must not touch the sticky navbar or the screen edge. Height leaves room for the 12px+12px padding so the whole shell fits one screen with no page scroll. */ .msg-app--open .msg-thread { height: calc(100dvh - var(--nav-h) - 24px); } .msg-app--open .msg-stream { max-height: none; } .msg-app--open .composer, .msg-app--open .composer--off { margin-bottom: calc(14px + env(safe-area-inset-bottom)); } /* List view: drop the teal identity card entirely on phones so the conversation list is the first thing on screen (the segmented control right below already carries the conversation / unread counts). Desktop keeps the card. */ .msg-ident { display: none; } } /* Phone thread header: drop the action-pill labels so back + avatar + name + the three icon-only actions always fit; the name gets the freed space. The redundant header Unblock is dropped (the blocked panel carries the primary Unblock CTA). */ @media (max-width: 560px) { .msg-head { padding: 12px 14px; gap: 8px; } .msg-head__who { flex: 1 1 auto; } .msg-head__acts { gap: 4px; } .msg-hact__lb { display: none; } .msg-head__acts .msg-hact { width: 44px; height: 44px; padding: 0; justify-content: center; } .msg-head__acts .msg-hact--unblock { display: none; } } /* ==================== /СЪОБЩЕНИЯ ==================== */ /* ==================== СТАТИЧНИ СТРАНИЦИ + ЧЗВ ==================== */ /* Centered white "document" card that holds the static pages + the FAQ. */ .doc-wrap { max-width: 900px; margin-inline: auto; padding: 36px 20px 64px; } .doc-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-feature); box-shadow: 0 14px 36px rgba(20,52,78,.07); padding: 46px 54px; } @media (max-width: 640px) { .doc-wrap { padding: 24px 14px 48px; } .doc-card { padding: 26px 22px; } } /* Rich-HTML body for CMS pages (За нас, Реклама, Общи условия ...) + FAQ answers. */ .page-prose { max-width: none; font: 400 15.5px/1.75 var(--font-body); color: var(--c-text); overflow-wrap: anywhere; } .page-prose h2 { font: 700 24px/1.3 var(--font-display); color: var(--c-navy); margin: 30px 0 12px; } .page-prose h2:first-child, .page-prose > :first-child { margin-top: 0; } .page-prose h3 { font: 700 19px/1.35 var(--font-display); color: var(--c-navy); margin: 26px 0 10px; } .page-prose h4 { font: 700 16px var(--font-display); color: var(--c-navy); margin: 22px 0 8px; } .page-prose p { margin: 0 0 14px; } .page-prose a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; } .page-prose a:hover { color: var(--c-accent-strong); } .page-prose ul, .page-prose ol { margin: 0 0 16px; padding-left: 24px; } .page-prose li { margin: 6px 0; } .page-prose strong { color: var(--c-ink); } .page-prose img { max-width: 100%; height: auto; border-radius: 10px; } .page-prose blockquote { margin: 18px 0; padding: 14px 20px; background: var(--c-tint-blue); border-radius: 12px; color: #2A3F52; } .page-prose blockquote p:last-child { margin-bottom: 0; } .page-prose hr { border: 0; border-top: 1px solid var(--c-divider); margin: 24px 0; } .page-prose table { border-collapse: collapse; width: 100%; margin: 16px 0; display: block; overflow-x: auto; } .page-prose th, .page-prose td { border: 1px solid var(--c-border); padding: 8px 12px; text-align: left; } .page-prose h2, .page-prose h3, .page-prose h4 { overflow-wrap: anywhere; } /* "Наши партньори" logo strip: the stored markup crams the logos (100px, 2px border, no gaps) into a tinted quote box - normalise into a clean centered grid of cards. */ .page-prose blockquote:has(img.partners) { background: transparent; border: 0; padding: 0; margin: 12px 0 26px; } .page-prose blockquote:has(img.partners) > p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin: 0; } .page-prose blockquote:has(img.partners) span { display: contents; } .page-prose a:has(> img.partners) { display: inline-flex; gap: 14px; line-height: 0; } .page-prose img.partners { box-sizing: border-box; width: 104px !important; height: 104px !important; object-fit: contain; background: #fff; border: 1px solid var(--c-border) !important; border-radius: 16px; padding: 12px; margin: 0 !important; box-shadow: 0 3px 12px rgba(20,52,78,.06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .page-prose img.partners:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,52,78,.12); border-color: #C9DCE8 !important; } /* Standalone image in a centred paragraph (e.g. the GDPR badge) - actually centre it. */ .page-prose p[style*="text-align:center"] img:not(.partners) { display: block; margin-inline: auto; } /* FAQ accordion - native
, no JS dependency. */ .faq-acc { max-width: none; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .faq-item[open], .faq-item:hover { border-color: #C9DCE8; } .faq-item[open] { box-shadow: 0 6px 18px rgba(20,52,78,.07); } .faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; font: 700 15.5px/1.4 var(--font-body); color: var(--c-navy); user-select: none; transition: color .15s ease; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--c-primary); } .faq-q__ic { flex: none; display: inline-flex; color: var(--c-primary); transition: transform .2s ease; } .faq-item[open] .faq-q__ic { transform: rotate(180deg); } .faq-a { padding: 2px 20px 18px; animation: faq-reveal .22s ease; } .faq-a.page-prose { font-size: 14.5px; line-height: 1.7; max-width: none; } @keyframes faq-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ==================== /СТАТИЧНИ СТРАНИЦИ ==================== */ /* ============================================================================ GLOBAL RESPONSIVE FLOORS + SHARED PRIMITIVES Appended last on purpose: several components set font-size via the `font:` shorthand, so an earlier floor would lose the cascade. Placed here, these win by source order. Mobile-first: phone is the base, desktop opts back in. ============================================================================ */ /* ---- iOS focus-zoom floor: 16px on every focusable control. The main form fields revert to their denser 14.5px on desktop; small search inputs stay 16px (they were cramped at 13-15px anyway). ---- */ .input, .select, .textarea, .searchbar input, .hsearch input, .ql-search input, .uidrop__search input, .composer__input, .apick__search > input, .dir-search input, .msg-search input, .mat-discipline__field input { font-size: 16px; } @media (min-width: 768px) { .input, .select, .textarea { font-size: 14.5px; } } /* ---- Break long unbroken tokens in user-generated headings / rich text so they wrap instead of being silently clipped by overflow-x:clip. ---- */ .qa-q h1, .ql-title, .chero__tt h1, .chero__name, .ad-titlerow .t, .chip-tag, .vdesc, .cabout__rich, .about-rich { overflow-wrap: break-word; } .about-rich > *, .page-prose > * { max-width: 100%; } /* ---- Shared layout primitives ---------------------------------------------- */ /* One canonical content + right-sidebar grid. Collapses to a single column at 900, keeping DOM order so the sidebar stacks below the content on mobile. Replaces the dozen bespoke `minmax(0,1fr) var(--sidebar-w)` grids that each collapsed at a different width. */ .sidebar-stack { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 24px; align-items: start; } @media (max-width: 900px) { .sidebar-stack { grid-template-columns: minmax(0, 1fr); } } /* Fluid card grid - fills columns by available width, no per-count breakpoints. Override --auto-min per context (default 240px; dense tiles ~120px). */ .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--auto-min, 240px), 1fr)); gap: var(--auto-gap, 14px); } /* 44px touch floor for inline pills / chips / link-buttons. inline-flex because a plain ignores min-height. */ .tap { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Expands a small icon-only control to a 44x44 hit box via negative margin, without moving layout or resizing the glyph. */ .tap-icon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin: -8px; background: none; } /* Single horizontally-scrollable tab / chip strip on phones (replaces uneven wrap). */ @media (max-width: 640px) { .tab-scroller { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tab-scroller::-webkit-scrollbar { display: none; } } /* Shared phone stack: price + CTA drop to a full-width line under the title (indented past the 62px thumb + 18px gap), mirroring .member-row. */ @media (max-width: 560px) { .ad-row { flex-wrap: wrap; } .ad-price { order: 3; flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8px; margin-left: 80px; } } /* Touch baselines for two lone controls. */ .switch { padding-block: 10px; } .thanks-heart { min-height: 44px; padding-inline: 14px; display: inline-flex; align-items: center; } /* ---- Per-view clipping fixes (things overflow-x:clip would silently swallow) - */ /* Materials viewer: overlay the page arrows on the sheet edges so the reading column gets the full width; the conversion CTA meets the touch floor. */ @media (max-width: 560px) { .fviewer__stage { position: relative; } .fpage { width: 100%; } .fviewer__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; z-index: 2; } .fviewer__arrow:first-child { left: 4px; } .fviewer__arrow:last-child { right: 4px; } .fpage__pill { min-height: 44px; padding-block: 12px; } } @media (max-width: 640px) { .detail-card__head { padding: 20px; } } .dl-secondary .btn { min-height: 44px; overflow: hidden; text-overflow: ellipsis; } /* Science-areas rows: wrap so the second action button is never clipped off-screen. */ @media (max-width: 640px) { .area-row { flex-wrap: wrap; } .area-mid { flex: 1 1 calc(100% - 64px); } .area-right { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 10px; padding-left: 64px; } .area-acts .abtn { min-height: 40px; } } /* Lesson rows: let the ellipsized title wrap to full width on small phones. */ @media (max-width: 480px) { .csec__row { flex-wrap: wrap; row-gap: 6px; } .csec__lt { flex: 1 1 100%; white-space: normal; overflow: visible; order: 1; } .csec__thumb { order: 0; } .role-pill { order: 2; } .csec__row > .pill { order: 3; margin-left: auto; } } /* Messenger: on phones anchor the emoji popover to the whole composer (not to the left-side emoji button, which shoved it off the left edge), so every column is on-screen; composer icons meet 44px on touch. */ @media (max-width: 560px) { .composer { position: relative; } .composer__emojiwrap { position: static; } .emoji-pop { left: 8px; right: 8px; width: auto; bottom: calc(100% + 8px); } } @media (max-width: 900px) { .composer__attach, .composer__emoji, .composer__send { width: 44px; height: 44px; } } @media (max-width: 400px) { .composer { margin-left: 10px; margin-right: 10px; gap: 6px; padding: 6px; } } /* Ad detail owner row wraps so the Delete control can never be clipped. */ .ad-detail__owner { flex-wrap: wrap; } /* ---- Mobile touch floor on pills / chips / tab links / small buttons. Scoped to phones+tablets so desktop keeps its intentional density. ---- */ @media (max-width: 768px) { .abtn, .dchip, .fchip, .qtab, .seeall a, .dir-go, .vgate__login, .vgate__reg, .kfollow, .nrow__btn, .qnrow__cta, .nshare__btn, .auth-tab, .msg-seg__btn, .crev-form__close, .avatar-up__btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .chip-check, .member-row__msg, .side-cta a, .dir-back, .uweb__btn { min-height: 44px; } .aletter { width: 44px; height: 44px; } } /* ---- Tab / chip strips scroll horizontally on phones instead of wrapping into an uneven multi-row block. ---- */ @media (max-width: 640px) { .ptabs, .qtabs, .ctabs, .catbar__inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ptabs::-webkit-scrollbar, .qtabs::-webkit-scrollbar, .ctabs::-webkit-scrollbar, .catbar__inner::-webkit-scrollbar { display: none; } .ptabs > *, .qtabs > *, .ctabs > *, .catbar__inner > * { flex: none; } } /* Notifications: the 12px read-toggle and other icon-only controls get a 44px invisible hit area centered on the glyph, with no layout shift. */ @media (max-width: 900px) { .nrow__dot, .qa-ans__del, .imgdrop__x { position: relative; } .nrow__dot::before, .qa-ans__del::before, .imgdrop__x::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* Questions detail: tighter card padding on phones; action buttons meet 44; the answer/comment attach controls stay tappable; touch users always see the zoom cue. */ @media (max-width: 640px) { .qa-q, .qa-form, .qa-ans__row, .side-card, .ask-card { padding: 18px 16px; } .qa-q__bar { flex-wrap: wrap; } } .qa-tbtn, .qa-abtn, .ask-submit { min-height: 44px; padding-block: 12px; } @media (hover: none) { .adg__zoom { opacity: 1; } } /* Home stats + material cards + consent + video hero: small-phone polish. */ @media (max-width: 640px) { .stat { padding: 18px 12px; } .stat .n { font-size: 22px; } .vidh__stats { flex-wrap: wrap; row-gap: 10px; } } @media (max-width: 560px) { .cconsent__acts { flex-direction: column; } .cconsent__acts .btn { width: 100%; } } @media (max-width: 480px) { .mcard { flex-wrap: wrap; } .mcard .st { flex-basis: 100%; justify-content: flex-start; margin-top: 8px; } } .ccover--full .ccover__mark { font-size: clamp(28px, 22cqw, 46px); } /* Owner-only "awaiting moderation" notice (x-pending-banner) on question/material/ad detail pages. Amber tint + ring, no left stripe (house rule). */ .pending-note { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: var(--r-card); background: #FFF6E8; border: 1px solid #F1D8A4; color: #7A5316; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(122,83,22,.06); } .pending-note__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F6C560; color: #6B4A12; } .pending-note__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pending-note__tx b { font: 700 14px var(--font-body); color: #6B4A12; } .pending-note__tx span { font: 500 12.5px/1.45 var(--font-body); } /* Banner creatives scale to the column instead of overflowing on narrow screens. */ .ad__html img, .ad__html video { max-width: 100%; height: auto; } .ad__html iframe { max-width: 100%; } /* Materials filter rail: stack full-width on phones. As a row, the illustration card sat at its natural 307px (left-aligned, gap on the right) while the filter cards filled 335px - inconsistent. Column + stretch makes every child full-width. */ @media (max-width: 640px) { .frail { flex-direction: column; } .frail .fcard { flex: none; min-width: 0; } } /* ============================================================================ HERO BANDS - mobile tidy pass Every navy header band gets fluid titles, tight gaps, wrapping/full-width actions and clean scrolling tabs on phones. Spacing is applied on each hero's OWN internal wrapper (.chero__id / .ahero-id / .vidh__top), never on .page-hero, to respect the layered top-offset architecture (crumbs--hero owns the top offset for every band). ============================================================================ */ /* Hero tab strip: one horizontal scroll row, no visible scrollbar (all sizes). */ .ctabs--hero { scrollbar-width: none; } .ctabs--hero::-webkit-scrollbar { display: none; } @media (max-width: 640px) { /* Fluid, calmer titles so a hero never dominates a small screen. */ .page-hero h1, .chero__tt h1, .chero__name, .ahero-tt h1 { font-size: clamp(21px, 5.5vw, 26px); line-height: 1.2; } .page-hero .sub, .vidh__lead .sub, .bookh .sub, .nhero__lead .sub { font-size: 13.5px; } .crumbs--hero { padding-block: 16px 12px; margin-bottom: 16px; } /* Channel / material-detail hero. */ .chero__id { gap: 14px; padding-bottom: 18px; } .chero__acts { width: 100%; flex-direction: row; flex-wrap: wrap; } .chero__acts > * { flex: 1 1 auto; justify-content: center; } /* Area / uni hub hero. */ .ahero-id { gap: 14px; padding-bottom: 18px; } .ahero-ic { width: 58px; height: 58px; } .ahero-tt { min-width: 0; } .ahero-acts { width: 100%; } .ahero-acts .primary, .ahero-acts .ghost { flex: 1 1 auto; justify-content: center; padding-inline: 14px; } /* Channel hero: a 190px cover squishes the title into a ~130px column. Shrink the cover and drop the title/stats onto their own full-width row below it. */ .ahero-id:has(.chan-cover) { flex-wrap: wrap; } .chan-cover { width: 128px; height: 128px; } .ahero-id:has(.chan-cover) .ahero-tt { flex-basis: 100%; } /* Area / uni index split (title + search). */ .hero-split { gap: 16px; } /* Video hero: stats wrap as a clean row, drop the orphaned vertical dividers. */ .vidh__top { gap: 18px; padding-bottom: 22px; } .vidh__stats { gap: 14px 22px; } .vidh__div { display: none; } /* Book (uchebnici) hero. */ .bookh { gap: 14px; } .bookh__cta { width: 100%; text-align: center; } /* News hero. */ .nhero__top { gap: 14px; margin-top: 12px; } .nhero__cta { width: 100%; } .nhero__cta .btn, .nhero__cta > a { width: 100%; justify-content: center; } /* Hero tabs: single scroll row on phones. */ .ctabs--hero { flex-wrap: nowrap; gap: 20px; margin-top: 12px; } } /* Profile cover header: a clean centered column on phones instead of a cramped, flex-end wrapped row. */ @media (max-width: 560px) { .mprofile-id { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .mp-avatar__tile { width: 96px; height: 96px; } .mp-id { min-width: 0; width: 100%; } .mp-name { justify-content: center; } .mp-acts { width: 100%; justify-content: center; padding-bottom: 0; } /* Primary action fills the row (was a lone auto-width button floating centered); the kebab stays a fixed square beside it. */ .mp-acts .msg { flex: 1; justify-content: center; } /* Stat tiles: center the number + label to sit tidily under the centered hero, and calm the heavy side padding on a phone. */ .mp-stat { text-align: center; padding: 14px 12px; } } /* ============================================================ Имперсонализация - staff "view as member" bar (read-only mode) Sits above the sticky header and scrolls away with the page; the colour is deliberately alarming so this screen is never mistaken for the member's own session. ============================================================ */ .imp-bar { background: #8c2f1c; color: #fff; } .imp-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 9px; flex-wrap: wrap; } .imp-bar__txt { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; } .imp-bar__txt svg { flex: none; } .imp-bar__form { margin: 0; } .imp-bar__btn { min-height: 34px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 700 13px/1 inherit; font-family: inherit; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .imp-bar__btn:hover { background: #fff; border-color: #fff; color: #8c2f1c; } @media (max-width: 620px) { .imp-bar__in { justify-content: center; text-align: center; } .imp-bar__btn { min-height: 44px; padding: 10px 18px; } } /* ============================================================ Страница "Поддръжка" (503) - shown while the site is closed ============================================================ */ .maint { display: grid; place-items: center; min-height: 100dvh; padding: 24px; background: var(--c-navy); } .maint__card { width: min(100%, 460px); padding: 34px 28px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28); } .maint__mark { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--c-navy); color: #fff; } /* Логото е с маска и взима currentColor - на навито квадратче значи бяло, както във футъра. */ .maint__logo { width: 34px; height: 34px; } .maint__title { margin: 16px 0 8px; font-size: clamp(22px, 5vw, 27px); } .maint__note { margin: 0; color: var(--c-muted); font-size: 15px; line-height: 1.6; } .maint__brand { margin: 22px 0 0; font-size: 13px; letter-spacing: .5px; color: var(--c-muted); } .auth-closed { margin: 0; padding: 18px 20px; border-radius: var(--r-input); background: var(--c-tint-blue); color: var(--c-text); font-size: 15px; line-height: 1.6; }