/* Love Lab — Design System (тёплый научный дневник-гербарий) Источник правды: docs/DESIGN.md. Имена классов сохранены от старой версии, чтобы движок app.js продолжал работать — заменён только облик (неон бумага). */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* бумага и чернила */ --paper:#efe9db; --surface:#fbf9f2; --inset:#e7e1d1; --line:#d8d2bf; --ink:#3b4233; --ink-soft:#5f6653; --muted:#8c9179; /* шалфей · основной (прогресс, «правильно») */ --sage:#7e9e72; --sage-deep:#5f8154; --sage-tint:#dde6d2; /* лаванда · акцент (тайны, УФ, ночь) */ --lav:#9d8bc9; --lav-deep:#7d6bb0; --lav-tint:#e7e1f2; /* сухая роза · тепло (любовь — дозированно) */ --rose:#d99a90; --rose-deep:#b46f63; --rose-tint:#f2ded8; /* состояния */ --ok:#5f8154; --ok-tint:#dcead0; --alert:#c2765c; --alert-tint:#f1ddd2; --locked:#b3ad99; --locked-tint:#eae5d6; /* УФ-проявка */ --uv-neon:#b7e07a; --uv-shadow:rgba(36,28,64,.86); /* типографика */ --font-hand:'Caveat',cursive; --font-text:'Lora',Georgia,serif; --font-mono:'JetBrains Mono',monospace; /* форма */ --radius:14px; --radius-lg:20px; --shadow-soft:0 18px 40px -30px rgba(59,66,51,.55); --shadow-lift:0 2px 0 var(--sage-deep), 0 10px 20px -10px rgba(95,129,84,.7); /* акцент текущей «комнаты» — переопределяется по дню (см. data-room) */ --accent:var(--sage); --accent-deep:var(--sage-deep); --accent-tint:var(--sage-tint); } /* 14 комнат — палитра-акцент дня. JS ставит на */ /* Акцент действий (кнопки, активный день, «правильно») — ВСЕГДА зелёный (шалфей), один для всех дней. По дням меняется ТОЛЬКО фоновая иллюстрация (app.js DAY_BG), а не цвет интерфейса. Никаких розово-красных кнопок. */ /* время суток — мягкий оттенок бумаги из «окна» (data-tod на body) */ body[data-tod="morning"] { --paper:#f1ece0; } body[data-tod="day"] { --paper:#efe9db; } body[data-tod="evening"] { --paper:#efe6da; } body[data-tod="rain"] { --paper:#e9e9e2; } body[data-tod="night"] { --paper:#e7e3d9; } /* Общие стили */ body { background-color: var(--paper); color: var(--ink); font-family: var(--font-text); transition: background-color .8s ease; } /* Карточки — лист бумаги, не матовое стекло */ .glass-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); } /* Кнопки */ .btn-primary { background-color: var(--accent); color: #2c3327; border: none; border-radius: var(--radius); font-family: var(--font-text); font-weight: 600; box-shadow: var(--shadow-lift); transition: all .2s cubic-bezier(.4,0,.2,1); } .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); } .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-deep); } .btn-secondary { border: 1px solid var(--line); background-color: var(--surface); color: var(--ink); border-radius: var(--radius); transition: all .2s ease; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent-deep); } /* УФ-фонарик — затемнение вокруг луча, проявка скрытых букв */ #uv-overlay { background: radial-gradient( circle 90px at var(--x, 0px) var(--y, 0px), rgba(120,90,180,0.10) 0%, var(--uv-shadow) 55%, var(--uv-shadow) 100% ); mix-blend-mode: multiply; } .uv-secret { opacity: 0; color: var(--uv-neon); font-weight: 700; pointer-events: none; transition: opacity .2s cubic-bezier(.4,0,.2,1), text-shadow .2s ease; } .uv-secret.uv-highlighted { opacity: 1 !important; text-shadow: 0 0 8px var(--uv-neon), 0 0 16px rgba(183,224,122,.6); } /* 3D Флип — Telegram-аналитика */ .flip-card { background-color: transparent; perspective: 1000px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform .6s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: var(--radius); border: 1px solid var(--line); padding: 16px; } .flip-card-front { background-color: var(--surface); color: var(--ink); } .flip-card-back { background-color: var(--accent-tint); color: var(--accent-deep); transform: rotateY(180deg); border-color: var(--accent); box-shadow: var(--shadow-soft); } /* Скетч-гербарий — прорисовка тушью */ .sketch-leaf { stroke: var(--ink-soft); stroke-width: 1.5; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 3s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* Скроллбары — мягкие */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--paper); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Шкала дней 1–14 */ .day-node { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; transition: all .3s cubic-bezier(.4,0,.2,1); cursor: pointer; border: 2px solid transparent; background: var(--inset); color: var(--muted); } /* Пройденные дни — мягкий шалфей */ .day-node.completed { background-color: var(--sage-tint); color: var(--sage-deep); border-color: var(--sage); } .day-node.completed:hover { filter: brightness(.98); box-shadow: var(--shadow-soft); } /* Текущий активный день — мягкое кольцо фокуса (не неон) */ .day-node.active { background-color: var(--accent); color: #2c3327; border-color: var(--accent-deep); box-shadow: 0 0 0 4px var(--accent-tint); animation: soft-ring 2.4s infinite ease-in-out; } .day-node.active:hover { transform: scale(1.08); } /* Следующий закрытый день — приглушённый, с замком */ .day-node.next-locked { background-color: var(--locked-tint); color: var(--locked); border-color: var(--line); } .day-node.next-locked:hover { filter: brightness(.97); color: var(--ink-soft); } /* Будущие — не видны/выключены */ .day-node.future-disabled { background-color: var(--paper); color: transparent; border-color: var(--inset); pointer-events: none; opacity: .35; } /* Текущий просмотр (архив/активный) */ .day-node.viewing { border-color: var(--accent-deep) !important; box-shadow: 0 0 0 3px var(--accent-tint); transform: scale(1.06); } @keyframes soft-ring { 0%,100% { box-shadow: 0 0 0 4px var(--accent-tint); } 50% { box-shadow: 0 0 0 7px var(--accent-tint); } } /* Экран ожидания (таймер до полуночи Алматы) — тёплый, не тревожный */ #timer-screen { background-color: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); } #timer-screen h3 { color: var(--lav-deep) !important; font-family: var(--font-text); } #timer-screen p { color: var(--ink-soft) !important; } #countdown-timer { color: var(--lav-deep) !important; font-family: var(--font-mono); background-color: var(--lav-tint) !important; border: 1px solid var(--lav) !important; border-radius: var(--radius); } /* Рукописные пометки на полях */ .hand-note { font-family: var(--font-hand); color: var(--muted); } /* Данные/приборы */ .mono, .data-label { font-family: var(--font-mono); color: var(--ink-soft); } /* Сад — покачивание */ @keyframes plant-sway { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } } .animate-sway { animation: plant-sway 1s ease-in-out; } /* радар-развёртка (День 13) */ @keyframes scanner-sweep-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #scanner-sweep { transform-origin: 100px 100px; animation: scanner-sweep-anim 10s linear infinite; }