diff --git a/assets/images/logo-arbitrum.png b/assets/images/logo-arbitrum.png new file mode 100644 index 0000000..d3ea502 Binary files /dev/null and b/assets/images/logo-arbitrum.png differ diff --git a/assets/images/logo-bnb.png b/assets/images/logo-bnb.png new file mode 100644 index 0000000..8760888 Binary files /dev/null and b/assets/images/logo-bnb.png differ diff --git a/assets/images/logo-ethereum.png b/assets/images/logo-ethereum.png new file mode 100644 index 0000000..3a78269 Binary files /dev/null and b/assets/images/logo-ethereum.png differ diff --git a/assets/images/logo-rub.png b/assets/images/logo-rub.png new file mode 100644 index 0000000..5304d92 Binary files /dev/null and b/assets/images/logo-rub.png differ diff --git a/assets/images/logo-solana.png b/assets/images/logo-solana.png new file mode 100644 index 0000000..ab661c7 Binary files /dev/null and b/assets/images/logo-solana.png differ diff --git a/assets/images/logo-tether.png b/assets/images/logo-tether.png new file mode 100644 index 0000000..d2fc942 Binary files /dev/null and b/assets/images/logo-tether.png differ diff --git a/assets/images/logo-tron.png b/assets/images/logo-tron.png new file mode 100644 index 0000000..40d6c3b Binary files /dev/null and b/assets/images/logo-tron.png differ diff --git a/cabinet.html b/cabinet.html new file mode 100644 index 0000000..71e972b --- /dev/null +++ b/cabinet.html @@ -0,0 +1,62 @@ + + + + + +Личный кабинет — заявка + + + + + + + + + +
+
+
+ + +Личный кабинет + +
+
+ +
+← На главную +
+
+

Заявка

+
+ + + +
+
+
+
+
+ + + + diff --git a/css/styles.css b/css/styles.css index a56e4cc..fe08810 100644 --- a/css/styles.css +++ b/css/styles.css @@ -9,6 +9,7 @@ --blue-panel: #101a5c; --footer-bg: #05052d; --footer-line: rgba(255, 255, 255, 0.18); + --page-max: 120rem; } *, @@ -24,8 +25,11 @@ html { body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; + font-size: 18px; color: #1a1a2e; - background: var(--cream); + background: radial-gradient(ellipse 120% 90% at 35% 10%, rgba(80, 70, 170, 0.25) 0%, transparent 55%), + radial-gradient(ellipse 120% 90% at 60% 55%, rgba(140, 120, 255, 0.14) 0%, transparent 62%), + linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 32%, var(--hero-bg-3) 62%, var(--footer-bg) 100%); } a { @@ -33,13 +37,22 @@ a { text-decoration: none; } +.page { + width: min(100%, var(--page-max)); + margin: 0 auto; + background: transparent; + min-height: 100vh; + box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35); +} + .header { position: fixed; top: 0; - left: 0; - right: 0; + left: 50%; + transform: translateX(-50%); + width: min(100%, var(--page-max)); z-index: 50; - padding: 1.25rem 4vw 0; + padding: 2.25rem 4vw 0; background: linear-gradient(180deg, rgba(7, 11, 40, 0.95) 0%, rgba(7, 11, 40, 0.65) 70%, transparent 100%); } @@ -50,7 +63,7 @@ a { align-items: center; justify-content: space-between; gap: 1.5rem; - padding-bottom: 1rem; + padding-bottom: 1.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } @@ -68,13 +81,13 @@ a { } .logo--header .logo__img { - height: clamp(1.35rem, 3.2vw, 1.85rem); + height: clamp(1.65rem, 3.8vw, 2.25rem); width: auto; } .logo--hero { margin: 0 0 2rem; - max-width: min(100%, 28rem); + max-width: min(100%, 34rem); } .logo--hero .logo__img { @@ -87,13 +100,13 @@ a { flex-wrap: wrap; align-items: center; justify-content: center; - gap: clamp(0.75rem, 2vw, 2.5rem); + gap: clamp(1rem, 2.4vw, 3.1rem); } .nav__link { - font-size: clamp(0.7rem, 1.1vw, 0.85rem); + font-size: clamp(0.95rem, 1.35vw, 1.15rem); font-weight: 600; - letter-spacing: 0.14em; + letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); transition: color 0.2s ease, opacity 0.2s ease; @@ -105,9 +118,9 @@ a { .btn--cabinet { flex-shrink: 0; - padding: 0.65rem 1.35rem; + padding: 0.95rem 1.9rem; border-radius: 999px; - font-size: 0.78rem; + font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em; color: #0c0c24; @@ -164,23 +177,44 @@ a { background: radial-gradient(ellipse 120% 80% at 20% 20%, #2a1b6e 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 85% 30%, #3d1f7a 0%, transparent 50%), linear-gradient(165deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 42%, var(--hero-bg-3) 100%); + pointer-events: none; z-index: 0; } +.hero__bg::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 120% 90% at 55% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 58%), + radial-gradient(ellipse 80% 70% at 20% 55%, rgba(120, 90, 220, 0.16) 0%, transparent 62%); + opacity: 0.9; +} + .hero__glow { position: absolute; z-index: 1; - width: clamp(5rem, 14vw, 9rem); - height: clamp(5rem, 14vw, 9rem); + width: clamp(80px, 14vw, 144px); + height: clamp(80px, 14vw, 144px); display: grid; place-items: center; - font-size: clamp(2rem, 5vw, 3.2rem); - font-weight: 300; - color: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1.1rem; transform: rotate(-8deg); - box-shadow: 0 0 40px rgba(140, 120, 255, 0.15); + box-shadow: 0 0 26px rgba(140, 120, 255, 0.12); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + background: rgba(255, 255, 255, 0.03); +} + +.hero__glow-img { + width: 62%; + height: auto; + opacity: 0.5; + filter: grayscale(1) brightness(1.08) contrast(1.08) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22)); +} + +.hero__glow-img[src$='logo-ethereum.png'] { + filter: grayscale(1) brightness(1.50) contrast(1.00) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22)); } .hero__glow--1 { @@ -200,6 +234,30 @@ a { transform: rotate(12deg); } +.hero__glow--4 { + top: 58%; + left: 6%; + transform: rotate(-14deg); +} + +.hero__glow--5 { + top: 64%; + left: 20%; + transform: rotate(10deg); +} + +.hero__glow--6 { + top: 12%; + left: 42%; + transform: rotate(-6deg); +} + +.hero__glow--7 { + top: 36%; + left: 36%; + transform: rotate(16deg); +} + .hero__grid { position: relative; z-index: 2; @@ -221,7 +279,7 @@ a { display: flex; flex-direction: column; gap: 0.35rem; - font-size: clamp(0.65rem, 1.1vw, 0.8rem); + font-size: clamp(0.75rem, 1.25vw, 0.95rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; @@ -233,7 +291,7 @@ a { flex-direction: column; align-items: flex-end; text-align: right; - gap: 1.5rem; + gap: 2rem; } .hero__bridge-wrap { @@ -242,7 +300,7 @@ a { .hero__bridge { margin: 0; - font-size: clamp(2rem, 5vw, 3.6rem); + font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.05; @@ -267,7 +325,7 @@ a { .hero__tag { margin: 0; - font-size: clamp(2.4rem, 7.5vw, 5.8rem); + font-size: clamp(3.1rem, 8.6vw, 7.4rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; @@ -292,7 +350,7 @@ a { .countdown__title { margin: 0 0 1rem; - font-size: clamp(0.85rem, 1.5vw, 1rem); + font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; @@ -300,21 +358,25 @@ a { } .countdown__units { - display: flex; - align-items: stretch; - justify-content: flex-end; - flex-wrap: wrap; - gap: 0.35rem 0.5rem; + --countdown-gap: clamp(1rem, 2.2vw, 1.75rem); + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: end; + justify-items: center; + column-gap: var(--countdown-gap); + row-gap: 0.75rem; } .countdown__unit { - min-width: clamp(4.2rem, 12vw, 6.5rem); + min-width: 0; text-align: center; + position: relative; + padding-inline: clamp(0.65rem, 1.2vw, 0.9rem); } .countdown__value { display: block; - font-size: clamp(2.4rem, 6vw, 4.25rem); + font-size: clamp(4.2rem, 9.6vw, 7.1rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; @@ -326,7 +388,7 @@ a { .countdown__label { display: block; margin-top: 0.45rem; - font-size: 0.68rem; + font-size: 0.95rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; @@ -334,11 +396,23 @@ a { } .countdown__sep { - width: 1px; - align-self: stretch; - min-height: 2.5rem; - margin-top: 0.35rem; - background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent); + display: none; +} + +@media (max-width: 620px) { + .countdown__units { + --countdown-gap: 0.9rem; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-items: center; + column-gap: var(--countdown-gap); + row-gap: 0.9rem; + } + + .countdown__unit { + width: 100%; + padding-inline: 0.75rem; + } + } .countdown__done { @@ -353,83 +427,87 @@ a { .about { position: relative; padding: clamp(4rem, 10vw, 7rem) 4vw; - background: var(--cream); + background: transparent; overflow: hidden; } .about__slant { position: absolute; - left: -15%; - right: -5%; - top: 12%; - bottom: 8%; - background: linear-gradient(135deg, #0a1438 0%, #15206e 45%, #1c2a8a 100%); - transform: skewY(-6deg); - border-radius: 2rem; - box-shadow: 0 40px 100px rgba(12, 18, 64, 0.35); - opacity: 0.98; + inset: 0; + background: radial-gradient(ellipse 55% 60% at 35% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 62%); + opacity: 1; } .about__slant::after { content: ''; position: absolute; inset: 0; - border-radius: inherit; - background: radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 55%); + background: linear-gradient(180deg, rgba(7, 11, 40, 0.2) 0%, transparent 40%, rgba(7, 11, 40, 0.25) 100%); pointer-events: none; } .about__inner { position: relative; z-index: 2; - max-width: 72rem; + max-width: 78rem; margin: 0 auto; - padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); + padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem); } .about__panel { - max-width: 38rem; + max-width: 44rem; + padding: clamp(1.75rem, 3vw, 2.5rem); + border-radius: 1.4rem; + border: 1px solid rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } .about__title { margin: 0 0 1.25rem; - font-size: clamp(2rem, 4vw, 3rem); + font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: 0.04em; - color: #ece8ff; + color: #fff; } .about__text { margin: 0 0 1rem; - font-size: clamp(0.95rem, 1.4vw, 1.1rem); - font-weight: 300; + font-size: clamp(1.1rem, 1.6vw, 1.35rem); + font-weight: 400; line-height: 1.65; - color: rgba(244, 242, 255, 0.88); + color: rgba(244, 242, 255, 0.86); } .about__legal { position: relative; z-index: 3; - max-width: 52rem; - margin: clamp(2rem, 6vw, 4rem) auto 0; + max-width: 78rem; + margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0; display: flex; flex-direction: column; - gap: 1rem; + gap: 0.75rem; } .about__legal p { margin: 0; - font-size: clamp(0.75rem, 1.1vw, 0.88rem); + font-size: clamp(0.85rem, 1.15vw, 1rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.55; - color: var(--blue-deep); + color: rgba(255, 255, 255, 0.72); + padding: 0.9rem 1.1rem; + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.03); } .footer { padding: 3.5rem 4vw 2.5rem; - background: var(--footer-bg); + background: transparent; color: rgba(255, 255, 255, 0.9); font-family: 'Nunito Sans', 'Manrope', system-ui, sans-serif; font-size: 1rem; @@ -541,6 +619,100 @@ a { opacity: 0.85; } +.cabinet { + position: relative; + min-height: 100vh; + padding: 0 4vw; + color: rgba(255, 255, 255, 0.92); + display: flex; + align-items: center; + justify-content: center; +} + +.cabinet__back { + position: absolute; + top: clamp(6.75rem, 14vw, 8.75rem); + left: 4vw; + z-index: 2; + width: fit-content; + color: rgba(255, 255, 255, 0.72); + text-decoration: underline; + text-underline-offset: 4px; +} + +.cabinet__center { + width: min(42rem, 100%); + margin: 0 auto; +} + +.cabinet__card { + width: 100%; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.16); + background: rgba(10, 10, 40, 0.72); + box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5); + padding: 2rem 2rem 1.75rem; +} + +.cabinet__title { + margin: 0 0 1.25rem; + font-size: 2rem; + letter-spacing: 0.02em; +} + +.cabinet__form { + display: grid; + gap: 1rem; +} + +.cabinet__field { + display: grid; + gap: 0.45rem; +} + +.cabinet__label { + font-size: 0.95rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.7); +} + +.cabinet__input { + width: 100%; + padding: 0.95rem 1.05rem; + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.92); + outline: none; + font: inherit; +} + +.cabinet__input:focus { + border-color: rgba(201, 184, 255, 0.5); + box-shadow: 0 0 0 4px rgba(201, 184, 255, 0.16); +} + +.cabinet__submit { + margin-top: 0.35rem; + padding: 0.95rem 1.25rem; + border-radius: 1.05rem; + border: 0; + background: #fff; + color: #0c0c24; + font: inherit; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.cabinet__submit:hover { + transform: translateY(-1px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); +} + @media (max-width: 600px) { .hero__glow { display: none; diff --git a/index.html b/index.html index 06dd80e..64559ed 100644 --- a/index.html +++ b/index.html @@ -33,16 +33,14 @@ +
-Личный кабинет +Личный кабинет
@@ -50,9 +48,13 @@
- - - + + + + + + +
@@ -161,5 +163,6 @@ +