/* ========================================================================= C:\xampp\htdocs\lovelang\assets\style.css Собственные стили поверх Tailwind CDN. Акцентный цвет задаётся переменной --accent прямо в на каждой странице: оранжевый для личного теста, бирюзовый для рабочего. ========================================================================= */ :root{ --accent:#0891b2; --ink:#1e293b; --muted:#64748b; --line:#e5e7eb; } *{margin:0;padding:0;box-sizing:border-box} body{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif; background:#fefdfb; color:var(--ink); overflow-x:hidden; scroll-behavior:smooth; } .font-logo{font-family:'Space Grotesk',sans-serif} /* --- переключатель языков ------------------------------------------------ */ .lang-btn{opacity:.6;transition:all .25s ease;text-decoration:none;color:inherit} .lang-btn:hover,.lang-btn.active{opacity:1;color:var(--accent);font-weight:600} /* --- главная ------------------------------------------------------------- */ .gradient-bg{background:linear-gradient(135deg,#fef3f2 0%,#f0f9ff 100%)} .fade-in{animation:fadeIn .6s ease-out} @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .card-hover{transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s} .card-hover:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.12)} .test-card.selected{border-color:var(--accent) !important;box-shadow:0 12px 34px rgba(0,0,0,.12)} .step-card{background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:box-shadow .3s} .step-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.1)} /* --- облако всплывающих фраз --------------------------------------------- */ /* Каждая фраза появляется, висит и растворяется. Позиции и задержки расставляет app.js, поэтому набор каждый раз выглядит по-новому. */ .phrase{ position:absolute; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; animation:phraseFloat 9s ease-in-out infinite; } @keyframes phraseFloat{ 0%,100%{opacity:0;transform:translateY(18px) scale(.95)} 12%,80%{opacity:.85;transform:translateY(0) scale(1)} } /* --- прохождение теста ---------------------------------------------------- */ .sticky-nav{ position:sticky;top:60px;z-index:40; background:#fff;border-bottom:1px solid var(--line); } .nav-item{ padding:.85rem 1rem;font-size:.8rem;font-weight:600;color:var(--muted); white-space:nowrap;position:relative;transition:all .3s ease; } .nav-item.active{color:var(--accent)} .nav-item.active::after{ content:'';position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--accent); } @media(min-width:640px){.nav-item{padding:1rem 1.4rem;font-size:.875rem}} .intro-card{ border-radius:24px;padding:1.75rem;margin-bottom:2rem;position:relative;overflow:hidden; background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); } .intro-card.love{background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%)} @media(min-width:640px){.intro-card{padding:2.25rem}} .section-number{ font-size:4.5rem;font-weight:800;line-height:1;opacity:.12;color:var(--accent);margin-bottom:.25rem; } .info-box{ display:flex;gap:.75rem;align-items:flex-start; background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06); border-radius:12px;padding:.9rem 1.1rem;font-size:.9rem;color:#334155; } .info-box i{color:var(--accent);flex-shrink:0} .question-card{ background:#fff;border-radius:16px;padding:1.5rem;margin-bottom:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.04);border:1px solid #f1f5f9; } @media(min-width:640px){.question-card{padding:2rem}} /* Вариант ответа — целиком кликабельная карточка */ .option-card{ display:flex;gap:.85rem;align-items:flex-start; border:2px solid var(--line);border-radius:12px;padding:1.1rem; cursor:pointer;background:#fff;transition:all .25s ease; } .option-card:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.07)} .option-card.selected{border-color:var(--accent);border-width:3px;padding:calc(1.1rem - 1px);background:color-mix(in srgb,var(--accent) 7%,#fff)} .radio-dot{ width:22px;height:22px;border:2px solid #cbd5e1;border-radius:50%; flex-shrink:0;margin-top:2px;transition:all .2s ease; } .option-card.selected .radio-dot{border-color:var(--accent);border-width:7px} /* Шкала 0–4 */ .scale-row{display:flex;gap:.6rem;flex-wrap:wrap} .scale-btn{ width:52px;height:52px;border:2px solid var(--line);border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:1.05rem;cursor:pointer;background:#fff;transition:all .25s ease; } .scale-btn:hover{border-color:var(--accent);transform:scale(1.08)} .scale-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent)} .scale-legend{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:.6rem} @media(max-width:480px){.scale-btn{width:44px;height:44px;font-size:.95rem}} textarea{resize:vertical;font-family:inherit;font-size:1rem;line-height:1.55} textarea:focus,input:focus{border-color:var(--accent) !important} /* Нижняя панель с прогрессом */ .bottom-panel{ position:fixed;inset-inline:0;bottom:0;z-index:45; background:#fff;border-top:2px solid var(--line); padding:1rem 1.25rem;box-shadow:0 -4px 12px rgba(0,0,0,.07); } .progress-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:.75rem} .progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .5s ease} .btn-accent{background:var(--accent);transition:filter .2s ease} .btn-accent:hover{filter:brightness(.92)} /* --- результат ------------------------------------------------------------ */ .rank-track{height:14px;background:#eef1f5;border-radius:7px;overflow:hidden} .rank-fill{height:100%;border-radius:7px;transition:width .8s ease} .check-row{ display:flex;gap:.85rem;align-items:flex-start; border:2px solid var(--line);border-radius:12px;padding:1rem; cursor:pointer;transition:all .25s ease; } .check-row:hover{border-color:var(--accent)} .check-row.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#fff)} .check-box{ width:24px;height:24px;border:2px solid #cbd5e1;border-radius:6px;flex-shrink:0; display:flex;align-items:center;justify-content:center;color:transparent;transition:all .2s ease; } .check-row.selected .check-box{background:var(--accent);border-color:var(--accent);color:#fff} /* --- RTL (арабский) -------------------------------------------------------- */ /* Направление переворачивает браузер, руками поправляем только то, что завязано на физические стороны. */ [dir="rtl"] .rank-fill{margin-inline-start:0} [dir="rtl"] .ri-arrow-right-line::before{content:"\ea60"} [dir="rtl"] .ri-arrow-left-line::before{content:"\ea6c"} /* --- печать ---------------------------------------------------------------- */ @media print{ header,footer,.bottom-panel,.sticky-nav,.no-print{display:none !important} body{background:#fff} section{break-inside:avoid;box-shadow:none !important} } /* ========================================================================== ШКАЛА 0–4 ДЛЯ СЦЕН Пять кнопок вертикально: горизонтально на мобильном не помещается, а подписи обязательны — голые цифры люди читают как оценку «плохо/хорошо». ========================================================================== */ .scene-head{ background:#fff;border:1px solid #e8edf3;border-radius:18px; padding:22px 24px;margin-bottom:18px; box-shadow:0 1px 3px rgba(15,23,42,.05); } .scale-vert{display:flex;flex-direction:column;gap:8px} .scale-opt{ display:flex;align-items:center;gap:14px; padding:12px 16px;border:2px solid #e8edf3;border-radius:12px; cursor:pointer;transition:border-color .15s,background .15s; background:#fff; } .scale-opt:hover{border-color:#cbd5e1;background:#fafcff} .scale-opt.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#fff)} .scale-face{font-size:22px;line-height:1;flex-shrink:0;width:28px;text-align:center} .scale-label{font-size:15px;color:#334155} .scale-opt.selected .scale-label{color:#0f172a;font-weight:600} /* Свободный ответ с котом */ .ai-row{display:flex;gap:22px;align-items:flex-start} .ai-cat{width:110px;height:110px;flex-shrink:0;color:var(--accent)} @media (max-width:640px){ .ai-row{flex-direction:column;align-items:center} .ai-cat{width:84px;height:84px} } /* График средних 0–4 с линией личного среднего */ .chart-row{margin-bottom:14px} .chart-track{position:relative;height:22px;background:#f1f5f9;border-radius:6px;overflow:hidden} .chart-fill{height:100%;border-radius:6px} .chart-mean{ position:absolute;top:-4px;bottom:-4px;width:2px;background:#0f172a;opacity:.55; } .chart-mean-label{font-size:11px;color:#64748b} /* Подстраховка на случай, если скрипт не загрузился: выбранный вариант подсвечивается средствами CSS. Дублирует класс .selected из app.js. */ .option-card:has(input:checked), .scale-btn:has(input:checked){border-color:var(--accent)} .scale-opt:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,#fff); } .scale-opt:has(input:checked) .scale-label{color:#0f172a;font-weight:600}