gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Iliyan Angelov
2025-10-13 01:49:06 +03:00
parent 76c857b4f5
commit 5ad9cbe3a6
97 changed files with 5752 additions and 2376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
gnx-react/public/styles/layout/_banner.scss
View File

@@ -2,12 +2,21 @@
--------- (4.02) banner styles start ---------
==== */
// CSS custom property for dynamic viewport height (better mobile support)
:root {
--vh: 1vh;
}
// 4.02.01 modern banner styles start
.modern-banner {
position: relative;
height: 100vh;
height: calc(var(--vh, 1vh) * 100); // Dynamic viewport height for mobile browsers
min-height: 100vh;
min-height: -webkit-fill-available; // iOS viewport fix
background: #0a0a0a;
overflow: hidden;
overflow-x: hidden; // Prevent horizontal scroll
display: flex;
flex-direction: column;
justify-content: center;
@@ -610,6 +619,23 @@
flex-direction: column;
justify-content: center;
padding: 80px 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
@media (max-width: 1199.98px) {
max-width: 960px;
}
@media (max-width: 991.98px) {
max-width: 720px;
}
@media (max-width: 767.98px) {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
.banner-content {
@@ -645,6 +671,31 @@
i {
font-size: 14px;
}
// Mobile visibility enhancement
@media (max-width: 991.98px) {
background: linear-gradient(135deg, rgba(30, 64, 175, 0.25), rgba(14, 165, 233, 0.25));
border: 2px solid rgba(14, 165, 233, 0.7);
color: #3dd5f3;
font-weight: 700;
box-shadow: 0 0 15px rgba(14, 165, 233, 0.35),
0 4px 10px rgba(0, 0, 0, 0.3);
text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
i {
filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.6));
}
}
@media (max-width: 575.98px) {
background: rgba(14, 165, 233, 0.3);
border: 2px solid rgba(14, 165, 233, 0.8);
color: #5de4ff;
font-weight: 700;
box-shadow: 0 0 20px rgba(14, 165, 233, 0.5),
0 4px 12px rgba(0, 0, 0, 0.4);
text-shadow: 0 0 10px rgba(14, 165, 233, 0.7);
}
}
}
@@ -703,6 +754,7 @@
gap: 8px;
justify-content: center;
margin-bottom: 24px;
padding: 8px 0;
.indicator {
width: 8px;
@@ -712,6 +764,9 @@
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
&.active {
background: #0ea5e9;
@@ -719,10 +774,19 @@
box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}
&:hover {
&:hover:not(.active) {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.1);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}
&:focus:not(:focus-visible) {
box-shadow: none;
}
}
}
@@ -746,11 +810,18 @@
transition: all 0.3s ease;
box-shadow: 0 6px 24px rgba(30, 64, 175, 0.3);
font-size: 15px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4);
}
&:active {
transform: translateY(0);
}
i {
font-size: 15px;
@@ -776,12 +847,19 @@
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 15px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
i {
font-size: 15px;
@@ -833,6 +911,8 @@
z-index: 20;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
&:hover {
color: #0ea5e9;
@@ -853,6 +933,10 @@
font-size: 16px;
}
}
@media (max-width: 991.98px) {
display: none;
}
}
@keyframes float {