1671 lines
29 KiB
CSS
1671 lines
29 KiB
CSS
@font-face {
|
||
font-family: 'Helvetica Neue Thin';
|
||
src: url('../fonts/HelveticaNeue-Thin.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 300 - Light */
|
||
@font-face {
|
||
font-family: 'Helvetica Neue Light';
|
||
src: url('../fonts/HelveticaNeue-Light.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 400 - Regular */
|
||
@font-face {
|
||
font-family: 'Helvetica Neue Regular';
|
||
src: url('../fonts/HelveticaNeue-Roman.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 500 - Medium */
|
||
@font-face {
|
||
font-family: 'Helvetica Neue Medium';
|
||
src: url('../fonts/HelveticaNeue-Medium.otf');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 700 - Bold */
|
||
@font-face {
|
||
font-family: 'Helvetica Neue Bold';
|
||
src: url('../fonts/HelveticaNeue-Bold.otf');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Black Ops One';
|
||
src: url('../fonts/BlackOpsOne-Regular.otf');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* Condensed Bold */
|
||
|
||
@font-face {
|
||
font-family: 'Helvetica Neue Condensed Bold';
|
||
src: url('../fonts/HelveticaNeue-Condensed-Bold.ttf');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
|
||
html {
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow-x: hidden;
|
||
min-width: 320px;
|
||
max-width: 1920px;
|
||
margin: 0px auto;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body.no-scroll {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 1. Убираем системный тап‑хайлайт */
|
||
* {
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: inherit;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
|
||
button {
|
||
cursor: pointer;
|
||
}
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: disc;
|
||
margin-left: 20px;
|
||
padding-left: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6, p {
|
||
margin: 0;
|
||
}
|
||
|
||
svg {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
blockquote {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--black-bg);
|
||
color: #fff;
|
||
font-family: 'Helvetica Neue Light', sans-serif;
|
||
font-size: 20px;
|
||
}
|
||
|
||
html.no-scroll,
|
||
body.no-scroll {
|
||
overflow: hidden;
|
||
}
|
||
|
||
html.no-scroll-modal,
|
||
body.no-scroll-modal {
|
||
overflow: hidden;
|
||
}
|
||
|
||
input[type=number]::-webkit-outer-spin-button,
|
||
input[type=number]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Для Firefox */
|
||
input[type=number] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
|
||
:root {
|
||
--black: #1F1F1F;
|
||
--black-bg: #1F1F1F;
|
||
--gray: #CCCCCC;
|
||
--gray-text: #A0A0A0;
|
||
--yellow: #ffe457;
|
||
}
|
||
|
||
input {
|
||
color: var(--black) !important;
|
||
}
|
||
|
||
/* Кастомный скролл на странице */
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--black);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: var(--yellow);
|
||
}
|
||
|
||
|
||
/* Кастомный скролл для Firefox */
|
||
|
||
@-moz-document url-prefix() {
|
||
* {
|
||
scrollbar-color: var(--black) transparent;
|
||
scrollbar-width: thin;
|
||
}
|
||
}
|
||
|
||
.h1 {
|
||
color: var(--gray);
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 100px;
|
||
font-size: clamp(48px, 5vw, 100px);
|
||
line-height: 90%;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.h2 {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: clamp(32px, 5vw, 64px);
|
||
line-height: 90%;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.h3 {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 32px;
|
||
line-height: 90%;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
/* Шапка */
|
||
|
||
.header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
min-width: 320px;
|
||
max-width: 1920px;
|
||
margin: 0px auto;
|
||
background-color: var(--black-bg);
|
||
transition: transform 0.8s cubic-bezier(.2,.9,.2,1), box-shadow 0.8s ease;
|
||
will-change: transform;
|
||
}
|
||
|
||
.header--hidden {
|
||
transform: translateY(-100%);
|
||
}
|
||
|
||
.header--visible {
|
||
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.header-container {
|
||
padding: 0px 60px;
|
||
}
|
||
|
||
.header-content {
|
||
padding: 25px 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #525252;
|
||
}
|
||
|
||
.header-omni-logo svg path {
|
||
transition: fill 0.3s ease;
|
||
fill: white;
|
||
}
|
||
|
||
.header-omni-logo:hover svg path {
|
||
fill: yellow;
|
||
}
|
||
|
||
.header-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 63px;
|
||
}
|
||
|
||
.header-links a {
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-size: 18px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.header-links a:hover {
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.telegram-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.telegram-link p {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
letter-spacing: -0.01em;
|
||
text-transform: uppercase;
|
||
text-decoration: underline;
|
||
color: #fff;
|
||
transition: color 0.3s ease, text-decoration-color 0.3s ease;
|
||
text-decoration-color: #fff;
|
||
}
|
||
|
||
.telegram-link div {
|
||
background-color: #fff;
|
||
padding: 2px 20px;
|
||
border-radius: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.telegram-link svg path {
|
||
transition: fill 0.3s ease;
|
||
}
|
||
|
||
.telegram-link:hover p {
|
||
color: var(--yellow);
|
||
text-decoration-color: var(--yellow);
|
||
}
|
||
|
||
.telegram-link:hover div {
|
||
background-color: var(--yellow);
|
||
}
|
||
|
||
.telegram-link:hover svg path {
|
||
fill: var(--black);
|
||
}
|
||
|
||
.header-telegram {
|
||
display: none;
|
||
}
|
||
|
||
.header-telegram a {
|
||
background-color: #fff !important;
|
||
color: var(--black) !important;
|
||
}
|
||
/*
|
||
.header-telegram a:hover {
|
||
background-color: var(--yellow) !important;
|
||
} */
|
||
|
||
|
||
.mobile-header {
|
||
display: none;
|
||
}
|
||
|
||
.burger-menu {
|
||
position: fixed;
|
||
top: 73px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: var(--black-bg);
|
||
z-index: 9999;
|
||
transform: translateX(100%);
|
||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
padding: 0px 40px;
|
||
box-shadow: none;
|
||
display: none;
|
||
}
|
||
|
||
.burger-menu.active {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.omni-logo {
|
||
position: absolute;
|
||
bottom: 120px;
|
||
right: 20px;
|
||
}
|
||
|
||
.omni-logo a svg path {
|
||
transition: fill 0.3s ease;
|
||
fill: #2c2c2c;
|
||
}
|
||
|
||
.omni-logo a:hover svg path {
|
||
fill: yellow;
|
||
}
|
||
|
||
.burger-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0px;
|
||
}
|
||
|
||
.burger-nav a {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 24px;
|
||
line-height: 90%;
|
||
letter-spacing: -0.02em;
|
||
color: white;
|
||
padding: 12px;
|
||
border-bottom: 1px solid #2c2c2c;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
/* Открытие/закрытие бургер меню */
|
||
.burger-menu-btn {
|
||
position: relative;
|
||
z-index: 1002;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: none;
|
||
border: none;
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-radius: 100px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.burger-menu-btn span {
|
||
display: block;
|
||
width: 20px;
|
||
height: 2px;
|
||
background-color: var(--black);
|
||
border-radius: 2px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
transform-origin: center;
|
||
}
|
||
|
||
.burger-menu-btn.active span:nth-child(1) {
|
||
transform: rotate(45deg) translate(5px, 5px);
|
||
width: 20px;
|
||
}
|
||
|
||
.burger-menu-btn.active span:nth-child(2) {
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
}
|
||
|
||
.burger-menu-btn.active span:nth-child(3) {
|
||
transform: rotate(-45deg) translate(5px, -5px);
|
||
width: 20px;
|
||
}
|
||
|
||
|
||
/* Адаптив шапки */
|
||
|
||
@media (max-width: 1500px) {
|
||
.header-container {
|
||
padding: 0px 40px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.header-links,
|
||
.telegram-link {
|
||
display: none;
|
||
}
|
||
|
||
.header-telegram,
|
||
.burger-menu-btn {
|
||
display: flex;
|
||
}
|
||
|
||
.mobile-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
}
|
||
|
||
.header-content {
|
||
padding: 16px 0px;
|
||
}
|
||
|
||
.burger-menu {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.header-container {
|
||
padding: 0px 16px;
|
||
}
|
||
|
||
.burger-menu {
|
||
padding: 0px 16px;
|
||
}
|
||
|
||
.h1 {
|
||
margin-bottom: 24px;
|
||
}
|
||
}
|
||
|
||
/* Главный баннер */
|
||
|
||
.main {
|
||
background-color: var(--black-bg);
|
||
}
|
||
|
||
.main-banner {
|
||
padding: 0px 60px;
|
||
padding-top: 135px;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 30px;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.main-banner-title {
|
||
max-width: 1100px;
|
||
width: 100%;
|
||
}
|
||
|
||
.main-banner-title span {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.main-banner-bottom {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 50px;
|
||
}
|
||
|
||
.welcome-banner {
|
||
max-width: 575px;
|
||
width: 100%;
|
||
background-color: #2b2b2b;
|
||
padding: 33px 52px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.welcome-banner-icon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.welcome-banner-text {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.welcome-banner-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.welcome-banner-author img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 100px;
|
||
object-fit: cover;
|
||
border: 1px solid rgba(82, 82, 82, 1);
|
||
}
|
||
|
||
.welcome-banner-author p {
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.partnership {
|
||
width: 494px;
|
||
|
||
}
|
||
|
||
/* Адаптив главного баннера */
|
||
|
||
@media (max-width: 1500px) {
|
||
.main-banner {
|
||
padding: 0px 40px;
|
||
padding-top: 135px;
|
||
padding-bottom: 80px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.main-banner-bottom {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
.partnership,
|
||
.welcome-banner {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.partnership img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.main-banner {
|
||
padding: 0px 16px;
|
||
padding-top: 110px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.welcome-banner {
|
||
padding: 20px 12px;
|
||
}
|
||
|
||
.welcome-banner-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.welcome-banner-icon svg {
|
||
flex-shrink: 0;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
|
||
|
||
/* Секция "Кто мы такие?" */
|
||
|
||
.who-are-we {
|
||
background-color: #fff;
|
||
padding: 80px 60px 0px 60px;
|
||
color: var(--black);
|
||
display: grid;
|
||
grid-template-columns: 0.41fr 1fr;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.omni-big-logo {
|
||
display: inline-flex;
|
||
color: #f5f5f5;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.omni-big-logo:hover {
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.who-are-we-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.who-are-we-right-top .h1 {
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.who-are-we-title {
|
||
max-width: 1120px;
|
||
width: 100%;
|
||
}
|
||
|
||
.who-are-we-title span {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.no-break {
|
||
white-space: nowrap;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
.we-card-icon {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.we-card-title {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 110%;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.who-are-we-title a {
|
||
color: inherit;
|
||
text-decoration: underline;
|
||
text-decoration-color: currentColor;
|
||
transition: color 0.3s ease, text-decoration-color 0.3s ease;
|
||
}
|
||
|
||
.who-are-we-title a:hover {
|
||
color: var(--yellow);
|
||
text-decoration-color: var(--yellow);
|
||
}
|
||
|
||
.we-card-text {
|
||
color: var(--gray-text);
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.who-are-we-cards {
|
||
margin-top: 32px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.who-are-we-card {
|
||
position: relative;
|
||
padding: 20px 24px 24px 24px;
|
||
background-color: #f5f5f5;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
}
|
||
|
||
.who-are-we-card:hover {
|
||
background-color: var(--yellow);
|
||
}
|
||
|
||
.we-card-absolute-icon {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
|
||
/* Адаптив секции "Кто мы такие?" */
|
||
|
||
@media (max-width: 1500px) {
|
||
.who-are-we {
|
||
grid-template-columns: 0.3fr 1fr;
|
||
padding: 80px 40px 0px 40px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1420px) {
|
||
.who-are-we {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.who-are-we-left {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.who-are-we-cards {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.who-are-we {
|
||
padding: 60px 16px 0px 16px;
|
||
}
|
||
|
||
.who-are-we-card {
|
||
padding: 16px 16px 20px 16px;
|
||
}
|
||
|
||
.we-card-icon {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.we-card-title {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.we-card-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.icon-1 svg {
|
||
flex-shrink: 0;
|
||
width: 60px;
|
||
height: 40px;
|
||
}
|
||
|
||
.icon-2 svg {
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.icon-3 svg {
|
||
flex-shrink: 0;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
|
||
/* Секция "Что мы предлагаем?" */
|
||
|
||
.our-solutions {
|
||
background-color: #fff;
|
||
padding: 120px 60px;
|
||
color: var(--black);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 0.41fr 1fr;
|
||
}
|
||
|
||
.our-solutions-container {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 50px;
|
||
}
|
||
|
||
.our-solutions-content {
|
||
max-width: 740px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* .omni-big-logo-container {
|
||
position: absolute;
|
||
bottom: 120px;
|
||
right: 60px;
|
||
} */
|
||
|
||
.our-solutions-desc-title {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 110%;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.our-solutions-desc-text {
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
color: var(--gray-text);
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.our-solutions-descs {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.our-solutions-text {
|
||
margin-top: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
color: var(--black);
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.our-solutions-text p {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.our-solutions-text p:has(+ ol) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.our-solutions-text ol {
|
||
padding: 0;
|
||
margin: 0;
|
||
margin-top: 20px;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.our-solutions-video {
|
||
margin-top: 40px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.our-solutions-video::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
z-index: 1;
|
||
}
|
||
|
||
.our-solutions-video img {
|
||
width: 100%;
|
||
max-height: 402px;
|
||
height: auto;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.play-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
cursor: pointer;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
width: 80px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
}
|
||
|
||
.play-btn:hover {
|
||
transform: translate(-50%, -50%) scale(1.1);
|
||
}
|
||
|
||
.play-btn svg {
|
||
width: 30px;
|
||
height: 33px;
|
||
display: block;
|
||
margin-left: 5%;
|
||
}
|
||
|
||
.open-link-container {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.open-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
|
||
.open-link {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
letter-spacing: -0.01em;
|
||
text-transform: uppercase;
|
||
text-decoration: underline;
|
||
color: var(--black);
|
||
transition: color 0.3s ease, text-decoration-color 0.3s ease;
|
||
text-decoration-color: var(--black);
|
||
}
|
||
|
||
.open-link div {
|
||
background-color: var(--black);
|
||
padding: 2px 20px;
|
||
border-radius: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.open-link svg path {
|
||
transition: fill 0.3s ease;
|
||
}
|
||
|
||
.open-link:hover {
|
||
color: var(--yellow);
|
||
text-decoration-color: var(--yellow);
|
||
}
|
||
|
||
.open-link:hover div {
|
||
background-color: var(--yellow);
|
||
}
|
||
|
||
.open-link:hover svg path {
|
||
fill: var(--black);
|
||
}
|
||
|
||
/* Адаптив секции "Что мы предлагаем" */
|
||
|
||
@media (max-width: 1500px) {
|
||
.our-solutions {
|
||
grid-template-columns: 0.3fr 1fr;
|
||
padding: 120px 40px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1420px) {
|
||
.our-solutions {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.omni-big-logo-container {
|
||
display: none;
|
||
}
|
||
|
||
.our-solutions-content {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.our-solutions-video img {
|
||
max-height: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.our-solutions {
|
||
padding: 80px 16px;
|
||
}
|
||
|
||
.our-solutions-descs {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.our-solutions-desc-title {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.our-solutions-desc-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.our-solutions-text {
|
||
margin-top: 24px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.our-solutions-text p {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.our-solutions-video {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.open-link {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
/* Секция "Коммерческое предложение" */
|
||
|
||
.commercial-offer {
|
||
background-color: #fff;
|
||
padding: 0px 60px;
|
||
color: var(--black);
|
||
}
|
||
|
||
.commercial-offer-head {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 50px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.commercial-offer-title {
|
||
margin-bottom: 0px;
|
||
max-width: 1110px;
|
||
width: 100%;
|
||
}
|
||
|
||
.commercial-offer-head p {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 110%;
|
||
letter-spacing: -0.01em;
|
||
max-width: 370px;
|
||
width: 100%;
|
||
}
|
||
|
||
.commercial-offer-card {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 1.8fr 1fr;
|
||
justify-content: end;
|
||
column-gap: 40px;
|
||
padding: 16px;
|
||
border-top: 1px solid var(--gray-text);
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.offer-card-time-price-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
justify-items: center;
|
||
}
|
||
|
||
.offer-card-time {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.commercial-offer-card:last-child {
|
||
border-bottom: 2px solid var(--black);
|
||
}
|
||
|
||
.commercial-offer-card p,
|
||
.offer-total-price-container p,
|
||
.included-price-card p {
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.included-price-card-role {
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
.offer-card-desc,
|
||
.included-price-card-desc {
|
||
color: var(--gray-text);
|
||
}
|
||
|
||
.offer-card-time,
|
||
.offer-card-price,
|
||
.offer-card-desc,
|
||
.offer-total-price-title,
|
||
.offer-total-price-time,
|
||
.offer-total-price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.offer-total-price-container {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: 1.8fr 1fr 1fr;
|
||
justify-content: end;
|
||
column-gap: 40px;
|
||
padding: 40px 16px;
|
||
position: relative;
|
||
}
|
||
|
||
.offer-total-price-container::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 50%;
|
||
height: 1px;
|
||
background-color: var(--black);
|
||
}
|
||
|
||
.offer-total-price-and-time {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
justify-items: center;
|
||
}
|
||
|
||
|
||
.offer-total-price-time {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Адаптив секции "Коммерческое предложение" */
|
||
|
||
@media (max-width: 1500px) {
|
||
.commercial-offer {
|
||
padding: 0px 40px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.commercial-offer-head {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.commercial-offer-card {
|
||
grid-template-columns: 1fr;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.offer-card-time, .offer-card-price, .offer-card-desc, .offer-total-price-title, .offer-total-price-time, .offer-total-price {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.offer-total-price-container::after,
|
||
.invisible {
|
||
display: none;
|
||
}
|
||
|
||
.offer-total-price-container {
|
||
padding: 20px 0px;
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.offer-total-price-time {
|
||
text-align: left;
|
||
}
|
||
|
||
.open-link-container {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.offer-total-price-time {
|
||
padding-right: 50px;
|
||
}
|
||
|
||
.offer-card-time-price-container,
|
||
.offer-total-price-and-time {
|
||
justify-items: flex-start;
|
||
}
|
||
|
||
.commercial-offer-card {
|
||
padding: 20px 0px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.commercial-offer {
|
||
padding: 0px 16px;
|
||
}
|
||
|
||
.commercial-offer-head p {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.commercial-offer-head {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.offer-card-desc,
|
||
.offer-card-time,
|
||
.offer-card-price,
|
||
.offer-total-price-title,
|
||
.offer-total-price-time,
|
||
.offer-total-price {
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
|
||
/* Секция "Входит в стоимость" */
|
||
|
||
.included-price {
|
||
background-color: #fff;
|
||
padding: 80px 60px 120px 60px;
|
||
color: var(--black);
|
||
|
||
}
|
||
|
||
.included-price-head {
|
||
display: grid;
|
||
grid-template-columns: 0.41fr 1fr;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.included-price-head .h2 {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.included-price-title {
|
||
color: var(--gray);
|
||
}
|
||
|
||
.included-price-cards {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.included-price-card {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: 0.55fr 0.38fr 1fr;
|
||
justify-content: end;
|
||
column-gap: 40px;
|
||
padding: 16px 0px;
|
||
padding-right: 20px;
|
||
border-top: 1px solid var(--gray-text);
|
||
}
|
||
|
||
.included-price-card:last-child {
|
||
border-bottom: 1px solid var(--gray-text);
|
||
}
|
||
|
||
/* Адаптив секции "Входит в стоимость" */
|
||
|
||
@media (max-width: 1500px) {
|
||
.included-price {
|
||
padding: 80px 40px 120px 40px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.included-price-card {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
padding: 20px 0px;
|
||
}
|
||
|
||
.included-price-head {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.included-price {
|
||
padding: 40px 16px 80px 16px;
|
||
}
|
||
}
|
||
|
||
|
||
/* Секция "Проекты" */
|
||
|
||
.projects {
|
||
background-color: #fff;
|
||
color: var(--black);
|
||
padding: 0px 60px;
|
||
}
|
||
|
||
.projects-head {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.projects-head-title {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.projects-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.project-card {
|
||
width: 100%;
|
||
padding: 32px 0px;
|
||
border-top: 1px solid var(--black);
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 31px;
|
||
}
|
||
|
||
.project-card-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
}
|
||
|
||
.project-card-right-bottom {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: flex-end;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-card-left img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.project-card:last-child {
|
||
border-bottom: 1px solid var(--black);
|
||
}
|
||
|
||
.project-card-title {
|
||
text-decoration: underline;
|
||
color: var(--black);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.project-card-title:hover {
|
||
color: var(--yellow);
|
||
text-decoration-color: var(--yellow);
|
||
}
|
||
|
||
.project-card-subtitle {
|
||
color: var(--gray-text);
|
||
margin-top: 16px;
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
max-width: 350px;
|
||
width: 100%;
|
||
}
|
||
|
||
.project-card-desc {
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-size: 18px;
|
||
line-height: 140%;
|
||
}
|
||
|
||
.project-card-banners {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.project-card-banner {
|
||
display: inline-block;
|
||
font-family: 'Helvetica Neue Medium', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 110%;
|
||
border: 1px solid var(--black);
|
||
padding: 4px 8px;
|
||
border-radius: 100px;
|
||
}
|
||
|
||
/* Адаптив секции "Проекты" */
|
||
|
||
@media (max-width: 1500px) {
|
||
.projects {
|
||
padding: 0px 40px;
|
||
}
|
||
|
||
.project-card-right-bottom {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.project-card-banners {
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.projects-head {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-card {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
padding: 20px 0px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.projects {
|
||
padding: 0px 16px;
|
||
}
|
||
|
||
.projects-head {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.project-card-subtitle {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.project-card-desc,
|
||
.project-card-banner {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
|
||
/* Footer */
|
||
|
||
.footer {
|
||
background-color: #fff;
|
||
padding: 120px 60px 60px 60px;
|
||
color: var(--black);
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 0.96fr;
|
||
}
|
||
|
||
.footer-logo {
|
||
align-self: end;
|
||
}
|
||
|
||
.footer-logo a {
|
||
color: #F5F5F5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.footer-logo a:hover {
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.contact-card {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 0px;
|
||
border-top: 1px solid var(--black);
|
||
gap: 30px;
|
||
}
|
||
|
||
.contact-card:last-child {
|
||
border-bottom: 1px solid var(--black);
|
||
}
|
||
|
||
.contact-card-title {
|
||
font-family: 'Helvetica Neue Regular', sans-serif;
|
||
font-size: 20px;
|
||
line-height: 110%;
|
||
letter-spacing: -0.01em;
|
||
color: var(--gray);
|
||
}
|
||
|
||
.contact-card-link a {
|
||
color: var(--black);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.contact-card-link a:hover {
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.contact-card-link-icon a {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background-color: var(--black);
|
||
transition: all 0.3s ease;
|
||
color: #fff;
|
||
}
|
||
|
||
.contact-card-link-icon a:hover {
|
||
background-color: var(--yellow);
|
||
color: var(--black);
|
||
}
|
||
|
||
/* Адаптив Footer */
|
||
|
||
@media (max-width: 1500px) {
|
||
.footer {
|
||
padding: 120px 40px 60px 40px;
|
||
}
|
||
|
||
.contact-card-title,
|
||
.open-link p {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.h3 {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.footer-content {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
grid-auto-flow: dense;
|
||
}
|
||
|
||
.footer-logo {
|
||
order: 2;
|
||
align-self: start;
|
||
}
|
||
|
||
.footer {
|
||
padding: 80px 40px 20px 40px;
|
||
}
|
||
|
||
.open-link-container-footer {
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.footer {
|
||
padding: 80px 16px 20px 16px;
|
||
}
|
||
|
||
.contact-card {
|
||
padding: 12px 0px;
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 450px) {
|
||
.footer-logo a svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* Модальное окно для просмотра видео */
|
||
|
||
.close-video {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 15px;
|
||
font-size: 28px;
|
||
color: var(--black);
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
}
|
||
|
||
.modal-video-about {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
min-width: 340px;
|
||
min-height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(8px);
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.modal-content-video-about {
|
||
position: relative;
|
||
max-width: 90vw;
|
||
max-height: 90vh;
|
||
background: #000;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0;
|
||
}
|
||
|
||
.modal-content-video-about video {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
width: auto;
|
||
max-height: 800px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
background-color: #000;
|
||
opacity: 0;
|
||
transition: opacity 1s ease;
|
||
}
|
||
.modal-content-video-about video.visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.modal-video-about {
|
||
display: none;
|
||
opacity: 0;
|
||
transition: opacity 300ms ease;
|
||
}
|
||
|
||
.modal-video-about.show {
|
||
display: flex;
|
||
opacity: 1;
|
||
}
|