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

363
gnx-react/public/styles/_responsive.scss
View File

@@ -406,6 +406,10 @@
font-size: 11px;
padding: 6px 14px;
letter-spacing: 0.8px;
background: rgba(14, 165, 233, 0.15) !important;
border-color: rgba(14, 165, 233, 0.5) !important;
color: #0ea5e9 !important;
font-weight: 600;
i {
font-size: 12px;
@@ -1096,12 +1100,17 @@
margin-bottom: 8px;
.badge {
font-size: 9px;
padding: 4px 10px;
font-size: 10px;
padding: 5px 12px;
letter-spacing: 0.4px;
background: rgba(14, 165, 233, 0.2) !important;
border-color: rgba(14, 165, 233, 0.6) !important;
color: #3dd5f3 !important;
font-weight: 700;
box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
i {
font-size: 10px;
font-size: 11px;
}
}
}
@@ -1183,6 +1192,354 @@
}
}
// Extra extra small screens (< 375px)
@media only screen and (max-width: 374.98px) {
.modern-banner {
min-height: 100vh;
.container {
padding: 20px 0;
}
.content-center {
padding: 0 8px;
.badge-container {
margin-bottom: 6px;
.badge {
font-size: 9px;
padding: 4px 10px;
letter-spacing: 0.3px;
gap: 4px;
background: rgba(14, 165, 233, 0.25) !important;
border-color: rgba(14, 165, 233, 0.7) !important;
color: #5de4ff !important;
font-weight: 700;
box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
i {
font-size: 10px;
}
}
}
.main-heading {
font-size: clamp(1rem, 7vw, 1.3rem);
margin-bottom: 8px;
line-height: 1.1;
}
.description {
font-size: 11px;
margin-bottom: 14px;
line-height: 1.3;
}
.carousel-indicators {
margin-bottom: 14px;
gap: 3px;
.indicator {
width: 3px;
height: 3px;
}
}
.cta-section {
gap: 3px;
margin-bottom: 16px;
.cta-primary,
.cta-secondary {
max-width: 220px;
padding: 7px 12px;
font-size: 10px;
i {
font-size: 10px;
}
}
}
.trust-indicators {
gap: 10px;
.trust-item {
min-width: 55px;
.trust-number {
font-size: 0.9rem;
margin-bottom: 2px;
}
.trust-label {
font-size: 6.5px;
letter-spacing: 0.3px;
}
}
}
}
.banner-background {
.gradient-orb {
&.orb-1 {
width: 100px;
height: 100px;
}
&.orb-2 {
width: 80px;
height: 80px;
}
&.orb-3 {
width: 60px;
height: 60px;
}
}
}
}
}
// Landscape orientation for phones
@media only screen and (max-height: 500px) and (orientation: landscape) {
.modern-banner {
min-height: auto;
height: auto;
padding: 20px 0;
.container {
padding: 20px 0;
}
.banner-content {
margin-bottom: 10px;
}
.content-center {
max-width: 100%;
padding: 0 15px;
.badge-container {
margin-bottom: 8px;
.badge {
font-size: 10px;
padding: 5px 12px;
background: rgba(14, 165, 233, 0.18) !important;
border-color: rgba(14, 165, 233, 0.55) !important;
color: #3dd5f3 !important;
font-weight: 600;
box-shadow: 0 0 8px rgba(14, 165, 233, 0.25);
}
}
.main-heading {
font-size: clamp(1.2rem, 3vh, 1.6rem);
margin-bottom: 8px;
line-height: 1.1;
}
.description {
font-size: 12px;
margin-bottom: 12px;
line-height: 1.3;
max-width: 90%;
}
.carousel-indicators {
margin-bottom: 12px;
.indicator {
width: 5px;
height: 5px;
}
}
.cta-section {
flex-direction: row;
gap: 8px;
margin-bottom: 12px;
justify-content: center;
.cta-primary,
.cta-secondary {
width: auto;
max-width: 180px;
padding: 8px 16px;
font-size: 11px;
}
}
.trust-indicators {
gap: 15px;
margin-bottom: 10px;
.trust-item {
min-width: 65px;
.trust-number {
font-size: 1rem;
margin-bottom: 2px;
}
.trust-label {
font-size: 7px;
}
}
}
}
.banner-background {
.gradient-orb {
opacity: 0.2;
&.orb-1 {
width: 150px;
height: 150px;
}
&.orb-2 {
width: 100px;
height: 100px;
}
&.orb-3 {
display: none;
}
}
.enterprise-bg-elements {
display: none;
}
}
.scroll-indicator {
display: none;
}
}
}
// Tablet landscape (iPad, etc.)
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.modern-banner {
min-height: 90vh;
.container {
padding: 40px 0;
}
.content-center {
max-width: 700px;
.main-heading {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 14px;
}
.description {
font-size: 15px;
margin-bottom: 20px;
max-width: 600px;
}
.cta-section {
gap: 10px;
margin-bottom: 25px;
}
.trust-indicators {
gap: 25px;
}
}
.banner-background {
.enterprise-bg-elements {
opacity: 0.1;
.flying-code,
.request-response-data,
.space-data-generation {
display: none;
}
}
}
}
}
// Large tablets and small laptops (portrait)
@media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
.modern-banner {
min-height: 100vh;
.content-center {
max-width: 600px;
padding: 0 30px;
.main-heading {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 16px;
}
.description {
font-size: 15px;
margin-bottom: 24px;
}
.cta-section {
flex-direction: row;
gap: 12px;
margin-bottom: 30px;
.cta-primary,
.cta-secondary {
width: auto;
min-width: 180px;
}
}
}
}
}
// Touch device optimizations
@media (hover: none) and (pointer: coarse) {
.modern-banner {
.content-center {
.carousel-indicators {
.indicator {
width: 10px;
height: 10px;
margin: 0 2px;
&:not(.active) {
opacity: 0.5;
}
}
}
.cta-section {
.cta-primary,
.cta-secondary {
min-height: 44px; // Apple's minimum touch target size
display: flex;
align-items: center;
justify-content: center;
}
}
}
// Reduce animations for better performance on mobile devices
.banner-background {
.enterprise-bg-elements {
* {
animation-duration: 1.5x !important; // Slow down animations
}
}
}
}
}
@media only screen and (min-width: 1400px) {
.tp-banner {
.tp-banner__content {

17
gnx-react/public/styles/components/_cookie-consent.scss
View File

@@ -70,19 +70,28 @@
h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--secondary-800);
color: #ffffff !important;
margin: 0 0 var(--space-2) 0;
line-height: var(--leading-tight);
}
p {
font-size: var(--text-sm);
color: var(--secondary-600);
color: #ffffff !important;
margin: 0 0 var(--space-3) 0;
line-height: var(--leading-relaxed);
max-width: 600px;
}
}
// Force white color with higher specificity
&.cookie-consent-banner .cookie-consent-banner__text h3 {
color: #ffffff !important;
}
&.cookie-consent-banner .cookie-consent-banner__text p {
color: #ffffff !important;
}
&__links {
display: flex;
@@ -618,11 +627,11 @@
border-top-color: var(--secondary-700);
&__text h3 {
color: var(--secondary-100);
color: #ffffff !important;
}
&__text p {
color: var(--secondary-300);
color: #ffffff !important;
}
}

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 {