1587 lines
33 KiB
SCSS
1587 lines
33 KiB
SCSS
/* ====
|
|
--------- (4.02) banner styles start ---------
|
|
==== */
|
|
|
|
// 4.02.01 modern banner styles start
|
|
.modern-banner {
|
|
position: relative;
|
|
height: 100vh;
|
|
background: #0a0a0a;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0;
|
|
|
|
.banner-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
|
|
.gradient-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
opacity: 0.3;
|
|
animation: float 6s ease-in-out infinite;
|
|
|
|
&.orb-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, #1e40af 0%, transparent 70%);
|
|
top: 10%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
&.orb-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, #0ea5e9 0%, transparent 70%);
|
|
top: 60%;
|
|
right: 15%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
&.orb-3 {
|
|
width: 250px;
|
|
height: 250px;
|
|
background: radial-gradient(circle, #6366f1 0%, transparent 70%);
|
|
bottom: 20%;
|
|
left: 50%;
|
|
animation-delay: 4s;
|
|
}
|
|
}
|
|
|
|
// Industrial Enterprise Background Elements
|
|
.enterprise-bg-elements {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
opacity: 0.15;
|
|
|
|
// Flying Code Elements
|
|
.flying-code {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.code-snippet {
|
|
position: absolute;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 10px;
|
|
color: #0ea5e9;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(14, 165, 233, 0.3);
|
|
backdrop-filter: blur(5px);
|
|
animation: flyCode 15s linear infinite;
|
|
|
|
.code-line {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
text-shadow: 0 0 5px rgba(14, 165, 233, 0.5);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.code-1 {
|
|
top: 10%;
|
|
left: -200px;
|
|
animation-delay: 0s;
|
|
animation-duration: 20s;
|
|
}
|
|
|
|
&.code-2 {
|
|
top: 30%;
|
|
right: -200px;
|
|
animation-delay: 5s;
|
|
animation-duration: 18s;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
&.code-3 {
|
|
top: 60%;
|
|
left: -200px;
|
|
animation-delay: 10s;
|
|
animation-duration: 22s;
|
|
}
|
|
|
|
&.code-4 {
|
|
top: 80%;
|
|
right: -200px;
|
|
animation-delay: 15s;
|
|
animation-duration: 16s;
|
|
animation-direction: reverse;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Industrial Grid
|
|
.industrial-grid {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.grid-line {
|
|
position: absolute;
|
|
background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
|
|
animation: gridPulse 4s ease-in-out infinite;
|
|
|
|
&.horizontal {
|
|
height: 1px;
|
|
width: 100%;
|
|
|
|
&.h-1 {
|
|
top: 20%;
|
|
animation-delay: 0s;
|
|
}
|
|
&.h-2 {
|
|
top: 40%;
|
|
animation-delay: 1s;
|
|
}
|
|
&.h-3 {
|
|
top: 60%;
|
|
animation-delay: 2s;
|
|
}
|
|
&.h-4 {
|
|
top: 80%;
|
|
animation-delay: 3s;
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
width: 1px;
|
|
height: 100%;
|
|
|
|
&.v-1 {
|
|
left: 20%;
|
|
animation-delay: 0.5s;
|
|
}
|
|
&.v-2 {
|
|
left: 40%;
|
|
animation-delay: 1.5s;
|
|
}
|
|
&.v-3 {
|
|
left: 60%;
|
|
animation-delay: 2.5s;
|
|
}
|
|
&.v-4 {
|
|
left: 80%;
|
|
animation-delay: 3.5s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Security Elements
|
|
.security-elements {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.shield {
|
|
position: absolute;
|
|
color: #6366f1;
|
|
font-size: 16px;
|
|
animation: securityPulse 3s ease-in-out infinite;
|
|
text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
|
|
|
|
&.shield-1 {
|
|
top: 15%;
|
|
left: 8%;
|
|
animation-delay: 0s;
|
|
}
|
|
&.shield-2 {
|
|
top: 25%;
|
|
right: 12%;
|
|
animation-delay: 0.8s;
|
|
}
|
|
&.shield-3 {
|
|
bottom: 30%;
|
|
left: 15%;
|
|
animation-delay: 1.6s;
|
|
}
|
|
&.shield-4 {
|
|
bottom: 20%;
|
|
right: 8%;
|
|
animation-delay: 2.4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Circuit Patterns
|
|
.circuit-patterns {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.circuit {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
animation: circuitFlow 6s ease-in-out infinite;
|
|
|
|
.circuit-node {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #0ea5e9;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px #0ea5e9;
|
|
animation: nodeGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.circuit-line {
|
|
width: 30px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #0ea5e9, transparent);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
&.circuit-1 {
|
|
top: 35%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
&.circuit-2 {
|
|
top: 65%;
|
|
right: 15%;
|
|
animation-delay: 2s;
|
|
}
|
|
&.circuit-3 {
|
|
bottom: 40%;
|
|
left: 25%;
|
|
animation-delay: 4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Data Streams
|
|
.data-streams {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.stream {
|
|
position: absolute;
|
|
display: flex;
|
|
gap: 8px;
|
|
animation: streamFlow 8s linear infinite;
|
|
|
|
.data-bit {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #6366f1;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px #6366f1;
|
|
animation: bitPulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
&.stream-1 {
|
|
top: 25%;
|
|
left: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
&.stream-2 {
|
|
top: 55%;
|
|
right: -100px;
|
|
animation-delay: 3s;
|
|
animation-direction: reverse;
|
|
}
|
|
&.stream-3 {
|
|
bottom: 35%;
|
|
left: -100px;
|
|
animation-delay: 6s;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Request/Response Data
|
|
.request-response-data {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.api-request, .api-response {
|
|
position: absolute;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 9px;
|
|
color: #0ea5e9;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 6px 10px;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(14, 165, 233, 0.3);
|
|
backdrop-filter: blur(3px);
|
|
animation: apiFlow 12s linear infinite;
|
|
|
|
.request-label, .response-label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 3px rgba(14, 165, 233, 0.5);
|
|
}
|
|
|
|
.request-data, .response-data {
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.data-packet {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #0ea5e9;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 4px #0ea5e9;
|
|
animation: packetPulse 1s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.req-1 {
|
|
top: 20%;
|
|
left: -150px;
|
|
animation-delay: 0s;
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
.resp-1 {
|
|
top: 20%;
|
|
right: -150px;
|
|
animation-delay: 2s;
|
|
animation-duration: 15s;
|
|
animation-direction: reverse;
|
|
color: #10b981;
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
|
|
.response-label {
|
|
color: #10b981;
|
|
text-shadow: 0 0 3px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.data-packet {
|
|
background: #10b981;
|
|
box-shadow: 0 0 4px #10b981;
|
|
}
|
|
}
|
|
|
|
.req-2 {
|
|
top: 70%;
|
|
left: -150px;
|
|
animation-delay: 8s;
|
|
animation-duration: 18s;
|
|
}
|
|
|
|
.resp-2 {
|
|
top: 70%;
|
|
right: -150px;
|
|
animation-delay: 10s;
|
|
animation-duration: 18s;
|
|
animation-direction: reverse;
|
|
color: #10b981;
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
|
|
.response-label {
|
|
color: #10b981;
|
|
text-shadow: 0 0 3px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.data-packet {
|
|
background: #10b981;
|
|
box-shadow: 0 0 4px #10b981;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Space Data Generation
|
|
.space-data-generation {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.data-cluster {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
animation: clusterFloat 20s ease-in-out infinite;
|
|
|
|
.data-point {
|
|
width: 3px;
|
|
height: 3px;
|
|
background: #6366f1;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px #6366f1;
|
|
animation: pointGlow 2s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.cluster-1 {
|
|
top: 15%;
|
|
left: 5%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.cluster-2 {
|
|
top: 45%;
|
|
right: 8%;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.cluster-3 {
|
|
bottom: 25%;
|
|
left: 12%;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
.cluster-4 {
|
|
bottom: 15%;
|
|
right: 5%;
|
|
animation-delay: 15s;
|
|
}
|
|
}
|
|
|
|
// Database Connections
|
|
.database-connections {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.db-connection {
|
|
position: absolute;
|
|
animation: dbPulse 4s ease-in-out infinite;
|
|
|
|
.connection-line {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #0ea5e9, transparent);
|
|
border-radius: 1px;
|
|
animation: lineFlow 3s ease-in-out infinite;
|
|
}
|
|
|
|
.db-node {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgba(14, 165, 233, 0.2);
|
|
border: 1px solid #0ea5e9;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #0ea5e9;
|
|
font-size: 8px;
|
|
box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
|
|
}
|
|
|
|
.connection-pulse {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #0ea5e9;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px #0ea5e9;
|
|
animation: pulseMove 2s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.conn-1 {
|
|
top: 30%;
|
|
left: 20%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.conn-2 {
|
|
top: 60%;
|
|
right: 25%;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.conn-3 {
|
|
bottom: 40%;
|
|
left: 30%;
|
|
animation-delay: 3s;
|
|
}
|
|
}
|
|
|
|
// Real-time Metrics
|
|
.real-time-metrics {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.metric {
|
|
position: absolute;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 8px;
|
|
color: #0ea5e9;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(14, 165, 233, 0.3);
|
|
backdrop-filter: blur(2px);
|
|
animation: metricUpdate 6s ease-in-out infinite;
|
|
|
|
.metric-label {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 2px rgba(14, 165, 233, 0.5);
|
|
}
|
|
|
|
.metric-value {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #10b981;
|
|
text-shadow: 0 0 3px rgba(16, 185, 129, 0.5);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.metric-bar {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 1px;
|
|
overflow: hidden;
|
|
|
|
.bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #0ea5e9, #10b981);
|
|
border-radius: 1px;
|
|
animation: barFill 3s ease-in-out infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
.metric-1 {
|
|
top: 10%;
|
|
right: 15%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.metric-2 {
|
|
top: 50%;
|
|
left: 10%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.metric-3 {
|
|
bottom: 20%;
|
|
right: 20%;
|
|
animation-delay: 4s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.banner-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
margin-bottom: 40px;
|
|
|
|
.content-center {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
|
|
.badge-container {
|
|
margin-bottom: 16px;
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(14, 165, 233, 0.1));
|
|
border: 1px solid rgba(30, 64, 175, 0.3);
|
|
color: #0ea5e9;
|
|
padding: 8px 18px;
|
|
border-radius: 50px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 1.2px;
|
|
backdrop-filter: blur(10px);
|
|
|
|
i {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-heading {
|
|
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
color: white;
|
|
margin-bottom: 20px;
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #0ea5e9, #6366f1);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
&.carousel-text {
|
|
transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
|
|
&.fade-in {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.fade-out {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 32px;
|
|
max-width: 650px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
&.carousel-text {
|
|
transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
|
|
|
|
&.fade-in {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.fade-out {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Carousel Indicators
|
|
.carousel-indicators {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-bottom: 24px;
|
|
|
|
.indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
background: #0ea5e9;
|
|
transform: scale(1.2);
|
|
box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cta-section {
|
|
display: flex;
|
|
gap: 14px;
|
|
justify-content: center;
|
|
margin-bottom: 40px;
|
|
flex-wrap: wrap;
|
|
|
|
.cta-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, #1e40af, #0ea5e9);
|
|
color: white;
|
|
padding: 14px 28px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 6px 24px rgba(30, 64, 175, 0.3);
|
|
font-size: 15px;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4);
|
|
}
|
|
|
|
i {
|
|
font-size: 15px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&:hover i {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
|
|
.cta-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: transparent;
|
|
color: white;
|
|
padding: 14px 28px;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
font-size: 15px;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
i {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.trust-indicators {
|
|
display: flex;
|
|
gap: 35px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
.trust-item {
|
|
text-align: center;
|
|
|
|
.trust-number {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #0ea5e9;
|
|
line-height: 1;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.trust-label {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
z-index: 20;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
color: #0ea5e9;
|
|
transform: translateX(-50%) translateY(-2px);
|
|
}
|
|
|
|
.scroll-text {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.scroll-arrow {
|
|
animation: bounce 2s infinite;
|
|
|
|
i {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
transform: translateY(-10px);
|
|
}
|
|
60% {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
// Industrial Enterprise Background Animations
|
|
@keyframes flyCode {
|
|
0% {
|
|
transform: translateX(0) translateY(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 200px)) translateY(-20px) rotate(5deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gridPulse {
|
|
0%, 100% {
|
|
opacity: 0.1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
|
|
@keyframes securityPulse {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes circuitFlow {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes nodeGlow {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
box-shadow: 0 0 8px #0ea5e9;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
box-shadow: 0 0 15px #0ea5e9;
|
|
}
|
|
}
|
|
|
|
@keyframes streamFlow {
|
|
0% {
|
|
transform: translateX(0);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 100px));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes bitPulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
// New Data Generation Animations
|
|
@keyframes apiFlow {
|
|
0% {
|
|
transform: translateX(0) translateY(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 150px)) translateY(-10px) rotate(2deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes packetPulse {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes clusterFloat {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0) rotate(0deg);
|
|
opacity: 0.4;
|
|
}
|
|
25% {
|
|
transform: translateY(-10px) translateX(5px) rotate(1deg);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translateY(-5px) translateX(-5px) rotate(-1deg);
|
|
opacity: 0.8;
|
|
}
|
|
75% {
|
|
transform: translateY(-15px) translateX(3px) rotate(0.5deg);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes pointGlow {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
box-shadow: 0 0 6px #6366f1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.4);
|
|
box-shadow: 0 0 12px #6366f1;
|
|
}
|
|
}
|
|
|
|
@keyframes dbPulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes lineFlow {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scaleX(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scaleX(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes pulseMove {
|
|
0% {
|
|
transform: translateX(0);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translateX(30px);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(60px);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
@keyframes metricUpdate {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes barFill {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
50% {
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
// Carousel Animations
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4.02.02 home banner styles start
|
|
.tp-banner {
|
|
background-color: var(--black);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center bottom;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
|
|
.tp-banner__users {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.tp-banner__avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0px;
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin-left: -8px;
|
|
&:nth-of-type(1) {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tp-banner__thumb {
|
|
position: relative;
|
|
.video-frame {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: calc(100% - 50px);
|
|
}
|
|
}
|
|
|
|
.social {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: -1;
|
|
a {
|
|
background-color: transparent;
|
|
color: white;
|
|
width: auto;
|
|
min-width: auto;
|
|
height: auto;
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-to {
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 100px;
|
|
writing-mode: vertical-rl;
|
|
text-transform: none;
|
|
line-height: 0px;
|
|
flex-direction: row-reverse;
|
|
color: white;
|
|
transform: rotate(-180deg);
|
|
letter-spacing: 8px;
|
|
font-weight: 400;
|
|
gap: 30px;
|
|
animation: moveUpDown 2.4s infinite;
|
|
z-index: -1;
|
|
.arrow {
|
|
position: relative;
|
|
display: block;
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 46px;
|
|
background-color: var(--white);
|
|
transition: var(--transition);
|
|
}
|
|
&::after {
|
|
content: "\f106";
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
color: white;
|
|
left: 1px;
|
|
bottom: calc(100% - 22px);
|
|
font-size: 24px;
|
|
transition: var(--transition);
|
|
}
|
|
}
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
animation-play-state: paused;
|
|
.arrow {
|
|
&::before {
|
|
background-color: var(--quaternary-color);
|
|
}
|
|
&::after {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes moveUpDown {
|
|
0% {
|
|
top: 40%;
|
|
}
|
|
50% {
|
|
top: calc(40% + 40px);
|
|
}
|
|
100% {
|
|
top: 40%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4.02.02 about banner styles start
|
|
.about-banner {
|
|
z-index: 1;
|
|
.parallax-image-wrap {
|
|
min-width: 80vw;
|
|
}
|
|
|
|
.foot-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.btn-anim {
|
|
z-index: 9;
|
|
margin-left: auto;
|
|
margin-right: 60px;
|
|
}
|
|
}
|
|
|
|
.anime {
|
|
position: absolute;
|
|
left: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
z-index: 1;
|
|
span {
|
|
width: 8vw;
|
|
height: 8vw;
|
|
border-radius: 50%;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb50 50%,
|
|
transparent 50%
|
|
);
|
|
margin-left: -90px;
|
|
display: inline-block;
|
|
&:nth-of-type(1) {
|
|
margin-left: 20px;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb20 50%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
&:nth-of-type(2) {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb30 50%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
&:nth-of-type(3) {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb40 50%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
&:nth-of-type(4) {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb50 50%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
&:nth-of-type(6) {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#2563eb80 50%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.social {
|
|
position: absolute;
|
|
top: 40%;
|
|
transform: translateY(-40%);
|
|
left: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: -1;
|
|
a {
|
|
background-color: transparent;
|
|
color: #444444;
|
|
width: auto;
|
|
min-width: auto;
|
|
height: auto;
|
|
&:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4.02.03 service banner styles start
|
|
.service-banner {
|
|
z-index: 1;
|
|
p {
|
|
max-width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.social {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: -1;
|
|
a {
|
|
background-color: transparent;
|
|
color: white;
|
|
width: auto;
|
|
min-width: auto;
|
|
height: auto;
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-to {
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 100px;
|
|
writing-mode: vertical-rl;
|
|
text-transform: none;
|
|
line-height: 0px;
|
|
flex-direction: row-reverse;
|
|
color: white;
|
|
transform: rotate(-180deg);
|
|
letter-spacing: 8px;
|
|
font-weight: 400;
|
|
gap: 30px;
|
|
animation: moveUpDown 2.4s infinite;
|
|
z-index: -1;
|
|
.arrow {
|
|
position: relative;
|
|
display: block;
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 46px;
|
|
background-color: var(--white);
|
|
transition: var(--transition);
|
|
}
|
|
&::after {
|
|
content: "\f106";
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
color: white;
|
|
left: 1px;
|
|
bottom: calc(100% - 22px);
|
|
font-size: 24px;
|
|
transition: var(--transition);
|
|
}
|
|
}
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
animation-play-state: paused;
|
|
.arrow {
|
|
&::before {
|
|
background-color: var(--quaternary-color);
|
|
}
|
|
&::after {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes moveUpDown {
|
|
0% {
|
|
top: 40%;
|
|
}
|
|
50% {
|
|
top: calc(40% + 40px);
|
|
}
|
|
100% {
|
|
top: 40%;
|
|
}
|
|
}
|
|
|
|
.thumb-one,
|
|
.thumb-two {
|
|
position: absolute;
|
|
z-index: -1;
|
|
img {
|
|
max-width: 16vw;
|
|
min-width: 80px;
|
|
}
|
|
}
|
|
|
|
.thumb-one {
|
|
bottom: 120px;
|
|
left: 10%;
|
|
}
|
|
|
|
.thumb-two {
|
|
top: 140px;
|
|
right: 13%;
|
|
}
|
|
}
|
|
|
|
// 4.02.04 career banner styles start
|
|
.career-banner {
|
|
z-index: 1;
|
|
padding-bottom: 200px;
|
|
--scale: 1;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 10%;
|
|
width: 10vw;
|
|
height: 10vw;
|
|
min-width: 80px;
|
|
min-height: 80px;
|
|
border-radius: 50%;
|
|
background-image: linear-gradient(to bottom, #2563eb 50%, #2563eb 50%);
|
|
z-index: -1;
|
|
transform: translateY(50%) scale(var(--scale));
|
|
}
|
|
.cp-banner-thumb {
|
|
position: relative;
|
|
z-index: -2;
|
|
img {
|
|
max-width: 30vw;
|
|
min-width: 240px;
|
|
}
|
|
}
|
|
|
|
.social {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: -1;
|
|
a {
|
|
background-color: transparent;
|
|
color: white;
|
|
width: auto;
|
|
min-width: auto;
|
|
height: auto;
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-to {
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 100px;
|
|
writing-mode: vertical-rl;
|
|
text-transform: none;
|
|
line-height: 0px;
|
|
flex-direction: row-reverse;
|
|
color: white;
|
|
transform: rotate(-180deg);
|
|
letter-spacing: 8px;
|
|
font-weight: 400;
|
|
gap: 30px;
|
|
animation: moveUpDown 2.4s infinite;
|
|
z-index: -1;
|
|
.arrow {
|
|
position: relative;
|
|
display: block;
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 46px;
|
|
background-color: var(--white);
|
|
transition: var(--transition);
|
|
}
|
|
&::after {
|
|
content: "\f106";
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
color: white;
|
|
left: 1px;
|
|
bottom: calc(100% - 22px);
|
|
font-size: 24px;
|
|
transition: var(--transition);
|
|
}
|
|
}
|
|
&:hover {
|
|
color: var(--quaternary-color);
|
|
animation-play-state: paused;
|
|
.arrow {
|
|
&::before {
|
|
background-color: var(--quaternary-color);
|
|
}
|
|
&::after {
|
|
color: var(--quaternary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes moveUpDown {
|
|
0% {
|
|
top: 40%;
|
|
}
|
|
50% {
|
|
top: calc(40% + 40px);
|
|
}
|
|
100% {
|
|
top: 40%;
|
|
}
|
|
}
|
|
|
|
.sm-c {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 20%;
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
#2563eb60 50%,
|
|
transparent 50%
|
|
);
|
|
z-index: -1;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.sm-cl {
|
|
top: unset;
|
|
bottom: 20%;
|
|
right: 80%;
|
|
background-image: linear-gradient(to right, #2563eb60 50%, transparent 50%);
|
|
}
|
|
}
|
|
|
|
/* ====
|
|
--------- (4.02) banner styles end ---------
|
|
==== */
|