:root { /* Основной акцентный: Насыщенный Красный (для кнопок, ссылок, акцентов) */ --primary: #CC0000; /* Второстепенный акцентный: Ярко-Красный/Алый (для hover, выделения) */ --secondary: #FF3333; /* Темный текст/элементы: Насыщенный Черный */ --dark: #1A1A1A; /* Светлый фон/элементы: Светло-Серый/Почти Белый */ --light: #F9F9F9; /* Светлый акцент: Нежный Серый */ --light-grey: #E8E8E8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { /* Общий шрифт: Популярный, чистый, современный */ font-family: "Poppins", sans-serif; color: var(--dark); background: var(--light); } /* Navbar */ .navbar { background: #ffffff !important; /* Тень под navbar в черно-красной палитре */ box-shadow: 0 2px 15px rgba(26, 26, 26, 0.15); padding: 1rem 0; } .navbar-brand h2 { /* Шрифт для логотипа: Смелый, сильный (можно использовать Oswald) */ font-family: "Oswald", sans-serif; color: var(--primary); /* Красный акцент на названии */ margin: 0; font-weight: 700; text-transform: uppercase; } /* Пример изменения стилей кнопок и заголовков (для Tailwind CSS это классы, но для общих стилей): */ h1, h2, h3 { font-family: "Oswald", sans-serif; color: var(--dark); text-transform: uppercase; } .btn-hero { background-color: var(--primary); color: var(--light); border: 2px solid var(--primary); transition: all 0.3s ease; } .btn-hero:hover { background-color: var(--secondary); border-color: var(--secondary); } /* Также необходимо обновить ссылки на шрифты в index.html */ .navbar-brand h2 { color: var(--primary); /* Используем темно-серый */ margin: 0; font-weight: 700; } .nav-link { color: var(--dark) !important; font-weight: 500; margin: 0 1rem; transition: color 0.3s; } .nav-link:hover, .nav-link.active { color: var(--secondary) !important; /* Используем серый для ховера */ } /* Hero Section */ .hero-section { position: relative; min-height: 600px; /* Изменен градиент на черно-серый */ background: linear-gradient( 135deg, rgba(26, 26, 26, 0.85) 0%, /* var(--dark) с прозрачностью */ rgba(51, 51, 51, 0.7) 100% /* var(--primary) с прозрачностью */ ), url("../img/bg.jpg") center center/cover no-repeat; display: flex; align-items: center; padding: 100px 0; } /* ... (Далее следует остальная часть вашего CSS) */ .nav-link { color: var(--dark) !important; font-weight: 500; margin: 0 1rem; transition: color 0.3s; } .nav-link:hover, .nav-link.active { color: var(--primary) !important; } /* Hero Section */ .hero-section { position: relative; min-height: 600px; background: linear-gradient( 135deg, rgba(84, 9, 7, 0.85) 0%, rgba(110, 59, 7, 0.7) 100% ), url("../img/bg.jpg") center center/cover no-repeat; display: flex; align-items: center; padding: 100px 0; } .hero-content { position: relative; z-index: 2; } .hero-section h1 { color: #ffffff; font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; } .hero-section p { color: var(--light); font-size: 1.2rem; margin-bottom: 2rem; } .btn-hero { background: var(--primary); color: #ffffff; padding: 15px 40px; border: none; border-radius: 50px; font-weight: 600; transition: all 0.3s; } .btn-hero:hover { background: var(--light-pink); color: var(--dark); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(236, 94, 202, 0.3); } /* Contact Section - Text Heavy */ .contact-section { padding: 80px 0; background: #ffffff; } .contact-intro { max-width: 800px; margin: 0 auto 50px; text-align: center; } .contact-intro h2 { color: var(--dark); font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; } .contact-intro p { color: var(--secondary); font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; } .contact-box { background: var(--light); padding: 40px; border-radius: 15px; border-left: 5px solid var(--primary); margin-bottom: 30px; } .contact-box h4 { color: var(--primary); margin-bottom: 1rem; } .contact-box p { color: var(--dark); line-height: 1.8; } /* Testimonials as Cards */ .testimonials-section { padding: 80px 0; background: linear-gradient(180deg, var(--light) 0%, #ffffff 100%); } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { color: var(--dark); font-size: 2.8rem; font-weight: 700; margin-bottom: 1rem; } .section-title p { color: var(--secondary); font-size: 1.1rem; } .testimonial-card { background: #ffffff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(84, 9, 7, 0.1); margin-bottom: 30px; transition: transform 0.3s; } .testimonial-card:hover { transform: translateY(-10px); } .testimonial-header { display: flex; align-items: center; margin-bottom: 20px; } .testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--light-pink)); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 1.5rem; margin-right: 20px; } .testimonial-info h5 { color: var(--dark); margin-bottom: 5px; font-weight: 600; } .testimonial-info span { color: var(--secondary); font-size: 0.9rem; } .testimonial-text { color: var(--dark); font-style: italic; line-height: 1.8; } /* About Section - Converted to Text */ .about-section { padding: 80px 0; background: #ffffff; } .about-content { max-width: 900px; margin: 0 auto; } .about-content h2 { color: var(--dark); font-size: 2.8rem; font-weight: 700; margin-bottom: 2rem; } .about-text { color: var(--secondary); font-size: 1.1rem; line-height: 1.9; margin-bottom: 1.5rem; } .highlight-box { background: var(--light); padding: 30px; border-radius: 15px; border-left: 5px solid var(--primary); margin: 30px 0; } .highlight-box h4 { color: var(--primary); margin-bottom: 1rem; } .highlight-list { list-style: none; padding: 0; } .highlight-list li { color: var(--dark); padding: 10px 0; padding-left: 30px; position: relative; } .highlight-list li:before { content: "→"; position: absolute; left: 0; color: var(--primary); font-weight: 700; } /* Team Section */ .team-section { padding: 80px 0; background: var(--light); } .team-card { background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(84, 9, 7, 0.1); transition: all 0.3s; margin-bottom: 30px; } .team-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(236, 94, 202, 0.2); } .team-image { width: 100%; height: 300px; background: linear-gradient(135deg, var(--primary), var(--light-pink)); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 3rem; font-weight: 700; } .team-info { padding: 30px; text-align: center; } .team-info h5 { color: var(--dark); font-weight: 700; margin-bottom: 10px; } .team-info small { color: var(--primary); font-size: 0.95rem; } /* Footer */ .footer { background: var(--dark); color: var(--light); padding: 60px 0 30px; } .footer h4 { color: var(--primary); margin-bottom: 20px; } .footer p { line-height: 1.8; } .footer a { color: var(--light); text-decoration: none; display: block; margin-bottom: 10px; transition: color 0.3s; } .footer a:hover { color: var(--primary); } /* Cookie Banner */ .cookie-wrapper { position: fixed; bottom: 20px; right: 20px; max-width: 400px; background: #ffffff; padding: 25px; border-radius: 15px; box-shadow: 0 10px 40px rgba(84, 9, 7, 0.2); z-index: 9999; } .cookie-wrapper.hidden { display: none; } .cookie-wrapper h4 { color: var(--dark); margin-bottom: 15px; } .cookie-wrapper p { color: var(--secondary); margin-bottom: 20px; } .cookie-button { background: var(--primary); color: #ffffff; border: none; padding: 10px 25px; border-radius: 25px; margin-right: 10px; cursor: pointer; transition: all 0.3s; } .cookie-button:hover { background: var(--light-pink); color: var(--dark); } #declineBtn { background: transparent; border: 2px solid var(--primary); color: var(--primary); } #declineBtn:hover { background: var(--primary); color: #ffffff; } @media (max-width: 768px) { .hero-section h1 { font-size: 2.5rem; } .cookie-wrapper { right: 10px; left: 10px; max-width: calc(100% - 20px); } }