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

style: chaged blocks

Browse Source
This commit is contained in:
Ignat Karelov
2026-05-15 14:29:01 +03:00
parent 29d81800ce
commit a72a42031a
13 changed files with 802 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
assets/scss/_base.scss
View File

@@ -14,6 +14,33 @@ body {
body {
line-height: 1;
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-heading;
font-weight: 700;
}
p,
li,
a,
input,
select,
textarea,
button,
span {
font-family: $font-main;
}
strong,
b {
font-weight: 500;
}
a {
@@ -134,7 +161,7 @@ img {
a {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
transition: color 0.2s ease;
@@ -242,7 +269,7 @@ img {
border-radius: 999px;
background: rgba(41, 49, 51, 0.6);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
@@ -350,7 +377,7 @@ img {
h2 {
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
@@ -563,24 +590,68 @@ img {
.service-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 12px 18px;
gap: 10px;
position: relative;
overflow: hidden;
min-height: 152px;
padding: 20px;
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;
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
&:hover {
&__title {
display: block;
font-family: $font-heading;
font-size: 21px;
font-weight: 700;
line-height: 1.15;
position: relative;
z-index: 1;
transition: opacity 0.25s ease, transform 0.25s ease;
}
&__description {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 18px;
text-align: center;
background: rgba(7, 10, 12, 0.84);
opacity: 0;
transform: translateY(10px);
color: $color-text-muted;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
&:hover,
&:focus-visible {
transform: translateY(-3px);
border-color: rgba(207, 23, 23, 0.75);
background: #222c33;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
.service-card__title {
opacity: 0.25;
transform: scale(0.98);
}
.service-card__description {
opacity: 1;
transform: translateY(0);
}
}
}
@@ -757,46 +828,110 @@ img {
h2 {
margin-bottom: 24px;
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.02;
}
p {
margin-bottom: 32px;
color: $color-text-soft;
font-size: 16px;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
gap: 14px;
}
.btn {
width: 100%;
height: 60px;
margin-top: 4px;
padding: 0 24px;
&__field {
display: flex;
flex-direction: column;
gap: 8px;
label {
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
line-height: 1.25;
}
.required-mark {
color: $color-accent;
}
}
input {
&__submit {
width: 100%;
height: 72px;
height: 64px;
margin-top: 10px;
padding: 0 24px;
font-size: 19px;
font-weight: 500;
line-height: 1.2;
}
&__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 2px;
color: $color-text-soft;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: $color-accent;
flex: 0 0 18px;
}
a {
color: #ffd2d2;
text-decoration: underline;
text-underline-offset: 2px;
}
}
input,
select,
textarea {
width: 100%;
padding: 0 20px;
border: 1px solid $color-border;
border-radius: $radius-sm;
background: rgba(18, 18, 18, 0.35);
color: $color-text;
font-size: 16px;
line-height: 18px;
font-weight: 400;
line-height: 1.35;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
&:focus {
border-color: rgba(207, 23, 23, 0.85);
box-shadow: 0 0 0 3px rgba(207, 23, 23, 0.25);
}
&::placeholder {
color: rgba(255, 255, 255, 0.45);
}
}
outline: none;
input,
select {
height: 56px;
}
textarea {
min-height: 130px;
padding: 16px 20px;
resize: vertical;
}
}
@@ -818,7 +953,7 @@ img {
h3 {
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
@@ -852,7 +987,7 @@ img {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
font-weight: 500;
line-height: 1.1;
}
@@ -868,7 +1003,7 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
line-height: 1.2;
}
@@ -879,6 +1014,105 @@ img {
}
}
.booking-modal {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
&.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
&__overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 10%, rgba(207, 23, 23, 0.2), transparent 55%), rgba(0, 0, 0, 0.72);
backdrop-filter: blur(4px);
}
&__content {
position: relative;
width: min(100%, 620px);
padding: 36px 30px 30px;
border: 1px solid rgba(207, 23, 23, 0.52);
border-radius: 24px;
background:
linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
linear-gradient(165deg, #202a30, #181f24 62%);
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.52);
}
&__status {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 18px;
border-radius: 16px;
background: rgba(207, 23, 23, 0.18);
border: 1px solid rgba(207, 23, 23, 0.45);
color: #ffd9d9;
font-size: 28px;
font-weight: 700;
line-height: 1;
}
&__title {
margin-bottom: 12px;
padding-right: 42px;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
}
&__text {
margin-bottom: 24px;
color: $color-text-soft;
font-size: 18px;
font-weight: 500;
line-height: 1.45;
}
&__actions {
display: flex;
}
&__btn {
min-width: 220px;
}
&__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
&:hover {
background: rgba(207, 23, 23, 0.34);
transform: rotate(90deg);
}
}
}
.footer {
border-top: 1px solid rgba(207, 23, 23, 0.1);
background: #090a0f;
@@ -907,7 +1141,7 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
line-height: 1.1;
}
@@ -986,7 +1220,7 @@ img {
@include respond($bp-xxl) {
.hero {
&__content {
margin-left: 420px;
margin-left: auto;
}
h1 {
@@ -1285,8 +1519,9 @@ img {
}
.booking {
input {
height: 60px;
input,
select {
height: 52px;
}
}
@@ -1328,8 +1563,8 @@ img {
font-size: 20px;
}
.service-card {
font-size: 17px;
.service-card__title {
font-size: 19px;
}
.footer {
@@ -1362,6 +1597,33 @@ img {
.stats strong {
font-size: 40px;
}
.booking-modal {
&__content {
padding: 28px 18px 22px;
}
&__status {
width: 48px;
height: 48px;
border-radius: 14px;
font-size: 24px;
margin-bottom: 14px;
}
&__title {
font-size: 26px;
}
&__text {
font-size: 16px;
margin-bottom: 18px;
}
&__btn {
min-width: 100%;
}
}
}
@include respond($bp-sm) {
@@ -1422,8 +1684,20 @@ img {
}
.service-card {
min-height: 64px;
font-size: 16px;
min-height: 142px;
padding: 16px;
}
.service-card__title {
font-size: 18px;
}
.service-card__description {
inset: 0;
padding: 14px;
opacity: 1;
font-size: 14px;
transform: translateY(0);
}
.services__cta-btn {
@@ -1450,6 +1724,19 @@ img {
}
}
@media (hover: none) {
.service-card {
justify-content: center;
}
.service-card__description {
position: absolute;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,

4
assets/scss/_fonts.scss
View File

@@ -1,3 +1,5 @@
:root {
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
:root {
color-scheme: dark;
}

3
assets/scss/_vars.scss
View File

@@ -7,7 +7,8 @@ $bp-lg: 1024px;
$bp-md: 768px;
$bp-sm: 520px;
$font-main: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
$font-main: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
$font-heading: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
$color-bg: #121212;
$color-surface: #293133;