/* =============================================================
* Design tokens: Purple (default) и Amber темы.
* Все компоненты ниже используют var(--*) поверх legacy-значений.
* Переключатель темы: data-theme="purple" | "amber" на .
* ============================================================= */
:root,
:root[data-theme="purple"] {
/* Soft Violet: десатурированный фиолетовый, мягче глазам.
Acent сдвинут с violet-500 (#8b5cf6) на более серо-сиреневый,
фон слегка осветлён, glow притушен до alpha 0.18. */
--bg-deep: #1a1828;
--bg-base: #221f33;
--bg-elevated: rgba(52, 44, 80, 0.4);
--card-bg: rgba(52, 44, 80, 0.55);
--card-bg-solid: #2a2540;
--border: rgba(169, 155, 214, 0.22);
--border-strong: rgba(169, 155, 214, 0.4);
--accent: #a99bd6;
--accent-2: #8aa4d6;
--accent-strong: #c0b3e8;
--accent-glow: rgba(169, 155, 214, 0.18);
--accent-glow-2: rgba(138, 164, 214, 0.15);
--accent-bg-soft: rgba(169, 155, 214, 0.12);
--text-bright: #f4f0ff;
--text: #dfd9f0;
--text-muted: #b8aed0;
--text-dim: #8e85a8;
--danger: #f87171;
--danger-bg: rgba(248, 113, 113, 0.12);
--success: #34d399;
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border);
--shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.55);
--glow-focus: 0 0 0 3px var(--accent-glow);
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--page-bg:
radial-gradient(circle at 0% 0%, rgba(169,155,214,0.08) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(138,164,214,0.06) 0%, transparent 50%),
#1a1828;
}
:root[data-theme="amber"] {
--bg-deep: #1a120a;
--bg-base: #2a1d12;
--bg-elevated: rgba(76, 47, 22, 0.4);
--card-bg: rgba(76, 47, 22, 0.55);
--card-bg-solid: #2a1d12;
--border: rgba(227, 176, 137, 0.25);
--border-strong: rgba(227, 176, 137, 0.45);
--accent: #e3b089;
--accent-2: #d4924f;
--accent-strong: #f0c79f;
--accent-glow: rgba(227, 176, 137, 0.35);
--accent-glow-2: rgba(212, 146, 79, 0.25);
--accent-bg-soft: rgba(227, 176, 137, 0.12);
--text-bright: #fff4e6;
--text: #f5e6d2;
--text-muted: #d4b89a;
--text-dim: #a89078;
--danger: #fb7185;
--danger-bg: rgba(251, 113, 133, 0.12);
--success: #4ade80;
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border);
--shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.55);
--glow-focus: 0 0 0 3px var(--accent-glow);
--page-bg:
radial-gradient(circle at 0% 0%, rgba(227,176,137,0.12) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(212,146,79,0.08) 0%, transparent 50%),
#1a120a;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
color: var(--text);
background: var(--page-bg);
background-attachment: fixed;
line-height: 1.6;
transition: background 0.3s ease, color 0.3s ease;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(1400px, 94%);
margin: 0 auto;
}
.site-header {
background: #fff6ed;
border-bottom: 1px solid #e8d8c8;
position: sticky;
top: 0;
z-index: 10;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.4px;
text-decoration: none;
color: inherit;
}
.logo-img {
width: 32px;
height: 32px;
display: block;
flex-shrink: 0;
}
.nav {
display: flex;
gap: 1rem;
align-items: center;
}
.nav-link {
padding: 0.4rem 0.7rem;
border-radius: 999px;
transition: background 0.2s ease;
}
.nav-link:hover {
background: #f0e2d2;
}
.nav-link.is-active {
background: #e3b089;
color: #2a1d15;
}
.user-info {
font-size: 0.85rem;
color: #5b3a26;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background: #f5e8d6;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="dark"] .user-info {
color: #e8d8c6;
background: #3a2f26;
}
.nav-logout {
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid #d8c4ad;
background: transparent;
color: #5b3a26;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-logout:hover {
background: #f0e2d2;
border-color: #c0a98c;
}
[data-theme="dark"] .nav-logout {
color: #e8d8c6;
border-color: #4a3d33;
}
[data-theme="dark"] .nav-logout:hover {
background: #3a2f26;
border-color: #6a5d50;
}
.header-cta {
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-header:hover .header-cta {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hero {
position: relative;
padding: 3rem 0 3.5rem;
background: linear-gradient(150deg, #fff9f5 0%, #fef2e8 45%, #fae5d2 100%);
background-color: #fff6ed;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
right: -8rem;
bottom: -10rem;
width: 36rem;
height: 36rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(201, 108, 75, 0.09) 0%, transparent 65%);
pointer-events: none;
}
.hero-eyebrow {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #c96c4b;
margin: 0 0 0.75rem;
}
.hero h1 {
font-size: clamp(1.9rem, 4vw, 2.8rem);
margin: 0 0 1rem;
line-height: 1.2;
}
.lead {
font-size: 1.05rem;
max-width: 560px;
color: #6d5a48;
line-height: 1.65;
}
.hero-actions {
margin-top: 1.75rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* ---------------------------------------------------------------
Секция "Как это устроено"
--------------------------------------------------------------- */
.section-title {
margin: 0 0 0.4rem;
font-size: 1.4rem;
}
.section-lead {
margin: 0 0 1.5rem;
font-size: 0.95rem;
}
.features-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.feature-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(91, 68, 47, 0.12);
border-color: #e3b089;
}
.feature-card h3 {
margin: 0;
font-size: 1rem;
}
.feature-card p {
margin: 0;
font-size: 0.9rem;
color: #6d5a48;
line-height: 1.55;
}
.feature-icon {
font-size: 1.75rem;
line-height: 1;
display: block;
margin-bottom: 0.3rem;
}
/* ---------------------------------------------------------------
Секция "Зачем это нужно"
--------------------------------------------------------------- */
.benefits-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: 1.25rem;
}
.benefit-item {
display: flex;
gap: 0.9rem;
align-items: flex-start;
}
.benefit-icon {
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 0.1rem;
line-height: 1;
}
.benefit-item strong {
display: block;
font-size: 0.95rem;
margin-bottom: 0.3rem;
color: #2b2a27;
}
.benefit-item p {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
}
.button {
background: #b08040;
color: #fff;
padding: 0.7rem 1.6rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
}
.button:hover {
background: #966c30;
}
.button-outline {
background: transparent;
color: #966c30;
border: 1px solid #b08040;
}
.button-ghost {
background: transparent;
color: #5b3a26;
border: 1px solid #d8c4ad;
}
.button-ghost:hover {
background: #f0e2d2;
}
.button-danger {
background: #c43d3d;
color: #fff;
border: none;
}
.button-danger:hover {
background: #a32b2b;
}
.button-danger:disabled {
opacity: 0.6;
cursor: not-allowed;
}
[data-theme="dark"] .button-ghost {
color: #e8d8c6;
border-color: #4a3d33;
}
[data-theme="dark"] .button-ghost:hover {
background: #3a2f26;
}
.sidebar-danger .danger-desc {
font-size: 0.85rem;
margin: 0 0 0.7rem;
line-height: 1.4;
}
/* --- Modal --- */
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 14, 10, 0.55);
}
.modal-content {
position: relative;
background: #fff;
border-radius: 12px;
padding: 1.5rem 1.75rem;
max-width: 460px;
width: calc(100% - 2rem);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.modal-title {
font-size: 1.15rem;
margin: 0 0 0.75rem;
color: #2a1d15;
}
.modal-text {
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 0.75rem;
color: #3d2a1e;
}
.modal-input {
width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid #d8c4ad;
border-radius: 6px;
font-size: 0.95rem;
margin-bottom: 1rem;
box-sizing: border-box;
}
.modal-actions {
display: flex;
gap: 0.7rem;
justify-content: flex-end;
}
[data-theme="dark"] .modal-content {
background: #2a221c;
color: #e8d8c6;
}
[data-theme="dark"] .modal-title { color: #f0e2d2; }
[data-theme="dark"] .modal-text { color: #d8c4ad; }
[data-theme="dark"] .modal-input {
background: #1f1813;
color: #e8d8c6;
border-color: #4a3d33;
}
.section {
padding: 2.5rem 0;
}
.section-muted {
background: #fff6ed;
}
.grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 1.8rem;
}
.card {
background: #ffffff;
border: 1px solid #efe0d2;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 6px 16px rgba(91, 68, 47, 0.08);
transition: border-color 0.2s ease;
}
.card:hover {
border-color: #b08040;
}
.entity-flow {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
color: #6d5a48;
font-weight: 600;
}
.flow-node {
background: #fff6ed;
border: 1px solid #efe0d2;
border-radius: 999px;
padding: 0.35rem 0.9rem;
}
.flow-arrow {
color: #c96c4b;
animation: flowPulse 1.8s ease-in-out infinite;
}
@keyframes flowPulse {
0% {
opacity: 0.4;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(4px);
}
100% {
opacity: 0.4;
transform: translateX(0);
}
}
.list {
padding-left: 1.2rem;
}
.site-footer {
border-top: 1px solid #e8d8c8;
background: #fff6ed;
padding: 0.75rem 0;
margin-top: 2rem;
}
.footer-content {
font-size: 0.95rem;
}
.footer-line {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
color: #6d5a48;
}
.footer-sep {
margin: 0 0.35rem;
color: #a08b76;
user-select: none;
}
.footer-about {
color: #6d5a48;
}
.footer-contact a {
color: #8e4c34;
font-weight: 600;
}
.footer-contact a:hover {
text-decoration: underline;
}
.footer-separator {
margin: 0 0.5rem;
}
.auth-page {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2.5rem 1.5rem 3rem;
}
.auth-card {
background: #ffffff;
padding: 2rem 2.25rem 2.25rem;
border-radius: 16px;
border: 1px solid #efe0d2;
width: min(440px, 100%);
box-shadow: 0 12px 32px rgba(91, 68, 47, 0.1);
}
.auth-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-size: 1.15rem;
font-weight: 700;
color: #2b2a27;
margin-bottom: 1.5rem;
}
.auth-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #efe0d2;
margin-bottom: 1.25rem;
}
.auth-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
padding: 0.55rem 1.1rem;
font-size: 0.95rem;
font-weight: 600;
color: #6d5a48;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.auth-tab:hover {
color: #2b2a27;
}
.auth-tab--active {
color: #c96c4b;
border-bottom-color: #c96c4b;
}
.auth-desc {
margin: 0 0 1rem;
font-size: 0.9rem;
}
.auth-form {
margin-top: 0;
gap: 0.85rem;
}
.auth-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.auth-submit {
width: 100%;
margin-top: 0.25rem;
justify-content: center;
display: flex;
}
.auth-form .field input {
min-height: 2.75rem;
padding: 0.6rem 1rem;
font-size: 1rem;
font-weight: 500;
border-radius: 10px;
border: 1px solid #e2d0bf;
background-color: #fffbf7;
color: #5c4a3a;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
width: 100%;
}
.auth-form .field input:hover {
border-color: #e3b089;
}
.auth-form .field input:focus {
outline: none;
border-color: #c96c4b;
box-shadow: 0 0 0 2px rgba(201, 108, 75, 0.2);
}
[data-theme="dark"] .auth-form .field input {
background: #1f1c18;
border-color: #4a3e34;
color: #e2d8d0;
}
[data-theme="dark"] .auth-form .field input::placeholder {
color: #5a4e44;
}
[data-theme="dark"] .auth-form .field input:focus {
border-color: #e07a58;
box-shadow: 0 0 0 2px rgba(224, 122, 88, 0.2);
}
.field-hint {
font-weight: 400;
font-size: 0.82rem;
color: #a08b76;
}
/* ---------------------------------------------------------------
Toast-уведомления
--------------------------------------------------------------- */
.toast {
position: fixed;
top: 1.25rem;
right: 1.25rem;
z-index: 9999;
background: #2b2a27;
color: #f0ece8;
padding: 0.8rem 2.5rem 0.8rem 1rem;
border-radius: 10px;
font-size: 0.9rem;
line-height: 1.45;
max-width: 360px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
border-left: 3px solid #c96c4b;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.toast--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.toast--error {
border-left-color: #e07a58;
}
.toast--info {
border-left-color: #6ab888;
}
.toast-close {
position: absolute;
top: 0.5rem;
right: 0.6rem;
background: none;
border: none;
color: #a09080;
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
padding: 0.1rem 0.25rem;
}
.toast-close:hover {
color: #f0ece8;
}
[data-theme="dark"] .toast {
background: #1f1c18;
border-color: #3a3028;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .toast--error {
border-left-color: #e07a58;
}
[data-theme="dark"] .toast--info {
border-left-color: #6ab888;
}
.muted {
color: #6d5a48;
}
.form {
margin-top: 1.5rem;
display: grid;
gap: 1rem;
}
.field {
display: grid;
gap: 0.4rem;
font-weight: 600;
}
.field input {
padding: 0.7rem 0.9rem;
border-radius: 8px;
border: 1px solid #e2d0bf;
font-size: 1rem;
}
.field input:focus {
outline: 2px solid #e3b089;
border-color: #c96c4b;
}
.form-message {
min-height: 1.2rem;
color: #8e4c34;
font-size: 0.9rem;
}
.page-header {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1.5rem;
}
.page-header-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.form-card {
margin-bottom: 1.5rem;
}
.form-card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
}
.form-card-actions .section-message {
min-height: 1.2rem;
margin: 0;
}
.agent-clear-btn {
margin-top: 0.5rem;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
background: transparent;
border: 1px solid var(--border, #d4c4b0);
color: var(--muted, #6d5a48);
}
.agent-clear-btn:hover {
background: var(--bg-muted, #f5efe8);
color: var(--text, #3a2e24);
}
[data-theme="dark"] .agent-clear-btn {
border-color: #4a3f35;
color: #a89880;
}
[data-theme="dark"] .agent-clear-btn:hover {
background: #2e2820;
color: #e8ddd0;
}
/* Подравниваем высоту кнопок агентов */
#prepare-meeting-button,
#concierge-button {
min-height: 2.25rem;
padding: 0.4rem 1.2rem;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
}
/* Единый объёмный стиль полей для всех форм (карточка контакта, Связи, Взаимодействия, добавление контакта) */
.form-card .field input:not([type="checkbox"]):not([type="radio"]),
.form-card .field select,
.form-card .field textarea,
.form-card .contact-autocomplete input[type="text"],
.form-card .contact-autocomplete input[type="search"] {
min-height: 2.75rem;
padding: 0.6rem 1rem;
font-size: 1rem;
font-weight: 500;
border-radius: 10px;
border: 1px solid #e2d0bf;
background-color: #fffbf7;
color: #5c4a3a;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-card .field textarea {
min-height: 4rem;
resize: vertical;
font-family: inherit;
}
.form-card .field input:not([type="checkbox"]):not([type="radio"]):hover,
.form-card .field select:hover,
.form-card .field textarea:hover,
.form-card .contact-autocomplete input[type="text"]:hover,
.form-card .contact-autocomplete input[type="search"]:hover {
border-color: #c9a050;
}
.form-card .field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-card .field select:focus,
.form-card .field textarea:focus,
.form-card .contact-autocomplete input[type="text"]:focus,
.form-card .contact-autocomplete input[type="search"]:focus {
outline: none;
border-color: #b08040;
box-shadow: 0 0 0 2px rgba(176, 128, 64, 0.2);
}
.form-card .field select {
cursor: pointer;
}
.add-contact-compact {
margin-bottom: 1.5rem;
padding: 0.9rem 1.25rem;
}
.add-contact-compact h2 {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #3a2e24;
margin: 0 0 0.85rem;
}
.add-contact-compact .field > span {
font-size: 0.8rem;
font-weight: 400;
color: #6d5a48;
}
.add-contact-compact .field input:not([type="checkbox"]):not([type="radio"]) {
min-height: 2.75rem;
padding: 0.55rem 0.95rem;
font-size: 0.95rem;
}
.add-contact-compact .form-inline-compact {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.75rem;
}
.add-contact-compact .form-inline-compact .field {
flex: 1 1 160px;
min-width: 0;
}
.add-contact-compact .form-inline-compact .form-message {
flex-basis: 100%;
margin: 0;
min-height: 0;
order: 10;
}
.add-contact-compact .form-inline-compact .button {
flex: 1 1 160px;
align-self: flex-end;
order: 5;
min-height: 2.75rem;
padding: 0.55rem 1rem;
font-size: 0.95rem;
}
/* Переключатель режимов поиска */
.search-mode-switcher {
display: flex;
gap: 0;
margin-bottom: 0.85rem;
background: #f5ede0;
border-radius: 8px;
padding: 0.2rem;
width: fit-content;
}
.search-mode-btn {
background: transparent;
border: none;
border-radius: 6px;
padding: 0.3rem 0.9rem;
font-size: 0.8rem;
font-weight: 600;
color: #8a7060;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.search-mode-btn.is-active {
background: #fff;
color: #3a2e24;
box-shadow: 0 1px 3px rgba(91, 68, 47, 0.15);
}
.search-mode-panel {
margin-top: 0;
}
.search-mode-hint {
margin-bottom: 0.6rem !important;
}
/* Компактный вид карточек ИИ-агента и глубокого поиска */
.form-card:has(#fulltext-form) {
padding: 0.9rem 1.25rem;
}
.form-card:has(#fulltext-form) h2 {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #3a2e24;
margin: 0 0 0.85rem;
}
.form-card:has(#fulltext-form) .muted:not(.meeting-agent-result) {
font-size: 0.8rem;
font-weight: 400;
color: #6d5a48;
margin-top: -0.5rem;
margin-bottom: 0.6rem;
}
.form-card:has(#fulltext-form) .field input,
.form-card:has(#contacts-search) .field input {
min-height: 2.25rem;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.form-card:has(#fulltext-form) .button {
min-height: 2.25rem;
padding: 0.4rem 1rem;
font-size: 0.8rem;
flex-shrink: 0;
white-space: nowrap;
}
#fulltext-form {
display: flex;
align-items: flex-end;
gap: 0.75rem;
margin-top: 0;
}
#fulltext-form .field {
flex: 1;
min-width: 0;
margin: 0;
}
/* Карточки ИИ-агентов */
.form-card:has(#prepare-meeting-form),
.form-card:has(#concierge-form) {
padding: 0.9rem 1.25rem;
}
.form-card:has(#prepare-meeting-form) h2,
.form-card:has(#concierge-form) h2 {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #3a2e24;
margin: 0 0 0.85rem;
}
.form-card:has(#prepare-meeting-form) .field input,
.form-card:has(#prepare-meeting-form) .field select,
.form-card:has(#prepare-meeting-form) .contact-autocomplete input {
min-height: 2.25rem;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.form-card:has(#concierge-form) .field textarea {
min-height: 2.25rem;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
resize: none;
}
/* Поле «Контакт» / «Запрос»: мелкий muted текст как описание */
#prepare-meeting-form .field > span,
#concierge-form .field > span {
font-size: 0.8rem;
font-weight: 400;
color: #6d5a48;
}
/* Форма: поле растягивается, кнопка прижата вправо */
#prepare-meeting-form,
#concierge-form {
display: flex;
align-items: flex-end;
gap: 0.75rem;
margin-top: 0;
}
#prepare-meeting-form .field,
#concierge-form .field {
flex: 1;
min-width: 0;
margin: 0;
}
#prepare-meeting-form .form-card-actions,
#concierge-form .form-card-actions {
flex-shrink: 0;
margin-top: 0;
}
.form-inline-compact {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1rem;
align-items: end;
}
.form-inline-compact .field {
margin: 0;
}
/* occurred_at | channel */
.form-inline-compact .field:nth-child(1) { grid-column: 1; grid-row: 1; }
.form-inline-compact .field:nth-child(2) { grid-column: 2; grid-row: 1; }
/* notes — полная ширина */
.form-inline-compact .field:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
/* promises_mine | promises_theirs */
.form-inline-compact .field:nth-child(4) { grid-column: 1; grid-row: 3; }
.form-inline-compact .field:nth-child(5) { grid-column: 2; grid-row: 3; }
.form-inline-compact .form-message { grid-column: 1 / -1; grid-row: 4; }
.form-inline-compact .form-actions-inline { grid-column: 1 / -1; }
@media (max-width: 640px) {
.form-inline-compact {
grid-template-columns: 1fr;
}
.form-inline-compact .field:nth-child(1),
.form-inline-compact .field:nth-child(2),
.form-inline-compact .field:nth-child(3),
.form-inline-compact .field:nth-child(4),
.form-inline-compact .field:nth-child(5) {
grid-column: 1;
grid-row: auto;
}
}
/* ---------------------------------------------------------------
Лейаут страницы контакта
--------------------------------------------------------------- */
/* Вертикальный контейнер всех блоков с равными отступами */
.contact-layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Горизонтальная строка из двух карточек одинаковой высоты */
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: stretch;
margin: 0;
}
/* Карточки внутри строки — flex-колонка чтобы кнопка прижималась к низу */
.contact-row .form-card {
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.contact-row .form-card-actions {
margin-top: auto;
padding-top: 1rem;
}
/* Одиночная карточка не в строке (например, Связи) */
.contact-layout > .form-card {
margin-bottom: 0;
}
/* Единая высота кнопок на странице контакта — как у кнопки «Редактировать» */
.contact-layout .button,
.page-actions .button {
padding-top: 0.45rem;
padding-bottom: 0.45rem;
font-size: 0.9rem;
}
/* Внутренние поля в form-карточке (contact-plans-form) */
.inner-form {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.inner-form .form-card-actions {
margin-top: auto;
padding-top: 1rem;
}
@media (max-width: 768px) {
.contact-row {
grid-template-columns: 1fr;
}
}
/* Заголовки карточек */
.card-title {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 700;
color: #2b2a27;
}
.form-subtitle {
margin-top: 1.25rem;
margin-bottom: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: #6d5a48;
}
/* Разделитель (оставляем на случай использования) */
.section-divider {
height: 1px;
background: #efe0d2;
margin: 1.5rem 0;
}
/* Метки направления обещаний */
.promise-direction {
font-size: 0.8rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 4px;
margin-right: 0.25rem;
}
.promise-direction--mine {
background: #e8f4ea;
color: #14502a !important;
}
.promise-direction--theirs {
background: #fdf0e8;
color: #5a2d1a !important;
}
.contacts-search-wrap input {
min-width: 200px;
padding: 0.5rem 0.75rem;
border-radius: 8px;
border: 1px solid #e2d0bf;
font-size: 0.95rem;
}
.contacts-search-wrap input:focus {
outline: 2px solid #e3b089;
border-color: #c96c4b;
}
/* Автодополнение контакта в форме «Связи» */
.contact-autocomplete {
position: relative;
overflow: visible;
}
.contact-autocomplete input[type="text"],
.contact-autocomplete input[type="search"] {
width: 100%;
min-width: 200px;
padding: 0.5rem 0.75rem;
border-radius: 8px;
border: 1px solid #e2d0bf;
font-size: 0.95rem;
box-sizing: border-box;
}
.contact-autocomplete input[type="text"]:focus,
.contact-autocomplete input[type="search"]:focus {
outline: 2px solid #e3b089;
border-color: #c96c4b;
}
.contact-suggestions {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin: 0.25rem 0 0;
padding: 0.25rem 0;
list-style: none;
background: var(--card-bg-solid);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
max-height: 240px;
overflow-y: auto;
z-index: 100;
display: none;
color: var(--text);
}
.contact-suggestions.contact-suggestions-visible {
display: block;
}
.contact-suggestions li {
padding: 0.5rem 0.75rem;
cursor: pointer;
}
.contact-suggestions li:hover {
background: var(--accent-bg-soft);
color: var(--text-bright);
}
.contact-suggestions li.contact-suggestions-message {
color: var(--text-muted);
cursor: default;
}
.contact-suggestions li.contact-suggestions-message:hover {
background: transparent;
}
.contact-suggestions li.contact-suggestions-message[data-retry="1"] {
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-suggestions li.contact-suggestions-message[data-retry="1"]:hover {
background: var(--accent-bg-soft);
}
/* Подняeт form-card с открытым dropdown поверх соседних карточек.
`.form-card` имеет backdrop-filter, который создаёт собственный
stacking context — поэтому z-index dropdown'а внутри неё локален,
и соседняя карточка по document order'у перекрывает его. */
.form-card:has(.contact-suggestions.contact-suggestions-visible) {
position: relative;
z-index: 50;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.list-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.list-header h2 {
margin: 0;
}
.list-header-search {
flex: 1 1 auto;
min-width: 180px;
}
.list-header-search input {
width: 100%;
box-sizing: border-box;
}
.list-filters {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
margin-bottom: 1rem;
}
.list-filters .field-inline {
grid-auto-flow: row;
align-items: stretch;
gap: 0.2rem;
min-width: 0;
}
.list-filters .field-inline > span {
font-size: 0.75rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-filters .field-inline select {
width: 100%;
min-width: 0;
padding-inline: 0.6rem;
box-sizing: border-box;
}
@media (max-width: 720px) {
.list-filters {
grid-template-columns: repeat(2, 1fr);
}
}
.button-header-action {
min-height: 2.75rem;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.field-inline {
grid-auto-flow: column;
align-items: center;
gap: 0.6rem;
}
.field-inline select {
padding: 0.5rem 0.7rem;
border-radius: 8px;
border: 1px solid #e2d0bf;
}
/* Форма «Связи»: чекбокс ближе к подписи */
.link-form-directed {
gap: 0.35rem;
}
.checkbox-link-directed {
width: 1.35rem;
height: 1.35rem;
margin: 0;
cursor: pointer;
accent-color: #c96c4b;
flex-shrink: 0;
}
.link-form-directed span {
font-weight: 500;
cursor: pointer;
user-select: none;
}
.contact-card h3 {
margin-top: 0;
}
.contact-card-link {
display: block;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card-link:hover {
border-color: #e3b089;
box-shadow: 0 4px 12px rgba(91, 68, 47, 0.12);
}
.contact-tag {
font-size: 0.85rem;
color: #8e4c34;
}
.contact-meta {
display: grid;
gap: 0.3rem;
color: #6d5a48;
font-size: 0.95rem;
}
.page-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.back-link {
display: inline-block;
margin-bottom: 0.5rem;
color: #8e4c34;
font-size: 0.95rem;
}
.back-link:hover {
text-decoration: underline;
}
.contact-form-sections .field textarea {
padding: 0.7rem 0.9rem;
border-radius: 8px;
border: 1px solid #e2d0bf;
font-size: 1rem;
font-family: inherit;
resize: vertical;
}
.divider {
height: 1px;
background: #efe0d2;
margin: 2rem 0;
}
.form-actions-inline {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.button-small {
padding: 0.45rem 0.9rem;
font-size: 0.9rem;
}
.interactions-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.interaction-item {
background: var(--accent-bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.85rem 1rem;
margin-bottom: 0.6rem;
display: block;
}
.interaction-item:last-child {
margin-bottom: 0;
}
.interaction-header {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.35rem;
}
.interaction-channel-icon {
font-size: 1.15rem;
line-height: 1;
flex: 0 0 auto;
}
.interaction-meta {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem;
}
.interaction-date {
font-weight: 600;
color: var(--text-bright);
font-size: 0.95rem;
}
.interaction-channel-label {
font-size: 0.88rem;
color: var(--text-muted);
text-transform: lowercase;
}
.interaction-channel-label::before {
content: "— ";
opacity: 0.6;
}
.interaction-actions {
flex: 0 0 auto;
display: flex;
gap: 0.35rem;
}
.interaction-notes {
margin: 0.25rem 0 0.4rem 0;
color: var(--text);
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.interaction-promises-summary {
font-size: 0.85rem;
color: var(--text-muted);
}
.interaction-promises-summary strong {
color: var(--text);
font-weight: 600;
}
.button-outline.button-delete {
color: #b42318;
border-color: #b42318;
}
.button-outline.button-delete:hover {
background: rgba(180, 35, 24, 0.08);
}
.links-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.link-item {
padding: 0.9rem 0;
border-bottom: 1px solid #efe0d2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.link-item:last-child {
border-bottom: none;
}
.link-item-content {
flex: 1 1 200px;
min-width: 0;
}
.link-item-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.button-danger {
background: #b42318;
}
.button-danger:hover {
background: #922018;
}
/* plans-column — убираем верхний отступ form */
.plans-column {
gap: 1rem;
}
.promises-list ul {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
}
.promise-item {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.25rem;
border-bottom: 1px dashed #e0cdb7;
font-size: 0.95rem;
}
.promise-item:last-child {
border-bottom: none;
}
.promise-text {
flex: 1 1 auto;
min-width: 0;
}
.promise-completed-at {
flex: 0 0 auto;
font-size: 0.8rem;
white-space: nowrap;
}
.promise-complete-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.55rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--brand);
background: transparent;
border: 1px solid var(--brand);
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.promise-complete-btn:hover,
.promise-complete-btn:focus-visible {
background: var(--brand);
color: #fff;
}
.promise-icon-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
font-size: 0.9rem;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.promise-icon-btn:hover,
.promise-icon-btn:focus-visible {
color: var(--brand);
border-color: var(--brand);
}
.promise-icon-btn--danger:hover,
.promise-icon-btn--danger:focus-visible {
color: #c0392b;
border-color: #c0392b;
}
[data-theme="dark"] .promise-icon-btn:hover,
[data-theme="dark"] .promise-icon-btn:focus-visible {
color: #ffb994;
border-color: #ffb994;
}
[data-theme="dark"] .promise-icon-btn--danger:hover,
[data-theme="dark"] .promise-icon-btn--danger:focus-visible {
color: #e87070;
border-color: #e87070;
}
.promise-edit-wrap {
display: flex;
align-items: center;
gap: 0.35rem;
}
.promise-edit-input {
flex: 1 1 auto;
min-width: 0;
padding: 0.3rem 0.5rem;
font: inherit;
border: 1px solid var(--brand);
border-radius: 6px;
outline: none;
background: #fff;
}
[data-theme="dark"] .promise-edit-input {
background: #1f1813;
color: #e2d8d0;
border-color: #ffb994;
}
[data-theme="dark"] .promise-complete-btn {
color: #ffb994;
border-color: #ffb994;
}
[data-theme="dark"] .promise-complete-btn:hover,
[data-theme="dark"] .promise-complete-btn:focus-visible {
background: #ffb994;
color: #1a0f0a;
}
/* ---------------------------------------------------------------
Отступ между AI-агентом и списком контактов
--------------------------------------------------------------- */
.contacts-list {
margin-top: 2rem;
}
/* ---------------------------------------------------------------
Плашки контактов — тип отношений
--------------------------------------------------------------- */
.contact-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.contact-card-header h3 {
margin: 0;
font-size: 1rem;
line-height: 1.3;
}
.contact-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 0.15rem 0.55rem;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
background: #f0e2d2;
color: #6d5a48;
}
.contact-badge--business { background: #dde8f8; color: #2a508a; }
.contact-badge--colleague { background: #d8eef5; color: #1a6880; }
.contact-badge--client { background: #d5f0ec; color: #1a6e64; }
.contact-badge--partner { background: #e5def8; color: #5040a0; }
.contact-badge--mentor { background: #f5e8cc; color: #7a5a10; }
.contact-badge--mentee { background: #f8eccc; color: #906820; }
.contact-badge--personal { background: #ddf2e5; color: #2a7a4a; }
.contact-badge--friend { background: #d5f0e0; color: #1a7a48; }
.contact-badge--acquaintance { background: #eae6e0; color: #5a5048; }
.contact-badge--family { background: #f5dde8; color: #8a3a58; }
.contact-badge--other { background: #f0e2d2; color: #6d5a48; }
.contact-card-footer {
margin-top: 0.6rem;
padding-top: 0.5rem;
border-top: 1px solid #efe0d2;
font-size: 0.82rem;
color: #6d5a48;
}
.contact-last-seen {
color: #8e4c34;
font-weight: 500;
}
/* ---------------------------------------------------------------
Лэйаут страницы контактов (сайдбар)
--------------------------------------------------------------- */
.contacts-page-layout {
display: grid;
grid-template-columns: 1fr 260px;
gap: 1.5rem;
align-items: start;
}
.contacts-main {
min-width: 0;
}
.contacts-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: 5rem;
}
.sidebar-widget {
padding: 1.1rem 1.25rem;
}
.sidebar-action {
margin-top: 0.75rem;
width: 100%;
font-size: 0.85rem;
}
.field-checkbox {
flex-direction: row;
align-items: flex-start;
gap: 0.55rem;
cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
margin-top: 0.2rem;
flex-shrink: 0;
}
.field-checkbox > span {
font-weight: 400;
font-size: 0.9rem;
line-height: 1.4;
}
.sidebar-widget-title {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #8a7060;
margin: 0 0 0.65rem;
}
.sidebar-contact-item {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.5rem 0;
border-bottom: 1px solid #efe0d2;
text-decoration: none;
color: inherit;
transition: color 0.15s;
}
.sidebar-contact-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sidebar-contact-item:hover .sidebar-contact-name {
color: #c96c4b;
}
.sidebar-contact-name {
font-size: 0.9rem;
font-weight: 600;
color: #3a2e24;
transition: color 0.15s;
}
.sidebar-contact-meta {
font-size: 0.78rem;
color: #9a8070;
}
.sidebar-empty {
font-size: 0.85rem;
margin: 0;
}
.stats-total {
font-size: 0.82rem;
color: #6d5a48;
margin-bottom: 0.6rem;
}
.stats-total strong {
color: #3a2e24;
font-weight: 700;
}
.stats-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.stats-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
}
.stats-label {
color: #5c4a3a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stats-bar-wrap {
width: 48px;
height: 4px;
background: #efe0d2;
border-radius: 2px;
overflow: hidden;
}
.stats-bar {
display: block;
height: 100%;
background: #b08040;
border-radius: 2px;
min-width: 2px;
transition: width 0.4s ease;
}
.stats-count {
color: #8a7060;
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 1.5rem;
}
@media (max-width: 1024px) {
.contacts-page-layout {
grid-template-columns: 1fr;
}
.contacts-sidebar {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.contacts-sidebar > .card {
flex: 1 1 240px;
}
}
@media (max-width: 560px) {
.contacts-sidebar {
flex-direction: column;
}
}
/* ---------------------------------------------------------------
Кнопка переключения темы
--------------------------------------------------------------- */
.theme-toggle {
background: transparent;
border: 1px solid #e2d0bf;
border-radius: 999px;
padding: 0.35rem 0.7rem;
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: background 0.15s ease, border-color 0.15s ease;
color: inherit;
}
.theme-toggle:hover {
background: #f0e2d2;
border-color: #c96c4b;
}
/* ---------------------------------------------------------------
Тёмная тема
--------------------------------------------------------------- */
[data-theme="dark"] body {
background: #1a1714;
color: #e2d8d0;
}
[data-theme="dark"] .site-header {
background: #1f1c18;
border-color: #362f29;
}
[data-theme="dark"] .card {
background: #242019;
border-color: #3a3028;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .card:hover {
border-color: #c89448;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .nav-link:hover {
background: #302a24;
}
[data-theme="dark"] .nav-link.is-active {
background: #5a3a28;
color: #e2d8d0;
}
[data-theme="dark"] .muted,
[data-theme="dark"] .contact-meta,
[data-theme="dark"] .text-muted {
color: #9e8878;
}
[data-theme="dark"] .button {
background: #c89448;
}
[data-theme="dark"] .button:hover {
background: #b08040;
}
[data-theme="dark"] .button-outline {
color: #e2d8d0;
border-color: #6a5a50;
}
[data-theme="dark"] .button-outline:hover {
background: rgba(226, 216, 208, 0.1);
border-color: #e2d8d0;
}
[data-theme="dark"] .button-danger {
background: #c0392b;
}
[data-theme="dark"] .button-danger:hover {
background: #a93226;
}
[data-theme="dark"] .button-outline.button-delete {
color: #e2d8d0;
border-color: #6a5a50;
}
[data-theme="dark"] .button-outline.button-delete:hover {
background: rgba(232, 112, 112, 0.12);
border-color: #e87070;
color: #e87070;
}
[data-theme="dark"] .interaction-item,
[data-theme="dark"] .link-item {
border-color: #3a3028;
}
[data-theme="dark"] .form-card .field input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .form-card .field select,
[data-theme="dark"] .form-card .field textarea,
[data-theme="dark"] .form-card .contact-autocomplete input {
background: #1f1c18;
border-color: #4a3e34;
color: #e2d8d0;
}
[data-theme="dark"] .form-card .field input:focus,
[data-theme="dark"] .form-card .field select:focus,
[data-theme="dark"] .form-card .field textarea:focus {
border-color: #e07a58;
box-shadow: 0 0 0 2px rgba(224, 122, 88, 0.25);
}
[data-theme="dark"] .form-card:has(#prepare-meeting-form) h2,
[data-theme="dark"] .form-card:has(#concierge-form) h2,
[data-theme="dark"] .form-card:has(#fulltext-form) h2,
[data-theme="dark"] .add-contact-compact h2 {
color: #fff;
}
[data-theme="dark"] .search-mode-switcher {
background: #2e2820;
}
[data-theme="dark"] .search-mode-btn {
color: #7a6858;
}
[data-theme="dark"] .search-mode-btn.is-active {
background: #3a3028;
color: #e2d8d0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
background: #1f1c18;
border-color: #4a3e34;
color: #e2d8d0;
}
[data-theme="dark"] .contact-suggestions {
background: #242019;
border-color: #3a3028;
}
[data-theme="dark"] .contact-suggestions li:hover {
background: #302a24;
}
[data-theme="dark"] .promise-item {
border-color: #3a3028;
}
[data-theme="dark"] .back-link {
color: #e07a58;
}
[data-theme="dark"] .site-footer {
background: #1f1c18;
border-color: #362f29;
}
[data-theme="dark"] .section-message {
color: #e07a58;
}
[data-theme="dark"] .form-message {
color: #e07a58;
}
[data-theme="dark"] .contact-badge {
background: #3a3028;
color: #9e8878;
}
[data-theme="dark"] .contact-badge--business { background: #1a2e4a; color: #7ab0e8; }
[data-theme="dark"] .contact-badge--colleague { background: #1a3040; color: #6ab0d0; }
[data-theme="dark"] .contact-badge--client { background: #1a3035; color: #50c0b8; }
[data-theme="dark"] .contact-badge--partner { background: #25204a; color: #a090e0; }
[data-theme="dark"] .contact-badge--mentor { background: #3a2e10; color: #d0a840; }
[data-theme="dark"] .contact-badge--mentee { background: #3a2e08; color: #d8b030; }
[data-theme="dark"] .contact-badge--personal { background: #1a3020; color: #60b878; }
[data-theme="dark"] .contact-badge--friend { background: #162d1e; color: #50c878; }
[data-theme="dark"] .contact-badge--acquaintance { background: #2a2520; color: #a09888; }
[data-theme="dark"] .contact-badge--family { background: #3a1a28; color: #d07098; }
[data-theme="dark"] .contact-badge--other { background: #2a2018; color: #a89068; }
[data-theme="dark"] .contact-card-footer {
border-color: #3a3028;
color: #9e8878;
}
[data-theme="dark"] .contact-last-seen {
color: #e07a58;
}
[data-theme="dark"] .theme-toggle {
border-color: #4a3e34;
}
[data-theme="dark"] .theme-toggle:hover {
background: #302a24;
border-color: #e07a58;
}
[data-theme="dark"] .promise-direction--mine {
background: #2d7a3a;
color: #ffffff !important;
}
[data-theme="dark"] .promise-direction--theirs {
background: #a55a3e;
color: #ffffff !important;
}
[data-theme="dark"] .card-title {
color: #e2d8d0;
}
/* ---------------------------------------------------------------
Тёмная тема — исправления для index / login / success / error
--------------------------------------------------------------- */
[data-theme="dark"] .hero {
background: linear-gradient(150deg, #1f1c18 0%, #221e18 45%, #261f17 100%);
background-color: #1a1714;
}
[data-theme="dark"] .hero::after {
background: radial-gradient(circle, rgba(224, 122, 88, 0.07) 0%, transparent 65%);
}
[data-theme="dark"] .hero-eyebrow {
color: #e07a58;
}
[data-theme="dark"] .lead {
color: #9e8878;
}
[data-theme="dark"] .section-muted {
background: #1f1c18;
}
[data-theme="dark"] .feature-card:hover {
border-color: #e07a58;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .feature-card p {
color: #9e8878;
}
[data-theme="dark"] .benefit-item strong {
color: #e2d8d0;
}
[data-theme="dark"] .benefit-item p {
color: #9e8878;
}
[data-theme="dark"] .section-lead {
color: #9e8878;
}
[data-theme="dark"] .auth-card {
background: #242019;
border-color: #3a3028;
}
[data-theme="dark"] .auth-brand {
color: #e2d8d0;
}
[data-theme="dark"] .auth-tabs {
border-color: #3a3028;
}
[data-theme="dark"] .auth-tab {
color: #9e8878;
}
[data-theme="dark"] .auth-tab:hover {
color: #e2d8d0;
}
[data-theme="dark"] .auth-tab--active {
color: #e07a58;
border-bottom-color: #e07a58;
}
[data-theme="dark"] .field-hint {
color: #6a5a50;
}
[data-theme="dark"] .entity-flow {
color: #9e8878;
}
[data-theme="dark"] .flow-node {
background: #2a2520;
border-color: #3a3028;
color: #c8b8a8;
}
/* ---------------------------------------------------------------
Тёмная тема — форма и поля на contacts.html
--------------------------------------------------------------- */
[data-theme="dark"] .contacts-search-wrap input {
background: #1f1c18;
border-color: #4a3e34;
color: #e2d8d0;
}
[data-theme="dark"] .contacts-search-wrap input::placeholder {
color: #6a5a50;
}
[data-theme="dark"] .contacts-search-wrap input:focus {
border-color: #e07a58;
outline: none;
box-shadow: 0 0 0 2px rgba(224, 122, 88, 0.2);
}
[data-theme="dark"] .field-inline select {
background: #1f1c18;
border-color: #4a3e34;
color: #e2d8d0;
}
[data-theme="dark"] .form-subtitle {
color: #9e8878;
}
/* ---------------------------------------------------------------
Тёмная тема — автодополнение
--------------------------------------------------------------- */
[data-theme="dark"] .contact-suggestions li {
color: #e2d8d0;
}
[data-theme="dark"] .contact-suggestions li.contact-suggestions-message {
color: #9e8878;
}
/* ---------------------------------------------------------------
Тёмная тема — страница контакта: дополнения
--------------------------------------------------------------- */
[data-theme="dark"] .page-header .back-link {
color: #e07a58;
}
/* плавный переход для всех цветных элементов */
.site-header, .card, .button, .field input, .field select, .field textarea,
.site-footer, .contact-card-footer, .interaction-item, .promise-item {
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* ---------------------------------------------------------------
Авторазмер textarea
--------------------------------------------------------------- */
.form-card .field textarea {
overflow-y: hidden;
resize: none;
}
/* ---------------------------------------------------------------
Иконка-подсказка (тултип)
--------------------------------------------------------------- */
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #d4c4b4;
color: #5c4a3a;
font-size: 0.65rem;
font-weight: 700;
font-style: normal;
cursor: help;
position: relative;
margin-left: 0.3rem;
vertical-align: middle;
flex-shrink: 0;
user-select: none;
}
.info-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #2b2a27;
color: #f0ece8;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 400;
line-height: 1.45;
white-space: normal;
width: 240px;
max-width: 80vw;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 200;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
text-align: left;
}
.info-icon:hover::after,
.info-icon:focus::after {
opacity: 1;
}
[data-theme="dark"] .info-icon {
background: #3a3028;
color: #c8b8a8;
}
[data-theme="dark"] .info-icon::after {
background: #1a1714;
color: #e2d8d0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
/* --- Полнотекстовый поиск --- */
.fulltext-results {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fulltext-summary {
margin: 0;
font-size: 0.875rem;
}
.fulltext-section-title {
font-size: 0.95rem;
font-weight: 600;
margin: 0.5rem 0 0.25rem;
color: #6b5a4a;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fulltext-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fulltext-item {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg-solid);
transition: border-color 0.15s, box-shadow 0.15s;
}
.fulltext-item:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.fulltext-item-link {
display: block;
padding: 0.75rem 1rem;
text-decoration: none;
color: inherit;
}
.fulltext-item-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}
.fulltext-item-title {
font-weight: 600;
color: var(--text-bright);
}
.fulltext-snippet {
margin-top: 0.35rem;
font-size: 0.875rem;
line-height: 1.45;
color: var(--text-muted);
}
.fulltext-snippet mark {
background: var(--accent-glow);
color: var(--text-bright);
padding: 0 0.15em;
border-radius: 2px;
}
[data-theme="dark"] .fulltext-item {
background: #1f1a17;
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .fulltext-item:hover {
border-color: #c8a274;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .fulltext-section-title {
color: #a89888;
}
[data-theme="dark"] .fulltext-snippet {
color: #c8b8a8;
}
[data-theme="dark"] .fulltext-snippet mark {
background: #4a3a1a;
color: #f5e8c8;
}
[data-theme="dark"] .sidebar-widget-title {
color: #7a6858;
}
[data-theme="dark"] .sidebar-contact-item {
border-bottom-color: #3a3028;
}
[data-theme="dark"] .sidebar-contact-name {
color: #e2d8d0;
}
[data-theme="dark"] .sidebar-contact-meta {
color: #7a6858;
}
[data-theme="dark"] .sidebar-contact-item:hover .sidebar-contact-name {
color: #e07a58;
}
[data-theme="dark"] .stats-total { color: #7a6858; }
[data-theme="dark"] .stats-total strong { color: #e2d8d0; }
[data-theme="dark"] .stats-label { color: #c8b8a8; }
[data-theme="dark"] .stats-bar-wrap { background: #3a3028; }
[data-theme="dark"] .stats-bar { background: #c89448; }
[data-theme="dark"] .stats-count { color: #7a6858; }
/* =============================================================
* THEME OVERRIDES — Phase 4.7 lite-redesign.
* Перебивают legacy hardcoded цвета (cream/beige/коричневый),
* используя CSS-переменные из :root и :root[data-theme="amber"].
* Структура и layout не меняется, только color/bg/border/shadow.
* ============================================================= */
body { background: var(--page-bg); background-attachment: fixed; color: var(--text); }
a { color: var(--accent-strong); }
a:hover { color: var(--accent); }
/* Header */
.site-header {
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.logo { color: var(--text-bright); }
.nav-link { color: var(--text-muted); }
.nav-link:hover { background: var(--accent-bg-soft); color: var(--text-bright); }
.nav-link.is-active { background: var(--accent); color: var(--bg-deep); }
/* Buttons */
.button {
background: var(--accent);
color: var(--bg-deep);
border-radius: var(--radius);
font-weight: 600;
box-shadow: 0 6px 20px var(--accent-glow);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.button:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 10px 28px var(--accent-glow); }
.button:disabled, .button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.button-outline {
background: transparent;
color: var(--accent);
border: 1px solid var(--border-strong);
box-shadow: none;
}
.button-outline:hover { background: var(--accent-bg-soft); color: var(--text-bright); }
.button-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border-strong);
box-shadow: none;
}
.button-ghost:hover { background: var(--accent-bg-soft); }
.button-danger {
background: var(--danger);
color: var(--bg-deep);
border: none;
box-shadow: 0 6px 20px rgba(248, 113, 113, 0.3);
}
.button-danger:hover { background: #fca5a5; }
/* Cards / sections */
.card,
.sidebar-widget,
.form-card,
.list-card {
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
color: var(--text);
}
.muted { color: var(--text-muted); }
.field-hint { color: var(--text-dim); }
/* Forms */
.field span { color: var(--text-muted); }
input, textarea, select {
background: var(--bg-deep) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
outline: none !important;
border-color: var(--accent) !important;
box-shadow: var(--glow-focus) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
/* Sidebar widgets — заголовок */
.sidebar-widget-title { color: var(--text-muted); }
/* Stats */
.stats-total, .stats-label, .stats-count { color: var(--text-muted); }
.stats-total strong { color: var(--text-bright); }
.stats-bar-wrap { background: var(--border); }
.stats-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
/* Sidebar contact items */
.sidebar-contact-item { color: var(--text); }
.sidebar-contact-name { color: var(--text-bright); }
.sidebar-contact-item:hover .sidebar-contact-name { color: var(--accent-strong); }
.sidebar-empty { color: var(--text-dim); }
/* Modal */
.modal-backdrop { background: rgba(8, 5, 18, 0.7); }
.modal-content {
background: var(--card-bg-solid);
border: 1px solid var(--border);
color: var(--text);
box-shadow: var(--shadow-modal);
border-radius: var(--radius-lg);
}
.modal-title { color: var(--text-bright); }
.modal-text { color: var(--text); }
.modal-input { background: var(--bg-deep); color: var(--text); border-color: var(--border); }
/* Toast */
.toast {
background: var(--card-bg-solid);
color: var(--text);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
}
/* User info pill */
.user-info { background: var(--accent-bg-soft); color: var(--text); }
/* Logout */
.nav-logout { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.nav-logout:hover { background: var(--accent-bg-soft); border-color: var(--accent); color: var(--text-bright); }
/* Theme toggle */
.theme-toggle { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.theme-toggle:hover { background: var(--accent-bg-soft); color: var(--text-bright); }
/* Footer */
.site-footer {
background: transparent;
border-top: 1px solid var(--border);
color: var(--text-muted);
}
/* Pills и метки */
.pill, .tag, .chip {
background: var(--accent-bg-soft);
color: var(--accent-strong);
border: 1px solid var(--border);
}
/* Disable transitions on theme switch для всех текстовых элементов чтобы не "плыло" */
* { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: 0.2s; }
/* Typography polish */
h1, h2, h3, h4, h5, h6 { color: var(--text-bright); letter-spacing: -0.01em; }
h1 { font-weight: 800; letter-spacing: -0.02em; }
/* Hero (override) */
.hero {
background:
radial-gradient(circle at 15% 20%, var(--accent-glow) 0%, transparent 50%),
radial-gradient(circle at 85% 80%, var(--accent-glow-2) 0%, transparent 50%),
var(--card-bg-solid);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
margin: 2rem auto;
padding: 4.5rem 3rem !important;
max-width: min(1400px, 94%);
overflow: hidden;
}
.hero::after { display: none; }
.hero-eyebrow { color: var(--accent-strong); }
.hero h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--text-bright) 0%, var(--accent-strong) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lead { color: var(--text-muted); font-size: 1.15rem; }
/* Section backgrounds — снимаем cream */
.section-muted { background: transparent !important; }
.section-title { color: var(--text-bright); }
.section-lead { color: var(--text-muted); }
/* =============================================================
* Fix #2: повышенный контраст + auth + page-actions + features
* ============================================================= */
/* Auth card (была белая cream) */
.auth-card {
background: var(--card-bg-solid);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
color: var(--text);
}
.auth-brand { color: var(--text-bright); }
.auth-tabs { border-bottom-color: var(--border); }
.auth-tab { color: var(--text-muted); }
.auth-tab:hover { color: var(--text-bright); }
.auth-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-desc { color: var(--text-muted); }
.auth-form .field input,
.auth-form .field input:hover,
.auth-form .field input:focus {
background: var(--bg-deep) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
.auth-form .field input:focus { border-color: var(--accent) !important; box-shadow: var(--glow-focus) !important; }
/* Все текстовые блоки которые могут быть на dark фоне с cream-стилями */
.field-hint, .hint, .helper-text { color: var(--text-muted); }
p, span, label, li { color: inherit; }
.muted, .text-muted, p.muted { color: var(--text-muted) !important; }
/* Features section (Как это устроено) — карточки */
.features-section .card,
.benefits-section .card,
.feature-card,
.benefit-card {
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
}
.feature-card h3, .benefit-card h3, .card h3 { color: var(--text-bright); }
.feature-card p, .benefit-card p, .card p { color: var(--text-muted); }
.feature-card .feature-icon, .benefit-card .benefit-icon { color: var(--accent); }
/* Sidebar widget — пустое состояние было слишком серым */
.sidebar-empty, .empty-state { color: var(--text-muted); }
/* Section заголовки */
.section-title, .section-lead, .page-header h1, .page-header p {
color: inherit;
}
.page-header h1 { color: var(--text-bright); }
.page-header p { color: var(--text-muted); }
/* Labels форм должны быть видны */
.field > span,
label span:first-child { color: var(--text); font-weight: 500; }
/* Списки контактов. NB: .contact-row здесь НЕ карточка — это grid-контейнер
* двух form-card на странице /contact.html. Если включить ему background+border,
* сзади круглых карточек проступает прямоугольный «второй слой».
*/
.contact-card, .list-item {
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
}
.contact-card:hover, .list-item:hover {
border-color: var(--accent);
}
/* Селекты, опции */
select option { background: var(--card-bg-solid); color: var(--text); }
/* =============================================================
* Round 2: hardcoded cream colors, form labels, autofill
* ============================================================= */
/* "Зачем это нужно" — strong и p */
.benefit-item strong { color: var(--text-bright); }
.benefit-item p, .benefit-item span { color: var(--text-muted); }
/* Form labels (на странице контактов: "Поиск имя", "Телефон", etc.) */
.field { color: var(--text); }
.field > span:first-child,
.field > label:first-child,
label.field > span,
label > span:first-child,
.form .field span,
fieldset legend { color: var(--text) !important; font-weight: 600; }
/* Заголовки секций форм (например, "БЫСТРОЕ ДОБАВЛЕНИЕ КОНТАКТА", "ПОДГОТОВКА К ВСТРЕЧЕ") */
.form-section-title,
.list-card-title,
.form-card h2, .form-card h3,
.card-title { color: var(--text-bright); }
/* Авто-заполнение Chrome красит inputs в свой светлый. Перекрываем через inset-shadow trick. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bg-deep) inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s; /* отложить autofill background */
}
/* Filter selects/inputs на /contacts.html */
.list-filters label,
.list-filters span,
.contacts-filters label,
.contacts-filters span { color: var(--text); font-weight: 500; }
/* Tabs внутри Search (если есть) */
.tab, .tab-link, .filter-tab {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
}
.tab.is-active, .tab-link.is-active, .filter-tab.is-active {
background: var(--accent-bg-soft);
color: var(--text-bright);
border-color: var(--accent);
}
/* Контактная карточка summary text */
.contact-summary, .contact-card-summary,
.contact-details, .contact-cell { color: var(--text); }
.contact-details .label, .contact-cell-label { color: var(--text-muted); }
/* =============================================================
* Round 3: финальные legacy цвета — compact-форма, badges,
* search-mode tabs, agent card headers
* ============================================================= */
/* Заголовки compact-секций ("БЫСТРОЕ ДОБАВЛЕНИЕ", "ПОДГОТОВКА К ВСТРЕЧЕ", "КОНСЬЕРЖ", "ПОИСК") */
.add-contact-compact h2,
.form-card h2,
.form-card h3 { color: var(--text-bright) !important; }
/* Названия полей в compact формах */
.add-contact-compact .field > span,
.form-card .field > span,
.form-inline-compact .field > span { color: var(--text) !important; font-weight: 500; }
/* Inputs в compact формах (autofill ловит select, надо явно) */
.add-contact-compact .field input,
.form-card .field input,
.form-inline-compact input,
.form-inline-compact select {
background: var(--bg-deep) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Search-mode переключатель — был cream tabs */
.search-mode-switcher {
background: var(--bg-deep);
border: 1px solid var(--border);
}
.search-mode-btn { color: var(--text-muted); }
.search-mode-btn:hover { color: var(--text-bright); }
.search-mode-btn.is-active {
background: var(--accent);
color: var(--bg-deep);
box-shadow: 0 4px 14px var(--accent-glow);
}
/* Selects на полную */
select {
background: var(--bg-deep) !important;
color: var(--text) !important;
border-color: var(--border) !important;
/* Кастомная стрелка — иначе остаётся системная светлая */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.8rem center !important;
padding-right: 2rem !important;
}
select:focus { border-color: var(--accent) !important; box-shadow: var(--glow-focus) !important; }
select option { background: var(--card-bg-solid); color: var(--text); }
/* Sortable/filter row на /contacts.html */
.contacts-filters .field > span,
.contacts-filters label,
.filter-row label,
.filter-row .field span { color: var(--text) !important; font-weight: 500; }
/* Contact-badge: все варианты на dark теме — единый стиль (легче читать) */
.contact-badge {
background: var(--accent-bg-soft) !important;
color: var(--accent-strong) !important;
border: 1px solid var(--border) !important;
}
/* Слегка варьируем оттенок для типов через прозрачность фона */
.contact-badge--business,
.contact-badge--colleague,
.contact-badge--client,
.contact-badge--partner { color: #93c5fd !important; }
.contact-badge--personal,
.contact-badge--friend,
.contact-badge--family,
.contact-badge--mentor,
.contact-badge--mentee { color: var(--accent-strong) !important; }
/* Pill в стиле "Друг" из dark-режима хедера — на главной */
.contact-card .contact-badge {
font-weight: 500;
font-size: 0.78rem;
}
/* Подсказки */
.search-mode-hint, .form-hint { color: var(--text-muted); }
/* Page header — крупный заголовок и подзаголовок страницы */
.page-header { color: var(--text); }
.page-header .lead { color: var(--text-muted); }
/* Concierge form/result */
.concierge-result, .agent-output {
background: var(--card-bg);
color: var(--text);
border: 1px solid var(--border);
}
/* Список All Contacts grid — карточка */
.contact-card-link,
.contact-card.contact-card-link {
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
}
.contact-card-header h3 { color: var(--text-bright); }
.contact-meta { color: var(--text-muted); }
/* Tooltip icon "?" — был жёлтый/cream */
.info-icon {
background: var(--accent-bg-soft);
color: var(--accent-strong);
border: 1px solid var(--border-strong);
}
.info-icon:focus { box-shadow: var(--glow-focus); }
/* =============================================================
* Phase 7.3a: vCard import card + help accordion
* ============================================================= */
.import-card { padding: 1rem 1.25rem; }
.import-card h2 {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-bright);
margin: 0 0 0.85rem;
}
.vcard-import-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.vcard-import-form input[type="file"] {
flex: 1 1 220px;
padding: 0.55rem 0.75rem !important;
font-size: 0.85rem !important;
cursor: pointer;
}
.vcard-import-form input[type="file"]::file-selector-button {
background: var(--accent-bg-soft);
color: var(--accent-strong);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 0.35rem 0.85rem;
margin-right: 0.75rem;
font-family: inherit;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
}
.vcard-import-form input[type="file"]::file-selector-button:hover {
background: var(--accent);
color: var(--bg-deep);
}
.import-help {
margin-top: 0.85rem;
font-size: 0.85rem;
}
.import-help > summary {
cursor: pointer;
font-weight: 500;
color: var(--text-muted);
padding: 0.4rem 0;
list-style: none;
user-select: none;
}
.import-help > summary::-webkit-details-marker { display: none; }
.import-help > summary::before {
content: "▸";
display: inline-block;
margin-right: 0.5rem;
transition: transform 0.2s ease;
}
.import-help[open] > summary::before { transform: rotate(90deg); }
.import-help > summary:hover { color: var(--text-bright); }
.import-help-list {
list-style: none;
padding: 0;
margin: 0.6rem 0;
display: grid;
gap: 0.55rem;
}
.import-help-list li {
color: var(--text);
line-height: 1.5;
}
.import-help-list a {
color: var(--accent-strong);
text-decoration: underline;
text-decoration-color: var(--accent-glow);
}
.import-help-list a:hover { color: var(--accent); }
.import-help-note {
margin: 0.6rem 0 0;
font-size: 0.8rem;
font-style: italic;
}
.import-result {
margin-top: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: var(--radius);
font-size: 0.9rem;
border: 1px solid var(--border);
}
.import-result--ok {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.4);
color: #6ee7b7;
}
.import-result--error {
background: var(--danger-bg);
border-color: var(--danger);
color: #fca5a5;
}
.import-result--pending {
background: var(--accent-bg-soft);
border-color: var(--border-strong);
color: var(--text-muted);
}
/* =============================================================
* Phase 7.8 — Архивы взаимодействий и обещаний
* ============================================================= */
.archive-link {
margin: 0.75rem 0 0;
font-size: 0.9rem;
}
.archive-link a {
color: var(--text-muted);
text-decoration: none;
border-bottom: 1px dashed var(--border-strong);
padding-bottom: 1px;
}
.archive-link a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
.promises-expand-btn {
margin: 0.5rem 0 0;
padding: 0.4rem 0.75rem;
background: transparent;
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
color: var(--text-muted);
font-size: 0.85rem;
cursor: pointer;
width: 100%;
text-align: center;
font-family: inherit;
}
.promises-expand-btn:hover {
border-style: solid;
border-color: var(--accent);
color: var(--accent);
}
.promises-recent {
margin-top: 0.25rem;
}
.promise-item--completed {
opacity: 0.7;
}
.promise-item--completed .promise-text {
text-decoration: line-through;
text-decoration-color: var(--text-muted);
}
/* Архивные страницы — фильтры */
.archive-filters {
margin-bottom: 1.25rem;
}
.filter-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
.filter-tab {
background: transparent;
border: 1px solid transparent;
padding: 0.45rem 0.95rem;
border-radius: var(--radius);
font-size: 0.9rem;
cursor: pointer;
color: var(--text-muted);
font-family: inherit;
}
.filter-tab:hover {
color: var(--text-bright);
}
.filter-tab.is-active {
background: var(--accent-bg-soft);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
/* =============================================================
* Chip-input для обещаний внутри формы взаимодействия
* ============================================================= */
.promise-chips {
list-style: none;
margin: 0 0 0.5rem 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.promise-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.5rem 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.88rem;
line-height: 1.2;
max-width: 100%;
}
.promise-chip--mine {
background: rgba(45, 122, 58, 0.15);
border: 1px solid rgba(45, 122, 58, 0.45);
color: var(--text-bright);
}
.promise-chip--theirs {
background: rgba(165, 90, 62, 0.15);
border: 1px solid rgba(165, 90, 62, 0.45);
color: var(--text-bright);
}
.promise-chip-text {
flex: 1 1 auto;
word-break: break-word;
}
.promise-chip-remove {
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0 0.25rem;
opacity: 0.7;
border-radius: 50%;
}
.promise-chip-remove:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.15);
}
.promise-add-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.promise-add-row input {
flex: 1 1 auto;
min-width: 0;
}
.promise-add-btn {
flex: 0 0 auto;
padding: 0.45rem 0.95rem;
font-size: 0.9rem;
}
/* =============================================================
* Auth-страницы: статус-блоки (Phase 7.5.2 / 7.5.3)
* Используется на verify-email / forgot-password / reset-password
* для блоков «Письмо отправлено», «Пароль изменён», «Ссылка протухла».
* ============================================================= */
.auth-status {
text-align: center;
padding: 0.5rem 0;
}
.auth-status-icon {
font-size: 4.5rem;
line-height: 1;
margin: 0.5rem 0 1.25rem;
display: block;
/* Эмодзи отрендеривается системой яркими цветами; desaturate + dim
* чтобы он сливался с тёмной/тёплой подложкой карточки. */
filter: grayscale(1) opacity(0.55);
}
.auth-status h1 {
margin: 0 0 0.75rem;
font-size: 1.4rem;
}
.auth-status p {
margin: 0 0 1.5rem;
font-size: 0.95rem;
line-height: 1.5;
}
.auth-status .hero-actions {
justify-content: center;
}
/* Внутри формы (auth-status применяется и к form-блокам) поля остаются
* left-aligned — label «Email» центрированный над инпутом смотрится странно. */
.auth-status .field,
.auth-status .form-message {
text-align: left;
}
/* =============================================================
* Ссылка «Забыли пароль?» под формой логина (Phase 7.5.3)
* ============================================================= */
.auth-forgot-link {
margin: 0.65rem 0 0;
text-align: center;
font-size: 0.88rem;
}
.auth-forgot-link a {
color: var(--text-muted);
text-decoration: none;
}
.auth-forgot-link a:hover {
color: var(--accent);
text-decoration: underline;
}
/* =============================================================
* Баннер «подтвердите email» (Phase 7.5.2)
* ============================================================= */
.email-verify-banner {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem 0;
padding: 0.7rem 1rem;
border-radius: var(--radius);
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.45);
color: #fbbf24;
font-size: 0.92rem;
flex-wrap: wrap;
}
.email-verify-banner[hidden] {
display: none;
}
.email-verify-banner-icon {
font-size: 1.2rem;
line-height: 1;
}
.email-verify-banner-text {
flex: 1 1 auto;
min-width: 12rem;
}
.email-verify-banner-text strong {
color: #fde68a;
font-weight: 600;
}
.email-verify-resend {
flex: 0 0 auto;
}
.email-verify-banner--ok {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.45);
color: #6ee7b7;
}
/* =============================================================
* Import card в sidebar (узкая колонка)
* ============================================================= */
.sidebar-widget.import-card .vcard-import-form {
display: grid;
gap: 0.6rem;
}
.sidebar-widget.import-card .vcard-import-form input[type="file"] {
width: 100%;
font-size: 0.8rem !important;
}
.sidebar-widget.import-card .button {
padding: 0.55rem 1rem;
font-size: 0.85rem;
width: 100%;
}
.sidebar-widget.import-card .import-help-note {
margin-top: 0.6rem;
font-size: 0.78rem;
line-height: 1.45;
}
.sidebar-widget.import-card .import-help-note a {
color: var(--accent-strong);
white-space: nowrap;
}
.sidebar-widget.import-card .import-result {
font-size: 0.8rem;
margin-top: 0.6rem;
padding: 0.5rem 0.65rem;
}
/* =============================================================
* Import help page (/import-help.html)
* ============================================================= */
.import-help-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin: 2rem 0;
}
.import-help-card {
padding: 1.5rem;
}
.import-help-card-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--border);
}
.import-help-icon {
font-size: 1.8rem;
line-height: 1;
}
.import-help-card-head h2 {
margin: 0;
font-size: 1.25rem;
flex: 1;
}
.import-help-format {
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: var(--accent-bg-soft);
color: var(--accent-strong);
border: 1px solid var(--border);
}
.import-help-steps {
margin: 0;
padding-left: 1.4rem;
display: grid;
gap: 0.5rem;
color: var(--text);
}
.import-help-steps li {
line-height: 1.5;
}
.import-help-steps a {
color: var(--accent-strong);
text-decoration: underline;
text-decoration-color: var(--accent-glow);
}
.import-help-steps kbd {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: var(--bg-deep);
border: 1px solid var(--border-strong);
font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
font-size: 0.8em;
color: var(--text);
}
.import-help-tip {
margin: 1rem 0 0;
padding: 0.6rem 0.8rem;
border-left: 3px solid var(--accent);
background: var(--accent-bg-soft);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 0.85rem;
line-height: 1.5;
}
.import-help-faq {
margin: 2rem 0;
padding: 1.5rem;
}
.import-help-faq h2 {
margin: 0 0 1rem;
}
.import-help-faq details {
border-top: 1px solid var(--border);
padding: 0.85rem 0;
}
.import-help-faq details:first-of-type { border-top: none; padding-top: 0; }
.import-help-faq summary {
cursor: pointer;
font-weight: 600;
color: var(--text);
padding: 0.2rem 0;
user-select: none;
}
.import-help-faq summary:hover { color: var(--accent-strong); }
.import-help-faq details p {
margin: 0.5rem 0 0;
line-height: 1.6;
}
.import-help-cta {
display: flex;
justify-content: center;
margin: 2rem 0;
}
/* =============================================================
* Contact-badge: цветной фон для каждого типа отношений
* ============================================================= */
.contact-badge {
background: var(--accent-bg-soft) !important;
color: #ffffff !important;
border: 1px solid transparent !important;
font-weight: 600;
letter-spacing: 0.02em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.contact-badge--business { background: #3b82f6 !important; } /* blue */
.contact-badge--colleague { background: #06b6d4 !important; } /* cyan */
.contact-badge--client { background: #0d9488 !important; } /* teal */
.contact-badge--partner { background: #8b5cf6 !important; } /* purple */
.contact-badge--personal { background: #10b981 !important; } /* green */
.contact-badge--friend { background: #f97316 !important; } /* orange */
.contact-badge--family { background: #dc2626 !important; } /* red */
.contact-badge--mentor { background: #f59e0b !important; } /* amber */
.contact-badge--mentee { background: #eab308 !important; color: #1a1330 !important; text-shadow: none !important; } /* yellow — текст тёмный для контраста */
.contact-badge--other { background: #6b7280 !important; } /* gray */
/* =============================================================
* Phase 8.2 — Mobile burger menu
* <768px: nav-link-и и кнопки header'а уходят в правый drawer,
* вместо них — кнопка-бургер. Click outside / Esc / клик по
* пункту закрывают.
* ============================================================= */
.nav-burger {
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 10px;
width: 44px;
height: 44px;
padding: 0;
color: var(--text);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-burger:hover {
background: var(--accent-bg-soft);
border-color: var(--accent);
}
@media (max-width: 768px) {
.nav-burger {
display: inline-flex;
}
/* Header остаётся на месте, но получает выше z-index чем drawer,
чтобы burger оставался кликабельным и для закрытия.
Убираем backdrop-filter — иначе он создаёт containing block для
fixed-потомков, и drawer оказывается ограничен высотой header'а. */
.site-header {
z-index: 60;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Nav превращается в боковой drawer на ширину 78vw, max 280px */
.site-header .nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(280px, 78vw);
padding: 5rem 0.85rem 1.5rem;
background: var(--card-bg-solid);
border-left: 1px solid var(--border);
box-shadow: -20px 0 40px rgba(0, 0, 0, 0.45);
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
transform: translateX(110%);
transition: transform 0.25s ease;
z-index: 50;
overflow-y: auto;
}
.site-header.nav-open .nav {
transform: translateX(0);
}
/* Backdrop под drawer'ом */
.site-header.nav-open::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 40;
}
/* Все клик-элементы drawer'а — soft-filled rounded buttons, ОДИНАКОВЫЙ
размер у всех (Главная/Контакты/Статистика/Вход/Выйти/Тема) */
.site-header .nav .nav-link,
.site-header .nav .theme-toggle,
.site-header .nav .nav-logout {
width: 100%;
min-height: 3.25rem;
box-sizing: border-box;
background: var(--accent-bg-soft) !important;
border: 1px solid var(--border) !important;
color: var(--text-bright);
padding: 0.85rem 1.1rem;
border-radius: 14px;
display: flex;
align-items: center;
gap: 0.65rem;
justify-content: flex-start;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.site-header .nav .nav-link:active,
.site-header .nav .theme-toggle:active,
.site-header .nav .nav-logout:active {
transform: scale(0.98);
}
/* Главная / Контакты / Статистика — все с solid accent-заливкой */
.site-header .nav .nav-link {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--bg-deep);
font-weight: 600;
}
.site-header .nav .nav-link:hover {
filter: brightness(1.05);
}
/* Theme-toggle — accent-bg-soft без border, c подписью «Тема» */
.site-header .nav .theme-toggle::after {
content: "Тема";
font-weight: 500;
}
.site-header .nav .theme-toggle:hover {
background: var(--accent-glow-2) !important;
border-color: var(--accent) !important;
}
/* Email — dim-текст без фона, сверху drawer'а, без разделителя.
Не используем :not([hidden]) — universal [hidden] rule выше гарантирует
что hidden-user-info не показывается даже с этим display:block. */
.site-header .nav .user-info {
display: block;
padding: 0.5rem 0.5rem 0.85rem;
margin: 0;
color: var(--text-muted);
font-size: 0.85rem;
background: transparent;
border: none;
border-radius: 0;
overflow-wrap: anywhere;
}
/* HTML-атрибут [hidden] перебивается моим display:flex с большей
специфичностью. Возвращаем display:none для скрытых элементов
внутри drawer'а — иначе залогиненный юзер видит «Вход», а
разлогиненный — «Выйти». */
.site-header .nav [hidden] {
display: none !important;
}
/* Вход (nav-login) — нежно-зелёная (mint) заливка */
.site-header .nav .nav-login {
background: rgba(167, 243, 208, 0.18) !important;
border-color: rgba(110, 231, 183, 0.55) !important;
color: #86efac !important;
font-weight: 600;
}
.site-header .nav .nav-login:hover {
filter: brightness(1.1);
}
/* Logout — soft-danger pill, цвет красный */
.site-header .nav .nav-logout {
background: var(--danger-bg) !important;
border-color: var(--danger) !important;
color: var(--danger);
font-weight: 600;
}
.site-header .nav .nav-logout:hover {
filter: brightness(1.15);
}
/* Порядок пунктов в drawer'е:
1. email (user-info)
2-4. Главная / Контакты / Статистика
5. Вход (или Выход)
6. Тема (theme-toggle) — в самом низу */
.site-header .nav .user-info { order: 1; }
.site-header .nav .nav-link[href="/index.html"] { order: 2; }
.site-header .nav .nav-link[href="/contacts.html"] { order: 3; }
.site-header .nav .nav-link--stats { order: 4; }
.site-header .nav .nav-login { order: 5; }
.site-header .nav .nav-logout { order: 6; }
.site-header .nav .theme-toggle { order: 7; }
/* Lock body scroll при открытом drawer */
body.nav-drawer-lock {
overflow: hidden;
}
}
/* =============================================================
* Phase 8.1 — Mobile foundations
* Не ломает desktop, гарантирует базу на смартфонах:
* - iOS Safari не зумит при focus в input (font-size >= 16px)
* - Tap-targets >= 44px (Apple HIG)
* - Чистый tap-highlight без серого мигания
* ============================================================= */
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* Anchor-target учитывает sticky-header'а высоту чтобы не залезало под него */
#stats-section {
scroll-margin-top: 80px;
}
/* На десктопе виджет «Статистика» уже виден в sidebar — скрываем дубль-ссылку */
.nav-link--stats {
display: none;
}
@media (max-width: 768px) {
.nav-link--stats {
display: inline-flex;
}
}
@media (max-width: 768px) {
/* iOS не зумит при focus, если font-size >= 16px. !important нужен
чтобы перебить более специфичные .form-card .field input. */
input,
select,
textarea {
font-size: 16px !important;
}
/* Apple HIG: tap-target минимум 44×44px */
.button {
min-height: 44px;
}
.button-small {
min-height: 40px;
}
.nav-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.theme-toggle,
.nav-logout {
min-height: 44px;
min-width: 44px;
}
/* Icon-кнопки (✎/🗑/×) — бамп с 28px до 36px на мобиле */
.promise-icon-btn,
.promise-chip-remove {
width: 2.25rem;
height: 2.25rem;
font-size: 1rem;
}
/* Tap highlight чище — на iOS убираем грубое серое мигание */
a,
button,
[role="button"],
input,
select,
textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}
}
/* =============================================================
* Phase 8.4 — Mobile-only: AI-агенты вертикально, search-tabs 50/50
* Desktop версия не трогается.
* ============================================================= */
@media (max-width: 768px) {
/* AI-агенты: поле сверху, кнопка под ним на всю ширину,
высоты инпутов и кнопок равны quick-add (2.75rem). */
#prepare-meeting-form,
#concierge-form {
flex-direction: column;
align-items: stretch;
/* Перебиваем desktop-овский gap: 0.75rem — иначе он суммируется
с margin-top на form-card-actions и зазор становится больше
чем в quick-add. */
gap: 0.5rem;
}
#prepare-meeting-form .field,
#concierge-form .field {
width: 100%;
margin-bottom: 0;
}
/* Высота инпутов агентов = quick-add (2.25rem compact на мобиле) */
.form-card:has(#prepare-meeting-form) .field input,
.form-card:has(#prepare-meeting-form) .field select,
.form-card:has(#prepare-meeting-form) .contact-autocomplete input,
.form-card:has(#concierge-form) .field textarea {
min-height: 2.25rem;
padding: 0.4rem 0.85rem;
font-size: 0.95rem;
}
/* Поиск (fulltext + name-search) — тот же compact на мобиле */
.form-card:has(#fulltext-form) .field input,
.form-card:has(#contacts-search) .field input {
min-height: 2.25rem;
padding: 0.4rem 0.85rem;
font-size: 0.95rem;
}
.form-card:has(#fulltext-form) .button {
min-height: 2.25rem !important;
padding: 0.4rem 1rem;
font-size: 0.95rem;
}
/* fulltext-form: вертикально (input сверху, кнопка снизу), gap 0.5rem
как у quick-add/агентов. По умолчанию форма flex-row на десктопе. */
#fulltext-form {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
#prepare-meeting-form .form-card-actions,
#concierge-form .form-card-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
margin-top: 0; /* зазор контролирует gap на form'е, не margin */
}
#prepare-meeting-form .form-card-actions .button,
#concierge-form .form-card-actions .button {
width: 100%;
min-height: 2.25rem !important;
padding: 0.4rem 1rem;
font-size: 0.95rem;
}
/* Пустой section-message не сжирает 1.2rem пространства между полем
и кнопкой */
.form-card-actions .section-message:empty {
display: none;
}
/* Page-header: «Контакты» + lead — компактнее, меньше воздуха сверху */
.page-header {
margin-bottom: 0.85rem;
gap: 0.4rem;
}
.page-header h1 {
font-size: 1.65rem;
margin: 0 0 0.2rem;
line-height: 1.2;
}
.page-header p {
margin: 0;
font-size: 0.92rem;
}
/* Quick-add: поле и кнопка пониже (2.25rem ≈ 36px) на мобиле.
Перебиваем общее правило `.button { min-height: 44px }` из 8.1. */
.add-contact-compact .field input:not([type="checkbox"]):not([type="radio"]) {
min-height: 2.25rem;
padding: 0.4rem 0.85rem;
}
.add-contact-compact .form-inline-compact .button {
min-height: 2.25rem !important;
padding: 0.4rem 1rem;
}
/* Текст на всех form-кнопках — строго по центру (на случай если flex
или другой layout сбивает горизонтальное центрирование) */
.form-card .button {
text-align: center;
justify-content: center;
}
/* Унифицируем шрифт placeholder'ов и input/textarea/select во всех формах.
Сам input оставляем на 16px (Phase 8.1, чтобы iOS не зумил при фокусе),
а placeholder уменьшаем до 0.85rem — визуально компактнее. */
.form-card .field input,
.form-card .field textarea,
.form-card .field select {
font-family: inherit;
font-weight: 400;
line-height: 1.4;
}
.form-card .field input::placeholder,
.form-card .field textarea::placeholder {
font-family: inherit;
font-weight: 400;
font-size: 0.85rem;
color: var(--text-dim);
opacity: 1;
}
/* Единое вертикальное расстояние «поле → кнопка» во всех формах: 0.5rem */
.add-contact-compact .form-inline-compact {
gap: 0.5rem;
}
/* Пустой .form-message сидит в flex-цепочке quick-add ПОСЛЕ кнопки и
отжирает один gap-сегмент (0.5rem) ниже кнопки. Скрываем — гэп
между полем и кнопкой становится единственным и совпадает с агентами. */
.form-inline-compact .form-message:empty {
display: none;
}
/* Перестановка карточек на /contacts: после добавления контакта
идёт поиск (логически), потом AI-агенты, потом список контактов. */
.contacts-main {
display: flex;
flex-direction: column;
}
.contacts-main > .form-card.add-contact-compact { order: 1; }
.contacts-main > .form-card:has(.search-mode-switcher) { order: 2; }
.contacts-main > .form-card:has(#prepare-meeting-form) { order: 3; }
.contacts-main > .form-card:has(#concierge-form) { order: 4; }
.contacts-main > .contacts-list { order: 10; }
/* «Все контакты» сидит ближе к Консьерж-карточке выше (убираем
лишний 2rem margin-top, оставляем только form-card margin-bottom) */
.contacts-list {
margin-top: 0;
}
/* Кнопка «Удалить контакт» на /contact.html — переносится JS'ом
в конец #contact-content. Здесь стилизуем wrap'ер: визуально
отделён сверху, кнопка на всю ширину. */
.contact-delete-bottom {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.contact-delete-bottom .button {
width: 100%;
}
/* Опустевшая обёртка в page-header — скрываем чтобы не висел gap */
.page-actions:empty {
display: none;
}
/* Search mode-switcher: full-width, кнопки 50/50, такой же зазор
до поля ввода как «поле→кнопка» в других формах (0.5rem) */
.search-mode-switcher {
width: 100% !important;
display: flex;
margin-bottom: 0.5rem;
}
.search-mode-btn {
flex: 1 1 50%;
text-align: center;
padding: 0.55rem 0.6rem;
}
.search-mode-panel {
margin-top: 0;
}
.search-mode-hint {
font-size: 0.82rem;
}
}
/* =============================================================
* Phase 8.3 — Landing-страница, mobile polish
* Сжатые отступы hero/section, читабельный h1, аккуратный footer
* без точек-разделителей на узком экране.
* ============================================================= */
@media (max-width: 768px) {
/* Hero: меньше воздуха сверху/снизу, плотнее первый экран */
.hero {
padding: 2rem 0 2.25rem;
}
.hero h1 {
font-size: clamp(1.85rem, 7vw, 2.2rem);
}
/* На мобиле даём h1 переноситься естественно — ручной
создавал
неудобный разрыв (между «контактов» и «в стиле») */
.hero h1 br {
display: none;
}
.lead {
font-size: 1rem;
}
/* Секции «Как это устроено» / «Зачем это нужно» — компактнее */
.section {
padding: 1.5rem 0;
}
.section-title {
font-size: 1.25rem;
}
/* Утилита: скрыть поле/элемент только на мобиле */
.field--mobile-hidden,
.mobile-hidden {
display: none !important;
}
/* «Мои обещания» / «Обещания контакта» в форме взаимодействия:
на узком экране кнопка «Пообещать» уезжала за правый край —
укладываем input и кнопку в колонку на всю ширину. */
.promise-add-row {
flex-direction: column;
gap: 0.5rem;
}
.promise-add-row input,
.promise-add-btn {
width: 100%;
}
/* Все формы .form-inline-compact на мобиле — вертикально, поля и кнопки
на всю ширину. Иначе на узком экране flex/grid колонки сжимают
контент и кнопка визуально накладывается на поле. */
.form-inline-compact {
grid-template-columns: 1fr !important;
}
.form-inline-compact .field {
grid-column: 1 !important;
grid-row: auto !important;
min-width: 0;
}
/* Quick-add (flex-layout, не grid) — стэкается через flex-direction */
.add-contact-compact .form-inline-compact {
flex-direction: column;
align-items: stretch;
}
.add-contact-compact .form-inline-compact .field,
.add-contact-compact .form-inline-compact .button {
width: 100%;
flex: 1 1 auto;
}
/* Footer: вертикальная раскладка, без бьющих в глаза «·»-разделителей */
.footer-line {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.footer-sep {
display: none;
}
.footer-content {
font-size: 0.88rem;
}
}