* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding-left: 250px;
background-color: #fff;
color: #333;
overflow-x: hidden;
}
:root {
--dark-grey: #2c3e50;
--light-grey: #f4f4f4;
--red: #e31e24;
--white: #ffffff;
}
/* =========================
HERO
========================= */
.hero {
width: 100%;
padding: 60px 40px;
margin-bottom: 50px;
background:
linear-gradient(
rgba(255,255,255,0.9),
rgba(255,255,255,0.7)
),
url('https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?auto=format&fit=crop&w=1000&q=80');
background-size: cover;
background-position: center;
border-radius: 0 0 20px 20px;
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.05);
}
.hero h1 {
font-size: 48px;
line-height: 1.15;
color: #1a1a1a;
margin: 0 0 15px;
}
.hero p {
max-width: 900px;
color: #666;
font-size: 18px;
line-height: 1.5;
margin-bottom: 30px;
}
/* =========================
BUTTONS
========================= */
.btn-group {
display: flex;
gap: 10px;
}
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 13px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
font-size: 15px;
cursor: pointer;
border: none;
transition: .2s;
}
.btn-red {
background: var(--red);
color: white;
}
.btn-red:hover {
opacity: .85;
}
.btn-black {
background: var(--dark-grey);
color:white;
}
/* =========================
ADVANTAGE CARDS
========================= */
.grid-container {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:20px;
padding:40px;
}
.card {
background:#f5f7fa;
padding:30px;
border-radius:12px;
min-height:180px;
}
.card h3 {
margin-top:0;
font-size:20px;
}
.card p {
color:#555;
font-size:14px;
line-height:1.5;
}
/* кнопки карточек */
.card-btn {
margin-top:15px;
padding:10px 20px;
background:#fff;
border:1px solid #ddd;
border-radius:5px;
cursor:pointer;
font-size:14px;
transition:.2s;
}
.card-btn:hover {
background:#f5f5f5;
}
.btn-red-text {
color:var(--red);
border-color:var(--red);
}
.btn-red-text:hover {
background:var(--red);
color:white;
}
/* =========================
MODALS
========================= */
.modal {
display:none;
position:fixed;
z-index:100;
left:0;
top:0;
width:100%;
height:100%;
background:
rgba(0,0,0,.55);
}
.modal-content {
background:white;
width:90%;
max-width:400px;
margin:15vh auto;
padding:30px;
border-radius:15px;
position:relative;
}
.close {
position:absolute;
right:20px;
top:10px;
font-size:30px;
cursor:pointer;
}
.contact-modal {
text-align:center;
border-top:5px solid var(--red);
}
.modal-phone-number {
display:block;
margin:20px 0;
padding:15px;
background:#f4f4f4;
border-radius:10px;
border:1px dashed var(--red);
color:#111;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
.modal-subtext {
color:#888;
font-size:12px;
}
/* =========================
SIDEBAR
========================= */
.sidebar {
position:fixed;
left:0;
top:0;
width:250px;
height:100vh;
background:var(--dark-grey);
color:white;
display:flex;
flex-direction:column;
padding:20px 0;
box-shadow:
4px 0 10px rgba(0,0,0,.1);
z-index:50;
}
.sidebar-logo {
padding:0 20px 40px;
text-align:center;
font-weight:bold;
font-size:20px;
letter-spacing:1px;
}
.red-text {
color:var(--red);
}
.nav-links {
list-style:none;
padding:0;
margin:0;
}
.nav-links li a {
display:block;
padding:20px 25px;
color:#bdc3c7;
text-decoration:none;
font-size:14px;
border-left:4px solid transparent;
transition:.3s;
}
.nav-links li a:hover {
background:#34495e;
color:white;
border-left-color:var(--red);
}
.sidebar-footer {
margin-top:auto;
padding:20px;
background:#243342;
text-align:center;
}
.phone-link {
color:var(--red);
text-decoration:none;
font-weight:bold;
}
/* =========================
SERVICES
========================= */
.services-section {
padding:20px 40px;
}
.services-section h2 {
font-size:28px;
color:var(--dark-grey);
margin-bottom:30px;
border-left:5px solid var(--red);
padding-left:15px;
}
.services-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.service-card {
display:flex;
background:white;
border:1px solid #eee;
border-radius:10px;
overflow:hidden;
min-height:180px;
transition:.2s;
}
.service-card:hover {
transform:translateY(-5px);
box-shadow:
0 10px 20px rgba(0,0,0,.05);
}
.service-image {
width:40%;
min-height:180px;
background-size:cover;
background-position:center;
}
.service-info {
width:60%;
padding:20px;
display:flex;
flex-direction:column;
justify-content:center;
}
.service-info h3 {
margin:0 0 10px;
font-size:18px;
color:#111;
}
.service-info p {
margin:0;
font-size:14px;
line-height:1.5;
color:#666;
}
/* =========================
BRANDS
========================= */
.brands-section {
padding:60px 40px;
overflow:hidden;
}
.brands-section h2 {
font-size:28px;
color:var(--dark-grey);
margin-bottom:30px;
}
.brands-wrapper {
overflow-x:auto;
cursor:grab;
user-select:none;
scrollbar-width:none;
}
.brands-wrapper::-webkit-scrollbar {
display:none;
}
.brands-track {
display:flex;
gap:20px;
width:max-content;
animation:scroll 30s linear infinite;
}
.brands-wrapper:hover .brands-track {
animation-play-state:paused;
}
.brand-item {
width:180px;
height:100px;
background:white;
border:1px solid #eee;
border-radius:12px;
padding:20px;
display:flex;
justify-content:center;
align-items:center;
}
.brand-item img {
max-width:100%;
max-height:70px;
filter:grayscale(100%);
opacity:.7;
transition:.3s;
}
.brand-item:hover img {
filter:none;
opacity:1;
}
@keyframes scroll {
from {
transform:translateX(0);
}
to {
transform:translateX(-50%);
}
}
/* =========================
REVIEWS
========================= */
.reviews-section {
padding:60px 40px;
background:var(--light-grey);
}
.reviews-section h2 {
font-size:28px;
color:var(--dark-grey);
margin-bottom:40px;
border-left:5px solid var(--red);
padding-left:15px;
}
.reviews-container {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}
.review-card {
background:white;
padding:25px;
border-radius:12px;
border-left:4px solid var(--red);
box-shadow:
0 4px 12px rgba(0,0,0,.04);
}
.review-header {
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}
.review-avatar {
width:42px;
height:42px;
border-radius:50%;
background:var(--red);
color:white;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
}
.review-name {
font-weight:bold;
}
.review-stars {
margin-left:auto;
color:#f4b400;
}
.review-text {
font-size:14px;
line-height:1.6;
color:#555;
font-style:italic;
}
.review-date {
display:block;
text-align:right;
color:#999;
font-size:12px;
}
/* =========================
FOOTER
========================= */
.site-footer {
background:#2c3e50;
color:white;
padding:30px 40px;
}
.footer-content {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:15px;
}
.footer-note {
opacity:.8;
}
/* ==================================================
MOBILE VERSION
================================================== */
@media(max-width:768px) {
body {
padding-left:0;
width:100%;
}
/* меню убираем,
чтобы не мешало телефону */
.sidebar {
transform:translateX(-100%);
}
/* HERO */
.hero {
padding:35px 20px;
margin-bottom:20px;
border-radius:0 0 15px 15px;
}
.hero h1 {
font-size:32px;
}
.hero p {
font-size:15px;
line-height:1.5;
}
.btn-group {
width:100%;
}
.btn {
width:100%;
padding:15px;
}
/* карточки */
.grid-container {
padding:20px;
grid-template-columns:1fr;
}
.card {
padding:22px;
}
/* услуги */
.services-section {
padding:20px;
}
.services-section h2 {
font-size:22px;
}
.services-grid {
grid-template-columns:1fr;
gap:20px;
}
.service-card {
display:block;
}
.service-image {
width:100%;
height:180px;
}
.service-info {
width:100%;
padding:20px;
}
/* бренды */
.brands-section {
padding:40px 20px;
}
.brands-section h2 {
font-size:22px;
}
.brands-track {
animation:none;
}
.brand-item {
width:150px;
height:85px;
}
/* отзывы */
.reviews-section {
padding:40px 20px;
}
.reviews-section h2 {
font-size:22px;
}
.reviews-container {
grid-template-columns:1fr;
}
.review-card {
padding:20px;
}
/* модальные окна */
.modal-content {
width:calc(100% - 40px);
padding:25px;
margin:20vh auto;
}
.modal-phone-number {
font-size:21px;
}
/* footer */
.site-footer {
padding:25px 20px;
}
.footer-content {
flex-direction:column;
text-align:center;
}
}
/* =========================
VERY SMALL PHONES
320px
========================= */
@media(max-width:380px) {
.hero h1 {
font-size:27px;
}
.hero p {
font-size:14px;
}
.card h3 {
font-size:18px;
}
.modal-phone-number {
font-size:18px;
}
}