Commit 9adbc158 authored by dagalkova's avatar dagalkova

update

parent 6c87ed7d
No preview for this file type
...@@ -518,8 +518,8 @@ ...@@ -518,8 +518,8 @@
</div> </div>
<div class="gazeta"> <div class="gazeta">
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -530,8 +530,8 @@ ...@@ -530,8 +530,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -542,8 +542,8 @@ ...@@ -542,8 +542,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -554,8 +554,8 @@ ...@@ -554,8 +554,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -566,8 +566,8 @@ ...@@ -566,8 +566,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -578,8 +578,8 @@ ...@@ -578,8 +578,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css"> <link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/fancybox.css">
</head> </head>
<body class="body-subpage"> <body class="body-subpage">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');"> <div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
...@@ -514,7 +515,7 @@ ...@@ -514,7 +515,7 @@
<h2 id="tech" class="corp-content-wrapper__title">Техническая спецификация</h2> <h2 id="tech" class="corp-content-wrapper__title">Техническая спецификация</h2>
<div class="tech-spec"> <div class="tech-spec">
<div class="tech-spec-item"> <div class="tech-spec-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="spec" href="img/tech_spec.png" class="tech-spec-item-img">
<img src="img/tech_spec.png" alt="tech-spec"> <img src="img/tech_spec.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -527,7 +528,7 @@ ...@@ -527,7 +528,7 @@
</div> </div>
</div> </div>
<div class="tech-spec-item"> <div class="tech-spec-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="spec" href="img/tech_spec.png" class="tech-spec-item-img">
<img src="img/tech_spec.png" alt="tech-spec"> <img src="img/tech_spec.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -547,7 +548,7 @@ ...@@ -547,7 +548,7 @@
<div class="sertificate"> <div class="sertificate">
<div class="sertificate-slider"> <div class="sertificate-slider">
<div class="sertificate-item"> <div class="sertificate-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="sert" href="img/tech_spec_sert.png" class="tech-spec-item-img">
<img src="img/tech_spec_sert.png" alt="tech-spec"> <img src="img/tech_spec_sert.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -731,7 +732,7 @@ ...@@ -731,7 +732,7 @@
<div class="sertificate"> <div class="sertificate">
<div class="sertificate-slider"> <div class="sertificate-slider">
<div class="sertificate-item"> <div class="sertificate-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="gallery" href="img/gallery1.png" class="tech-spec-item-img">
<img src="img/gallery1.png" alt="tech-spec"> <img src="img/gallery1.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -867,6 +868,7 @@ ...@@ -867,6 +868,7 @@
</div> </div>
</footer> </footer>
<script defer src="js/jquery-3.6.0.min.js"></script> <script defer src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/fancybox.umd.js"></script>
<script defer src="js/index.js"></script> <script defer src="js/index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
File added
<svg width="533" height="481" viewBox="0 0 533 481" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="533" height="481">
<rect width="533" height="481" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M348.028 239.988L307.213 240.329L359.641 290.467V342.991L251.199 239.988L214.482 239.818H151.808L359.129 444.289V378.121L214.312 239.988L175.033 204.006L139 240.5L380.817 483L624 239.818L587.796 204.176L548.859 240.671L404.896 378.292L405.238 443.606L611.363 240.841L548.859 240.5H511.289L455.787 239.477H414.459L520.681 135.621L380.646 -2L240.611 136.645L348.028 239.988ZM511.289 240.5L568.327 183.371L540.833 157.961L455.958 239.647L404.896 289.784V343.844L511.289 240.5ZM307.213 240.329L221.143 158.985L195.014 186.27L251.199 240.159L307.213 240.329Z" fill="#D6D9E5" fill-opacity="0.2"/>
</g>
</svg>
...@@ -170,17 +170,11 @@ ...@@ -170,17 +170,11 @@
</div> </div>
</div> </div>
</div> </div>
<header class="header" style="background-image: linear-gradient( <header class="header">
180deg, <video class="video" loop="loop" autoplay="" muted="">
rgba(0, 0, 0, 0.68) 0%, <source src="img/main.mp4" type="video/mp4" />
rgba(0, 0, 0, 0.12) 61.02% </video>
), <div class="bg-overlay"></div>
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
),
url('img/лес2.gif');">
<nav class="navbar"> <nav class="navbar">
<a class="navbar-logo" href="#"> <a class="navbar-logo" href="#">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga"> <img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
...@@ -566,6 +560,7 @@ ...@@ -566,6 +560,7 @@
</div> </div>
</header> </header>
<section class="production" style="background-image: url('img/production_mask.svg');"> <section class="production" style="background-image: url('img/production_mask.svg');">
<div class="production-text"> <div class="production-text">
<h2 class="production__title">Продукция</h2> <h2 class="production__title">Продукция</h2>
<p class="production__descr">Уникальный продукт – газетная бумага, <p class="production__descr">Уникальный продукт – газетная бумага,
...@@ -575,7 +570,8 @@ ...@@ -575,7 +570,8 @@
<a class="production__link" href="#">Перейти в каталог</a> <a class="production__link" href="#">Перейти в каталог</a>
</div> </div>
<div class="production-list"> <div class="production-list">
<div class="production-list-item" style="background-image: url(img/product1.png);"> <div class="production-list-item">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -613,7 +609,8 @@ ...@@ -613,7 +609,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item" style="background-image: url(img/product2.png);"> <div class="production-list-item">
<img src="img/product2.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -639,8 +636,8 @@ ...@@ -639,8 +636,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item" style="background-image: url(img/product3.png);"> <div class="production-list-item empty" style="background-image: url(img/zaglushka.svg);">
<svg class="production-list-item__arrow"> <!--<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
<h4 class="production-list-item__title">Специальные виды бумаг</h4> <h4 class="production-list-item__title">Специальные виды бумаг</h4>
...@@ -663,7 +660,7 @@ ...@@ -663,7 +660,7 @@
<use xlink:href="img/points_style.svg#points_style"></use> <use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для пищевых продуктов</li> </svg>Для пищевых продуктов</li>
</a> </a>
</ul> </ul> -->
</div> </div>
</div> </div>
...@@ -985,6 +982,19 @@ ...@@ -985,6 +982,19 @@
</div> </div>
</div> </div>
</footer> </footer>
<div class="modal hidden">
<div class="overlay"></div>
<div class="modal-wrapper">
<a class="modal-close" href="#">
<svg class="modal-close__icon">
<use xlink:href="img/search_close.svg#search_close"></use>
</svg>
</a>
<h2 class="modal__title">Спасибо за обращение</h2>
<p class="modal__descr">Мы свяжемся с Вами в ближайшее время</p>
<div class="modal__button" style="background-image: url('img/form_button_white.png');">Закрыть</div>
</div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=6d05ea4e-5eb3-4409-88a3-d4f809c991d9" type="text/javascript"></script> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=6d05ea4e-5eb3-4409-88a3-d4f809c991d9" type="text/javascript"></script>
<script defer src="js/jquery-3.6.0.min.js"></script> <script defer src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/index.js"></script> <script defer src="js/index.js"></script>
......
This diff is collapsed.
...@@ -77,6 +77,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -77,6 +77,7 @@ document.addEventListener("DOMContentLoaded", function () {
enter.style.visibility = 'hidden'; enter.style.visibility = 'hidden';
} }
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - search.offsetHeight) { if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - search.offsetHeight) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
...@@ -90,6 +91,12 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -90,6 +91,12 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} }
} }
else {
if (document.querySelector('.submenu--active')) {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - document.querySelector('.submenu--active').offsetHeight) {
document.querySelector('.header').style.opacity = 1;
}
}
else { else {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight) { if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
...@@ -103,6 +110,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -103,6 +110,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} }
} }
}
}); });
//+/- menu //+/- menu
...@@ -132,16 +140,9 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -132,16 +140,9 @@ document.addEventListener("DOMContentLoaded", function () {
for (const menu of menuIdElems) { for (const menu of menuIdElems) {
menu?.addEventListener('mouseenter', () => { menu?.addEventListener('mouseenter', () => {
if (search.style.opacity !== '1') { if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) { if (pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 1;
}
}
else {
if (pageYOffset < 540) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
} }
}
submenuIdElems.forEach(item => { submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) { if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.add('submenu--active'); item.classList.add('submenu--active');
...@@ -151,16 +152,9 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -151,16 +152,9 @@ document.addEventListener("DOMContentLoaded", function () {
}) })
menu?.addEventListener('mouseleave', () => { menu?.addEventListener('mouseleave', () => {
if (search.style.opacity !== '1') { if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) { if (pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 0.99;
}
}
else {
if (pageYOffset < 540) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
} }
}
submenuIdElems.forEach(item => { submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) { if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.remove('submenu--active'); item.classList.remove('submenu--active');
...@@ -179,7 +173,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -179,7 +173,7 @@ document.addEventListener("DOMContentLoaded", function () {
e.preventDefault(); e.preventDefault();
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
if (pageYOffset < 400) { if (pageYOffset > 400 && pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
for (let point of points) { for (let point of points) {
point.style.display = 'flex'; point.style.display = 'flex';
...@@ -192,7 +186,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -192,7 +186,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
if (pageYOffset < 400) { if (pageYOffset > 400 && pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
for (let point of points) { for (let point of points) {
point.style.display = 'flex'; point.style.display = 'flex';
...@@ -202,7 +196,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -202,7 +196,7 @@ document.addEventListener("DOMContentLoaded", function () {
else { else {
search.style.opacity = '1'; search.style.opacity = '1';
search.style.visibility = 'visible'; search.style.visibility = 'visible';
if (pageYOffset > 400) { if (pageYOffset > 400 && pageYOffset < 700) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
for (let point of points) { for (let point of points) {
point.style.display = 'none'; point.style.display = 'none';
...@@ -219,7 +213,12 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -219,7 +213,12 @@ document.addEventListener("DOMContentLoaded", function () {
secondMobItemLink[i]?.addEventListener('click', (e) => { secondMobItemLink[i]?.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
if (i === 0) { if (i === 0) {
if (document.querySelector('.heading-other')) {
search.style.top = document.querySelector('.header').offsetHeight - document.querySelector('.heading-other').offsetHeight + 'px';
}
else {
search.style.top = document.querySelector('.header').offsetHeight + 'px'; search.style.top = document.querySelector('.header').offsetHeight + 'px';
}
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
...@@ -231,8 +230,13 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -231,8 +230,13 @@ document.addEventListener("DOMContentLoaded", function () {
search.style.visibility = 'visible'; search.style.visibility = 'visible';
} }
} }
else {
if (document.querySelector('.heading-other')) {
enter.style.top = document.querySelector('.header').offsetHeight - document.querySelector('.heading-other').offsetHeight + 'px';
}
else { else {
enter.style.top = document.querySelector('.header').offsetHeight + 'px'; enter.style.top = document.querySelector('.header').offsetHeight + 'px';
}
if (enter.style.opacity == '1') { if (enter.style.opacity == '1') {
enter.style.opacity = '0'; enter.style.opacity = '0';
enter.style.visibility = 'hidden'; enter.style.visibility = 'hidden';
...@@ -562,6 +566,24 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -562,6 +566,24 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}); });
}); });
//news
const gazetaItems = document.querySelectorAll('.photo-item-img');
for (let item of gazetaItems) {
if (!item.classList.contains('first-item-img')) {
let w = item.offsetWidth;
let h = w * 0.66;
item.style.height = h + 'px';
}
}
//gazeta
const bigItems = document.querySelectorAll('.big-item-img');
for (let item of bigItems) {
let w = item.offsetWidth;
let h = w * 1.42;
item.style.height = h + 'px';
}
//techology-mob //techology-mob
const mobIdElems = document.querySelectorAll('[data-mob-id]'); const mobIdElems = document.querySelectorAll('[data-mob-id]');
const imgIdElems = document.querySelectorAll('[data-img-id]'); const imgIdElems = document.querySelectorAll('[data-img-id]');
...@@ -644,6 +666,116 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -644,6 +666,116 @@ document.addEventListener("DOMContentLoaded", function () {
}) })
} }
} }
//form
let modal = document.querySelector('.modal');
let modalClose = document.querySelector('.modal-close');
let modalButton = document.querySelector('.modal__button');
modalClose?.addEventListener('click', (e) => {
e.preventDefault;
modal.classList.add('hidden');
})
modalButton?.addEventListener('click', (e) => {
e.preventDefault;
modal.classList.add('hidden');
})
if (document.querySelector('[data-plyr]')) {
Fancybox.bind("[data-plyr]", {
on: {
reveal: (fancybox, slide) => {
if (typeof Plyr === undefined) {
return;
}
let $el;
if (slide.type === "html5video") {
$el = slide.$content.querySelector("video");
} else if (slide.type === "video") {
$el = document.createElement("div");
$el.classList.add("plyr__video-embed");
$el.appendChild(slide.$iframe);
slide.$content.appendChild($el);
}
if ($el) {
slide.player = new Plyr($el);
}
},
"Carousel.unselectSlide": (fancybox, carousel, slide) => {
if (slide.player) {
slide.player.pause();
}
},
"Carousel.selectSlide": (fancybox, carousel, slide) => {
if (slide.player) {
slide.player.play();
}
},
},
});
}
if (document.querySelector('[data-fancybox="gallery"]')) {
Fancybox.bind('[data-fancybox="gallery"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
if (document.querySelector('[data-fancybox="spec"]')) {
Fancybox.bind('[data-fancybox="spec"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
if (document.querySelector('[data-fancybox="sert"]')) {
Fancybox.bind('[data-fancybox="sert"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
}); });
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -518,7 +518,7 @@ ...@@ -518,7 +518,7 @@
</div> </div>
<div class="gazeta gazeta-news"> <div class="gazeta gazeta-news">
<a class="gazeta-item" style="background-image: url('img/dev_photo.png');"> <a class="gazeta-item" style="background-image: url('img/dev_photo.png');">
<div class="gazeta-item-img"> <div class="gazeta-item-img first-item-img">
<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo"> <img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo">
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
...@@ -553,8 +553,8 @@ ...@@ -553,8 +553,8 @@
</a> </a>
</div> </div>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n1.jpg');">
<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -564,8 +564,8 @@ ...@@ -564,8 +564,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n2.jpg');">
<img class="gazeta-item-img__photo" src="img/n2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -575,8 +575,8 @@ ...@@ -575,8 +575,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -586,8 +586,8 @@ ...@@ -586,8 +586,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n4.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n4.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -597,8 +597,8 @@ ...@@ -597,8 +597,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n5.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n5.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -608,8 +608,8 @@ ...@@ -608,8 +608,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/n6.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n6.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
...@@ -524,8 +524,8 @@ ...@@ -524,8 +524,8 @@
</div> </div>
<div class="gazeta"> <div class="gazeta">
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -537,8 +537,8 @@ ...@@ -537,8 +537,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -550,8 +550,8 @@ ...@@ -550,8 +550,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -563,8 +563,8 @@ ...@@ -563,8 +563,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -576,8 +576,8 @@ ...@@ -576,8 +576,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -589,8 +589,8 @@ ...@@ -589,8 +589,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -602,8 +602,8 @@ ...@@ -602,8 +602,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -615,8 +615,8 @@ ...@@ -615,8 +615,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -628,8 +628,8 @@ ...@@ -628,8 +628,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -641,8 +641,8 @@ ...@@ -641,8 +641,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -654,8 +654,8 @@ ...@@ -654,8 +654,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -667,8 +667,8 @@ ...@@ -667,8 +667,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
...@@ -490,7 +490,8 @@ ...@@ -490,7 +490,8 @@
</header> </header>
<section class="production production-subpage" style="background-image: url('img/company_mask.svg');"> <section class="production production-subpage" style="background-image: url('img/company_mask.svg');">
<div class="production-list production-list-subpage"> <div class="production-list production-list-subpage">
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -528,7 +529,8 @@ ...@@ -528,7 +529,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product2.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product2.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -554,7 +556,8 @@ ...@@ -554,7 +556,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product3.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product3.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -580,7 +583,8 @@ ...@@ -580,7 +583,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -30,13 +30,45 @@ body { ...@@ -30,13 +30,45 @@ body {
background: #f6f8fa; background: #f6f8fa;
} }
.video {
top: 0;
object-fit: cover;
height: 100%;
width: 100vw;
left: 0;
z-index: 0;
position: absolute;
opacity: 0.99;
}
.bg-overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: ' ';
z-index: 0;
backface-visibility: hidden;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.12) 61.02%
),
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
);
opacity: 0.8;
}
.header { .header {
opacity: 0.99; opacity: 0.99;
position: relative; position: relative;
width: 100%; width: 100%;
height: 800px; height: 800px;
background-repeat: no-repeat;
background-size: cover;
&-subpage { &-subpage {
height: auto; height: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -525,6 +557,7 @@ body { ...@@ -525,6 +557,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
z-index: 2;
&__title { &__title {
font-weight: normal; font-weight: normal;
font-size: 18px; font-size: 18px;
...@@ -600,6 +633,7 @@ body { ...@@ -600,6 +633,7 @@ body {
&-wrapper { &-wrapper {
margin-top: 129px; margin-top: 129px;
border-left: 1px rgba($color: #fff, $alpha: 0.1) solid; border-left: 1px rgba($color: #fff, $alpha: 0.1) solid;
z-index: 2;
} }
&-item { &-item {
margin-bottom: 35px; margin-bottom: 35px;
...@@ -636,7 +670,7 @@ body { ...@@ -636,7 +670,7 @@ body {
.point { .point {
position: absolute; position: absolute;
top: 650px; top: 650px;
z-index: 1; z-index: 2;
margin: 0 20px 0 108px; margin: 0 20px 0 108px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -647,6 +681,7 @@ body { ...@@ -647,6 +681,7 @@ body {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
width: 25%; width: 25%;
z-index: 3;
&__num { &__num {
font-weight: 300; font-weight: 300;
font-size: 30px; font-size: 30px;
...@@ -684,7 +719,7 @@ body { ...@@ -684,7 +719,7 @@ body {
&-item:hover { &-item:hover {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
transform: translateY(-43%); transform: translateY(-47%);
} }
&-item:hover &-item__num, &-item:hover &-item__num,
&-item:hover &-item-wrapper__title { &-item:hover &-item-wrapper__title {
...@@ -770,6 +805,19 @@ body { ...@@ -770,6 +805,19 @@ body {
box-sizing: border-box; box-sizing: border-box;
margin-right: 20px; margin-right: 20px;
transition: 0.4s; transition: 0.4s;
img {
clip-path: polygon(0% 25%, 25% 0%, 100% 0%, 100% 75%, 75% 100%);
height: 300px;
width: 300px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
}
div {
padding-left: 32px;
width: 350px;
}
&-subpage { &-subpage {
margin-bottom: 32px; margin-bottom: 32px;
margin-right: 40px; margin-right: 40px;
...@@ -797,14 +845,15 @@ body { ...@@ -797,14 +845,15 @@ body {
line-height: 130%; line-height: 130%;
color: #16291f; color: #16291f;
margin: 40px 0; margin: 40px 0;
width: 150px; width: 180px;
transition: 0.4s; transition: 0.4s;
margin-left: 33px; margin-left: 33px;
} }
&__points { &__points {
list-style: none; list-style: none;
} }
&__descr { &__descr,
div {
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
line-height: 160%; line-height: 160%;
...@@ -1047,7 +1096,6 @@ body { ...@@ -1047,7 +1096,6 @@ body {
} }
.press { .press {
background-color: #fff;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-attachment: fixed; background-attachment: fixed;
...@@ -1799,6 +1847,99 @@ body { ...@@ -1799,6 +1847,99 @@ body {
} }
} }
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
&-wrapper {
position: fixed;
top: 50%;
left: 50%;
z-index: 9;
max-width: 592px;
width: 576px;
height: 331px;
box-sizing: border-box;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 64px 56px;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.25);
}
&-close {
position: absolute;
top: 16px;
right: 16px;
transition: 0.4s;
&__icon {
margin-left: 8px;
width: 16px;
height: 17px;
fill: #16291f;
transition: 0.4s;
}
}
&-close:hover &-close__icon {
fill: #029745;
}
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 32px;
text-align: center;
}
&__descr {
font-weight: 300;
font-size: 18px;
line-height: 130%;
text-align: center;
color: #16291f;
margin-bottom: 48px;
}
&__button {
background-color: #029745;
background-repeat: no-repeat;
background-size: 68px;
background-position: -5px 0px;
width: 197px;
height: 60px;
border-width: 0;
font-weight: bold;
font-size: 15px;
line-height: 120%;
letter-spacing: 0.15em;
color: #fff;
cursor: pointer;
transition: 0.4s;
text-transform: uppercase;
padding: 21px 56px;
box-sizing: border-box;
margin: 0 auto;
}
&__button:hover {
background-color: #28be4a;
}
&__button:active {
background-color: #07803d;
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 2;
}
//company //company
.cards { .cards {
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -2722,7 +2863,10 @@ body { ...@@ -2722,7 +2863,10 @@ body {
display: flex; display: flex;
&-img { &-img {
position: relative; position: relative;
height: 100%; max-width: 320px;
> img {
width: 100%;
}
&__hover { &__hover {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
...@@ -2788,6 +2932,8 @@ body { ...@@ -2788,6 +2932,8 @@ body {
flex-direction: column; flex-direction: column;
margin-right: 32px; margin-right: 32px;
opacity: 0.99; opacity: 0.99;
max-width: 320px;
flex-shrink: 0;
&__label { &__label {
margin-top: 16px; margin-top: 16px;
font-weight: bold; font-weight: bold;
...@@ -2966,11 +3112,14 @@ body { ...@@ -2966,11 +3112,14 @@ body {
margin-right: 20px; margin-right: 20px;
&-img { &-img {
position: relative; position: relative;
&__photo { width: 100%;
background-repeat: no-repeat;
background-size: cover;
/*&__photo {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }*/
&__video { &__video {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -3027,7 +3176,8 @@ body { ...@@ -3027,7 +3176,8 @@ body {
margin-right: 8px; margin-right: 8px;
} }
} }
&__label { &__label,
p {
font-weight: 300; font-weight: 300;
font-size: 18px; font-size: 18px;
line-height: 130%; line-height: 130%;
...@@ -3059,7 +3209,7 @@ body { ...@@ -3059,7 +3209,7 @@ body {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
.gazeta-news > .gazeta-item:first-child .gazeta-item-img__photo { .gazeta-news > .gazeta-item:first-child .gazeta-item-img {
display: none; display: none;
} }
.gazeta-news > .gazeta-item:first-child .gazeta-item-text { .gazeta-news > .gazeta-item:first-child .gazeta-item-text {
...@@ -3100,8 +3250,8 @@ body { ...@@ -3100,8 +3250,8 @@ body {
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
} }
.gazeta-news-wrapper > .gazeta-item:nth-child(1) .gazeta-item-img__photo, .gazeta-news-wrapper > .gazeta-item:nth-child(1) .gazeta-item-img,
.gazeta-news-wrapper > .gazeta-item:nth-child(2) .gazeta-item-img__photo { .gazeta-news-wrapper > .gazeta-item:nth-child(2) .gazeta-item-img {
display: none; display: none;
} }
...@@ -3975,7 +4125,7 @@ body { ...@@ -3975,7 +4125,7 @@ body {
} }
} }
&-item:hover { &-item:hover {
transform: translateY(-51%); transform: translateY(-47%);
} }
} }
.production { .production {
...@@ -3992,7 +4142,8 @@ body { ...@@ -3992,7 +4142,8 @@ body {
font-size: 38px; font-size: 38px;
margin-bottom: 43px; margin-bottom: 43px;
} }
&__descr { &__descr,
div {
font-size: 14px; font-size: 14px;
margin-bottom: 18px; margin-bottom: 18px;
} }
...@@ -4010,6 +4161,10 @@ body { ...@@ -4010,6 +4161,10 @@ body {
padding: 50px 52px; padding: 50px 52px;
min-height: 315px; min-height: 315px;
background-size: 180px 180px; background-size: 180px 180px;
img {
height: 200px;
width: 200px;
}
&__image { &__image {
width: 185px; width: 185px;
} }
...@@ -4025,6 +4180,9 @@ body { ...@@ -4025,6 +4180,9 @@ body {
font-size: 14px; font-size: 14px;
} }
} }
.empty {
display: none;
}
} }
&-separator { &-separator {
margin-top: 63px; margin-top: 63px;
...@@ -4700,7 +4858,8 @@ body { ...@@ -4700,7 +4858,8 @@ body {
&__download { &__download {
font-size: 12px; font-size: 12px;
} }
&__label { &__label,
p {
font-size: 14px; font-size: 14px;
} }
} }
...@@ -5080,6 +5239,7 @@ body { ...@@ -5080,6 +5239,7 @@ body {
position: static; position: static;
justify-content: space-between; justify-content: space-between;
height: 104px; height: 104px;
opacity: 0.99;
&-logo img { &-logo img {
height: 64px; height: 64px;
} }
...@@ -5217,6 +5377,7 @@ body { ...@@ -5217,6 +5377,7 @@ body {
display: none; display: none;
} }
.second-mob { .second-mob {
opacity: 0.99;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
list-style: none; list-style: none;
...@@ -5381,7 +5542,8 @@ body { ...@@ -5381,7 +5542,8 @@ body {
font-size: 32px; font-size: 32px;
margin-bottom: 36px; margin-bottom: 36px;
} }
&__descr { &__descr,
div {
font-size: 12px; font-size: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -5409,6 +5571,10 @@ body { ...@@ -5409,6 +5571,10 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
img {
height: 140px;
width: 140px;
}
&__image { &__image {
width: 152px; width: 152px;
} }
...@@ -5674,7 +5840,7 @@ body { ...@@ -5674,7 +5840,7 @@ body {
margin: 0; margin: 0;
padding: 52px 16px; padding: 52px 16px;
&-item { &-item {
background-size: 15%; background-size: 120px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 62px 46px; padding: 62px 46px;
...@@ -6704,3 +6870,64 @@ body { ...@@ -6704,3 +6870,64 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.fancybox__container {
--carousel-button-bg: rgb(0 0 0 / 44%);
--carousel-button-svg-width: 24px;
--carousel-button-svg-height: 24px;
--carousel-button-svg-stroke-width: 2.5;
--carousel-button-svg-filter: none;
}
.fancybox__nav {
--carousel-button-svg-width: 22px;
--carousel-button-svg-height: 22px;
--carousel-button-svg-stroke-width: 3;
}
.fancybox__nav .carousel__button.is-prev {
left: 30px;
}
.fancybox__nav .carousel__button.is-next {
right: 30px;
}
.carousel__button.is-close {
top: 30px;
right: 30px;
}
.fancybox__slide {
padding: 0;
}
.fancybox__thumbs {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.fancybox__thumbs .carousel__slide {
padding: 20px 10px;
overflow: visible;
}
.fancybox__thumb {
border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
0 2px 4px -1px rgba(0, 0, 0, 0.26);
}
.is-nav-selected::after {
display: none;
}
.is-nav-selected .fancybox__thumb {
transform: scale(1.25);
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment