/* ================================================
ДОБРО В ДЕЛО - Design System v2.0
================================================
Современная дизайн-система с гайдлайнами
================================================ */
/* ================================================
1. CSS ПЕРЕМЕННЫЕ (Design Tokens)
================================================ */
:root {
/* Цветовая палитра */
--dvd-primary: #5B21B6;
--dvd-primary-light: #7C3AED;
--dvd-primary-dark: #4C1D95;
--dvd-primary-50: #F5F3FF;
--dvd-primary-100: #EDE9FE;
--dvd-primary-200: #DDD6FE;
--dvd-primary-300: #C4B5FD;
--dvd-primary-400: #A78BFA;
--dvd-primary-500: #8B5CF6;
--dvd-primary-600: #7C3AED;
--dvd-primary-700: #6D28D9;
--dvd-primary-800: #5B21B6;
--dvd-primary-900: #4C1D95;
--dvd-secondary: #10B981;
--dvd-secondary-light: #34D399;
--dvd-secondary-dark: #059669;
--dvd-accent: #F59E0B;
--dvd-accent-light: #FCD34D;
--dvd-accent-dark: #D97706;
--dvd-success: #10B981;
--dvd-info: #3B82F6;
--dvd-warning: #F59E0B;
--dvd-danger: #EF4444;
/* Оттенки серого */
--dvd-gray-50: #F9FAFB;
--dvd-gray-100: #F3F4F6;
--dvd-gray-200: #E5E7EB;
--dvd-gray-300: #D1D5DB;
--dvd-gray-400: #9CA3AF;
--dvd-gray-500: #6B7280;
--dvd-gray-600: #4B5563;
--dvd-gray-700: #374151;
--dvd-gray-800: #1F2937;
--dvd-gray-900: #111827;
--dvd-black: #000000;
--dvd-white: #FFFFFF;
/* Тени */
--dvd-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
--dvd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--dvd-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--dvd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--dvd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--dvd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--dvd-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--dvd-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
/* Радиусы скругления */
--dvd-radius-sm: 0.25rem;
--dvd-radius: 0.5rem;
--dvd-radius-md: 0.75rem;
--dvd-radius-lg: 1rem;
--dvd-radius-xl: 1.5rem;
--dvd-radius-2xl: 2rem;
--dvd-radius-full: 9999px;
/* Типографика */
--dvd-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--dvd-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
/* Размеры шрифтов */
--dvd-text-xs: 0.75rem;
--dvd-text-sm: 0.875rem;
--dvd-text-base: 1rem;
--dvd-text-lg: 1.125rem;
--dvd-text-xl: 1.25rem;
--dvd-text-2xl: 1.5rem;
--dvd-text-3xl: 1.875rem;
--dvd-text-4xl: 2.25rem;
--dvd-text-5xl: 3rem;
--dvd-text-6xl: 3.75rem;
/* Межстрочный интервал */
--dvd-leading-none: 1;
--dvd-leading-tight: 1.25;
--dvd-leading-snug: 1.375;
--dvd-leading-normal: 1.5;
--dvd-leading-relaxed: 1.625;
--dvd-leading-loose: 2;
/* Отступы */
--dvd-space-0: 0;
--dvd-space-1: 0.25rem;
--dvd-space-2: 0.5rem;
--dvd-space-3: 0.75rem;
--dvd-space-4: 1rem;
--dvd-space-5: 1.25rem;
--dvd-space-6: 1.5rem;
--dvd-space-7: 1.75rem;
--dvd-space-8: 2rem;
--dvd-space-9: 2.25rem;
--dvd-space-10: 2.5rem;
--dvd-space-12: 3rem;
--dvd-space-14: 3.5rem;
--dvd-space-16: 4rem;
--dvd-space-20: 5rem;
--dvd-space-24: 6rem;
--dvd-space-28: 7rem;
--dvd-space-32: 8rem;
/* Контейнеры */
--dvd-container-sm: 640px;
--dvd-container-md: 768px;
--dvd-container-lg: 1024px;
--dvd-container-xl: 1280px;
--dvd-container-2xl: 1536px;
/* Анимации */
--dvd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--dvd-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--dvd-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ================================================
2. БАЗОВЫЕ СТИЛИ (Reset & Base)
================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: var(--dvd-font-sans);
font-size: var(--dvd-text-base);
line-height: var(--dvd-leading-normal);
color: var(--dvd-gray-900);
background-color: var(--dvd-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Убираем ограничения Bootstrap контейнера */
body > .container,
#main,
.container-fluid {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* ================================================
3. УТИЛИТАРНЫЕ КЛАССЫ
================================================ */
/* Layout Utilities */
.dvd-container {
max-width: var(--dvd-container-xl);
margin: 0 auto;
padding: 0 var(--dvd-space-6);
}
.dvd-full-width {
width: 100%;
max-width: 100%;
}
.dvd-section {
padding: var(--dvd-space-20) 0;
}
.dvd-section-sm {
padding: var(--dvd-space-12) 0;
}
.dvd-section-lg {
padding: var(--dvd-space-32) 0;
}
/* Flexbox Utilities */
.dvd-flex {
display: flex;
}
.dvd-flex-wrap {
flex-wrap: wrap;
}
.dvd-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.dvd-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.dvd-flex-col {
display: flex;
flex-direction: column;
}
.dvd-gap-1 { gap: var(--dvd-space-1); }
.dvd-gap-2 { gap: var(--dvd-space-2); }
.dvd-gap-3 { gap: var(--dvd-space-3); }
.dvd-gap-4 { gap: var(--dvd-space-4); }
.dvd-gap-5 { gap: var(--dvd-space-5); }
.dvd-gap-6 { gap: var(--dvd-space-6); }
.dvd-gap-8 { gap: var(--dvd-space-8); }
/* Grid Utilities */
.dvd-grid {
display: grid;
}
.dvd-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.dvd-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.dvd-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.dvd-grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Typography Utilities */
.dvd-text-xs { font-size: var(--dvd-text-xs); }
.dvd-text-sm { font-size: var(--dvd-text-sm); }
.dvd-text-base { font-size: var(--dvd-text-base); }
.dvd-text-lg { font-size: var(--dvd-text-lg); }
.dvd-text-xl { font-size: var(--dvd-text-xl); }
.dvd-text-2xl { font-size: var(--dvd-text-2xl); }
.dvd-text-3xl { font-size: var(--dvd-text-3xl); }
.dvd-text-4xl { font-size: var(--dvd-text-4xl); }
.dvd-text-5xl { font-size: var(--dvd-text-5xl); }
.dvd-font-light { font-weight: 300; }
.dvd-font-normal { font-weight: 400; }
.dvd-font-medium { font-weight: 500; }
.dvd-font-semibold { font-weight: 600; }
.dvd-font-bold { font-weight: 700; }
.dvd-font-extrabold { font-weight: 800; }
.dvd-text-center { text-align: center; }
.dvd-text-left { text-align: left; }
.dvd-text-right { text-align: right; }
.dvd-text-primary { color: var(--dvd-primary); }
.dvd-text-secondary { color: var(--dvd-secondary); }
.dvd-text-success { color: var(--dvd-success); }
.dvd-text-danger { color: var(--dvd-danger); }
.dvd-text-warning { color: var(--dvd-warning); }
.dvd-text-info { color: var(--dvd-info); }
.dvd-text-gray { color: var(--dvd-gray-600); }
.dvd-text-muted { color: var(--dvd-gray-500); }
.dvd-text-white { color: var(--dvd-white); }
/* Background Utilities */
.dvd-bg-primary { background-color: var(--dvd-primary); }
.dvd-bg-secondary { background-color: var(--dvd-secondary); }
.dvd-bg-success { background-color: var(--dvd-success); }
.dvd-bg-danger { background-color: var(--dvd-danger); }
.dvd-bg-warning { background-color: var(--dvd-warning); }
.dvd-bg-info { background-color: var(--dvd-info); }
.dvd-bg-gray-50 { background-color: var(--dvd-gray-50); }
.dvd-bg-gray-100 { background-color: var(--dvd-gray-100); }
.dvd-bg-gray-200 { background-color: var(--dvd-gray-200); }
.dvd-bg-white { background-color: var(--dvd-white); }
.dvd-bg-gradient {
background: linear-gradient(135deg, var(--dvd-primary) 0%, var(--dvd-primary-light) 100%);
}
/* Spacing Utilities */
.dvd-p-0 { padding: 0; }
.dvd-p-1 { padding: var(--dvd-space-1); }
.dvd-p-2 { padding: var(--dvd-space-2); }
.dvd-p-3 { padding: var(--dvd-space-3); }
.dvd-p-4 { padding: var(--dvd-space-4); }
.dvd-p-5 { padding: var(--dvd-space-5); }
.dvd-p-6 { padding: var(--dvd-space-6); }
.dvd-p-8 { padding: var(--dvd-space-8); }
.dvd-py-1 { padding-top: var(--dvd-space-1); padding-bottom: var(--dvd-space-1); }
.dvd-py-2 { padding-top: var(--dvd-space-2); padding-bottom: var(--dvd-space-2); }
.dvd-py-3 { padding-top: var(--dvd-space-3); padding-bottom: var(--dvd-space-3); }
.dvd-py-4 { padding-top: var(--dvd-space-4); padding-bottom: var(--dvd-space-4); }
.dvd-py-5 { padding-top: var(--dvd-space-5); padding-bottom: var(--dvd-space-5); }
.dvd-py-6 { padding-top: var(--dvd-space-6); padding-bottom: var(--dvd-space-6); }
.dvd-py-8 { padding-top: var(--dvd-space-8); padding-bottom: var(--dvd-space-8); }
.dvd-px-1 { padding-left: var(--dvd-space-1); padding-right: var(--dvd-space-1); }
.dvd-px-2 { padding-left: var(--dvd-space-2); padding-right: var(--dvd-space-2); }
.dvd-px-3 { padding-left: var(--dvd-space-3); padding-right: var(--dvd-space-3); }
.dvd-px-4 { padding-left: var(--dvd-space-4); padding-right: var(--dvd-space-4); }
.dvd-px-5 { padding-left: var(--dvd-space-5); padding-right: var(--dvd-space-5); }
.dvd-px-6 { padding-left: var(--dvd-space-6); padding-right: var(--dvd-space-6); }
.dvd-px-8 { padding-left: var(--dvd-space-8); padding-right: var(--dvd-space-8); }
.dvd-m-0 { margin: 0; }
.dvd-m-1 { margin: var(--dvd-space-1); }
.dvd-m-2 { margin: var(--dvd-space-2); }
.dvd-m-3 { margin: var(--dvd-space-3); }
.dvd-m-4 { margin: var(--dvd-space-4); }
.dvd-m-5 { margin: var(--dvd-space-5); }
.dvd-m-6 { margin: var(--dvd-space-6); }
.dvd-m-8 { margin: var(--dvd-space-8); }
.dvd-my-1 { margin-top: var(--dvd-space-1); margin-bottom: var(--dvd-space-1); }
.dvd-my-2 { margin-top: var(--dvd-space-2); margin-bottom: var(--dvd-space-2); }
.dvd-my-3 { margin-top: var(--dvd-space-3); margin-bottom: var(--dvd-space-3); }
.dvd-my-4 { margin-top: var(--dvd-space-4); margin-bottom: var(--dvd-space-4); }
.dvd-my-5 { margin-top: var(--dvd-space-5); margin-bottom: var(--dvd-space-5); }
.dvd-my-6 { margin-top: var(--dvd-space-6); margin-bottom: var(--dvd-space-6); }
.dvd-my-8 { margin-top: var(--dvd-space-8); margin-bottom: var(--dvd-space-8); }
.dvd-mx-auto { margin-left: auto; margin-right: auto; }
.dvd-mb-0 { margin-bottom: 0; }
.dvd-mb-2 { margin-bottom: var(--dvd-space-2); }
.dvd-mb-3 { margin-bottom: var(--dvd-space-3); }
.dvd-mb-4 { margin-bottom: var(--dvd-space-4); }
.dvd-mb-6 { margin-bottom: var(--dvd-space-6); }
.dvd-mb-8 { margin-bottom: var(--dvd-space-8); }
/* Border Utilities */
.dvd-border {
border: 1px solid var(--dvd-gray-200);
}
.dvd-border-top {
border-top: 1px solid var(--dvd-gray-200);
}
.dvd-border-bottom {
border-bottom: 1px solid var(--dvd-gray-200);
}
.dvd-rounded { border-radius: var(--dvd-radius); }
.dvd-rounded-md { border-radius: var(--dvd-radius-md); }
.dvd-rounded-lg { border-radius: var(--dvd-radius-lg); }
.dvd-rounded-xl { border-radius: var(--dvd-radius-xl); }
.dvd-rounded-full { border-radius: var(--dvd-radius-full); }
/* Shadow Utilities */
.dvd-shadow-sm { box-shadow: var(--dvd-shadow-sm); }
.dvd-shadow { box-shadow: var(--dvd-shadow); }
.dvd-shadow-md { box-shadow: var(--dvd-shadow-md); }
.dvd-shadow-lg { box-shadow: var(--dvd-shadow-lg); }
.dvd-shadow-xl { box-shadow: var(--dvd-shadow-xl); }
.dvd-shadow-2xl { box-shadow: var(--dvd-shadow-2xl); }
/* ================================================
4. КОМПОНЕНТЫ
================================================ */
/* Buttons */
.dvd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dvd-space-2);
padding: var(--dvd-space-3) var(--dvd-space-6);
font-size: var(--dvd-text-base);
font-weight: 600;
line-height: 1;
border-radius: var(--dvd-radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition: all var(--dvd-transition-fast);
white-space: nowrap;
}
.dvd-btn:hover {
transform: translateY(-2px);
box-shadow: var(--dvd-shadow-lg);
text-decoration: none;
}
.dvd-btn:active {
transform: translateY(0);
}
.dvd-btn-primary {
background: linear-gradient(135deg, var(--dvd-primary) 0%, var(--dvd-primary-light) 100%);
color: var(--dvd-white);
}
.dvd-btn-primary:hover {
background: linear-gradient(135deg, var(--dvd-primary-dark) 0%, var(--dvd-primary) 100%);
color: var(--dvd-white);
}
.dvd-btn-secondary {
background: var(--dvd-white);
color: var(--dvd-primary);
border: 2px solid var(--dvd-gray-200);
}
.dvd-btn-secondary:hover {
background: var(--dvd-gray-50);
border-color: var(--dvd-primary-light);
color: var(--dvd-primary);
}
.dvd-btn-success {
background: var(--dvd-success);
color: var(--dvd-white);
}
.dvd-btn-danger {
background: var(--dvd-danger);
color: var(--dvd-white);
}
.dvd-btn-lg {
padding: var(--dvd-space-4) var(--dvd-space-8);
font-size: var(--dvd-text-lg);
}
.dvd-btn-sm {
padding: var(--dvd-space-2) var(--dvd-space-4);
font-size: var(--dvd-text-sm);
}
.dvd-btn-icon {
padding: var(--dvd-space-3);
width: 44px;
height: 44px;
}
/* Cards */
.dvd-card {
background: var(--dvd-white);
border-radius: var(--dvd-radius-lg);
overflow: hidden;
transition: all var(--dvd-transition);
}
.dvd-card:hover {
transform: translateY(-4px);
box-shadow: var(--dvd-shadow-xl);
}
.dvd-card-body {
padding: var(--dvd-space-6);
}
.dvd-card-image {
width: 100%;
height: 200px;
object-fit: cover;
background: var(--dvd-gray-100);
}
.dvd-card-title {
font-size: var(--dvd-text-lg);
font-weight: 600;
color: var(--dvd-gray-900);
margin-bottom: var(--dvd-space-2);
}
.dvd-card-text {
font-size: var(--dvd-text-sm);
color: var(--dvd-gray-600);
line-height: var(--dvd-leading-relaxed);
}
/* Badges */
.dvd-badge {
display: inline-flex;
align-items: center;
padding: var(--dvd-space-1) var(--dvd-space-3);
font-size: var(--dvd-text-xs);
font-weight: 600;
border-radius: var(--dvd-radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dvd-badge-primary {
background: var(--dvd-primary-100);
color: var(--dvd-primary-700);
}
.dvd-badge-success {
background: var(--dvd-success);
color: var(--dvd-white);
}
.dvd-badge-danger {
background: var(--dvd-danger);
color: var(--dvd-white);
}
/* Forms */
.dvd-form-group {
margin-bottom: var(--dvd-space-4);
}
.dvd-label {
display: block;
font-size: var(--dvd-text-sm);
font-weight: 500;
color: var(--dvd-gray-700);
margin-bottom: var(--dvd-space-2);
}
.dvd-input,
.dvd-textarea,
.dvd-select {
width: 100%;
padding: var(--dvd-space-3) var(--dvd-space-4);
font-size: var(--dvd-text-base);
color: var(--dvd-gray-900);
background: var(--dvd-white);
border: 1px solid var(--dvd-gray-300);
border-radius: var(--dvd-radius);
transition: all var(--dvd-transition-fast);
}
.dvd-input:focus,
.dvd-textarea:focus,
.dvd-select:focus {
outline: none;
border-color: var(--dvd-primary);
box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
}
.dvd-input::placeholder,
.dvd-textarea::placeholder {
color: var(--dvd-gray-400);
}
/* Navigation */
.dvd-nav {
background: var(--dvd-white);
box-shadow: var(--dvd-shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.dvd-nav-container {
max-width: var(--dvd-container-xl);
margin: 0 auto;
padding: 0 var(--dvd-space-6);
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dvd-nav-brand {
display: flex;
align-items: center;
gap: var(--dvd-space-3);
font-size: var(--dvd-text-xl);
font-weight: 700;
color: var(--dvd-gray-900);
text-decoration: none;
}
.dvd-nav-brand:hover {
color: var(--dvd-primary);
text-decoration: none;
}
.dvd-nav-menu {
display: flex;
align-items: center;
gap: var(--dvd-space-8);
list-style: none;
margin: 0;
padding: 0;
}
.dvd-nav-link {
color: var(--dvd-gray-700);
text-decoration: none;
font-weight: 500;
transition: color var(--dvd-transition-fast);
}
.dvd-nav-link:hover {
color: var(--dvd-primary);
text-decoration: none;
}
.dvd-nav-link.active {
color: var(--dvd-primary);
}
/* Footer */
.dvd-footer {
background: var(--dvd-gray-900);
color: var(--dvd-gray-400);
padding: var(--dvd-space-16) 0 var(--dvd-space-8);
}
.dvd-footer-container {
max-width: var(--dvd-container-xl);
margin: 0 auto;
padding: 0 var(--dvd-space-6);
}
.dvd-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--dvd-space-8);
margin-bottom: var(--dvd-space-8);
}
.dvd-footer-brand {
font-size: var(--dvd-text-2xl);
font-weight: 700;
color: var(--dvd-white);
margin-bottom: var(--dvd-space-4);
}
.dvd-footer-description {
line-height: var(--dvd-leading-relaxed);
margin-bottom: var(--dvd-space-6);
}
.dvd-footer-heading {
font-size: var(--dvd-text-sm);
font-weight: 600;
color: var(--dvd-white);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--dvd-space-4);
}
.dvd-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.dvd-footer-links li {
margin-bottom: var(--dvd-space-3);
}
.dvd-footer-links a {
color: var(--dvd-gray-400);
text-decoration: none;
transition: color var(--dvd-transition-fast);
}
.dvd-footer-links a:hover {
color: var(--dvd-white);
}
.dvd-footer-bottom {
padding-top: var(--dvd-space-8);
border-top: 1px solid var(--dvd-gray-800);
display: flex;
justify-content: space-between;
align-items: center;
}
.dvd-social-links {
display: flex;
gap: var(--dvd-space-4);
}
.dvd-social-link {
width: 40px;
height: 40px;
border-radius: var(--dvd-radius-full);
background: var(--dvd-gray-800);
display: flex;
align-items: center;
justify-content: center;
color: var(--dvd-gray-400);
text-decoration: none;
transition: all var(--dvd-transition-fast);
}
.dvd-social-link:hover {
background: var(--dvd-primary);
color: var(--dvd-white);
transform: translateY(-2px);
}
/* Hero Section */
.dvd-hero {
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--dvd-gray-50) 0%, var(--dvd-white) 50%, var(--dvd-gray-50) 100%);
}
.dvd-hero::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, var(--dvd-primary-light) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, var(--dvd-secondary) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, var(--dvd-accent) 0%, transparent 50%);
opacity: 0.05;
animation: dvd-float 20s ease-in-out infinite;
}
@keyframes dvd-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
/* Section Headers */
.dvd-section-header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--dvd-space-12);
}
.dvd-section-title {
font-size: var(--dvd-text-4xl);
font-weight: 700;
color: var(--dvd-gray-900);
margin-bottom: var(--dvd-space-4);
}
.dvd-section-subtitle {
font-size: var(--dvd-text-lg);
color: var(--dvd-gray-600);
line-height: var(--dvd-leading-relaxed);
}
/* Product Cards */
.dvd-product-card {
background: var(--dvd-white);
border-radius: var(--dvd-radius-lg);
overflow: hidden;
transition: all var(--dvd-transition);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.dvd-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--dvd-shadow-xl);
}
.dvd-product-image {
width: 100%;
height: 200px;
object-fit: cover;
background: var(--dvd-gray-100);
}
.dvd-product-badge {
position: absolute;
top: var(--dvd-space-3);
left: var(--dvd-space-3);
background: var(--dvd-secondary);
color: var(--dvd-white);
padding: var(--dvd-space-1) var(--dvd-space-3);
border-radius: var(--dvd-radius-full);
font-size: var(--dvd-text-xs);
font-weight: 600;
z-index: 1;
}
.dvd-product-body {
padding: var(--dvd-space-6);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.dvd-product-title {
font-size: var(--dvd-text-lg);
font-weight: 600;
color: var(--dvd-gray-900);
margin-bottom: var(--dvd-space-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.dvd-product-description {
font-size: var(--dvd-text-sm);
color: var(--dvd-gray-600);
margin-bottom: var(--dvd-space-4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.dvd-product-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--dvd-space-4);
border-top: 1px solid var(--dvd-gray-100);
}
.dvd-product-price {
font-size: var(--dvd-text-2xl);
font-weight: 700;
color: var(--dvd-primary);
}
.dvd-product-price small {
font-size: var(--dvd-text-sm);
color: var(--dvd-gray-500);
font-weight: 400;
}
/* Category Cards */
.dvd-category-card {
background: var(--dvd-white);
border-radius: var(--dvd-radius-lg);
padding: var(--dvd-space-8) var(--dvd-space-4);
text-align: center;
cursor: pointer;
transition: all var(--dvd-transition);
border: 2px solid transparent;
}
.dvd-category-card:hover {
transform: translateY(-4px);
box-shadow: var(--dvd-shadow-lg);
border-color: var(--dvd-primary-light);
}
.dvd-category-icon {
width: 56px;
height: 56px;
margin: 0 auto var(--dvd-space-4);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--dvd-primary-light) 0%, var(--dvd-primary) 100%);
border-radius: var(--dvd-radius-full);
color: var(--dvd-white);
font-size: var(--dvd-text-2xl);
}
.dvd-category-name {
font-weight: 600;
color: var(--dvd-gray-900);
font-size: var(--dvd-text-base);
margin-bottom: var(--dvd-space-1);
}
.dvd-category-count {
font-size: var(--dvd-text-sm);
color: var(--dvd-gray-500);
}
/* Feature Cards */
.dvd-feature {
text-align: center;
}
.dvd-feature-icon {
width: 72px;
height: 72px;
margin: 0 auto var(--dvd-space-6);
background: linear-gradient(135deg, var(--dvd-primary-light) 0%, var(--dvd-primary) 100%);
border-radius: var(--dvd-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--dvd-white);
font-size: var(--dvd-text-3xl);
}
.dvd-feature-title {
font-size: var(--dvd-text-xl);
font-weight: 700;
color: var(--dvd-gray-900);
margin-bottom: var(--dvd-space-3);
}
.dvd-feature-description {
color: var(--dvd-gray-600);
line-height: var(--dvd-leading-relaxed);
}
/* Responsive */
@media (max-width: 1024px) {
.dvd-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.dvd-container {
padding: 0 var(--dvd-space-4);
}
.dvd-section {
padding: var(--dvd-space-12) 0;
}
.dvd-section-title {
font-size: var(--dvd-text-3xl);
}
.dvd-grid-2,
.dvd-grid-3,
.dvd-grid-4 {
grid-template-columns: 1fr;
}
.dvd-footer-grid {
grid-template-columns: 1fr;
gap: var(--dvd-space-6);
}
.dvd-footer-bottom {
flex-direction: column;
gap: var(--dvd-space-4);
text-align: center;
}
.dvd-nav-menu {
display: none;
}
}
/* ================================================
5. АНИМАЦИИ
================================================ */
.dvd-fade-in {
animation: dvdFadeIn var(--dvd-transition-slow) ease-out;
}
@keyframes dvdFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dvd-slide-up {
animation: dvdSlideUp var(--dvd-transition) ease-out;
}
@keyframes dvdSlideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* ================================================
6. ГАЙДЛАЙНЫ И ДОКУМЕНТАЦИЯ
================================================ */
/*
ГАЙДЛАЙНЫ ПО ИСПОЛЬЗОВАНИЮ ДИЗАЙН-СИСТЕМЫ "ДОБРО В ДЕЛО"
1. ЦВЕТА:
- Primary: Фиолетовый (#5B21B6) - основной бренд-цвет
- Secondary: Зеленый (#10B981) - успех, подтверждение
- Accent: Оранжевый (#F59E0B) - акценты, CTA
- Danger: Красный (#EF4444) - ошибки, удаление
- Grays: Оттенки серого для текста и фонов
2. ТИПОГРАФИКА:
- Заголовки: dvd-text-4xl, dvd-text-3xl, dvd-text-2xl
- Подзаголовки: dvd-text-xl, dvd-text-lg
- Основной текст: dvd-text-base
- Мелкий текст: dvd-text-sm, dvd-text-xs
- Вес шрифта: dvd-font-bold, dvd-font-semibold, dvd-font-medium
3. ОТСТУПЫ:
- Секции: dvd-section (padding: 5rem 0)
- Контейнеры: dvd-container (max-width + padding)
- Элементы: dvd-p-*, dvd-m-* (1-8 уровней)
- Группы: dvd-gap-* для flexbox/grid
4. КОМПОНЕНТЫ:
- Кнопки: dvd-btn + модификаторы (primary, secondary, lg, sm)
- Карточки: dvd-card с dvd-card-body
- Формы: dvd-form-group, dvd-input, dvd-label
- Навигация: dvd-nav с dvd-nav-container
- Футер: dvd-footer с сеткой и социальными ссылками
5. СЕТКА:
- Flexbox: dvd-flex, dvd-flex-center, dvd-flex-between
- Grid: dvd-grid-2, dvd-grid-3, dvd-grid-4, dvd-grid-auto
- Адаптивность: мобильный first, breakpoints на 768px и 1024px
6. ТЕНИ И РАДИУСЫ:
- Тени: от dvd-shadow-sm до dvd-shadow-2xl
- Радиусы: от dvd-rounded до dvd-rounded-full
- Hover эффекты: поднятие и усиление тени
7. АНИМАЦИИ:
- Переходы: dvd-transition-fast (150ms), dvd-transition (300ms)
- Появление: dvd-fade-in, dvd-slide-up
- Hover: translateY для поднятия элементов
ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ:
Заголовок
Описание
*/
/* ================================================
ALERTS & NOTIFICATIONS
================================================ */
.dvd-alert {
display: flex;
align-items: center;
gap: var(--dvd-space-3);
padding: var(--dvd-space-4);
border-radius: var(--dvd-radius);
margin-bottom: var(--dvd-space-4);
position: relative;
border-left: 4px solid;
font-size: var(--dvd-text-sm);
line-height: 1.5;
}
.dvd-alert-success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
border-color: var(--dvd-success);
color: var(--dvd-gray-800);
}
.dvd-alert-info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
border-color: var(--dvd-info);
color: var(--dvd-gray-800);
}
.dvd-alert-warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
border-color: var(--dvd-warning);
color: var(--dvd-gray-800);
}
.dvd-alert-error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
border-color: var(--dvd-danger);
color: var(--dvd-gray-800);
}
.dvd-alert i {
flex-shrink: 0;
font-size: 1.25rem;
}
.dvd-alert-success i {
color: var(--dvd-success);
}
.dvd-alert-info i {
color: var(--dvd-info);
}
.dvd-alert-warning i {
color: var(--dvd-warning);
}
.dvd-alert-error i {
color: var(--dvd-danger);
}
.dvd-alert-close {
position: absolute;
top: var(--dvd-space-2);
right: var(--dvd-space-2);
background: none;
border: none;
color: var(--dvd-gray-400);
cursor: pointer;
padding: var(--dvd-space-1);
border-radius: var(--dvd-radius-sm);
transition: all var(--dvd-transition-fast);
}
.dvd-alert-close:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--dvd-gray-600);
}