.io__popup {
max-width: 900px;
margin: 0 auto;
position: relative
}
#landpage__io {
& {margin-bottom: -100px;}
& .section__black {
background: linear-gradient(90deg, #050819 0%, #070A1B 100%);
color: var(--color-white);
background-color: #050819;
}
& .io__tech-block-video {
& {
width: 100px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
border: 1px solid var(--color-white);
border-radius: 50%;
}
&:after {
width: 20%;
aspect-ratio: 1;
display: block;
content: '';
background: var(--color-white);
transform: rotate(135deg);
clip-path: polygon(0 0, 0% 100%, 100% 0);
margin-right: 10%;
transition: .3s background ease;
}
&:hover {border-color: var(--color-dark-blue);}
&:hover:after {background: var(--color-dark-blue);}
}
& .io__header {
& {position: relative;min-height: 700px;}
& img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
& .container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
& .io__header-row {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
& .io__header-column {
& {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
font-size: var(--font-size-price);
line-height: 1.4;
align-items: flex-start;
margin: 0 0 17% -3%;
}
& h1 {
margin: 0;
color: inherit;
font-weight: 450;
font-size: var(--font-size-title);
text-transform: uppercase;
}
& p {margin: 0;}
& ul {
padding: 0 0 0 var(--spacing-large);
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-large);
list-style: disc;
}
& .io__header-ratings {
& {
display: flex;
gap: var(--spacing-small);
align-items: center;
font-size: var(--font-size-large);
}
& span {margin-left: var(--spacing-small);}
}
}
& .btn {width: 202px;font-size: var(--font-size-price);}
}
& .io__module {
& {overflow: hidden;}
& .container {max-width: 1400px;}
& .io__module-btn {
& {
text-align: center;
margin: var(--spacing-medium) auto;
font-size: var(--font-size-price);
c(.75: *);
font-weight: 450;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-medium);
}
&:before {
content: url('data:image/svg+xml,');
height: 24px;
}
}
}
& .io__series {
& {padding: var(--spacing-extra) 0;}
& .container {max-width: 1460px}
& .io__row {display: flex;}
& .io__row-colors-series {gap: var(--spacing-medium);}
& .io__seriaBlock-colors {gap: var(--spacing-medium);margin: var(--spacing-large) 0;}
& .io__seriaBlock-color {
display: block;
width: 45px;
height: 45px;
border: 1px solid var(--color-white);
border-radius: 50%;
box-sizing: border-box;
}
& .io__seriaBlock-colorSupW {
background: url('data:image/svg+xml,') no-repeat center center / cover
}
& .io__seriaBlock-colorSupB {
background: url('data:image/svg+xml,') no-repeat center center / cover
}
& .io__seriaBlock-colorGray {background: #2A2C33}
& .io__seriaBlock-colorWhite {background: #F5F5F5}
& .io__seriaBlock-colorPink {background: #F7CACA}
& .io__seriaBlock-colorPurpl {background: #4F2C6E}
& .io__seriaBlock-colorBlue {background: #617495}
& .io__seriaBlock-colorLgray {background: #BDBFC3}
& .io__seriaBlock-colorDgray {background: #1C1F29}
& .io__seriaBlock-colorLpurp {background: #AEA0BE}
& .io__seriaBlock-colorLblue {background: #B2CCE1}
& .io__slider {margin: 0;width: 100%;}
& .io__slide .io__seriaBlock-logo {
& {
display: inline-flex;
align-items: center;
gap: 1px;
font-size: var(--font-size-subtitle);
line-height: 1;
letter-spacing: 10px;
text-transform: uppercase;
}
& span {font-size: 4em;letter-spacing: normal;}
}
& .io__slide .io__seriaBlock-logoM,& .io__slide .io__seriaBlock-colorM {display: none}
& .io__slider-column {
display: flex;
color: var(--wh);
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-left: 0;
}
& .io__slider-list {
padding-left: var(--spacing-medium);
font-size: var(--font-size-body);
lc(: 1.2); margin: 0;
flex-grow: 1;
opacity: .6;
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
list-style: disc;
}
& .io__slide .io__seriaBlock-btn {padding: 0 var(--spacing-medium);margin-left: var(--spacing-medium);}
& .io__slide .io__seriaBlock-btnm {display: none}
& .io__slider-next, & .io__slider-prev {
& {}
&[class*="-prev"] {left: -4px;}
&[class*="-next"] {right: -4px;}
}
}
& .io__tech {
& {padding: var(--spacing-extra) 0;text-align: center;}
& .container {max-width: 1460px;}
& .io__tech-title {margin-bottom: var(--spacing-large);font-size: var(--font-size-subtitle);}
& .io__tech-text {margin-bottom: var(--spacing-large);font-size: var(--font-size-price);}
& .io__tech-row {
& {
--gutter-x: 10px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0 calc(-1 * var(--gutter-x));
gap: calc(2.5 * var(--gutter-x)) 0;
}
& > div {padding: 0 var(--gutter-x);}
}
& .io__tech-block {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
}
& .io__tech-block-thumb {
& {position: relative;aspect-ratio: 1 / .7362;}
& img {width: 100%;height: 100%;object-fit: cover;}
}
& .io__tech-block-video {
& {background: rgba(0,0,0,.5);}
}
& .io__tech-block-descr {display: flex;flex-direction: column;gap: var(--spacing-small);}
& .io__tech-block-title {font-size: var(--font-size-large);margin: 0;}
& .io__tech-block-text {font-size: var(--font-size-price);margin: 0;}
& .io__tech-block-small {margin: 0;font-size: var(--font-size-small);}
}
& .io__magnetic {
& {position: relative;aspect-ratio: 2 / 1;}
& img {
max-width: 100%;
display: block;
width: 100%;
}
& .container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
& .io__magnetic-row {height: 100%;padding-top: 10%;}
& .io__magnetic-column {
display: flex;
flex-direction: column;
color: var(--color-white);
gap: var(--spacing-large);
align-items: flex-start;
}
& .io__magnetic-title {
font-size: var(--font-size-title);
line-height: 1.2;
font-weight: 450;
}
& .io__magnetic-text {
font-size: var(--font-size-price);
margin: 0;
letter-spacing: .5px;
line-height: 1.45;
}
& .io__tech-block-video {
position: relative;
transform: none;
top: 0;
left: 0;
margin-top: 33px;
}
}
& .io__footer {
& {position: relative;aspect-ratio: 3 / 1.64;}
& img {display: block;width: 100%;}
& .container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
& .io__footer-row {
height: 100%;
display: flex;
align-items: center;
}
& .io__footer-column {
display: flex;
flex-direction: column;
color: var(--color-white);
gap: var(--spacing-large);
align-items: flex-start;
justify-content: center;
}
& .io__footer-title {
font-size: var(--font-size-title);
line-height: 1.2;
font-weight: 450;
}
& .io__footer-text {
& {
font-size: var(--font-size-body);
font-weight: 700;
margin: 0;
text-decoration: underline;
display: flex;
gap: 10px;
align-items: center;
line-height: 1.1;
letter-spacing: .45px;
}
&:before {
content: '';
width: 16px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--wh) url('data:image/svg+xml,') no-repeat center center;
}
&:hover {
opacity: .5
}
&:hover:before {
}
}
}
& .io__table {
& {
padding: var(--spacing-extra) 0;
text-align: center;
background: var(--color-light-blue);
}
}
}
@media screen and (max-width: 1900px) {
#landpage__io {
& .io__header {
& .io__header-column {
& {
margin: 0;
}
}
}
& .io__series {
& .io__slider-next, & .io__slider-prev {
& {}
&[class*="-prev"] {left: 4px;}
&[class*="-next"] {right: 4px;}
}
}
}
}
@media screen and (max-width: 1199px) {
#landpage__io {
& .io__header {
& {min-height: 50vw;}
& .io__header-column {
& {gap: 1vw;font-size: 1.5vw;}
& h1 {font-size: 2.5vw;}
& ul {gap: 1vw;padding-left: 2vw;}
& .io__header-ratings {
& {font-size: 1.3vw;}
}
}
& .btn {height: 4vw;width: 16vw;font-size: 1.5vw;}
}
& .io__module {
& .io__module-btn {
& {margin: 2vw 0 1.1vw;gap: 1vw;}
}
& iframe {height: 66vw;}
}
& .io__series {
& {padding: 5vw 0 4vw;}
}
& .io__tech {
& {padding: 5vw 0 9vw;}
& .io__tech-title {margin-bottom: 2vw;font-size: 3.5vw;}
& .io__tech-text {font-size: 2vw;margin-bottom: 2vw;}
& .io__tech-row {
& {--gutter-x: .75vw;}
}
& .io__tech-block {gap: 1.9vw;}
& .io__tech-block-descr {gap: 1vw;}
& .io__tech-block-title {font-size: 2vw;}
& .io__tech-block-text {font-size: 1.6vw;}
& .io__tech-block-small {font-size: 1.4vw;}
}
& .io__magnetic {
& .io__magnetic-column {margin: 0;gap: 2vw;}
& .io__magnetic-title {font-size: 3.5vw;}
& .io__magnetic-text {font-size: 1.7vw;}
& .io__tech-block-video {margin-top: 2vw;}
}
& .io__footer {
& .io__footer-column {margin: 0;gap: 2vw;}
& .io__footer-title {font-size: 4.5vw;}
& .io__footer-text {
& {font-size: 1.5vw;}
}
}
& .io__table {
& {padding: 4vw 0;}
}
}
}
@media screen and (max-width: 991px) {
#landpage__io {
& {margin-bottom: -60px;overflow: hidden;}
& .io__tech-block-video {
& {width: 10vw;}
}
& .io__header {
& .io__header-column {
& {}
}
}
& .io__tech {
& {padding: 5vw 0;}
& .io__tech-text {font-size: 2.25vw;}
& .io__tech-row {
& {--gutter-x: 2vw;}
}
& .io__tech-block {gap: calc(2 * var(--gutter-x));}
& .io__tech-block-title {font-size: 2.5vw;}
& .io__tech-block-text {font-size: 2.5vw;}
& .io__tech-block-small {font-size: 2vw;}
}
& .io__magnetic {
& .io__magnetic-text {font-size: 2.25vw;}
& .io__tech-block-video {margin: 0;}
}
& .io__table {
& {padding: 5vw 0;}
}
}
}
@media screen and (max-width: 767px) {
#landpage__io {
& .io__tech-block-video {
& {width: 18%;}
}
& .io__header {
& {height: 303vw;}
& .io__header-row {align-items: flex-start;padding-top: 87vw;}
& .col-12 {width: 100%}
& .io__header-column {
& {
margin: 0;
gap: 5vw;
font-size: 4.26vw;
line-height: 1.55;
}
& br {display: none}
& h1 {font-size: 7.7vw;}
& ul {padding-left: 6.5vw;gap: 6vw;margin-top: 1vw;line-height: 1.4;margin-bottom: 1vw;}
& .io__header-ratings {
& {font-size: 4.44vw;}
}
}
& .btn {width: 100%;font-size: 5vw;height: 12vw;}
}
& .io__module {
& .io__module-btn {
& {margin: 3vw 0 4vw;gap: 4vw;font-size: 4.17vw;}
}
& iframe {height: 133.335vw;width: 100vw;left: calc(50% - 50vw);position: relative;}
}
& .io__series {
& {padding: 4vw 0 .5vw;}
& .io__row-color-min {gap: 4vw;margin: 2.2vw 0 5vw;}
& .io__seriaBlock-colors {display: none;}
& .io__slide .io__seriaBlock-logo {
& {display: none;font-size: 7.8vw;gap: 4.2vw;letter-spacing: 1.5vw;}
& span {font-size: 1.71em;}
}
& .io__slide .io__seriaBlock-logoM,& .io__slide .io__seriaBlock-colorM {display: flex;}
& .io__slider-column {padding-left: 7.5vw;}
& .io__slider-list {line-height: 1;padding-left: 5vw;padding-right: 1vw;gap: 4vw;}
& .io__slide .io__seriaBlock-btn {margin: 6vw 0 5.35vw;padding: 0 28px;}
& .io__slider-next, & .io__slider-prev {
&[class*="-prev"] {left: 20px;}
&[class*="-next"] {right: 20px;}
}
}
& .io__tech {
& {padding: 8vw 0 4vw;}
& .io__tech-title {
& {font-size: 7.3vw;margin-bottom: 5vw;letter-spacing: .4px;line-height: 1.25;}
& br {display: none}
}
& .io__tech-text {font-size: 6vw;width: 86%;margin: 0 auto 1vw;}
& .io__tech-row {
& {--gutter-x: 1.8vw;}
}
& .io__tech-block {gap: calc(2.6 * var(--gutter-x));}
& .io__tech-block-thumb {width: 100vw;left: calc(50% - 50vw);}
& .io__tech-block-descr {gap: 2vw;}
& .io__tech-block-title {
& {font-size: 5.87vw;}
& br {display: none}
}
& .io__tech-block-text {
& {font-size: 4.25vw;}
& br {display: none}
}
& .io__tech-block-small {font-size: 4.2vw;margin-top: 1vw;}
}
& .io__magnetic {
& .io__magnetic-column {gap: 3.5vw;}
& .io__magnetic-title {font-size: 6vw;}
& .io__magnetic-text {
& {font-size: 4.5vw;}
& br {display: none}
}
& .io__tech-block-video {margin: 2vw auto;}
}
& .io__footer {
& .io__footer-row {align-items: flex-start;padding-top: 8vw;}
& .io__footer-column {gap: 6vw;align-items: center;}
& .io__footer-title {
& {font-size: 7.3vw;text-align:center;}
& br {display: none}
}
& .io__footer-text {
& {font-size: 4.5vw;}
}
}
& .io__table {
& {
padding: 10vw 0;
}
}
}
}