/* ============================================================ CarStore — тема поверх Bootstrap 5.3 (чорно-золото з og-cover) Брендуємо через CSS-змінні BS5, без білд-кроку. ============================================================ */ :root{ /* фірмові */ --cs-gold:#F5B301; --cs-gold-2:#FFD21E; --cs-gold-deep:#B27D00; --cs-gold-soft:#FFF6DE; --cs-cream:#F5F3EC; --cs-blue-soft:#EFF6FF; --cs-violet:#6C5DD3; --cs-violet-soft:#ECE9FA; --cs-orange-soft:#FDEAD3; --cs-orange-deep:#9C5400; --cs-fire:#E8590C; /* семантичні м'які пари (спільні для тегів новин і бейджів історії) */ --cs-green-soft:#EAF3DE; --cs-green-deep:#3B6D11; --cs-red-soft:#FCEBEB; --cs-red-deep:#A32D2D; --cs-amber-soft:#FAEEDA; --cs-amber-deep:#854F0B; --cs-ink:#0D0F12; --cs-ink-2:#16191F; --cs-ink-3:#1E2329; --cs-line-dark:#2A2F37; /* перевизначення Bootstrap */ --bs-primary:#F5B301; --bs-primary-rgb:245,179,1; --bs-link-color:#B27D00; --bs-link-color-rgb:178,125,0; --bs-link-hover-color:#8a6000; --bs-body-font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --bs-body-color:#1A1D23; --bs-border-radius:.6rem; --bs-border-radius-lg:1rem; } /* ============================================================ ТЕМНА ТЕМА (адмін-панель: users.php, users_dashboard.php, users_tickets.php, users_roadmap.php, sendmail.php). Вмикається атрибутом data-bs-theme="dark" на — публічний сайт цей атрибут не отримує, тому тему не зачіпає. Перевизначаємо самі "м'які пари" (--cs-*-soft/deep) — усі місця, що ними користуються (бейджі, теги, KPI-плитки, вибраний рядок таблиці), автоматично стають темними без окремих правок. ============================================================ */ :root[data-bs-theme="dark"]{ --cs-gold-soft:rgba(245,179,1,.16); --cs-gold-deep:var(--cs-gold); --cs-violet-soft:rgba(108,93,211,.22); --cs-violet:#A79AF0; --cs-green-soft:rgba(76,140,26,.28); --cs-green-deep:#8BC96F; --cs-red-soft:rgba(200,60,60,.28); --cs-red-deep:#F0908F; --cs-amber-soft:rgba(160,100,10,.3); --cs-amber-deep:#FFC670; --cs-blue-soft:rgba(37,99,170,.28); --cs-cream:var(--cs-ink-3); --bs-body-bg:var(--cs-ink-2); --bs-body-color:#E7E9EC; --bs-border-color:var(--cs-line-dark); --bs-secondary-color:#9AA1AC; --bs-secondary-bg:var(--cs-ink-3); --bs-tertiary-bg:var(--cs-ink-3); --bs-tertiary-color:#9AA1AC; --bs-heading-color:#F5F6F8; --bs-emphasis-color:#F5F6F8; --bs-link-color:var(--cs-gold); --bs-link-color-rgb:245,179,1; --bs-link-hover-color:var(--cs-gold-2); } :root[data-bs-theme="dark"] .card{ --bs-card-bg:var(--cs-ink-3); --bs-card-color:#E7E9EC; --bs-card-cap-bg:var(--cs-ink-3); box-shadow:0 .25rem .75rem rgba(0,0,0,.35)!important; } :root[data-bs-theme="dark"] .card-header.bg-white{ background-color:var(--cs-ink-3)!important; border-bottom-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .cs-phead{ background:var(--cs-ink-2); border-bottom-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .cs-sec p.cs-sub, :root[data-bs-theme="dark"] .text-secondary{ color:#9AA1AC!important; } :root[data-bs-theme="dark"] .table{ --bs-table-color:#E7E9EC; --bs-table-bg:transparent; --bs-table-striped-bg:rgba(255,255,255,.03); --bs-table-hover-bg:rgba(255,255,255,.05); --bs-table-border-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-select{ background-color:var(--cs-ink-3); border-color:var(--cs-line-dark); color:#E7E9EC; } :root[data-bs-theme="dark"] .form-control:focus, :root[data-bs-theme="dark"] .form-select:focus{ background-color:var(--cs-ink-3); color:#E7E9EC; } :root[data-bs-theme="dark"] .form-control::placeholder{ color:#6B7280; } :root[data-bs-theme="dark"] .cs-fill, :root[data-bs-theme="dark"] .cs-note{ background:var(--cs-ink-3); } :root[data-bs-theme="dark"] .cs-note-blue{ background:rgba(37,99,170,.18); } :root[data-bs-theme="dark"] .dropdown-menu{ --bs-dropdown-bg:var(--cs-ink-3); --bs-dropdown-border-color:var(--cs-line-dark); --bs-dropdown-link-color:#CBD1D9; --bs-dropdown-link-hover-bg:rgba(245,179,1,.10); --bs-dropdown-link-hover-color:var(--cs-gold); --bs-dropdown-divider-bg:var(--cs-line-dark); --bs-dropdown-header-color:#9AA1AC; } :root[data-bs-theme="dark"] .modal-content{ --bs-modal-bg:var(--cs-ink-3); --bs-modal-color:#E7E9EC; --bs-modal-header-border-color:var(--cs-line-dark); --bs-modal-footer-border-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .cs-row-selected .fw-semibold{ color:#F5F6F8!important; } :root[data-bs-theme="dark"] .badge.text-bg-light{ --bs-bg-opacity:1; background-color:var(--cs-ink-3)!important; color:#CBD1D9!important; border-color:var(--cs-line-dark)!important; } :root[data-bs-theme="dark"] code{ background:var(--cs-ink-3); color:#E7E9EC; border-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .cs-hw-row:hover td{ background:rgba(245,179,1,.08); } :root[data-bs-theme="dark"] .cs-hw-row.table-active td{ background:rgba(245,179,1,.12); } :root[data-bs-theme="dark"] .cs-hw-row td{ color:#E7E9EC; } :root[data-bs-theme="dark"] .table-light{ --bs-table-bg:var(--cs-ink-3); --bs-table-color:#CBD1D9; --bs-table-border-color:var(--cs-line-dark); } :root[data-bs-theme="dark"] .bg-light{ background-color:var(--cs-ink-3)!important; } :root[data-bs-theme="dark"] .badge.bg-light.text-dark{ color:#CBD1D9!important; } :root[data-bs-theme="dark"] .form-label, :root[data-bs-theme="dark"] .form-check-label{ color:#9AA1AC; } :root[data-bs-theme="dark"] .nav-pills .nav-link{ color:#CBD1D9; } :root[data-bs-theme="dark"] .nav-pills .nav-link:hover{ background:rgba(167,154,240,.16); color:var(--cs-violet); } /* Бульбашки листування тікетів (users_tickets.php) */ .cs-chat-them{ background:var(--cs-ink-3); color:#E7E9EC; border:1px solid var(--cs-line-dark); } .cs-chat-me{ background:var(--cs-gold); color:#1a1500; font-weight:500; } /* ---- Ширший контейнер (замість стокового BS5 xxl=1320px) ---- */ .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{ max-width:1600px; } h1,h2,h3,h4,h5,.cs-display{ font-family:'Manrope',var(--bs-body-font-family); font-weight:800; letter-spacing:-.3px; } /* ---- Кнопки: золото з темним текстом ---- */ .btn-primary{ --bs-btn-color:#1a1500; --bs-btn-bg:var(--cs-gold); --bs-btn-border-color:var(--cs-gold); --bs-btn-hover-color:#1a1500; --bs-btn-hover-bg:var(--cs-gold-2); --bs-btn-hover-border-color:var(--cs-gold-2); --bs-btn-active-color:#1a1500; --bs-btn-active-bg:var(--cs-gold-2); --bs-btn-active-border-color:var(--cs-gold-2); --bs-btn-focus-shadow-rgb:245,179,1; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#ADB5BD; --bs-btn-disabled-border-color:#ADB5BD; font-weight:600; } .btn-outline-primary{ --bs-btn-color:var(--cs-gold-deep); --bs-btn-border-color:var(--cs-gold); --bs-btn-hover-color:#1a1500; --bs-btn-hover-bg:var(--cs-gold); --bs-btn-hover-border-color:var(--cs-gold); --bs-btn-active-bg:var(--cs-gold); --bs-btn-disabled-color:#ADB5BD; --bs-btn-disabled-border-color:#ADB5BD; font-weight:600; } .btn-warning{ --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#ADB5BD; --bs-btn-disabled-border-color:#ADB5BD; } /* ghost-кнопка для темних секцій */ .btn-cs-ghost{ --bs-btn-color:#F5F6F8; --bs-btn-border-color:var(--cs-line-dark); --bs-btn-bg:transparent; --bs-btn-hover-color:var(--cs-gold); --bs-btn-hover-border-color:var(--cs-gold); --bs-btn-hover-bg:rgba(245,179,1,.06); --bs-btn-active-color:var(--cs-gold); --bs-btn-active-border-color:var(--cs-gold); --bs-btn-active-bg:rgba(245,179,1,.10); font-weight:600; } /* extra-small button */ .btn-xs{ padding:.1rem .45rem; font-size:.72rem; border-radius:.3rem; line-height:1.4; } .text-gold{ color:var(--cs-gold)!important; } .text-gold-deep{ color:var(--cs-gold-deep)!important; } .bg-ink{ background-color:var(--cs-ink)!important; } /* Інлайн-код як акуратний «чип» (замість стокового рожевого) */ code{ background:#F1EFE8; color:#1A1D23; padding:.1em .42em; border-radius:.35rem; font-size:.86em; border:1px solid #E6E3D9; } /* ============ NAVBAR ============ */ .cs-nav{ background:rgba(13,15,18,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--cs-line-dark); } .cs-nav .navbar-brand{ font-family:'Manrope'; font-weight:800; font-size:1.35rem; color:#F5F6F8; display:flex; align-items:center; gap:.6rem; } .cs-nav .navbar-brand img{ height:34px; } .cs-nav .navbar-brand b{ color:var(--cs-gold); } .cs-nav .nav-link{ color:#AEB4BD; font-weight:500; font-size:.95rem; border-radius:.5rem; padding:.5rem .8rem!important; transition:.15s; } .cs-nav .nav-link:hover,.cs-nav .nav-link:focus,.cs-nav .nav-link.active{ color:var(--cs-gold); background:rgba(245,179,1,.07); } .cs-nav .dropdown-menu{ --bs-dropdown-bg:#14171D; --bs-dropdown-border-color:var(--cs-line-dark); --bs-dropdown-link-color:#CBD1D9; --bs-dropdown-link-hover-bg:rgba(245,179,1,.12); --bs-dropdown-link-hover-color:var(--cs-gold-2); --bs-dropdown-border-radius:.75rem; padding:.4rem; } .cs-nav .dropdown-item{ border-radius:.5rem; display:flex; align-items:center; gap:.6rem; font-size:.9rem; } .cs-nav .dropdown-item i{ font-size:1rem; } /* ============ HERO (графіт-мінімал + золоте сяйво) ============ */ .cs-hero{ position:relative; background:var(--cs-ink); color:#F5F6F8; overflow:hidden; } .cs-hero:before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(1000px 560px at 84% -12%, rgba(245,179,1,.13), transparent 60%),linear-gradient(180deg,#0B0D10,#14171D); } .cs-hero>.container{ position:relative; } .cs-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--cs-gold); background:rgba(245,179,1,.10); border:1px solid rgba(245,179,1,.28); padding:.45rem .85rem; border-radius:999px; } .cs-hero h1{ font-size:clamp(2rem,4vw,2.85rem); line-height:1.09; } .cs-hero h1 .hl{ color:var(--cs-gold); } .cs-hero .lead{ color:#B7BDC6; font-size:1.02rem; line-height:1.75; } .cs-rel{ color:#8C939D; font-size:.88rem; } .cs-rel .ver{ background:var(--cs-gold); color:#1a1500; font-weight:700; border-radius:.4rem; padding:.1rem .55rem; } .cs-stat .n{ font-family:'Manrope'; font-weight:800; font-size:1.85rem; color:var(--cs-gold-2); line-height:1; } .cs-stat .l{ font-size:.82rem; color:#8C939D; } .cs-shot{ border-radius:.75rem; overflow:hidden; border:1px solid var(--cs-line-dark); box-shadow:0 30px 70px -25px rgba(0,0,0,.85),0 0 0 1px rgba(245,179,1,.14); } .cs-shot img{ display:block; width:100%; } /* ============ SECTION HEAD ============ */ .cs-sec-kick{ color:var(--cs-gold-deep); font-weight:700; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; } .cs-sec h2{ font-size:clamp(1.6rem,3vw,2.05rem); } .cs-sec p.cs-sub{ color:#6B7280; font-size:1rem; } /* ============ MODULE CARDS ============ */ .cs-mod{ display:flex; flex-wrap:wrap; align-items:center; min-height:100%; background:#fff; border:1px solid #ECEEF1; border-radius:1rem; padding:1.5rem; transition:.18s; color:inherit; text-decoration:none; } .cs-mod:hover{ transform:translateY(-4px); border-color:var(--cs-gold); box-shadow:0 18px 40px -22px rgba(245,179,1,.6); color:inherit; } .cs-mod .ic{ width:46px; height:46px; border-radius:.7rem; display:flex; align-items:center; justify-content:center; background:var(--cs-gold-soft); color:var(--cs-gold-deep); font-size:1.35rem; margin-right:.85rem; transition:.18s; flex:0 0 auto; } .cs-mod:hover .ic{ background:var(--cs-gold); color:#1a1500; } .cs-mod h4{ font-size:1.1rem; font-weight:700; margin:0; } .cs-mod .more{ flex:0 0 100%; margin:.85rem 0 0; } .cs-mod .more p{ font-size:.9rem; line-height:1.65; color:#6B7280; margin:0 0 .6rem; } .cs-mod .more p:last-child{ margin-bottom:0; } /* ============ DATA BAND (темна) ============ */ .cs-band{ background:var(--cs-ink); color:#F5F6F8; } .cs-band h3 i{ color:var(--cs-gold); } .cs-band .lead{ color:#B7BDC6; line-height:1.75; } .cs-feat{ color:#D5DAE1; font-size:.95rem; } .cs-feat i{ color:var(--cs-gold); } .cs-card-opt{ background:var(--cs-ink-3); border:1px solid var(--cs-line-dark); border-left:3px solid var(--cs-gold); border-radius:.8rem; } .cs-card-opt h6{ font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--cs-gold); font-weight:700; } .cs-card-opt .o{ color:#D5DAE1; font-size:.95rem; } .cs-card-opt .o i{ color:var(--cs-gold); font-size:1.1rem; } /* ============ PAGE HEADER (внутрішні сторінки, мінімал) ============ */ .cs-phead{ background:#FAFAF8; border-bottom:1px solid #ECEAE2; } .cs-phead .breadcrumb{ --bs-breadcrumb-divider:'\203A'; --bs-breadcrumb-divider-color:#B4B2A9; font-size:.85rem; margin-bottom:.5rem; } .cs-phead .breadcrumb-item a{ color:var(--cs-gold-deep); text-decoration:none; } .cs-phead .breadcrumb-item a:hover{ text-decoration:underline; } .cs-phead .breadcrumb-item.active{ color:#8A8880; } .cs-phead h1{ font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:.5rem; } .cs-phead h1 i{ font-size:1.05em; vertical-align:-.15em; } .cs-phead .cs-sub{ color:#6B7280; font-size:1rem; } /* Іконки в заголовках карток/розділів — трохи більші за текст, як і в cs-phead h1 */ .cs-sec h4 i, .cs-sec h5 i, .cs-sec h6 i{ font-size:1.05em; vertical-align:-.15em; } /* ============ STEPS / LISTS (внутрішні сторінки) ============ */ .cs-num{ width:34px; height:34px; border-radius:50%; background:var(--cs-gold); color:#1a1500; font-weight:700; font-family:'Manrope'; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .cs-num-sm{ width:28px; height:28px; font-size:.85rem; } .cs-list{ list-style:none; padding-left:0; margin:0; } .cs-list li{ position:relative; padding-left:1.35rem; margin-bottom:.45rem; } .cs-list li:last-child{ margin-bottom:0; } .cs-list li:before{ content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--cs-gold); } .cs-soft{ background:var(--cs-gold-soft); border-radius:.6rem; } .cs-help{ background:var(--cs-ink); } /* Honeypot: поле-пастка для ботів, невидиме для людини і скрінрідерів */ .cs-hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; } .text-cs-fire{ color:var(--cs-fire) !important; } /* ============ FORM CONTROLS / NAV (золото замість стокового синього) ============ */ .form-check-input:checked{ background-color:var(--cs-gold); border-color:var(--cs-gold-deep); } .form-check-input:focus{ border-color:var(--cs-gold); box-shadow:0 0 0 .25rem rgba(245,179,1,.25); } .nav-pills{ --bs-nav-pills-link-active-bg:var(--cs-violet); --bs-nav-pills-link-active-color:#fff; } .nav-pills .nav-link{ color:var(--cs-ink); font-weight:500; } .nav-pills .nav-link:hover{ background:var(--cs-violet-soft); color:var(--cs-violet); } .nav-pills .nav-link.active:hover{ color:#fff; } /* ============ FILL / NOTE BOXES (нейтральні плашки та інфо-блоки) ============ */ .cs-fill{ background:var(--cs-cream); } .cs-note{ background:var(--cs-cream); border-left:3px solid var(--cs-gold-deep); } .cs-note-blue{ background:var(--cs-blue-soft); } .cs-note-orange{ background:var(--cs-orange-soft); } .cs-badge-violet{ background:var(--cs-violet-soft); color:var(--cs-violet); } .cs-badge-gold{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); } /* ============ УТИЛІТИ (винесені повторювані інлайн-стилі) ============ */ .cs-round{ border-radius:1rem; } .cs-round-sm{ border-radius:.75rem; } .cs-card-gold{ border-radius:.8rem; border-left:4px solid var(--cs-gold)!important; } .cs-badge-muted{ color:#6c757d!important; } .cs-text-dim{ color:#B7BDC6; } .cs-ls{ letter-spacing:.5px; } .cs-fs-3{ font-size:3rem; } /* клікабельний скріншот → сторінка скріншотів */ .cs-shot-link{ display:block; cursor:zoom-in; overflow:hidden; border-radius:.5rem; } .cs-shot-link img{ transition:transform .25s ease; } .cs-shot-link:hover img{ transform:scale(1.03); } /* ============ NEWS TIMELINE ============ */ .cs-tl{ position:relative; margin-left:.4rem; padding-left:1.8rem; border-left:2px solid #ECEAE2; } .cs-tl-year{ position:relative; font-family:'Manrope'; font-weight:800; font-size:1.4rem; color:var(--cs-ink); margin:2rem 0 1rem; } .cs-tl-year:first-child{ margin-top:0; } .cs-tl-year:before{ content:''; position:absolute; left:calc(-1.8rem - 7px); top:.3em; width:14px; height:14px; border-radius:50%; background:var(--cs-gold); box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(245,179,1,.35); } .cs-news-card{ display:block; color:inherit; text-decoration:none; background:#fff; border:1px solid #ECEEF1; border-radius:.8rem; padding:1.05rem 1.25rem; margin-bottom:.85rem; transition:.15s; } .cs-news-card:hover{ border-color:var(--cs-gold); box-shadow:0 10px 26px -18px rgba(245,179,1,.5); } .cs-news-card h5{ font-size:1.05rem; font-weight:700; margin:.1rem 0 .35rem; } .cs-news-card p{ margin:0; color:#6B7280; font-size:.92rem; line-height:1.6; } .cs-news-card ul{ margin:.5rem 0 0; } .cs-news-meta{ display:flex; align-items:center; gap:.6rem; } .cs-news-date{ color:#9AA1AB; font-size:.82rem; } .cs-news-note{ display:flex; gap:.6rem; margin-top:.75rem; padding:.7rem .9rem; border-radius:.6rem; background:var(--cs-amber-soft); color:var(--cs-amber-deep); font-size:.9rem; line-height:1.55; } .cs-news-note i{ margin-top:.2rem; } .cs-tag{ display:inline-block; background:var(--cs-gold-soft); color:var(--cs-gold-deep); font-size:.74rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; } .cs-tag-0{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); } .cs-tag-1{ background:var(--cs-violet-soft); color:var(--cs-violet); } .cs-tag-2{ background:var(--cs-blue-soft); color:#2563AA; } .cs-tag-3{ background:var(--cs-green-soft); color:var(--cs-green-deep); } .cs-tag-4{ background:var(--cs-red-soft); color:var(--cs-red-deep); } .cs-tag-5{ background:var(--cs-amber-soft); color:var(--cs-amber-deep); } .cs-tag-6{ background:#DDF4F1; color:#0E7C72; } .cs-tag-7{ background:#FBE7F3; color:#A02B72; } .cs-tag-8{ background:#EEF1F4; color:#51606E; } .cs-tag-pending{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); border:1px dashed var(--cs-gold-deep); } /* ============ FEATURE REQUESTS (побажання) ============ */ .cs-vote-btn{ width:56px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.15rem; border:1px solid #ECEEF1; border-radius:.75rem; padding:.5rem 0; background:transparent; } .cs-vote-btn .n{ font-size:1.05rem; font-weight:800; line-height:1.1; color:var(--cs-ink); } .cs-vote-btn .l{ font-size:.6rem; color:#8c887f; text-transform:uppercase; letter-spacing:.3px; } .cs-vote-btn.voted{ border-color:var(--cs-gold-deep); background:var(--cs-gold-soft); } .cs-vote-btn.voted .n{ color:var(--cs-gold-deep); } .cs-vote-btn.locked{ opacity:.5; cursor:not-allowed; } .cs-feat-card{ cursor:pointer; } .cs-feat-card.pending{ border:1px dashed var(--cs-gold); background:var(--cs-gold-soft); } /* ============ TICKETS (тікети підтримки) ============ */ .cs-row-selected{ background:var(--cs-violet-soft)!important; } .cs-row-selected .fw-semibold{ color:var(--cs-violet); } /* ============ HISTORY (історія оновлень) ============ */ .cs-ver-card{ background:#fff; border:1px solid #ECEEF1; border-radius:.8rem; margin-bottom:1rem; scroll-margin-top:90px; } .cs-ver-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.8rem 1.2rem; border-bottom:1px solid #F1EFE8; } .cs-ver-head h5{ margin:0; font-size:1.05rem; font-weight:700; } .cs-ver-date{ color:#9AA1AB; font-size:.85rem; white-space:nowrap; } .cs-ver-body{ padding:.85rem 1.2rem; } .cs-chg-row{ display:flex; gap:.65rem; align-items:flex-start; padding:.3rem 0; font-size:.92rem; line-height:1.5; } .cs-chg{ display:inline-block; font-size:.7rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; white-space:nowrap; flex:0 0 auto; margin-top:.1rem; min-width:84px; text-align:center; } .cs-chg-add{ background:var(--cs-green-soft); color:var(--cs-green-deep); } .cs-chg-fix{ background:var(--cs-red-soft); color:var(--cs-red-deep); } .cs-chg-chg{ background:var(--cs-amber-soft); color:var(--cs-amber-deep); } .cs-badge-db{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); font-size:.66rem; font-weight:700; padding:.1rem .4rem; border-radius:.3rem; vertical-align:middle; } .cs-hist-nav{ position:sticky; top:84px; max-height:calc(100vh - 110px); overflow:auto; } .cs-hist-nav .grp-toggle{ -webkit-appearance:none; appearance:none; display:flex; align-items:center; justify-content:space-between; width:100%; background:#F7F8FA; border:0; outline:0; box-shadow:none; font-size:.78rem; font-weight:700; letter-spacing:.2px; color:#5B6068; margin:.3rem 0; padding:.55rem .7rem; border-radius:.5rem; cursor:pointer; transition:background .15s,color .15s; } .cs-hist-nav .grp-toggle:hover{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); } .cs-hist-nav .grp-toggle:focus-visible{ box-shadow:0 0 0 .2rem rgba(245,179,1,.25); } .cs-hist-nav .grp-toggle[aria-expanded="true"]{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); } .cs-hist-nav .grp-toggle i{ font-size:.62rem; color:#B4B2A9; transition:transform .2s; } .cs-hist-nav .grp-toggle[aria-expanded="true"] i{ color:var(--cs-gold-deep); transform:rotate(90deg); } .cs-hist-nav .grp-sub{ padding-left:.4rem; margin-top:.15rem; } .cs-hist-nav .nav-link{ display:flex; justify-content:space-between; gap:.5rem; padding:.3rem .6rem; border-radius:.4rem; color:#52575F; font-size:.86rem; } .cs-hist-nav .nav-link:hover{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); } .cs-hist-nav .nav-link.active{ background:var(--cs-gold-soft); color:var(--cs-gold-deep); font-weight:600; } .cs-hist-nav .nav-link .d{ color:#B4B2A9; font-size:.76rem; } @media (min-width:992px){ .cs-sticky-sidebar{ position:sticky; top:78px; } } @media print{ .cs-nav,.cs-foot,.cs-hist-nav,.cs-phead,.cs-print-btn{ display:none !important; } .cs-ver-card{ break-inside:avoid; box-shadow:none; } } /* ============ ACCORDION (FAQ) ============ */ .accordion{ --bs-accordion-border-color:#ECEEF1; --bs-accordion-border-radius:.7rem; --bs-accordion-btn-color:var(--cs-ink); --bs-accordion-btn-bg:#fff; --bs-accordion-active-color:var(--cs-gold-deep); --bs-accordion-active-bg:var(--cs-gold-soft); --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(245,179,1,.22); --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B27D00'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion-item{ margin-bottom:.6rem; border-radius:.7rem !important; overflow:hidden; } .accordion-button{ font-weight:600; } .accordion-button:not(.collapsed){ box-shadow:none; } .accordion-body{ color:#52575F; } .accordion-body ul,.accordion-body ol{ margin-bottom:0; } /* ============ DOC ANCHOR (секції з sticky-навігацією) ============ */ .cs-anchor{ scroll-margin-top:90px; } /* ============ LEGAL (договір, політики) ============ */ .cs-legal{ color:#3A3F47; font-size:.95rem; line-height:1.75; max-width:840px; } .cs-legal p{ margin-bottom:.6rem; } .cs-legal a{ color:var(--cs-gold-deep); } .cs-legal ul,.cs-legal ol{ margin:.3rem 0 .8rem; padding-left:1.4rem; } .cs-legal li{ margin-bottom:.3rem; } /* центровані жирні параграфи = заголовки розділів */ .cs-legal p.text-center b{ display:inline-block; font-family:'Manrope'; font-size:1.05rem; color:var(--cs-ink); margin-top:.6rem; } /* ============ CABINET ============ */ .cs-toast{ display:none; position:fixed; right:1.25rem; bottom:1.25rem; z-index:1080; max-width:360px; padding:.85rem 1.1rem; border-radius:.75rem; color:#fff; box-shadow:0 .6rem 1.6rem rgba(0,0,0,.25); font-size:.92rem; } .cs-toast-success{ background:#198754; } .cs-toast-error{ background:#dc3545; } .cs-toast-warning{ background:#fd7e14; } .cs-toast-info{ background:#0d6efd; } .cs-hw-row:hover td{ background:#fdf6e3; } .cs-hw-row.table-active td{ background:#fdf6e3; } /* ============ PICK LIST (скріншоти / відео — спільний стиль вибору елемента) ============ */ .cs-pick-list{ max-height:62vh; overflow-y:auto; } .cs-pick-item{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.5rem .65rem; border:0; border-left:3px solid transparent; background:#fff; border-bottom:1px solid #f0f0f0; cursor:pointer; transition:background .12s; text-decoration:none; color:inherit; } .cs-pick-item:hover{ background:#F4F2FC; } .cs-pick-item.active{ background:var(--cs-violet-soft); border-left-color:var(--cs-violet); } .cs-pick-thumb{ object-fit:cover; object-position:top left; border-radius:.35rem; background:#f1f1f1; flex-shrink:0; } .cs-pick-meta{ min-width:0; flex:1 1 auto; overflow:hidden; } .cs-pick-meta .t{ font-size:.82rem; font-weight:600; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cs-pick-meta .c{ font-size:.7rem; color:#9AA1AB; } .cs-tag-pill{ font-weight:500; } /* ============ FOOTER ============ */ .cs-foot{ background:var(--cs-ink); color:#9AA1AB; border-top:1px solid var(--cs-line-dark); } .cs-foot a{ color:#C7CCD3; text-decoration:none; } .cs-foot a:hover{ color:var(--cs-gold); }