1425 lines
81 KiB
HTML
1425 lines
81 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>СТС-Авто — Демонтаж нефтегазопроводов по России, утилизация отходов</title>
|
||
<meta name="description" content="Демонтаж нефтегазопроводов по России, утилизация отходов. Собственная спецтехника. Лицензии СРО и НОСТРОЙ. Более {years} лет опыта.">
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto+Condensed:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--dark: #1a2a3a;
|
||
--dark-deep: #0d1a27;
|
||
--bg-light: #f5f2ed;
|
||
--bg-alt: #eae6df;
|
||
--bg-white: #ffffff;
|
||
--orange: #E67E22;
|
||
--orange-dark: #D35400;
|
||
--orange-light: #F39C12;
|
||
--text-dark: #1a2a3a;
|
||
--text-gray: #5a6a7a;
|
||
--text-light: #8a9aaa;
|
||
--border: #d5d0c8;
|
||
--yellow-warn: #F1C40F;
|
||
--steel: #7f8c8d;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; font-size: 16px; }
|
||
|
||
body {
|
||
font-family: 'Roboto Condensed', sans-serif;
|
||
color: var(--text-dark);
|
||
background: var(--bg-light);
|
||
overflow-x: hidden;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2; }
|
||
a { text-decoration: none; color: inherit; transition: color 0.3s; }
|
||
img { max-width: 100%; display: block; }
|
||
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
|
||
|
||
/* ========== HEADER — CONSTRUCTION EQUIPMENT STYLE ========== */
|
||
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.3s; }
|
||
|
||
|
||
.header-main {
|
||
background: linear-gradient(180deg, #2c3e50 0%, #1a2a3a 100%);
|
||
border-bottom: 3px solid var(--orange);
|
||
position: relative;
|
||
}
|
||
|
||
.header-main::before, .header-main::after {
|
||
content: ''; position: absolute; width: 12px; height: 12px;
|
||
background: radial-gradient(circle, #c0c0c0 30%, #888 70%);
|
||
border-radius: 50%; border: 1px solid #666;
|
||
top: 50%; transform: translateY(-50%);
|
||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.2);
|
||
}
|
||
.header-main::before { left: 12px; }
|
||
.header-main::after { right: 12px; }
|
||
|
||
.header-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 30px; max-width: 1300px; margin: 0 auto; position: relative;
|
||
}
|
||
|
||
.header-inner::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.logo { display: flex; align-items: center; position: relative; z-index: 2; margin-top: -18px; margin-bottom: -18px; }
|
||
.logo img { max-height: 180px; max-width: 100%; width: auto; height: auto; }
|
||
|
||
.nav { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
|
||
|
||
.nav a {
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
|
||
text-transform: uppercase; letter-spacing: 1.5px; color: #bdc3c7;
|
||
transition: all 0.3s; padding: 8px 4px; position: relative;
|
||
}
|
||
.nav a::after {
|
||
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
|
||
background: var(--orange); transform: scaleX(0); transition: transform 0.3s;
|
||
}
|
||
.nav a:hover { color: var(--orange-light); }
|
||
.nav a:hover::after { transform: scaleX(1); }
|
||
|
||
.header-phone {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px;
|
||
color: var(--orange-light); position: relative; z-index: 2;
|
||
}
|
||
.header-phone svg { width: 18px; height: 18px; fill: var(--orange); }
|
||
|
||
|
||
.burger {
|
||
display: none; flex-direction: column; gap: 5px; cursor: pointer;
|
||
padding: 8px; position: relative; z-index: 2;
|
||
}
|
||
.burger span { width: 28px; height: 3px; background: #ecf0f1; border-radius: 2px; transition: all 0.3s; }
|
||
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
|
||
.burger.active span:nth-child(2) { opacity: 0; }
|
||
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
|
||
|
||
.mobile-nav {
|
||
position: fixed; top: 0; right: -320px; width: 320px; height: 100vh;
|
||
background: linear-gradient(180deg, #2c3e50, #1a2a3a);
|
||
z-index: 1001; padding: 80px 30px 30px;
|
||
transition: right 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
|
||
border-left: 3px solid var(--orange);
|
||
}
|
||
.mobile-nav.open { right: 0; }
|
||
.mobile-nav a {
|
||
display: block; padding: 14px 0;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
|
||
color: #bdc3c7; border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
text-transform: uppercase; letter-spacing: 1px;
|
||
}
|
||
.mobile-nav a:hover { color: var(--orange); }
|
||
.mobile-overlay {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
|
||
z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s;
|
||
}
|
||
.mobile-overlay.active { opacity: 1; visibility: visible; }
|
||
|
||
/* ========== HERO ========== */
|
||
.hero {
|
||
min-height: 100vh; display: flex; align-items: center;
|
||
position: relative; overflow: hidden; padding-top: 100px;
|
||
background: linear-gradient(135deg, #e8e4df 0%, #d5d0c8 100%);
|
||
}
|
||
.hero-bg { position: absolute; inset: 0; z-index: 0; }
|
||
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
|
||
.hero-bg::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: linear-gradient(135deg, rgba(26,42,58,0.88) 0%, rgba(26,42,58,0.55) 50%, rgba(26,42,58,0.78) 100%);
|
||
}
|
||
.hero-content { position: relative; z-index: 2; max-width: 820px; padding: 50px 0; }
|
||
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: rgba(230,126,34,0.2); border: 1px solid rgba(230,126,34,0.5);
|
||
border-radius: 50px; padding: 8px 22px; margin-bottom: 24px;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
|
||
color: var(--orange-light);
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900;
|
||
margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; color: #fff;
|
||
}
|
||
.hero h1 span { color: var(--orange-light); }
|
||
.hero-subtitle { font-size: clamp(1rem, 2.2vw, 1.2rem); color: #bdc3c7; margin-bottom: 32px; line-height: 1.7; }
|
||
|
||
.hero-contacts { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 36px; }
|
||
.hero-contact-item { display: flex; align-items: center; gap: 10px; color: #ecf0f1; font-size: 15px; }
|
||
.hero-contact-item svg { width: 18px; height: 18px; fill: var(--orange); flex-shrink: 0; }
|
||
.hero-contact-item a { color: #ecf0f1; }
|
||
.hero-contact-item a:hover { color: var(--orange-light); }
|
||
|
||
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 16px 34px; border-radius: 4px;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700;
|
||
font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
|
||
cursor: pointer; border: none; transition: all 0.3s;
|
||
}
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
|
||
color: #fff; box-shadow: 0 4px 15px rgba(230,126,34,0.3);
|
||
}
|
||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(230,126,34,0.45); }
|
||
.btn-outline { background: transparent; color: #ecf0f1; border: 2px solid rgba(255,255,255,0.3); }
|
||
.btn-outline:hover { border-color: var(--orange); color: var(--orange-light); }
|
||
|
||
.hero-stats {
|
||
display: flex; gap: 40px; margin-top: 45px;
|
||
padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.hero-stat { text-align: center; }
|
||
.hero-stat-number {
|
||
font-family: 'Montserrat', sans-serif; font-weight: 900;
|
||
font-size: 2.5rem; color: var(--orange-light); line-height: 1;
|
||
}
|
||
.hero-stat-label { font-size: 13px; color: #95a5a6; margin-top: 6px; }
|
||
|
||
/* ========== SECTIONS ========== */
|
||
.section { padding: 90px 0; }
|
||
.section-alt { background: var(--bg-alt); }
|
||
.section-white { background: var(--bg-white); }
|
||
.section-title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.section-title span { color: var(--orange); }
|
||
.section-subtitle { font-size: 1.05rem; color: var(--text-gray); max-width: 700px; margin-bottom: 45px; line-height: 1.7; }
|
||
.section-header { margin-bottom: 45px; }
|
||
.section-header.center { text-align: center; }
|
||
.section-header.center .section-subtitle { margin-left: auto; margin-right: auto; }
|
||
|
||
/* ========== ABOUT ========== */
|
||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
|
||
.about-image { border-radius: 12px; overflow: hidden; position: relative; border: 3px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
|
||
.about-image img { width: 100%; height: 450px; object-fit: cover; }
|
||
.about-text h3 { font-size: 1.4rem; margin-bottom: 18px; color: var(--orange-dark); }
|
||
.about-text p { color: var(--text-gray); margin-bottom: 14px; line-height: 1.8; font-size: 1.02rem; }
|
||
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
|
||
.about-feature {
|
||
display: flex; align-items: flex-start; gap: 12px; padding: 16px;
|
||
background: var(--bg-white); border-radius: 8px; border: 1px solid var(--border); transition: all 0.3s;
|
||
}
|
||
.about-feature:hover { border-color: var(--orange); box-shadow: 0 4px 15px rgba(230,126,34,0.1); }
|
||
.about-feature-icon {
|
||
width: 40px; height: 40px; background: rgba(230,126,34,0.12);
|
||
border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
}
|
||
.about-feature-icon svg { width: 20px; height: 20px; fill: var(--orange); }
|
||
.about-feature-text { font-size: 13px; color: var(--text-gray); line-height: 1.5; }
|
||
.about-feature-text strong { display: block; color: var(--text-dark); font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 3px; font-size: 13px; }
|
||
|
||
/* ========== SERVICES ========== */
|
||
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
|
||
.service-card {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 12px; padding: 32px 26px; transition: all 0.4s; position: relative; overflow: hidden;
|
||
}
|
||
.service-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||
background: var(--orange); transform: scaleX(0); transition: transform 0.4s;
|
||
}
|
||
.service-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: var(--orange); }
|
||
.service-card:hover::before { transform: scaleX(1); }
|
||
.service-card.large { grid-column: span 2; }
|
||
.service-icon { width: 52px; height: 52px; background: rgba(230,126,34,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
|
||
.service-icon svg { width: 26px; height: 26px; fill: var(--orange); }
|
||
.service-card h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--text-dark); }
|
||
.service-card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.7; margin-bottom: 10px; }
|
||
.service-list { list-style: none; padding: 0; }
|
||
.service-list li {
|
||
position: relative; padding-left: 20px; color: var(--text-gray);
|
||
font-size: 0.93rem; line-height: 1.6; margin-bottom: 5px;
|
||
}
|
||
.service-list li::before {
|
||
content: ''; position: absolute; left: 0; top: 9px;
|
||
width: 8px; height: 8px; background: var(--orange); border-radius: 50%;
|
||
}
|
||
|
||
/* ========== PROCESS ========== */
|
||
.process-timeline { position: relative; max-width: 850px; margin: 0 auto; }
|
||
.process-timeline::before {
|
||
content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 3px;
|
||
background: linear-gradient(to bottom, var(--orange), rgba(230,126,34,0.15));
|
||
}
|
||
.process-step { display: flex; gap: 28px; margin-bottom: 36px; position: relative; }
|
||
.process-step:last-child { margin-bottom: 0; }
|
||
.process-number {
|
||
width: 78px; height: 78px;
|
||
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.7rem;
|
||
color: #fff; flex-shrink: 0; position: relative; z-index: 2;
|
||
box-shadow: 0 0 0 8px rgba(230,126,34,0.15), 0 4px 15px rgba(230,126,34,0.2);
|
||
}
|
||
.process-content {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 12px; padding: 26px 30px; flex: 1;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||
}
|
||
.process-content h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--orange-dark); }
|
||
.process-content p { color: var(--text-gray); line-height: 1.7; }
|
||
|
||
/* ========== EQUIPMENT ========== */
|
||
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
|
||
.equipment-card {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 12px; overflow: hidden; transition: all 0.4s;
|
||
}
|
||
.equipment-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: var(--orange); }
|
||
.equipment-card-image { height: 220px; overflow: hidden; position: relative; }
|
||
.equipment-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
|
||
.equipment-card:hover .equipment-card-image img { transform: scale(1.05); }
|
||
.equipment-card-image .equip-overlay {
|
||
position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 16px;
|
||
background: linear-gradient(transparent, rgba(0,0,0,0.7));
|
||
}
|
||
.equipment-card-image .equip-overlay .brand {
|
||
color: var(--orange-light); font-family: 'Montserrat', sans-serif;
|
||
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
|
||
}
|
||
.equipment-card-body { padding: 22px; }
|
||
.equipment-card-body h3 { font-size: 1.05rem; margin-bottom: 14px; color: var(--text-dark); }
|
||
.equipment-age-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: rgba(39,174,96,0.1); border: 1px solid rgba(39,174,96,0.3);
|
||
border-radius: 50px; padding: 4px 12px; margin-bottom: 12px;
|
||
font-size: 11px; font-weight: 700; color: #27AE60;
|
||
font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
|
||
}
|
||
.equipment-age-badge::before {
|
||
content: '✓';
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 16px; height: 16px; background: #27AE60; color: #fff;
|
||
border-radius: 50%; font-size: 10px;
|
||
}
|
||
.equipment-qty {
|
||
font-size: 13px; font-weight: 700; color: var(--orange);
|
||
margin-bottom: 8px; font-family: 'Montserrat', sans-serif;
|
||
}
|
||
.equipment-specs { display: flex; flex-direction: column; gap: 6px; }
|
||
.equipment-spec {
|
||
display: flex; justify-content: space-between; padding: 6px 0;
|
||
border-bottom: 1px solid var(--border); font-size: 0.88rem;
|
||
}
|
||
.equipment-spec-label { color: var(--text-gray); }
|
||
.equipment-spec-value { color: var(--text-dark); font-weight: 600; }
|
||
|
||
/* ========== GEOGRAPHY ========== */
|
||
.geo-content { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
|
||
.geo-regions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.geo-region {
|
||
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
|
||
background: var(--bg-white); border-radius: 8px; border: 1px solid var(--border); transition: all 0.3s;
|
||
}
|
||
.geo-region:hover { background: rgba(230,126,34,0.08); border-color: var(--orange); }
|
||
.geo-region svg { width: 18px; height: 18px; fill: var(--orange); flex-shrink: 0; }
|
||
.geo-region span { font-size: 0.95rem; color: var(--text-gray); }
|
||
.geo-hard {
|
||
margin-top: 28px; padding: 22px;
|
||
background: rgba(230,126,34,0.06); border: 1px solid rgba(230,126,34,0.25);
|
||
border-radius: 12px;
|
||
}
|
||
.geo-hard h4 { font-size: 1rem; color: var(--orange-dark); margin-bottom: 10px; }
|
||
.geo-hard p { color: var(--text-gray); line-height: 1.7; font-size: 0.95rem; }
|
||
.geo-map {
|
||
border-radius: 12px; overflow: hidden; height: 380px;
|
||
border: 2px solid var(--border); box-shadow: 0 8px 25px rgba(0,0,0,0.08);
|
||
}
|
||
.geo-map img { width: 100%; height: 100%; object-fit: cover; }
|
||
|
||
/* ========== LICENSES ========== */
|
||
.licenses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
|
||
.license-card {
|
||
display: flex; align-items: flex-start; gap: 16px; padding: 22px;
|
||
background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; transition: all 0.3s;
|
||
}
|
||
.license-card:hover { border-color: var(--orange); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
|
||
.license-icon {
|
||
width: 46px; height: 46px; background: rgba(230,126,34,0.1);
|
||
border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
}
|
||
.license-icon svg { width: 22px; height: 22px; fill: var(--orange); }
|
||
.license-card h4 { font-size: 0.95rem; margin-bottom: 5px; color: var(--text-dark); }
|
||
.license-card p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.5; }
|
||
|
||
/* ========== LICENSE GALLERY ========== */
|
||
.license-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 20px; }
|
||
.license-gallery-item {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 12px; overflow: hidden; transition: all 0.3s; cursor: pointer;
|
||
}
|
||
.license-gallery-item:hover { border-color: var(--orange); box-shadow: 0 8px 25px rgba(0,0,0,0.1); transform: translateY(-3px); }
|
||
.license-gallery-thumb { height: 200px; overflow: hidden; position: relative; }
|
||
.license-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
|
||
.license-gallery-item:hover .license-gallery-thumb img { transform: scale(1.05); }
|
||
.license-gallery-thumb::after {
|
||
content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.15);
|
||
transition: background 0.3s;
|
||
}
|
||
.license-gallery-item:hover .license-gallery-thumb::after { background: rgba(0,0,0,0.25); }
|
||
.license-gallery-zoom {
|
||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||
width: 44px; height: 44px; background: rgba(230,126,34,0.9); border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
opacity: 0; transition: opacity 0.3s; z-index: 2;
|
||
}
|
||
.license-gallery-zoom svg { width: 20px; height: 20px; fill: #fff; }
|
||
.license-gallery-item:hover .license-gallery-zoom { opacity: 1; }
|
||
.license-gallery-body { padding: 16px 18px; }
|
||
.license-gallery-body h4 { font-size: 0.95rem; margin-bottom: 5px; color: var(--text-dark); }
|
||
.license-gallery-body p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.5; }
|
||
|
||
/* ========== LIGHTBOX ========== */
|
||
.lightbox-overlay {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.92);
|
||
z-index: 10000; display: flex; align-items: center; justify-content: center;
|
||
opacity: 0; visibility: hidden; transition: all 0.3s; cursor: pointer;
|
||
padding: 20px;
|
||
}
|
||
.lightbox-overlay.open { opacity: 1; visibility: visible; }
|
||
.lightbox-content {
|
||
position: relative; max-width: 90vw; max-height: 90vh;
|
||
transform: scale(0.9); transition: transform 0.3s;
|
||
}
|
||
.lightbox-overlay.open .lightbox-content { transform: scale(1); }
|
||
.lightbox-content img {
|
||
max-width: 100%; max-height: 85vh; display: block;
|
||
border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||
}
|
||
.lightbox-caption {
|
||
text-align: center; margin-top: 14px; color: rgba(255,255,255,0.8);
|
||
font-family: 'Montserrat', sans-serif; font-size: 0.9rem;
|
||
}
|
||
.lightbox-close {
|
||
position: absolute; top: -14px; right: -14px;
|
||
width: 36px; height: 36px; background: var(--orange); border-radius: 50%;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.lightbox-close:hover { background: var(--orange-dark); transform: scale(1.1); }
|
||
.lightbox-close svg { width: 16px; height: 16px; fill: #fff; }
|
||
.lightbox-info {
|
||
background: rgba(255,255,255,0.05); border-radius: 8px;
|
||
padding: 14px 18px; margin-top: 10px; max-width: 700px;
|
||
}
|
||
.lightbox-info h4 { font-size: 1rem; margin-bottom: 4px; color: #fff; }
|
||
.lightbox-info p { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.5; }
|
||
|
||
/* ========== CONTACTS ========== */
|
||
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
|
||
.contact-info-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
|
||
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; }
|
||
.contact-info-icon {
|
||
width: 46px; height: 46px; background: rgba(230,126,34,0.1);
|
||
border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
}
|
||
.contact-info-icon svg { width: 20px; height: 20px; fill: var(--orange); }
|
||
.contact-info-item h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); margin-bottom: 3px; font-weight: 700; }
|
||
.contact-info-item p, .contact-info-item a { color: var(--text-gray); font-size: 1rem; line-height: 1.5; }
|
||
.contact-info-item a:hover { color: var(--orange); }
|
||
.contact-map { border-radius: 12px; overflow: hidden; height: 220px; border: 2px solid var(--border); }
|
||
.contact-map img { width: 100%; height: 100%; object-fit: cover; }
|
||
.contact-form {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 34px; box-shadow: 0 8px 25px rgba(0,0,0,0.06);
|
||
}
|
||
.contact-form h3 { font-size: 1.3rem; margin-bottom: 6px; color: var(--text-dark); }
|
||
.contact-form .form-subtitle { color: var(--text-gray); font-size: 0.93rem; margin-bottom: 22px; }
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-group label {
|
||
display: block; font-family: 'Montserrat', sans-serif; font-weight: 700;
|
||
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.8px;
|
||
color: var(--text-gray); margin-bottom: 7px;
|
||
}
|
||
.form-group input, .form-group textarea {
|
||
width: 100%; padding: 13px 16px; background: var(--bg-light);
|
||
border: 1px solid var(--border); border-radius: 8px; color: var(--text-dark);
|
||
font-family: 'Roboto Condensed', sans-serif; font-size: 1rem;
|
||
transition: all 0.3s; outline: none;
|
||
}
|
||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); }
|
||
.form-group input:focus, .form-group textarea:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(230,126,34,0.1); }
|
||
.form-group textarea { resize: vertical; min-height: 90px; }
|
||
.form-note { font-size: 0.78rem; color: var(--text-light); margin-top: 10px; }
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer { background: #0a0a0a; }
|
||
.footer-content { padding: 30px 20px; text-align: center; }
|
||
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
|
||
.footer-copy { color: rgba(255,255,255,0.5); font-size: 0.88rem; }
|
||
.footer-links { display: flex; gap: 22px; }
|
||
.footer-links a { color: rgba(255,255,255,0.5); font-size: 0.88rem; transition: color 0.3s; }
|
||
.footer-links a:hover { color: var(--orange-light); }
|
||
|
||
/* ========== SCROLL ANIMATIONS ========== */
|
||
.reveal { opacity: 0; transform: translateY(35px); transition: all 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
.reveal-left { opacity: 0; transform: translateX(-35px); transition: all 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
|
||
.reveal-left.visible { opacity: 1; transform: translateX(0); }
|
||
.reveal-right { opacity: 0; transform: translateX(35px); transition: all 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
|
||
.reveal-right.visible { opacity: 1; transform: translateX(0); }
|
||
|
||
.scroll-top {
|
||
position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px;
|
||
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s;
|
||
z-index: 999; border: none; box-shadow: 0 4px 15px rgba(230,126,34,0.4);
|
||
}
|
||
.scroll-top.visible { opacity: 1; visibility: visible; }
|
||
.scroll-top:hover { transform: translateY(-3px); }
|
||
.scroll-top svg { width: 20px; height: 20px; fill: #fff; }
|
||
|
||
.form-success { display: none; text-align: center; padding: 40px 20px; }
|
||
.form-success.show { display: block; }
|
||
.form-success svg { width: 60px; height: 60px; fill: #27AE60; margin-bottom: 14px; }
|
||
.form-success h4 { font-size: 1.2rem; margin-bottom: 6px; }
|
||
.form-success p { color: var(--text-gray); }
|
||
|
||
/* ========== RESPONSIVE ========== */
|
||
@media (max-width: 1024px) {
|
||
.nav, .header-phone { display: none; }
|
||
.burger { display: flex; }
|
||
.about-grid { grid-template-columns: 1fr; gap: 28px; }
|
||
.about-image img { height: 320px; }
|
||
.services-grid { grid-template-columns: 1fr 1fr; }
|
||
.service-card.large { grid-column: span 2; }
|
||
.geo-content { grid-template-columns: 1fr; }
|
||
.contacts-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.section { padding: 65px 0; }
|
||
.hero-content { padding: 28px 0; }
|
||
.hero-stats { gap: 18px; flex-wrap: wrap; }
|
||
.hero-stat-number { font-size: 1.8rem; }
|
||
.services-grid { grid-template-columns: 1fr; }
|
||
.service-card.large { grid-column: span 1; }
|
||
.about-features { grid-template-columns: 1fr; }
|
||
.geo-regions { grid-template-columns: 1fr; }
|
||
.equipment-grid { grid-template-columns: 1fr; }
|
||
.licenses-grid { grid-template-columns: 1fr; }
|
||
.process-timeline::before { left: 20px; }
|
||
.process-number { width: 40px; height: 40px; font-size: 1rem; }
|
||
.process-step { gap: 14px; }
|
||
.process-content { padding: 18px; }
|
||
.contact-form { padding: 22px; }
|
||
.footer-inner { flex-direction: column; text-align: center; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.hero-buttons { flex-direction: column; }
|
||
.btn { width: 100%; justify-content: center; }
|
||
.hero-contacts { flex-direction: column; gap: 12px; }
|
||
}
|
||
.activity-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
margin-top: 40px;
|
||
}
|
||
.activity-grid img {
|
||
width: 100%; height: auto;
|
||
border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
}
|
||
.activity-grid .license-gallery-item { cursor: pointer; }
|
||
|
||
.partners-scroll {
|
||
overflow: hidden;
|
||
margin-top: 40px;
|
||
}
|
||
.partners-track {
|
||
display: flex;
|
||
gap: 60px;
|
||
animation: partners-scroll 20s linear infinite;
|
||
width: max-content;
|
||
}
|
||
.partners-track:hover { animation-play-state: paused; }
|
||
.partners-track img {
|
||
height: 100px;
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
@keyframes partners-scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.activity-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<header class="header" id="header">
|
||
<div class="header-main">
|
||
<div class="header-inner">
|
||
<a href="#hero" class="logo">
|
||
<img src="./img/logo.webp" alt="СТС-Авто">
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="#about">О компании</a>
|
||
<a href="#activity">Деятельность</a>
|
||
<a href="#services">Услуги</a>
|
||
<a href="#process">Этапы</a>
|
||
<a href="#equipment">Техника</a>
|
||
<a href="#geography">География</a>
|
||
<a href="#licenses">Лицензии</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
<a href="tel:88005552931" class="header-phone">
|
||
<svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z"/></svg>
|
||
8(800) 555-29-31
|
||
</a>
|
||
<div class="burger" id="burger"><span></span><span></span><span></span></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- MOBILE NAV -->
|
||
<div class="mobile-overlay" id="mobileOverlay"></div>
|
||
<nav class="mobile-nav" id="mobileNav">
|
||
<a href="#about" class="mobile-link">О компании</a>
|
||
<a href="#activity" class="mobile-link">Деятельность</a>
|
||
<a href="#services" class="mobile-link">Услуги</a>
|
||
<a href="#process" class="mobile-link">Этапы работ</a>
|
||
<a href="#equipment" class="mobile-link">Спецтехника</a>
|
||
<a href="#geography" class="mobile-link">География</a>
|
||
<a href="#licenses" class="mobile-link">Лицензии</a>
|
||
<a href="#contacts" class="mobile-link">Контакты</a>
|
||
<a href="tel:88005552931" style="color: var(--orange-light); border: none; margin-top: 20px; font-size: 17px;">8(800) 555-29-31</a>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg">
|
||
<img src="./img/hero-bg.webp" alt="Строительство трубопровода">
|
||
</div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
|
||
Лицензии СРО и НОСТРОЙ
|
||
</div>
|
||
<h1>демонтаж нефтегазопроводов по России, утилизация отходов</h1>
|
||
<p class="hero-subtitle">Собственная спецтехника. Лицензии СРО и НОСТРОЙ. Более {years} лет опыта. Работаем на опасных производственных объектах без привлечения субподрядчиков.</p>
|
||
<div class="hero-contacts">
|
||
<div class="hero-contact-item">
|
||
<svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z"/></svg>
|
||
<div><a href="tel:88005552931">8 (800) 555-29-31</a><br><a href="tel:83432372566">8 (343) 237-25-66</a></div>
|
||
</div>
|
||
<div class="hero-contact-item">
|
||
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
||
<a href="mailto:sts_zakaz@mail.ru">sts_zakaz@mail.ru</a>
|
||
</div>
|
||
<div class="hero-contact-item">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg>
|
||
<span>г. Екатеринбург, ул. Московская, 11, оф. 702</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="#contacts" class="btn btn-primary">Оставить заявку</a>
|
||
<a href="#services" class="btn btn-outline">Наши услуги</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat"><div class="hero-stat-number" data-target="{years}">0</div><div class="hero-stat-label">лет на рынке</div></div>
|
||
<div class="hero-stat"><div class="hero-stat-number" data-target="200">0</div><div class="hero-stat-label">объектов выполнено</div></div>
|
||
<div class="hero-stat"><div class="hero-stat-number" data-target="80">0</div><div class="hero-stat-label">единиц техники</div></div>
|
||
<div class="hero-stat"><div class="hero-stat-number" data-target="6">0</div><div class="hero-stat-label">федеральных округов</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ABOUT -->
|
||
<section class="section section-alt" id="about">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<h2 class="section-title">О <span>компании</span></h2>
|
||
<p class="section-subtitle">Компания «СТС-Авто» — надёжный партнёр в сфере демонтажа, оказывает услуги по демонтажу магистральных трубопроводов, объектов инфраструктуры, зданий, сооружений и разделки жд транспорта, с последующей переработкой и утилизацией для предприятий. Мы работаем на всей территории Российской Федерации.</p>
|
||
</div>
|
||
<div class="about-grid">
|
||
<div class="about-image reveal-left">
|
||
<img src="./img/hero-bg.webp" alt="Работы на трубопроводах">
|
||
</div>
|
||
<div class="about-text reveal-right">
|
||
<h3>Собственная техника и полный контроль</h3>
|
||
<p>Наш автопарк состоит из более чем 50 единиц современной спецтехники, возраст которой не превышает 5 лет. Мы используем экскаваторы, трактора, краны, самосвалы и тралы ведущих мировых производителей: Hitachi, Komatsu, Caterpillar, Belarus, John Deere, Howo, КамАЗ, КС и Ивановец.</p>
|
||
<p>Все работы выполняются исключительно силами компании — без привлечения субподрядчиков. Это гарантирует полное соответствие качества, сроков и ответственности на каждом этапе проекта.</p>
|
||
<p>Мы работаем в самых сложных условиях: труднодоступные районы, заболоченные территории, Крайний Север. Гибкие варианты оплаты: работаем по договору, включая вариант расчёта трубой за услуги (бартер с металлоломом после демонтажа).</p>
|
||
<div class="about-features">
|
||
<div class="about-feature">
|
||
<div class="about-feature-icon"><svg viewBox="0 0 24 24"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg></div>
|
||
<div class="about-feature-text"><strong>Парк техники не старше 5 лет</strong>Более 80 единиц современной спецтехники</div>
|
||
</div>
|
||
<div class="about-feature">
|
||
<div class="about-feature-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||
<div class="about-feature-text"><strong>Без субподрядчиков</strong>Все работы силами компании</div>
|
||
</div>
|
||
<div class="about-feature">
|
||
<div class="about-feature-icon"><svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg></div>
|
||
<div class="about-feature-text"><strong>Сложные условия</strong>Болота, Крайний Север, труднодоступные районы</div>
|
||
</div>
|
||
<div class="about-feature">
|
||
<div class="about-feature-icon"><svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg></div>
|
||
<div class="about-feature-text"><strong>Гибкая оплата</strong>Включая расчёт трубой (бартер)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SOCIAL ACTIVITY -->
|
||
<section class="section section-white" id="activity">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Общественная <span>деятельность</span></h2>
|
||
<p class="section-subtitle">Компания «СТС-Авто» активно участвует в социальной и общественной жизни регионов присутствия.</p>
|
||
</div>
|
||
<div class="activity-grid reveal">
|
||
<div class="license-gallery-item" data-src="./img/thanks-1.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
|
||
<div class="license-gallery-thumb">
|
||
<img src="./img/thanks-1.webp" alt="Благодарственное письмо">
|
||
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
|
||
</div>
|
||
<div class="license-gallery-body">
|
||
<h4>Благодарственное письмо</h4>
|
||
</div>
|
||
</div>
|
||
<div class="license-gallery-item" data-src="./img/thanks-2.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
|
||
<div class="license-gallery-thumb">
|
||
<img src="./img/thanks-2.webp" alt="Благодарственное письмо">
|
||
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
|
||
</div>
|
||
<div class="license-gallery-body">
|
||
<h4>Благодарственное письмо</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="services">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Наши <span>услуги</span></h2>
|
||
<p class="section-subtitle">Полный спектр работ по демонтажу, ремонту и строительству трубопроводной инфраструктуры. Работаем на опасных производственных объектах с собственным парком спецтехники.</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<div class="service-card large reveal">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg></div>
|
||
<h3>Демонтаж нефтегазопроводов, утилизация отходов</h3>
|
||
<p>Выполняем полный цикл работ по демонтажу магистральных и промысловых трубопроводов любого типа и диаметра, а также утилизацию отходов.</p>
|
||
<ul class="service-list">
|
||
<li>Нефтепроводы, газопроводы, водоводы — все типы магистральных и промысловых сетей</li>
|
||
<li>Полный цикл: от вскрытия и вырезки дефектных участков до вывоза и сдачи металлолома</li>
|
||
<li>Капитальный ремонт: замена участков, восстановление изоляции, укладка на проектную отметку</li>
|
||
<li>Работа с трубопроводами любого диаметра в любых климатических условиях</li>
|
||
</ul>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24"><path d="M14 6l-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22L14 6z"/></svg></div>
|
||
<h3>Техническая рекультивация земель</h3>
|
||
<p>Восстановление нарушенных земель после проведения строительных и ремонтных работ.</p>
|
||
<ul class="service-list">
|
||
<li>Засыпка траншей, планировка, восстановление плодородного слоя</li>
|
||
<li>Работа с нефтезагрязнёнными, засоленными землями</li>
|
||
<li>Сдача по актам под контролем экологов</li>
|
||
</ul>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24"><path d="M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33a2.5 2.5 0 002.5 2.5c.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5a2.5 2.5 0 005 0V9c0-.69-.28-1.32-.73-1.77z"/></svg></div>
|
||
<h3>Строительство вдольтрассовых проездов</h3>
|
||
<p>Устройство временных и постоянных дорог вдоль трубопроводов.</p>
|
||
<ul class="service-list">
|
||
<li>Устройство основания из щебня</li>
|
||
<li>Укладка лежневых настилов</li>
|
||
<li>Отсыпка песчано-гравийной смесью</li>
|
||
</ul>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg></div>
|
||
<h3>Расчистка территории от мелколесья и ДКР</h3>
|
||
<p>Подготовка полосы отвода: расчистка от древесно-кустарниковой растительности.</p>
|
||
<ul class="service-list">
|
||
<li>Валка, корчёвка, дробление пней</li>
|
||
<li>Планировка полосы отвода</li>
|
||
<li>Мульчеры и кусторезы на гусеничном ходу</li>
|
||
</ul>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-9 14H4v-3h7v3zm0-5H4V8h7v3zm9 5h-7v-3h7v3zm0-5h-7V8h7v3z"/></svg></div>
|
||
<h3>Устройство лежневого настила</h3>
|
||
<p>Обеспечение проходимости для тяжёлой техники по болотам и слабым грунтам.</p>
|
||
<ul class="service-list">
|
||
<li>Изготовление секций из бревен и бруса</li>
|
||
<li>Укладка перекрытий на слабых грунтах</li>
|
||
<li>Обеспечение проходимости для тяжёлой гусеничной техники</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROCESS -->
|
||
<section class="section section-alt" id="process">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Этапы <span>работы</span></h2>
|
||
<p class="section-subtitle">Прозрачный и отлаженный процесс от первого обращения до сдачи объекта. Каждый этап контролируется инженерами компании.</p>
|
||
</div>
|
||
<div class="process-timeline">
|
||
<div class="process-step reveal">
|
||
<div class="process-number">1</div>
|
||
<div class="process-content">
|
||
<h3>Заявка</h3>
|
||
<p>Вы оставляете заявку на сайте, по электронной почте или звоните нам. Наши специалисты оперативно свяжутся с вами для обсуждения деталей проекта, объёма работ и сроков.</p>
|
||
</div>
|
||
</div>
|
||
<div class="process-step reveal">
|
||
<div class="process-number">2</div>
|
||
<div class="process-content">
|
||
<h3>Выезд специалиста и оценка</h3>
|
||
<p>Наш инженер выезжает на объект для проведения осмотра, оценки объёма работ, определения необходимых ресурсов и техники. По результатам составляется техническое задание и подписывается договор.</p>
|
||
</div>
|
||
</div>
|
||
<div class="process-step reveal">
|
||
<div class="process-number">3</div>
|
||
<div class="process-content">
|
||
<h3>Выполнение работ</h3>
|
||
<p>Мобилизуем технику и персонал на объект. Выполняем демонтаж, капитальный ремонт, утилизацию отходов, рекультивацию или строительство проездов в соответствии с проектной документацией. Ежедневные отчёты о ходе работ.</p>
|
||
</div>
|
||
</div>
|
||
<div class="process-step reveal">
|
||
<div class="process-number">4</div>
|
||
<div class="process-content">
|
||
<h3>Сдача объекта</h3>
|
||
<p>По завершении всех работ подписывается акт выполненных работ, передаётся полный комплект закрывающей документации. При необходимости — сопровождение сдачи объекта экспертизе.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- EQUIPMENT — ТОЛЬКО 5 КАТЕГОРИЙ -->
|
||
<section class="section section-white" id="equipment">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Наша <span>спецтехника</span></h2>
|
||
<p class="section-subtitle">Собственный парк из более чем 80 единиц современной спецтехники ведущих мировых производителей. Возраст всей техники — не старше 5 лет.</p>
|
||
</div>
|
||
<div class="equipment-grid">
|
||
|
||
<!-- Автокран КАМАЗ КС-55717К-3 -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/ks-45721.webp" alt="Автокран КАМАЗ КС-55717К-3">
|
||
<div class="equip-overlay"><span class="brand">КАМАЗ</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Автокран КАМАЗ КС-55717К-3</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">10 единиц</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Грузоподъёмность</span><span class="equipment-spec-value">25 тонн</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Вылет стрелы</span><span class="equipment-spec-value">до 28 м</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Шасси</span><span class="equipment-spec-value">Полноприводное 6×6</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Автокран Zoomlion ZTC300 -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/ivanovets-ks5571.webp" alt="Автокран Zoomlion ZTC300">
|
||
<div class="equip-overlay"><span class="brand">Zoomlion</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Автокран Zoomlion ZTC300</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">2 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Грузоподъёмность</span><span class="equipment-spec-value">30 тонн</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Вылет стрелы</span><span class="equipment-spec-value">до 32 м</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Стрела</span><span class="equipment-spec-value">Телескопическая</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Экскаватор Komatsu PC210-10M0 -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/komatsu-pc400.webp" alt="Экскаватор Komatsu PC210-10M0">
|
||
<div class="equip-overlay"><span class="brand">Komatsu</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Экскаватор гусеничный Komatsu PC210-10M0</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">20 единиц</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Масса</span><span class="equipment-spec-value">21 тонна</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Объём ковша</span><span class="equipment-spec-value">1.0–1.2 м³</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Глубина копания</span><span class="equipment-spec-value">до 6.5 м</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Экскаватор Zoomlion ZE215E -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/hitachi-zx350.webp" alt="Экскаватор Zoomlion ZE215E">
|
||
<div class="equip-overlay"><span class="brand">Zoomlion</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Экскаватор гусеничный Zoomlion ZE215E</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">2 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Масса</span><span class="equipment-spec-value">21.5 тонны</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Объём ковша</span><span class="equipment-spec-value">1.1 м³</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Аналог</span><span class="equipment-spec-value">Komatsu PC210</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Погрузчик SDLG LG933L -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/john-deere.webp" alt="Погрузчик SDLG LG933L">
|
||
<div class="equip-overlay"><span class="brand">SDLG</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Погрузчик колёсный SDLG LG933L</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">2 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Грузоподъёмность</span><span class="equipment-spec-value">3 тонны</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Объём ковша</span><span class="equipment-spec-value">1.7 м³</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Тип</span><span class="equipment-spec-value">Колёсный</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Соболь 4×4 -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/hero-bg.webp" alt="Соболь 4×4">
|
||
<div class="equip-overlay"><span class="brand">Соболь</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Соболь 4×4 грузо-пассажирский</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">13 единиц</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Грузоподъёмность</span><span class="equipment-spec-value">до 1 т</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Привод</span><span class="equipment-spec-value">Полный 4×4</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Назначение</span><span class="equipment-spec-value">Доставка персонала и запчастей</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ломовоз с КМУ -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/howo-sitrak.webp" alt="Ломовоз с КМУ">
|
||
<div class="equip-overlay"><span class="brand">Ломовоз</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Ломовоз с КМУ (кран-манипулятор)</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">3 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Грузоподъёмность КМУ</span><span class="equipment-spec-value">до 8 т</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Объём платформы</span><span class="equipment-spec-value">до 20 м³</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Назначение</span><span class="equipment-spec-value">Вывоз металлолома</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Седельный тягач Камаз 53504-50 -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/kamaz-6520.webp" alt="Седельный тягач Камаз 53504-50">
|
||
<div class="equip-overlay"><span class="brand">КамАЗ</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Седельный тягач Камаз 53504-50</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">6 единиц</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Тяговый класс</span><span class="equipment-spec-value">до 50 т</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Привод</span><span class="equipment-spec-value">Полный привод</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Назначение</span><span class="equipment-spec-value">Перевозка негабарита и тралов</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Экскаватор-амфибия -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/caterpillar-336.webp" alt="Экскаватор-амфибия">
|
||
<div class="equip-overlay"><span class="brand">Амфибия</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Экскаватор-амфибия на понтонной платформе</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">4 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Тип</span><span class="equipment-spec-value">Гусеничный, плавающий</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Работает</span><span class="equipment-spec-value">На болотах и водных преградах</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Особенность</span><span class="equipment-spec-value">Там, где не видно дна</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- УАЗ Пикап -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/belarus-mtz1523.webp" alt="УАЗ Пикап">
|
||
<div class="equip-overlay"><span class="brand">УАЗ</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>УАЗ Пикап (полный привод)</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">Несколько единиц</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Привод</span><span class="equipment-spec-value">Полный привод</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Назначение</span><span class="equipment-spec-value">Доставка запчастей на месторождения</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Тралы тяжеловозы -->
|
||
<div class="equipment-card reveal">
|
||
<div class="equipment-card-image">
|
||
<img src="./img/tral-1.webp" alt="Тралы тяжеловозы">
|
||
<div class="equip-overlay"><span class="brand">Тралы</span></div>
|
||
</div>
|
||
<div class="equipment-card-body">
|
||
<h3>Тралы тяжеловозы для доставки спецтехники</h3>
|
||
<div class="equipment-age-badge">Не старше 5 лет</div>
|
||
<div class="equipment-qty">3 единицы</div>
|
||
<div class="equipment-specs">
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Тяговый класс</span><span class="equipment-spec-value">до 50 т</span></div>
|
||
<div class="equipment-spec"><span class="equipment-spec-label">Назначение</span><span class="equipment-spec-value">Доставка спецтехники на объекты</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GEOGRAPHY -->
|
||
<section class="section section-alt" id="geography">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">География <span>присутствия</span></h2>
|
||
<p class="section-subtitle">Работаем во всех федеральных округах Российской Федерации. Особые условия для труднодоступных районов Крайнего Севера и заболоченных территорий.</p>
|
||
</div>
|
||
<div class="geo-content">
|
||
<div class="reveal-left">
|
||
<div class="geo-regions">
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>УрФО</span></div>
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>СФО</span></div>
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>ПФО</span></div>
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>СЗФО</span></div>
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>ДФО</span></div>
|
||
<div class="geo-region"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg><span>ЮФО</span></div>
|
||
</div>
|
||
<div class="geo-hard">
|
||
<h4>🔧 Труднодоступные районы</h4>
|
||
<p>Мы располагаем специализированной техникой для работы в болотах ХМАО-Югры, ЯНАО, на севере Красноярского края, в Иркутской области. Гусеничная техника и лежневые настилы обеспечивают проходимость даже в самых сложных условиях.</p>
|
||
</div>
|
||
</div>
|
||
<div class="reveal-right">
|
||
<div class="geo-map">
|
||
<img src="./img/geo.webp" alt="География присутствия СТС-Авто">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LICENSES -->
|
||
<section class="section section-white" id="licenses">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Лицензии и <span>разрешения</span></h2>
|
||
<p class="section-subtitle">Все необходимые допуски и сертификаты для выполнения работ на опасных производственных объектах. Полная прозрачность и соответствие требованиям законодательства РФ.</p>
|
||
</div>
|
||
<div class="licenses-grid">
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-5-5 1.41-1.41L10 14.17l7.59-7.59L18 9l-8 8z"/></svg></div>
|
||
<div><h4>СРО — допуск к работам на опасных объектах</h4><p>Свидетельство о допуске к работам на опасных производственных объектах нефтегазового комплекса.</p></div>
|
||
</div>
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-5-5 1.41-1.41L10 14.17l7.59-7.59L18 9l-8 8z"/></svg></div>
|
||
<div><h4>Членство в НОСТРОЙ</h4><p>Действующее членство в Национальном объединении строителей — допуск к строительным работам.</p></div>
|
||
</div>
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z"/></svg></div>
|
||
<div><h4>Сертификат ISO 9001 (качество)</h4><p>Международный стандарт системы менеджмента качества.</p></div>
|
||
</div>
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||
<div><h4>Сертификат OHSAS 18001 (охрана труда)</h4><p>Система менеджмента охраны труда и промышленной безопасности.</p></div>
|
||
</div>
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></div>
|
||
<div><h4>Договор ДМС для сотрудников</h4><p>Добровольное медицинское страхование всех сотрудников.</p></div>
|
||
</div>
|
||
<div class="license-card reveal">
|
||
<div class="license-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 20V4h5v7h7v9H6z"/></svg></div>
|
||
<div><h4>Лицензия на заготовку и переработку лома</h4><p>Лицензия на заготовку, хранение и переработку лома черных металлов.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="license-gallery reveal">
|
||
<div class="license-gallery-item" data-src="./img/license-otxody.webp" data-title="Лицензия на отходы I–IV класса опасности" data-desc="Лицензия № 066№ 00783 от 13 сентября 2018 г. Деятельность по сбору, транспортированию, обработке, утилизации, обезвреживанию, размещению отходов I–IV класса опасности.">
|
||
<div class="license-gallery-thumb">
|
||
<img src="./img/license-otxody.webp" alt="Лицензия на отходы I–IV класса опасности">
|
||
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
|
||
</div>
|
||
<div class="license-gallery-body">
|
||
<h4>Лицензия на отходы I–IV класса опасности</h4>
|
||
<p>№ (66) -6527 - СТО/П от 21 мая 2019 г.</p>
|
||
</div>
|
||
</div>
|
||
<div class="license-gallery-item" data-src="./img/license-lom.webp" data-title="Лицензия на лом черных и цветных металлов" data-desc="Лицензия № ЛМ 000092 от 31 октября 2018 г. Заготовка, хранение, переработка и реализация лома черных и цветных металлов.">
|
||
<div class="license-gallery-thumb">
|
||
<img src="./img/license-lom.webp" alt="Лицензия на лом черных и цветных металлов">
|
||
<div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
|
||
</div>
|
||
<div class="license-gallery-body">
|
||
<h4>Лицензия на лом черных и цветных металлов</h4>
|
||
<p>№ ЛМ 000092 от 31 октября 2018 г.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LIGHTBOX -->
|
||
<div class="lightbox-overlay" id="lightbox">
|
||
<div class="lightbox-content">
|
||
<img id="lightboxImg" src="" alt="">
|
||
<div class="lightbox-info">
|
||
<h4 id="lightboxTitle"></h4>
|
||
<p id="lightboxDesc"></p>
|
||
</div>
|
||
<button class="lightbox-close" id="lightboxClose" aria-label="Закрыть">
|
||
<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTACTS -->
|
||
<section class="section section-alt" id="contacts">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Свяжитесь <span>с нами</span></h2>
|
||
<p class="section-subtitle">Оставьте заявку или позвоните — мы оперативно ответим на ваши вопросы и рассчитаем стоимость работ.</p>
|
||
</div>
|
||
<div class="contacts-grid">
|
||
<div class="reveal-left">
|
||
<div class="contact-info-list">
|
||
<div class="contact-info-item">
|
||
<div class="contact-info-icon"><svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z"/></svg></div>
|
||
<div><h4>Телефон</h4><a href="tel:88005552931">8 (800) 555-29-31</a><br><a href="tel:83432372566">8 (343) 237-25-66</a></div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="contact-info-icon"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></div>
|
||
<div><h4>Email</h4><a href="mailto:sts_zakaz@mail.ru">sts_zakaz@mail.ru</a></div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="contact-info-icon"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg></div>
|
||
<div><h4>Адрес</h4><p>г. Екатеринбург, ул. Московская, 11, оф. 702</p></div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="contact-info-icon"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg></div>
|
||
<div><h4>Режим работы</h4><p>Пн–Пт: 9:00 – 18:00<br>Сб: 10:00 – 15:00</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-map">
|
||
<img src="./img/secret.webp" alt="Контакты СТС-Авто">
|
||
</div>
|
||
</div>
|
||
<div class="reveal-right">
|
||
<div class="contact-form" id="contactForm">
|
||
<h3>Оставить заявку</h3>
|
||
<p class="form-subtitle">Заполните форму и мы свяжемся с вами в ближайшее время</p>
|
||
<form id="feedbackForm" onsubmit="return handleFormSubmit(event)">
|
||
<div class="form-group">
|
||
<label for="name">Ваше имя *</label>
|
||
<input type="text" id="name" name="name" placeholder="Иван Иванов" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Телефон *</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Сообщение</label>
|
||
<textarea id="message" name="message" placeholder="Опишите ваш запрос..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">Отправить заявку</button>
|
||
<p class="form-note">Нажимая кнопку, вы соглашаетесь на обработку персональных данных</p>
|
||
</form>
|
||
<div class="form-success" id="formSuccess">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<h4>Заявка отправлена!</h4>
|
||
<p>Мы свяжемся с вами в ближайшее время</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PARTNERS -->
|
||
<section class="section section-white" id="partners">
|
||
<div class="container">
|
||
<div class="section-header center reveal">
|
||
<h2 class="section-title">Наши <span>партнёры</span></h2>
|
||
<p class="section-subtitle">Сотрудничаем с ведущими компаниями нефтегазового сектора.</p>
|
||
</div>
|
||
<div class="partners-scroll reveal">
|
||
<div class="partners-track">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
<img src="./img/partner-1.webp" alt="Партнёр">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<div class="footer-inner">
|
||
<div class="footer-copy">© 2026 ООО «СТС-Авто». Все права защищены.</div>
|
||
<div class="footer-links">
|
||
<a href="#about">О компании</a>
|
||
<a href="#services">Услуги</a>
|
||
<a href="#contacts">Контакты</a>
|
||
<a href="mailto:sts_zakaz@mail.ru">sts_zakaz@mail.ru</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- SCROLL TO TOP -->
|
||
<button class="scroll-top" id="scrollTop" aria-label="Наверх">
|
||
<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
|
||
</button>
|
||
|
||
<script>
|
||
(function() {
|
||
'use strict';
|
||
|
||
var yearsSince2011 = new Date().getFullYear() - 2011;
|
||
document.title = document.title.replace('{years}', yearsSince2011);
|
||
|
||
var metaDesc = document.querySelector('meta[name="description"]');
|
||
if (metaDesc) metaDesc.setAttribute('content', metaDesc.getAttribute('content').replace('{years}', yearsSince2011));
|
||
|
||
var heroSubtitle = document.querySelector('.hero-subtitle');
|
||
if (heroSubtitle) heroSubtitle.textContent = heroSubtitle.textContent.replace('{years}', yearsSince2011);
|
||
|
||
var heroStatNumber = document.querySelector('.hero-stat-number');
|
||
if (heroStatNumber) heroStatNumber.setAttribute('data-target', yearsSince2011);
|
||
|
||
var header = document.getElementById('header');
|
||
var scrollTopBtn = document.getElementById('scrollTop');
|
||
|
||
window.addEventListener('scroll', function() {
|
||
if (window.scrollY > 80) header.classList.add('scrolled');
|
||
else header.classList.remove('scrolled');
|
||
if (window.scrollY > 500) scrollTopBtn.classList.add('visible');
|
||
else scrollTopBtn.classList.remove('visible');
|
||
});
|
||
|
||
scrollTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });
|
||
|
||
var burger = document.getElementById('burger');
|
||
var mobileNav = document.getElementById('mobileNav');
|
||
var mobileOverlay = document.getElementById('mobileOverlay');
|
||
var mobileLinks = document.querySelectorAll('.mobile-link');
|
||
|
||
function toggleMobileNav() {
|
||
burger.classList.toggle('active');
|
||
mobileNav.classList.toggle('open');
|
||
mobileOverlay.classList.toggle('active');
|
||
document.body.style.overflow = mobileNav.classList.contains('open') ? 'hidden' : '';
|
||
}
|
||
|
||
burger.addEventListener('click', toggleMobileNav);
|
||
mobileOverlay.addEventListener('click', toggleMobileNav);
|
||
mobileLinks.forEach(function(link) {
|
||
link.addEventListener('click', function() { if (mobileNav.classList.contains('open')) toggleMobileNav(); });
|
||
});
|
||
|
||
var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
|
||
function checkReveal() {
|
||
var wh = window.innerHeight;
|
||
revealEls.forEach(function(el) { if (el.getBoundingClientRect().top < wh - 100) el.classList.add('visible'); });
|
||
}
|
||
window.addEventListener('scroll', checkReveal);
|
||
window.addEventListener('load', checkReveal);
|
||
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
|
||
a.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
var target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
var pos = target.getBoundingClientRect().top + window.pageYOffset - header.offsetHeight;
|
||
window.scrollTo({ top: pos, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
window.handleFormSubmit = function(e) {
|
||
e.preventDefault();
|
||
var name = document.getElementById('name').value.trim();
|
||
var phone = document.getElementById('phone').value.trim();
|
||
var message = (document.getElementById('message') || {}).value || '';
|
||
if (!name || !phone) return false;
|
||
document.getElementById('feedbackForm').style.display = 'none';
|
||
document.getElementById('formSuccess').classList.add('show');
|
||
fetch('/api/leads', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: name, phone: phone, message: message.trim() })
|
||
}).then(function(r) { return r.json(); }).then(function(data) {
|
||
if (data.error) console.error(data.error);
|
||
}).catch(function(err) { console.error('Ошибка отправки:', err); });
|
||
setTimeout(function() {
|
||
document.getElementById('feedbackForm').style.display = '';
|
||
document.getElementById('formSuccess').classList.remove('show');
|
||
document.getElementById('name').value = '';
|
||
document.getElementById('phone').value = '';
|
||
if (document.getElementById('message')) document.getElementById('message').value = '';
|
||
}, 5000);
|
||
return false;
|
||
};
|
||
|
||
var phoneInput = document.getElementById('phone');
|
||
phoneInput.addEventListener('input', function() {
|
||
var val = this.value.replace(/\D/g, '');
|
||
var f = '';
|
||
if (val.length > 0) {
|
||
if (val[0] === '7' || val[0] === '8') {
|
||
f = '+7';
|
||
if (val.length > 1) f += ' (' + val.substring(1, 4);
|
||
if (val.length > 4) f += ') ' + val.substring(4, 7);
|
||
if (val.length > 7) f += '-' + val.substring(7, 9);
|
||
if (val.length > 9) f += '-' + val.substring(9, 11);
|
||
} else {
|
||
f = '+7 (' + val.substring(0, 3);
|
||
if (val.length > 3) f += ') ' + val.substring(3, 6);
|
||
if (val.length > 6) f += '-' + val.substring(6, 8);
|
||
if (val.length > 8) f += '-' + val.substring(8, 10);
|
||
}
|
||
}
|
||
this.value = f;
|
||
});
|
||
|
||
var countersDone = false;
|
||
function animateCounters() {
|
||
if (countersDone) return;
|
||
var stats = document.querySelector('.hero-stats');
|
||
if (!stats) return;
|
||
if (stats.getBoundingClientRect().top < window.innerHeight) {
|
||
countersDone = true;
|
||
document.querySelectorAll('.hero-stat-number').forEach(function(counter) {
|
||
var target = parseInt(counter.getAttribute('data-target'));
|
||
if (isNaN(target)) return;
|
||
var current = 0;
|
||
var inc = Math.ceil(target / 40);
|
||
var stepTime = 1500 / (target / inc);
|
||
var timer = setInterval(function() {
|
||
current += inc;
|
||
if (current >= target) { current = target; clearInterval(timer); }
|
||
counter.textContent = current + '+';
|
||
}, stepTime);
|
||
});
|
||
}
|
||
}
|
||
window.addEventListener('scroll', animateCounters);
|
||
window.addEventListener('load', animateCounters);
|
||
|
||
var lightbox = document.getElementById('lightbox');
|
||
var lightboxImg = document.getElementById('lightboxImg');
|
||
var lightboxTitle = document.getElementById('lightboxTitle');
|
||
var lightboxDesc = document.getElementById('lightboxDesc');
|
||
var lightboxClose = document.getElementById('lightboxClose');
|
||
|
||
document.querySelectorAll('.license-gallery-item').forEach(function(item) {
|
||
item.addEventListener('click', function() {
|
||
var src = item.getAttribute('data-src');
|
||
var title = item.getAttribute('data-title');
|
||
var desc = item.getAttribute('data-desc');
|
||
lightboxImg.src = src;
|
||
lightboxImg.alt = title;
|
||
lightboxTitle.textContent = title;
|
||
lightboxDesc.textContent = desc;
|
||
lightbox.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
});
|
||
});
|
||
|
||
function closeLightbox() {
|
||
lightbox.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
setTimeout(function() { lightboxImg.src = ''; }, 300);
|
||
}
|
||
|
||
lightboxClose.addEventListener('click', closeLightbox);
|
||
lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); });
|
||
document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && lightbox.classList.contains('open')) closeLightbox(); });
|
||
|
||
// ===== LEAFLET MAP =====
|
||
var mapGeoEl = document.getElementById('mapGeo');
|
||
if (mapGeoEl) {
|
||
var mapGeo = L.map('mapGeo').setView([56.8389, 60.6122], 10);
|
||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
}).addTo(mapGeo);
|
||
}
|
||
|
||
var mapContactEl = document.getElementById('mapContact');
|
||
if (mapContactEl) {
|
||
var mapContact = L.map('mapContact').setView([56.8369, 60.6036], 16);
|
||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
}).addTo(mapContact);
|
||
L.marker([56.8369, 60.6036]).addTo(mapContact)
|
||
.bindPopup('<b>СТС-Авто</b><br>г. Екатеринбург, ул. Московская, 11, оф. 702');
|
||
}
|
||
})();
|
||
</script>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
</body>
|
||
</html>
|
||
|