/*
Theme Name: wpbox
Theme URI: http://underscores.me/
Author: evgeniy shershnev
Author URI: https://lentafree.ru/
Description: Тема для разработки сайтов любой сложности
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wpbox
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
:root {
--primary: #2c3e50;
--primary-1: #2563eb;
--primary-dark: #1d4ed8;
--blue: #3498db;
--secondary: #3498db;
--accent: #e74c3c;
--light: #ecf0f1;
--dark: #2c3e50;
--dark-light: #34495e;
--category-gradient: linear-gradient(135deg, #2c3e50, #1d4ed8);
--success: #2ecc71;
--gray: #64748b;
--green: #2ecc71;
--green-dark: #27ae60;
--bg-light: #f8f9fa;
--border: #f0f0f0;
--radius:12px;
--radius-sm: 8px;
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
--shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
padding: 0px;
margin: 0px;
border: none;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Links */
a, a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Common */
.section-gray {
background: var(--bg-light);
}
aside, nav, footer, header, section, main {
display: block;
}
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
}
ul, ul li {
list-style: none;
}
img {
vertical-align: top;
}
img, svg {
max-width: 100%;
height: auto;
}
address {
font-style: normal;
}
/* Form */
input, textarea, button, select {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
}
input::-ms-clear {
display: none;
}
button, input[type="submit"] {
display: inline-block;
box-shadow: none;
background-color: transparent;
background: none;
cursor: pointer;
}
input:focus, input:active,
button:focus, button:active {
outline: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
label {
cursor: pointer;
}
legend {
display: block;
}
body {
line-height: 1.6;
color: #333;
overflow-x: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Шапка */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(44, 62, 80, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.no-fixed{
position: static !important;
margin-top: -24px !important;
}
.seo-text p{
font-size: 0px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.demo-wrapper {
position: relative;
overflow: hidden;
height: 100vh;
}
.demo-wrapper iframe {
width: 100%;
height: calc(100vh + 120px); /* увеличиваем */
border: none;
transform: translateY(-120px); /* сдвигаем вверх */
}
.demo-body #demoSite .hero-full{
height: 100vh;
min-height: unset;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.logo-icon {
background-color: var(--secondary);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
.logo-text {
color: white;
font-size: 1.5rem;
font-weight: 700;
}
.logo-text span {
color: var(--secondary);
}
/* Навигация */
.nav-menu {
display: flex;
align-items: center;
gap: 30px;
}
.nav-links {
display: flex;
list-style: none;
gap: 25px;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
position: relative;
}
a{
color: inherit;
}
a:hover {
color: var(--secondary);
}
.nav-links a::after,
.nav-links li.active a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: var(--secondary);
bottom: -5px;
left: 0;
transition: var(--transition);
}
.nav-links a:hover::after,
.nav-links li.active a::after {
width: 100%;
}
.nav-links li.active a{
color: var(--secondary);
}
.back-link {
display: inline-block;
margin-top: 15px;
color: var(--secondary);
font-weight: 500;
}
.back-link i {
margin-right: 5px;
transition: transform 0.2s;
}
.back-link:hover i {
transform: translateX(-3px);
}
/* Кнопки */
.btn {
display: inline-block;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: var(--transition);
cursor: pointer;
border: none;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
.btn:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
100% {
transform: scale(40, 40);
opacity: 0;
}
}
.btn-primary {
background-color: var(--secondary);
color: white;
}
.btn-by-header{
background-color: var(--accent);
color: white;
padding: 10px 15px;
border-radius: 15px;
margin: 15px 0;
}
.btn-by-header:hover{
color:#fff;
box-shadow: var(--shadow);
}
.btn-primary:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: var(--shadow);
color:#fff;
}
.back-to-archive{
background-color: var(--secondary);
color: white;
padding: 10px 15px;
border-radius: 15px;
margin: 15px 0;
}
.btn-secondary {
background-color: transparent;
color: var(--secondary);
border: 2px solid var(--secondary);
}
.btn-secondary:hover {
background-color: rgba(52, 152, 219, 0.1);
transform: translateY(-3px);
}
.btn-accent {
background-color: #f59e0b;
color: white;
}
.btn-large {
padding: 18px 40px;
font-size: 18px;
border-radius: var(--radius);
}
.old-price{
font-weight: 500;
text-align: center;
color: var(--accent);
}
.btn-telegram {
background-color: #0088cc;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
padding: 12px 25px;
max-width: fit-content;
}
.btn-telegram:hover {
background-color: #0077b5;
transform: translateY(-3px);
box-shadow: var(--shadow);
color:#fff;
}
.btn-submit {
width: 100%;
padding: 14px;
border-radius: var(--radius-sm);
border: none;
background: linear-gradient(135deg, var(--green), var(--green-dark));
color: #fff;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-telegram-header {
background-color: #0088cc;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
padding: 10px 20px;
}
.btn-telegram-header:hover {
background-color: #0077b5;
transform: translateY(-3px);
box-shadow: var(--shadow);
color:#fff;
}
.btn-outline {
background-color: transparent;
color: #2563eb;
border: 2px solid #2563eb;
border-radius: 12px;
}
.btn-outline:hover {
background-color: #2563eb;
color: white;
}
/* Бургер-меню */
.burger-menu {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
background: none;
border: none;
overflow: hidden;
}
.burger-menu span {
width: 25px;
height: 3px;
background-color: white;
transition: var(--transition);
}
.breadcrumbs {
padding: 77px 0 25px;
background-color: var(--light);
}
.breadcrumbs-list {
display: flex;
list-style: none;
gap: 12px;
font-size: 0.95rem;
flex-wrap: wrap;
}
.breadcrumbs__list{
margin-top: 40px;
}
.breadcrumbs-item {
display: flex;
align-items: center;
gap: 12px;
}
.breadcrumbs-item:not(:last-child)::after {
content: '›';
color: var(--gray);
}
.breadcrumbs-link {
color: #2563eb;
text-decoration: none;
transition: var(--transition);
}
.breadcrumbs-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.breadcrumbs-current {
color: var(--gray);
font-weight: 500;
}
#demoSite{
width:100%;
border:none;
margin-top: 0px;
}
/* Секции */
section {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--primary);
position: relative;
}
.section-title span {
color: #2563eb;
}
.section-title::after {
content: '';
position: absolute;
width: 80px;
height: 4px;
background-color: var(--secondary);
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: #666;
max-width: 700px;
margin: 0 auto 50px;
}
/* Герой */
.hero {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
}
.hero__category {
padding: 50px 0 40px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
background-attachment: fixed !important;
}
.hero__category .hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--category-gradient);
color: #fff;
padding: 6px 18px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-content {
max-width: 800px;
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero-content h1 .highlight,
.portfolio-hero-content h1 .highlight{
color: var(--primary-dark);
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: 40px;
opacity: 0.9;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.hero-stat {
text-align: center;
}
.hero-stat-num {
font-size: 2rem;
font-weight: 800;
color: var(--primary-dark);
}
.trust-bar {
background: var(--bg-light);
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.trust-bar-inner .trust-item {
display: flex;
align-items: center;
padding: 0;
border-radius: 0;
gap: 10px;
font-weight: 600;
color: var(--dark);
background-color: unset;
transition: none;
}
.trust-bar-inner .trust-item:hover{
transform: none;
box-shadow: none;
}
.trust-bar .trust-item i {
font-size: 1.3rem;
color: var(--green);
}
.trust-item span {
font-size: 0.9rem;
}
.trust-badges {
display: flex;
gap: 30px;
margin-top: 60px;
flex-wrap: wrap;
}
.badge {
background-color: rgba(255, 255, 255, 0.1);
padding: 15px 25px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
backdrop-filter: blur(5px);
}
.badge i {
color: var(--secondary);
font-size: 24px;
}
/* Обо мне */
.about {
background-color: #f8f9fa;
}
.about-content {
display: flex;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.about-img {
flex: 1;
min-width: 300px;
text-align: center;
height: 450px;
overflow: hidden;
border-radius: 25px;
}
.about-img img {
width: 100%;
max-width: 400px;
border-radius: 10px;
box-shadow: var(--shadow);
}
.about-text {
flex: 2;
min-width: 300px;
}
.about-text h2 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--primary);
}
.approach-list {
list-style: none;
}
.approach-list li {
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 15px;
}
.approach-list i {
color: var(--secondary);
background-color: rgba(52, 152, 219, 0.1);
padding: 10px;
border-radius: 50%;
margin-top: 5px;
}
/* Услуги */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card {
background-color: white;
border-radius: 10px;
padding: 30px;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.service-icon {
font-size: 40px;
color: var(--secondary);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
color: var(--primary);
}
/* Портфолио */
.portfolio {
background-color: #f8f9fa;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.portfolio-item {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.portfolio-img {
height: 200px;
overflow: hidden;
}
.portfolio-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.portfolio-item:hover .portfolio-img img {
transform: scale(1.05);
}
.portfolio-info {
padding: 20px;
}
.portfolio-info h3 {
margin-bottom: 10px;
color: var(--primary);
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.tag {
background-color: rgba(52, 152, 219, 0.1);
color: var(--secondary);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.portfolio-center {
text-align: center;
margin-top: 50px;
}
/* Отзывы */
.testimonials-container {
max-width: 800px;
margin: 50px auto 0;
position: relative;
}
.testimonial {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
display: none;
}
.testimonial.active {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.client-info {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.client-img {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--secondary);
}
.client-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.testimonial-control {
background-color: var(--secondary);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.testimonial-control:hover {
background-color: #2980b9;
}
/* Как я работаю */
.process {
background-color: #f8f9fa;
}
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
}
.step {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
position: relative;
}
.step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: var(--secondary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.step-icon {
font-size: 40px;
color: var(--secondary);
margin: 20px 0;
}
/* Гарантии */
.guarantees {
text-align: center;
}
.guarantee-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.guarantee-card {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.guarantee-card:hover {
transform: translateY(-5px);
}
.guarantee-icon {
font-size: 40px;
color: var(--success);
margin-bottom: 20px;
}
/* CTA */
.cta h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Футер */
footer {
background-color: var(--primary);
color: white;
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-column h3 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #ddd;
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--secondary);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-link {
background-color: rgba(255, 255, 255, 0.1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: var(--transition);
}
.social-link:hover {
background-color: var(--secondary);
transform: translateY(-5px);
}
.social-link:hover i{
color:#fff;
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
color: #aaa;
}
/* Адаптивность */
@media (max-width: 992px) {
.nav-links {
gap: 15px;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.burger-menu {
display: flex;
}
.nav-menu {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: rgba(44, 62, 80, 0.98);
flex-direction: column;
align-items: center;
padding: 20px 0;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-links {
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-content h1 {
font-size: 2.2rem;
}
.hero-content p {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.btn {
width: 100%;
text-align: center;
}
.about-content {
flex-direction: column;
}
.trust-badges {
flex-direction: column;
}
.cta h2 {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
}
/* Анимация бургер-меню */
.burger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
}
.burger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
}
.portfolio-hero {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
min-height: 90vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
text-align: center;
}
.portfolio-hero-content {
max-width: 900px;
margin: 0 auto;
}
.portfolio-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.portfolio-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.stats {
display: flex;
justify-content: center;
gap: 50px;
margin-top: 50px;
margin-bottom: 50px;
}
.stat-item {
text-align: center;
white-space: nowrap;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: 10px;
}
.stat-text {
font-size: 1.1rem;
opacity: 0.9;
}
/* Фильтр */
.portfolio-filter {
background-color: #f8f9fa;
padding: 40px 0;
}
.filter-container {
max-width: 900px;
margin: 0 auto;
}
.filter-title {
text-align: center;
margin-bottom: 30px;
font-size: 1.5rem;
color: var(--primary);
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 25px;
background-color: white;
border: 2px solid #ddd;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.filter-btn.active {
background-color: var(--secondary);
color: white;
border-color: var(--secondary);
}
.filter-icon {
font-size: 18px;
}
/* Карточки проектов */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.portfolio-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
opacity: 1;
transform: translateY(0);
}
.portfolio-card.hidden {
display: none;
}
.portfolio-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.portfolio-img {
height: 250px;
overflow: hidden;
position: relative;
}
.portfolio-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.portfolio-card:hover .portfolio-img img {
transform: scale(1.05);
}
.portfolio-cms {
position: absolute;
top: 15px;
right: 15px;
background-color: rgba(44, 62, 80, 0.9);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.portfolio-info {
padding: 25px;
}
.portfolio-info h3 {
margin-bottom: 15px;
color: var(--primary);
font-size: 1.5rem;
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
}
.portfolio-tag {
background-color: rgba(52, 152, 219, 0.1);
color: var(--secondary);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.case-section {
margin-bottom: 20px;
}
.case-section h4 {
color: var(--primary);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.case-section h4 i {
color: var(--secondary);
}
/* Детальная страница проекта */
.project-detail {
padding-top: 120px;
}
.project-hero {
text-align: center;
margin-bottom: 60px;
}
.project-hero h1 {
font-size: 2.8rem;
margin-bottom: 20px;
color: var(--primary);
}
.project-meta {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.meta-item {
display: flex;
align-items: center;
gap: 10px;
color: #666;
}
.meta-item i {
color: var(--secondary);
}
.project-screenshots {
display: grid;
grid-template-columns: repeat(auto-fill);
gap: 30px;
margin: 50px 0;
}
.screenshot {
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.screenshot img {
width: 100%;
height: auto;
display: block;
}
.recent-portfolio-projects{
padding: 0;
}
.case-detail {
background-color: #f8f9fa;
border-radius: 10px;
padding: 40px;
margin: 50px 0;
}
.case-block {
margin-bottom: 40px;
}
.case-block:last-child {
margin-bottom: 0;
}
.case-block h3 {
color: var(--primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--secondary);
display: flex;
align-items: center;
gap: 10px;
}
.case-block h3 i {
color: var(--secondary);
}
.case-block ul {
list-style-type: none;
padding-left: 20px;
}
.case-block li {
margin-bottom: 10px;
position: relative;
padding-left: 25px;
}
.case-block li:before {
content: '✓';
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 30px;
margin-top: 30px;
}
.result-item {
background-color: white;
padding: 25px;
border-radius: 10px;
text-align: center;
box-shadow: var(--shadow);
}
.result-icon {
font-size: 40px;
color: var(--success);
margin-bottom: 15px;
}
.result-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
line-height: normal;
}
/* CTA */
.cta {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.about-hero {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
}
.about-hero-content {
max-width: 900px;
}
.about-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.about-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
}
/* Основной контент "Обо мне" */
.about-main {
background-color: #f8f9fa;
}
.about-profile {
display: flex;
align-items: center;
gap: 60px;
flex-wrap: wrap;
margin-bottom: 80px;
}
.profile-photo {
flex: 1;
min-width: 300px;
text-align: center;
}
.photo-frame {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
border: 5px solid white;
box-shadow: var(--shadow);
margin: 0 auto;
position: relative;
}
.photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.experience-badge {
position: absolute;
bottom: 20px;
right: 20px;
background-color: var(--secondary);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.experience-years {
font-size: 1.5rem;
line-height: 1;
}
.experience-text {
font-size: 0.7rem;
}
.profile-info {
flex: 2;
min-width: 300px;
}
.profile-name {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
}
.profile-title {
font-size: 1.5rem;
color: var(--secondary);
margin-bottom: 25px;
font-weight: 600;
}
.profile-description {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 30px;
}
.profile-stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
}
.profile-stat {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: 5px;
}
.text__stat {
font-size: 0.9rem;
color: #ffffff;
opacity: 1;
}
/* Навыки и сертификаты */
.skills-certificates {
margin-bottom: 80px;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.skill-card {
background-color: white;
border-radius: 10px;
padding: 40px 30px;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.skill-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.skill-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: var(--secondary);
}
.skill-icon {
font-size: 50px;
color: var(--secondary);
margin-bottom: 20px;
}
.skill-card h3 {
margin-bottom: 20px;
color: var(--primary);
font-size: 1.8rem;
}
.skill-features {
list-style: none;
margin-top: 20px;
}
.skill-features li {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.skill-features i {
color: var(--success);
}
.certificate-badge {
position: absolute;
top: 20px;
right: 20px;
background-color: var(--accent);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* Преимущества работы с фрилансером */
.freelance-advantages {
background-color: #f8f9fa;
}
.advantages-comparison {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 50px;
}
.comparison-column {
flex: 1;
min-width: 300px;
background-color: white;
border-radius: 10px;
padding: 40px 30px;
box-shadow: var(--shadow);
position: relative;
}
.comparison-column.freelance {
border-top: 5px solid var(--secondary);
}
.comparison-column.agency {
border-top: 5px solid #ddd;
}
.comparison-title {
font-size: 1.8rem;
margin-bottom: 30px;
text-align: center;
color: var(--primary);
}
.comparison-list {
list-style: none;
}
.comparison-list li {
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 15px;
}
.comparison-list.freelance i {
color: var(--success);
background-color: rgba(46, 204, 113, 0.1);
padding: 10px;
border-radius: 50%;
font-size: 18px;
}
.comparison-list.agency i {
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.1);
padding: 10px;
border-radius: 50%;
font-size: 18px;
}
.comparison-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background-color: var(--secondary);
color: white;
padding: 8px 25px;
border-radius: 20px;
font-weight: 600;
font-size: 1.1rem;
}
.comparison-badge.agency {
background-color: #7f8c8d;
}
/* Мои принципы работы */
.principles {
margin-bottom: 80px;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.principle-card {
background-color: white;
border-radius: 10px;
padding: 40px 30px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.principle-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.principle-icon {
font-size: 50px;
color: var(--secondary);
margin-bottom: 20px;
}
.principle-card h3 {
margin-bottom: 15px;
color: var(--primary);
}
.contacts-hero {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
text-align: center;
}
.contacts-hero-content {
max-width: 900px;
margin: 0 auto;
}
.contacts-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.contacts-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.response-time {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 50px;
}
.time-item {
text-align: center;
}
.time-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 15px;
}
.time-text {
font-size: 1.1rem;
opacity: 0.9;
}
/* Основной контент контактов */
.contacts-main {
background-color: #f8f9fa;
}
.contacts-content {
display: flex;
gap: 60px;
flex-wrap: wrap;
}
.contacts-form {
flex: 1;
min-width: 300px;
}
.form-container {
background-color: white;
border-radius: 10px;
padding: 50px;
box-shadow: var(--shadow);
height: 100%;
}
.form-title {
font-size: 1.8rem;
color: var(--primary);
margin-bottom: 30px;
text-align: center;
}
.form-group {
margin-bottom: 25px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--primary);
}
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 15px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
font-family: inherit;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
outline: none;
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.form-textarea {
min-height: 150px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-note {
font-size: 0.9rem;
color: #666;
margin-top: 10px;
font-style: italic;
}
.form-success {
display: none;
background-color: rgba(46, 204, 113, 0.1);
border: 1px solid var(--success);
color: var(--success);
padding: 20px;
border-radius: 8px;
text-align: center;
margin-top: 30px;
}
.form-success.show {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.contacts-info {
flex: 1;
min-width: 300px;
}
.contact-methods {
margin-bottom: 50px;
}
.contact-method {
background-color: white;
border-radius: 10px;
padding: 30px;
margin-bottom: 25px;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
align-items: center;
gap: 20px;
}
.contact-method:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.method-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
flex-shrink: 0;
}
.telegram-icon {
background-color: #0088cc;
}
.whatsapp-icon {
background-color: #25D366;
}
.email-icon {
background-color: #EA4335;
}
.phone-icon {
background-color: var(--secondary);
}
.method-info h3 {
color: var(--primary);
margin-bottom: 5px;
font-size: 1.3rem;
}
.method-info p {
color: #666;
margin-bottom: 10px;
}
.method-link {
color: var(--secondary);
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.method-link:hover {
color: #2980b9;
}
.working-hours {
background-color: white;
border-radius: 10px;
padding: 30px;
box-shadow: var(--shadow);
}
.hours-title {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.hours-title i {
color: var(--secondary);
}
.hours-list {
list-style: none;
}
.hours-list li {
padding: 10px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.hours-list li:last-child {
border-bottom: none;
}
.day {
font-weight: 600;
color: var(--primary);
}
.time {
color: #666;
}
/* Карта */
.map-section {
padding: 0;
height: 400px;
position: relative;
}
.map-container {
height: 100%;
width: 100%;
background-color: #f5f5f5;
position: relative;
overflow: hidden;
}
.map-placeholder {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: var(--primary);
text-align: center;
padding: 20px;
}
.map-placeholder i {
font-size: 4rem;
margin-bottom: 20px;
color: var(--secondary);
opacity: 0.7;
}
.map-placeholder h3 {
margin-bottom: 10px;
font-size: 1.8rem;
}
.map-placeholder p {
max-width: 500px;
color: #666;
}
/* Часто задаваемые вопросы */
.faq-section {
background-color: #f8f9fa;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background-color: white;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.faq-item.active {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: var(--primary);
font-size: 1.1rem;
}
.faq-question:hover {
background-color: rgba(52, 152, 219, 0.05);
}
.faq-icon {
color: var(--secondary);
transition: var(--transition);
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: var(--transition);
}
.faq-item.active .faq-answer {
padding: 0 30px 25px;
max-height: 500px;
}
.service-hero {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
text-align: center;
position: relative;
}
.service-hero::after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9));
z-index: 0;
}
.service-hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.pricing-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.service-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Описание услуги */
.service-description {
background-color: #f8f9fa;
}
.description-content {
display: flex;
align-items: center;
gap: 60px;
flex-wrap: wrap;
}
.description-text {
flex: 1;
min-width: 300px;
}
.description-text h2 {
margin-bottom: 25px;
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
}
.tech-item {
background-color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 10px;
transition: var(--transition);
}
.tech-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.tech-icon {
color: var(--secondary);
font-size: 24px;
}
.description-visual {
flex: 1;
min-width: 300px;
text-align: center;
}
.visual-img {
width: 100%;
max-width: 500px;
border-radius: 10px;
box-shadow: var(--shadow);
}
/* Преимущества */
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.advantage-card {
background-color: white;
border-radius: 10px;
padding: 40px 30px;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
position: relative;
overflow: hidden;
}
.advantage-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.advantage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: var(--secondary);
}
.advantage-icon {
font-size: 50px;
color: var(--secondary);
margin-bottom: 20px;
}
.advantage-card h3 {
margin-bottom: 15px;
color: var(--primary);
}
/* Кейсы */
.cases {
background-color: #f8f9fa;
}
.cases-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.case-item {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.case-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.case-stages {
display: flex;
height: 200px;
}
.case-stage {
flex: 1;
position: relative;
overflow: hidden;
}
.case-stage img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.case-stage:hover img {
transform: scale(1.05);
}
.stage-label {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(44, 62, 80, 0.8);
color: white;
padding: 8px;
text-align: center;
font-size: 0.9rem;
}
.case-info {
padding: 25px;
}
.case-info h3 {
margin-bottom: 15px;
color: var(--primary);
}
.case-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
}
.case-tag {
background-color: rgba(52, 152, 219, 0.1);
color: var(--secondary);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.cases-center {
text-align: center;
margin-top: 50px;
}
/* Процесс работы */
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.process-step {
background-color: white;
padding: 40px 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
position: relative;
transition: var(--transition);
}
.process-step:hover {
transform: translateY(-5px);
}
.step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: var(--secondary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.step-icon {
font-size: 50px;
color: var(--secondary);
margin: 20px 0;
}
/* Стоимость */
.pricing {
background-color: #f8f9fa;
text-align: center;
}
.pricing-card {
background-color: white;
border-radius: 10px;
padding: 50px 40px;
box-shadow: var(--shadow);
max-width: 600px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, var(--secondary), var(--success));
}
.price {
font-size: 25px;
font-weight: 700;
color: var(--primary);
margin:0;
}
.price span {
font-size: 15px;
color: #666;
}
.price-features {
list-style: none;
margin: 30px 0;
text-align: left;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.price-features li {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.price-features i {
color: var(--success);
}
.price-note {
font-size: 0.9rem;
color: #777;
margin-top: 20px;
font-style: italic;
}
/* Отзывы */
.testimonials {
position: relative;
}
.testimonials-container {
max-width: 800px;
margin: 50px auto 0;
position: relative;
min-height: 355px;
overflow: hidden;
}
.testimonial {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: all 0.5s ease;
transform: translateX(100%);
}
.testimonial.active {
opacity: 1;
visibility: visible;
position: relative;
transform: translateX(0);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Для слайдера (когда отзывов > 1) */
.testimonials.slider-active .testimonial {
position: absolute;
}
.testimonials.slider-active .testimonial.prev {
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
}
.testimonials.slider-active .testimonial.next {
transform: translateX(100%);
opacity: 0;
visibility: hidden;
}
/* Анимации перехода */
.testimonials.slider-active .testimonial.sliding-out {
opacity: 1;
visibility: visible;
z-index: 20;
}
.testimonials.slider-active .testimonial.sliding-out-left {
animation: slideOutLeft 0.5s ease forwards;
}
.testimonials.slider-active .testimonial.sliding-out-right {
animation: slideOutRight 0.5s ease forwards;
}
.testimonials.slider-active .testimonial.sliding-in {
opacity: 1;
visibility: visible;
z-index: 15;
}
.testimonials.slider-active .testimonial.sliding-in-left {
animation: slideInLeft 0.5s ease forwards;
}
.testimonials.slider-active .testimonial.sliding-in-right {
animation: slideInRight 0.5s ease forwards;
}
/* Анимации */
@keyframes slideOutLeft {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes slideOutRight {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes slideInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.client-info {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-direction: column;
margin-bottom: 20px;
}
.client-img {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--secondary);
}
.client-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
position: absolute;
top: 50%;
max-width: 972px;
width: 100%;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.main__testimonials .testimonial-controls{
bottom: 20px;
}
.testimonial-control {
background-color: var(--secondary);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
position: absolute;
}
.testimonial-control:nth-child(1){
left: 0;
}
.testimonial-control:nth-child(2){
right: 0;
}
.testimonial-control:hover {
background-color: #2980b9;
}
@media (max-width: 768px) {
.service-hero h1 {
font-size: 2.2rem;
}
.service-hero p {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
text-align: center;
}
.cases-grid {
grid-template-columns: 1fr;
}
.case-stages {
flex-direction: column;
height: auto;
}
.case-stage {
height: 150px;
}
}
@media (max-width: 992px) {
.portfolio-hero h1 {
font-size: 2.5rem;
}
.project-hero h1 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.portfolio-hero h1 {
font-size: 2.2rem;
}
.portfolio-hero p {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
text-align: center;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.filter-buttons {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 100%;
max-width: 250px;
justify-content: center;
}
.stats {
gap: 30px;
flex-wrap: wrap;
}
.stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 992px) {
.contacts-hero h1 {
font-size: 2.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
.contacts-content {
flex-direction: column;
}
}
@media (max-width: 768px) {
.contacts-hero h1 {
font-size: 2.2rem;
}
.contacts-hero p {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.form-container {
padding: 30px 20px;
}
.response-time {
gap: 30px;
}
.time-icon {
font-size: 2.5rem;
}
.contact-method {
flex-direction: column;
text-align: center;
gap: 15px;
}
}
@media (max-width: 480px) {
.contact-method {
padding: 20px;
}
.method-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.map-placeholder h3 {
font-size: 1.5rem;
}
.map-placeholder i {
font-size: 3rem;
}
}
@media (max-width: 992px) {
.about-hero h1 {
font-size: 2.5rem;
}
.profile-name {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.about-hero h1 {
font-size: 2.2rem;
}
.about-hero p {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
text-align: center;
}
.about-profile {
flex-direction: column;
text-align: center;
}
.profile-stats {
justify-content: center;
}
.skills-grid {
grid-template-columns: 1fr;
}
.advantages-comparison {
flex-direction: column;
}
.principles-grid {
grid-template-columns: 1fr;
}
}
.blog-hero {
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('/wp-content/uploads/2026/01/blog_bg.png');
background-size: cover;
background-position: center;
color: white;
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
}
.blog-hero-content {
max-width: 900px;
}
.blog-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.blog-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
}
.blog-stats {
display: flex;
gap: 50px;
flex-wrap: wrap;
margin-top: 50px;
}
.blog-stat {
text-align: center;
}
.blog-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: 10px;
}
.blog-text {
font-size: 1.1rem;
opacity: 0.9;
}
.blog-item{
margin: 7.5px 0;
}
.blog-item .btn{
padding: 7px 15px;
}
.blog-excerpt{
margin-bottom: 20px;
max-width: 750px;
width: 100%;
}
/* Поиск и категории */
.blog-tools {
background-color: #f8f9fa;
padding: 40px 0;
}
.tools-container {
max-width: 900px;
margin: 0 auto;
}
.blog-search {
display: flex;
margin-bottom: 30px;
}
.search-input {
flex: 1;
padding: 15px 20px;
border: 2px solid #ddd;
border-radius: 8px 0 0 8px;
font-size: 1rem;
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--secondary);
}
.search-button {
background-color: var(--secondary);
color: white;
border: none;
padding: 0 25px;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: var(--transition);
font-size: 1.1rem;
}
.search-button:hover {
background-color: #2980b9;
}
.categories {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.category-btn {
padding: 10px 20px;
background-color: white;
border: 2px solid #ddd;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.category-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.category-btn.active {
background-color: var(--secondary);
color: white;
border-color: var(--secondary);
}
/* Статьи блога */
.blog-articles {
padding: 60px 0;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.article-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
opacity: 1;
transform: translateY(0);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.article-card.hidden {
display: none;
}
.article-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.article-image {
height: 220px;
overflow: hidden;
position: relative;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.article-card:hover .article-image img {
transform: scale(1.05);
}
.article-category {
position: absolute;
top: 15px;
left: 15px;
background-color: var(--secondary);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.article-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.article-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
font-size: 0.9rem;
color: #666;
}
.meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.meta-item i {
color: var(--secondary);
}
.meta-item a{
display: flex;
align-items: center;
gap: 5px;
}
.meta-item a i {
margin: auto 0;
height: 10px;
transition: transform .3s ease-in-out;
}
.meta-item a:hover i{
transform: translateX(-2px);
}
.article-title {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 15px;
line-height: 1.4;
}
.article-title a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
.article-title a:hover {
color: var(--secondary);
}
.article-excerpt {
margin-bottom: 20px;
flex: 1;
color: #555;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.article-tag {
background-color: rgba(52, 152, 219, 0.1);
color: var(--secondary);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.article-readmore {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.articles-pagination{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.page-numbers{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.page-numbers .current{
color: var(--primary-dark);
}
.read-time {
font-size: 0.9rem;
color: #666;
}
/* Индикатор загрузки */
.loading-overlay,
.search-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
}
.loading-overlay .spinner,
.search-loading i {
font-size: 2.5rem;
color: #0073aa;
margin-bottom: 15px;
}
.search-blog__articels{
position: relative;
}
.loading-overlay p {
color: #666;
font-size: 1.1rem;
}
.articles-grid.loading {
position: relative;
min-height: 300px;
}
/* Сообщения об ошибках и пустых результатах */
.no-results {
text-align: center;
padding: 50px 20px;
grid-column: 1 / -1;
}
.no-results .error-icon {
font-size: 3rem;
color: #dc3545;
margin-bottom: 20px;
}
.no-results h3 {
margin-bottom: 10px;
color: #333;
}
.no-results p {
color: #666;
margin-bottom: 20px;
}
.btn-retry {
padding: 10px 25px;
background: #0073aa;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
transition: background 0.3s;
}
.btn-retry:hover {
background: #005a87;
}
/* Детальная страница статьи */
.article-detail {
padding-top: 120px;
padding-bottom: 80px;
}
.article-header {
text-align: center;
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.article-header h1 {
font-size: 2.8rem;
margin-bottom: 20px;
color: var(--primary);
line-height: 1.3;
}
.article-meta-large {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.article-image-large {
height: 400px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: var(--shadow);
}
.article-image-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-body {
max-width: 800px;
margin: 0 auto 60px;
font-size: 1.1rem;
line-height: 1.8;
}
.article-body h2 {
color: var(--primary);
margin: 40px 0 20px;
font-size: 1.8rem;
}
.article-body h3 {
color: var(--primary);
margin: 30px 0 15px;
font-size: 1.5rem;
}
.article-body p {
margin-bottom: 20px;
}
.article-body ul, .article-body ol {
margin-bottom: 20px;
padding-left: 30px;
}
.article-body li {
margin-bottom: 10px;
}
.article-body blockquote {
border-left: 4px solid var(--secondary);
padding-left: 20px;
margin: 30px 0;
font-style: italic;
color: #555;
font-size: 1.2rem;
}
.article-cta {
background-color: #f8f9fa;
border-radius: 10px;
padding: 40px;
text-align: center;
margin: 60px 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.article-cta h3 {
margin-bottom: 20px;
color: var(--primary);
}
.article-navigation {
display: flex;
justify-content: space-between;
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid #eee;
}
.nav-link.prev {
text-align: left;
}
.nav-link.next {
text-align: right;
flex-direction: row-reverse;
margin-left: auto;
}
.nav-arrow {
font-size: 1.5rem;
color: var(--secondary);
}
/* Боковая панель (для детальной статьи) */
.sidebar {
background-color: #f8f9fa;
border-radius: 10px;
padding: 30px;
margin-top: 40px;
}
.sidebar-title {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--secondary);
}
.sidebar-list {
list-style: none;
display: flex;
gap: 30px;
}
@media(max-width: 992px){
.sidebar-list{
flex-wrap: wrap;
}
.sidebar-item{
max-width: 100% !important;
}
}
.sidebar-list li {
margin-bottom: 15px !important;
padding-bottom: 15px !important;
border-bottom: 1px solid #bdbdbd !important;
max-width: 30%;
width: 100%;
}
.sidebar-list li .btn-primary{
margin-top: 30px;
color: #fff;
text-align: center;
}
.sidebar-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.sidebar-list a {
color: var(--primary);
text-decoration: none;
transition: var(--transition);
display: block;
}
.sidebar-list a:hover {
color: var(--secondary);
padding-left: 5px;
}
.sidebar-list .sidebar-item-thumb{
overflow: hidden;
height: 200px;
}
.sidebar-list .sidebar-item-thumb img{
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 992px) {
.container{
max-width: 100%;
width: 100%;
padding:0 15px;
}
.nav-links {
gap: 15px;
}
.blog-hero h1 {
font-size: 2.5rem;
}
.article-header h1 {
font-size: 2.2rem;
}
.article-image-large {
height: 300px;
}
}
@media (max-width: 768px) {
.burger-menu {
display: flex;
}
.nav-menu {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: rgba(44, 62, 80, 0.98);
flex-direction: column;
align-items: center;
padding: 20px 0;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-links {
flex-direction: column;
align-items: center;
gap: 20px;
}
.blog-hero h1 {
font-size: 2.2rem;
}
.blog-hero p {
font-size: 1.1rem;
}
.articles-grid {
grid-template-columns: 1fr;
}
.categories {
flex-direction: column;
align-items: center;
}
.category-btn {
width: 100%;
max-width: 250px;
justify-content: center;
}
.blog-stats {
gap: 30px;
}
.blog-number {
font-size: 2rem;
}
.article-navigation {
flex-direction: column;
gap: 20px;
}
}
@media (max-width: 480px) {
.project-hero h1 {
font-size: 25px;
}
.article-meta-large {
flex-direction: column;
gap: 15px;
}
.article-image-large {
height: 200px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}
.result-number {
font-size: 15px;
}
.case-detail{
padding: 10px;
}
}
.reviews-hero {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
color: white;
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
text-align: center;
}
.reviews-hero-content {
max-width: 900px;
margin: 0 auto;
}
.reviews-hero h1 {
font-size: 3.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.reviews-hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.trust-stats {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 50px;
}
.trust-stat {
text-align: center;
}
.trust-number {
font-size: 3rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: 10px;
}
.trust-text {
font-size: 1.1rem;
opacity: 0.9;
}
/* Фильтр отзывов */
.reviews-filter {
background-color: #f8f9fa;
padding: 40px 0;
}
.filter-container {
max-width: 900px;
margin: 0 auto;
}
.filter-title {
text-align: center;
margin-bottom: 30px;
font-size: 1.5rem;
color: var(--primary);
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 25px;
background-color: white;
border: 2px solid #ddd;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.filter-btn.active {
background-color: var(--secondary);
color: white;
border-color: var(--secondary);
}
/* Отзывы */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.review-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
opacity: 1;
transform: translateY(0);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.review__project--bottom{
display: flex;
align-items: center;
justify-content: space-between;
}
.review-card.hidden {
display: none;
}
.review-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.review-header {
background-color: #f8f9fa;
padding: 30px 30px 20px;
display: flex;
align-items: center;
gap: 20px;
border-bottom: 1px solid #eee;
}
.client-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--secondary);
flex-shrink: 0;
display: none;
}
.client-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.client-info {
flex: 1;
}
.client-name {
font-size: 1.3rem;
font-weight: 600;
color: var(--primary);
margin-bottom: 5px;
}
.client-position {
color: var(--secondary);
font-size: 0.9rem;
margin-bottom: 10px;
}
.review-rating {
color: #f1c40f;
font-size: 0.9rem;
}
.review-content {
padding: 25px 30px;
position: relative;
}
.review-text {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 20px;
font-style: italic;
}
.review-quote {
position: absolute;
top: 15px;
right: 25px;
font-size: 60px;
color: rgba(52, 152, 219, 0.1);
font-family: Georgia, serif;
line-height: 1;
}
.review-project {
padding: 15px 30px;
background-color: #f8f9fa;
border-top: 1px solid #eee;
}
.project-link {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
color: var(--primary);
transition: var(--transition);
}
.project-link:hover {
color: var(--secondary);
}
.project-info h4 {
margin-bottom: 5px;
font-size: 1rem;
}
.project-info p {
font-size: 0.85rem;
color: #666;
}
.project-arrow {
color: var(--secondary);
font-size: 1.2rem;
}
.review-date {
position: absolute;
bottom: 15px;
right: 30px;
font-size: 0.8rem;
color: #999;
}
/* Форма отзыва */
.review-form-section {
background-color: #f8f9fa;
}
.form-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 50px;
box-shadow: var(--shadow);
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-header h3 {
font-size: 2rem;
color: var(--primary);
margin-bottom: 15px;
}
.form-header p {
color: #666;
font-size: 1.1rem;
}
.form-group {
margin-bottom: 25px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--primary);
}
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 15px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
font-family: inherit;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
outline: none;
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.form-textarea {
min-height: 150px;
resize: vertical;
}
.rating-input {
display: flex;
gap: 10px;
align-items: center;
}
.rating-stars {
display: flex;
gap: 5px;
}
.rating-star {
font-size: 24px;
color: #ddd;
cursor: pointer;
transition: var(--transition);
}
.rating-star:hover,
.rating-star.active {
color: #f1c40f;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-note {
font-size: 0.9rem;
color: #666;
margin-top: 10px;
font-style: italic;
}
.form-success {
display: none;
background-color: rgba(46, 204, 113, 0.1);
border: 1px solid var(--success);
color: var(--success);
padding: 20px;
border-radius: 8px;
text-align: center;
margin-top: 30px;
}
.form-success.show {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 992px) {
.reviews-hero h1 {
font-size: 2.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.reviews-hero h1 {
font-size: 2.2rem;
}
.reviews-hero p {
font-size: 1.1rem;
}
.reviews-grid {
grid-template-columns: 1fr;
}
.filter-buttons {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 100%;
max-width: 250px;
justify-content: center;
}
.trust-stats {
gap: 30px;
}
.trust-number {
font-size: 2.5rem;
}
.review-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.form-container {
padding: 30px 20px;
}
}
.hero-services {
padding: 160px 0 100px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hero-services::after{
content:"";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
width: 100%;
height: 100%;
background-color: #0f172a;
opacity: .8;
}
.hero-services::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
opacity: 0.5;
}
.hero-services .hero-content {
position: relative;
z-index: 1;
max-width: 800px;
}
.hero-services h1 {
font-size: 3.5rem;
margin-bottom: 24px;
color: #fff;
line-height: 1.1;
}
.hero-services p {
font-size: 1.25rem;
color: #fff;
margin-bottom: 40px;
max-width: 600px;
}
.hero-badges {
display: flex;
gap: 30px;
flex-wrap: wrap;
margin-top: 60px;
}
.hero-badge {
display: flex;
align-items: center;
gap: 12px;
}
.badge-icon {
width: 50px;
height: 50px;
background-color: #2563eb;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.hero-services .badge-text {
font-weight: 600;
color: #fff;
}
.services-filter .container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.services-filter .container-narrow {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
/* Фильтр услуг */
.services-filter {
background-color: var(--light);
padding: 50px 0;
top: 80px;
z-index: 100;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.services-filter .filter-buttons {
display: flex;
gap: 12px;
flex-wrap: nowrap;
justify-content: center;
}
.services-filter .filter-btn {
padding: 12px 24px;
background-color: white;
border: 2px solid #e2e8f0;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
white-space: nowrap;
}
.services-filter .filter-btn:hover {
border-color: #2563eb;
color: #2563eb;
transform: translateY(-2px);
}
.services-filter .filter-btn.active {
background-color: #2563eb;
color: white;
border-color: #2563eb;
}
/* Витрина услуг */
.services-showcase .services-grid {
display: grid;
gap: 30px;
margin-top: 50px;
}
.services-showcase .service-card {
background-color: white;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
display: flex;
padding: 0 0 0 0;
flex-direction: column;
height: 100%;
border: 1px solid #e2e8f0;
text-align: left;
}
.services-showcase .service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: #2563eb;
}
.services-showcase .service-card.popular {
border: 2px solid #f59e0b;
}
.services-showcase .service-card.popular::before {
content: 'ПОПУЛЯРНО';
position: absolute;
top: 20px;
right: -35px;
background-color: #f59e0b;
color: white;
padding: 6px 40px;
font-size: 0.8rem;
font-weight: 700;
transform: rotate(45deg);
z-index: 1;
letter-spacing: 1px;
}
.services-showcase .service-header {
background-color:#f8fafc;
padding: 30px 30px 20px;
text-align: center;
border-bottom: 1px solid #e2e8f0;
}
.services-showcase .service-icon {
font-size: 48px;
color: #2563eb;
margin-bottom: 20px;
}
.services-showcase .service-title {
font-size: 1.5rem;
color: var(--dark);
margin-bottom: 10px;
font-weight: 700;
}
.services-showcase .service-card .btn-success {
background-color: #10b981;
color: white;
border-radius: 12px;
}
.services-showcase .service-category {
color: var(--primary);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 15px;
display: inline-block;
padding: 4px 12px;
background-color: rgba(37, 99, 235, 0.1);
border-radius: 20px;
}
.services-showcase .service-content {
padding: 25px 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.services-showcase .service-description {
margin-bottom: 25px;
color:#64748b;
line-height: 1.7;
}
.services-showcase .service-features {
list-style: none;
margin-bottom: 25px;
flex: 1;
}
.services-showcase .service-features li {
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.services-showcase .service-features i {
color: var(--secondary);
margin-top: 4px;
flex-shrink: 0;
}
.services-showcase .service-pricing {
padding: 25px 30px;
border-top: 1px solid #e2e8f0;
background-color: #fafafa;
}
.services-showcase .price-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.services-showcase .price-info h4 {
color: var(--dark);
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 700;
text-align: center;
}
.services-showcase .price {
font-size: 1.8rem;
font-weight: 700;
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
}
.services-showcase .price span {
font-size: 1rem;
color: var(--gray);
font-weight: 400;
}
.services-showcase .service-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.services-showcase .service-tag {
background-color: rgba(37, 99, 235, 0.08);
color: var(--primary);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.service-tag.warning {
background-color: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.service-tag.success {
background-color: rgba(16, 185, 129, 0.1);
color: var(--secondary);
}
/* Особенности работы */
.work-features {
background-color: var(--light);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
background-color: white;
border-radius: var(--radius);
padding: 40px 30px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid #e2e8f0;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: #2563eb;
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin: 0 auto 25px;
}
.feature-card h3 {
margin-bottom: 15px;
color: var(--dark);
font-size: 1.3rem;
}
/* CTA с таймером */
.cta-timer {
background: linear-gradient(135deg, var(--dark) 0%, #0f172a 100%);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-timer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,');
background-size: cover;
}
.timer-container {
position: relative;
z-index: 1;
}
.timer-title {
font-size: 2.5rem;
margin-bottom: 20px;
}
.timer-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.timer-box {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: 30px;
display: inline-block;
margin-bottom: 40px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timer {
display: flex;
justify-content: center;
gap: 25px;
}
.timer-unit {
text-align: center;
}
.timer-value {
font-size: 3rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}
.timer-label {
font-size: 0.9rem;
opacity: 0.8;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.timer-colon {
font-size: 3rem;
color: var(--accent);
line-height: 1;
margin-top: 10px;
}
.offer-note {
background-color: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 8px;
padding: 15px 25px;
margin-top: 30px;
display: inline-flex;
align-items: center;
gap: 10px;
}
/* Кнопка "Наверх" */
.scroll-top {
position: fixed;
bottom: 100px;
right: 30px;
width: 56px;
height: 56px;
background-color: var(--primary-1);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 999;
box-shadow: 0 5px 20px rgba(37, 99, 235, 0.3);
border: none;
}
.scroll-top.visible {
opacity: 1;
visibility: visible;
}
.scroll-top:hover {
background-color: var(--primary-dark);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}
/* Портфолио мини */
.portfolio-mini {
background-color: var(--light);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.portfolio-item {
background-color: white;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.portfolio-image {
height: 200px;
background-color: #e2e8f0;
background-size: cover;
background-position: center;
position: relative;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(37, 99, 235, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-content {
padding: 25px;
}
.portfolio-content h3 {
margin-bottom: 10px;
color: var(--dark);
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}
.portfolio-tag {
background-color: var(--light);
color: var(--gray);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
/* Форма быстрого заказа */
.quick-order {
background-color: white;
border-radius: var(--radius);
padding: 50px;
box-shadow: var(--shadow-lg);
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 25px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark);
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 14px 18px;
border: 2px solid #e2e8f0;
border-radius: var(--radius);
font-size: 16px;
transition: var(--transition);
background-color: white;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
/* Чекбокс и радио */
.checkbox-group, .radio-group {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.checkbox-group input, .radio-group input {
width: 20px;
height: 20px;
}
/* Адаптивность */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
}
@media (max-width: 992px) {
.section-title {
font-size: 2.5rem;
}
.hero h1 {
font-size: 3rem;
}
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.portfolio-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.timer-value {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.burger-menu {
display: flex;
}
.nav-menu {
position: fixed;
top: 68px;
left: 0;
width: 100%;
background-color: white;
flex-direction: column;
align-items: flex-start;
padding: 30px;
transform: translateX(-100%);
transition: var(--transition);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
height: calc(100vh - 80px);
overflow-y: auto;
}
.nav-menu.active {
transform: translateX(0);
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9));
}
.nav-links {
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.nav-links a {
font-size: 1.1rem;
padding: 10px 0;
width: 100%;
}
.hero {
padding: 140px 0 80px;
}
.hero h1 {
font-size: 2.5rem;
}
.hero-badges {
flex-direction: column;
gap: 20px;
}
.section-title {
font-size: 2.2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.filter-buttons {
flex-direction: column;
align-items: stretch;
}
.filter-btn {
justify-content: center;
}
.timer {
gap: 15px;
}
.timer-value {
font-size: 2rem;
}
.timer-colon {
font-size: 2rem;
}
.quick-order {
padding: 30px;
}
.modal-content {
padding: 30px;
}
/* Анимация бургер-меню */
.burger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
}
.burger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
}
@media (max-width: 576px) {
.section-title {
font-size: 1.8rem;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1.1rem;
}
.btn {
padding: 12px 24px;
font-size: 15px;
}
.btn-large {
padding: 16px 30px;
font-size: 16px;
}
.timer {
gap: 10px;
}
.timer-value {
font-size: 1.8rem;
}
.timer-label {
font-size: 0.8rem;
}
.scroll-top {
bottom: 120px;
right: 20px;
width: 50px;
height: 50px;
}
.service-card.popular::before {
font-size: 0.7rem;
padding: 5px 35px;
right: -40px;
}
}
@media (max-width: 400px) {
.services-grid {
grid-template-columns: 1fr;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
}
.site-main{
margin-top: 149px;
padding-bottom: 60px;
}
.entry-header{
position: static;
background-color: #fff;
box-shadow: none;
}
.entry-title{
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
.entry-content h3{
font-size: 2rem;
margin-bottom: 20px;
color: var(--primary);
}
.entry-footer{
background-color: #fff;
color:var(--primary);
}
.search-pagination .page-info,
.search-pagination .prev-page{
margin-right: 10px;
}
/* Блок усиления доверия */
.trust {
background-color: white;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 30px;
margin-top: 50px;
}
.trust-item {
text-align: center;
padding: 30px;
border-radius: var(--radius);
background-color: var(--light);
transition: var(--transition);
}
.trust-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.trust-icon {
width: 80px;
height: 80px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
margin: 0 auto 25px;
}
.trust-item h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary);
}
.trust-item p {
color: var(--gray);
margin-bottom: 20px;
}
.trust-badge {
display: inline-block;
padding: 8px 20px;
background-color: rgba(46, 204, 113, 0.1);
color: var(--success);
border-radius: 30px;
font-weight: 600;
font-size: 1.1rem;
}
/* Блок преимуществ */
.benefits {
background-color: var(--light);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.category__benefits .benefits-grid{
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.benefit-card {
background-color: white;
border-radius: var(--radius);
padding: 40px 30px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.category__benefits .benefit-card i{
color:var(--bg-light);
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--secondary), var(--success));
}
.benefit-icon {
width: 70px;
height: 70px;
background-color: rgba(52, 152, 219, 0.1);
color: var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin: 0 auto 25px;
}
.benefit-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary);
}
.benefit-card p {
color: var(--gray);
line-height: 1.7;
}
/* ========== СПЕЦИФИЧЕСКИЕ СТИЛИ ДЛЯ СТРАНИЦЫ ТОВАРА ========== */
/* Хедер товара */
.product-header {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
padding: 40px 0;
height: 70vh;
color: #FFFFFF;
}
.product-header .row{
display: flex;
gap: 145px;
align-items: center;
}
.product-header .row .col-5{
flex: 0 0 50%;
}
.product-header .row .col-5 .product-buttons{
display: flex;
gap: 15px;
}
.product-header .row .col-5 .product-buttons .btn{
padding: 15px 25px;
font-size: 15px;
line-height: 34px;
}
.product-title {
font-size: 2.5rem;
color: #FFFFFF;
margin-bottom: 15px;
line-height: 1.3;
}
.product-meta {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 25px 0;
}
.product-meta-item {
display: flex;
align-items: center;
gap: 10px;
color: #FFFFFF;
}
.product-meta-item i {
color: var(--secondary);
font-size: 1.2rem;
}
.product-meta-item strong {
color: #FFFFFF;
font-weight: 600;
}
.product-price-large {
font-size: 3.5rem;
font-weight: 700;
color: var(--success);
margin: 20px 0;
}
.product-price-large span {
font-size: 1.2rem;
color: #a9a9a9;
font-weight: 400;
}
/* Галерея */
.product-gallery {
background-color: white;
padding: 60px 0;
}
.gallery-grid {
display: flex;
flex-direction: column;
gap: 30px;
}
.section-row{
display: flex;
gap: 30px;
}
.section-row .col-60{
flex: 1 0 55%;
}
.section-row .col-45{
flex: 1 0 65%;
}
.gallery-main {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
height: 400px;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumbs {
display: flex;
gap: 15px;
}
.gallery-thumb {
border-radius: var(--radius);
overflow: hidden;
width: 100px;
height: 100px;
cursor: pointer;
opacity: 0.7;
transition: var(--transition);
box-shadow: var(--shadow);
}
.gallery-thumb:hover,
.gallery-thumb.active {
opacity: 1;
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.catalog-filter{
display: flex;
justify-content: center;
gap: 17px;
margin-bottom: 30px;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
#catalog .catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 28px;
}
#catalog .category-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
position: relative;
border: 1px solid #f0f0f0;
}
#catalog .category-badges {
position: absolute;
top: 12px;
left: 12px;
display: flex;
gap: 6px;
z-index: 2;
}
#catalog .category-badges .badge{
color: #fff;
}
#catalog .category-badges .badge i{
color: #fff;
}
#catalog .badge-hit {
background: #e74c3c;
}
#catalog .category-icon {
position: absolute;
bottom: 16px;
left: 16px;
z-index: 2;
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.4rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
#catalog .category-title-overlay {
position: absolute;
bottom: 16px;
left: 80px;
z-index: 2;
color: #fff;
font-weight: 800;
font-size: 1.15rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#catalog .category-image {
height: 230px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
}
#catalog .category-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
}
#catalog .category-content {
padding: 24px;
}
#catalog .category-content h3 {
font-size: 1.15rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 10px;
}
#catalog .category-desc {
font-size: 0.9rem;
color: #666;
line-height: 1.7;
margin-bottom: 16px;
min-height: 80px;
}
#catalog .category-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 18px;
}
#catalog .category-features .category-feature{
font-size: 0.78rem;
background: #f0f4f8;
color: #555;
padding: 4px 12px;
border-radius: 20px;
font-weight: 500;
}
#catalog .category-features .category-feature i {
color: #2ecc71;
margin-right: 3px;
}
#catalog .category-price-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
#catalog .category-price {
font-size: 1.6rem;
font-weight: 800;
color: #2c3e50;
}
#catalog .category-price-unit {
font-size: 0.85rem;
color: #999;
font-weight: 500;
}
#catalog .category-savings {
font-size: 0.82rem;
color: #2ecc71;
font-weight: 700;
margin-bottom: 16px;
}
#catalog .category-savings i {
margin-right: 3px;
}
#catalog .btn-buy {
flex: 1;
padding: 12px;
border-radius: 10px;
border: none;
cursor: pointer;
background: #3498db;
color: #fff;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.product-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.product-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--bg-light);
}
.product-card-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
z-index: 2;
}
.badge-popular {
background: var(--green);
color: #fff;
}
.badge-new {
background: var(--blue);
color: #fff;
}
.badge-sale {
background: var(--red);
color: #fff;
}
.product-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.product-card-includes{
margin-bottom: 30px;
}
.product-card-price-badge {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
color: #fff;
padding: 6px 14px;
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: 700;
z-index: 2;
}
.product-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.product-card-category {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.product-card-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 10px;
line-height: 1.3;
}
.product-card-desc {
font-size: 0.88rem;
color: var(--text-light);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.product-card-features {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.product-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.73rem;
background: var(--bg-light);
color: var(--text-light);
font-weight: 500;
}
.product-tag i {
font-size: 0.65rem;
color: var(--blue);
}
.product-card-footer {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.product-card-price {
display: flex;
flex-direction: column;
}
.product-card-price-value {
font-size: 1.3rem;
font-weight: 800;
color: var(--dark);
display: flex;
flex-direction: column;
}
.product-card-price-note {
font-size: 0.72rem;
color: var(--text-muted);
}
.product-card-actions {
display: flex;
gap: 8px;
}
.btn-card-demo {
background: var(--blue);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.btn-card-details {
background: var(--bg-light);
color: var(--dark);
border: 1px solid var(--border);
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.audience-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.audience-card {
background: #fff;
border-radius: var(--radius);
padding: 30px;
text-align: center;
border: 1px solid var(--border);
transition: var(--transition);
}
.audience-icon {
width: 70px;
height: 70px;
border-radius: 50%;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: #fff;
background: var(--category-gradient);
}
.audience-card h3 {
color: var(--dark);
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
}
.audience-card p {
color: var(--text-light);
font-size: 0.88rem;
line-height: 1.5;
}
#process .steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 50px;
}
#process .step-card {
text-align: center;
padding: 30px 20px;
position: relative;
}
#process .step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: var(--secondary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.comparison-table-wrapper
{
overflow-x: auto;
margin-top: 30px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
min-width: 600px;
}
.comparison-table thead th {
background: var(--dark);
color: #fff;
padding: 18px 20px;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
}
.comparison-table thead th:last-child {
border-radius: 0 var(--radius-lg) 0 0;
}
.comparison-table .highlight-col {
background: #fdf8f0;
}
.comparison-table thead th.highlight-col {
background: var(--category-gradient);
position: relative;
}
.comparison-table tbody td {
padding: 14px 20px;
border-bottom: 1px solid var(--border);
text-align: center;
}
.comparison-table tbody td i{
color:var(--green);
}
.comparison-table tbody td i.check-no{
color:red;
}
.comparison-table tbody td:first-child {
text-align: left;
font-weight: 600;
color: var(--dark);
}
.price-highlight {
font-size: 1.15rem;
font-weight: 700;
color: var(--green);
}
#results .results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
#results .result-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 30px;
text-align: center;
border: 1px solid var(--border);
transition: var(--transition);
}
#results .result-icon {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
background: var(--category-gradient);
}
#results .result-value {
font-size: 1.8rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 4px;
}
#results .result-label {
font-size: 0.9rem;
color: var(--text-light);
}
#results .result-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
#testimonials .testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
#testimonials .testimonial-card {
background: var(--bg-white);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: var(--transition);
}
#testimonials .testimonial-stars {
color: #f1c40f;
font-size: 0.95rem;
margin-bottom: 12px;
}
#testimonials .testimonial-text {
font-size: 0.93rem;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 16px;
font-style: italic;
}
#testimonials .testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
#testimonials .testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
flex-shrink: 0;
}
#testimonials .testimonial-name {
font-weight: 700;
color: var(--dark);
font-size: 0.95rem;
}
#testimonials .testimonial-role {
font-size: 0.8rem;
color: var(--text-muted);
}
#guarantees .guarantees-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
#guarantees .guarantee-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 35px 25px;
text-align: center;
border: 1px solid var(--border);
transition: var(--transition);
}
#guarantees .guarantee-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
#guarantees .guarantee-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.6rem;
color: #fff;
}
#guarantees .guarantee-card:nth-child(1) .guarantee-icon {
background: linear-gradient(135deg, #2ecc71, #27ae60);
}
#guarantees .guarantee-card:nth-child(2) .guarantee-icon {
background: linear-gradient(135deg, #3498db, #2980b9);
}
#guarantees .guarantee-card:nth-child(3) .guarantee-icon {
background: linear-gradient(135deg, #e67e22, #d35400);
}
#guarantees .guarantee-card h3 {
color: var(--dark);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
}
#guarantees .guarantee-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.6;
}
.trust__bages--category{
padding: 30px 0;
background: var(--bg-white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.trust__bages--category .trust-badges-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.trust__bages--category .trust-badge-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
color: var(--text-light);
}
.trust__bages--category .trust-badge-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: #f0f7ff;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
font-size: 1.1rem;
flex-shrink: 0;
}
.trust__bages--category .trust-badge-text {
font-weight: 600;
color: var(--dark);
}
.trust__bages--category .trust-badge-sub {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
}
/* Характеристики */
.specs {
background-color: var(--light);
}
.specs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 50px;
}
.specs-card {
background-color: white;
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
}
.specs-card h3 {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.specs-card h3 i {
color: var(--secondary);
}
.specs-list {
list-style: none;
}
.specs-list li {
padding: 12px 0;
border-bottom: 1px dashed #ddd;
display: flex;
align-items: center;
gap: 10px;
}
.specs-list li:last-child {
border-bottom: none;
}
.specs-list i {
color: var(--success);
}
.specs-list .spec-label {
font-weight: 600;
color: var(--primary);
min-width: 140px;
}
/* Что внутри */
.includes {
background-color: white;
}
.includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}
.include-item {
text-align: center;
padding: 30px;
border-radius: var(--radius);
background-color: var(--light);
transition: var(--transition);
}
.include-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.include-icon {
width: 80px;
height: 80px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
margin: 0 auto 20px;
}
.include-item h4 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--primary);
}
/* Видео-превью вместо демо доступа */
.video-preview {
background-color: var(--light);
}
.video-container {
max-width: 900px;
height: 450px;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.video-placeholder {
position: relative;
cursor: pointer;
overflow: hidden;
}
.video-placeholder img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 30px;
transition: var(--transition);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
cursor: pointer;
}
.play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
background-color: #c0392b;
}
.video-note {
text-align: center;
margin-top: 20px;
color: var(--gray);
font-size: 0.95rem;
}
/* Преимущества */
.benefits-product {
background-color: white;
}
.benefits-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 50px;
}
.benefit-product-item {
text-align: center;
padding: 30px 20px;
border-radius: var(--radius);
background-color: var(--light);
transition: var(--transition);
}
.benefit-product-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.benefit-product-icon {
width: 60px;
height: 60px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 15px;
}
.benefit-product-item h4 {
font-size: 1.1rem;
color: var(--primary);
}
/* Блок покупки */
.purchase {
background: linear-gradient(rgba(44, 62, 80, 0.95), rgba(44, 62, 80, 0.95)), url('https://via.placeholder.com/1920x600/2c3e50/3498db?text=Buy+Now');
background-size: cover;
color: white;
}
.purchase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.purchase-info h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.purchase-info .price {
font-size: 3rem;
font-weight: 700;
color: var(--success);
margin: 25px 0;
}
.purchase-features {
list-style: none;
}
.purchase-features li {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.purchase-features i {
color: var(--success);
}
.purchase-form {
background-color: white;
border-radius: var(--radius);
padding: 40px;
color: #333;
}
.purchase-form form {
display: flex;
flex-direction: column;
row-gap: 30px;
}
.purchase-form h3 {
font-size: 1.6rem;
color: var(--primary);
margin-bottom: 30px;
text-align: center;
}
/* Похожие сайты */
.similar {
background-color: var(--light);
}
.similar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}
.similar-card {
background-color: white;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.similar-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.similar-img {
height: 200px;
overflow: hidden;
}
.similar-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.similar-card:hover .similar-img img {
transform: scale(1.05);
}
.similar-info {
padding: 20px;
}
.similar-info h4 {
font-size: 1.2rem;
color: var(--primary);
margin-bottom: 10px;
}
.similar-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--success);
margin: 10px 0;
}
/* Блок гарантии */
.guarantee-box {
background-color: white;
border-radius: var(--radius);
padding: 40px;
margin-top: 40px;
border: 2px solid var(--success);
position: relative;
}
.guarantee-badge {
position: absolute;
top: -15px;
left: 30px;
background-color: var(--success);
color: white;
padding: 5px 25px;
border-radius: 30px;
font-weight: 600;
}
.guarantee-content {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.guarantee-icon {
font-size: 4rem;
color: var(--success);
}
.guarantee-text h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--primary);
}
/* Блок "Как это работает" (вместо демо) */
.how-it-works {
background-color: white;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 50px;
}
.step-item {
text-align: center;
position: relative;
}
.step-item:not(:last-child)::after {
content: '→';
position: absolute;
top: 30px;
right: -15px;
font-size: 2rem;
color: var(--secondary);
opacity: 0.5;
}
.step-number-badge {
width: 60px;
height: 60px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
margin: 0 auto 20px;
}
.step-item h4 {
font-size: 1.2rem;
color: var(--primary);
margin-bottom: 10px;
}
.step-item p {
color: var(--gray);
font-size: 0.95rem;
}
/* Адаптивность */
@media (max-width: 992px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.specs-grid {
grid-template-columns: 1fr;
}
.includes-grid,
.benefits-product-grid,
.similar-grid,
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
.purchase-grid {
grid-template-columns: 1fr;
}
.step-item:not(:last-child)::after {
display: none;
}
}
@media (max-width: 768px) {
.product-title {
font-size: 2rem;
}
.product-price-large {
font-size: 2.5rem;
}
.includes-grid,
.benefits-product-grid,
.similar-grid,
.steps-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.guarantee-content {
flex-direction: column;
text-align: center;
}
}
/* Отступ для фиксированной шапки */
.site-main {
margin-top: 80px;
}
/* Бейдж "Без демо доступа" */
.no-demo-badge {
display: inline-block;
background-color: var(--accent);
color: white;
padding: 5px 15px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
margin-left: 15px;
}
.video-fake-player{
max-width: 900px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.video-overlay{
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.video-fake-player img{
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
object-position: center;
z-index: 0;
}
.cta-features {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
}
.cta-feature {
display: flex;
align-items: center;
gap: 10px;
}
.cta-feature i {
color: var(--success);
font-size: 1.2rem;
}
.urgency-banner {
background-color: var(--accent);
color: white;
padding: 15px 0;
text-align: center;
font-weight: 600;
font-size: 1.1rem;
position: fixed;
width: 100%;
top: 70px;
z-index: 100;
}
.urgency-banner i {
margin-right: 10px;
animation: pulse 1.5s infinite;
}
.price-tag{
color: var(--accent);
font-weight: 700;
}
.price-tag span{
font-weight: 400;
color: var(--gray);
}
/* Добавьте в ваш CSS файл или в