/* ======================================================= QURVEY CABINET — ULTRA CLEAN PREMIUM (GLASS 2025) ======================================================= */ .qc-wrap { display: flex; min-height: 80vh; max-width: 1300px; margin: 50px auto; background: #ffffff; border-radius: 18px; overflow: hidden; font-family: "Montserrat", sans-serif; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); border: 1px solid #e6e6e6; } /* ==== SIDEBAR ==== */ .qc-sidebar { width: 280px; background: linear-gradient(180deg, rgba(0, 87, 183, 0.85), rgba(0, 72, 158, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; padding: 35px 25px; display: flex; flex-direction: column; gap: 25px; box-shadow: inset -1px 0 8px rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.1); } .qc-title { font-family: "Orbitron", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* ==== MENU ==== */ .qc-menu { display: flex; flex-direction: column; gap: 12px; } .qc-link { background: rgba(255, 255, 255, 0.1); border: 1px solid transparent; color: #ffffff; padding: 12px 16px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .qc-link:hover { background: rgba(255, 255, 255, 0.25); transform: translateX(3px); } /* ==== ACTIVE ITEM ==== */ .qc-link.is-active { background: #ffffff; color: #0057b7; font-weight: 600; border-left: 4px solid #0057b7; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.15); transform: none; } /* ==== CONTENT ==== */ .qc-content { flex: 1; padding: 50px 70px; background: var(--bg-elev); border-left: 2px solid rgba(0, 87, 183, 0.2); } .qc-panel { display: none; opacity: 0; transition: opacity 0.3s ease; } .qc-panel.is-active { display: block; opacity: 1; } .qc-panel h3 { color: #0057b7; font-family: "Orbitron", sans-serif; font-size: 22px; margin-bottom: 10px; } .qc-panel p { color: #333; line-height: 1.6; font-size: 15px; } /* ==== PROJECT CARDS ==== */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; margin-top: 25px; } .project-card { background: #ffffff; border-radius: 14px; border: 1px solid #e2e2e2; padding: 22px 24px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); transition: all 0.25s ease; cursor: pointer; position: relative; } .project-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 87, 183, 0.15); } .project-card h4 { color: #0057b7; font-family: "Orbitron", sans-serif; font-size: 17px; margin-bottom: 8px; } .project-card p { color: #444; font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .project-card .status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: rgba(0, 87, 183, 0.1); color: #0057b7; letter-spacing: 0.3px; } .project-card.completed .status { background: rgba(25, 135, 84, 0.12); color: #157347; } .project-card.archived .status { background: rgba(108, 117, 125, 0.12); color: #6c757d; } /* ======================================================= PROJECT DASHBOARD MODAL — GLASS & PREMIUM STYLE 2025 ======================================================= */ .qc-dashboard-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 20, 40, 0.55); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); justify-content: center; align-items: center; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; } .qc-dashboard-overlay.active { display: flex; opacity: 1; animation: fadeIn 0.35s ease; } .qc-dashboard { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px) saturate(200%); -webkit-backdrop-filter: blur(12px) saturate(200%); border-radius: 20px; padding: 40px 45px; width: 100%; max-width: 560px; position: relative; text-align: left; animation: scaleIn 0.3s ease; border-top: 4px solid #0057b7; box-shadow: 0 8px 32px rgba(0, 87, 183, 0.25), 0 2px 10px rgba(255, 255, 255, 0.15) inset; } .qc-dashboard::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(0, 87, 183, 0.1)); pointer-events: none; mix-blend-mode: overlay; } .qc-dashboard h3 { font-family: "Orbitron", sans-serif; color: #0057b7; font-size: 22px; margin-bottom: 25px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .qc-dashboard-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 28px; color: #444; cursor: pointer; transition: transform 0.25s ease, color 0.25s ease; } .qc-dashboard-close:hover { color: #000; transform: scale(1.1); } .dash-grid { display: grid; gap: 12px; margin-bottom: 25px; } .dash-item { font-size: 15px; color: #222; background: rgba(255, 255, 255, 0.4); padding: 8px 10px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset; } .dash-item strong { color: #0057b7; } .dash-chart { text-align: center; background: rgba(245, 247, 255, 0.7); border-radius: 12px; padding: 18px; font-style: italic; color: #555; border: 1px solid rgba(0, 87, 183, 0.15); box-shadow: inset 0 2px 8px rgba(0, 87, 183, 0.08); } /* ==== ANIMATIONS ==== */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ==== RESPONSIVE ==== */ @media (max-width: 768px) { .qc-wrap { flex-direction: column; margin: 20px; border-radius: 12px; } .qc-sidebar { width: 100%; flex-direction: row; justify-content: space-around; padding: 15px 10px; border-radius: 12px 12px 0 0; } .qc-link { flex: 1; text-align: center; } .qc-content { padding: 25px; border-left: none; border-top: 2px solid rgba(0, 87, 183, 0.25); } .qc-dashboard { width: 90%; padding: 30px; } } .btn-primary { background: linear-gradient(90deg, #0057b7, #00449c); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-primary:hover { background: linear-gradient(90deg, #00449c, #003a8a); transform: translateY(-1px); } /* ======================================================= QURVEY — SURVEYS PANEL + ACTION BUTTONS (GLASS 2025) ======================================================= */ /* === Create New Survey Section === */ .survey-editor { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 87, 183, 0.15); border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 87, 183, 0.08); padding: 20px 24px 24px 24px; margin: 20px 0 25px 0; backdrop-filter: blur(10px); animation: fadeIn 0.4s ease; } .survey-editor h4 { font-family: "Orbitron", sans-serif; font-size: 20px; margin-bottom: 16px; color: #003b88; letter-spacing: 0.3px; } .survey-input { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1.5px solid rgba(0, 87, 183, 0.25); border-radius: 8px; background: #fff; transition: all 0.25s ease; font-size: 15px; font-family: "Montserrat", sans-serif; } .survey-input:focus { border-color: #0057b7; box-shadow: 0 0 0 3px rgba(0, 87, 183, 0.15); outline: none; } #saveSurveyBtn { display: inline-block; background: linear-gradient(90deg, #0073ff, #0057b7); color: #fff; border: none; font-weight: 600; font-size: 15px; padding: 10px 22px; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.15); } #saveSurveyBtn:hover { background: linear-gradient(90deg, #0057b7, #003a8c); transform: translateY(-1px); } /* === Survey Cards === */ #panel-surveys .project-grid { display: flex; flex-direction: column; /* ✅ Строго вертикально вниз */ gap: 25px; margin-top: 20px; } #panel-surveys .project-card { background: rgba(255, 255, 255, 0.96); border-radius: 16px; border: 1px solid rgba(0, 87, 183, 0.1); box-shadow: 0 4px 18px rgba(0, 87, 183, 0.08); padding: 22px 24px 18px 24px; position: relative; transition: all 0.3s ease; cursor: default; } #panel-surveys .project-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 87, 183, 0.15); } #panel-surveys .project-card h4 { font-family: "Orbitron", sans-serif; font-size: 18px; color: #0045b3; margin-bottom: 8px; } #panel-surveys .project-card p { font-family: "Montserrat", sans-serif; font-size: 14px; color: #333; margin-bottom: 16px; line-height: 1.45; } #panel-surveys .status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(0, 87, 183, 0.08); color: #0045b3; letter-spacing: 0.2px; user-select: none; } /* === Buttons inside survey cards === */ .survey-actions-inline { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; } /* mini glass button */ .qv-btn { border: none; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(8px); color: #0057b7; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 8px rgba(0, 87, 183, 0.08); } .qv-btn:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; transform: translateY(-1px); } /* Delete button (red tone) */ .qv-btn-delete { color: #c70039; background: rgba(255, 0, 0, 0.08); border: 1px solid rgba(255, 0, 0, 0.1); } .qv-btn-delete:hover { background: rgba(255, 0, 0, 0.15); color: #b0002c; } /* Edit button (blue tone) */ .qv-btn-edit { color: #0045b3; background: rgba(0, 87, 183, 0.08); border: 1px solid rgba(0, 87, 183, 0.1); } .qv-btn-edit:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; } /* tooltip effect */ .qv-btn[data-tooltip] { position: relative; } .qv-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #0045b3; color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .qv-btn[data-tooltip]:hover::after { opacity: 1; } /* animation for adding new card */ .project-card.new { animation: fadeIn 0.4s ease; } #panel-surveys p { width: 100%; /* ✅ занимает всю ширину контейнера */ display: block; /* гарантированно блочный элемент */ margin: 10px 0 25px; /* отступы сверху и снизу */ color: #555; /* нейтральный серый цвет */ font-size: 15px; font-family: "Montserrat", sans-serif; } .survey-actions { display: flex; justify-content: flex-start; /* кнопки рядом */ gap: 10px; align-items: center; margin-top: 15px; } /* === CLOSE BUTTON (в стиле Qurvey) === */ #closeSurveyBtn { background: rgba(0, 87, 183, 0.08); color: #0045b3; border: 1.5px solid rgba(0, 87, 183, 0.15); border-radius: 8px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; font-family: "Montserrat", sans-serif; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.05); } #closeSurveyBtn:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; transform: translateY(-1px); } /* === Если хочешь прижать "Close" к правому краю блока === */ .survey-actions.right-aligned { justify-content: space-between; } /* === DELETE SURVEY BUTTON (Qurvey Glass 2025, нижний правый угол) === */ .btn-delete-survey { position: absolute; bottom: 18px; right: 18px; background: rgba(255, 0, 0, 0.08); color: #c70039; border: 1.5px solid rgba(255, 0, 0, 0.12); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; font-family: "Montserrat", sans-serif; backdrop-filter: blur(6px); box-shadow: 0 3px 8px rgba(255, 0, 0, 0.08); } .btn-delete-survey:hover { background: rgba(255, 0, 0, 0.15); color: #b0002c; transform: translateY(-1px); } /* === NO SURVEYS TEXT — Qurvey Glass 2025 Style === */ #no-surveys-text { display: block; width: 100%; margin: 35px 0; padding: 16px 20px; text-align: center; font-family: "Orbitron", sans-serif; font-size: 16px; font-weight: 600; color: #0045b3; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(0, 87, 183, 0.15); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 87, 183, 0.08); letter-spacing: 0.3px; transition: all 0.25s ease; } #no-surveys-text:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 87, 183, 0.12); } .settings-block { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); max-width: 480px; margin-top: 20px; } .settings-block input { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; } .settings-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; text-align: right; } .btn-save { background: #0057b7; color: white; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; } .btn-save:hover { background: #0043a0; } /* === Qurvey Spinner (for all loading buttons) === */ :root { --spinner-dark: rgba(0, 0, 0, 0.7); --spinner-light: rgba(255, 255, 255, 0.9); } .spinner { width: 14px; height: 14px; border: 2px solid transparent; border-radius: 50%; border-top-color: var(--spinner-light); animation: spin 0.6s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; } .btn-light .spinner, .btn-delete-survey .spinner { border-top-color: var(--spinner-dark); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* === Save button appearance === */ #saveProfileBtn { background-color: #0057b7; color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: background-color 1s ease, transform 1s ease; } #saveProfileBtn:hover:not(:disabled) { background-color: #0046a0; transform: translateY(-1px); } #saveProfileBtn:disabled { opacity: 0.75; cursor: not-allowed; } #saveProfileBtn.success { background-color: #28a745 !important; } /* === Qurvey Toast Notification === */ #qc-toast { position: fixed; top: 25px; right: 25px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: rgba(0, 87, 183, 0.9); color: #fff; font-weight: 500; padding: 12px 18px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-20px) scale(0.95); animation: toastIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards; transition: transform 0.3s ease, opacity 0.3s ease; } .toast.success { background: rgba(40, 167, 69, 0.9); } .toast.error { background: rgba(220, 53, 69, 0.9); } @keyframes toastIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } } #qc-toast { position: fixed; top: 25px; right: 25px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; pointer-events: none; } .toast { pointer-events: auto; } /* === Toast Icon & Gradients === */ .toast { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: 0.3px; border-left: 5px solid transparent; } .toast-icon { font-size: 1.1em; } /* Success (green-blue gradient) */ .toast.success { background: linear-gradient(135deg, #28a745, #00b4d8); border-left-color: #00b4d8; } /* Error (red gradient) */ .toast.error { background: linear-gradient(135deg, #dc3545, #b00020); border-left-color: #b00020; } /* Warning (yellow-orange gradient) */ .toast.warning { background: linear-gradient(135deg, #ffc107, #ff9100); color: #000; border-left-color: #ff9100; } /* Info (blue gradient) */ .toast.info { background: linear-gradient(135deg, #007bff, #00b4d8); border-left-color: #007bff; } /* === Qurvey Spinner === */ .btn-loading { position: relative; pointer-events: none; /* disables button clicks */ opacity: 0.8; /* dim effect to show it's busy */ } .btn-loading::after { content: ""; position: absolute; right: 14px; /* spinner position */ top: 50%; width: 16px; height: 16px; border: 2px solid #fff; /* white circle */ border-top-color: transparent; /* invisible top to show motion */ border-radius: 50%; transform: translateY(-50%); animation: spin 0.6s linear infinite; } @keyframes spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } /* === Qurvey Input Validation Styles === */ .input-error { border: 1.5px solid #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); animation: shake 0.2s ease-in-out 0s 2; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .validation-hint { color: #dc3545; font-size: 13px; margin-top: -8px; margin-bottom: 10px; font-family: "Montserrat", sans-serif; display: none; } /* === Qurvey Autosave Indicator === */ .autosave-indicator { position: absolute; right: 12px; top: 12px; font-size: 14px; font-weight: 600; color: #28a745; opacity: 0; transition: opacity 0.3s ease; } .autosave-indicator.active { opacity: 1; } .settings-block { position: relative; } /* === Qurvey Settings Layout Polish (Micro-Step 24) === */ #panel-settings { display: flex; flex-direction: column; gap: 40px; padding-bottom: 40px; } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; } @media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } } .settings-block { background: #ffffff; padding: 28px 30px; border-radius: 18px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .settings-block:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .settings-block label { display: block; font-weight: 600; margin-bottom: 6px; color: #003366; } .settings-block input { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #dcdcdc; border-radius: 10px; font-size: 14px; } .settings-actions { text-align: right; } .btn-save { background: #0057b7; color: white; border: none; padding: 9px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; } .btn-save:hover { background: #003f8a; } .settings-preview-card { flex: 0 0 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 310px; /* same as settings-block */ background: #fff; border-radius: 20px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); padding: 25px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .preview-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #0057b7, #ffd700); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; margin-bottom: 15px; transition: transform 0.3s ease; } .preview-avatar:hover { transform: scale(1.05); } .preview-avatar.pulse { animation: pulseAvatar 0.4s ease; } .settings-preview-card:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); } @keyframes pulseAvatar { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 87, 183, 0); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 87, 183, 0.4); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 87, 183, 0); } } /* === Qurvey Settings Interactivity Polish (Micro-Step 25) === */ /* Smooth field focus */ .settings-block input:focus { border-color: #0057b7; box-shadow: 0 0 5px rgba(0, 87, 183, 0.3); outline: none; transition: all 0.25s ease; } /* Button hover / active */ .btn-save { transition: all 0.25s ease; } .btn-save:hover { background: linear-gradient(90deg, #0057b7, #007fff); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 87, 183, 0.25); } .btn-save:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 87, 183, 0.25); } .settings-layout { display: flex; align-items: stretch; /* makes all columns same height */ justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; } .settings-preview-card { flex: 0 0 260px; margin: 0; } .settings-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; align-items: stretch; /* key to keep equal height across columns */ } .settings-block { background: #fff; border-radius: 20px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); padding: 25px; width: 360px; /* slightly wider */ min-height: 310px; /* fixed minimum height */ display: flex; flex-direction: column; justify-content: space-between; /* keep buttons aligned to bottom */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .settings-block:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); } @media (max-width: 900px) { .settings-layout { flex-direction: column; align-items: center; } } /* === THEME TOKENS =================================================== */ :root { /* Light (default) */ --bg: #f4f6fa; --bg-elev: #ffffff; --text: #0e1222; --muted: #5d6785; /* “Rich white” UI for accents */ --ui: #ffffff; --ui-ghost: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%); --ui-border: #e8eaf2; --shadow: 0 8px 24px rgba(0, 10, 40, .08); /* Brand (light mode) */ --brand: #1057c2; /* Qurvey blue */ --brand-contrast: #ffffff; /* Surfaces */ --card: #ffffff; --card-border: #e9ecf3; --sidebar-start: #161b22; --sidebar-end: #161b22; } /* === DARK MODE — CLEAN & BALANCED (Qurvey 2025 Premium) === */ html[data-theme="dark"] { --bg: #0e1117; /* фон всей страницы */ --bg-elev: #161b22; /* фон панелей */ --text: #e6ebf5; /* основной текст */ --muted: #9ba3b4; /* второстепенный текст */ --ui: #1c212c; /* поля, карточки, кнопки */ --ui-ghost: #1c212c; /* единый фон хедера и футера */ --ui-border: #2d3443; /* бордеры */ --shadow: 0 8px 28px rgba(0, 0, 0, 0.5); --brand: #2b6be0; /* синий акцент (один на всё) */ --brand-contrast: #ffffff; --card: #161b22; /* карточки / панели */ --card-border: #2a3240; --sidebar-start: #161b22; /* единый sidebar */ --sidebar-end: #161b22; } /* === GLOBAL MAPPINGS =============================================== */ body { background: var(--bg); color: var(--text); } /* Header / navbar */ header.q-header, .site-header { background: linear-gradient(180deg, #0057b7, #0042a5); color: white !important; } html[data-theme="dark"] header.q-header, html[data-theme="dark"] .site-header { background: linear-gradient(180deg, #0a1a33, #0e254d); color: #ffffff !important; } html[data-theme="dark"] .site-header, html[data-theme="dark"] header, html[data-theme="dark"] footer, html[data-theme="dark"] .q-header { background: var(--ui-ghost); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); color: var(--text); } /* Sidebar */ .qc-sidebar { background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)); color: var(--brand-contrast); border-right: 1px solid var(--ui-border); } /* Cards / blocks */ .settings-block, .project-card, .settings-preview-card, .qc-panel .card, .qc-panel .box { background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); transition: background .25s ease, color .25s ease, border-color .25s ease; } /* Inputs */ input[type="text"], input[type="email"], input[type="password"], textarea, select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--muted); } /* Buttons */ .btn-primary, .btn-save, .qc-link.is-active, .button-primary { background: var(--brand); color: var(--brand-contrast); border: none; } .btn-primary:hover, .btn-save:hover { filter: brightness(1.06); } /* Minor accents (divider lines, tiny labels) */ hr, .divider { border-color: var(--ui-border); } small, .muted { color: var(--muted); } /* === SETTINGS PANEL TWEAKS ========================================= */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* make container wider */ .qc-content .qc-panel { max-width: 1080px; margin: 0 auto; } /* compact theme block */ .settings-block.theme { background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; padding: 24px 28px; box-shadow: var(--shadow); width: 420px; transition: all 0.25s ease; } .settings-block.theme:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); } .settings-block.theme label { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block; } .settings-block.theme select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 12px 16px; font-size: 15px; border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui); color: var(--text); transition: 0.25s ease; cursor: pointer; outline: none; /* стрелка */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } /* === DARK MODE TUNING — SIMPLE AND CONSISTENT === */ html[data-theme="dark"] body, html[data-theme="dark"] .qc-wrap, html[data-theme="dark"] .qc-content { background: var(--bg); color: var(--text); } html[data-theme="dark"] .qc-sidebar { background: var(--sidebar-start); border-right: 1px solid var(--ui-border); } html[data-theme="dark"] .btn-save, html[data-theme="dark"] .btn-primary { background: var(--brand); color: #fff; } html[data-theme="dark"] .btn-save:hover, html[data-theme="dark"] .btn-primary:hover { filter: brightness(1.15); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted); } html[data-theme="dark"] .qc-panel h3 { color: var(--brand); } /* ======================================================= QURVEY DARK MODE — FINAL CLEAN 2025 (NO WHITE BOXES, NO BLUE ADMIN) ======================================================= */ /* === Base dark mode background === */ html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; } /* GLOBAL dark-mode for cabinet elements */ html[data-theme="dark"] .qc-wrap, html[data-theme="dark"] .qc-sidebar { background: var(--card) !important; color: var(--text) !important; } /* DO NOT TOUCH inner blocks — they keep their own borders and shadows */ html[data-theme="dark"] .project-card, html[data-theme="dark"] .settings-block, html[data-theme="dark"] .settings-preview-card, html[data-theme="dark"] .survey-editor, html[data-theme="dark"] .qc-content { background: var(--card) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important; color: var(--text) !important; } /* === Global text & headings === */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--brand) !important; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th { color: var(--text) !important; background: transparent !important; } /* === Remove white backgrounds from Gutenberg / WP content === */ html[data-theme="dark"] main, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .page-content, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-columns, html[data-theme="dark"] .wp-block-column, html[data-theme="dark"] .wp-block-cover, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] article, html[data-theme="dark"] .post, html[data-theme="dark"] .container, html[data-theme="dark"] .content { background: var(--bg) !important; border: none !important; box-shadow: none !important; color: var(--text) !important; } /* Extra cleanup for Gutenberg blocks with own background */ html[data-theme="dark"] .wp-block-group.has-background, html[data-theme="dark"] .wp-block-cover__inner-container.has-background { background: var(--bg) !important; box-shadow: none !important; } /* Dark mode — buttons ONLY inside page content, not footer/header */ html[data-theme="dark"] .entry-content a:not(footer a):not(header a), html[data-theme="dark"] .wp-block-button__link, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-save { background: var(--brand) !important; color: #fff !important; border: none !important; border-radius: 8px; } html[data-theme="dark"] .entry-content a:hover, html[data-theme="dark"] .wp-block-button__link:hover, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-save:hover { filter: brightness(1.15) !important; } /* === Sidebar active item === */ html[data-theme="dark"] .qc-link.is-active { background: var(--brand-contrast) !important; color: var(--brand) !important; border-left: 4px solid var(--brand); box-shadow: 0 3px 10px rgba(43, 107, 224, 0.25); } /* === Header & footer === */ html[data-theme="dark"] header, html[data-theme="dark"] footer, html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-footer { background: var(--ui-ghost) !important; color: var(--text) !important; border: none !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] header a, html[data-theme="dark"] footer a { color: var(--text) !important; } html[data-theme="dark"] header a:hover, html[data-theme="dark"] footer a:hover { color: var(--brand) !important; } /* === Inputs === */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } /* === Admin bar untouched === */ html[data-theme="dark"] #wpadminbar, html[data-theme="dark"] #wpadminbar * { background: unset !important; color: unset !important; } /* ======================================================= FRONT PAGES — DARK: no edges, soft shadow only on inner cards ======================================================= */ /* FRONT PAGES ONLY — do NOT affect Cabinet */ html[data-theme="dark"] main:not(#qurvey-cabinet) .container, html[data-theme="dark"] main:not(#qurvey-cabinet) .row, html[data-theme="dark"] main:not(#qurvey-cabinet) .col-md-8, html[data-theme="dark"] main:not(#qurvey-cabinet) .pricing-grid { background: transparent !important; border: none !important; box-shadow: none !important; } /* 2) Базовый стиль карточек (для светлой тоже ок) */ .index-card, .terms-content, .page-content { background: #ffffff; border: none; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); padding: 28px 32px; } /* 3) Тёмная тема — настоящая «поверхность» только у карточек */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, .04) !important; /* тончайший hairline */ box-shadow: 0 10px 28px rgba(0, 0, 0, .6) !important; } /* 4) Заголовки/текст для контента (читаемо на тёмном) */ html[data-theme="dark"] .terms-header h1, html[data-theme="dark"] .pricing-header h1, html[data-theme="dark"] .page-header h1 { color: #2b6be0 !important; } html[data-theme="dark"] .index-card p, html[data-theme="dark"] .index-card li, html[data-theme="dark"] .terms-content p, html[data-theme="dark"] .page-content p, html[data-theme="dark"] .page-content li { color: #d9e3f0 !important; } /* 5) Прайс-карточки без «коробок», с мягким свечением */ html[data-theme="dark"] .pricing-card { background: #1b2230 !important; border: 1px solid rgba(255, 255, 255, .05) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .55) !important; border-radius: 16px !important; } html[data-theme="dark"] .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 107, 224, .25) !important; } html[data-theme="dark"] .plan-name { color: #2b6be0 !important; } html[data-theme="dark"] .plan-price, html[data-theme="dark"] .feature-name, html[data-theme="dark"] .feature-value { color: #d9e3f0 !important; } html[data-theme="dark"] .feature-list li { border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } /* 6) Кнопки на фронт-страницах */ html[data-theme="dark"] .cta-button, html[data-theme="dark"] .offer-button, html[data-theme="dark"] .waitlist-form .btn, html[data-theme="dark"] .btn-primary { background: linear-gradient(90deg, #2b6be0, #0048b3) !important; color: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(43, 107, 224, .35); transition: transform .2s ease, box-shadow .2s ease; } html[data-theme="dark"] .cta-button:hover, html[data-theme="dark"] .offer-button:hover, html[data-theme="dark"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43, 107, 224, .55); } /* ======================================================= QURVEY DARK — FINAL CLEAN FIX (remove last grey box) ======================================================= */ /* Убираем последний невидимый серый контейнер WordPress */ html[data-theme="dark"] .site-content, html[data-theme="dark"] .entry-content>div, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] .wp-site-blocks, html[data-theme="dark"] .content-area { background: transparent !important; border: none !important; box-shadow: none !important; } /* Гарантируем, что только карточки остаются видимыми */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: none !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important; position: relative; z-index: 2; } /* Мягкая внутренняя подсветка карточки */ html[data-theme="dark"] .index-card::before, html[data-theme="dark"] .terms-content::before, html[data-theme="dark"] .page-content::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 20px rgba(255, 255, 255, 0.02); } /* Убираем излишний внутренний отступ WP-групп */ html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container { padding: 0 !important; margin: 0 auto !important; } /* ======================================================= QURVEY CABINET — ULTRA CLEAN PREMIUM (GLASS 2025) ======================================================= */ .qc-wrap { display: flex; min-height: 80vh; max-width: 1300px; margin: 50px auto; background: #ffffff; border-radius: 18px; overflow: hidden; font-family: "Montserrat", sans-serif; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); border: 1px solid #e6e6e6; } /* ==== SIDEBAR ==== */ .qc-sidebar { width: 280px; background: linear-gradient(180deg, rgba(0, 87, 183, 0.85), rgba(0, 72, 158, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; padding: 35px 25px; display: flex; flex-direction: column; gap: 25px; box-shadow: inset -1px 0 8px rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.1); } .qc-title { font-family: "Orbitron", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* ==== MENU ==== */ .qc-menu { display: flex; flex-direction: column; gap: 12px; } .qc-link { background: rgba(255, 255, 255, 0.1); border: 1px solid transparent; color: #ffffff; padding: 12px 16px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .qc-link:hover { background: rgba(255, 255, 255, 0.25); transform: translateX(3px); } /* ==== ACTIVE ITEM ==== */ .qc-link.is-active { background: #ffffff; color: #0057b7; font-weight: 600; border-left: 4px solid #0057b7; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.15); transform: none; } /* ==== CONTENT ==== */ .qc-content { flex: 1; padding: 50px 70px; background: var(--bg-elev); border-left: 2px solid rgba(0, 87, 183, 0.2); } .qc-panel { display: none; opacity: 0; transition: opacity 0.3s ease; } .qc-panel.is-active { display: block; opacity: 1; } .qc-panel h3 { color: #0057b7; font-family: "Orbitron", sans-serif; font-size: 22px; margin-bottom: 10px; } .qc-panel p { color: #333; line-height: 1.6; font-size: 15px; } /* ==== PROJECT CARDS ==== */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; margin-top: 25px; } .project-card { background: #ffffff; border-radius: 14px; border: 1px solid #e2e2e2; padding: 22px 24px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); transition: all 0.25s ease; cursor: pointer; position: relative; } .project-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 87, 183, 0.15); } .project-card h4 { color: #0057b7; font-family: "Orbitron", sans-serif; font-size: 17px; margin-bottom: 8px; } .project-card p { color: #444; font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .project-card .status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: rgba(0, 87, 183, 0.1); color: #0057b7; letter-spacing: 0.3px; } .project-card.completed .status { background: rgba(25, 135, 84, 0.12); color: #157347; } .project-card.archived .status { background: rgba(108, 117, 125, 0.12); color: #6c757d; } /* ======================================================= PROJECT DASHBOARD MODAL — GLASS & PREMIUM STYLE 2025 ======================================================= */ .qc-dashboard-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 20, 40, 0.55); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); justify-content: center; align-items: center; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; } .qc-dashboard-overlay.active { display: flex; opacity: 1; animation: fadeIn 0.35s ease; } .qc-dashboard { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px) saturate(200%); -webkit-backdrop-filter: blur(12px) saturate(200%); border-radius: 20px; padding: 40px 45px; width: 100%; max-width: 560px; position: relative; text-align: left; animation: scaleIn 0.3s ease; border-top: 4px solid #0057b7; box-shadow: 0 8px 32px rgba(0, 87, 183, 0.25), 0 2px 10px rgba(255, 255, 255, 0.15) inset; } .qc-dashboard::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(0, 87, 183, 0.1)); pointer-events: none; mix-blend-mode: overlay; } .qc-dashboard h3 { font-family: "Orbitron", sans-serif; color: #0057b7; font-size: 22px; margin-bottom: 25px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .qc-dashboard-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 28px; color: #444; cursor: pointer; transition: transform 0.25s ease, color 0.25s ease; } .qc-dashboard-close:hover { color: #000; transform: scale(1.1); } .dash-grid { display: grid; gap: 12px; margin-bottom: 25px; } .dash-item { font-size: 15px; color: #222; background: rgba(255, 255, 255, 0.4); padding: 8px 10px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset; } .dash-item strong { color: #0057b7; } .dash-chart { text-align: center; background: rgba(245, 247, 255, 0.7); border-radius: 12px; padding: 18px; font-style: italic; color: #555; border: 1px solid rgba(0, 87, 183, 0.15); box-shadow: inset 0 2px 8px rgba(0, 87, 183, 0.08); } /* ==== ANIMATIONS ==== */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ==== RESPONSIVE ==== */ @media (max-width: 768px) { .qc-wrap { flex-direction: column; margin: 20px; border-radius: 12px; } .qc-sidebar { width: 100%; flex-direction: row; justify-content: space-around; padding: 15px 10px; border-radius: 12px 12px 0 0; } .qc-link { flex: 1; text-align: center; } .qc-content { padding: 25px; border-left: none; border-top: 2px solid rgba(0, 87, 183, 0.25); } .qc-dashboard { width: 90%; padding: 30px; } } .btn-primary { background: linear-gradient(90deg, #0057b7, #00449c); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-primary:hover { background: linear-gradient(90deg, #00449c, #003a8a); transform: translateY(-1px); } /* ======================================================= QURVEY — SURVEYS PANEL + ACTION BUTTONS (GLASS 2025) ======================================================= */ /* === Create New Survey Section === */ .survey-editor { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 87, 183, 0.15); border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 87, 183, 0.08); padding: 20px 24px 24px 24px; margin: 20px 0 25px 0; backdrop-filter: blur(10px); animation: fadeIn 0.4s ease; } .survey-editor h4 { font-family: "Orbitron", sans-serif; font-size: 20px; margin-bottom: 16px; color: #003b88; letter-spacing: 0.3px; } .survey-input { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1.5px solid rgba(0, 87, 183, 0.25); border-radius: 8px; background: #fff; transition: all 0.25s ease; font-size: 15px; font-family: "Montserrat", sans-serif; } .survey-input:focus { border-color: #0057b7; box-shadow: 0 0 0 3px rgba(0, 87, 183, 0.15); outline: none; } #saveSurveyBtn { display: inline-block; background: linear-gradient(90deg, #0073ff, #0057b7); color: #fff; border: none; font-weight: 600; font-size: 15px; padding: 10px 22px; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.15); } #saveSurveyBtn:hover { background: linear-gradient(90deg, #0057b7, #003a8c); transform: translateY(-1px); } /* === Survey Cards === */ #panel-surveys .project-grid { display: flex; flex-direction: column; /* ✅ Строго вертикально вниз */ gap: 25px; margin-top: 20px; } #panel-surveys .project-card { background: rgba(255, 255, 255, 0.96); border-radius: 16px; border: 1px solid rgba(0, 87, 183, 0.1); box-shadow: 0 4px 18px rgba(0, 87, 183, 0.08); padding: 22px 24px 18px 24px; position: relative; transition: all 0.3s ease; cursor: default; } #panel-surveys .project-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 87, 183, 0.15); } #panel-surveys .project-card h4 { font-family: "Orbitron", sans-serif; font-size: 18px; color: #0045b3; margin-bottom: 8px; } #panel-surveys .project-card p { font-family: "Montserrat", sans-serif; font-size: 14px; color: #333; margin-bottom: 16px; line-height: 1.45; } #panel-surveys .status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(0, 87, 183, 0.08); color: #0045b3; letter-spacing: 0.2px; user-select: none; } /* === Buttons inside survey cards === */ .survey-actions-inline { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; } /* mini glass button */ .qv-btn { border: none; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(8px); color: #0057b7; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 8px rgba(0, 87, 183, 0.08); } .qv-btn:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; transform: translateY(-1px); } /* Delete button (red tone) */ .qv-btn-delete { color: #c70039; background: rgba(255, 0, 0, 0.08); border: 1px solid rgba(255, 0, 0, 0.1); } .qv-btn-delete:hover { background: rgba(255, 0, 0, 0.15); color: #b0002c; } /* Edit button (blue tone) */ .qv-btn-edit { color: #0045b3; background: rgba(0, 87, 183, 0.08); border: 1px solid rgba(0, 87, 183, 0.1); } .qv-btn-edit:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; } /* tooltip effect */ .qv-btn[data-tooltip] { position: relative; } .qv-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #0045b3; color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .qv-btn[data-tooltip]:hover::after { opacity: 1; } /* animation for adding new card */ .project-card.new { animation: fadeIn 0.4s ease; } #panel-surveys p { width: 100%; /* ✅ занимает всю ширину контейнера */ display: block; /* гарантированно блочный элемент */ margin: 10px 0 25px; /* отступы сверху и снизу */ color: #555; /* нейтральный серый цвет */ font-size: 15px; font-family: "Montserrat", sans-serif; } .survey-actions { display: flex; justify-content: flex-start; /* кнопки рядом */ gap: 10px; align-items: center; margin-top: 15px; } /* === CLOSE BUTTON (в стиле Qurvey) === */ #closeSurveyBtn { background: rgba(0, 87, 183, 0.08); color: #0045b3; border: 1.5px solid rgba(0, 87, 183, 0.15); border-radius: 8px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; font-family: "Montserrat", sans-serif; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.05); } #closeSurveyBtn:hover { background: rgba(0, 87, 183, 0.15); color: #003a8c; transform: translateY(-1px); } /* === Если хочешь прижать "Close" к правому краю блока === */ .survey-actions.right-aligned { justify-content: space-between; } /* === DELETE SURVEY BUTTON (Qurvey Glass 2025, нижний правый угол) === */ .btn-delete-survey { position: absolute; bottom: 18px; right: 18px; background: rgba(255, 0, 0, 0.08); color: #c70039; border: 1.5px solid rgba(255, 0, 0, 0.12); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; font-family: "Montserrat", sans-serif; backdrop-filter: blur(6px); box-shadow: 0 3px 8px rgba(255, 0, 0, 0.08); } .btn-delete-survey:hover { background: rgba(255, 0, 0, 0.15); color: #b0002c; transform: translateY(-1px); } /* === NO SURVEYS TEXT — Qurvey Glass 2025 Style === */ #no-surveys-text { display: block; width: 100%; margin: 35px 0; padding: 16px 20px; text-align: center; font-family: "Orbitron", sans-serif; font-size: 16px; font-weight: 600; color: #0045b3; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(0, 87, 183, 0.15); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 87, 183, 0.08); letter-spacing: 0.3px; transition: all 0.25s ease; } #no-surveys-text:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 87, 183, 0.12); } .settings-block { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); max-width: 480px; margin-top: 20px; } .settings-block input { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; } .settings-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; text-align: right; } .btn-save { background: #0057b7; color: white; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; } .btn-save:hover { background: #0043a0; } /* === Qurvey Spinner (for all loading buttons) === */ :root { --spinner-dark: rgba(0, 0, 0, 0.7); --spinner-light: rgba(255, 255, 255, 0.9); } .spinner { width: 14px; height: 14px; border: 2px solid transparent; border-radius: 50%; border-top-color: var(--spinner-light); animation: spin 0.6s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; } .btn-light .spinner, .btn-delete-survey .spinner { border-top-color: var(--spinner-dark); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* === Save button appearance === */ #saveProfileBtn { background-color: #0057b7; color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: background-color 1s ease, transform 1s ease; } #saveProfileBtn:hover:not(:disabled) { background-color: #0046a0; transform: translateY(-1px); } #saveProfileBtn:disabled { opacity: 0.75; cursor: not-allowed; } #saveProfileBtn.success { background-color: #28a745 !important; } /* === Qurvey Toast Notification === */ #qc-toast { position: fixed; top: 25px; right: 25px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: rgba(0, 87, 183, 0.9); color: #fff; font-weight: 500; padding: 12px 18px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-20px) scale(0.95); animation: toastIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards; transition: transform 0.3s ease, opacity 0.3s ease; } .toast.success { background: rgba(40, 167, 69, 0.9); } .toast.error { background: rgba(220, 53, 69, 0.9); } @keyframes toastIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } } #qc-toast { position: fixed; top: 25px; right: 25px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; pointer-events: none; } .toast { pointer-events: auto; } /* === Toast Icon & Gradients === */ .toast { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: 0.3px; border-left: 5px solid transparent; } .toast-icon { font-size: 1.1em; } /* Success (green-blue gradient) */ .toast.success { background: linear-gradient(135deg, #28a745, #00b4d8); border-left-color: #00b4d8; } /* Error (red gradient) */ .toast.error { background: linear-gradient(135deg, #dc3545, #b00020); border-left-color: #b00020; } /* Warning (yellow-orange gradient) */ .toast.warning { background: linear-gradient(135deg, #ffc107, #ff9100); color: #000; border-left-color: #ff9100; } /* Info (blue gradient) */ .toast.info { background: linear-gradient(135deg, #007bff, #00b4d8); border-left-color: #007bff; } /* === Qurvey Spinner === */ .btn-loading { position: relative; pointer-events: none; /* disables button clicks */ opacity: 0.8; /* dim effect to show it's busy */ } .btn-loading::after { content: ""; position: absolute; right: 14px; /* spinner position */ top: 50%; width: 16px; height: 16px; border: 2px solid #fff; /* white circle */ border-top-color: transparent; /* invisible top to show motion */ border-radius: 50%; transform: translateY(-50%); animation: spin 0.6s linear infinite; } @keyframes spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } /* === Qurvey Input Validation Styles === */ .input-error { border: 1.5px solid #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); animation: shake 0.2s ease-in-out 0s 2; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .validation-hint { color: #dc3545; font-size: 13px; margin-top: -8px; margin-bottom: 10px; font-family: "Montserrat", sans-serif; display: none; } /* === Qurvey Autosave Indicator === */ .autosave-indicator { position: absolute; right: 12px; top: 12px; font-size: 14px; font-weight: 600; color: #28a745; opacity: 0; transition: opacity 0.3s ease; } .autosave-indicator.active { opacity: 1; } .settings-block { position: relative; } /* === Qurvey Settings Layout Polish (Micro-Step 24) === */ #panel-settings { display: flex; flex-direction: column; gap: 40px; padding-bottom: 40px; } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; } @media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } } .settings-block { background: #ffffff; padding: 28px 30px; border-radius: 18px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .settings-block:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .settings-block label { display: block; font-weight: 600; margin-bottom: 6px; color: #003366; } .settings-block input { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #dcdcdc; border-radius: 10px; font-size: 14px; } .settings-actions { text-align: right; } .btn-save { background: #0057b7; color: white; border: none; padding: 9px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; } .btn-save:hover { background: #003f8a; } .settings-preview-card { flex: 0 0 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 310px; /* same as settings-block */ background: #fff; border-radius: 20px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); padding: 25px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .preview-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #0057b7, #ffd700); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; margin-bottom: 15px; transition: transform 0.3s ease; } .preview-avatar:hover { transform: scale(1.05); } .preview-avatar.pulse { animation: pulseAvatar 0.4s ease; } .settings-preview-card:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); } @keyframes pulseAvatar { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 87, 183, 0); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 87, 183, 0.4); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 87, 183, 0); } } /* === Qurvey Settings Interactivity Polish (Micro-Step 25) === */ /* Smooth field focus */ .settings-block input:focus { border-color: #0057b7; box-shadow: 0 0 5px rgba(0, 87, 183, 0.3); outline: none; transition: all 0.25s ease; } /* Button hover / active */ .btn-save { transition: all 0.25s ease; } .btn-save:hover { background: linear-gradient(90deg, #0057b7, #007fff); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 87, 183, 0.25); } .btn-save:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 87, 183, 0.25); } .settings-layout { display: flex; align-items: stretch; /* makes all columns same height */ justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; } .settings-preview-card { flex: 0 0 260px; margin: 0; } .settings-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; align-items: stretch; /* key to keep equal height across columns */ } .settings-block { background: #fff; border-radius: 20px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); padding: 25px; width: 360px; /* slightly wider */ min-height: 310px; /* fixed minimum height */ display: flex; flex-direction: column; justify-content: space-between; /* keep buttons aligned to bottom */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .settings-block:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); } @media (max-width: 900px) { .settings-layout { flex-direction: column; align-items: center; } } /* === THEME TOKENS =================================================== */ :root { /* Light (default) */ --bg: #f4f6fa; --bg-elev: #ffffff; --text: #0e1222; --muted: #5d6785; /* “Rich white” UI for accents */ --ui: #ffffff; --ui-ghost: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%); --ui-border: #e8eaf2; --shadow: 0 8px 24px rgba(0, 10, 40, .08); /* Brand (light mode) */ --brand: #1057c2; /* Qurvey blue */ --brand-contrast: #ffffff; /* Surfaces */ --card: #ffffff; --card-border: #e9ecf3; --sidebar-start: #161b22; --sidebar-end: #161b22; } /* === DARK MODE — CLEAN & BALANCED (Qurvey 2025 Premium) === */ html[data-theme="dark"] { --bg: #0e1117; /* фон всей страницы */ --bg-elev: #161b22; /* фон панелей */ --text: #e6ebf5; /* основной текст */ --muted: #9ba3b4; /* второстепенный текст */ --ui: #1c212c; /* поля, карточки, кнопки */ --ui-ghost: #1c212c; /* единый фон хедера и футера */ --ui-border: #2d3443; /* бордеры */ --shadow: 0 8px 28px rgba(0, 0, 0, 0.5); --brand: #2b6be0; /* синий акцент (один на всё) */ --brand-contrast: #ffffff; --card: #161b22; /* карточки / панели */ --card-border: #2a3240; --sidebar-start: #161b22; /* единый sidebar */ --sidebar-end: #161b22; } /* === GLOBAL MAPPINGS =============================================== */ body { background: var(--bg); color: var(--text); } /* Header / navbar */ header.q-header, .site-header { background: linear-gradient(180deg, #0057b7, #0042a5); color: white !important; } html[data-theme="dark"] header.q-header, html[data-theme="dark"] .site-header { background: linear-gradient(180deg, #0a1a33, #0e254d); color: #ffffff !important; } html[data-theme="dark"] .site-header, html[data-theme="dark"] header, html[data-theme="dark"] footer, html[data-theme="dark"] .q-header { background: var(--ui-ghost); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); color: var(--text); } /* Sidebar */ .qc-sidebar { background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)); color: var(--brand-contrast); border-right: 1px solid var(--ui-border); } /* Cards / blocks */ .settings-block, .project-card, .settings-preview-card, .qc-panel .card, .qc-panel .box { background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); transition: background .25s ease, color .25s ease, border-color .25s ease; } /* Inputs */ input[type="text"], input[type="email"], input[type="password"], textarea, select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--muted); } /* Buttons */ .btn-primary, .btn-save, .qc-link.is-active, .button-primary { background: var(--brand); color: var(--brand-contrast); border: none; } .btn-primary:hover, .btn-save:hover { filter: brightness(1.06); } /* Minor accents (divider lines, tiny labels) */ hr, .divider { border-color: var(--ui-border); } small, .muted { color: var(--muted); } /* === SETTINGS PANEL TWEAKS ========================================= */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* make container wider */ .qc-content .qc-panel { max-width: 1080px; margin: 0 auto; } /* compact theme block */ .settings-block.theme { max-width: 420px; min-height: 50px; /* smaller height */ padding: 18px; } /* === FIX THEME SELECT ARROWS === */ .settings-block.theme select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important; /* Полный сброс старых фоновых изображений */ background-image: unset !important; background-color: var(--ui); color: var(--text); /* Добавляем ЕДИНУЮ стрелку вручную */ background-image: url("data:image/svg+xml;utf8,") !important; } /* Убираем стрелку Firefox */ .settings-block.theme select::-ms-expand { display: none !important; } html[data-theme="light"] .settings-block.theme select { background-image: url("data:image/svg+xml;utf8,") !important; } .settings-block.theme select:hover { border-color: #0057b7; } .settings-block.theme select:focus { border-color: #0057b7; box-shadow: 0 0 8px rgba(0, 87, 183, 0.25); } html[data-theme="dark"] .settings-block.theme { background: #161b22; border-color: #2a3240; box-shadow: none; } html[data-theme="dark"] .settings-block.theme select { background: #0f1a25; border-color: #2d3443; color: #e6ebf5; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="dark"] .settings-block.theme select:focus { border-color: #2b6be0; box-shadow: 0 0 8px rgba(43, 107, 224, 0.35); } /* === DARK MODE TUNING — SIMPLE AND CONSISTENT === */ html[data-theme="dark"] body, html[data-theme="dark"] .qc-wrap, html[data-theme="dark"] .qc-content { background: var(--bg); color: var(--text); } html[data-theme="dark"] .qc-sidebar { background: var(--sidebar-start); border-right: 1px solid var(--ui-border); } html[data-theme="dark"] .btn-save, html[data-theme="dark"] .btn-primary { background: var(--brand); color: #fff; } html[data-theme="dark"] .btn-save:hover, html[data-theme="dark"] .btn-primary:hover { filter: brightness(1.15); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted); } html[data-theme="dark"] .qc-panel h3 { color: var(--brand); } /* ======================================================= QURVEY DARK MODE — FINAL CLEAN 2025 (NO WHITE BOXES, NO BLUE ADMIN) ======================================================= */ /* === Base dark mode background === */ html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; } /* === Global text & headings === */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--brand) !important; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th { color: var(--text) !important; background: transparent !important; } /* === Remove white backgrounds from Gutenberg / WP content === */ html[data-theme="dark"] main, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .page-content, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-columns, html[data-theme="dark"] .wp-block-column, html[data-theme="dark"] .wp-block-cover, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] article, html[data-theme="dark"] .post, html[data-theme="dark"] .container, html[data-theme="dark"] .content { background: var(--bg) !important; border: none !important; box-shadow: none !important; color: var(--text) !important; } /* Extra cleanup for Gutenberg blocks with own background */ html[data-theme="dark"] .wp-block-group.has-background, html[data-theme="dark"] .wp-block-cover__inner-container.has-background { background: var(--bg) !important; box-shadow: none !important; } html[data-theme="dark"] .entry-content a:hover, html[data-theme="dark"] .wp-block-button__link:hover, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-save:hover { filter: brightness(1.15) !important; } /* === Sidebar active item === */ html[data-theme="dark"] .qc-link.is-active { background: var(--brand-contrast) !important; color: var(--brand) !important; border-left: 4px solid var(--brand); box-shadow: 0 3px 10px rgba(43, 107, 224, 0.25); } /* === Header & footer === */ html[data-theme="dark"] header, html[data-theme="dark"] footer, html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-footer { background: var(--ui-ghost) !important; color: var(--text) !important; border: none !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] header a, html[data-theme="dark"] footer a { color: var(--text) !important; } html[data-theme="dark"] header a:hover, html[data-theme="dark"] footer a:hover { color: var(--brand) !important; } /* === Inputs === */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--ui); border: 1px solid var(--ui-border); color: var(--text); } /* === Admin bar untouched === */ html[data-theme="dark"] #wpadminbar, html[data-theme="dark"] #wpadminbar * { background: unset !important; color: unset !important; } /* ======================================================= FRONT PAGES — DARK: no edges, soft shadow only on inner cards ======================================================= */ /* 1) Внешние обёртки — всегда прозрачные, без рамок и теней */ html[data-theme="dark"] main:not(#qurvey-cabinet)>.container, html[data-theme="dark"] main:not(#qurvey-cabinet) .row, html[data-theme="dark"] main:not(#qurvey-cabinet) .col-md-8, html[data-theme="dark"] main:not(#qurvey-cabinet) .pricing-grid { background: transparent !important; border: none !important; box-shadow: none !important; } /* 2) Базовый стиль карточек (для светлой тоже ок) */ .index-card, .terms-content, .page-content { background: #ffffff; border: none; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); padding: 28px 32px; } /* 3) Тёмная тема — настоящая «поверхность» только у карточек */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, .04) !important; /* тончайший hairline */ box-shadow: 0 10px 28px rgba(0, 0, 0, .6) !important; } /* 4) Заголовки/текст для контента (читаемо на тёмном) */ html[data-theme="dark"] .terms-header h1, html[data-theme="dark"] .pricing-header h1, html[data-theme="dark"] .page-header h1 { color: #2b6be0 !important; } html[data-theme="dark"] .index-card p, html[data-theme="dark"] .index-card li, html[data-theme="dark"] .terms-content p, html[data-theme="dark"] .page-content p, html[data-theme="dark"] .page-content li { color: #d9e3f0 !important; } /* 5) Прайс-карточки без «коробок», с мягким свечением */ html[data-theme="dark"] .pricing-card { background: #1b2230 !important; border: 1px solid rgba(255, 255, 255, .05) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .55) !important; border-radius: 16px !important; } html[data-theme="dark"] .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 107, 224, .25) !important; } html[data-theme="dark"] .plan-name { color: #2b6be0 !important; } html[data-theme="dark"] .plan-price, html[data-theme="dark"] .feature-name, html[data-theme="dark"] .feature-value { color: #d9e3f0 !important; } html[data-theme="dark"] .feature-list li { border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } /* 6) Кнопки на фронт-страницах */ html[data-theme="dark"] .cta-button, html[data-theme="dark"] .offer-button, html[data-theme="dark"] .waitlist-form .btn, html[data-theme="dark"] .btn-primary { background: linear-gradient(90deg, #2b6be0, #0048b3) !important; color: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(43, 107, 224, .35); transition: transform .2s ease, box-shadow .2s ease; } html[data-theme="dark"] .cta-button:hover, html[data-theme="dark"] .offer-button:hover, html[data-theme="dark"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43, 107, 224, .55); } /* ======================================================= QURVEY DARK — FINAL CLEAN FIX (remove last grey box) ======================================================= */ /* Убираем последний невидимый серый контейнер WordPress */ html[data-theme="dark"] .site-content, html[data-theme="dark"] .entry-content>div, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] .wp-site-blocks, html[data-theme="dark"] .content-area { background: transparent !important; border: none !important; box-shadow: none !important; } /* Гарантируем, что только карточки остаются видимыми */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: none !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important; position: relative; z-index: 2; } /* Мягкая внутренняя подсветка карточки */ html[data-theme="dark"] .index-card::before, html[data-theme="dark"] .terms-content::before, html[data-theme="dark"] .page-content::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 20px rgba(255, 255, 255, 0.02); } /* Убираем излишний внутренний отступ WP-групп */ html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container { padding: 0 !important; margin: 0 auto !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ======================================================= QURVEY FINAL FIX — THEME SYNC + DARK PAGES CLEAN ======================================================= */ /* === 1. Светлая тема — без двойных квадратов === */ body:not([data-theme="dark"]) .row, body:not([data-theme="dark"]) .col-md-8, body:not([data-theme="dark"]) .container, body:not([data-theme="dark"]) .page-content, body:not([data-theme="dark"]) .terms-content { background: transparent !important; border: none !important; box-shadow: none !important; } /* Основная карточка */ body:not([data-theme="dark"]) .index-card { background: #ffffff !important; border-radius: 14px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); padding: 28px 32px; border: none; position: relative; z-index: 2; } /* === 2. Sidebar (адаптивный под тему) === */ /* Светлая тема — чуть темнее градиент */ body:not([data-theme="dark"]) .qc-sidebar { background: linear-gradient(180deg, #d4e2ff 0%, #aac6ff 100%) !important; color: #003b88 !important; border-right: 1px solid rgba(0, 87, 183, 0.15) !important; box-shadow: inset -1px 0 6px rgba(0, 0, 0, 0.05); } /* Тёмная тема — глубокий матовый градиент */ html[data-theme="dark"] .qc-sidebar { background: linear-gradient(180deg, #0e141e 0%, #141a25 100%) !important; color: #ffffff !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset -1px 0 6px rgba(0, 0, 0, 0.4); } /* Активная вкладка */ .qc-link.is-active { background: #0057b7 !important; color: #fff !important; border-left: 4px solid #003b88 !important; box-shadow: 0 3px 10px rgba(0, 87, 183, 0.15); } .qc-link { transition: all 0.25s ease; } /* Светлая — hover */ body:not([data-theme="dark"]) .qc-link { background: rgba(255, 255, 255, 0.6); color: #003b88; } body:not([data-theme="dark"]) .qc-link:hover { background: rgba(0, 87, 183, 0.15); color: #003b88; transform: translateX(3px); } /* Тёмная — hover */ html[data-theme="dark"] .qc-link { background: rgba(255, 255, 255, 0.08); color: #ffffff; } html[data-theme="dark"] .qc-link:hover { background: rgba(255, 255, 255, 0.18); transform: translateX(3px); } /* === 3. Тёмная тема — убираем белые блоки с фронта === */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important; color: #e6ebf5 !important; } /* Читаемый текст */ html[data-theme="dark"] .index-card p, html[data-theme="dark"] .terms-content p, html[data-theme="dark"] .page-content p, html[data-theme="dark"] .index-card li, html[data-theme="dark"] .page-content li { color: #d9e3f0 !important; } /* Очищаем лишние обёртки WP */ html[data-theme="dark"] .container, html[data-theme="dark"] .row, html[data-theme="dark"] .col-md-8 { background: transparent !important; border: none !important; box-shadow: none !important; } /* === Qurvey Dark Mode — remove nested inner boxes completely === */ html[data-theme="dark"] .entry-content, html[data-theme="dark"] .entry-content>*:not(.index-card):not(.terms-content):not(.page-content), html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] .wp-site-blocks, html[data-theme="dark"] .content-area, html[data-theme="dark"] article { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto !important; } /* === Ensure only main visible card remains === */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; position: relative; z-index: 2; } /* === FINAL PATCH — remove inner background box on WP pages === */ html[data-theme="dark"] .wp-block-group__inner-container>.wp-block-group, html[data-theme="dark"] .entry-content>.wp-block-group, html[data-theme="dark"] .entry-content>.wp-block-group__inner-container { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Ensure parent container stays transparent too */ html[data-theme="dark"] .site-content, html[data-theme="dark"] .content-area, html[data-theme="dark"] .entry-content { background: transparent !important; box-shadow: none !important; border: none !important; } /* Only keep visible card layer */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important; position: relative; z-index: 3; } /* ===== Dark: убираем внешний "лишний" квадрат на фронт-страницах ===== */ html[data-theme="dark"] .site-content, html[data-theme="dark"] .site-content .container, html[data-theme="dark"] .site-content .container>.row, html[data-theme="dark"] .site-content .container>.row>[class*="col-"], html[data-theme="dark"] .entry-content, html[data-theme="dark"] .entry-content>*:not(.index-card):not(.terms-content):not(.page-content), html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* Если тема рисует рамки/тени через псевдо-элементы — глушим их */ html[data-theme="dark"] .site-content::before, html[data-theme="dark"] .site-content::after, html[data-theme="dark"] .container::before, html[data-theme="dark"] .container::after, html[data-theme="dark"] .entry-content::before, html[data-theme="dark"] .entry-content::after, html[data-theme="dark"] .wp-block-group::before, html[data-theme="dark"] .wp-block-group::after { content: none !important; } /* Оставляем видимой ТОЛЬКО внутреннюю «карту» контента */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, .05) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .6) !important; position: relative; z-index: 3; } /* На некоторых темах «карточками» являются .card — обнуляем их, если не ваши */ html[data-theme="dark"] .card:not(.index-card):not(.terms-content):not(.page-content) { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ======================================================= 🔥 QURVEY DARK FIX — Remove Last Background Layer (2025 FINAL) ======================================================= */ html[data-theme="dark"] body, html[data-theme="dark"] .site, html[data-theme="dark"] .site-content, html[data-theme="dark"] .wp-site-blocks, html[data-theme="dark"] .content-area, html[data-theme="dark"] .site-main, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .entry-content>div, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] article, html[data-theme="dark"] .post, html[data-theme="dark"] .container, html[data-theme="dark"] .row, html[data-theme="dark"] [class*="col-"] { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; filter: none !important; } /* Псевдоэлементы тоже выключаем */ html[data-theme="dark"] .site-content::before, html[data-theme="dark"] .site-content::after, html[data-theme="dark"] .wp-site-blocks::before, html[data-theme="dark"] .wp-site-blocks::after, html[data-theme="dark"] .entry-content::before, html[data-theme="dark"] .entry-content::after, html[data-theme="dark"] .container::before, html[data-theme="dark"] .container::after { content: none !important; display: none !important; } /* ✅ Единственные допустимые поверхности */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important; position: relative; z-index: 3; } /* Немного мягкого свечения */ html[data-theme="dark"] .index-card::before, html[data-theme="dark"] .terms-content::before, html[data-theme="dark"] .page-content::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 20px rgba(255, 255, 255, 0.02); } /* === ULTRA FINAL FIX — Remove remaining white/grey wrappers === */ html[data-theme="dark"] .wp-site-blocks, html[data-theme="dark"] .site-content, html[data-theme="dark"] .content-area, html[data-theme="dark"] .site-main, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .entry-content>*:not(.index-card):not(.page-content):not(.terms-content), html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] article, html[data-theme="dark"] .post { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; } /* знищує псевдоелементи які малюють рамку */ html[data-theme="dark"] .wp-site-blocks::before, html[data-theme="dark"] .wp-site-blocks::after, html[data-theme="dark"] .entry-content::before, html[data-theme="dark"] .entry-content::after, html[data-theme="dark"] .wp-block-group::before, html[data-theme="dark"] .wp-block-group::after { content: none !important; display: none !important; } /* === QURVEY DARK ABSOLUTE FIX — kills any background left === */ html[data-theme="dark"] body.page, html[data-theme="dark"] body.page-template-default, html[data-theme="dark"] body[class*="page-id-"], html[data-theme="dark"] body.wp-singular { background: transparent !important; border: none !important; box-shadow: none !important; } /* иногда фон задаёт именно article */ html[data-theme="dark"] article, html[data-theme="dark"] .post { background: transparent !important; border: none !important; box-shadow: none !important; } /* оставляем только твою основную карточку */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .page-content { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important; position: relative; z-index: 3; } /* === QURVEY DARK — FINAL FIX (remove inner WP block wrapper) === */ html[data-theme="dark"] .wp-block-group.alignfull, html[data-theme="dark"] .wp-block-group.alignwide, html[data-theme="dark"] .wp-block-cover, html[data-theme="dark"] .wp-block-cover__inner-container { background: transparent !important; border: none !important; box-shadow: none !important; } /* доп. для некоторых тем */ html[data-theme="dark"] .wp-block-group.alignfull>div, html[data-theme="dark"] .wp-block-group.alignwide>div { background: transparent !important; } /* === QURVEY DARK — REMOVE INNER BOX FINAL PATCH (2025) === */ html[data-theme="dark"] .site-content, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .wp-block-group, html[data-theme="dark"] .wp-block-group__inner-container, html[data-theme="dark"] .container, html[data-theme="dark"] .row, html[data-theme="dark"] article, html[data-theme="dark"] .post { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 auto !important; } /* Убираем псевдоэлементы, рисующие внутренний квадрат */ html[data-theme="dark"] .site-content::before, html[data-theme="dark"] .site-content::after, html[data-theme="dark"] .entry-content::before, html[data-theme="dark"] .entry-content::after, html[data-theme="dark"] .wp-block-group::before, html[data-theme="dark"] .wp-block-group::after { content: none !important; display: none !important; } /* Основная карточка остаётся */ html[data-theme="dark"] .page-content, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .index-card { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important; position: relative; z-index: 2; } /* ======================================================= QURVEY DARK THEME — FIX FOR DUPLICATE BACKGROUNDS Applies to Terms / Privacy / Features pages ======================================================= */ html[data-theme="dark"] body, html[data-theme="dark"] .main-content, html[data-theme="dark"] .container, html[data-theme="dark"] .row, html[data-theme="dark"] .col-md-8 { background: transparent !important; border: none !important; box-shadow: none !important; } /* Убираем серый фон и рамки у Bootstrap-карточек */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: rgba(20, 24, 30, 0.95) !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important; } /* Чистим псевдоэлементы (они создавали второй слой) */ html[data-theme="dark"] .container::before, html[data-theme="dark"] .container::after, html[data-theme="dark"] .row::before, html[data-theme="dark"] .row::after, html[data-theme="dark"] .col-md-8::before, html[data-theme="dark"] .col-md-8::after { content: none !important; display: none !important; } /* Заголовки и текст в тёмной теме — чистый контраст */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] p, html[data-theme="dark"] li { color: #f5f5f5 !important; } /* Убираем серые полосы WordPress/Theme вокруг контента */ html[data-theme="dark"] .site, html[data-theme="dark"] .content-area, html[data-theme="dark"] .site-content { background: transparent !important; box-shadow: none !important; border: none !important; } /* ======================================================= QURVEY DARK THEME — FINAL GLASS CARD FIX Removes double background and nested box shadows ======================================================= */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: rgba(20, 24, 30, 0.96) !important; /* единый фон */ border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 18px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(8px) !important; } /* убираем внутренние тени и полупрозрачные фоны */ html[data-theme="dark"] .index-card * { background: transparent !important; box-shadow: none !important; } /* контейнеры вокруг карточки — без фона */ html[data-theme="dark"] .main-content, html[data-theme="dark"] .container, html[data-theme="dark"] .row, html[data-theme="dark"] .col-md-8 { background: transparent !important; border: none !important; box-shadow: none !important; } /* выравниваем текстовый контраст */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] p, html[data-theme="dark"] li { color: #f3f6fa !important; } /* ======================================================= QURVEY DARK THEME — MICRO FIX (remove inner overlay) ======================================================= */ html[data-theme="dark"] .index-card section, html[data-theme="dark"] .index-card ul, html[data-theme="dark"] .index-card li, html[data-theme="dark"] .index-card p { background: transparent !important; box-shadow: none !important; border: none !important; } /* ======================================================= QURVEY DARK — ULTIMATE FIX (no inner layers at all) ======================================================= */ /* убираем псевдоэлементы Bootstrap/WordPress */ html[data-theme="dark"] .index-card::before, html[data-theme="dark"] .index-card::after, html[data-theme="dark"] .terms-content::before, html[data-theme="dark"] .terms-content::after, html[data-theme="dark"] .page-content::before, html[data-theme="dark"] .page-content::after { content: none !important; background: none !important; box-shadow: none !important; border: none !important; } /* очищаем фон и тени всех вложенных блоков */ html[data-theme="dark"] .index-card *, html[data-theme="dark"] .terms-content *, html[data-theme="dark"] .page-content * { background: transparent !important; box-shadow: none !important; } /* сам блок — ровный тёмный стеклянный слой */ html[data-theme="dark"] .index-card, html[data-theme="dark"] .terms-content, html[data-theme="dark"] .page-content { background: rgba(16, 20, 26, 0.96) !important; border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(8px) !important; } /* ========================================================== QURVEY SETTINGS — PREMIUM MODALS + BUTTONS (GLASS 2025) ========================================================== */ /* === SETTINGS WRAPPER === */ .settings-wrapper { display: flex; flex-direction: column; gap: 40px; padding: 40px; } /* === HEADINGS === */ .settings-section h2 { font-family: "Eurostile", sans-serif; font-size: 22px; color: #0057b7; margin-bottom: 15px; } /* === SETTINGS CARD === */ .settings-card { background: var(--q-bg-card, #fff); border-radius: 18px; padding: 25px 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } html[data-theme="dark"] .settings-card { background: rgba(255, 255, 255, 0.05); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); } .settings-card:hover { transform: translateY(-2px); } /* === FORM ELEMENTS === */ .settings-card label { font-weight: 600; display: block; margin-top: 10px; color: var(--q-text, #222); } .settings-card input, .settings-card select { width: 100%; padding: 10px 14px; margin-top: 6px; border-radius: 8px; border: 1px solid #ccc; font-size: 15px; transition: all 0.2s ease; } html[data-theme="dark"] .settings-card input, html[data-theme="dark"] .settings-card select { background: #0f1a25; color: #eee; border: 1px solid #333; } /* === BUTTON STYLES === */ .settings-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .btn-primary, .btn-edit, .btn-save, .plan-option button { background-color: #0057b7; color: #fff; border: none; border-radius: 10px; padding: 9px 18px; cursor: pointer; font-weight: 600; transition: 0.3s; } .btn-primary:hover, .btn-edit:hover, .btn-save:hover, .plan-option button:hover { background-color: #014a9b; } .btn-secondary { background-color: #f1f1f1; color: #333; border: none; border-radius: 10px; padding: 9px 18px; cursor: pointer; font-weight: 600; transition: 0.3s; } .btn-secondary:hover { background-color: #ddd; } html[data-theme="dark"] .btn-secondary { background-color: #222; color: #eee; } html[data-theme="dark"] .btn-secondary:hover { background-color: #333; } /* ========================================================== MODALS (Change Plan / Top Up / Payment History) ========================================================== */ #modalOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } #modalOverlay.active { opacity: 1; visibility: visible; pointer-events: all; } /* Модальное окно */ .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 95%; max-width: 720px; background: #fff; padding: 28px 32px; border-radius: 18px; box-shadow: 0 12px 45px rgba(0, 0, 0, 0.25); /* выше overlay */ opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000000 !important; } .modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* Тёмная тема */ html[data-theme="dark"] .modal { background: #0f1a25; color: #eee; box-shadow: 0 8px 35px rgba(0, 0, 0, 0.7); } /* Заголовок */ .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-header h3 { font-size: 20px; color: #0057b7; font-family: "Eurostile", sans-serif; } .modal-close { background: none; border: none; font-size: 24px; color: #888; cursor: pointer; transition: 0.2s; } .modal-close:hover { color: #000; } /* Контент модалки */ .modal-body { display: flex; flex-direction: column; gap: 20px; } /* ========================================================== TOP UP MODAL — PREMIUM STYLE ========================================================== */ /* Обновлённый контейнер */ #topUpModal .modal-body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; } /* Лейбл */ #topUpModal .modal-body label { font-size: 16px; font-weight: 600; color: #1a1a1a; } /* Поле ввода */ #topUpModal input#topUpAmount { padding: 14px 16px; border-radius: 12px; border: 1px solid #dcdcdc; font-size: 16px; outline: none; transition: 0.25s; background: #fafafa; } #topUpModal input#topUpAmount:focus { border-color: #0057b7; background: #fff; box-shadow: 0 0 8px rgba(0, 87, 183, 0.25); } /* Кнопка */ #topUpModal #confirmTopUpBtn { width: 100%; margin-top: 10px; padding: 14px; font-size: 17px; border-radius: 12px; font-weight: 600; background: #0057b7; color: #fff; transition: 0.25s; } #topUpModal #confirmTopUpBtn:hover { background: #004a9c; box-shadow: 0 4px 12px rgba(0, 87, 183, 0.25); } /* Тёмная тема */ html[data-theme="dark"] #topUpModal .modal-body label { color: #e5e5e5; } html[data-theme="dark"] #topUpModal input#topUpAmount { background: #12202b; border-color: #2b4253; color: #fff; } html[data-theme="dark"] #topUpModal input#topUpAmount:focus { background: #152735; border-color: #007eed; box-shadow: 0 0 8px rgba(0, 126, 237, 0.35); } html[data-theme="dark"] #topUpModal #confirmTopUpBtn { background: #007eed; } html[data-theme="dark"] #topUpModal #confirmTopUpBtn:hover { background: #006bcc; } /* Варианты планов */ .plan-option { border: 1px solid #ddd; border-radius: 12px; padding: 16px 20px; transition: 0.25s; } .plan-option:hover { border-color: #0057b7; box-shadow: 0 0 15px rgba(0, 87, 183, 0.15); } .plan-option h4 { margin: 0 0 6px; font-size: 17px; } .plan-option p { font-size: 14px; color: #555; margin: 0 0 10px; } /* Dark mode */ html[data-theme="dark"] .plan-option { border-color: #333; background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .plan-option:hover { background: rgba(0, 87, 183, 0.15); } /* ========================================================== ADAPTIVE DESIGN ========================================================== */ @media (max-width: 768px) { .modal { width: 92%; padding: 22px; } .modal-header h3 { font-size: 18px; } .plan-option { padding: 12px 14px; } .btn-primary, .btn-secondary { width: 100%; } } .input-error { border-color: #dc3545 !important; box-shadow: 0 0 5px rgba(220, 53, 69, 0.25); } .validation-hint { font-size: 13px; color: #dc3545; margin-top: 4px; display: none; } body.modal-open { overflow: hidden !important; } .qc-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); z-index: 1000; width: 480px; max-width: 90%; opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* Плавное появление */ .qc-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* === Qurvey Cabinet — Global Font Fix (Montserrat everywhere) === */ .qc-wrap, .qc-content, .qc-sidebar, .qc-panel, .qc-panel *, .project-card, .project-card *, .settings-block, .settings-block *, .settings-card, .settings-card *, .qc-link, .qc-link *, .qc-table, .qc-table *, .qc-balance, .qc-balance *, .modal, .modal *, button, input, select, textarea { font-family: 'Montserrat', sans-serif !important; } /* === FIX 2 — Sidebar должен быть голубой, как на эталоне === */ .qc-sidebar { background: linear-gradient(180deg, #cfe0ff 0%, #b3cbff 100%) !important; border-right: 1px solid rgba(0, 0, 0, 0.05); padding: 30px 25px !important; width: 360px !important; } .qc-menu { width: 250px; } /* === FIX 3 — Карточки проектов (как в примере) === */ .project-card { background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important; padding: 24px 26px !important; border: 0 !important; } /* === FIX 4 — Buttons === */ .qc-link.is-active { background: #0057b7 !important; color: white !important; border-radius: 12px !important; } .qc-link { border-radius: 12px !important; background: rgba(255, 255, 255, 0.7); padding: 12px 16px !important; } /* === FIX 5 — Заголовки на страницах === */ .qc-content h1 { color: #0a3c8c !important; font-weight: 700 !important; margin-bottom: 25px !important; } /* ==== FIX: remove double boxes on front pages (Dark Mode) ==== */ /* Прибираємо картку з внутрішнього .terms-content */ html[data-theme="dark"] .terms-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; /* важливо: щоб не лишався внутрішній “бокс” */ } /* Зберігаємо картку лише на index-card */ html[data-theme="dark"] .index-card { background: linear-gradient(180deg, #161b22, #0f141b) !important; border: 1px solid rgba(255, 255, 255, .04) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .6) !important; border-radius: 14px !important; padding: 28px 32px !important; } /* ==== DARK MODE: better highlight , text ==== */ html[data-theme="dark"] .index-card b, html[data-theme="dark"] .index-card strong, html[data-theme="dark"] .terms-content b, html[data-theme="dark"] .terms-content strong, html[data-theme="dark"] .page-content b, html[data-theme="dark"] .page-content strong { color: #4da3ff !important; /* яскравий чистий синій */ font-weight: 700 !important; } /* ==== DARK MODE: iOS glass-outline button for Terms of Service ==== */ html[data-theme="dark"] .offer-button { display: inline-block; background: rgba(255, 255, 255, 0.04) !important; border: 1.3px solid rgba(255, 255, 255, 0.18) !important; color: #e7eeff !important; padding: 12px 28px !important; border-radius: 14px !important; font-family: "Montserrat", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.03), 0 3px 12px rgba(0, 0, 0, 0.45) !important; transition: all .25s ease !important; } /* Hover — м'яке світіння, як у iOS */ html[data-theme="dark"] .offer-button:hover { border-color: rgba(77, 163, 255, 0.55) !important; color: #4da3ff !important; box-shadow: inset 0 0 16px rgba(77, 163, 255, 0.12), 0 4px 18px rgba(77, 163, 255, .35) !important; transform: translateY(-2px) !important; } /* Remove extra dark wrapper on legal pages */ html[data-theme="dark"] .row.justify-content-center { background: transparent !important; box-shadow: none !important; border: none !important; } /* FIX: remove double dark card on legal pages */ html[data-theme="dark"] .page-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ===== FIX dashboard modal for dark theme ===== */ html[data-theme="dark"] .qc-dashboard { background: #1b1f28 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 0 25px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .qc-dashboard * { color: #e5e5e5 !important; } html[data-theme="dark"] .qc-dashboard .dash-item { background: rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; padding: 8px 12px !important; } html[data-theme="dark"] .qc-dashboard-close { color: #fff !important; }