/* ============================================================ Cozy Harbor — дизайн-фундамент Токены и компоненты воссозданы из design_handoff_cozy_harbor. Шрифты подключаются в страниц (Newsreader + Figtree). ============================================================ */ :root { /* акцент — бирюзовая тема (по умолчанию) */ --accent: #1f8a7a; --accent-deep: #176b5f; --accent-soft: rgba(31, 138, 122, .12); /* тёмные/navy */ --navy: #0b2438; --navy-frame: #0a2031; --ink: #143041; --ink-2: #22414f; --ink-3: #3a5564; /* кремовые/светлые */ --cream: #f7eee1; --cream-card: #fffaf2; --cream-text: #fdf6ea; --cream-text-2: #f3e6cf; /* серо-голубые */ --slate: #5b7080; --slate-muted: #8499a6; --slate-muted-2: #9aabb5; /* прочее */ --coral: #e07a55; --coral-deep: #bf5d3c; --chat-bg: #f0f4f3; --danger: #c2543f; /* радиусы */ --r-card: 26px; --r-card-lg: 28px; --r-btn: 16px; --r-btn-sm: 15px; --r-chip: 13px; --r-pill: 23px; /* тени */ --sh-card: 0 24px 50px -24px rgba(11, 36, 56, .5); --sh-feed: 0 26px 50px -22px rgba(11, 36, 56, .5); --sh-accent: 0 14px 30px -12px var(--accent); --sh-like: 0 16px 32px -10px var(--accent); --sh-neutral: 0 8px 18px -8px rgba(11, 36, 56, .3); --maxw: 430px; } /* коралловая тема */ [data-theme="coral"] { --accent: #e07a55; --accent-deep: #bf5d3c; --accent-soft: rgba(224, 122, 85, .14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } ::-webkit-scrollbar { display: none; } body { font-family: Figtree, system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; } /* Оболочка приложения: мобильная колонка по центру */ .app { width: 100%; max-width: var(--maxw); height: 100vh; /* фикс. высота во весь экран, чтобы шапки/навбар/поле ввода были прибиты */ height: 100dvh; /* учитывает адресную строку мобильных браузеров */ margin: 0 auto; background: var(--cream); display: flex; flex-direction: column; position: relative; overflow: hidden; /* внутренняя область скроллится сама; клипуем свечения/градиенты */ } .app--chat { background: var(--chat-bg); } .app--dark { background: var(--navy); } /* ---------- Типографика ---------- */ .display { font-family: Newsreader, Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.06; margin: 0; color: var(--ink); } .display--xl { font-size: 44px; line-height: 1.05; } .display--lg { font-size: 41px; } .display--name { font-weight: 600; letter-spacing: -.01em; } .lead { font: 400 16px/1.55 Figtree, sans-serif; color: var(--slate); margin: 0; } .section-label { font: 700 11px Figtree, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-muted); } /* ---------- Бренд ---------- */ .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); } .brand__name { font: 800 17px Figtree, sans-serif; letter-spacing: -.01em; } .brand__name--lg { font-size: 19px; } .brand--light, .brand--light .brand__name { color: var(--cream-text-2); } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font: 700 16px Figtree, sans-serif; border-radius: var(--r-btn); transition: transform .12s ease, background .15s ease, opacity .15s ease; text-decoration: none; } .btn:active { transform: scale(.98); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--accent { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); } .btn--accent:hover { background: var(--accent-deep); } .btn--outline { background: transparent; border: 1px solid var(--accent); color: var(--accent-deep); font-weight: 700; } .btn--ghost { background: transparent; border: 1px solid rgba(20, 48, 65, .18); color: var(--ink); font: 600 14px Figtree, sans-serif; } .btn--social { background: transparent; border: 1px solid rgba(243, 230, 207, .22); color: var(--cream-text-2); font: 600 15px Figtree, sans-serif; } .btn--block { width: 100%; } .btn--lg { height: 56px; font-size: 16px; } .btn--xl { height: 58px; font-size: 17px; } .btn--sm { height: 38px; padding: 0 18px; border-radius: 20px; } /* ---------- Чипы интересов ---------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font: 600 13px Figtree, sans-serif; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--r-chip); padding: 7px 13px; } .chip--onphoto { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); font-size: 12px; padding: 6px 12px; } /* ---------- Пилюля локации / статус ---------- */ .pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid rgba(20, 48, 65, .08); border-radius: 20px; padding: 8px 14px; font: 600 13px Figtree, sans-serif; color: var(--ink); } /* ---------- Бейдж "проверена" ---------- */ .verified-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(31, 138, 122, .92); border-radius: 14px; padding: 6px 11px; font: 700 11px Figtree, sans-serif; color: #fff; letter-spacing: .02em; } /* ---------- Фото-слот (плейсхолдер до загрузки фото) ---------- */ .photo-slot { position: relative; background: linear-gradient(135deg, #cfe0e3 0%, #e9b08e 100%); display: flex; align-items: center; justify-content: center; color: rgba(11, 36, 56, .45); font: 600 13px Figtree, sans-serif; overflow: hidden; } .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Карточки ---------- */ .card { background: var(--cream-card); border: 1px solid rgba(20, 48, 65, .07); border-radius: 18px; padding: 16px 18px; } /* ---------- Нижняя навигация ---------- */ .bottom-nav { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 14px calc(26px + env(safe-area-inset-bottom)); background: var(--cream-card); border-top: 1px solid rgba(20, 48, 65, .07); position: sticky; bottom: 0; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--slate-muted-2); background: none; border: none; cursor: pointer; text-decoration: none; } .nav-item span { font: 600 11px Figtree, sans-serif; } .nav-item.is-active { color: var(--accent); } .nav-item.is-active span { font-weight: 700; } /* ---------- Тоглы ---------- */ .toggle { width: 46px; height: 27px; border-radius: 14px; background: rgba(20, 48, 65, .14); position: relative; flex: none; border: none; cursor: pointer; transition: background .18s ease; padding: 0; } .toggle__knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .18s ease; } .toggle.is-on { background: var(--accent); } .toggle.is-on .toggle__knob { left: 22px; } /* ---------- Бабблы чата ---------- */ .msg { max-width: 74%; padding: 11px 15px; font: 400 15px/1.45 Figtree, sans-serif; } .msg--in { align-self: flex-start; background: #fff; border: 1px solid rgba(20, 48, 65, .06); border-radius: 20px 20px 20px 6px; color: var(--ink-2); } .msg--out { align-self: flex-end; background: var(--accent); border-radius: 20px 20px 6px 20px; color: #fff; } /* ---------- Свечения для тёмного онбординга ---------- */ .glow { position: absolute; border-radius: 50%; pointer-events: none; } .glow--teal { top: -120px; left: -80px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(31, 138, 122, .45), transparent 70%); } .glow--coral { bottom: 160px; right: -110px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(236, 138, 107, .28), transparent 70%); } /* ---------- Формы ---------- */ .label { display: block; font: 600 13px Figtree, sans-serif; color: var(--slate); margin: 0 0 7px 2px; } .input, .textarea { width: 100%; background: var(--cream-card); border: 1px solid rgba(20, 48, 65, .12); border-radius: 14px; padding: 13px 15px; font: 400 15px Figtree, sans-serif; color: var(--ink); outline: none; transition: border-color .15s ease; } .input:focus, .textarea:focus { border-color: var(--accent); } .textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .seg button { height: 46px; border: 1px solid rgba(20, 48, 65, .14); background: var(--cream-card); border-radius: 14px; font: 600 14px Figtree, sans-serif; color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .seg button.is-on { background: var(--accent); color: #fff; border-color: var(--accent); } /* выбираемый чип интереса */ .pick { font: 600 13px Figtree, sans-serif; background: var(--cream-card); border: 1px solid rgba(20, 48, 65, .14); color: var(--ink); border-radius: var(--r-chip); padding: 8px 13px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pick.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); } /* фото-сетка в редакторе */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .photo-cell { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--accent-soft); } .photo-cell img { width: 100%; height: 100%; object-fit: cover; } .photo-cell__del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; background: rgba(11, 36, 56, .6); color: #fff; display: flex; align-items: center; justify-content: center; } .photo-add { aspect-ratio: 3 / 4; border-radius: 16px; border: 1.5px dashed rgba(20, 48, 65, .25); background: var(--cream-card); display: flex; align-items: center; justify-content: center; color: var(--slate-muted); cursor: pointer; } /* утилиты */ .muted { color: var(--slate); } .center { text-align: center; } .row { display: flex; align-items: center; } .spread { display: flex; align-items: center; justify-content: space-between; }