:root{ --dark:#0D2A3F; --accent:#0EA5C6; --accent2:#0B7EA6; --green:#0BB783; --text:#0F172A; --muted:#64748B; --border:#E2E8F0; --bg:#F7FAFC; --card:#FFFFFF; --danger:#EF4444; --shadow: 0 10px 28px rgba(2,8,23,.06); --shadow2: 0 18px 46px rgba(2,8,23,.10); /* iOS (PWA) safe-area insets */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --label: rgba(15,23,42,.88); --input-bg: rgba(255,255,255,.96); --input-border: rgba(209,213,219,.95); --glass: rgba(255,255,255,.72); /* Wide-shell layout tokens: reduce lateral gaps on desktop */ --site-shell-max: 1480px; --site-shell-max-xl: 1560px; --site-shell-max-2xl: 1680px; --site-shell-pad: 18px; --site-shell-pad-xl: 20px; --site-shell-pad-2xl: 24px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none} body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background: radial-gradient(1200px 500px at 10% 0%, rgba(14,165,198,.08), rgba(14,165,198,0) 55%), radial-gradient(900px 480px at 95% 15%, rgba(11,183,131,.06), rgba(11,183,131,0) 55%), var(--bg); min-height:100vh; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; position:relative; } img{display:block;max-width:100%} a{text-decoration:none;color:inherit} .wrap{ width:100%; max-width:var(--site-shell-max); margin:0 auto; padding-left: calc(var(--site-shell-pad) + var(--safe-left)); padding-right: calc(var(--site-shell-pad) + var(--safe-right)); } .muted{color:var(--muted)} .muted2{color:var(--muted);opacity:.92} .hidden{display:none!important} /* ===== Page modifiers ===== */ body.search-page{ /* цвет/градиент под фон fon.jpg (тёмный фирменный) */ background: radial-gradient(1200px 560px at 12% 0%, rgba(14,165,198,.18), rgba(14,165,198,0) 60%), radial-gradient(980px 620px at 92% 18%, rgba(11,183,131,.12), rgba(11,183,131,0) 58%), linear-gradient(180deg, #0F374C 0%, #0D2A3F 100%); } body.search-page .page-head .page-title h1{color:rgba(255,255,255,.96)} body.search-page .page-head .page-title p{color:rgba(255,255,255,.74)} /* ===== Header (как на главной) ===== */ header{ position:fixed;top:0;left:0;right:0;z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); overflow:hidden; } /* iOS/Android PWA (added to Home Screen): keep UI below system status bar */ @media (display-mode: standalone){ header{ padding-top: var(--safe-top); } main.page{ padding-top: calc(112px + var(--safe-top)); } .toast{ right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); } } /* Fallback for iOS Safari: buckler-core.js adds .pwa-standalone on */ html.pwa-standalone header{ padding-top: var(--safe-top); } html.pwa-standalone main.page{ padding-top: calc(112px + var(--safe-top)); } html.pwa-standalone .toast{ right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); } header::before{ content:""; position:absolute; inset:-20px; background:url("images/hero.png") center/cover no-repeat; filter: blur(10px) saturate(1.05); opacity:.18; z-index:0; pointer-events:none; } header::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.78); z-index:0; pointer-events:none; } .header-shell{ position:relative;z-index:1; width:100%; padding:14px var(--site-shell-pad); padding-left: calc(var(--site-shell-pad) + var(--safe-left)); padding-right: calc(var(--site-shell-pad) + var(--safe-right)); display:flex;align-items:center;gap:18px; } .logo{ display:flex;align-items:center;gap:10px; font-size:22px;font-weight:800;letter-spacing:.2px; line-height:1;white-space:nowrap; } .logo:hover{opacity:.95} .logo-img{ width:34px;height:34px;border-radius:12px;object-fit:contain; background:var(--card); box-shadow:0 10px 24px rgba(2,8,23,.16); flex:0 0 auto; } .header-spacer{margin-left:auto} .nav-links{display:flex;gap:8px;align-items:center;font-size:14px;color:rgba(15,23,42,.78);white-space:nowrap;margin-right:6px} .nav-links a{padding:8px 10px;border-radius:10px;transition:.18s} .nav-links a:hover{background:rgba(15,23,42,.06);color:rgba(15,23,42,.95)} .header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .btn-small{ display:inline-flex;align-items:center;justify-content:center; padding:9px 14px;border-radius:10px; border:1px solid rgba(15,23,42,.15); background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));color:#0F172A; font-weight:700;font-size:13.5px;letter-spacing:.01em; cursor:pointer; transition:.16s transform,.16s box-shadow,.16s background,.16s color,.16s border-color; box-shadow:0 7px 16px rgba(2,8,23,.055); white-space:nowrap; } .btn-small:hover{transform:translateY(-1px);border-color:rgba(11,126,166,.24);box-shadow:0 10px 20px rgba(2,8,23,.07)} .btn-small.primary{ border-color:rgba(11,126,166,.32); background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 10px 20px rgba(14,165,198,.16); } .btn-small.primary:hover{box-shadow:0 12px 22px rgba(14,165,198,.18)} /* Мягкие варианты кнопок (строгий стиль, минимум цветов) */ .btn-small.soft{ border-color:rgba(14,165,198,.24); background:rgba(14,165,198,.08); color:rgba(11,126,166,1); box-shadow:none; } .btn-small.soft:hover{box-shadow:0 10px 24px rgba(2,8,23,.06)} .btn-small.success{ border-color:rgba(11,183,131,.24); background:rgba(11,183,131,.08); color:rgba(4,120,87,1); box-shadow:none; } .btn-small.success:hover{box-shadow:0 10px 24px rgba(2,8,23,.06)} .btn-small.ghost{ background:transparent; border-color:rgba(15,23,42,.16); color:rgba(15,23,42,.92); box-shadow:none; } .btn-small.ghost:hover{background:rgba(15,23,42,.04)} .btn-small.danger{ border-color:rgba(185,28,28,.28); background:linear-gradient(180deg,#ef4444,#dc2626); color:#fff; box-shadow:0 12px 24px rgba(239,68,68,.18); } /* ===== Page ===== */ main.page{padding:112px 0 64px} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px} .page-title h1{font-size:34px;line-height:1.12;font-weight:900;letter-spacing:.2px;margin-bottom:8px} .page-title p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:860px} .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow); } .card h3{font-size:16px;font-weight:900;margin-bottom:10px} .grid{display:grid;gap:16px} .grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)} .grid.four{grid-template-columns:repeat(4,1fr)} @media (max-width: 980px){ .nav-links{display:none} .grid.two,.grid.three,.grid.four{grid-template-columns:1fr} .wrap{padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right));} /* Prevent iOS auto-zoom on focus (inputs < 16px trigger page zoom). */ .input,.select,.textarea, input,select,textarea{ font-size:16px !important; } } /* ===== Device detected (JS adds .device-mobile / .device-desktop on ) ===== Эти правила дополняют обычные @media и помогают "подстраивать" интерфейс на устройствах, где ширина/масштаб ведут себя нестандартно. */ .device-mobile .header-shell{ padding:12px 14px; padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); } .device-mobile .page{padding-left:14px;padding-right:14px} .device-mobile .dash{grid-template-columns:1fr;gap:12px} .device-mobile .dash-nav{position:static} .device-mobile .dash-main{padding-top:0} .device-mobile .grid-3{grid-template-columns:1fr} .device-mobile .grid.two{grid-template-columns:1fr} .device-mobile .chat-layout{grid-template-columns:1fr} .device-mobile .chat-side{position:static} @media (max-width: 720px){ .header-shell{ gap:10px; padding:12px 14px; padding-left:calc(14px + var(--safe-left)); padding-right:calc(14px + var(--safe-right)); } .logo{font-size:18px;gap:8px;min-width:0;} .logo-img{width:30px;height:30px;border-radius:10px;} .header-spacer{flex:1 1 auto;min-width:0;} .header-actions{ flex-wrap:nowrap; gap:8px; min-width:0; overflow:visible; justify-content:flex-end; max-width:100%; } .header-actions::-webkit-scrollbar{display:none;} .header-actions > *{flex:0 0 auto;} .header-shell{overflow:hidden;} .btn-small{padding:7px 11px;font-size:13px;border-radius:9px;} } @media (max-width: 720px){ html:not([data-theme="dark"]) header::before{ opacity:0 !important; background:none !important; } html:not([data-theme="dark"]) header::after{ background:rgba(255,255,255,.96); } html:not([data-theme="dark"]) .header-actions, html:not([data-theme="dark"]) .header-actions::before, html:not([data-theme="dark"]) .header-actions::after{ box-shadow:none !important; background:transparent !important; } } @media (max-width: 720px){ html,body{overflow-x:hidden !important;overscroll-behavior-x:none !important;} body{touch-action:pan-y manipulation;} .wrap,.page,.header-shell,header,main{max-width:100%;overflow-x:hidden;} } /* ===== Form ===== */ .form-row{display:grid;gap:10px} .label{font-weight:800;font-size:14px;color:var(--label);margin-bottom:6px} .input,.select,.textarea{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--input-border); background:var(--input-bg); font-size:14px; color:var(--text); outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); } .textarea{min-height:120px;resize:vertical} .input:focus,.select:focus,.textarea:focus{ border-color:rgba(14,165,198,.72); box-shadow:0 0 0 3px rgba(14,165,198,.18); } /* ===== Dashboard layout ===== */ .dash{ display:grid; grid-template-columns: 256px 1fr; gap:16px; align-items:start; } .side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; } .side .card{padding:14px} .client-cabinet-page .content,.master-cabinet-page .content{display:grid;gap:16px} .cabinet-section-card{scroll-margin-top:112px} .client-cabinet-page .side .card:first-child,.master-cabinet-page .side .card:first-child{max-height:calc(100vh - 122px);overflow:auto;scrollbar-width:thin} .client-cabinet-page .side .card:first-child::-webkit-scrollbar,.master-cabinet-page .side .card:first-child::-webkit-scrollbar{width:8px} .client-cabinet-page .side .card:first-child::-webkit-scrollbar-thumb,.master-cabinet-page .side .card:first-child::-webkit-scrollbar-thumb{background:rgba(148,163,184,.38);border-radius:999px} .side-title{font-weight:900;margin-bottom:10px} .side a{ display:flex;gap:12px;align-items:center; padding:10px 12px;border-radius:14px; border:1px solid transparent; color:rgba(15,23,42,.85); font-weight:900; transition:.16s; } .side a:hover{background:rgba(15,23,42,.05)} .side a.active{ background:rgba(14,165,198,.08); border-color:rgba(14,165,198,.20); } /* Деловые однотонные иконки в боковом меню (как в примере) */ .side a .nav-ico{ width:34px;height:34px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border); background:var(--card); color:rgba(15,23,42,.65); flex:0 0 34px; } .side a .nav-ico svg{ width:18px;height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .side a.active .nav-ico{ background:rgba(14,165,198,.15); border-color:rgba(14,165,198,.35); color:rgba(14,165,198,1); } .side a.active-urgent{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); } .side a.active-urgent .nav-ico{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:rgba(239,68,68,1); } /* Support button in side navigation (голубой, как на главной) */ .side a.support-link{ margin-top:6px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff; box-shadow:0 12px 26px rgba(14,165,198,.22); } .side a.support-link:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(14,165,198,.28); } .side a.support-link .nav-ico{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); color:#fff; } .side a.support-link .nav-ico svg{ stroke:#fff; } /* Logout block (cabinets): separated from main tabs, pinned to bottom */ .side .card.logout-card{ margin-top:auto; border-color:rgba(239,68,68,.20); background:rgba(239,68,68,.03); } .side a.logout-link{ background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.20); /* Always red (both light & dark themes) */ color: var(--danger); font-weight: 900;} .side a.logout-link:hover{ background:rgba(239,68,68,.10); color: var(--danger);} .side a.logout-link .nav-ico{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:rgba(239,68,68,1); } @media (max-width: 980px){ .dash{grid-template-columns:1fr} .side{position:static;top:auto} .client-cabinet-page .side .card:first-child,.master-cabinet-page .side .card:first-child{max-height:none;overflow:visible} } /* ===== Badges & tags ===== */ .badge{ display:inline-flex;align-items:center;gap:8px; padding:7px 10px;border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800;font-size:13.5px; } .badge.green{border-color:rgba(11,183,131,.30);background:rgba(11,183,131,.08)} .badge.blue{border-color:rgba(14,165,198,.30);background:rgba(14,165,198,.08)} .badge.red{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.08)} .badge.orange{border-color:rgba(249,115,22,.34);background:rgba(249,115,22,.10);color:#c2410c} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .tag{ display:inline-flex;align-items:center; padding:6px 10px;border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:13.5px;font-weight:800; color:rgba(15,23,42,.80); } /* ===== Master cards ===== */ .master-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} @media (max-width: 1020px){.master-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width: 760px){.master-grid{grid-template-columns:1fr;}} .master-card{overflow:hidden;padding:0;display:flex;flex-direction:column;content-visibility:auto;contain-intrinsic-size:380px 420px} .master-grid > .master-card:not(.favorite-master-card){height:auto;max-height:none;min-height:452px;} .master-grid > .master-card:not(.favorite-master-card) .master-body{height:100%;display:flex;flex-direction:column;min-width:0;} .master-grid > .master-card:not(.favorite-master-card) .master-name, .master-grid > .master-card:not(.favorite-master-card) .master-meta, .master-grid > .master-card:not(.favorite-master-card) .spec-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;} .master-grid > .master-card:not(.favorite-master-card) .master-name{-webkit-line-clamp:2;} .master-grid > .master-card:not(.favorite-master-card) .master-meta, .master-grid > .master-card:not(.favorite-master-card) .spec-text{-webkit-line-clamp:3;} .master-grid > .master-card:not(.favorite-master-card) .master-description{display:block;-webkit-line-clamp:unset;overflow:visible;word-break:normal;overflow-wrap:anywhere;line-height:1.55;} .master-grid > .master-card:not(.favorite-master-card) .tags{max-height:64px;overflow:hidden;} .master-grid > .master-card:not(.favorite-master-card) .master-actions{margin-top:auto;} @media (max-width: 760px){ .master-grid > .master-card:not(.favorite-master-card){height:auto;max-height:none;min-height:404px;} } /* шапка портфолио в поиске (сжатая) */ .master-cover{height:108px;background:#e5e7eb;background-size:cover;background-position:center;background-repeat:no-repeat} .master-body{padding:14px;display:flex;flex-direction:column;flex:1} .master-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .master-name{font-weight:1000;font-size:16px} .master-meta{color:var(--muted);font-size:13.5px;line-height:1.45} .master-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; /* прижимаем к низу карточки */ padding-top:12px; justify-content:flex-end; /* кнопка «Написать» уходит вправо */ align-items:flex-end; } .icon-btn{ width:40px;height:40px;border-radius:12px; border:1px solid var(--border);background:var(--card); cursor:pointer; display:inline-flex;align-items:center;justify-content:center; position:relative;overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, background .22s ease, border-color .22s ease, color .22s ease; } .icon-btn svg{transition:transform .22s ease;} .icon-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.08)} .icon-btn.active{ border-color:transparent; background:linear-gradient(135deg, rgba(255,107,135,.98), rgba(255,142,83,.95)); color:#fff; box-shadow:0 16px 30px rgba(255,107,135,.26); animation:favoriteIconPulse .45s ease; } .icon-btn.active svg{transform:scale(1.1);} @keyframes favoriteIconPulse{ 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} } /* ===== Chat ===== */ .chat-layout{display:grid;grid-template-columns:320px 1fr;gap:12px} @media (max-width: 980px){.chat-layout{grid-template-columns:1fr}} .chat-list{padding:0;overflow:hidden} .chat-item{ padding:14px 14px; border-top:1px solid var(--border); cursor:pointer; transition:.15s; } .chat-item:hover{background:rgba(15,23,42,.03)} .chat-item.active{background:rgba(14,165,198,.07)} .chat-item .t{font-weight:900} .chat-item .s{margin-top:4px;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-thread{display:flex;flex-direction:column;min-height:560px} .chat-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px} .chat-messages{ flex:1; border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--card); overflow:auto; } .msg{max-width:78%;padding:10px 12px;border-radius:14px;margin:8px 0;box-shadow:0 10px 24px rgba(2,8,23,.04)} .msg.me{margin-left:auto;background:rgba(14,165,198,.10);border:1px solid rgba(14,165,198,.18)} .msg.other{margin-right:auto;background:var(--card);border:1px solid var(--border)} .msg .meta{margin-top:6px;font-size:13.5px;color:var(--muted)} .chat-send{display:flex;gap:10px;margin-top:10px} .chat-send .input{flex:1} /* Chat helpers (используются также в окне техподдержки) */ .msg .text{white-space:pre-wrap} .msg.system{ max-width:100%; margin-left:auto; margin-right:auto; text-align:center; background:rgba(15,23,42,.03); border:1px dashed rgba(15,23,42,.20); } .mini-note{font-size:13.5px;color:var(--muted);line-height:1.45} /* ===== Modal ===== */ .modal-overlay{ position:fixed;inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,8,23,.60); backdrop-filter:blur(6px); z-index:3000; padding:16px; } .modal{ width:640px;max-width:96vw; background:var(--card);border-radius:18px; border:1px solid rgba(255,255,255,.6); box-shadow:0 26px 70px rgba(2,8,23,.38); padding:16px; position:relative; } .modal .x{ position:absolute;top:10px;right:10px; width:36px;height:36px;border-radius:12px; border:1px solid var(--border);background:var(--card); cursor:pointer;font-size:18px; } .modal h3{font-weight:1000;margin-bottom:10px} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap} /* ===== Pro image editor ===== */ .pro-img-editor-modal{width:820px;max-width:96vw} .pro-editor-stage{display:flex;justify-content:center} .pro-editor-frame{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(15,23,42,.04); } .pro-editor-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width: 760px){.pro-editor-controls{grid-template-columns:1fr}} .pro-ctrl{ border:1px solid var(--border); border-radius:16px; padding:10px; background:var(--card); } .range{width:100%;accent-color:var(--accent)} /* ===== Lightbox ===== */ .lightbox-modal{ width:auto; max-width:92vw; max-height:92vh; background:transparent; border:none; box-shadow:none; padding:0; } .lightbox-modal img{ max-width:92vw; max-height:86vh; border-radius:18px; border:1px solid rgba(255,255,255,.55); box-shadow:0 26px 70px rgba(2,8,23,.38); background:var(--card); } img[data-full]{cursor:zoom-in} /* Support modal */ .support-modal{width:720px;max-width:96vw} .support-thread{display:flex;flex-direction:column;min-height:420px} /* ===== Toast ===== */ .toast{ position:fixed;right:16px;bottom:16px; background:var(--card);border:1px solid var(--border); box-shadow:0 18px 46px rgba(2,8,23,.12); border-radius:14px; padding:12px 14px; z-index:3500; display:none; max-width:360px; } .toast.show{ display:block; animation:toastIn .18s ease-out; } .toast-card{ } .toast-title{font-weight:1000} .toast-text{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.45} @keyframes toastIn{ from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} } .toast strong{display:block;margin-bottom:4px} /* ===== Admin / Stats ===== */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media (max-width: 980px){.kpi-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 560px){.kpi-grid{grid-template-columns:1fr}} .kpi{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow: var(--shadow); } .kpi .k{color:var(--muted);font-size:13.5px} .kpi .v{font-weight:1000;font-size:24px;margin-top:6px} /* Stats (master cabinet): period controls */ .stats-range-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .stats-range-controls .stats-range-grid{flex:1 1 320px} .stats-range-controls .stats-range-actions{ flex:1 1 320px; display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start; min-width:0; } .stats-range-controls .stats-range-actions .btn-small{flex:0 0 auto} @media (max-width: 860px){ .stats-range-controls .stats-range-grid{max-width:none !important;width:100%} .stats-range-controls .stats-range-actions{width:100%;margin-top:0 !important} } @media (max-width: 560px){ .stats-range-controls{gap:10px} .stats-range-controls .stats-range-actions{width:100%} .chart-canvas{height:200px} } /* ===== Files ===== */ .file-list{display:grid;gap:10px} .file-item{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } .file-item .name{font-weight:900} .file-item .meta{margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.35} .file-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ===== Milestones / stages ===== */ .stage-list{display:grid;gap:10px} .stage-item{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } .stage-title{font-weight:1000} .stage-sub{margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.35} .stage-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ===== Clickable cards ===== */ .card.clickable{cursor:pointer} .card.clickable:hover{transform:translateY(-2px);box-shadow: var(--shadow2)} /* ===== Logo (transparent with site glow) ===== */ .logo-img{ background:transparent !important; box-shadow:none !important; filter: drop-shadow(0 12px 22px rgba(14,165,198,.28)) drop-shadow(0 8px 16px rgba(11,183,131,.18)); } /* ===== Charts ===== */ .chart-wrap{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:12px; } .chart-canvas{width:100%;height:240px;display:block;} .chart-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .legend-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-weight:800} .legend-swatch{width:10px;height:10px;border-radius:3px;background:var(--accent)} .rating-summary-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border:1px solid rgba(14,165,198,.14);border-radius:20px;background:linear-gradient(135deg,rgba(14,165,198,.08),rgba(255,255,255,.98));box-shadow:0 14px 32px rgba(2,8,23,.06)} .rating-summary-main{display:grid;gap:10px;min-width:0} .rating-summary{display:grid;gap:8px} .rating-summary-score{display:inline-flex;align-items:center;gap:12px;font-weight:1000;font-size:32px;line-height:1;color:var(--text)} .rating-summary-score svg{color:#F59E0B;flex:0 0 auto} .rating-summary-stars{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:10px 14px;border-radius:999px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.18);width:max-content;max-width:100%} .rating-summary-stars .star,.review-stars .star{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px;line-height:1;color:rgba(148,163,184,.42);transform:translateY(-.5px)} .rating-summary-stars .star.filled,.review-stars .star.filled{color:#F59E0B;text-shadow:0 6px 16px rgba(245,158,11,.22)} .rating-summary-count{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:800} .rating-summary-count b{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:7px 11px;border-radius:999px;background:rgba(14,165,198,.10);border:1px solid rgba(14,165,198,.18);color:#0B7EA6;font-weight:1000;line-height:1} .review-card{display:grid;gap:12px;padding:16px 18px;border:1px solid rgba(226,232,240,.95);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));box-shadow:0 12px 28px rgba(2,8,23,.05)} .review-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap} .review-author{font-weight:900;font-size:15px;line-height:1.25;color:var(--text)} .review-stars{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:8px 12px;border-radius:999px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.14)} .review-stars .score{margin-left:6px;font-size:13.5px;font-weight:900;color:var(--muted);line-height:1} .review-text{line-height:1.65;color:var(--text);overflow-wrap:anywhere} .review-date{font-size:13.5px;color:var(--muted);font-weight:800} html[data-theme="dark"] .rating-summary-shell{background:linear-gradient(135deg,rgba(14,165,198,.12),rgba(24,35,46,.98));border-color:rgba(85,203,224,.16);box-shadow:0 16px 34px rgba(0,0,0,.24)} html[data-theme="dark"] .rating-summary-count b{background:rgba(130,220,237,.10);border-color:rgba(130,220,237,.18);color:#82dced} html[data-theme="dark"] .review-card{background:linear-gradient(180deg,rgba(22,31,41,.98),rgba(19,27,36,.98));border-color:rgba(65,85,101,.42);box-shadow:0 18px 32px rgba(0,0,0,.24)} html[data-theme="dark"] .review-stars{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22)} @media (max-width: 640px){ .rating-summary-shell{grid-template-columns:1fr;padding:14px 16px} .rating-summary-score{font-size:26px} .rating-summary-stars,.review-stars{flex-wrap:wrap} .review-card{padding:14px 15px} } /* ===== Master avatar in search cards ===== */ .master-head{display:flex;gap:12px;align-items:flex-start} .master-avatar{ width:46px;height:46px; border-radius:16px; overflow:hidden; border:1px solid rgba(226,232,240,.95); background:rgba(15,23,42,.04); flex:0 0 auto; display:flex;align-items:center;justify-content:center; font-weight:1000; color:rgba(15,23,42,.55); } .master-avatar img{width:100%;height:100%;object-fit:cover} /* ===== Chat: stages panel on the right ===== */ .chat-split{ display:grid; grid-template-columns: 1fr 360px; gap:12px; align-items:start; } .chat-split.no-stages{grid-template-columns:1fr;} /* Mobile overflow fixes for the safe-deal chat blocks ("Этапы" / "Документы"). */ .chat-page .chat-split, .chat-page .chat-split > *{min-width:0;} .chat-page .chat-messages{overflow-x:hidden;} .chat-page .file-item .name, .chat-page .stage-name{overflow-wrap:anywhere;word-break:break-word;} .chat-page .msg .text{overflow-wrap:break-word;word-break:normal;hyphens:none;} @media (max-width: 560px){ .chat-page .file-item{flex-wrap:wrap;} .chat-page .file-item .actions{width:100%;justify-content:flex-start;} .chat-page .stage-row{flex-wrap:wrap;} } /* Support panel split (список чатов + переписка) */ .support-split{ display:grid; grid-template-columns: 360px 1fr; gap:12px; align-items:start; } @media (max-width: 980px){ .support-split{grid-template-columns:1fr;} } .support-list{ padding:0; overflow:hidden; } /* Header inside the support list cards should align with list items */ .support-list .chat-head{ padding:14px 14px 10px 14px; margin-bottom:0; border-bottom:1px solid var(--border); } .support-list .support-chat-item:first-child{border-top:0;} .support-chat-item{ padding:14px 14px; border-top:1px solid var(--border); cursor:pointer; transition:.15s; } .support-chat-item:hover{background:rgba(15,23,42,.03)} .support-chat-item.active{background:rgba(14,165,198,.07)} .support-chat-item .t{font-weight:900;display:flex;gap:8px;align-items:center;justify-content:space-between} .support-chat-item .s{margin-top:4px;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .support-pill{ display:inline-flex;align-items:center;gap:6px; padding:4px 8px;border-radius:999px; font-size:13.5px;font-weight:900; border:1px solid var(--border); background:var(--card); color:rgba(15,23,42,.85); } .support-pill.urgent{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); color:rgba(239,68,68,1); } @media (max-width: 980px){ .chat-split{grid-template-columns:1fr;} } .stages-panel{position:sticky;top:96px;} @media (max-width: 980px){ .stages-panel{position:static;top:auto} } .stage-timeline{display:grid;gap:10px;margin-top:12px} .stage-step{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:flex-start} .stage-bullet{ width:32px;height:32px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(14,165,198,.10); border:1px solid rgba(14,165,198,.22); color:rgba(13,42,63,.92); font-weight:1000; } .stage-card{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:12px; position:relative; overflow:hidden; } .stage-card::before{ content:""; position:absolute;left:-1px;top:-1px;bottom:-1px; width:6px; background:linear-gradient(180deg,var(--accent),var(--green)); } .stage-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .stage-name{font-weight:1000} .stage-price{font-weight:1000;white-space:nowrap} .stage-state{margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.35} .stage-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* ===== Avatar uploader ===== */ .avatar-upload{ display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start; } .avatar-preview{ width:72px;height:72px;border-radius:22px; border:1px solid rgba(226,232,240,.95); background:rgba(15,23,42,.04); overflow:hidden; display:flex;align-items:center;justify-content:center; font-weight:1000;color:rgba(15,23,42,.55); } .avatar-preview img{width:100%;height:100%;object-fit:cover} /* ===== Inline icons (деловой стиль) ===== */ .txt-ico{ display:inline-flex; align-items:center; justify-content:center; width:1.05em; height:1.05em; vertical-align:-0.15em; margin:0 2px; } .txt-ico svg{ width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ===== Pills (рейтинг/цена/город) ===== */ .master-meta-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; } .pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.76); box-shadow:none; font-weight:800; font-size:13.5px; color:rgba(15,23,42,.88); } .pill.rating{border-color:rgba(14,165,198,.15);background:rgba(14,165,198,.045)} .pill.price{border-color:rgba(16,185,129,.15);background:rgba(16,185,129,.045)} .pill.city{border-color:rgba(100,116,139,.22);background:rgba(15,23,42,.035)} /* иконки внутри pill должны быть в том же деловом stroke‑стиле */ .pill svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.92; } /* ===== Safe deal ("сделка с гарантией") badge & toggle ===== */ .safe-deal-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; vertical-align:middle; } .safe-deal-badge .verified-ico{ width:18px; height:18px; display:block; border-radius:6px; box-shadow:0 10px 24px rgba(2,8,23,.12); } .safe-deal-toggle{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:0; min-width:190px; padding:8px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.94); box-shadow:0 10px 24px rgba(2,8,23,.05); } .safe-deal-toggle .label{ position:absolute; left:50%; transform:translateX(-50%); width:calc(100% - 70px); text-align:center; pointer-events:none; white-space:nowrap; font-weight:950; font-size:13.5px; color:rgba(15,23,42,.88); } .safe-deal-toggle .switch{margin-left:auto;} .switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto} .switch input{opacity:0;width:0;height:0} .switch .slider{ position:absolute;top:0;left:0;right:0;bottom:0; background:rgba(100,116,139,.35); border:1px solid rgba(226,232,240,.95); border-radius:999px; transition:.18s; cursor:pointer; } .switch .slider:before{ position:absolute; content:''; height:22px; width:22px; left:2px; top:50%; transform:translateY(-50%); background:var(--card); border-radius:999px; box-shadow:0 10px 24px rgba(2,8,23,.12); transition:.18s; } .switch input:checked + .slider{background:rgba(16,185,129,.55);border-color:rgba(16,185,129,.28)} .switch input:checked + .slider:before{ transform:translate(20px, -50%); } .switch input:disabled + .slider{opacity:.65;cursor:not-allowed} /* ===== Image position (drag внутри рамки) ===== */ .img-frame{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:rgba(15,23,42,.04); cursor:pointer; touch-action:manipulation; } .img-frame.draggable{ cursor:grab; user-select:none; touch-action:none; } .img-frame.draggable:active{cursor:grabbing} .img-frame img{ width:100%; height:100%; object-fit:cover; display:block; } .img-frame .hint{ position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.92); font-size:13.5px; font-weight:900; color:rgba(15,23,42,.75); pointer-events:none; } .avatar-preview{cursor:pointer} /* ========================================================= Buckler UI patches (chat + mobile improvements) ========================================================= */ /* ===== Chat list items (cabinet) ===== */ .chat-item .t{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; } .chat-title{ display:flex; align-items:center; gap:8px; min-width:0; } .chat-title .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .unread-dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 8px 18px rgba(14,165,198,.20); flex:0 0 auto; } .unread-count{ min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:rgba(239,68,68,.96); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; line-height:1; box-shadow:0 10px 22px rgba(239,68,68,.24); flex:0 0 auto; } .chat-item.chat-item-pinned{ border-color:rgba(14,165,198,.28); box-shadow:0 16px 30px rgba(14,165,198,.08); } .chat-pin-btn{ width:30px; height:30px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(248,250,252,.96); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; flex:0 0 auto; } .chat-pin-btn:hover{ transform:translateY(-1px); border-color:rgba(14,165,198,.26); background:rgba(224,242,254,.82); color:#0b7ea6; box-shadow:0 10px 20px rgba(14,165,198,.14); } .chat-pin-btn.is-pinned{ border-color:rgba(14,165,198,.24); background:rgba(224,242,254,.82); color:#0b7ea6; } .chat-pin-btn svg{width:15px;height:15px;display:block} .chat-pinned-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid rgba(14,165,198,.18); background:rgba(224,242,254,.58); color:#0b7ea6; font-size:13px; font-weight:900; white-space:nowrap; } .chat-item{position:relative;} .chat-item-main{display:flex;gap:10px;align-items:flex-start;min-width:0;} .chat-item-content{min-width:0;flex:1;padding-right:44px;} .chat-item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;min-width:0;} .chat-item-meta{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .chat-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;min-height:22px;} .chat-pin-btn-fixed{position:absolute;top:14px;right:14px;z-index:2;} @media (max-width: 640px){ .chat-item-content{padding-right:42px;} .chat-pin-btn-fixed{top:12px;right:12px;} } /* ===== Chat messages: fixed window with internal scroll ===== */ .chat-messages{ max-height:520px; overflow:auto; padding-right:6px; /* room for scroll bar */ } .chat-page .chat-messages{ max-height:55vh; } @media (max-width: 980px){ .chat-messages{ max-height:55vh; } } /* day separator */ .msg-day{ text-align:center; color:var(--muted); font-size:13.5px; font-weight:900; margin:14px 0 10px; position:relative; } .msg-day::before, .msg-day::after{ content:""; position:absolute; top:50%; width:34%; height:1px; background:rgba(15,23,42,.10); } .msg-day::before{ left:0; } .msg-day::after{ right:0; } /* message line with time on the left */ .msg-line{ display:flex; gap:10px; align-items:flex-end; margin:8px 0; } .msg-line.mine{ justify-content:flex-end; } .msg-line.other{ justify-content:flex-start; } .msg-time{ font-size:13px; color:var(--muted); min-width:46px; white-space:nowrap; } .msg-line.mine .msg-time{ text-align:right; } .msg-line.other .msg-time{ text-align:left; } .msg-files{ margin-top:8px; font-size:14px; line-height:1.5; color:rgba(15,23,42,.85); } .msg-files a{ color:rgba(14,165,198,1); font-weight:900; text-decoration:none; } .msg-files a:hover{ text-decoration:underline; } .chat-contact-warning{ margin-top:10px; display:flex; align-items:flex-start; gap:8px; border-radius:12px; border:1px solid rgba(245,158,11,.26); background:rgba(245,158,11,.10); color:#7c4a03; padding:10px 12px; font-size:13.5px; line-height:1.5; } .chat-contact-warning .ico{ flex:0 0 auto; color:#d97706; margin-top:1px; } .chat-contact-warning strong{ display:block; margin-bottom:2px; color:#7c4a03; } html[data-theme="dark"] .chat-contact-warning{ background:rgba(245,158,11,.14); border-color:rgba(251,191,36,.28); color:#fde68a; } html[data-theme="dark"] .chat-contact-warning strong, html[data-theme="dark"] .chat-contact-warning .ico{ color:#fbbf24; } /* ===== Chat actions menu (single button) ===== */ .chat-actions{ position:relative; display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; } .actions-menu{ position:absolute; right:0; top:46px; width:260px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 52px rgba(2,8,23,.16); padding:10px; z-index:2200; } .actions-menu.hidden{ display:none; } .actions-item{ width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:transparent; font-weight:950; color:rgba(15,23,42,.92); cursor:pointer; transition:.12s; text-align:left; } .actions-item:hover{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.06); } .actions-item:disabled{ opacity:.45; cursor:not-allowed; } .actions-sep{ height:1px; background:rgba(15,23,42,.10); margin:8px 0; } /* ===== Chat hint badge: better on mobile + collapsible ===== */ .hint-badge{ border-radius:16px !important; padding:12px 14px !important; display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:nowrap; } .hint-badge .hint-text{ min-width:0; line-height:1.45; } .hint-badge .hint-toggle{ border:0; background:transparent; font-weight:950; color:rgba(14,165,198,1); padding:0; cursor:pointer; white-space:nowrap; } .hint-badge.hint-collapsed .hint-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .hint-badge.hint-expanded .hint-text{ display:block; } /* ===== Mobile stats chart: keep chart inside card ===== */ .chart-dashboard, .chart-wrap, .chart-canvas{ max-width:100%; } @media (max-width: 980px){ .chart-wrap{ overflow:hidden; min-width:0; } .chart-canvas{ width:100% !important; max-width:100%; min-width:0; } } /* When messages are rendered inside .msg-line (time + bubble), remove standalone margins/autos */ .msg-line .msg{ margin:0; } .msg-line .msg.me{ margin-left:0; } .msg-line .msg.other{ margin-right:0; } /* Chat list: each chat as a framed card */ .chat-list{ padding:10px; } .chat-item{ border:1px solid var(--border); border-radius:14px; margin:10px 0; } .chat-item.active{ border-color: rgba(14,165,198,.35); background: rgba(14,165,198,.06); } /* ===== Support modal (shared) ===== */ .support-form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .support-field{display:flex;flex-direction:column;gap:6px} .support-field label{font-size:13.5px;color:rgba(15,23,42,.7);font-weight:800} .support-field input,.support-field textarea{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:14px;outline:none} .support-field textarea{min-height:90px;resize:vertical;grid-column:1 / -1} .support-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px} @media (max-width: 560px){ .support-form{grid-template-columns:1fr} } /* ===== Large screens (wide desktop monitors) ===== */ @media (min-width: 1400px){ .wrap{max-width:var(--site-shell-max-xl);padding-left:calc(var(--site-shell-pad-xl) + var(--safe-left));padding-right:calc(var(--site-shell-pad-xl) + var(--safe-right))} .header-shell{padding-left:calc(var(--site-shell-pad-xl) + var(--safe-left));padding-right:calc(var(--site-shell-pad-xl) + var(--safe-right))} main.page{padding:118px 0 72px} .page-title h1{font-size:38px} .page-title p{font-size:15.5px;max-width:980px} .btn-small{font-size:13.6px;padding:9px 15px} .card{padding:20px;border-radius:18px} .input,.select,.textarea{font-size:14.5px;padding:12px 14px} } @media (min-width: 1700px){ .wrap{max-width:var(--site-shell-max-2xl);padding-left:calc(var(--site-shell-pad-2xl) + var(--safe-left));padding-right:calc(var(--site-shell-pad-2xl) + var(--safe-right))} .header-shell{padding-left:calc(var(--site-shell-pad-2xl) + var(--safe-left));padding-right:calc(var(--site-shell-pad-2xl) + var(--safe-right))} .page-title h1{font-size:42px} .page-title p{font-size:16px;max-width:1050px} .btn-small{font-size:14px;padding:10px 16px} .card{padding:22px;border-radius:20px} } /* hide region/city badge on master cards and master modal (search page) */ .master-region, .city-badge, .region-badge, .badge-city, .badge-region, [data-role="master-city"], [data-role="master-region"], #masterModal .master-city, #masterModal .master-region, #masterCardCity, #masterCardRegion { display: none !important; } /* tooltip hover for guarantee check badge */ .safe-deal-badge .verified-ico { pointer-events: none; } /* Tooltip for "Гарантия сделки" checkmark */ .safe-deal-badge{ display:inline-flex; align-items:center; margin-left:6px; position:relative; cursor: default; pointer-events:auto; } .safe-deal-badge .verified-ico{ pointer-events:none; } .safe-deal-badge::after{ content: attr(data-tip); position:absolute; left:50%; bottom:130%; transform: translateX(-50%) translateY(6px); opacity:0; pointer-events:none; white-space:nowrap; padding:8px 10px; border-radius:12px; font-size:13.5px; line-height:1.2; background: rgba(15,23,42,.95); color:#fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: opacity .15s ease, transform .15s ease; z-index: 9999; } .safe-deal-badge:hover::after{ opacity:1; transform: translateX(-50%) translateY(0); } /* FIX: allow tooltip to be visible outside master card (card often has overflow:hidden) */ .master-card, .master-card .master-body, .master-card .master-top, .master-card .master-head, .master-card .master-name { overflow: visible !important; } /* Ensure tooltip is above other elements */ .safe-deal-badge{ position: relative; z-index: 50; pointer-events: auto !important; } .safe-deal-badge::after{ z-index: 99999; } /* Tooltip on master profile header */ .page-head, .page-title, #h1 { overflow: visible !important; } /* tooltip visibility on master profile */ .page-head, .page-title, #h1 { overflow: visible !important; } /* ===== Side separators + Theme toggle ===== */ .side-sep{ height:1px; background:linear-gradient(90deg, transparent, rgba(148,163,184,.45), transparent); margin:12px 0; } .theme-block{ display:flex; justify-content:center; } .theme-toggle{ display:flex; gap:10px; padding:10px; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); box-shadow: 0 14px 35px rgba(2,8,23,.10); backdrop-filter: blur(10px); } .theme-btn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid transparent; background:transparent; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .theme-btn svg{ width:20px; height:20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity:.9; } .theme-btn.active{ background:linear-gradient(180deg, rgba(14,165,198,.18), rgba(14,165,198,.08)); border-color:rgba(14,165,198,.35); box-shadow: 0 10px 24px rgba(14,165,198,.15); } .theme-btn:active{ transform: translateY(1px); } .theme-btn:hover{ box-shadow: 0 12px 26px rgba(2,8,23,.12); } /* ===== Premium toggle (Safe deal) ===== */ .safe-deal-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; border:1px solid rgba(148,163,184,.35); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); box-shadow: 0 12px 30px rgba(2,8,23,.10); backdrop-filter: blur(10px); } .safe-deal-toggle .label{ position:static; transform:none; width:auto; margin:0; padding:0; font-weight:950; font-size:14px; letter-spacing:.2px; color:rgba(15,23,42,.88); white-space:nowrap; } .safe-deal-toggle .switch{ width:54px; height:30px; margin:0; flex:0 0 auto; } .switch input{ opacity:0; width:0; height:0; } .switch .slider{ position:absolute; cursor:pointer; inset:0; border-radius:999px; border:1px solid rgba(148,163,184,.45); background:linear-gradient(180deg, rgba(148,163,184,.22), rgba(148,163,184,.10)); box-shadow: inset 0 6px 18px rgba(2,8,23,.10), 0 10px 24px rgba(2,8,23,.10); transition: .22s; } .switch .slider:before{ content:""; position:absolute; height:26px; width:26px; left:2px; top:50%; transform: translateY(-50%); border-radius:999px; background:linear-gradient(180deg, #fff, #e2e8f0); box-shadow: 0 10px 25px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.9); transition: .22s; } .switch input:checked + .slider{ border-color:rgba(14,165,198,.45); background:linear-gradient(90deg, rgba(34,197,94,.75), rgba(14,165,198,.72)); } .switch input:checked + .slider:before{ transform: translate(24px, -50%); } /* ===== Dark theme (Telegram-like) ===== */ html[data-theme="dark"]{ color-scheme: dark; /* Telegram-like palette */ --dark:#0B141D; --bg:#0E1621; --card:#17212B; --text:#E6EDF3; --muted:#8EA2B3; --label:#B6C2CF; --border:#22303D; /* Accent */ --accent:#2EA6FF; --accent2:#1F8FE0; /* States */ --green:#33C659; --danger:#FF5D5D; /* Depth */ --shadow: 0 10px 30px rgba(0,0,0,.40); --shadow2: 0 6px 22px rgba(0,0,0,.32); /* Inputs / glass */ --input-bg:#1F2A36; --input-border:#22303D; --glass: rgba(23,33,43,.86); } html[data-theme="dark"] body{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%); } html[data-theme="dark"] body.search-page{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%); } html[data-theme="dark"] body.search-page .page-head .page-title h1{color:var(--text)} html[data-theme="dark"] body.search-page .page-head .page-title p{color:var(--muted)} /* Header */ html[data-theme="dark"] header{ background: rgba(23,33,43,.92); border-bottom:1px solid var(--border); } html[data-theme="dark"] header::before{opacity:0} html[data-theme="dark"] header::after{background: rgba(23,33,43,.92)} html[data-theme="dark"] .header-shell{ background: rgba(23,33,43,.72); border-color: rgba(34,48,61,.88); box-shadow: 0 14px 40px rgba(0,0,0,.35); } /* Cards / surfaces */ html[data-theme="dark"] .card{ border-color: var(--border); box-shadow: var(--shadow); } html[data-theme="dark"] .pill, html[data-theme="dark"] .badge, html[data-theme="dark"] .tag{ background: #1F2A36; border-color: var(--border); color: var(--text); } /* Keep rating/price pills visually similar to light theme (tinted) */ html[data-theme="dark"] .pill.rating{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.24); } html[data-theme="dark"] .pill.price{ background: rgba(14,165,198,.10); border-color: rgba(14,165,198,.24); } /* Forms */ html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea{ box-shadow:none; } html[data-theme="dark"] .input:focus, html[data-theme="dark"] .select:focus, html[data-theme="dark"] .textarea:focus{ border-color: rgba(46,166,255,.95); box-shadow:0 0 0 3px rgba(46,166,255,.22); } /* Buttons */ html[data-theme="dark"] .btn-small{ background:#1F2A36; border-color: var(--border); color: var(--text); } html[data-theme="dark"] .btn-small:hover{ box-shadow:0 14px 30px rgba(0,0,0,.35); } html[data-theme="dark"] .btn-small.primary{ background: linear-gradient(180deg, #2EA6FF 0%, #1F8FE0 100%); border-color: transparent; color:#fff; box-shadow: 0 14px 34px rgba(46,166,255,.22); } html[data-theme="dark"] .btn-small.primary:hover{ box-shadow: 0 18px 44px rgba(46,166,255,.30); } /* Side navigation */ html[data-theme="dark"] .side a{ color: rgba(230,237,243,.92); } html[data-theme="dark"] .side a:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .side a.active{ background: rgba(46,166,255,.16); border-color: rgba(46,166,255,.28); } html[data-theme="dark"] .side a .nav-ico{ background:#1F2A36; border-color: var(--border); color: rgba(142,162,179,.92); } html[data-theme="dark"] .side a.active .nav-ico{ background: rgba(46,166,255,.18); border-color: rgba(46,166,255,.40); color: #2EA6FF; } html[data-theme="dark"] .side a.support-link{ box-shadow:0 14px 34px rgba(46,166,255,.18); } html[data-theme="dark"] .side a.support-link:hover{ box-shadow:0 18px 44px rgba(46,166,255,.26); } /* Chat */ html[data-theme="dark"] .chat-item:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .chat-item.active{ background: rgba(46,166,255,.14); } html[data-theme="dark"] .chat-item.chat-item-pinned{ border-color: rgba(46,166,255,.34); box-shadow:0 18px 34px rgba(0,0,0,.24); } html[data-theme="dark"] .chat-pin-btn{ background: rgba(255,255,255,.04); border-color:#22303D; color:#9fb0c0; } html[data-theme="dark"] .chat-pin-btn:hover{ background: rgba(46,166,255,.14); border-color: rgba(46,166,255,.26); color:#8ee8ff; box-shadow:none; } html[data-theme="dark"] .chat-pin-btn.is-pinned{ background: rgba(46,166,255,.16); border-color: rgba(46,166,255,.28); color:#8ee8ff; } html[data-theme="dark"] .chat-pinned-pill{ background: rgba(46,166,255,.14); border-color: rgba(46,166,255,.22); color:#8ee8ff; } html[data-theme="dark"] .support-chat-item:hover{ background: rgba(255,255,255,.04); } html[data-theme="dark"] .support-chat-item.active{ background: rgba(46,166,255,.14); } html[data-theme="dark"] .chat-messages{ background: #0E1621; border-color: var(--border); } html[data-theme="dark"] .msg{ box-shadow:none; } html[data-theme="dark"] .msg.other{ background: #182533; border-color: #22303D; } html[data-theme="dark"] .msg.me{ background: #2B5278; border-color: #2B5278; color:#fff; } html[data-theme="dark"] .msg .meta{ color: rgba(142,162,179,.88); } html[data-theme="dark"] .msg.me .meta{ color: rgba(255,255,255,.70); } html[data-theme="dark"] .msg.system{ background: rgba(23,33,43,.92); border: 1px dashed rgba(142,162,179,.30); color: rgba(142,162,179,.95); } /* Modals */ html[data-theme="dark"] .modal-overlay{ background: rgba(0,0,0,.65); } html[data-theme="dark"] .modal{ background: var(--card); border:1px solid var(--border); box-shadow: 0 30px 90px rgba(0,0,0,.60); } html[data-theme="dark"] .modal .x{ background:#1F2A36; border-color: var(--border); color: var(--text); } /* Index page modals (auth/support) */ html[data-theme="dark"] .auth-box, html[data-theme="dark"] .support-box{ background: var(--card) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-close, html[data-theme="dark"] .support-close{ background:#1F2A36 !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-box input, html[data-theme="dark"] .support-box input, html[data-theme="dark"] .support-box textarea{ background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } html[data-theme="dark"] .auth-box input:focus, html[data-theme="dark"] .support-box input:focus, html[data-theme="dark"] .support-box textarea:focus{ border-color: rgba(46,166,255,.95) !important; box-shadow: 0 0 0 3px rgba(46,166,255,.22) !important; } /* Premium theme toggle */ html[data-theme="dark"] .theme-toggle{ background:#17212B; border-color: var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .theme-btn{ color: var(--text); } html[data-theme="dark"] .theme-btn:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.35); } html[data-theme="dark"] .theme-btn.active{ background: rgba(46,166,255,.18); border-color: rgba(46,166,255,.40); box-shadow: 0 12px 28px rgba(46,166,255,.18); } /* Premium safe-deal toggle */ html[data-theme="dark"] .safe-deal-toggle{ border-color: var(--border); background:#17212B; box-shadow: 0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .safe-deal-toggle .label{ color: rgba(230,237,243,.92); } html[data-theme="dark"] .switch .slider{ border-color: var(--border); background:#1F2A36; box-shadow: inset 0 6px 18px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.28); } html[data-theme="dark"] .switch .slider:before{ background: linear-gradient(180deg, #E6EDF3 0%, #B6C2CF 100%); box-shadow: 0 10px 24px rgba(0,0,0,.55); } html[data-theme="dark"] .switch input:checked + .slider{ border-color: rgba(46,166,255,.65); background: linear-gradient(90deg, #2EA6FF 0%, #1F8FE0 100%); } html[data-theme="dark"] .auth-link{ color: rgba(230,237,243,.78) !important; } html[data-theme="dark"] .auth-link:hover{ color: rgba(230,237,243,.95) !important; } html[data-theme="dark"] .muted2{opacity:.96} /* ===== Dark theme fixes (homepage readability + premium UI) ===== */ /* Header nav links on dark header (index + other pages that reuse header) */ html[data-theme="dark"] .nav-links{ color: rgba(230,237,243,.82); } html[data-theme="dark"] .nav-links a{ color: rgba(230,237,243,.86); } html[data-theme="dark"] .nav-links a:hover{ background: rgba(255,255,255,.06); color: rgba(230,237,243,.98); } /* Outline buttons (hero/cta) – don’t turn white on hover in dark theme */ html[data-theme="dark"] .btn-outline{ color: rgba(230,237,243,.95) !important; } html[data-theme="dark"] .btn-outline:hover{ background: rgba(255,255,255,.10) !important; color: rgba(230,237,243,.98) !important; } /* "White slides" on main page: features + FAQ */ html[data-theme="dark"] .features{ background: linear-gradient(180deg, #0E1621 0%, #0B141D 100%) !important; } html[data-theme="dark"] .features-title{ color: var(--text) !important; } html[data-theme="dark"] .feature-item{ color: rgba(230,237,243,.92) !important; } html[data-theme="dark"] .handshake-wrap::before{ background: radial-gradient(circle at 45% 40%, rgba(46,166,255,.24), rgba(46,166,255,0) 62%) !important; } html[data-theme="dark"] .handshake-wrap::after{ background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.44), rgba(0,0,0,0) 70%) !important; } html[data-theme="dark"] .faq-item{ background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow2) !important; } html[data-theme="dark"] .chev{ background:#1F2A36; border-color: var(--border); color: rgba(230,237,243,.78); } /* Remove aggressive red glow on "danger" buttons in dark theme (cabinet/admin) */ html[data-theme="dark"] .btn-small.danger{ background:#1F2A36; border:1px solid rgba(255,93,93,.28); color: rgba(255,93,93,.95); box-shadow:none; } html[data-theme="dark"] .btn-small.danger:hover{ background: rgba(255,93,93,.10); box-shadow:0 14px 30px rgba(0,0,0,.35); } /* Chat actions dropdown ("Действия") – readable text on dark surfaces */ html[data-theme="dark"] .actions-menu{ background: var(--card); border-color: var(--border); box-shadow: 0 26px 64px rgba(0,0,0,.55); } html[data-theme="dark"] .actions-item{ color: rgba(230,237,243,.94); } html[data-theme="dark"] .actions-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); } html[data-theme="dark"] .actions-sep{ background: rgba(142,162,179,.22); } /* Master profile header (opened from search) – remove white block in dark theme */ html[data-theme="dark"] .profile-hero{ background: var(--card) !important; border-color: var(--border) !important; } html[data-theme="dark"] .profile-cover{ background-color:#22303D !important; } html[data-theme="dark"] .gallery-item{ background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } /* Dark theme readability fixes */ .spec-text{font-weight:900;color:rgba(15,23,42,.85);} html[data-theme="dark"] .master-meta{color:rgba(230,237,243,.92) !important;} html[data-theme="dark"] .spec-text{color:rgba(230,237,243,.92) !important;} html[data-theme="dark"] .stage-bullet{color:rgba(230,237,243,.92);border-color:rgba(46,166,255,.45);background:rgba(46,166,255,.14);} html[data-theme="dark"] .master-avatar{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box .label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .support-box .support-field label{color:rgba(230,237,243,.92);} html[data-theme="dark"] .modal .label{color:rgba(230,237,243,.92);} /* Presence (online / last seen) */ .master-presence{ margin-top: 2px; font-size: 13.5px; line-height: 1.2; } .presence{ font-size: 13.5px; line-height: 1.2; } .presence.online{ color: rgba(34,197,94,1); font-weight: 800; } .presence.offline{ color: var(--muted); } /* Chat message read receipts */ .msg .status{ margin-top: 2px; font-size: 13.5px; color: var(--muted); opacity: .9; text-align: right; } /* ===== Internal message notifications ===== */ .top-notice{ position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 720px; z-index: 4000; display: none; } .top-notice.show{ display: block; } .top-notice-card{ background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 30px rgba(2,6,23,.22); padding: 12px 14px; } .top-notice-title{ font-weight: 900; margin-bottom: 2px; } .top-notice-text{ color: var(--muted); font-weight: 700; line-height: 1.25; word-break: break-word; } /* ===== Unread badge (cabinet → chats) ===== */ .nav-badge{ margin-left: auto; display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(239,68,68,1); color: #fff; font-weight: 900; font-size: 13.5px; line-height: 1; } /* ===== Master card metrics (views + favorites) ===== */ .master-card .master-actions{ justify-content: space-between; align-items: flex-end; } .master-card .master-buttons{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .master-card .master-metrics{ display: flex; gap: 12px; align-items: center; color: var(--muted); font-weight: 800; font-size: 13.5px; } .master-card .master-metrics .metric{ display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } /* ===== Favorites cards (client cabinet) ===== */ .gallery-item{content-visibility:auto;contain-intrinsic-size:320px 280px} .favorite-master-card{ padding: 0; overflow: hidden; } .favorite-master-card .master-body{ padding: 16px; } .favorite-master-head{ display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: flex-start; } .favorite-master-avatar-wrap{ width: 88px; height: 88px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: rgba(148,163,184,.14); box-shadow: 0 10px 24px rgba(2,8,23,.06); } .favorite-master-avatar{ width: 100%; height: 100%; display: block; object-fit: cover; } .favorite-master-main{ min-width: 0; display: flex; flex-direction: column; gap: 6px; } .favorite-master-title{ line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .favorite-master-meta{ color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .favorite-master-rating, .favorite-master-price{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; color: var(--muted); font-weight: 800; overflow-wrap: anywhere; } .favorite-master-rating .txt-ico, .favorite-master-price .txt-ico{ flex: 0 0 auto; } .favorite-master-tags{ margin-top: 2px; } .favorite-master-tags .tag{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favorite-master-actions{ margin-top: 14px; justify-content: flex-start; align-items: stretch; } .favorite-master-buttons{ width: 100%; justify-content: flex-start; } @media (max-width: 640px){ .favorite-master-head{ grid-template-columns: 72px minmax(0, 1fr); } .favorite-master-avatar-wrap{ width: 72px; height: 72px; border-radius: 18px; } .favorite-master-buttons{ flex-direction: column; align-items: stretch; } .favorite-master-buttons .btn-small{ width: 100%; justify-content: center; } } html[data-theme="dark"] .support-title, html[data-theme="dark"] .support-box .h, html[data-theme="dark"] .support-request-title{ color:#F8FBFF !important; } html[data-theme="dark"] .support-box .p, html[data-theme="dark"] .support-sub{ color:rgba(230,237,243,.78) !important; } /* Professional action labels for chat previews and bubbles */ .chat-preview-line{ display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; } .chat-preview-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .msg-action-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.24); background:rgba(248,250,252,.96); color:var(--text); font-size:13px; font-weight:900; line-height:1; letter-spacing:.02em; flex:0 0 auto; max-width:100%; } .msg-action-chip .txt-ico{ width:14px; height:14px; flex:0 0 auto; } .msg-action-chip--neutral{ background:rgba(241,245,249,.96); border-color:rgba(148,163,184,.28); } .msg-action-chip--info{ background:rgba(224,242,254,.98); border-color:rgba(56,189,248,.24); color:#075985; } .msg-action-chip--success{ background:rgba(220,252,231,.98); border-color:rgba(34,197,94,.24); color:#166534; } .msg-action-chip--warning{ background:rgba(254,249,195,.98); border-color:rgba(234,179,8,.24); color:#854d0e; } .msg-action-chip--danger{ background:rgba(254,226,226,.98); border-color:rgba(239,68,68,.24); color:#b91c1c; } .msg-action-card{ display:flex; flex-direction:column; gap:8px; min-width:0; } .msg-action-body{ min-width:0; line-height:1.55; } .msg-action-body a{ overflow-wrap:anywhere; word-break:break-word; } .support-chat-page .msg, .support-panel-page .msg{ max-width:min(90%, 780px); } .support-chat-page .msg .text, .support-panel-page .msg .text{ overflow-wrap:break-word; word-break:keep-all; hyphens:none; white-space:pre-wrap; } html[data-theme="dark"] .msg-action-chip{ background:rgba(15,23,42,.88); border-color:rgba(71,85,105,.42); color:#e2e8f0; } html[data-theme="dark"] .msg-action-chip--neutral{ background:rgba(30,41,59,.88); border-color:rgba(71,85,105,.42); } html[data-theme="dark"] .msg-action-chip--info{ background:rgba(8,47,73,.72); border-color:rgba(56,189,248,.26); color:#bae6fd; } html[data-theme="dark"] .msg-action-chip--success{ background:rgba(20,83,45,.72); border-color:rgba(34,197,94,.28); color:#bbf7d0; } html[data-theme="dark"] .msg-action-chip--warning{ background:rgba(113,63,18,.72); border-color:rgba(234,179,8,.28); color:#fde68a; } html[data-theme="dark"] .msg-action-chip--danger{ background:rgba(127,29,29,.72); border-color:rgba(239,68,68,.28); color:#fecaca; } /* Buckler button edge cleanup: no white inset/empty-looking edges */ .btn-small, button.btn-small, a.btn-small{ background-clip:border-box !important; background-origin:border-box !important; overflow:hidden; box-shadow:0 7px 16px rgba(2,8,23,.055); } .btn-small.primary, .btn-small.danger{ border-color:transparent !important; } .btn-small::before, .btn-small::after{ display:none !important; content:none !important; } html[data-theme="dark"] .btn-small, html[data-theme="dark"] button.btn-small, html[data-theme="dark"] a.btn-small{ background-clip:border-box !important; background-origin:border-box !important; } /* Report totals must not be rendered as one long inline sentence. */ .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 14px !important; clear: both !important; } .buckler-report-amount-cell, .estimate-report-amount, .report-amount-cell, .amount-cell, .kpi-amount { display: block !important; min-width: 0 !important; border: 1px solid rgba(148, 163, 184, .42) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .72) !important; padding: 10px 12px !important; overflow: visible !important; page-break-inside: avoid !important; break-inside: avoid !important; } .buckler-report-amount-label, .report-amount-label, .amount-label { display: block !important; font-size: 13px !important; line-height: 1.25 !important; color: #64748b !important; margin: 0 0 4px !important; white-space: normal !important; } .buckler-report-amount-value, .report-amount-value, .amount-value { display: block !important; font-size: 18px !important; line-height: 1.15 !important; font-weight: 800 !important; color: #0f172a !important; white-space: nowrap !important; } .report-hero, .estimate-report-hero, .buckler-report-hero, .hero-card, .report-header-card, .audit-hero { height: auto !important; min-height: 238px !important; overflow: visible !important; align-items: start !important; } .report-hero *, .estimate-report-hero *, .buckler-report-hero *, .hero-card *, .report-header-card *, .audit-hero * { overflow-wrap: anywhere; } @media print { .report-hero, .estimate-report-hero, .buckler-report-hero, .hero-card, .report-header-card, .audit-hero { min-height: 250px !important; padding-bottom: 22px !important; page-break-inside: avoid !important; break-inside: avoid !important; } .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { grid-template-columns: repeat(4, minmax(105px, 1fr)) !important; } } /* V8: first PDF page header and amount summary. Designed for print/PDF. */ .buckler-pdf-layout-v8-hero, .report-hero.buckler-pdf-layout-v8-hero, .estimate-report-hero.buckler-pdf-layout-v8-hero, .buckler-report-hero.buckler-pdf-layout-v8-hero, .hero-card.buckler-pdf-layout-v8-hero, .report-header-card.buckler-pdf-layout-v8-hero, .audit-hero.buckler-pdf-layout-v8-hero { height: auto !important; min-height: 330px !important; overflow: visible !important; align-items: start !important; align-content: start !important; row-gap: 14px !important; padding-top: 28px !important; padding-bottom: 28px !important; box-sizing: border-box !important; } .buckler-pdf-layout-v8-title { display: block !important; max-width: 560px !important; margin: 0 0 14px !important; padding: 0 !important; font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; white-space: normal !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; } .buckler-pdf-layout-v8-meta { display: block !important; max-width: 600px !important; margin: 4px 0 !important; font-size: 14px !important; line-height: 1.3 !important; color: #475569 !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important; } .buckler-pdf-layout-v8-amount-wrap, .buckler-report-amount-grid-v8, .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { display: grid !important; grid-template-columns: repeat(2, minmax(170px, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 610px !important; margin: 14px 0 0 !important; clear: both !important; white-space: normal !important; overflow: visible !important; } .buckler-report-amount-cell-v8, .buckler-report-amount-cell, .estimate-report-amount, .report-amount-cell, .amount-cell, .kpi-amount { display: block !important; min-width: 0 !important; border: 1px solid rgba(148, 163, 184, .46) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .84) !important; padding: 10px 12px !important; overflow: visible !important; page-break-inside: avoid !important; break-inside: avoid !important; box-sizing: border-box !important; } .buckler-report-amount-label-v8, .buckler-report-amount-label, .report-amount-label, .amount-label { display: block !important; font-size: 12.5px !important; line-height: 1.25 !important; color: #64748b !important; margin: 0 0 4px !important; white-space: normal !important; } .buckler-report-amount-value-v8, .buckler-report-amount-value, .report-amount-value, .amount-value { display: block !important; font-size: 17px !important; line-height: 1.12 !important; font-weight: 800 !important; color: #0f172a !important; white-space: nowrap !important; overflow: visible !important; } .buckler-report-arithmetic-status-v8 { display: block !important; margin-top: 10px !important; max-width: 610px !important; font-size: 14px !important; line-height: 1.32 !important; color: #475569 !important; white-space: normal !important; overflow: visible !important; } .buckler-report-arithmetic-status-v8.is-error{color:#b91c1c !important} .buckler-report-arithmetic-status-v8.is-ok{color:#047857 !important} @media print { .buckler-pdf-layout-v8-hero, .report-hero.buckler-pdf-layout-v8-hero, .estimate-report-hero.buckler-pdf-layout-v8-hero, .buckler-report-hero.buckler-pdf-layout-v8-hero, .hero-card.buckler-pdf-layout-v8-hero, .report-header-card.buckler-pdf-layout-v8-hero, .audit-hero.buckler-pdf-layout-v8-hero { min-height: 350px !important; page-break-inside: avoid !important; break-inside: avoid !important; } .buckler-pdf-layout-v8-title { font-size: 32px !important; } .buckler-pdf-layout-v8-amount-wrap, .buckler-report-amount-grid-v8, .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { grid-template-columns: repeat(2, minmax(165px, 1fr)) !important; } } /* BUCKLER_REPORT_PDF_LAYOUT_FIX_V8 */ /* V8: first PDF page header and amount summary. Designed for print/PDF. */ .buckler-pdf-layout-v8-hero, .report-hero.buckler-pdf-layout-v8-hero, .estimate-report-hero.buckler-pdf-layout-v8-hero, .buckler-report-hero.buckler-pdf-layout-v8-hero, .hero-card.buckler-pdf-layout-v8-hero, .report-header-card.buckler-pdf-layout-v8-hero, .audit-hero.buckler-pdf-layout-v8-hero { height: auto !important; min-height: 330px !important; overflow: visible !important; align-items: start !important; align-content: start !important; row-gap: 14px !important; padding-top: 28px !important; padding-bottom: 28px !important; box-sizing: border-box !important; } .buckler-pdf-layout-v8-title { display: block !important; max-width: 560px !important; margin: 0 0 14px !important; padding: 0 !important; font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; white-space: normal !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; } .buckler-pdf-layout-v8-meta { display: block !important; max-width: 600px !important; margin: 4px 0 !important; font-size: 14px !important; line-height: 1.3 !important; color: #475569 !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important; } .buckler-pdf-layout-v8-amount-wrap, .buckler-report-amount-grid-v8, .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { display: grid !important; grid-template-columns: repeat(2, minmax(170px, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 610px !important; margin: 14px 0 0 !important; clear: both !important; white-space: normal !important; overflow: visible !important; } .buckler-report-amount-cell-v8, .buckler-report-amount-cell, .estimate-report-amount, .report-amount-cell, .amount-cell, .kpi-amount { display: block !important; min-width: 0 !important; border: 1px solid rgba(148, 163, 184, .46) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .84) !important; padding: 10px 12px !important; overflow: visible !important; page-break-inside: avoid !important; break-inside: avoid !important; box-sizing: border-box !important; } .buckler-report-amount-label-v8, .buckler-report-amount-label, .report-amount-label, .amount-label { display: block !important; font-size: 12.5px !important; line-height: 1.25 !important; color: #64748b !important; margin: 0 0 4px !important; white-space: normal !important; } .buckler-report-amount-value-v8, .buckler-report-amount-value, .report-amount-value, .amount-value { display: block !important; font-size: 17px !important; line-height: 1.12 !important; font-weight: 800 !important; color: #0f172a !important; white-space: nowrap !important; overflow: visible !important; } .buckler-report-arithmetic-status-v8 { display: block !important; margin-top: 10px !important; max-width: 610px !important; font-size: 14px !important; line-height: 1.32 !important; color: #475569 !important; white-space: normal !important; overflow: visible !important; } .buckler-report-arithmetic-status-v8.is-error{color:#b91c1c !important} .buckler-report-arithmetic-status-v8.is-ok{color:#047857 !important} @media print { .buckler-pdf-layout-v8-hero, .report-hero.buckler-pdf-layout-v8-hero, .estimate-report-hero.buckler-pdf-layout-v8-hero, .buckler-report-hero.buckler-pdf-layout-v8-hero, .hero-card.buckler-pdf-layout-v8-hero, .report-header-card.buckler-pdf-layout-v8-hero, .audit-hero.buckler-pdf-layout-v8-hero { min-height: 350px !important; page-break-inside: avoid !important; break-inside: avoid !important; } .buckler-pdf-layout-v8-title { font-size: 32px !important; } .buckler-pdf-layout-v8-amount-wrap, .buckler-report-amount-grid-v8, .buckler-report-amount-grid, .estimate-report-amount-grid, .report-amount-grid, .arithmetic-kpis, .amount-kpis, .summary-amounts, .hero-amounts { grid-template-columns: repeat(2, minmax(165px, 1fr)) !important; } } /* Buckler legal links / notes */ .buckler-legal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .buckler-legal-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid rgba(13,42,63,.12);background:rgba(248,250,252,.96);color:#0f172a;text-decoration:none;font-weight:800;box-shadow:0 10px 24px rgba(15,23,42,.04);transition:.16s ease} .buckler-legal-links a:hover{transform:translateY(-1px);border-color:rgba(14,165,198,.28);background:#fff} .buckler-legal-note{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(13,42,63,.08);background:rgba(248,250,252,.94);color:#475569;font-size:13.5px;line-height:1.6} .buckler-legal-note a{font-weight:800} html[data-theme="dark"] .buckler-legal-links a{background:rgba(22,31,41,.98);border-color:rgba(84,101,120,.34);color:#e6edf3;box-shadow:0 14px 28px rgba(0,0,0,.20)} html[data-theme="dark"] .buckler-legal-links a:hover{background:rgba(28,39,51,.98);border-color:rgba(56,189,248,.28)} html[data-theme="dark"] .buckler-legal-note{background:rgba(18,27,36,.96);border-color:rgba(84,101,120,.32);color:#c8d6df} /* ===================================================================== BUCKLER CABINETS · VISUAL REFRESH 2026-07-07 Единый light SaaS/CRM-слой для кабинетов клиента и мастера, профиля и отзывов — в стиле обновлённого «Пульта управления ремонтом». Только внешний вид: HTML-структура, id, data-*, onclick, href и JS/API не затрагиваются. Слой переопределяет существующие классы (.btn-small, .card, .page-title, .kpi, .badge, .side …) и добавляет систему .buckler-btn / .buckler-card / .buckler-pill и т.д. Область действия: .client-cabinet-page, .master-cabinet-page, .master-public-page (профиль/отзывы мастера). ===================================================================== */ :root{ --bk-blue:#0b63f6; --bk-blue-strong:#0a58e0; --bk-blue-press:#0949bd; --bk-navy:#0b2f4a; --bk-blue-soft:#eef4ff; --bk-blue-softer:#f5f8ff; --bk-page:#f6f8fb; --bk-line:rgba(15,23,42,.10); --bk-line-soft:rgba(15,23,42,.07); --bk-ink:#0f172a; --bk-muted:#64748b; --bk-card-shadow:0 12px 30px rgba(11,47,74,.07); --bk-card-radius:20px; } /* ---- Светлый фон страницы вместо тёмного градиента ---- */ body.search-page.client-cabinet-page, body.search-page.master-cabinet-page, body.search-page.master-public-page{ background: radial-gradient(1100px 520px at 8% -4%, rgba(11,99,246,.06), rgba(11,99,246,0) 60%), radial-gradient(900px 560px at 96% 0%, rgba(11,99,246,.05), rgba(11,99,246,0) 58%), var(--bk-page); } /* Заголовки на светлом фоне снова тёмные и крупнее (были белыми под тёмный фон) */ body.search-page.client-cabinet-page .page-head .page-title h1, body.search-page.master-cabinet-page .page-head .page-title h1, body.search-page.master-public-page .page-head .page-title h1{color:var(--bk-navy)} body.search-page.client-cabinet-page .page-head .page-title p, body.search-page.master-cabinet-page .page-head .page-title p, body.search-page.master-public-page .page-head .page-title p{color:var(--bk-muted)} .client-cabinet-page .page-title h1, .master-cabinet-page .page-title h1, .master-public-page .page-title h1{ font-size:40px; line-height:1.04; font-weight:1000; letter-spacing:-.015em; } .client-cabinet-page .page-title p, .master-cabinet-page .page-title p, .master-public-page .page-title p{ font-size:15.5px; line-height:1.6; font-weight:600; } @media (max-width:720px){ .client-cabinet-page .page-title h1, .master-cabinet-page .page-title h1, .master-public-page .page-title h1{font-size:30px} } /* ===================================================================== Единая кнопочная система — переопределяем .btn-small на blue-стиль пульта. PRIMARY (синяя заливка) · SECONDARY/outline (по умолчанию) · GHOST · DANGER. ===================================================================== */ .client-cabinet-page .btn-small, .master-cabinet-page .btn-small, .master-public-page .btn-small{ min-height:44px; padding:0 18px; gap:8px; border-radius:14px; border:1.5px solid var(--bk-blue); background:#fff; color:var(--bk-blue); font-weight:800; font-size:14px; letter-spacing:0; box-shadow:0 1px 2px rgba(11,47,74,.04); transition:.16s background,.16s color,.16s border-color,.16s box-shadow,.16s transform; } .client-cabinet-page .btn-small:hover, .master-cabinet-page .btn-small:hover, .master-public-page .btn-small:hover{ background:var(--bk-blue-soft); border-color:var(--bk-blue); color:var(--bk-blue-strong); transform:none; box-shadow:0 6px 16px rgba(11,99,246,.12); } .client-cabinet-page .btn-small:active, .master-cabinet-page .btn-small:active, .master-public-page .btn-small:active{background:var(--bk-blue-softer);transform:translateY(1px)} .client-cabinet-page .btn-small svg, .master-cabinet-page .btn-small svg, .master-public-page .btn-small svg{width:17px;height:17px;flex:0 0 auto} /* PRIMARY — насыщенный синий, белый текст */ .client-cabinet-page .btn-small.primary, .master-cabinet-page .btn-small.primary, .master-public-page .btn-small.primary, .client-cabinet-page .mc-btn.primary, .master-cabinet-page .mc-btn.primary{ border-color:var(--bk-blue); background:var(--bk-blue); color:#fff; box-shadow:0 10px 22px rgba(11,99,246,.22); } .client-cabinet-page .btn-small.primary:hover, .master-cabinet-page .btn-small.primary:hover, .master-public-page .btn-small.primary:hover, .client-cabinet-page .mc-btn.primary:hover, .master-cabinet-page .mc-btn.primary:hover{ background:var(--bk-blue-strong); border-color:var(--bk-blue-strong); color:#fff; box-shadow:0 14px 26px rgba(11,99,246,.28); } .client-cabinet-page .btn-small.primary:active, .master-cabinet-page .btn-small.primary:active, .master-public-page .btn-small.primary:active{background:var(--bk-blue-press);border-color:var(--bk-blue-press)} /* SOFT/SUCCESS → мягкий синий вторичный (единый вид) */ .client-cabinet-page .btn-small.soft, .master-cabinet-page .btn-small.soft, .master-public-page .btn-small.soft{ border-color:transparent; background:var(--bk-blue-soft); color:var(--bk-blue-strong); box-shadow:none; } .client-cabinet-page .btn-small.soft:hover, .master-cabinet-page .btn-small.soft:hover, .master-public-page .btn-small.soft:hover{background:#e3edff;color:var(--bk-blue-press)} .client-cabinet-page .btn-small.success, .master-cabinet-page .btn-small.success, .master-public-page .btn-small.success{ border-color:rgba(11,183,131,.4); background:rgba(11,183,131,.10); color:#047857; box-shadow:none; } /* GHOST — текстовая кнопка */ .client-cabinet-page .btn-small.ghost, .master-cabinet-page .btn-small.ghost, .master-public-page .btn-small.ghost{ border-color:transparent; background:transparent; color:var(--bk-blue); box-shadow:none; } .client-cabinet-page .btn-small.ghost:hover, .master-cabinet-page .btn-small.ghost:hover, .master-public-page .btn-small.ghost:hover{background:var(--bk-blue-soft);color:var(--bk-blue-strong);box-shadow:none} /* DANGER — сдержанный, не доминирующий */ .client-cabinet-page .btn-small.danger, .master-cabinet-page .btn-small.danger, .master-public-page .btn-small.danger{ border-color:rgba(239,68,68,.34); background:#fff; color:#dc2626; box-shadow:none; } .client-cabinet-page .btn-small.danger:hover, .master-cabinet-page .btn-small.danger:hover, .master-public-page .btn-small.danger:hover{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.5);color:#b91c1c;box-shadow:0 8px 18px rgba(239,68,68,.12)} /* Явная библиотека компонентов (task 5) — можно использовать точечно */ .buckler-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 18px;border-radius:14px; border:1.5px solid var(--bk-blue);background:#fff;color:var(--bk-blue); font-weight:800;font-size:14px;cursor:pointer; transition:.16s background,.16s color,.16s border-color,.16s box-shadow; } .buckler-btn--primary{background:var(--bk-blue);border-color:var(--bk-blue);color:#fff;box-shadow:0 10px 22px rgba(11,99,246,.22)} .buckler-btn--primary:hover{background:var(--bk-blue-strong);border-color:var(--bk-blue-strong)} .buckler-btn--secondary:hover{background:var(--bk-blue-soft)} .buckler-btn--ghost{border-color:transparent;background:transparent} .buckler-btn--ghost:hover{background:var(--bk-blue-soft)} .buckler-btn:disabled,.buckler-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none} /* ===================================================================== Карточки, KPI, badges, навигация, пустые состояния ===================================================================== */ .client-cabinet-page .card, .master-cabinet-page .card, .master-public-page .card, .buckler-card{ border:1px solid var(--bk-line-soft); border-radius:var(--bk-card-radius); box-shadow:var(--bk-card-shadow); padding:20px; } .client-cabinet-page .card h3, .master-cabinet-page .card h3, .master-public-page .card h3{font-size:17px;font-weight:900;color:var(--bk-navy)} /* KPI/summary карточки */ .client-cabinet-page .kpi, .master-cabinet-page .kpi, .master-public-page .kpi, .buckler-kpi{ border:1px solid var(--bk-line-soft); border-radius:16px; box-shadow:var(--bk-card-shadow); padding:16px; } .client-cabinet-page .kpi .v, .master-cabinet-page .kpi .v, .master-public-page .kpi .v{font-size:26px;color:var(--bk-navy)} .client-cabinet-page .kpi .k, .master-cabinet-page .kpi .k, .master-public-page .kpi .k{font-weight:700} /* Pill-бейджи статусов — единый мягкий вид */ .client-cabinet-page .badge, .master-cabinet-page .badge, .master-public-page .badge, .buckler-pill{ padding:7px 12px; border-radius:999px; font-weight:800; font-size:13.5px; border:1px solid var(--bk-line); background:#fff; color:var(--bk-navy); } .client-cabinet-page .badge.blue, .master-cabinet-page .badge.blue, .master-public-page .badge.blue{border-color:rgba(11,99,246,.28);background:var(--bk-blue-soft);color:var(--bk-blue-strong)} .client-cabinet-page .badge.green, .master-cabinet-page .badge.green, .master-public-page .badge.green{border-color:rgba(11,183,131,.3);background:rgba(11,183,131,.10);color:#047857} .client-cabinet-page .badge.orange, .master-cabinet-page .badge.orange, .master-public-page .badge.orange{border-color:rgba(249,115,22,.32);background:rgba(249,115,22,.10);color:#c2410c} .client-cabinet-page .badge.red, .master-cabinet-page .badge.red, .master-public-page .badge.red{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.09);color:#dc2626} /* Навигация в сайдбаре — активный пункт синий */ .client-cabinet-page .side a.active, .master-cabinet-page .side a.active{ background:var(--bk-blue-soft); color:var(--bk-blue-strong); border-color:transparent; } .client-cabinet-page .side a.active .nav-ico, .master-cabinet-page .side a.active .nav-ico{background:var(--bk-blue);color:#fff} .client-cabinet-page .side a:hover, .master-cabinet-page .side a:hover{background:var(--bk-blue-softer)} /* Пустые состояния — аккуратная пунктирная карточка */ .buckler-empty, .client-cabinet-page .rev-empty, .master-public-page .rev-empty, .master-cabinet-page .portfolio-service-empty, .master-public-page .works-empty{ padding:22px; border:1px dashed var(--bk-line); border-radius:16px; background:var(--bk-blue-softer); color:var(--bk-muted); font-size:13.5px; line-height:1.6; text-align:center; } /* Toolbar-обёртка для группировки CTA */ .buckler-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px} /* ===================================================================== Тёмная тема — приглушаем, но сохраняем синий акцент ===================================================================== */ html[data-theme="dark"] body.search-page.client-cabinet-page, html[data-theme="dark"] body.search-page.master-cabinet-page, html[data-theme="dark"] body.search-page.master-public-page{ background:linear-gradient(180deg,#0f1720 0%,#0b1119 100%); } html[data-theme="dark"] .client-cabinet-page .page-title h1, html[data-theme="dark"] .master-cabinet-page .page-title h1, html[data-theme="dark"] .master-public-page .page-title h1{color:#e8eef6} html[data-theme="dark"] .client-cabinet-page .btn-small, html[data-theme="dark"] .master-cabinet-page .btn-small, html[data-theme="dark"] .master-public-page .btn-small{ background:#141d28;border-color:rgba(96,165,250,.5);color:#8ab6ff; } html[data-theme="dark"] .client-cabinet-page .btn-small.primary, html[data-theme="dark"] .master-cabinet-page .btn-small.primary, html[data-theme="dark"] .master-public-page .btn-small.primary{background:var(--bk-blue);border-color:var(--bk-blue);color:#fff} html[data-theme="dark"] .client-cabinet-page .btn-small.ghost, html[data-theme="dark"] .master-cabinet-page .btn-small.ghost, html[data-theme="dark"] .master-public-page .btn-small.ghost{background:transparent;color:#8ab6ff} html[data-theme="dark"] .client-cabinet-page .side a.active, html[data-theme="dark"] .master-cabinet-page .side a.active{background:rgba(59,130,246,.16);color:#bad6ff} /* ---- master-profile: .mc-btn в синей системе (кроме избранного) ---- */ .master-public-page .mc-btn{min-height:44px;border-radius:14px;font-size:14px} .master-public-page .mc-btn.primary{ background:var(--bk-blue);color:#fff;border-color:var(--bk-blue); box-shadow:0 10px 22px rgba(11,99,246,.22); } .master-public-page .mc-btn.primary:hover{background:var(--bk-blue-strong);border-color:var(--bk-blue-strong);transform:none;box-shadow:0 14px 26px rgba(11,99,246,.28)} .master-public-page .mc-btn.secondary{ background:#fff;border:1.5px solid var(--bk-blue);color:var(--bk-blue); } .master-public-page .mc-btn.secondary:hover{background:var(--bk-blue-soft);color:var(--bk-blue-strong)} html[data-theme="dark"] .master-public-page .mc-btn.secondary{background:#141d28;border-color:rgba(96,165,250,.5);color:#8ab6ff} /* избранное (розовое) не трогаем — оно семантически отдельное */ /* ============================================================================ BLOG BUTTONS = стиль кнопки «Найти подрядчика» с главной (.btn-main) — 20260709 Точечная унификация: ВСЕ кнопки на странице /blog и внутри каждой статьи — в контенте («Читать статью», «Найти подрядчика», «Проверить смету») и в нижнем блоке страниц блога («На главную», «Все статьи», …) — получают визуал эталонной кнопки .btn-main с index.html. Значения скопированы из эталона 1:1 (эталон живёт во встроенных стилях главной, поэтому один раз продублирован здесь — в общем файле, который подключают все страницы блога, включая будущие статьи той же системы рендера). Селектор ограничен body.blog-page (main и footer.footer): общая шапка сайта («На главную», «Войти» вверху) уже совпадает с шапкой главной страницы и остаётся без изменений, как и кнопки во всплывающих виджетах вне main/footer. Точечные !important нужны только там, где глобальные правила этого файла сами стоят с !important (border-color:transparent у .primary, запрет ::before у .btn-small, background-clip) — иначе эталонный вид не собрать. Состояния active/focus/disabled у эталона отдельно не заданы — поэтому и здесь не добавляются (полное соответствие источнику истины). Структура, тексты и ссылки страниц блога не менялись — правка только в CSS. ========================================================================= */ .blog-page main .btn-small, .blog-page footer.footer .btn-small{ display:inline-flex;align-items:center;justify-content:center; padding:14px 24px;min-height:54px;border-radius:10px; border:1px solid rgba(12,67,99,.88); border-color:rgba(12,67,99,.88) !important; background-color:#0D2A3F; background-image:linear-gradient(180deg,#0F4D74 0%, #0D2A3F 100%); color:#fff;font-size:15px;font-weight:700;letter-spacing:normal; cursor:pointer;text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 28px rgba(14,165,198,.18); transition:.16s transform,.16s box-shadow,.16s border-color; position:relative;z-index:3;white-space:nowrap; isolation:isolate;overflow:hidden;transform:translateZ(0); background-clip:padding-box !important; background-origin:padding-box !important; } .blog-page main .btn-small::before, .blog-page footer.footer .btn-small::before{ content:"" !important; display:block !important; position:absolute; left:50%;top:50%; width:86%;height:62%; transform:translate(-50%,-50%); border-radius:999px; background:radial-gradient(circle, rgba(14,165,198,.48) 0%, rgba(14,165,198,.18) 48%, rgba(14,165,198,0) 76%); filter:blur(16px); z-index:-1; pointer-events:none; } .blog-page main .btn-small:hover, .blog-page footer.footer .btn-small:hover{ transform:translateY(-1px); box-shadow:0 18px 34px rgba(13,42,63,.18); border-color:rgba(12,67,99,.88) !important; background-color:#0D2A3F; background-image:linear-gradient(180deg,#0F4D74 0%, #0D2A3F 100%); color:#fff; } .blog-page main .btn-small:hover::before, .blog-page footer.footer .btn-small:hover::before{ background:radial-gradient(circle, rgba(14,165,198,.52) 0%, rgba(14,165,198,.20) 50%, rgba(14,165,198,0) 78%); } /* Тёмная тема: эталонная .btn-main на главной в тёмной теме не переопределяется — сохраняем тот же тёмно-синий вид и в блоге (перекрывает общие dark-правила .btn-small). */ html[data-theme="dark"] .blog-page main .btn-small, html[data-theme="dark"] .blog-page main a.btn-small, html[data-theme="dark"] .blog-page main button.btn-small, html[data-theme="dark"] .blog-page footer.footer .btn-small, html[data-theme="dark"] .blog-page footer.footer a.btn-small{ border:1px solid rgba(12,67,99,.88); border-color:rgba(12,67,99,.88) !important; background-color:#0D2A3F; background-image:linear-gradient(180deg,#0F4D74 0%, #0D2A3F 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 28px rgba(14,165,198,.18); background-clip:padding-box !important; background-origin:padding-box !important; } html[data-theme="dark"] .blog-page main .btn-small:hover, html[data-theme="dark"] .blog-page footer.footer .btn-small:hover{ border-color:rgba(12,67,99,.88) !important; background-image:linear-gradient(180deg,#0F4D74 0%, #0D2A3F 100%); color:#fff; box-shadow:0 18px 34px rgba(13,42,63,.18); } /* Мобильное поведение эталона (index.html, ≤820px): кнопка на всю ширину. */ @media (max-width: 820px){ .blog-page main .btn-small, .blog-page footer.footer .btn-small{ width:100%;margin:0;min-height:60px;padding:18px 20px; font-size:16px;border-radius:16px;line-height:1.22;white-space:normal; } } /* BUCKLER MASTER REVIEW BUTTON STYLE */ .buckler-review-write-style { width: 100% !important; min-height: 58px !important; padding: 16px 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; border: 0 !important; border-radius: 24px !important; background: linear-gradient( 180deg, #1d6cf5 0%, #1461ed 100% ) !important; color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 10px 24px rgba(20, 97, 237, 0.24) !important; cursor: pointer !important; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important; } .buckler-review-write-style:hover { background: linear-gradient( 180deg, #1765ec 0%, #0e58df 100% ) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(20, 97, 237, 0.3) !important; } .buckler-review-write-style:active { transform: translateY(0); box-shadow: 0 7px 17px rgba(20, 97, 237, 0.23) !important; } .buckler-review-write-style:focus-visible { outline: 3px solid rgba(29, 108, 245, 0.3) !important; outline-offset: 3px !important; } .buckler-review-write-style svg { width: 22px !important; height: 22px !important; color: currentColor !important; stroke: currentColor !important; flex: 0 0 auto !important; } @media (max-width: 640px) { .buckler-review-write-style { min-height: 54px !important; padding: 14px 20px !important; border-radius: 22px !important; font-size: 17px !important; } } /* END BUCKLER MASTER REVIEW BUTTON STYLE */ /* BUCKLER REVIEW BUTTON COMPACT OVERRIDE */ .buckler-review-write-style { min-height: 50px !important; padding: 12px 20px !important; gap: 9px !important; border-radius: 20px !important; font-size: 17px !important; box-shadow: 0 8px 20px rgba(20, 97, 237, 0.22) !important; } .buckler-review-write-style:hover { box-shadow: 0 11px 25px rgba(20, 97, 237, 0.28) !important; } /* Более яркая иконка комментария */ .buckler-review-write-style svg { width: 20px !important; height: 20px !important; color: #ffffff !important; stroke: #ffffff !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.55)) !important; } .buckler-review-write-style svg path, .buckler-review-write-style svg circle, .buckler-review-write-style svg line, .buckler-review-write-style svg polyline { stroke: #ffffff !important; opacity: 1 !important; } @media (max-width: 640px) { .buckler-review-write-style { min-height: 48px !important; padding: 11px 18px !important; border-radius: 19px !important; font-size: 16px !important; } .buckler-review-write-style svg { width: 19px !important; height: 19px !important; } } /* END BUCKLER REVIEW BUTTON COMPACT OVERRIDE */ /* BUCKLER REVIEW SUBMIT BUTTON */ .buckler-review-submit-style { justify-content: center !important; } .buckler-review-submit-style svg, .buckler-review-submit-style img, .buckler-review-submit-style i, .buckler-review-submit-style [class*="icon"] { display: none !important; } /* END BUCKLER REVIEW SUBMIT BUTTON */ /* BUCKLER REVIEW MODAL SINGLE ACTION */ .buckler-review-submit-style { width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .buckler-review-submit-style:only-child { width: 100% !important; max-width: none !important; } /* END BUCKLER REVIEW MODAL SINGLE ACTION */ /* ===================================================================== */ /* BUCKLER ROLE MODAL 20260724 */ /* Окно выбора роли «Я клиент / Я подрядчик». Открывается только после */ /* успешного прохождения капчи (см. register-client.html). */ /* Оформление повторяет окно выбора услуги (.bsm-*) с главной страницы. */ /* ===================================================================== */ #bucklerRoleModal[hidden]{display:none !important} .brm-overlay{ position:fixed;inset:0;z-index:4200; display:flex;align-items:center;justify-content:center; padding:24px 16px; background:rgba(4,14,26,.55); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:0;pointer-events:none; transition:opacity .22s ease; } .brm-overlay.is-open{opacity:1;pointer-events:auto} body.brm-lock{overflow:hidden} .brm-dialog{ position:relative; width:min(860px,100%); max-height:min(92dvh,860px); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:38px 40px 40px; border-radius:28px; background:#fff; border:1px solid rgba(13,42,63,.08); box-shadow:0 40px 110px rgba(4,14,26,.4); transform:translateY(14px) scale(.985); transition:transform .22s ease; } .brm-overlay.is-open .brm-dialog{transform:translateY(0) scale(1)} .brm-close{ position:absolute;top:18px;right:18px;z-index:2; width:42px;height:42px;border-radius:999px; border:1px solid rgba(13,42,63,.12); background:#fff; color:#33475C;font-size:16px;font-weight:800;line-height:1; display:grid;place-items:center;cursor:pointer; transition:.16s; } .brm-close:hover{border-color:rgba(11,126,166,.35);color:#0F4D74;transform:rotate(90deg)} .brm-close:focus-visible{outline:3px solid rgba(15,90,169,.5);outline-offset:2px} .brm-kicker{ display:inline-flex;align-items:center; min-height:34px;padding:7px 16px;border-radius:999px; background:rgba(14,120,198,.10); color:#0F5AA9;font-size:13.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase; } .brm-title{ margin:14px 0 0; font-size:clamp(24px,3vw,34px); line-height:1.06;letter-spacing:-.032em;font-weight:900; color:#0B1B29; } .brm-sub{margin:12px 0 0;color:#54677C;font-size:15.5px;line-height:1.55;max-width:62ch} .brm-grid{ margin-top:26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .brm-card{ display:flex;flex-direction:column;align-items:flex-start;gap:10px; padding:22px 22px 20px; border-radius:18px; border:1px solid rgba(13,42,63,.12); background:#fff; text-align:left; text-decoration:none; font:inherit; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .brm-card:active{transform:translateY(-1px) scale(.995)} .brm-card:hover, .brm-card:focus-visible{ background:#EFF8FE; border-color:rgba(15,90,169,.45); box-shadow:0 16px 38px rgba(10,68,120,.14); transform:translateY(-3px); outline:none; } .brm-card:focus-visible{outline:3px solid rgba(15,90,169,.55);outline-offset:2px} .brm-card[disabled]{opacity:.7;pointer-events:none} .brm-ico{ width:52px;height:52px;border-radius:15px; display:grid;place-items:center; background:linear-gradient(180deg,#123B63,#0B2B4C); color:#fff; box-shadow:0 10px 22px rgba(9,38,66,.28); } .brm-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .brm-card-title{margin-top:4px;font-size:18px;font-weight:900;letter-spacing:-.02em;color:#0B1B29} .brm-card-text{font-size:14px;line-height:1.5;color:#54677C} .brm-card-go{ margin-top:auto;padding-top:8px; display:inline-flex;align-items:center;gap:8px; color:#0F5AA9;font-size:14.5px;font-weight:800; } .brm-card-go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease} .brm-card:hover .brm-card-go svg{transform:translateX(4px)} @media (max-width:860px){ .brm-dialog{padding:30px 26px 30px} } @media (max-width:640px){ .brm-overlay{padding:0;align-items:flex-end} .brm-dialog{ width:100%; max-height:calc(100dvh - 36px); border-radius:26px 26px 0 0; padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(26px); } .brm-grid{grid-template-columns:1fr;gap:12px} .brm-title{font-size:23px} .brm-card{padding:18px 16px 16px} .brm-close{top:14px;right:14px;width:40px;height:40px} } html[data-theme="dark"] .brm-dialog{ background:linear-gradient(180deg,rgba(18,27,36,.99),rgba(12,19,29,1)); border-color:rgba(84,101,120,.32); } html[data-theme="dark"] .brm-title, html[data-theme="dark"] .brm-card-title{color:#F5F9FC} html[data-theme="dark"] .brm-sub, html[data-theme="dark"] .brm-card-text{color:#C6D4E2} html[data-theme="dark"] .brm-kicker{background:rgba(56,144,214,.16);color:#9FD1F5} html[data-theme="dark"] .brm-card{background:rgba(15,23,42,.6);border-color:rgba(84,101,120,.34)} html[data-theme="dark"] .brm-card:hover, html[data-theme="dark"] .brm-card:focus-visible{background:rgba(21,50,84,.55);border-color:rgba(96,170,228,.55)} html[data-theme="dark"] .brm-close{background:rgba(15,23,42,.72);border-color:rgba(84,101,120,.34);color:#E6EEF6} html[data-theme="dark"] .brm-card-go{color:#7FC0F0} /* BUCKLER ROLE MODAL 20260724 END */