1349 lines
72 KiB
HTML
1349 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>Демонтаж нефтегазопроводов, утилизация отходов, рекультивация земель — СТС-Авто</title>
|
||
<meta name="description" content="Более 15 лет опыта в демонтаже трубопроводов, утилизации промышленных отходов и рекультивации земель по всей России. Работаем с объектами любого масштаба.">
|
||
<link rel="canonical" href="https://sts-avto.com/">
|
||
<meta property="og:title" content="Демонтаж и утилизация — СТС-Авто">
|
||
<meta property="og:description" content="Профессиональный демонтаж нефтегазопроводов и рекультивация земель.">
|
||
<meta property="og:image" content="https://sts-avto.com/img/og-image.webp">
|
||
<meta property="og:url" content="https://sts-avto.com/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="ru_RU">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Демонтаж и утилизация — СТС-Авто">
|
||
<meta name="twitter:description" content="Профессиональный демонтаж нефтегазопроводов и рекультивация земель.">
|
||
<meta name="twitter:image" content="https://sts-avto.com/img/og-image.webp">
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "СТС-Авто",
|
||
"url": "https://sts-avto.com/",
|
||
"logo": "https://sts-avto.com/img/logo.webp",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"addressLocality": "Екатеринбург",
|
||
"streetAddress": "ул. Московская, 11, оф. 702"
|
||
},
|
||
"telephone": "+7-800-555-29-31",
|
||
"areaServed": {
|
||
"@type": "Country",
|
||
"name": "Россия"
|
||
}
|
||
}
|
||
</script>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{ "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://sts-avto.com/" },
|
||
{ "@type": "ListItem", "position": 2, "name": "Услуги", "item": "https://sts-avto.com/#services" }
|
||
]
|
||
}
|
||
</script>
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" media="print" onload="this.media='all'">
|
||
<noscript><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"></noscript>
|
||
<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" media="print" onload="this.media='all'">
|
||
<noscript><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"></noscript>
|
||
<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 clamp(12px, 2vw, 20px); }
|
||
|
||
/* ========== HEADER — CONSTRUCTION EQUIPMENT STYLE ========== */
|
||
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.3s; padding-top: env(safe-area-inset-top); }
|
||
.header.scrolled { background: rgba(26,42,58,0.97); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
|
||
|
||
|
||
.header-main {
|
||
background: linear-gradient(180deg, #2c3e50 0%, #1a2a3a 100%);
|
||
border-bottom: 3px solid var(--orange);
|
||
position: relative;
|
||
}
|
||
|
||
|
||
|
||
.header-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 clamp(16px, 3vw, 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: -8px; margin-bottom: -8px; }
|
||
.logo img { max-height: 200px; max-width: 100%; width: auto; height: auto; }
|
||
@media (max-width: 768px) { .logo img { max-height: 90px; } }
|
||
@media (max-width: 480px) { .logo img { max-height: 65px; } }
|
||
|
||
.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 16px); position: relative; z-index: 2; }
|
||
|
||
.nav a {
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(10px, 1.2vw, 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: clamp(6px, 1vw, 8px);
|
||
font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(13px, 1.5vw, 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: 12px 8px; min-height: 44px; position: relative; z-index: 2; touch-action: manipulation;
|
||
}
|
||
.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: min(320px, 85vw); height: 100vh; height: 100dvh;
|
||
background: linear-gradient(180deg, #2c3e50, #1a2a3a);
|
||
z-index: 1001; padding: clamp(60px, 10vw, 80px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px); padding-top: calc(clamp(60px, 10vw, 80px) + env(safe-area-inset-top));
|
||
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: clamp(10px, 1.5vw, 14px) 0;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(13px, 1.5vw, 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; min-height: 100dvh; display: flex; align-items: center;
|
||
position: relative; overflow: hidden; padding-top: clamp(80px, 12vw, 120px);
|
||
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: clamp(320px, 90vw, 820px); padding: clamp(28px, 6vw, 50px) 0; }
|
||
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: clamp(5px, 1vw, 8px);
|
||
background: rgba(230,126,34,0.2); border: 1px solid rgba(230,126,34,0.5);
|
||
border-radius: 50px; padding: clamp(6px, 1vw, 8px) clamp(14px, 2.5vw, 22px); margin-bottom: clamp(14px, 3vw, 24px);
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(11px, 1.5vw, 13px);
|
||
color: var(--orange-light);
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900;
|
||
margin-bottom: clamp(12px, 2vw, 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: clamp(18px, 4vw, 32px); line-height: 1.7; overflow-wrap: break-word; }
|
||
|
||
.hero-contacts { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.5vw, 22px); margin-bottom: clamp(20px, 4vw, 36px); }
|
||
@media (max-width: 768px) { .hero-contacts { flex-direction: column; gap: clamp(8px, 2vw, 12px); } }
|
||
.hero-contact-item { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 10px); color: #ecf0f1; font-size: clamp(13px, 1.5vw, 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: clamp(10px, 1.8vw, 14px); }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: clamp(6px, 1.2vw, 10px);
|
||
padding: clamp(12px, 2vw, 16px) clamp(20px, 4vw, 34px); border-radius: 4px;
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700;
|
||
font-size: clamp(12px, 1.5vw, 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: clamp(18px, 5vw, 40px); margin-top: clamp(24px, 5vw, 45px);
|
||
padding-top: clamp(16px, 3vw, 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: clamp(11px, 1.5vw, 13px); color: #95a5a6; margin-top: clamp(4px, 0.8vw, 6px); }
|
||
|
||
/* ========== SECTIONS ========== */
|
||
.section { padding: clamp(55px, 10vw, 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: clamp(10px, 1.5vw, 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: clamp(300px, 85vw, 700px); margin-bottom: clamp(28px, 5vw, 45px); line-height: 1.7; }
|
||
.section-header { margin-bottom: clamp(28px, 5vw, 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: clamp(28px, 6vw, 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: clamp(250px, 50vw, 450px); object-fit: cover; }
|
||
.about-text h3 { font-size: 1.4rem; margin-bottom: clamp(12px, 2vw, 18px); color: var(--orange-dark); }
|
||
.about-text p { color: var(--text-gray); margin-bottom: clamp(10px, 1.5vw, 14px); line-height: 1.8; font-size: 1.02rem; }
|
||
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.8vw, 16px); margin-top: clamp(16px, 3vw, 28px); }
|
||
.about-feature {
|
||
display: flex; align-items: flex-start; gap: clamp(8px, 1.4vw, 12px); padding: clamp(10px, 1.8vw, 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: clamp(11px, 1.4vw, 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: clamp(11px, 1.4vw, 13px); }
|
||
|
||
/* ========== SERVICES ========== */
|
||
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 22px); }
|
||
.service-card {
|
||
background: var(--bg-white); border: 1px solid var(--border);
|
||
border-radius: 12px; padding: clamp(20px, 3.5vw, 32px) clamp(16px, 2.8vw, 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: clamp(12px, 2vw, 18px); }
|
||
.service-icon svg { width: 26px; height: 26px; fill: var(--orange); }
|
||
.service-card h3 { font-size: 1.15rem; margin-bottom: clamp(8px, 1.4vw, 12px); color: var(--text-dark); }
|
||
.service-card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.7; margin-bottom: clamp(6px, 1.2vw, 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: clamp(3px, 0.6vw, 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: clamp(16px, 3vw, 28px); margin-bottom: clamp(20px, 4vw, 36px); position: relative; }
|
||
.process-step:last-child { margin-bottom: 0; }
|
||
.process-number {
|
||
width: clamp(50px, 8vw, 78px); height: clamp(50px, 8vw, 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: clamp(16px, 2.8vw, 26px) clamp(18px, 3vw, 30px); flex: 1;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||
}
|
||
.process-content h3 { font-size: 1.15rem; margin-bottom: clamp(5px, 1vw, 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(280px, 1fr)); gap: clamp(14px, 2.5vw, 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: clamp(160px, 25vw, 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:hover .equip-nav { opacity: 1; }
|
||
.equip-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color:#fff; border:none; cursor:pointer; padding:8px 12px; border-radius:3px; font-size:18px; z-index:3; opacity:0; transition:opacity .3s; }
|
||
.equip-nav.prev { left:8px; }
|
||
.equip-nav.next { right:8px; }
|
||
.equip-dots { position: absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
|
||
.equip-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:all .3s; }
|
||
.equip-dot.active { background:var(--orange); width:20px; border-radius:4px; }
|
||
.equip-fullview { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:10001; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:all .3s; }
|
||
.equip-fullview.open { opacity:1; visibility:visible; }
|
||
.equip-fullview img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; }
|
||
.equip-fullview-close { position:absolute; top:20px; right:20px; width:40px; height:40px; background:var(--orange); border-radius:50%; border:none; color:#fff; font-size:20px; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; }
|
||
.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: clamp(6px, 1.2vw, 10px) clamp(10px, 1.8vw, 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: clamp(10px, 1.2vw, 12px); text-transform: uppercase; letter-spacing: 1.5px;
|
||
}
|
||
.equipment-card-body { padding: clamp(14px, 2.5vw, 22px); }
|
||
.equipment-card-body h3 { font-size: 1.05rem; margin-bottom: clamp(10px, 1.5vw, 14px); color: var(--text-dark); }
|
||
.equipment-qty {
|
||
font-size: clamp(12px, 1.5vw, 14px); font-weight: 700; color: var(--orange);
|
||
margin-bottom: clamp(5px, 1vw, 8px); font-family: 'Montserrat', sans-serif;
|
||
}
|
||
.equipment-specs { display: flex; flex-direction: column; gap: clamp(4px, 0.8vw, 6px); }
|
||
.equipment-spec {
|
||
display: flex; justify-content: space-between; padding: clamp(4px, 0.8vw, 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: clamp(24px, 5vw, 45px); align-items: center; }
|
||
.geo-regions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 12px); }
|
||
.geo-region {
|
||
display: flex; align-items: center; gap: clamp(6px, 1.2vw, 10px); padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.8vw, 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: clamp(16px, 3vw, 28px); padding: clamp(14px, 2.5vw, 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: clamp(6px, 1.2vw, 10px); }
|
||
.geo-hard p { color: var(--text-gray); line-height: 1.7; font-size: 0.95rem; }
|
||
.geo-map {
|
||
border-radius: 12px; overflow: hidden; height: clamp(240px, 45vw, 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(280px, 1fr)); gap: clamp(12px, 2vw, 18px); }
|
||
.license-card {
|
||
display: flex; align-items: flex-start; gap: clamp(10px, 1.8vw, 16px); padding: clamp(14px, 2.5vw, 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: clamp(3px, 0.6vw, 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(260px, 1fr)); gap: clamp(14px, 2.5vw, 24px); margin-top: clamp(12px, 2vw, 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: clamp(140px, 22vw, 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: clamp(34px, 5vw, 44px); height: clamp(34px, 5vw, 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: clamp(10px, 1.8vw, 16px) clamp(12px, 2vw, 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: clamp(12px, 2vw, 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: clamp(8px, 1.5vw, 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: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 18px); margin-top: clamp(6px, 1.2vw, 10px); max-width: min(700px, 90vw);
|
||
}
|
||
.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: clamp(24px, 5vw, 45px); }
|
||
.contact-info-list { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 18px); margin-bottom: clamp(16px, 3vw, 28px); }
|
||
.contact-info-item { display: flex; align-items: flex-start; gap: clamp(8px, 1.5vw, 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: clamp(160px, 25vw, 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: clamp(18px, 3.5vw, 34px); box-shadow: 0 8px 25px rgba(0,0,0,0.06);
|
||
}
|
||
.contact-form h3 { font-size: 1.3rem; margin-bottom: clamp(4px, 0.8vw, 6px); color: var(--text-dark); }
|
||
.contact-form .form-subtitle { color: var(--text-gray); font-size: 0.93rem; margin-bottom: clamp(14px, 2.5vw, 22px); }
|
||
.form-group { margin-bottom: clamp(10px, 1.8vw, 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: clamp(4px, 0.8vw, 7px);
|
||
}
|
||
.form-group input, .form-group textarea {
|
||
width: 100%; padding: clamp(10px, 1.5vw, 13px) clamp(12px, 1.8vw, 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; }
|
||
|
||
.cookie-banner {
|
||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
|
||
background: rgba(26,42,58,0.97); border-top: 2px solid var(--orange);
|
||
padding: clamp(8px, 2vw, 14px) clamp(12px, 3vw, 20px); display: flex; align-items: center; justify-content: center;
|
||
gap: clamp(10px, 2vw, 18px); flex-wrap: wrap; padding-bottom: calc(clamp(8px, 2vw, 14px) + env(safe-area-inset-bottom));
|
||
visibility: visible; opacity: 1;
|
||
}
|
||
.cookie-banner p { color: #bdc3c7; font-size: clamp(0.78rem, 1.4vw, 0.88rem); line-height: 1.5; margin: 0; max-width: 100%; }
|
||
.cookie-banner a { color: var(--orange-light); text-decoration: underline; }
|
||
.cookie-banner a:hover { color: var(--orange); }
|
||
.cookie-banner-btn {
|
||
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
|
||
color: #fff; border: none; border-radius: 4px; padding: clamp(8px, 1.5vw, 10px) clamp(16px, 3vw, 24px);
|
||
font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(12px, 1.8vw, 13px);
|
||
text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
|
||
white-space: nowrap; transition: all 0.3s; touch-action: manipulation;
|
||
}
|
||
.cookie-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(230,126,34,0.3); }
|
||
@media (max-width: 480px) { .cookie-banner { flex-direction: column; text-align: center; padding: clamp(10px, 4vw, 14px) clamp(12px, 4vw, 16px) calc(clamp(10px, 4vw, 14px) + env(safe-area-inset-bottom)); } }
|
||
.form-note { font-size: 0.78rem; color: var(--text-light); margin-top: clamp(6px, 1.2vw, 10px); }
|
||
.form-consent-label { display: flex; align-items: flex-start; gap: clamp(6px, 1.2vw, 10px); font-size: 0.83rem; color: var(--text-gray); cursor: pointer; line-height: 1.5; }
|
||
.form-consent-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; accent-color: var(--orange); cursor: pointer; }
|
||
.form-consent-label a { color: var(--orange); text-decoration: underline; }
|
||
.form-consent-label a:hover { color: var(--orange-dark); }
|
||
.contact-form .btn { width: 100%; justify-content: center; }
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer { background: #0a0a0a; }
|
||
.footer-content { padding: clamp(20px, 3.5vw, 30px) clamp(12px, 2vw, 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: clamp(12px, 2.5vw, 20px); }
|
||
.footer-copy { color: rgba(255,255,255,0.5); font-size: 0.88rem; }
|
||
.footer-links { display: flex; gap: clamp(12px, 2.5vw, 22px); flex-wrap: wrap; justify-content: center; }
|
||
.footer-links a { color: rgba(255,255,255,0.5); font-size: clamp(0.78rem, 1vw, 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: calc(clamp(18px, 3vw, 28px) + env(safe-area-inset-bottom)); right: clamp(18px, 3vw, 28px); width: clamp(40px, 5.5vw, 48px); height: clamp(40px, 5.5vw, 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);
|
||
touch-action: manipulation;
|
||
}
|
||
.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: clamp(24px, 4vw, 40px) clamp(14px, 2vw, 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: clamp(18px, 3vw, 28px); }
|
||
.about-image img { height: clamp(220px, 35vw, 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: clamp(45px, 8vw, 65px) 0; }
|
||
.hero-content { padding: clamp(18px, 3vw, 28px) 0; }
|
||
.hero-stats { gap: clamp(12px, 2vw, 18px); flex-wrap: wrap; }
|
||
.hero-stat-number { font-size: 1.8rem; }
|
||
.hero-contacts { flex-direction: column; gap: clamp(8px, 2vw, 12px); }
|
||
.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: clamp(14px, 2.5vw, 20px); }
|
||
.process-number { width: clamp(34px, 5vw, 40px); height: clamp(34px, 5vw, 40px); font-size: 1rem; }
|
||
.process-step { gap: clamp(10px, 1.8vw, 14px); }
|
||
.process-content { padding: clamp(12px, 2vw, 18px); }
|
||
.contact-form { padding: clamp(14px, 2.5vw, 22px); }
|
||
.footer-inner { flex-direction: column; text-align: center; }
|
||
.partners-track { gap: clamp(18px, 3vw, 30px); animation-duration: 30s; }
|
||
.partners-track img { height: clamp(40px, 8vw, 60px); }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.hero-buttons { flex-direction: column; }
|
||
.btn { width: 100%; justify-content: center; }
|
||
}
|
||
/* ========== SOCIAL ACTIVITY ========== */
|
||
.activity-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: clamp(12px, 2vw, 20px);
|
||
margin-top: clamp(24px, 4.5vw, 40px);
|
||
}
|
||
.activity-card {
|
||
background: var(--bg-white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: clamp(18px, 3vw, 30px) clamp(14px, 2.5vw, 24px);
|
||
transition: all 0.4s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.activity-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 4px; height: 0;
|
||
background: linear-gradient(to bottom, var(--orange), var(--orange-dark));
|
||
transition: height 0.4s;
|
||
border-radius: 0 0 4px 0;
|
||
}
|
||
.activity-card:hover::before { height: 100%; }
|
||
.activity-card:hover {
|
||
transform: translateY(-6px);
|
||
border-color: var(--orange);
|
||
box-shadow: 0 14px 35px rgba(230,126,34,0.12);
|
||
}
|
||
.activity-card-icon {
|
||
width: 56px; height: 56px;
|
||
background: linear-gradient(135deg, rgba(230,126,34,0.12), rgba(230,126,34,0.06));
|
||
border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: clamp(12px, 2vw, 18px);
|
||
transition: all 0.4s;
|
||
}
|
||
.activity-card:hover .activity-card-icon {
|
||
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
|
||
}
|
||
.activity-card:hover .activity-card-icon svg { fill: #fff; }
|
||
.activity-card-icon svg { width: 28px; height: 28px; fill: var(--orange); transition: fill 0.4s; }
|
||
.activity-card h4 {
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-weight: 700; font-size: 1.05rem;
|
||
color: var(--text-dark); margin-bottom: clamp(6px, 1.2vw, 10px);
|
||
}
|
||
.activity-card p {
|
||
color: var(--text-gray);
|
||
font-size: 0.93rem; line-height: 1.7;
|
||
}
|
||
|
||
.activity-gallery {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: clamp(12px, 2vw, 20px);
|
||
margin-top: clamp(30px, 5.5vw, 50px);
|
||
}
|
||
.activity-gallery .license-gallery-item {
|
||
flex: 0 1 min(320px, 85vw);
|
||
max-width: 400px;
|
||
}
|
||
.activity-gallery-title {
|
||
width: 100%; text-align: center;
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-weight: 700; font-size: 1.15rem;
|
||
color: var(--text-dark); margin-bottom: 8px;
|
||
}
|
||
.activity-gallery .license-gallery-item { cursor: pointer; }
|
||
|
||
@media (max-width: 768px) {
|
||
.activity-cards { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.partners-scroll {
|
||
overflow: hidden;
|
||
margin-top: clamp(24px, 4.5vw, 40px);
|
||
}
|
||
.partners-track {
|
||
display: flex;
|
||
gap: clamp(24px, 6vw, 60px);
|
||
animation: partners-scroll 20s linear infinite;
|
||
width: max-content;
|
||
}
|
||
.partners-track:hover { animation-play-state: paused; }
|
||
.partners-track img {
|
||
height: clamp(60px, 12vw, 100px);
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
@keyframes partners-scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="cookie-banner" id="cookieBanner">
|
||
<p>Мы используем файлы cookie. Продолжая использовать сайт, вы соглашаетесь с <a href="/cookies.html">использованием cookie</a> и <a href="/privacy.html">политикой конфиденциальности</a>.</p>
|
||
<button class="cookie-banner-btn" onclick="acceptCookies()">Принять</button>
|
||
</div>
|
||
|
||
<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="#services">Услуги</a>
|
||
<a href="#process">Этапы</a>
|
||
<a href="#equipment">Техника</a>
|
||
<a href="#geography">География</a>
|
||
<a href="#licenses">Лицензии</a>
|
||
<a href="#activity">Деятельность</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
<a href="tel:88005552931" class="header-phone" id="headerPhone">
|
||
<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>
|
||
<span>8(800) 555-29-31</span>
|
||
</a>
|
||
<div class="burger" id="burger"><span></span><span></span><span></span></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="mobile-overlay" id="mobileOverlay"></div>
|
||
<nav class="mobile-nav" id="mobileNav">
|
||
<a href="#about" 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="#activity" class="mobile-link">Деятельность</a>
|
||
<a href="#contacts" class="mobile-link">Контакты</a>
|
||
<a href="tel:88005552931" id="mobilePhone" style="color: var(--orange-light); border: none; margin-top: 20px; font-size: 17px;">8(800) 555-29-31</a>
|
||
</nav>
|
||
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg"><img src="./img/hero-bg.webp" alt="" fetchpriority="high"></div>
|
||
<div class="container"><div class="hero-content" id="heroContent"></div></div>
|
||
</section>
|
||
|
||
<section class="section section-alt" id="about">
|
||
<div class="container" id="aboutContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="services">
|
||
<div class="container" id="servicesContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="schemes">
|
||
<div class="container" id="schemesContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-alt" id="process">
|
||
<div class="container" id="processContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="equipment">
|
||
<div class="container" id="equipmentContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-alt" id="geography">
|
||
<div class="container" id="geographyContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="licenses">
|
||
<div class="container" id="licensesContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="activity">
|
||
<div class="container" id="activityContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-alt" id="contacts">
|
||
<div class="container" id="contactsContainer"></div>
|
||
</section>
|
||
|
||
<section class="section section-white" id="partners">
|
||
<div class="container" id="partnersContainer"></div>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<div class="equip-fullview" id="equipFullview" onclick="closeEquipFullview()">
|
||
<button class="equip-fullview-close" onclick="closeEquipFullview()">×</button>
|
||
<img id="equipFullviewImg" src="" alt="">
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<div class="footer-inner">
|
||
<div class="footer-copy" id="footerCopy"></div>
|
||
<div class="footer-links">
|
||
<a href="#about">О компании</a>
|
||
<a href="#services">Услуги</a>
|
||
<a href="#contacts">Контакты</a>
|
||
<a href="/privacy.html">Политика конфиденциальности</a>
|
||
<a href="/terms.html">Пользовательское соглашение</a>
|
||
<a href="/requisites.html">Реквизиты</a>
|
||
<a href="mailto:sts_zakaz@mail.ru" id="footerEmail">sts_zakaz@mail.ru</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer></script>
|
||
<script>
|
||
(function() {
|
||
'use strict';
|
||
var yearsSince2011 = new Date().getFullYear() - 2011;
|
||
var SITE = null;
|
||
var phoneIcon = '<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>';
|
||
var mailIcon = '<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>';
|
||
var pinIcon = '<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>';
|
||
var starIcon = '<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>';
|
||
var searchZoom = '<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>';
|
||
|
||
function imgSrc(path) {
|
||
if (!path) return './img/hero-bg.webp';
|
||
if (path.startsWith('./')) return path;
|
||
if (path.startsWith('http')) return path;
|
||
if (/^(equipment|partner|license|activity|hero)_images\//.test(path)) return '/data/' + path;
|
||
return './img/' + path;
|
||
}
|
||
|
||
function esc(s) { return String(s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>'); }
|
||
|
||
window._fullviewImages = [];
|
||
window.openEquipFullview = function(imgs, startIdx) {
|
||
window._fullviewImages = imgs;
|
||
var fv = document.getElementById('equipFullview');
|
||
var img = document.getElementById('equipFullviewImg');
|
||
img.src = imgs[Math.max(0, startIdx || 0)];
|
||
fv.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
window.closeEquipFullview = function() {
|
||
var fv = document.getElementById('equipFullview');
|
||
fv.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
setTimeout(function() { document.getElementById('equipFullviewImg').src = ''; }, 300);
|
||
};
|
||
|
||
function renderHero(d) {
|
||
var h = d.hero || {};
|
||
var stats = d.hero_stats || [];
|
||
var contactsHtml = '';
|
||
var phone800 = h.phone_800 || '8 (800) 555-29-31';
|
||
var phoneEkb = h.phone_ekb || '8 (343) 237-25-66';
|
||
var email = h.email || 'sts_zakaz@mail.ru';
|
||
var address = h.address || 'г. Екатеринбург, ул. Московская, 11, оф. 702';
|
||
|
||
document.getElementById('headerPhone').innerHTML = phoneIcon + '<span>' + phone800.split(',').map(function(p){return p.trim()})[0] + '</span>';
|
||
document.getElementById('headerPhone').href = 'tel:' + phone800.replace(/\D/g,'');
|
||
var mph = document.getElementById('mobilePhone');
|
||
mph.textContent = phone800.split(',').map(function(p){return p.trim()})[0];
|
||
mph.href = 'tel:' + phone800.replace(/\D/g,'');
|
||
|
||
if (phone800 && phoneEkb) {
|
||
contactsHtml += '<div class="hero-contact-item">' + phoneIcon + '<div><a href="tel:' + phone800.replace(/\D/g,'') + '">' + phone800 + '</a><br><a href="tel:' + phoneEkb.replace(/\D/g,'') + '">' + phoneEkb + '</a></div></div>';
|
||
}
|
||
contactsHtml += '<div class="hero-contact-item">' + mailIcon + '<a href="mailto:' + email + '">' + email + '</a></div>';
|
||
contactsHtml += '<div class="hero-contact-item">' + pinIcon + '<span>' + address + '</span></div>';
|
||
|
||
var statsHtml = '';
|
||
stats.forEach(function(s) {
|
||
var val = s.is_dynamic == 1 ? yearsSince2011 : s.value;
|
||
statsHtml += '<div class="hero-stat"><div class="hero-stat-number" data-target="' + val + '">0</div><div class="hero-stat-label">' + s.label + '</div></div>';
|
||
});
|
||
|
||
var badgeHtml = h.badge_text ? '<div class="hero-badge">' + starIcon + ' ' + h.badge_text + '</div>' : '';
|
||
var h1text = h.h1_text || 'демонтаж нефтегазопроводов по России, утилизация отходов';
|
||
|
||
document.getElementById('heroContent').innerHTML =
|
||
badgeHtml +
|
||
'<h1>' + h1text.replace('{years}', yearsSince2011) + '</h1>' +
|
||
'<p class="hero-subtitle">' + (h.subtitle || '').replace('{years}', yearsSince2011) + '</p>' +
|
||
'<div class="hero-contacts">' + contactsHtml + '</div>' +
|
||
'<div class="hero-buttons">' +
|
||
'<a href="' + (h.button1_link || '#contacts') + '" class="btn btn-primary">' + (h.button1_text || 'Оставить заявку') + '</a>' +
|
||
'<a href="' + (h.button2_link || '#services') + '" class="btn btn-outline">' + (h.button2_text || 'Наши услуги') + '</a>' +
|
||
'</div>' +
|
||
'<div class="hero-stats">' + statsHtml + '</div>';
|
||
|
||
if (h.hero_bg) {
|
||
document.querySelector('.hero-bg img').src = imgSrc(h.hero_bg);
|
||
}
|
||
}
|
||
|
||
function renderAbout(d) {
|
||
var a = d.about || {};
|
||
var features = d.about_features || [];
|
||
var featsHtml = features.map(function(f) {
|
||
return '<div class="about-feature reveal"><div class="about-feature-icon"><svg viewBox="0 0 24 24">' + (f.svg_icon || '') + '</svg></div><div class="about-feature-text"><strong>' + f.title + '</strong>' + (f.description || '') + '</div></div>';
|
||
}).join('');
|
||
|
||
document.getElementById('aboutContainer').innerHTML =
|
||
'<div class="section-header reveal"><h2 class="section-title">О <span>компании</span></h2><p class="section-subtitle">' + (a.section_subtitle || '') + '</p></div>' +
|
||
'<div class="about-grid">' +
|
||
'<div class="about-image reveal-left"><img src="' + imgSrc(a.about_image) + '" alt="" loading="lazy"></div>' +
|
||
'<div class="about-text reveal-right"><h3>' + (a.main_heading || '') + '</h3>' +
|
||
(a.paragraph_1 ? '<p>' + a.paragraph_1 + '</p>' : '') +
|
||
(a.paragraph_2 ? '<p>' + a.paragraph_2 + '</p>' : '') +
|
||
(a.paragraph_3 ? '<p>' + a.paragraph_3 + '</p>' : '') +
|
||
'<div class="about-features">' + featsHtml + '</div></div></div>';
|
||
}
|
||
|
||
function renderServices(d) {
|
||
var services = d.services || [];
|
||
var st = d.settings || {};
|
||
var cardsHtml = services.map(function(s) {
|
||
var items = [];
|
||
try { items = JSON.parse(s.items || '[]'); } catch(e) {}
|
||
return '<div class="service-card' + (s.is_large == 1 ? ' large' : '') + ' reveal">' +
|
||
'<div class="service-icon"><svg viewBox="0 0 24 24">' + (s.svg_icon || '') + '</svg></div>' +
|
||
'<h3>' + s.title + '</h3><p>' + (s.description || '') + '</p>' +
|
||
(items.length ? '<ul class="service-list">' + items.map(function(i) { return '<li>' + i + '</li>'; }).join('') + '</ul>' : '') +
|
||
'</div>';
|
||
}).join('');
|
||
document.getElementById('servicesContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Наши <span>услуги</span></h2><p class="section-subtitle">' + (st.section_services_subtitle || '') + '</p></div>' +
|
||
'<div class="services-grid">' + cardsHtml + '</div>';
|
||
}
|
||
|
||
function renderSchemes(d) {
|
||
var schemes = d.work_schemes || [];
|
||
var st = d.settings || {};
|
||
var cardsHtml = schemes.map(function(s) {
|
||
var items = [];
|
||
try { items = JSON.parse(s.items || '[]'); } catch(e) {}
|
||
return '<div class="service-card reveal">' +
|
||
'<div class="service-icon"><svg viewBox="0 0 24 24">' + (s.svg_icon || '') + '</svg></div>' +
|
||
'<h3>' + s.title + '</h3><p>' + (s.description || '') + '</p>' +
|
||
(items.length ? '<ul class="service-list">' + items.map(function(i) { return '<li>' + i + '</li>'; }).join('') + '</ul>' : '') +
|
||
'</div>';
|
||
}).join('');
|
||
document.getElementById('schemesContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Гибкие <span>схемы работы</span></h2><p class="section-subtitle">' + (st.section_schemes_subtitle || '') + '</p></div>' +
|
||
'<div class="services-grid">' + cardsHtml + '</div>';
|
||
}
|
||
|
||
function renderProcess(d) {
|
||
var steps = d.process_steps || [];
|
||
var st = d.settings || {};
|
||
var stepsHtml = steps.map(function(s) {
|
||
return '<div class="process-step reveal"><div class="process-number">' + (s.step_number || s.sort_order + 1) + '</div><div class="process-content"><h3>' + s.title + '</h3><p>' + (s.description || '') + '</p></div></div>';
|
||
}).join('');
|
||
document.getElementById('processContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Этапы <span>работы</span></h2><p class="section-subtitle">' + (st.section_process_subtitle || '') + '</p></div>' +
|
||
'<div class="process-timeline">' + stepsHtml + '</div>';
|
||
}
|
||
|
||
function renderEquipment(d) {
|
||
var eq = d.equipment || [];
|
||
var gallery = d.equipment_gallery || [];
|
||
var st = d.settings || {};
|
||
|
||
function getImages(e) {
|
||
var imgs = [];
|
||
if (gallery.length) {
|
||
gallery.filter(function(g) { return g.equipment_id === e.id; }).forEach(function(g) {
|
||
if (g.image_path) imgs.push(g.image_path);
|
||
});
|
||
}
|
||
if (imgs.length === 0 && e.image_path) imgs.push(e.image_path);
|
||
return imgs;
|
||
}
|
||
|
||
window._equipCarousels = window._equipCarousels || {};
|
||
|
||
var cardsHtml = eq.map(function(e, idx) {
|
||
var specs = [];
|
||
try { specs = JSON.parse(e.specs || '[]'); } catch(e2) {}
|
||
var imgs = getImages(e);
|
||
var carouselId = 'ec_' + e.id;
|
||
var dots = imgs.length > 1 ? '<div class="equip-dots">' + imgs.map(function(_, di) { return '<button class="equip-dot' + (di === 0 ? ' active' : '') + '" onclick="event.stopPropagation();equipGoTo(\'' + carouselId + '\',' + di + ',' + e.id + ')"></button>'; }).join('') + '</div>' : '';
|
||
var arrows = imgs.length > 1 ? '<button class="equip-nav prev" onclick="event.stopPropagation();equipPrev(\'' + carouselId + '\',' + e.id + ')">❮</button><button class="equip-nav next" onclick="event.stopPropagation();equipNext(\'' + carouselId + '\',' + e.id + ')">❯</button>' : '';
|
||
var imgHtml = imgs.length > 0
|
||
? '<img src="' + imgSrc(imgs[0]) + '" loading="lazy" alt="' + esc(e.name) + '" style="width:100%;height:100%;object-fit:cover;transition:opacity .5s" onclick="event.stopPropagation();openEquipFullview(' + JSON.stringify(imgs.map(function(x){return imgSrc(x)})) + ', 0)">'
|
||
: '<div style="width:100%;height:100%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;color:var(--text-light)">Нет фото</div>';
|
||
|
||
return '<div class="equipment-card reveal"><div class="equipment-card-image" id="' + carouselId + '">' +
|
||
imgHtml +
|
||
'<div class="equip-overlay"><span class="brand">' + esc(e.brand || '') + '</span></div>' +
|
||
arrows + dots +
|
||
'</div><div class="equipment-card-body"><h3>' + esc(e.name) + '</h3>' +
|
||
(e.qty ? '<div class="equipment-qty">' + esc(e.qty) + '</div>' : '') +
|
||
(specs.length ? '<div class="equipment-specs">' + specs.map(function(sp) { return '<div class="equipment-spec"><span class="equipment-spec-label">' + esc(sp.label) + '</span><span class="equipment-spec-value">' + esc(sp.value) + '</span></div>'; }).join('') + '</div>' : '') +
|
||
'</div></div>';
|
||
}).join('');
|
||
|
||
document.getElementById('equipmentContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Наша <span>спецтехника</span></h2><p class="section-subtitle">' + esc(st.section_equipment_subtitle || '') + '</p></div>' +
|
||
'<div class="equipment-grid">' + cardsHtml + '</div>';
|
||
|
||
eq.forEach(function(e) {
|
||
var imgs = getImages(e);
|
||
if (imgs.length > 1) {
|
||
var cid = 'ec_' + e.id;
|
||
window._equipCarousels[cid] = { imgs: imgs, current: 0, timer: null, eqId: e.id };
|
||
window._equipCarousels[cid].timer = setInterval(function() { equipNext(cid, e.id); }, 10000);
|
||
}
|
||
});
|
||
}
|
||
|
||
window.equipGoTo = function(carouselId, index, eqId) {
|
||
var c = window._equipCarousels[carouselId];
|
||
if (!c) return;
|
||
if (c.timer) { clearInterval(c.timer); c.timer = setInterval(function() { equipNext(carouselId, eqId); }, 10000); }
|
||
c.current = index;
|
||
var el = document.getElementById(carouselId);
|
||
if (!el) return;
|
||
var img = el.querySelector('img');
|
||
if (img) { img.style.opacity = '0.2'; setTimeout(function() { img.src = c.imgs[index]; img.style.opacity = '1'; }, 200); }
|
||
var dots = el.querySelectorAll('.equip-dot');
|
||
dots.forEach(function(d, i) { d.classList.toggle('active', i === index); });
|
||
};
|
||
|
||
window.equipNext = function(carouselId, eqId) {
|
||
var c = window._equipCarousels[carouselId];
|
||
if (!c) return;
|
||
equipGoTo(carouselId, (c.current + 1) % c.imgs.length, eqId);
|
||
};
|
||
|
||
window.equipPrev = function(carouselId, eqId) {
|
||
var c = window._equipCarousels[carouselId];
|
||
if (!c) return;
|
||
equipGoTo(carouselId, (c.current - 1 + c.imgs.length) % c.imgs.length, eqId);
|
||
};
|
||
|
||
function renderGeography(d) {
|
||
var geo = d.geo || {};
|
||
var regions = d.geo_regions || [];
|
||
var st = d.settings || {};
|
||
var regionsHtml = regions.map(function(r) {
|
||
return '<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>' + (r.name || '') + '</span></div>';
|
||
}).join('');
|
||
document.getElementById('geographyContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">География <span>присутствия</span></h2><p class="section-subtitle">' + (geo.section_subtitle || st.section_services_subtitle || '') + '</p></div>' +
|
||
'<div class="geo-content"><div class="reveal-left"><div class="geo-regions">' + regionsHtml + '</div>' +
|
||
(geo.difficult_title ? '<div class="geo-hard"><h4>' + geo.difficult_title + '</h4><p>' + (geo.difficult_desc || '') + '</p></div>' : '') +
|
||
'</div><div class="reveal-right"><div class="geo-map"><img src="' + imgSrc(geo.map_image) + '" loading="lazy" alt=""></div></div></div>';
|
||
}
|
||
|
||
function renderLicenses(d) {
|
||
var licenses = d.licenses || [];
|
||
var gallery = d.license_gallery || [];
|
||
var st = d.settings || {};
|
||
var cardsHtml = licenses.map(function(l) {
|
||
return '<div class="license-card reveal"><div class="license-icon"><svg viewBox="0 0 24 24">' + (l.svg_icon || '') + '</svg></div><div><h4>' + l.title + '</h4><p>' + (l.description || '') + '</p></div></div>';
|
||
}).join('');
|
||
var galleryHtml = gallery.map(function(g) {
|
||
return '<div class="license-gallery-item reveal" data-src="' + imgSrc(g.image_path) + '" data-title="' + g.title + '" data-desc="' + (g.description || '') + '">' +
|
||
'<div class="license-gallery-thumb"><img src="' + imgSrc(g.image_path) + '" loading="lazy" alt="' + g.title + '"><div class="license-gallery-zoom">' + searchZoom + '</div></div>' +
|
||
'<div class="license-gallery-body"><h4>' + g.title + '</h4><p>' + (g.description || '') + '</p></div></div>';
|
||
}).join('');
|
||
document.getElementById('licensesContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Лицензии и <span>разрешения</span></h2><p class="section-subtitle">' + (st.section_licenses_subtitle || '') + '</p></div>' +
|
||
'<div class="licenses-grid">' + cardsHtml + '</div>' +
|
||
(gallery.length ? '<div class="license-gallery">' + galleryHtml + '</div>' : '');
|
||
}
|
||
|
||
function renderActivity(d) {
|
||
var acts = d.public_activities || [];
|
||
var gallery = d.activity_gallery || [];
|
||
var st = d.settings || {};
|
||
var cardsHtml = acts.map(function(a) {
|
||
return '<div class="activity-card reveal"><div class="activity-card-icon"><svg viewBox="0 0 24 24">' + (a.svg_icon || '') + '</svg></div><h4>' + a.title + '</h4><p>' + (a.description || '') + '</p></div>';
|
||
}).join('');
|
||
var galleryHtml = gallery.length ? '<div class="activity-gallery reveal"><div class="activity-gallery-title">Благодарственные письма</div>' +
|
||
gallery.map(function(g) {
|
||
return '<div class="license-gallery-item" data-src="' + imgSrc(g.image_path) + '" data-title="' + g.title + '" data-desc="' + (g.description || '') + '">' +
|
||
'<div class="license-gallery-thumb"><img src="' + imgSrc(g.image_path) + '" loading="lazy" alt="' + g.title + '"><div class="license-gallery-zoom">' + searchZoom + '</div></div>' +
|
||
'<div class="license-gallery-body"><h4>' + g.title + '</h4><p>' + (g.description || '') + '</p></div></div>';
|
||
}).join('') + '</div>' : '';
|
||
document.getElementById('activityContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Общественная <span>деятельность</span></h2><p class="section-subtitle">' + (st.section_activity_subtitle || '') + '</p></div>' +
|
||
'<div class="activity-cards">' + cardsHtml + '</div>' + galleryHtml;
|
||
}
|
||
|
||
function renderPartners(d) {
|
||
var partners = d.partners || [];
|
||
var st = d.settings || {};
|
||
var duplicated = partners.concat(partners);
|
||
var trackHtml = duplicated.map(function(p) {
|
||
return '<img src="' + imgSrc(p.logo_path) + '" loading="lazy" alt="' + (p.name || '') + '">';
|
||
}).join('');
|
||
document.getElementById('partnersContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Наши <span>партнёры</span></h2><p class="section-subtitle">' + (st.section_partners_subtitle || '') + '</p></div>' +
|
||
'<div class="partners-scroll reveal"><div class="partners-track">' + trackHtml + '</div></div>';
|
||
}
|
||
|
||
function renderContacts(d) {
|
||
var s = d.settings || {};
|
||
var h = d.hero || {};
|
||
var phone800 = h.phone_800 || s.contact_phone_800 || '8 (800) 555-29-31';
|
||
var phoneEkb = h.phone_ekb || s.contact_phone_ekb || '8 (343) 237-25-66';
|
||
var email = h.email || s.contact_email || 'sts_zakaz@mail.ru';
|
||
var address = h.address || s.contact_address || 'г. Екатеринбург, ул. Московская, 11, оф. 702';
|
||
var workHours = (s.contact_work_hours || 'Пн–Пт: 9:00 – 18:00|Сб: 10:00 – 15:00').replace(/\|/g, '<br>');
|
||
var mapImg = s.contact_map_image || './img/secret.webp';
|
||
|
||
document.getElementById('contactsContainer').innerHTML =
|
||
'<div class="section-header center reveal"><h2 class="section-title">Свяжитесь <span>с нами</span></h2><p class="section-subtitle">' + (s.section_contacts_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:' + phone800.replace(/\D/g,'') + '">' + phone800 + '</a><br><a href="tel:' + phoneEkb.replace(/\D/g,'') + '">' + phoneEkb + '</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:' + email + '">' + email + '</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>' + address + '</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>' + workHours + '</p></div></div>' +
|
||
'</div><div class="contact-map"><img src="' + imgSrc(mapImg) + '" loading="lazy" alt=""></div>' +
|
||
'</div><div class="reveal-right">' +
|
||
'<div class="contact-form" id="contactForm"><h3>' + (s.form_title || 'Оставить заявку') + '</h3>' +
|
||
'<p class="form-subtitle">' + (s.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>' +
|
||
'<div class="form-group"><label class="form-consent-label"><input type="checkbox" name="consent" required id="consent"><span>Я согласен на <a href="/privacy.html" target="_blank">обработку персональных данных</a></span></label></div>' +
|
||
'<button type="submit" class="btn btn-primary">Отправить заявку</button>' +
|
||
'</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>';
|
||
|
||
document.getElementById('footerEmail').textContent = email;
|
||
document.getElementById('footerEmail').href = 'mailto:' + email;
|
||
var fText = (s.footer_text || '\u00A9 {year} \u041E\u041E\u041E \u00AB\u0421\u0422\u0421-\u0410\u0432\u0442\u043E\u00BB. \u0412\u0441\u0435 \u043F\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043D\u044B. 16+').replace('{year}', new Date().getFullYear());
|
||
document.getElementById('footerCopy').textContent = fText;
|
||
|
||
var phoneInput = document.getElementById('phone');
|
||
if (phoneInput) {
|
||
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;
|
||
});
|
||
}
|
||
}
|
||
|
||
function initSiteData(data) {
|
||
SITE = data;
|
||
if (data.settings && data.settings.logo_path) {
|
||
var logoImg = document.querySelector('.logo img');
|
||
if (logoImg) logoImg.src = data.settings.logo_path;
|
||
}
|
||
renderHero(data);
|
||
renderAbout(data);
|
||
renderServices(data);
|
||
renderSchemes(data);
|
||
renderProcess(data);
|
||
renderEquipment(data);
|
||
renderGeography(data);
|
||
renderLicenses(data);
|
||
renderActivity(data);
|
||
renderContacts(data);
|
||
renderPartners(data);
|
||
initShared();
|
||
}
|
||
|
||
function initShared() {
|
||
var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
|
||
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
|
||
a.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
var target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
var header = document.getElementById('header');
|
||
var pos = target.getBoundingClientRect().top + window.pageYOffset - header.offsetHeight;
|
||
window.scrollTo({ top: pos, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
var hasRunCounter = false;
|
||
function checkRevealAndCounters() {
|
||
var wh = window.innerHeight;
|
||
revealEls.forEach(function(el) { if (el.getBoundingClientRect().top < wh - 100) el.classList.add('visible'); });
|
||
if (!hasRunCounter) {
|
||
var stats = document.querySelector('.hero-stats');
|
||
if (stats && stats.getBoundingClientRect().top < wh) {
|
||
hasRunCounter = true;
|
||
document.querySelectorAll('.hero-stat-number').forEach(function(counter) {
|
||
var target = parseInt(counter.getAttribute('data-target'));
|
||
if (isNaN(target) || target <= 0) 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);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function setupLightbox() {
|
||
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');
|
||
if (!src) return;
|
||
document.getElementById('lightboxImg').src = src;
|
||
document.getElementById('lightboxImg').alt = title;
|
||
document.getElementById('lightboxTitle').textContent = title;
|
||
document.getElementById('lightboxDesc').textContent = desc;
|
||
document.getElementById('lightbox').classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
});
|
||
});
|
||
}
|
||
|
||
window.addEventListener('scroll', checkRevealAndCounters);
|
||
window.addEventListener('load', function() { checkRevealAndCounters(); setupLightbox(); });
|
||
setTimeout(function() { checkRevealAndCounters(); setupLightbox(); }, 500);
|
||
}
|
||
|
||
function loadSite() {
|
||
fetch('/api/site-data').then(function(r) { return r.json(); }).then(function(data) {
|
||
if (data.hero && !data.hero.hero_bg) data.hero.hero_bg = './img/hero-bg.webp';
|
||
initSiteData(data);
|
||
}).catch(function() {
|
||
var defaultData = {
|
||
hero: { hero_bg:'./img/hero-bg.webp', badge_text:'Лицензии СРО и НОСТРОЙ', h1_text:'демонтаж нефтегазопроводов по России, утилизация отходов', subtitle:'Собственная спецтехника. Лицензии СРО и НОСТРОЙ. Более ' + yearsSince2011 + ' лет опыта.', phone_800:'8 (800) 555-29-31', phone_ekb:'8 (343) 237-25-66', email:'sts_zakaz@mail.ru', address:'г. Екатеринбург, ул. Московская, 11, оф. 702', button1_text:'Оставить заявку', button1_link:'#contacts', button2_text:'Наши услуги', button2_link:'#services' },
|
||
hero_stats: [{label:'лет на рынке',value:String(yearsSince2011),is_dynamic:1,sort_order:0},{label:'объектов выполнено',value:'200',is_dynamic:0,sort_order:1},{label:'единиц техники',value:'80',is_dynamic:0,sort_order:2},{label:'федеральных округов',value:'6',is_dynamic:0,sort_order:3}],
|
||
about: {}, about_features: [], services: [], work_schemes: [], process_steps: [], equipment: [],
|
||
geo_regions: [], geo: {}, licenses: [], license_gallery: [], public_activities: [], activity_gallery: [],
|
||
partners: [], settings: {}
|
||
};
|
||
initSiteData(defaultData);
|
||
});
|
||
}
|
||
|
||
loadSite();
|
||
|
||
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() })
|
||
}).catch(function() {});
|
||
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;
|
||
};
|
||
|
||
window.acceptCookies = function() {
|
||
localStorage.setItem('cookiesAccepted', '1');
|
||
var cb = document.getElementById('cookieBanner');
|
||
if (cb) cb.style.display = 'none';
|
||
};
|
||
|
||
var cookieBanner = document.getElementById('cookieBanner');
|
||
if (cookieBanner && !localStorage.getItem('cookiesAccepted')) {
|
||
cookieBanner.style.display = 'flex';
|
||
} else if (cookieBanner) {
|
||
cookieBanner.style.display = 'none';
|
||
}
|
||
|
||
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');
|
||
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);
|
||
document.querySelectorAll('.mobile-link').forEach(function(link) {
|
||
link.addEventListener('click', function() { if (mobileNav.classList.contains('open')) toggleMobileNav(); });
|
||
});
|
||
|
||
var lightbox = document.getElementById('lightbox');
|
||
var lightboxClose = document.getElementById('lightboxClose');
|
||
function closeLightbox() {
|
||
lightbox.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
setTimeout(function() { document.getElementById('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(); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|