/* ============================================================
Rewrite My Sentence — Global Stylesheet
Подключается на всех страницах сайта после локального Tailwind runtime.
Порядок подключения в :
1. tailwind-cdn.js (локальная копия)
2. lucide.min.js (локальная копия)
3.
4.
============================================================ */
/* ─────────────────────────────────────────────────────────────
SHARED — используется на всех страницах
───────────────────────────────────────────────────────────── */
/* Gradient text (hero заголовки) */
.gradient-text {
background: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Gradient background (comparison card, CTA-блоки) */
.bg-gradient-primary {
background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
}
/* ─────────────────────────────────────────────────────────────
BLOG — превью-карточки статей (blog.html)
───────────────────────────────────────────────────────────── */
.card-thumb-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.card-thumb-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.card-thumb-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.card-thumb-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.card-thumb-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.card-thumb-6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.card-thumb-7 { background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%); }
.card-thumb-8 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.card-thumb-9 { background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%); }
/* Article 9 в blog.html использует отдельный зелёный градиент */
.card-thumb-10 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
/* ─────────────────────────────────────────────────────────────
BLOG POST — типографика текста статьи (blog-post.html)
───────────────────────────────────────────────────────────── */
.article-body h2 {
font-size: 1.5rem;
font-weight: 800;
color: #111827;
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.article-body h3 {
font-size: 1.15rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 0.75rem;
}
.article-body p {
margin-bottom: 1.25rem;
line-height: 1.8;
}
.article-body ul,
.article-body ol {
margin-bottom: 1.25rem;
padding-left: 1.5rem;
}
.article-body a {
color: #4F46E5;
text-decoration: underline;
text-underline-offset: 3px;
}
.article-body img {
border-radius: 18px;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.article-body code {
font-family: 'Courier New', Courier, monospace;
background: #F3F4F6;
color: #374151;
padding: 0.15em 0.4em;
border-radius: 4px;
font-size: 0.875em;
}
/* ─────────────────────────────────────────────────────────────
APP — интерактивные элементы инструмента (app.html)
───────────────────────────────────────────────────────────── */
/* Кастомный range-слайдер интенсивности */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 9999px;
background: #E5E7EB;
outline: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
box-shadow: 0 1px 4px rgba(79, 70, 229, .35);
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
border: none;
box-shadow: 0 1px 4px rgba(79, 70, 229, .35);
}
/* Shimmer-анимация во время загрузки результата */
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.shimmer {
background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
background-size: 800px 100%;
animation: shimmer 1.5s infinite;
}
/* Горизонтальная прокрутка режимов без видимого scrollbar (mobile) */
.mode-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
}
.mode-scroll::-webkit-scrollbar {
display: none;
}
/* Fade-in анимация при появлении результата */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn .25s ease forwards;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Кастомная стрелка для