html{overflow-x:hidden;max-width:100vw;}
/* ===== HomeCare — Core Design Tokens & Base =====
Include on every page:
================================================= */
/* ===== DESIGN TOKENS ===== */
:root {
/* Brand palette */
--warm-cream: #FFF8F0;
--soft-peach: #FFE8D6;
--gentle-coral: #F4A895;
--warm-terra: #D4856B;
--deep-brown: #5C3D2E;
--trust-green: #7CB69D;
--trust-green-light: #E8F5EE;
--soft-blue: #8AADC4;
--soft-blue-light: #E6F0F6;
/* Text */
--text-primary: #3D2B1F;
--text-secondary: #7A6558;
--text-light: #A69488;
--white: #FFFFFF;
/* Shadows */
--shadow-soft: 0 2px 20px rgba(92, 61, 46, 0.08);
--shadow-card: 0 4px 30px rgba(92, 61, 46, 0.1);
--shadow-hover: 0 8px 40px rgba(92, 61, 46, 0.15);
/* Radii */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
/* Fonts */
--font-he: 'Assistant', 'Rubik', sans-serif;
--font-en: 'Nunito', 'Rubik', sans-serif;
--font-ru: 'Rubik', sans-serif;
/* Motion */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Short aliases (for compact pages like admin/catalog) */
--cream: var(--warm-cream);
--peach: var(--soft-peach);
--coral: var(--gentle-coral);
--terra: var(--warm-terra);
--brown: var(--deep-brown);
--green: var(--trust-green);
--green-lt: var(--trust-green-light);
--blue: var(--soft-blue);
--blue-lt: var(--soft-blue-light);
--txt: var(--text-primary);
--txt2: var(--text-secondary);
--txt3: var(--text-light);
--r: var(--radius-sm);
--r2: var(--radius-md);
--r3: var(--radius-lg);
--r4: var(--radius-xl);
--trans: var(--transition);
}
/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ===== BASE ===== */
body {
font-family: var(--font-he);
background: var(--warm-cream);
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
}
/* ===== FONT SWITCHING ===== */
[lang="en"] body, [lang="en"] input, [lang="en"] select, [lang="en"] textarea, [lang="en"] button { font-family: var(--font-en); }
[lang="ru"] body, [lang="ru"] input, [lang="ru"] select, [lang="ru"] textarea, [lang="ru"] button { font-family: var(--font-ru); }
/* ===== BACKGROUND TEXTURE ===== */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(244, 168, 149, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(138, 173, 196, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(124, 182, 157, 0.06) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* ===== MAIN CONTENT WRAPPER ===== */
.main {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px 40px;
}
.main.wide { max-width: 1400px; }
.main.narrow { max-width: 900px; }
/* ===== SECTION ===== */
.section {
position: relative;
z-index: 1;
padding: 80px 24px;
}
/* ===== RTL/LTR HELPERS ===== */
[dir="rtl"] .text-start { text-align: right; }
[dir="ltr"] .text-start { text-align: left; }
/* ===== GOOGLE FONTS PRECONNECT (pages should include in ):
===== */
/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}