adcovn/olimparena
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: changing and bringing the appearance to the figma

Browse Source
This commit is contained in:
Ignat Karelov
2026-04-23 23:07:35 +03:00
parent 020ba08ff1
commit 5f069b9801
15 changed files with 916 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

506
assets/scss/_base.scss
View File

@@ -81,7 +81,7 @@ img {
background: $color-accent;
color: $color-text;
font-size: 16px;
font-weight: 700;
font-weight: 500;
line-height: 24px;
box-shadow: $shadow-accent;
cursor: pointer;
@@ -167,7 +167,7 @@ img {
inset: 0;
background:
linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%),
url("https://www.figma.com/api/mcp/asset/e5a37fb1-e23a-4258-855e-e6951519202d") center / cover no-repeat;
url("../images/other/section-main.webp") center / cover no-repeat;
&::after {
content: "";
@@ -213,7 +213,7 @@ img {
max-width: 768px;
margin-bottom: 24px;
font-size: 72px;
font-weight: 800;
font-weight: 700;
line-height: 90px;
span {
@@ -261,7 +261,7 @@ img {
}
.highlights {
background: $color-surface;
background: linear-gradient(90deg, $color-surface, $color-surface-2);
padding: 96px 0;
&__grid {
@@ -307,7 +307,7 @@ img {
}
&--pattern {
background: #1a2124;
background: $color-bg;
&::before {
content: "";
@@ -341,7 +341,25 @@ img {
}
}
.advantages {
.infrastructure {
background: linear-gradient(90deg, #293133 0%, #2f3b40 100%);
.section__head {
margin-bottom: 56px;
h2 {
font-size: 48px;
font-weight: 600;
line-height: 1.05;
}
p {
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -351,30 +369,43 @@ img {
.feature-card {
@include card;
position: relative;
min-height: 162px;
padding: 25px;
transition: transform 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 238px;
padding: 32px 26px 30px;
text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
&:hover {
transform: translateY(-5px);
border-color: rgba(207, 23, 23, 0.4);
border-color: rgba(207, 23, 23, 0.55);
background: rgba(18, 18, 18, 0.6);
}
&::before {
content: "";
display: block;
width: 48px;
height: 48px;
margin-bottom: 16px;
border: 1px solid rgba(207, 23, 23, 0.32);
border-radius: 14px;
background: rgba(207, 23, 23, 0.16);
&__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 18px;
border-radius: 18px;
background: $color-accent;
color: $color-text;
box-shadow: 0 12px 24px rgba(231, 0, 11, 0.5);
svg {
width: 32px;
height: 32px;
display: block;
}
}
h3 {
margin-bottom: 8px;
font-size: 20px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
@@ -382,11 +413,13 @@ img {
p {
color: $color-text-muted;
font-size: 16px;
line-height: 1.4;
line-height: 1.3;
}
}
.objects {
background-image: url(../images/bg-pattern.svg);
background-position: center;
.section__head {
margin-bottom: 64px;
}
@@ -482,57 +515,73 @@ img {
}
.services {
background: $color-surface;
background: $color-bg;
background-image: url(../images/bg-pattern.svg);
background-position: center;
.section__head {
margin-bottom: 52px;
h2 {
font-size: 48px;
line-height: 1.05;
}
p {
font-size: 20px;
line-height: 1.2;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
width: 100%;
max-width: 896px;
margin: 0 auto;
}
&__cta {
margin-top: 48px;
text-align: center;
}
&__cta-btn {
width: min(100%, 560px);
min-height: 60px;
padding: 16px 26px;
font-size: 18px;
line-height: 1.2;
box-shadow: 0 18px 34px rgba(231, 0, 11, 0.45);
}
}
.service-card {
@include card;
display: flex;
flex-direction: column;
min-height: 260px;
padding: 33px;
transition: transform 0.3s ease, border-color 0.3s ease;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 12px 18px;
border: 1px solid rgba(207, 23, 23, 0.45);
border-radius: $radius-md;
background: #1d252b;
color: $color-text;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-align: center;
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
&:hover {
transform: translateY(-6px);
border-color: rgba(207, 23, 23, 0.45);
}
h3 {
margin-bottom: 12px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
p {
margin-bottom: auto;
color: $color-text-muted;
font-size: 18px;
line-height: 28px;
}
a {
display: inline-flex;
width: fit-content;
margin-top: 20px;
padding: 10px 20px;
border-radius: $radius-sm;
background: $color-accent;
font-size: 14px;
font-weight: 700;
line-height: 20px;
transform: translateY(-3px);
border-color: rgba(207, 23, 23, 0.75);
background: #222c33;
}
}
.gallery {
background: #1b2225;
background: linear-gradient(90deg, $color-surface, $color-surface-2);
&__grid {
display: grid;
@@ -557,7 +606,9 @@ img {
}
.reviews {
background: #1a2023;
background: $color-bg;
background-image: url(../images/bg-pattern.svg);
background-position: center;
&__grid {
display: grid;
@@ -636,7 +687,7 @@ img {
}
.booking {
background: #1b2225;
background: linear-gradient(90deg, $color-surface, $color-surface-2);
&__wrap {
display: grid;
@@ -648,14 +699,14 @@ img {
margin-bottom: 24px;
font-size: 48px;
font-weight: 600;
line-height: 1.1;
line-height: 1.02;
}
p {
margin-bottom: 32px;
color: $color-text-soft;
font-size: 18px;
line-height: 1.45;
font-size: 16px;
line-height: 1.4;
}
form {
@@ -665,7 +716,7 @@ img {
.btn {
width: 100%;
height: 56px;
height: 60px;
margin-top: 4px;
padding: 0 24px;
}
@@ -673,7 +724,7 @@ img {
input {
width: 100%;
height: 58px;
height: 72px;
padding: 0 24px;
border: 1px solid $color-border;
border-radius: $radius-sm;
@@ -683,8 +734,10 @@ img {
line-height: 18px;
&::placeholder {
color: rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.45);
}
outline: none;
}
}
@@ -704,31 +757,50 @@ img {
margin-bottom: 32px;
h3 {
margin-bottom: 24px;
margin-bottom: 30px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.05;
}
ul {
display: flex;
flex-direction: column;
gap: 16px;
gap: 18px;
}
li {
display: flex;
align-items: flex-start;
gap: 16px;
}
&__icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
margin-top: 2px;
svg {
width: 24px;
height: 24px;
display: block;
}
}
&__item-content {
strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.1;
}
span {
color: $color-text-soft;
font-size: 16px;
line-height: 1.5;
line-height: 1.45;
}
}
}
@@ -737,54 +809,66 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
font-weight: 600;
line-height: 1.2;
}
p {
margin: 0;
font-size: 16px;
line-height: 1.2;
line-height: 1.25;
}
}
.footer {
border-top: 1px solid rgba(207, 23, 23, 0.1);
background: #121212;
padding: 49px 0;
background: #090a0f;
padding: 64px 0 20px;
&__top {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
margin-bottom: 32px;
grid-template-columns: 1.45fr 1fr 1.15fr 1fr;
gap: 36px;
margin-bottom: 48px;
}
&__col {
&__brand {
p {
max-width: 286px;
margin-top: 16px;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.28;
}
}
&__nav,
&__contacts,
&__social {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.1;
}
p,
span,
a {
display: block;
color: $color-text-soft;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.3;
line-height: 1.35;
}
p {
margin-top: 16px;
line-height: 1.4;
span {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.35;
}
a + a,
span + span {
margin-top: 8px;
margin-top: 10px;
}
}
@@ -796,17 +880,23 @@ img {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid $color-border;
width: 58px;
height: 58px;
border: 1px solid rgba(207, 23, 23, 0.5);
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
margin-top: 0 !important;
svg {
width: 24px;
height: 24px;
display: block;
}
&:hover {
transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.5);
border-color: rgba(207, 23, 23, 0.85);
background: rgba(207, 23, 23, 0.15);
}
}
@@ -816,21 +906,21 @@ img {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 24px;
gap: 24px;
border-top: 1px solid rgba(207, 23, 23, 0.35);
padding-top: 30px;
span,
a {
color: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
line-height: 1.3;
}
}
div {
display: flex;
gap: 24px;
}
&__legal {
display: flex;
gap: 34px;
}
}
@@ -893,7 +983,55 @@ img {
.booking {
h2 {
font-size: 42px;
font-size: 48px;
}
}
.contacts-card {
h3 {
font-size: 24px;
}
&__item-content {
strong {
font-size: 16px;
}
}
}
.hours-card {
h4 {
font-size: 16px;
}
p {
font-size: 16px;
}
}
.footer {
&__brand p {
font-size: 28px;
}
&__nav,
&__contacts,
&__social {
h4 {
font-size: 16px;
}
a,
span {
font-size: 14px;
}
}
&__bottom {
span,
a {
font-size: 14px;
}
}
}
}
@@ -935,15 +1073,19 @@ img {
}
.highlights__grid,
.advantages__grid,
.services__grid,
.gallery__grid,
.reviews__grid,
.stats,
.footer__top {
.footer__top,
.infrastructure__grid,
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.services__grid {
max-width: none;
}
.object-card,
.booking__wrap {
grid-template-columns: 1fr;
@@ -979,6 +1121,40 @@ img {
flex-direction: column;
align-items: flex-start;
}
.footer {
&__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
&__brand p {
font-size: 22px;
margin-top: 18px;
}
&__nav,
&__contacts,
&__social {
h4 {
font-size: 30px;
margin-bottom: 16px;
}
a,
span {
font-size: 22px;
line-height: 1.32;
}
}
&__bottom {
span,
a {
font-size: 14px;
}
}
}
}
@include respond($bp-md) {
@@ -1033,21 +1209,95 @@ img {
}
.highlights__grid,
.advantages__grid,
.services__grid,
.gallery__grid,
.reviews__grid,
.stats,
.footer__top,
.booking__contacts {
.booking__contacts,
.infrastructure__grid,
.services__grid {
grid-template-columns: 1fr;
}
.feature-card h3,
.object-card__content h3,
.service-card h3,
.booking h2 {
font-size: 28px;
font-size: 24px;
}
.booking {
input {
height: 60px;
}
}
.contacts-card {
h3 {
font-size: 34px;
margin-bottom: 18px;
}
&__item-content {
strong {
font-size: 16px;
}
span {
font-size: 16px;
}
}
}
.hours-card {
h4 {
font-size: 16px;
margin-bottom: 12px;
}
p {
font-size: 16px;
}
}
.infrastructure .section__head h2,
.services .section__head h2 {
font-size: 38px;
}
.infrastructure .section__head p,
.services .section__head p {
font-size: 20px;
}
.service-card {
font-size: 17px;
}
.footer {
&__brand p {
font-size: 16px;
max-width: 100%;
}
&__nav,
&__contacts,
&__social {
h4 {
font-size: 16px;
}
a,
span {
font-size: 16px;
}
}
&__bottom {
span,
a {
font-size: 14px;
}
}
}
.stats strong {
@@ -1100,7 +1350,6 @@ img {
.info-card,
.feature-card,
.service-card,
.review-card,
.stats article,
.contacts-card,
@@ -1113,12 +1362,33 @@ img {
min-height: 260px;
}
.service-card {
min-height: 64px;
font-size: 16px;
}
.services__cta-btn {
width: 100%;
font-size: 16px;
}
.footer__bottom {
div {
.footer__legal {
flex-direction: column;
gap: 12px;
}
}
.footer {
&__top {
gap: 20px;
}
&__socials a {
width: 50px;
height: 50px;
}
}
}
@media (prefers-reduced-motion: reduce) {