/* meow_theme.css — единая тема всего сайта. Цвета и радиусы — переменные. Меняешь :root и весь сайт перекрашивается. Для тёмной темы (раздел кодинга): или Для частей где нужно явно "яркое" — оставляем светлую (по умолчанию). */ :root { /* Палитра */ --meow-primary: #b98545; --meow-primary-2: #d89a46; --meow-accent: #00b894; --meow-accent-2: #0984e3; --meow-warn: #fdcb6e; --meow-warn-2: #e17055; --meow-danger: #d63031; --meow-danger-2: #c0392b; --meow-mistake: #ff7675; /* Поверхности */ --meow-bg: #f6f7fb; --meow-bg-grad: linear-gradient(135deg, #94a4ec, #9c6eca); --meow-bg-card: #ffffff; --meow-bg-soft: #eef0f4; --meow-text: #222831; --meow-text-soft: #5b6573; --meow-text-muted: #8a94a3; --meow-border: #e6e8ee; /* Радиусы / тени */ --meow-radius: 14px; --meow-radius-sm: 10px; --meow-radius-lg: 18px; --meow-shadow: 0 14px 40px rgba(0, 0, 0, .14); --meow-shadow-soft: 0 6px 18px rgba(0, 0, 0, .10); /* Анимации */ --meow-ease-spring: cubic-bezier(.5, 1.7, .5, .7); --meow-ease: cubic-bezier(.4, 0, .2, 1); --meow-dur: .22s; } /* Тёмная тема — для раздела кодинга. Накладывается на :root. */ [data-theme="dark"] { --meow-primary: #74b9ff; --meow-primary-2: #f0c98d; --meow-accent: #00cec9; --meow-accent-2: #54a0ff; --meow-warn: #ffd166; --meow-warn-2: #ee9a3a; --meow-danger: #ff7675; --meow-mistake: #ff8b94; --meow-bg: #0f1115; --meow-bg-grad: linear-gradient(135deg, #1e272e 0%, #0f1115 100%); --meow-bg-card: #1a1f2b; --meow-bg-soft: #232a38; --meow-text: #eaecef; --meow-text-soft: #b6bcc6; --meow-text-muted: #7c8694; --meow-border: #2a3142; --meow-shadow: 0 14px 40px rgba(0, 0, 0, .55); --meow-shadow-soft: 0 6px 18px rgba(0, 0, 0, .45); } /* Reduced motion — отключаем все «живые» анимации для людей с чувствительностью. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Универсальные классы — можно использовать в любом шаблоне без переписывания */ .meow-card { background: var(--meow-bg-card); color: var(--meow-text); border-radius: var(--meow-radius-lg); padding: 22px; box-shadow: var(--meow-shadow); border: 1px solid var(--meow-border); } .meow-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--meow-bg-soft); color: var(--meow-text); } .meow-pill.beta { background: var(--meow-primary-2); color: #2a1c08; font-size: 10px; padding: 3px 8px; margin-left: 8px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; } .meow-link { color: var(--meow-primary); text-decoration: none; font-weight: 700; } .meow-link:hover { text-decoration: underline; } .meow-muted { color: var(--meow-text-muted); } .meow-soft { color: var(--meow-text-soft); } /* Skeleton loader: мерцающий placeholder для async-загрузок */ .meow-skel { background: linear-gradient(90deg, var(--meow-bg-soft) 25%, var(--meow-border) 50%, var(--meow-bg-soft) 75%); background-size: 200% 100%; animation: meow-shimmer 1.4s linear infinite; border-radius: var(--meow-radius-sm); display: inline-block; height: 1em; width: 100%; } @keyframes meow-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Number tween — плавный счётчик */ .meow-counter { font-variant-numeric: tabular-nums; } /* View transitions API — браузерная анимация смены страниц */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: var(--meow-ease); } /* Spring-tap для кнопок-сюрпризов */ .meow-spring { transition: transform var(--meow-dur) var(--meow-ease-spring); } .meow-spring:active { transform: scale(.95); } /* Streak fire — масштаб по числу дней через CSS variable */ .meow-streak { display: inline-block; transform-origin: bottom center; transform: scale(var(--meow-streak-scale, 1)); transition: transform var(--meow-dur) var(--meow-ease-spring); filter: drop-shadow(0 2px 6px rgba(255, 117, 24, .55)); } .meow-streak.flicker { animation: meow-flicker 1.4s ease-in-out infinite; } @keyframes meow-flicker { 0%, 100% { transform: scale(var(--meow-streak-scale, 1)) translateY(0); } 50% { transform: scale(calc(var(--meow-streak-scale, 1) * 1.06)) translateY(-2px); } } /* Маскот в углу — общие стили */ .meow-mascot { position: fixed; right: 18px; bottom: 18px; width: 86px; height: 86px; z-index: 9990; cursor: pointer; pointer-events: auto; transition: transform var(--meow-dur) var(--meow-ease-spring); user-select: none; } .meow-mascot:hover { transform: scale(1.05) rotate(-3deg); } .meow-mascot.bounce { animation: meow-bounce 1.6s ease-in-out infinite; } @keyframes meow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .meow-mascot-bubble { position: fixed; right: 110px; bottom: 30px; z-index: 9991; background: var(--meow-bg-card); color: var(--meow-text); border: 1px solid var(--meow-border); border-radius: 14px; padding: 10px 14px; max-width: 260px; box-shadow: var(--meow-shadow-soft); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .25s var(--meow-ease), transform .25s var(--meow-ease-spring); pointer-events: none; } .meow-mascot-bubble.show { opacity: 1; transform: translateY(0) scale(1); } .meow-mascot-bubble::after { content: ''; position: absolute; right: -8px; bottom: 16px; width: 0; height: 0; border: 8px solid transparent; border-left-color: var(--meow-bg-card); } /* Heatmap-полоска (используется на дашборде и /mistakes) */ .meow-heatmap { display: grid; grid-template-columns: repeat(45, 1fr); gap: 3px; } .meow-heatmap > div { aspect-ratio: 1 / 1; background: var(--meow-bg-soft); border-radius: 3px; transition: transform var(--meow-dur) var(--meow-ease); } .meow-heatmap > div:hover { transform: scale(1.4); } /* Confetti / floating emoji — мелкие "победные" штуки */ .meow-pop { position: fixed; font-size: 22px; pointer-events: none; z-index: 99999; animation: meow-pop 1.2s ease-out forwards; } @keyframes meow-pop { 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(.8) rotate(var(--rot, 0)); } } /* Ярко-яркие градиенты для landing-карточек дашборда */ .meow-grad-1 { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; } .meow-grad-2 { background: linear-gradient(135deg, #74b9ff, #0984e3); color: #fff; } .meow-grad-3 { background: linear-gradient(135deg, #00b894, #00a085); color: #fff; } .meow-grad-4 { background: linear-gradient(135deg, #fdcb6e, #e17055); color: #fff; } .meow-grad-5 { background: linear-gradient(135deg, #f0c98d, #6c5ce7); color: #fff; } .meow-grad-6 { background: linear-gradient(135deg, #fd79a8, #e84393); color: #fff; } /* Большая «герой»-кнопка на дашборде */ .meow-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; border-radius: 999px; background: linear-gradient(135deg, #00b894, #0984e3); color: #fff; font-weight: 900; font-size: 20px; text-decoration: none; box-shadow: 0 14px 30px rgba(9, 132, 227, .35); transition: transform var(--meow-dur) var(--meow-ease-spring), box-shadow var(--meow-dur); cursor: pointer; border: 0; } .meow-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 36px rgba(9, 132, 227, .45); } .meow-cta:active { transform: translateY(0) scale(.98); } /* Toggle темы — маленькая кнопка-пилюля */ .meow-theme-toggle { background: var(--meow-bg-soft); color: var(--meow-text); border: 1px solid var(--meow-border); border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; }