.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}@font-face {
font-family: 'Inter';
src: local('Inter Bold Italic'), local('Inter-BoldItalic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-BoldItalic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-BoldItalic.woff) format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Medium Italic'), local('Inter-MediumItalic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-MediumItalic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-MediumItalic.woff) format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Thin Italic BETA'), local('Inter-ThinItalicBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ThinItalicBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ThinItalicBETA.woff) format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Regular'), local('Inter-Regular'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Regular.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Black'), local('Inter-Black'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Black.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Black.woff) format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Black Italic'), local('Inter-BlackItalic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-BlackItalic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-BlackItalic.woff) format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Light BETA'), local('Inter-LightBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-LightBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-LightBETA.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Semi Bold'), local('Inter-SemiBold'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-SemiBold.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-SemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Extra Bold Italic'), local('Inter-ExtraBoldItalic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraBoldItalic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraBoldItalic.woff) format('woff');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Bold'), local('Inter-Bold'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Bold.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Extra Light Italic BETA'), local('Inter-ExtraLightItalicBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraLightItalicBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraLightItalicBETA.woff) format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Extra Light BETA'), local('Inter-ExtraLightBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraLightBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraLightBETA.woff) format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Extra Bold'), local('Inter-ExtraBold'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraBold.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ExtraBold.woff) format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Thin BETA'), local('Inter-ThinBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ThinBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-ThinBETA.woff) format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Light Italic BETA'), local('Inter-LightItalicBETA'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-LightItalicBETA.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-LightItalicBETA.woff) format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Italic'), local('Inter-Italic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Italic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Italic.woff) format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Semi Bold Italic'), local('Inter-SemiBoldItalic'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-SemiBoldItalic.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-SemiBoldItalic.woff) format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: local('Inter Medium'), local('Inter-Medium'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Medium.woff2) format('woff2'),
url(//vbrand.ru/wp-content/themes/VbrandThreme/styles/fonts/Inter-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}:root {
--clr-yellow: #FAE04F;
--clr-black: #000000;
--clr-white: #F5F5F5;
--clr-stoke-gray: #D3D3D3;
--clr-bg-gray: #E7E7E74D;
--index: calc(1vw + 1vh);
}
body {
font-family: 'Inter';
background-color: #f5f5f5;
}
button {
border: none;
outline: none;
cursor: pointer;
background: transparent;
}
.container {
margin: 0 auto;
max-width: 1920px;
box-sizing: border-box;
}
.section__title {
color: var(--clr-black);
font-size: 56px;
font-weight: 500;
line-height: 100%;
letter-spacing: -5%;
}
.basic__text {
color: var(--clr-black);
font-size: 21px;
font-weight: 500;
line-height: 140%;
letter-spacing: -1px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-black);
font-size: 16px;
font-weight: 500;
line-height: 140%;
letter-spacing: -4%;
transition: .3s ease-in-out;
background-color: var(--clr-yellow);
outline: none;
border: none;
cursor: pointer;
border-radius: 100px;
}
.btn:hover {
color: var(--clr-yellow);
background-color: var(--clr-black);
}
html {
scroll-behavior: smooth;
}
@media screen and (max-width: 1920px) {
.container {
margin: 0 auto;
max-width: 1432px;
}
}
@media screen and (max-width: 1440px) {
.container {
max-width: 90%;
}
}
@media screen and (max-width: 1240px) {
.container {
max-width: 946px;
}
}
@media screen and (max-width: 946px) {
.container {
max-width: 90%;
}
.section__title {
font-size: 28px;
}
.basic__text {
font-size: 14px;
letter-spacing: -4%;
}
}.header {
position: fixed;
top: 0;
left: 0;
padding: 28px 5%;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.header.active {
border-bottom: 1px solid var(--clr-stoke-gray);
background-color: #f5f5f530;
backdrop-filter: blur(10px);
}
.header__nav {
display: flex;
align-items: center;
gap: 10px;
}
.header__link {
padding: 10px 14px;
text-decoration: none;
color: var(--clr-black);
font-size: 16px;
font-weight: 500;
line-height: 140%;
letter-spacing: -4%;
border-radius: 100px;
transition: .3s ease-in-out;
}
.header__link:hover {
background-color: #10101010;
}
.header__btn {
padding: 10px 41px;
}
.btn__burger {
display: none;
} .burger__menu {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.5);
backdrop-filter: blur(10px);
z-index: 11;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.burger__menu-wrap {
padding: 10% 0;
width: 90%;
border: 1px solid var(--clr-stoke-gray);
border-radius: 12px;
background: #fff;
}
.burger__menu.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.burger__menu-list {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
transform: translateY(-20px);
opacity: 0;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
list-style: none;
}
.burger__menu-item:not(:first-child) {
padding-top: 24px;
}
.burger__menu-item:not(:last-child) {
padding-bottom: 24px;
border-bottom: 1px solid var(--clr-stoke-gray);
}
.burger__menu.show .burger__menu-list {
transform: translateY(0);
opacity: 1;
}
.burger__menu-link {
padding-left: 24px;
display: block;
color: var(--clr-black);
text-decoration: none;
border-radius: 8px;
}
.burger__menu-link:hover {
background: #10101010;
}
.burger__menu-btn {
margin-top: 8px;
width: 100%;
} .no-scroll {
overflow: hidden !important;
}
@media screen and (max-width: 1024px) {
.header__nav {
display: none;
}
.header__btn {
display: none;
}
.btn__burger {
display: flex;
outline: none;
border: none;
background: transparent;
}
.btn__burger::before {
content: ' ';
height: 65px;
width: 65px;
display: block;
background: no-repeat url(//vbrand.ru/wp-content/themes/VbrandThreme/images/marketing-po-podpiske/burger.svg) center / cover;
}
}
@media screen and (max-width: 946px) {
.header {
padding: 14px 5%;
}
.btn__burger::before {
height: 42px;
width: 42px;
}
}.hero {
position: relative;
padding: 150px 0 0; display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
background: no-repeat url(//vbrand.ru/wp-content/themes/VbrandThreme/images/marketing-po-podpiske/background.png) center / cover;
}
.hero::after {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100px;
background: #f5f5f5;
background: linear-gradient(0deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
}
.hero::before {
position: absolute;
bottom: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100px;
background: #f5f5f5;
background: linear-gradient(180deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
}
.hero__article {
max-width: 1920px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.hero__title {
margin: 0 0 30px;
height: calc(var(--index) * 9);
width: 100%;
position: relative;
display: flex;
flex-direction: column;
color: var(--clr-black);
font-size: calc(var(--index) * 5);
font-weight: 500;
line-height: 90%;
letter-spacing: -5%;
white-space: nowrap;
text-transform: uppercase;
}
.hero__title span:first-child {
position: absolute;
top: 0;
left: 0;
}
.hero__title span:last-child {
position: absolute;
bottom: 0;
right: 0;
}
.hero__subtitle {
margin-bottom: 50px;
max-width: 550px;
text-align: center;
}
.hero__btn {
padding: 22px 24px;
}
.hero__advantage {
max-width: 1920px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
align-self: stretch;
gap: 10px;
}
.advantage__item {
padding: 30px 30px 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
backdrop-filter: blur(15px);
}
.advantage__item::before {
top: 30px;
left: 48%;
content: '';
height: 20px;
width: 20px;
border-radius: 40px;
display: block;
background-color: var(--clr-yellow);
}
.advantage__title {
margin: 0;
color: var(--clr-black);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -1.6px;
}
.advantage__subtitle {
margin: 0;
color: #747474;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.64px;
}
@media screen and (max-width: 1920px) {
.hero__article {
max-width: 90%;
}
.hero__advantage {
max-width: 90%;
}
}
@media screen and (max-width: 1024px) {
.hero__title {
margin: 0;
font-size: calc(var(--index) * 4);
line-height: 130%;
}
.hero__subtitle {
margin: 40px 0;
}
.hero__advantage {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.advantage__item.one { grid-area: 1 / 1 / 2 / 3; }
.advantage__item.two { grid-area: 1 / 3 / 2 / 5; }
.advantage__item.three { grid-area: 1 / 5 / 2 / 7; }
.advantage__item.four { grid-area: 2 / 1 / 3 / 4; }
.advantage__item.five { grid-area: 2 / 4 / 3 / 7; }
}
@media screen and (max-width: 568px) {
.hero__title {
height: auto;
font-size: 40px;
align-items: center;
}
.hero__title span:first-child { position: relative; }
.hero__title span:last-child { position: relative; }
.hero__subtitle {
margin: 20px 0 40px;
max-width: 280px;
}
.hero__btn {
padding: 14px 20px;
}
.hero__advantage {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 6px;
grid-row-gap: 6px;
}
.advantage__item {
padding: 10px 10px 16px;
gap: 4px;
border-radius: 10px;
}
.advantage__item.one { grid-area: 1 / 1 / 2 / 4; }
.advantage__item.two { grid-area: 1 / 4 / 2 / 7; }
.advantage__item.three { grid-area: 2 / 1 / 3 / 4; }
.advantage__item.four { grid-area: 2 / 4 / 3 / 7; }
.advantage__item.five { grid-area: 3 / 2 / 4 / 6; }
.advantage__item::before {
top: 30px;
left: 48%;
content: '';
height: 8px;
width: 8px;
}
.advantage__title {
font-size: 16px;
}
.advantage__subtitle {
font-size: 10px;
}
} .case {
padding-top: 100px;
}
.case__title {
margin-bottom: 50px;
text-align: center;
color: var(--clr-black);
font-size: 58px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: -2.9px;
}
.case__list {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(3, 578px);
grid-column-gap: 10px;
grid-row-gap: 80px;
}
.case__item.one { grid-area: 1 / 1 / 2 / 7; }
.case__item.two { grid-area: 1 / 7 / 2 / 11; }
.case__item.three { grid-area: 2 / 5 / 3 / 11; }
.case__item.four { grid-area: 2 / 1 / 3 / 5; }
.case__item.five { grid-area: 3 / 1 / 4 / 7; }
.case__item.six { grid-area: 3 / 7 / 4 / 11; }
.case__item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
align-self: stretch;
text-decoration: none;
text-align: left;
}
.case__item:hover .case__item-title {
padding: 0 0 0 60px;
}
.case__item-wrap {
width: 100%;
display: flex;
overflow: hidden;
border-radius: 30px;
border: 1px solid var(--clr-stroke-gray);
background: rgba(231, 231, 231, 0.30);
}
.case__item-wrap picture {
width: 100%;
}
.case__item-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.case__item-title {
padding: 0 30px;
margin: 0;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.84px;
transition: .3s ease-in-out;
}
@media screen and (max-width: 568px) {
.case__title {
margin-bottom: 30px;
font-size: 28px;
letter-spacing: -1.4px;
}
.case__list {
padding: 0 0 50px;
display: flex;
flex-direction: column;
gap: 30px;
}
.case__item-wrap {
width: 100%;
}
.case__item-wrap picture {
width: 100%;
}
.case__title {
margin: 0;
margin-bottom: 30px;
}
.case__item-title {
padding: 0 14px;
font-size: 14px;
letter-spacing: -0.56px;
}
} .marketing {
padding: 100px 0;
}
.marketing__title {
max-width: 770px;
margin: 0 auto 50px;
color: #101010;
text-align: center;
font-size: 58px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: -2.9px;
}
.marketing__list {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(3, 300px);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.marketing__item {
padding: 40px;
border-radius: 30px;
border: 1px solid var(--clr-stroke-gray);
background: rgba(231, 231, 231, 0.50);
}
.marketing__item.one { grid-area: 1 / 1 / 2 / 5; }
.marketing__item.two { grid-area: 1 / 5 / 2 / 11; }
.marketing__item.three { grid-area: 2 / 6 / 3 / 11; }
.marketing__item.four { grid-area: 2 / 1 / 3 / 6; }
.marketing__item.five { grid-area: 3 / 1 / 4 / 7; }
.marketing__item.six { grid-area: 3 / 7 / 4 / 11; }
.marketing__article {
max-width: 487px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
}
.marketing__item-title {
margin: 0;
color: var(--clr-black);
font-size: 38px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -1.9px;
}
.marketing__item-subtitle {
margin: 0;
max-width: 320px;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.84px;
}
.marketing__img {
display: none;
}
@media screen and (max-width: 568px) {
.marketing {
padding: 50px 0;
}
.marketing__title {
margin: 0 auto 30px;
font-size: 28px;
letter-spacing: -1.9px;
}
.marketing__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.marketing__item {
padding: 14px;
height: 150px;
border-radius: 10px;
}
.marketing__item-title {
font-size: 22px;
}
.marketing__item-subtitle {
font-size: 14px;
}
} .client {
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.client__list-geo {
display: flex;
max-width: 1096px;
justify-content: center;
align-items: center;
align-content: center;
gap: 10px;
flex-wrap: wrap;
}
.client__item-geo {
padding: 10px 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
background: rgba(231, 231, 231, 0.30);
}
.client__item-title {
margin: 0;
color: var(--clr-black);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.64px;
}
.client__title {
margin: 0;
text-align: center;
}
.infinity__carousel-container {
max-width: 1920px;
overflow: hidden;
}
.infinity__carousel {
position: relative;
}
.infinity__carousel::after {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
height: 100%;
width: 200px;
background: #ffffff;
background: linear-gradient(270deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
z-index: 1;
}
.infinity__carousel::before {
position: absolute;
top: 0;
right: 0;
content: '';
display: block;
height: 100%;
width: 200px;
background: #ffffff;
background: linear-gradient(90deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
z-index: 1;
}
.client__list-brand {
display: flex;
flex-direction: column;
gap: 10px;
}
.infinity__carousel-top {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.infinity__carousel-bottom {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.client__item-brand {
width: 315px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
border: 1px solid var(----clr-stroke-grey, #D3D3D3);
background: rgba(231, 231, 231, 0.50);
}
.client__item-img {
object-fit: contain;
}
@keyframes infinity-scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes infinity-scroll-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.infinity__track {
display: flex;
width: max-content;
}
.infinity__animate-left {
animation: infinity-scroll-left linear infinite;
}
.infinity__animate-right {
animation: infinity-scroll-right linear infinite;
}
@media screen and (max-width: 1920px) {
.infinity__carousel-container {
max-width: 1432px;
overflow: hidden;
}
}
@media screen and (max-width: 1432px) {
.infinity__carousel-container {
max-width: 100%;
}
}
@media screen and (max-width: 1024px) {
.client__item-brand {
width: 215px;
height: 102px;
}
}
@media screen and (max-width: 946px) {
.client {
padding: 50px 0;
}
.client__item-brand {
width: 121px;
height: 68px;
}
.client__item-img {
max-height: 50%;
max-width: 80%;
}
.infinity__carousel::after {
width: 50px;
}
.infinity__carousel::before {
width: 50px;
}
.client__item-brand {
border-radius: 10px;
}
.client__item-geo {
padding: 6px 10px;
}
.client__item-title {
font-size: 10px;
}
} .team {
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.team__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.team__title {
margin: 0;
max-width: 1096px;
text-align: center;
color: var(--clr-black);
font-size: 58px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: -2.9px;
}
.team__subtitle {
margin: 0;
max-width: 648px;
text-align: center;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 140%;
letter-spacing: -0.84px;
}
.team__table {
width: 100%;
pointer-events: none;
}
.team__develop {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.team__develop-title {
margin: 0;
}
.team__list {
padding-left: 80px;
max-height: 52px;
display: flex;
}
.team__item {
height: 52px;
width: 52px;
}
.team__item-two {
transform: translateX(-20px);
}
.team__item-three {
transform: translateX(-40px);
}
.team__item-four {
transform: translateX(-60px);
}
.team__item-five {
transform: translateX(-80px);
}
@media screen and (max-width: 946px) {
.team {
padding: 50px 0;
}
.team__header {
gap: 16px;
}
.team__title {
font-size: 28px;
letter-spacing: -1.4px;
}
.team__subtitle {
font-size: 14px;
letter-spacing: -0.56px;
}
.team__develop-title {
font-size: 22px;
letter-spacing: -1.1px;
}
.team__list {
padding: 0;
max-width: 65%;
}
} .pricing {
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.pricing__header {
max-width: 1432px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.pricing__title {
margin: 0;
max-width: 1096px;
text-align: center;
}
.pricing__subtitle {
margin: 0;
text-align: center;
}
.pricing__wrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.pricing__mount {
padding: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
border-radius: 100px;
border: 1px solid var(--clr-stoke-gray);
background-color: rgba(231, 231, 231, 0.30);
}
.pricing__mount-btn {
padding: 10px 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: var(--clr-black);
border-radius: 100px;
transition: .3s ease-in-out;
}
.pricing__mount-btn.active {
color: var(--clr-white);
background-color: var(--clr-black);
}
.pricing__mount-btn .gray {
padding: 2px 4px;
color: #747474;
opacity: 0;
}
.pricing__mount-btn .yellow {
padding: 2px 4px;
color: var(--clr-black);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.56px;
border-radius: 10px;
background: var(--clr-yellow);
}
.pricing__mount-btn:hover {
color: var(--clr-white);
background-color: var(--clr-black);
}
.swiper {
width: 100%;
height: 100%;
}
.pricing__wrapper {
height: 320px !important;
}
.pricing__slide {
display: flex !important;
align-items: center;
}
.swiper-slide.pricing__item { flex: 0 0 auto;
}
.pricing__item {
position: relative;
padding: 30px 30px 60px;
display: flex;
flex-direction: column;
align-items: center;
flex: 1 0 0;
gap: 26px;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
transition: padding .3s ease-in-out, box-shadow .3s ease-in-out, transform .3s ease-in-out;
overflow: hidden;
}
.pricing__item p,span {
margin: 0;
}
.pricing__item-header {
padding: 8px 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #747474;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.6px;
border-radius: 100px;
border: 1px solid #747474;
}
.pricing__time {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 10px;
color: var(--clr-black);
font-size: 38px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: -1.9px;
}
.pricing__time span {
color: rgba(16, 16, 16, 0.40);
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -1.05px;
}
.pricing__price-list {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 12px;
}
.pricing__price {
color: var(--clr-black);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.64px;
}
.pricing__price span {
color: rgba(16, 16, 16, 0.40);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.64px;
}
.price__btn {
padding: 22px 24px;
width: 90%;
position: absolute;
bottom: -150px;
display: flex;
justify-content: center;
align-items: center;
color: var(--clr-white);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.64px;
border-radius: 100px;
background: var(--clr-black);
transition: bottom .3s ease-in-out, transform .3s ease-in-out;
}
.price__btn:hover {
color: var(--clr-yellow);
}
.pricing__item:hover {
padding-bottom: 120px;
background-color: var(--clr-yellow);
}
.pricing__item.active {
padding-bottom: 120px;
background-color: var(--clr-yellow);
}
.pricing__item:hover .price__btn {
bottom: 30px;
}
.pricing__item.active .price__btn {
bottom: 30px;
}
.pricing__info {
width: 100%;
padding: 30px;
display: flex;
align-items: flex-start;
justify-content: space-around;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
box-sizing: border-box;
}
.pricing__info-list {
max-width: 298px;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.pricing__info-item {
display: flex;
align-items: center;
gap: 10px;
}
.pricing__info-item::before {
content: '✓';
color: #747474;
}
.pricing__info-text {
margin: 0;
color: #747474;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.8px;
}
.pricing-pagination {
text-align: center;
}
.swiper-pagination-bullet-active {
background: var(--clr-yellow) !important;
}
@media screen and (max-width: 1440px) {
.pricing__item {
gap: 24px;
}
.pricing__time {
font-size: 24px;
letter-spacing: -1.5px;
}
.pricing__price-list {
gap: 6px;
}
.pricing__price {
font-size: 11px;
}
}
@media screen and (max-width: 1240px) {
.pricing__item {
position: relative;
padding: 20px;
gap: 20px;
}
.pricing__info-text {
font-size: 12px;
}
.pricing__item.active {
padding-bottom: 0;
padding: 20px;
}
.pricing__item.active .price__btn {
bottom: 0;
}
.price__btn {
position: relative !important;
bottom: 0;
}
.pricing__wrapper {
height: 280px !important;
}
}
@media screen and (max-width: 946px) {
.pricing {
padding: 50px 0;
}
.pricing__mount {
width: 100%;
padding: 4%;
display: flex;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}
.pricing__mount-btn { padding: 2% 4%;
gap: 6px;
font-size: 3.6vw;
letter-spacing: -0.48px;
}
.pricing__mount-btn .yellow {
font-size: 8px;
letter-spacing: -0.32px;
}
.pricing__mount-btn .gray {
display: none;
}
.pricing__info {
padding: 20px;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
}
.pricing__info-title {
margin: 0;
margin-bottom: 20px;
}
.pricing__info-list {
gap: 12px;
}
}
@media screen and (max-width: 380px) {
.pricing__mount-btn {
font-size: 12px;
}
}
@media screen and (max-width: 320px) {
.pricing__mount-btn {
font-size: 10px;
}
} .review {
padding: 100px 0 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.review__header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.review__title {
margin: 0;
}
.review__swiper {
position: relative;
}
.review__slide { padding: 30px;
display: flex;
align-items: flex-start;
gap: 40px;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
}
.review__info {
min-height: 340px;
max-width: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.review__article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 14px;
}
.review__photo {
width: 66px;
height: 66px;
}
.review__title {
margin: 0;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 140%; letter-spacing: -0.84px;
}
.review__subtitle {
margin: 0;
color: #747474;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.56px;
}
.review__company {
height: 60px;
object-fit: cover;
}
.line {
display: flex;
max-height: 100%;
align-self: stretch;
width: 1px;
background-color: var(--clr-black);
}
.review__content {
max-width: 810px;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -1.05px;
}
.review-button {
position: absolute;
top: 30px;
cursor: pointer;
z-index: 4;
transition: .3s ease-in-out;
}
.review-button:hover {
transform: scale(1.05);
}
.review-button-next {
right: 30px;
}
.review-button-prev {
right: 106px;
}
.review-button-next::after {
content: '';
display: block;
height: 66px;
width: 66px;
background: no-repeat url(//vbrand.ru/wp-content/themes/VbrandThreme/images/marketing-po-podpiske/next.svg) center / cover;
}
.review-button-prev::after {
content: '';
display: block;
height: 66px;
width: 66px;
background: no-repeat url(//vbrand.ru/wp-content/themes/VbrandThreme/images/marketing-po-podpiske/prev.svg) center / cover;
}
@media screen and (max-width: 1432px) {
.review__content {
max-width: 324px;
}
}
@media screen and (max-width: 946px) {
.review__slide {
padding: 20px;
flex-direction: column;
gap: 20px;
}
.line {
display: none;
}
.review__info {
min-height: auto;
max-width: 100%;
padding-bottom: 20px;
gap: 15px;
border-bottom: 1px solid var(--clr-stoke-gray);
}
.review__content {
max-width: 100%;
}
.review__title {
font-size: 21px;
letter-spacing: -0.84px;
}
.review__subtitle {
font-size: 14px;
letter-spacing: -0.56px;
}
.review__content {
font-size: 12px;
letter-spacing: -0.6px;
}
.review__button {
top: 20px;
}
.review-button-next {
right: 20px;
}
.review-button-prev {
right: 62px;
}
.review-button-next::after {
height: 32px;
width: 32px;
}
.review-button-prev::after {
height: 32px;
width: 32px;
}
} .contact {
position: relative;
padding: 100px 0 0;
display: flex;
flex-direction: column;
gap: 60px;
background: no-repeat url(//vbrand.ru/wp-content/themes/VbrandThreme/images/marketing-po-podpiske/background_footer.webp) bottom / cover;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: 0;
display: block;
width: 100%;
height: 486px;
background: linear-gradient(0deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
}
.contact__wrap {
position: relative;
display: flex;
align-items: center;
align-self: stretch;
justify-content: space-between;
z-index: 8;
}
.contact__block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.section__article h2 {
margin: 0;
color: var(--clr-black);
font-size: 58px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: -2.9px;
}
.section__article p {
max-width: 380px;
color: var(--clr-black);
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -1.05px;
}
.contact__info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact__data {
display: flex;
flex-direction: row;
gap: 16px;
}
.contact__data-art {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact__data-link {
color: var(--clr-black);
text-decoration: none;
}
.contact__icon {
padding: 14px;
width: 18px;
height: 18px;
text-decoration: none;
border-radius: 6px;
background-color: var(--clr-black);
}
.contact__icon-link {
text-decoration: none;
}
.contact__data-title {
margin: 0;
}
.contact__data-line {
margin: 16px 0;
display: block;
height: 1px;
width: 100%;
background-color: var(--clr-black);
}
.form__block {
padding: 32px;
max-width: 712px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
backdrop-filter: blur(15px);
}
.contact__form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.contact__form-wrap {
width: 100%;
display: flex;
flex-direction: row;
gap: 32px;
}
.contact__form-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.contact__form-group input,textarea {
width: 100%;
padding: 18px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 6px;
background: var(--clr-white);
outline: none;
border: none;
cursor: pointer;
box-sizing: border-box;
resize: none;
}
.contact__btn {
padding: 22px 24px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 100px;
background: var(--clr-yellow);
}
@media screen and (max-width: 1440px) {
.form__block {
max-width: 480px;
}
}
@media screen and (max-width: 1280px) {
.contact__wrap {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.form__block {
padding: 32px 10px;
}
.contact__wrap {
gap: 32px;
}
.contact__form-wrap {
flex-direction: column;
gap: 24px;
}
.section__article h2 {
font-size: 28px;
}
.section__article p {
font-size: 14px;
}
} .footer {
padding: 20px 60px 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
border-top: 1px solid rgba(159, 159, 159, 0.20);
}
.footer__nav {
display: flex;
align-items: center;
}
.footer__text {
color: var(--clr-black);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.footer__text:not(:last-child) {
margin-right: 4px;
}
.logo {
display: flex;
align-items: center;
gap: 6px;
color: var(--clr-black);
font-size: 16px;
font-weight: 500;
text-decoration: none;
}
@media screen and (max-width: 768px) {
.footer {
padding: 28px 6px;
gap: 48px;
flex-direction: column;
}
.footer__nav {
flex-direction: column;
}
} .marketing-modal {
position: fixed;
top: 0;
right: 0;
padding: 5% 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
background-color: #00000080;
z-index: 1000;
}
.marketing-modal__close {
position: absolute;
top: 5%;
right: 5%;
margin: 0;
color: var(--clr-white);
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 60%;
}
.marketing-modal__title {
margin: 0;
}
.marketing-modal__content {
padding: 30px;
height: max-content;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
border-radius: 30px;
border: 1px solid var(--clr-stoke-gray);
background: rgba(231, 231, 231, 0.30);
backdrop-filter: blur(15px);
}
.marketing-modal__form {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.marketing-modal__label {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.marketing-modal__label span {
color: var(--clr-black);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
}
.marketing-modal__input {
padding: 10px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #747474;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
border-radius: 6px;
background: #F5F5F5;
outline: none;
border: none;
cursor: pointer;
}
.marketing-modal__textarea {
padding: 10px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #747474;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
border-radius: 6px;
background: #F5F5F5;
outline: none;
border: none;
cursor: pointer;
}
.privacy__link {
color: var(--clr-black);
}
.marketing-modal__submit {
padding: 22px 24px;
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
@media screen and (max-width: 578px) {
.marketing-modal {
padding: 5%;
width: auto;
overflow-x: hidden;
}
.marketing-modal__content {
padding: 5%;
}
.marketing-modal__label span {
font-size: 14px;
}
.marketing-modal__input {
font-size: 12px;
}
.contact__checkbox-label {
font-size: 14px;
}
.marketing-modal__submit {
padding: 12px;
}
}