File: /var/www/innodrive/src/scss/blocks/about.scss
section {
//min-width: 320px;
max-width: 1280px;
margin: 0 auto;
padding: 70px 60px;
h2 {
font-size: clamp(24px, 5vw, 42px) !important;
line-height: clamp(31px, 5vw, 54px) !important;
font-weight: 400 !important;
color: #000 !important;
padding-bottom: 55px;
margin: 0;
}
.expert-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 15px;
.expert--item {
display: block;
font-size: 20px;
img {
max-width: 120px;
padding-bottom: 20px;
}
}
}
.inno_wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 110px;
.inno_wrapper-right--title {
padding: 0;
margin: 0;
}
.inno_wrapper-right--text {
ul {
padding: 40px 0 0 0;
li::before {
content: '\25CF';
}
li {
font-size: clamp(16px, 5vw, 20px) !important;
line-height: clamp(24px, 5vw, 30px) !important;
color: #303030;
}
}
}
}
}
.block-header {
padding: 0 60px;
.header_wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
.header_wrapper-left {
padding: clamp(15px, 5vw, 110px) 0;
max-width: 575px;
h1 {
font-size: clamp(32px, 5vw, 93px);
margin: 0;
line-height: clamp(32px, 5vw, 93px);
font-weight: 400;
color: #000;
}
.header_wrapper-left--text {
font-size: clamp(16px, 5vw, 30px);
padding-top: 30px;
color: #303030;
line-height: clamp(20px, 5vw, 38px);
}
}
.header_wrapper-right {
.header_wrapper-right--text {
width: 50%;
position: absolute;
right: 0;
img {
width: 100%;
}
}
}
}
}
.block-products {
.section-heading {
padding-bottom: 20px;
}
.block-products--row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(367px, 1fr));
background: #f1f7fb;
border-radius: 10px;
.block-products--row--left {
.block-products--row--left--text {
font-size: 16px;
line-height: 24px;
padding: clamp(10px, 5vw, 60px);
color: #303030;
}
}
.block-products--row--right {
display: grid;
grid-template-columns: 4fr 1fr;
.block-products--row--right-right {
background: white;
}
.block-products--row--right-left {
img {
position: relative;
right: -90px;
top: -73px;
}
}
}
}
}
.block-categories {
h2 {
padding-bottom: 20px;
}
.block-categories__row {
.block-categories__item {
border: 1px solid #d3d3d3;
border-radius: 0;
span {
font-size: clamp(14px, 5vw, 28px);
line-height: clamp(18px, 5vw, 36px);
}
}
.block-categories__item:hover {
box-shadow: 0 5px 25px 0 #0b1c2a26;
}
}
}
.block-about {
padding-top: 40px;
.about-rows {
.about--row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(253px, 1fr));
gap: 30px;
.about--row--right {
img {
float: right;
}
h2 {
margin-top: 70px;
}
}
.about-row-text {
font-size: clamp(16px, 5vw, 20px);
line-height: clamp(24px, 5vw, 30px);
ul {
font-size: clamp(16px, 5vw, 20px);
line-height: clamp(24px, 5vw, 30px);
padding-left: 0;
li {
font-size: clamp(16px, 5vw, 20px);
line-height: clamp(24px, 5vw, 30px);
color: #303030;
font-weight: 400;
}
li::before {
content: '\25CF';
}
}
}
}
.about--row:first-of-type {
padding-bottom: 77px;
}
}
}
.block-mission {
padding-top: 130px;
text-align: center;
background: url('/wp-content/uploads/2024/08/logo_ru-3.png');
background-position: center;
background-repeat: no-repeat;
//h2::before {
// content: url('/wp-content/themes/innodrive/img/prev.png');
//}
//h2::after {
// content: url('/wp-content/themes/innodrive/img/next.png');
//}
}
.expert-section {
h2 {
line-height: 55px;
}
}
.history-section {
.history-items {
overflow: hidden;
position: relative;
.history--item {
display: flex;
padding-bottom: 60px;
justify-content: start;
align-items: center;
min-height: 100px;
.year {
font-size: clamp(32px, 5vw, 48px);
color: #1db09a;
font-weight: 700;
position: relative;
line-height: clamp(32px, 5vw, 48px);
}
.text {
position: relative;
padding-left: 40px;
font-size: clamp(14px, 5vw, 20px);
line-height: clamp(21px, 5vw, 30px);
top: calc(108px - 55px) !important;
}
ul {
margin: 0;
padding-left: 0;
li {
list-style-type: none;
}
li::before {
content: url('/wp-content/themes/innodrive/icons/li.svg');
transform: translateY(-50%);
margin-right: 15px;
top: 5px;
position: relative;
}
}
}
.history--item {
.year::after {
content: " ";
width: 1px;
top: 50px;
height: 50px;
right: 50px;
position: absolute;
border-left: 2px dashed #1db09a;
}
}
}
.history-items.hide {
height: 470px;
}
.history-items.hide::after {
content: "";
display: block;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(241, 247, 251, 0) 24.32%, #f1f7fb 100%);
}
.show_content {
color: #fff;
background: #1db09a;
border-radius: 250px;
border: none;
padding: 16px 32px 16px 32px;
margin-top: 20px;
}
}
.block-categories.container {
img {
display: block;
max-width: none;
}
.block-categories_item {
text-align: center;
color: #979797;
font-weight: 700;
}
}
.container-bg {
background: #f1f7fb;
}
.sert-section {
.swiper-slide {
font-size: 14px;
color: #303030;
img {
padding-bottom: 20px;
}
}
}
.about {
@extend %page-container;
min-width: 320px;
max-width: 1280px;
margin: 0 auto;
padding-bottom: 90px;
padding-top: 90px;
.text-article {
overflow: hidden;
position: relative;
picture {
margin-right: 24px;
margin-left: 7px;
}
ul {
max-width: unset;
font-size: 19px;
line-height: 23px;
}
table {
max-width: none;
border-spacing: 0;
border-collapse: collapse;
tr {
font-size: 20px;
color: #303030;
td {
padding: 20px;
text-align: left;
}
td:nth-of-type(2n+1) {
//white-space: nowrap;
width: 15%;
border-radius: 10px 0 0 10px;
}
td:nth-of-type(2n) {
border-radius: 0 10px 10px 0;
}
}
tr:nth-of-type(2n+1) {
background-color: #f1f7fb;
}
tr:nth-of-type(2n) {
background-color: #fff;
}
}
}
.show_r {
display: none;
color: #fff;
background: #1db09a;
border-radius: 250px;
border: none;
padding: 16px 32px 16px 32px;
font-size: 14px;
}
}
@include media('mobile-m') {
.block-about {
padding-bottom: 0 !important;
.about-rows {
.about--row {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
gap: 5px;
h2 {
padding-bottom: 15px;
}
.about--row--right {
img {
float: left;
}
}
ul {
padding-left: 0;
li {
padding-left: 0;
margin-bottom: 15px;
}
}
}
.about--row:first-of-type {
padding-bottom: 0;
.about--row--left {
grid-column-start: 1;
grid-row-start: 2;
}
}
}
}
.history-section {
h2 {
padding-bottom: 20px;
}
.history-items {
.history--item {
.text {
padding-left: 20px;
}
}
}
.history-items.hide {
height: 700px;
}
}
.block-mission {
padding-top: 50px !important;
background-size: cover;
h2 {
margin-bottom: 0 !important;
}
.hide-mobile {
display: none;
}
}
.expert-section {
h2 {
padding-bottom: 20px;
}
}
.block-products {
h2 {
padding-bottom: 20px;
}
}
.block-categories {
h2 {
padding-bottom: 20px !important;
}
.block-categories__row {
.block-categories__item {
padding: 3px 15px 10px;
min-height: 150px;
}
}
}
.inno_wrapper {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
gap: 20px !important;
.inno_wrapper-right {
.inno_wrapper-right--text {
ul {
padding: 20px 0 0 0;
li {
padding-left: 0;
}
}
}
}
}
.sert-section {
h2 {
padding-bottom: 25px;
}
}
.requisites-section {
h2 {
padding-bottom: 20px;
}
.text-article.hide {
height: 350px;
}
.text-article.hide::after {
content: "";
display: block;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%);
}
table {
tbody {
tr {
display: grid;
border-radius: 10px;
td {
width: 100%;
font-size: 16px;
}
td:nth-of-type(2n+1) {
width: 100% !important;
padding-bottom: 0;
}
}
}
}
.show_r {
display: block;
}
}
}
@include media('tablet-s') {
section,
.container-bg {
padding: 16px 16px !important;
}
.container-bg {
section {
padding: 0 !important;
}
}
.block-header {
padding: 0 16px !important;
.header_wrapper {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
.header_wrapper-left {
grid-column-start: 1;
grid-row-start: 2;
}
.header_wrapper-right {
grid-column-start: 1;
grid-row-start: 1;
.header_wrapper-right--text {
width: 100% !important;
}
}
}
}
.history-section {
.history-items {
.history--item {
align-items: start;
.year::after {
top: 40px !important;
}
}
}
}
.expert-section {
.expert-items {
.expert--item {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
}
}
.block-products {
.block-products--row {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
.block-products--row--right {
grid-template-columns: 1fr;
background: white;
.block-products--row--right-left {
img {
right: 0;
top: 0;
}
}
}
}
}
.about {
padding-bottom: 3px;
.text-article {
picture {
position: relative;
float: none;
width: 100%;
height: 0;
margin: 7px 0 18px;
padding-bottom: 51.5%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
ul {
font-size: 13px;
line-height: 17px;
}
}
}
}
@media (min-width: 569px) {
.block-mission {
.text-article {
display: flex;
.next {
display: flex;
align-content: flex-end;
flex-wrap: wrap;
img {
padding-bottom: 30px;
}
}
img {
max-width: none;
}
.hide-pc {
display: none;
}
}
}
}