This commit is contained in:
2025-12-08 15:40:12 +02:00
parent 49d869835b
commit e7839c75f8

132
style.css
View File

@@ -1,40 +1,45 @@
@font-face { @font-face {
font-family: "Muller"; font-family: "Muller";
src: url("/fonts/Muller-Trial-Regular.woff2") format("woff2"); src: url("/fonts/Muller-Trial-Regular.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
} }
html, body { @font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
font-family: "Muller", sans-serif; font-family: "Muller", sans-serif;
@@ -42,11 +47,13 @@ html, body {
font-weight: 400; font-weight: 400;
letter-spacing: 3%; letter-spacing: 3%;
} }
.wrapper { .wrapper {
height: 100%; height: 100%;
background: linear-gradient(rgba(96, 101, 113, 0.05), rgba(96, 101, 113, 100) 150%); background: linear-gradient(rgba(96, 101, 113, 0.05), rgba(96, 101, 113, 100) 150%);
background-color: black; background-color: black;
} }
.header { .header {
position: fixed; position: fixed;
display: flex; display: flex;
@@ -60,35 +67,42 @@ html, body {
background-color: #000; background-color: #000;
z-index: 100; z-index: 100;
} }
.container { .container {
max-width: 1818px; max-width: 1818px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.header_body { .header_body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.header_logo { .header_logo {
max-width: 293px; max-width: 293px;
max-height: 67px; max-height: 67px;
} }
.img_logo { .img_logo {
height: 100%; height: 100%;
width: 80%; width: 80%;
transition: all .3s; transition: all .3s;
} }
.img_logo:hover { .img_logo:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.header_contacts { .header_contacts {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 20px; margin: 0 20px;
} }
.header_call { .header_call {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -98,10 +112,12 @@ html, body {
margin-right: 40px; margin-right: 40px;
transition: all .1s; transition: all .1s;
} }
.header_call:hover { .header_call:hover {
transform: scale(1.03); transform: scale(1.03);
color: #F69020; color: #F69020;
} }
.header_call_svg { .header_call_svg {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -111,6 +127,7 @@ html, body {
padding: 15px; padding: 15px;
margin-right: 17px; margin-right: 17px;
} }
.header_map_svg svg { .header_map_svg svg {
display: block; display: block;
width: 25px; width: 25px;
@@ -126,10 +143,12 @@ html, body {
font-size: 13px; font-size: 13px;
transition: all .1s; transition: all .1s;
} }
.header_map:hover { .header_map:hover {
transform: scale(1.03); transform: scale(1.03);
color: #F69020; color: #F69020;
} }
.header_map_svg { .header_map_svg {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -138,16 +157,19 @@ html, body {
border-radius: 50%; border-radius: 50%;
padding: 15px; padding: 15px;
} }
.header_map_svg svg { .header_map_svg svg {
display: block; display: block;
width: 29px; width: 29px;
height: 29px; height: 29px;
} }
.header_buttons { .header_buttons {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.header_btn_about { .header_btn_about {
border-radius: 40px; border-radius: 40px;
padding: 20px; padding: 20px;
@@ -162,12 +184,14 @@ html, body {
margin-right: 25px; margin-right: 25px;
transition: all .3s; transition: all .3s;
} }
.header_btn_about:hover { .header_btn_about:hover {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
border: none; border: none;
transform: scale(1.03); transform: scale(1.03);
} }
.header_btn_reserv { .header_btn_reserv {
border-radius: 40px; border-radius: 40px;
padding: 20px; padding: 20px;
@@ -180,12 +204,14 @@ html, body {
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
transition: all .3s; transition: all .3s;
} }
.header_btn_reserv:hover { .header_btn_reserv:hover {
background-color: transparent; background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff; color: #fff;
transform: scale(1.03); transform: scale(1.03);
} }
/* --------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------- */
.about { .about {
display: flex; display: flex;
@@ -200,11 +226,12 @@ html, body {
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/About/Background/bcg.jpg") 100% 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/About/Background/bcg.jpg") 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
overflow: hidden; overflow: hidden;
} }
.about_inner::before { .about_inner::before {
position: absolute; position: absolute;
display: block; display: block;
@@ -215,6 +242,7 @@ html, body {
height: 100%; height: 100%;
opacity: 0.8; opacity: 0.8;
} }
.about_content { .about_content {
color: white; color: white;
margin-left: 51px; margin-left: 51px;
@@ -222,17 +250,20 @@ html, body {
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.about_heading { .about_heading {
font-size: 26px; font-size: 26px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 25px; margin-bottom: 25px;
margin-top: 30px; margin-top: 30px;
} }
.about_title { .about_title {
font-size: 46px; font-size: 46px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 900; font-weight: 900;
} }
.about_title span { .about_title span {
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
@@ -242,10 +273,12 @@ html, body {
border-radius: 60px; border-radius: 60px;
vertical-align: middle; vertical-align: middle;
} }
.about_row_if { .about_row_if {
display: flex; display: flex;
margin: 20px 0; margin: 20px 0;
} }
.row_if { .row_if {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -253,12 +286,13 @@ html, body {
margin-right: 21px; margin-right: 21px;
font-size: 14px; font-size: 14px;
} }
.row_if svg { .row_if svg {
margin-right: 11px; margin-right: 11px;
} }
.about_button {
} .about_button {}
.plus_about { .plus_about {
position: absolute; position: absolute;
bottom: 100px; bottom: 100px;
@@ -272,6 +306,7 @@ html, body {
letter-spacing: 20%; letter-spacing: 20%;
color: #606571; color: #606571;
} }
.button { .button {
padding: 20px 30px; padding: 20px 30px;
border-radius: 60px; border-radius: 60px;
@@ -282,9 +317,11 @@ html, body {
background: linear-gradient(93.25deg, #EA422A 0%, #F69020 48.58%, #FFC619 101.38%); background: linear-gradient(93.25deg, #EA422A 0%, #F69020 48.58%, #FFC619 101.38%);
transition: all .3s; transition: all .3s;
} }
.button:hover { .button:hover {
transform: scale(1.03); transform: scale(1.03);
} }
.about_image { .about_image {
width: 65%; width: 65%;
display: flex; display: flex;
@@ -292,6 +329,7 @@ html, body {
align-items: end; align-items: end;
overflow: hidden; overflow: hidden;
} }
.about_img_circle { .about_img_circle {
display: flex; display: flex;
align-items: end; align-items: end;
@@ -299,16 +337,19 @@ html, body {
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.about_img_circle img { .about_img_circle img {
width: 309px; width: 309px;
height: 309px; height: 309px;
} }
.about_img_box { .about_img_box {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.about_img_box::before { .about_img_box::before {
position: absolute; position: absolute;
top: 260px; top: 260px;
@@ -323,6 +364,7 @@ html, body {
background-size: contain; background-size: contain;
z-index: 5; z-index: 5;
} }
.about_img_dance { .about_img_dance {
position: absolute; position: absolute;
top: 110px; top: 110px;
@@ -332,9 +374,9 @@ html, body {
height: 100%; height: 100%;
z-index: 3; z-index: 3;
} }
.about_img_dance img {
} .about_img_dance img {}
.about_tg { .about_tg {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -343,6 +385,7 @@ html, body {
white-space: nowrap; white-space: nowrap;
margin-bottom: 120px; margin-bottom: 120px;
} }
.about_reverse_text { .about_reverse_text {
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
@@ -351,6 +394,7 @@ html, body {
color: #F69020; color: #F69020;
} }
.about_svg { .about_svg {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -362,44 +406,54 @@ html, body {
margin-left: 45px; margin-left: 45px;
border: 2px solid; border: 2px solid;
} }
.about_svg:hover #telegram { .about_svg:hover #telegram {
fill: #F69020; fill: #F69020;
} }
.about_svg:hover { .about_svg:hover {
border: 2px solid #F69020; border: 2px solid #F69020;
background: transparent; background: transparent;
} }
.about_svg svg { .about_svg svg {
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
.about_row { .about_row {
color: #fff; color: #fff;
} }
.about_list { .about_list {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px; grid-template-rows: 100px;
z-index: 20; z-index: 20;
} }
.about_item { .about_item {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 30px; padding-left: 30px;
font-size: 13px; font-size: 13px;
} }
.about_item_light { .about_item_light {
background-color: rgba(40, 43, 50, 1); background-color: rgba(40, 43, 50, 1);
} }
.about_item_dark { .about_item_dark {
background-color: rgba(32, 33, 36, 1); background-color: rgba(32, 33, 36, 1);
} }
.about_item svg { .about_item svg {
display: block; display: block;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.about_item span { .about_item span {
display: block; display: block;
min-width: 20px; min-width: 20px;