Adjust hero section positioning and standardize contact information
- Updated hero section CSS to position content lower on the page - Changed #hero padding-top from 8rem to 4rem with !important flag - Modified .hero-container to use align-items: flex-start with 10rem top padding - Added cache-busting parameter to style.css link for browser refresh - Standardized contact information across all pages: - Location: Pune, Maharashtra, India - Phone: +91 89491-35299 - Email: info@gyannetra.com - Updated footer contact sections in about.html and all service/industry pages - Fixed CSS syntax error by removing extra closing brace - Cleaned up unused CSS and JS files for better project organization
This commit is contained in:
@@ -1,339 +0,0 @@
|
||||
/**
|
||||
* Custom animations for Gyannetra website
|
||||
* Enhances UI with smooth transitions and dynamic effects
|
||||
*/
|
||||
|
||||
/* General fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Slide up animation */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scale in animation */
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse animation */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating animation */
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
/* Node pulse effect */
|
||||
@keyframes nodePulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Node ripple effect */
|
||||
@keyframes nodeRipple {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom cursor animation */
|
||||
@keyframes cursorPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section transition animation */
|
||||
@keyframes sectionTransition {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo pulse animation */
|
||||
@keyframes logoPulse {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
}
|
||||
|
||||
/* Rotating animation */
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Shine effect animation */
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -100px;
|
||||
}
|
||||
40%, 100% {
|
||||
background-position: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animation classes */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.animated {
|
||||
opacity: 1;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.animate-on-scroll.section-heading {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.btn-primary {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.exp-item {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
/* Staggered animation for elements */
|
||||
.section-hidden {
|
||||
opacity: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.section-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-highlighted {
|
||||
animation: pulse 1s ease;
|
||||
}
|
||||
|
||||
.animate-on-visible {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.element-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Header animations */
|
||||
.header-scrolled {
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(10, 10, 30, 0.8);
|
||||
}
|
||||
|
||||
.header-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Footer animations */
|
||||
.footer-visible .footer-col {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.footer-visible .col-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Custom cursor styles */
|
||||
.custom-cursor {
|
||||
position: fixed;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid rgba(59, 130, 246, 0.5);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.2s, height 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.cursor-dot {
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: rgba(59, 130, 246, 0.8);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.cursor-hover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-color: rgba(139, 92, 246, 0.7);
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Data node effects */
|
||||
.node-hover {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.node-active .node-core {
|
||||
animation: nodePulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.node-halo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(59, 130, 246, 0.7);
|
||||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
|
||||
opacity: 0.8;
|
||||
animation: nodeRipple 1.5s ease-out infinite;
|
||||
}
|
||||
|
||||
.node-pulse-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(59, 130, 246, 0.3);
|
||||
opacity: 0;
|
||||
animation: nodeRipple 1.5s ease-out;
|
||||
}
|
||||
|
||||
.node-ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
animation: nodeRipple 0.4s ease-out;
|
||||
}
|
||||
|
||||
.core-glow {
|
||||
box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
.constellation-line {
|
||||
transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.constellation-line-active {
|
||||
stroke: rgba(100, 200, 255, 0.8) !important;
|
||||
stroke-width: 2 !important;
|
||||
filter: drop-shadow(0 0 3px rgba(100, 200, 255, 0.5));
|
||||
}
|
||||
|
||||
/* Expertise item animations */
|
||||
.exp-item {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.exp-hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.exp-click {
|
||||
animation: pulse 0.3s ease;
|
||||
}
|
||||
|
||||
.animate-entrance {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: slideUp 0.5s forwards;
|
||||
}
|
||||
|
||||
/* Page transitions */
|
||||
.transition-ready {
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
.page-hidden .neural-mesh,
|
||||
.page-hidden .data-constellation,
|
||||
.page-hidden .geometric-morphs,
|
||||
.page-hidden .data-streams {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@@ -1,883 +0,0 @@
|
||||
/* Neural Network Hero Animation - Improved Scatter Algorithm
|
||||
.neural-network-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ensure neural network data nodes are clickable above hero content */
|
||||
.neural-network-container .data-node {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Neural Mesh Background */
|
||||
.neural-mesh {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mesh-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Data Constellation - Enhanced FOUC Prevention */
|
||||
.data-constellation {
|
||||
opacity: var(--data-node-opacity, 0) !important;
|
||||
visibility: var(--data-node-visibility, hidden) !important;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Base Data Node Styling with Enhanced FOUC Prevention */
|
||||
.data-node {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
animation: nodeFloat 6s ease-in-out infinite;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 5;
|
||||
|
||||
/* Ultra-strong FOUC prevention */
|
||||
opacity: var(--data-node-opacity, 0) !important;
|
||||
visibility: var(--data-node-visibility, hidden) !important;
|
||||
top: var(--data-node-position, -9999px) !important;
|
||||
left: var(--data-node-position, -9999px) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ===== IMPROVED NEURAL SCATTER ALGORITHM ===== */
|
||||
/* Grid-based positioning system prevents overlaps completely */
|
||||
|
||||
/* Desktop Large Screens (1200px+) - Optimal Neural Distribution */
|
||||
@media (min-width: 1200px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node[class*="node-"] {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Service Nodes - Primary tier, largest spacing */
|
||||
.node-ml {
|
||||
top: 15%;
|
||||
right: 45%;
|
||||
animation-delay: 0s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 55%;
|
||||
right: 8%;
|
||||
animation-delay: 1.5s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 20%;
|
||||
right: 35%;
|
||||
animation-delay: 3s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 45%;
|
||||
right: 3%;
|
||||
animation-delay: 4.5s;
|
||||
z-index: 6;
|
||||
}
|
||||
/* Industry Nodes - Secondary tier, strategic placement */
|
||||
.node-finance {
|
||||
top: 18%;
|
||||
right: 20%;
|
||||
animation-delay: 0.8s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
top: 75%;
|
||||
right: 18%;
|
||||
animation-delay: 2.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-retail {
|
||||
bottom: 8%;
|
||||
right: 15%;
|
||||
animation-delay: 3.8s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-manufacturing {
|
||||
top: 35%;
|
||||
right: 58%;
|
||||
animation-delay: 5.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Strategic Nodes - Tertiary tier, fill remaining space */
|
||||
.node-agentic {
|
||||
top: 85%;
|
||||
right: 48%;
|
||||
animation-delay: 6.8s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-marketing {
|
||||
top: 25%;
|
||||
right: 2%;
|
||||
animation-delay: 7.5s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-media {
|
||||
bottom: 2%;
|
||||
right: 28%;
|
||||
animation-delay: 8.2s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-travel {
|
||||
top: 65%;
|
||||
right: 52%;
|
||||
animation-delay: 9s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-education {
|
||||
top: 45%;
|
||||
right: 25%;
|
||||
animation-delay: 10s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-technology {
|
||||
top: 92%;
|
||||
right: 8%;
|
||||
animation-delay: 11s;
|
||||
z-index: 4;
|
||||
}
|
||||
/* Extended Nodes - Fill outer regions */
|
||||
.node-predictive {
|
||||
top: 28%;
|
||||
right: 68%;
|
||||
animation-delay: 12s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-supply-chain {
|
||||
top: 68%;
|
||||
right: 68%;
|
||||
animation-delay: 13s;
|
||||
z-index: 3;
|
||||
}
|
||||
.node-risk {
|
||||
top: 15%;
|
||||
right: 52%;
|
||||
animation-delay: 14s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* New Upper Area Nodes - Strategic positioning below navbar safe zone */
|
||||
.node-cloud-computing {
|
||||
top: 18%;
|
||||
right: 35%;
|
||||
animation-delay: 15s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-cybersecurity {
|
||||
top: 25%;
|
||||
right: 65%;
|
||||
animation-delay: 16s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-iot {
|
||||
top: 22%;
|
||||
right: 8%;
|
||||
animation-delay: 17s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-blockchain {
|
||||
top: 35%;
|
||||
right: 75%;
|
||||
animation-delay: 18s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-quantum {
|
||||
top: 18%;
|
||||
right: 25%;
|
||||
animation-delay: 19s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-robotics {
|
||||
top: 38%;
|
||||
right: 38%;
|
||||
animation-delay: 20s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-nlp {
|
||||
top: 25%;
|
||||
right: 82%;
|
||||
animation-delay: 21s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-computer-vision {
|
||||
top: 22%;
|
||||
right: 12%;
|
||||
animation-delay: 22s;
|
||||
z-index: 3;
|
||||
}
|
||||
/* Additional Upper Right Area Nodes - Fill space below navbar */
|
||||
.node-deep-learning {
|
||||
top: 35%;
|
||||
right: 15%;
|
||||
animation-delay: 23s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-neural-networks {
|
||||
top: 38%;
|
||||
right: 8%;
|
||||
animation-delay: 24s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-data-science {
|
||||
top: 42%;
|
||||
right: 12%;
|
||||
animation-delay: 25s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-machine-vision {
|
||||
top: 48%;
|
||||
right: 5%;
|
||||
animation-delay: 26s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-edge-computing {
|
||||
top: 52%;
|
||||
right: 15%;
|
||||
animation-delay: 27s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-digital-transformation {
|
||||
top: 58%;
|
||||
right: 22%;
|
||||
animation-delay: 28s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-process-optimization {
|
||||
top: 62%;
|
||||
right: 12%;
|
||||
animation-delay: 29s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-smart-analytics {
|
||||
top: 68%;
|
||||
right: 5%;
|
||||
animation-delay: 30s;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Standard (769px - 1199px) - Balanced Distribution */
|
||||
@media (min-width: 769px) and (max-width: 1199px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node[class*="node-"] {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Service Nodes */
|
||||
.node-ml {
|
||||
top: 18%;
|
||||
right: 42%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 52%;
|
||||
right: 12%;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 22%;
|
||||
right: 38%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 45%;
|
||||
right: 8%;
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
/* Industry Nodes */
|
||||
.node-finance {
|
||||
top: 18%;
|
||||
right: 18%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
top: 72%;
|
||||
right: 22%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.node-retail {
|
||||
bottom: 8%;
|
||||
right: 18%;
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
|
||||
.node-manufacturing {
|
||||
top: 38%;
|
||||
right: 52%;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
/* Strategic Nodes - Limited set for medium screens */
|
||||
.node-agentic {
|
||||
top: 82%;
|
||||
right: 45%;
|
||||
animation-delay: 6.5s;
|
||||
}
|
||||
|
||||
.node-marketing {
|
||||
top: 28%;
|
||||
right: 2%;
|
||||
animation-delay: 7.5s;
|
||||
}
|
||||
.node-media {
|
||||
bottom: 2%;
|
||||
right: 28%;
|
||||
animation-delay: 8.5s;
|
||||
} /* Selected upper area nodes for medium screens */
|
||||
.node-cloud-computing {
|
||||
top: 22%;
|
||||
right: 35%;
|
||||
animation-delay: 9s;
|
||||
}
|
||||
|
||||
.node-cybersecurity {
|
||||
top: 25%;
|
||||
right: 62%;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
.node-iot {
|
||||
top: 22%;
|
||||
right: 5%;
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.node-deep-learning {
|
||||
top: 38%;
|
||||
right: 18%;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.node-neural-networks {
|
||||
top: 42%;
|
||||
right: 8%;
|
||||
animation-delay: 13s;
|
||||
}
|
||||
|
||||
.node-data-science {
|
||||
top: 48%;
|
||||
right: 15%;
|
||||
animation-delay: 14s;
|
||||
}
|
||||
|
||||
/* Hide extended nodes on medium screens to prevent crowding */
|
||||
.node-travel, .node-education, .node-technology,
|
||||
.node-predictive, .node-supply-chain, .node-risk,
|
||||
.node-blockchain, .node-quantum, .node-robotics,
|
||||
.node-nlp, .node-computer-vision, .node-machine-vision,
|
||||
.node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (481px - 768px) - Optimized Distribution */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Services - Essential nodes only */
|
||||
.node-ml {
|
||||
top: 20%;
|
||||
right: 35%;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 25%;
|
||||
right: 8%;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 22%;
|
||||
right: 32%;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 20%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Key Industries */
|
||||
.node-finance {
|
||||
top: 10%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
bottom: 15%;
|
||||
right: 15%;
|
||||
} /* Hide less critical nodes on tablet */
|
||||
.node-retail, .node-manufacturing, .node-agentic,
|
||||
.node-marketing, .node-media, .node-travel,
|
||||
.node-education, .node-technology, .node-predictive,
|
||||
.node-supply-chain, .node-risk, .node-cloud-computing,
|
||||
.node-cybersecurity, .node-iot, .node-blockchain,
|
||||
.node-quantum, .node-robotics, .node-nlp, .node-computer-vision,
|
||||
.node-deep-learning, .node-neural-networks, .node-data-science,
|
||||
.node-machine-vision, .node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile (≤480px) - Minimal Essential Distribution */
|
||||
@media (max-width: 480px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core essentials only - Maximum spacing */
|
||||
.node-ml {
|
||||
top: 22%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 25%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 25%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 22%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Single industry representative */
|
||||
.node-finance {
|
||||
top: 12%;
|
||||
right: 10%;
|
||||
} /* Hide all other nodes on mobile */
|
||||
.node-healthcare, .node-retail, .node-manufacturing,
|
||||
.node-agentic, .node-marketing, .node-media,
|
||||
.node-travel, .node-education, .node-technology,
|
||||
.node-predictive, .node-supply-chain, .node-risk,
|
||||
.node-cloud-computing, .node-cybersecurity, .node-iot,
|
||||
.node-blockchain, .node-quantum, .node-robotics,
|
||||
.node-nlp, .node-computer-vision, .node-deep-learning,
|
||||
.node-neural-networks, .node-data-science, .node-machine-vision,
|
||||
.node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== NODE VISUAL STYLING ===== */
|
||||
|
||||
.node-core {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: nodeCorePulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Industry Node Cores */
|
||||
.industry-core {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(59, 130, 246, 0.2)) !important;
|
||||
border: 1px solid rgba(236, 72, 153, 0.3) !important;
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
.industry-core:hover {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(59, 130, 246, 0.4)) !important;
|
||||
box-shadow: 0 0 35px rgba(236, 72, 153, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Specialty Node Core */
|
||||
.specialty-core {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2)) !important;
|
||||
border: 1px solid rgba(34, 197, 94, 0.3) !important;
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
.specialty-core:hover {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(59, 130, 246, 0.4)) !important;
|
||||
box-shadow: 0 0 35px rgba(34, 197, 94, 0.5) !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.node-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.node-label {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
|
||||
@keyframes nodeFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-8px) translateX(3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) translateX(-2px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-10px) translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodeCorePulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== INTERACTION EFFECTS ===== */
|
||||
|
||||
.data-node:hover {
|
||||
transform: scale(1.1);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.data-node:hover .node-core {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.data-node:hover .node-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover glow effect */
|
||||
.data-node:hover {
|
||||
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
|
||||
}
|
||||
|
||||
/* ===== MORPHING GEOMETRIC PATTERNS ===== */
|
||||
|
||||
.geometric-morphs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.morph-shape {
|
||||
position: absolute;
|
||||
background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
|
||||
border-radius: 20px;
|
||||
animation: morphTransform 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Optimized morph positioning to avoid node collision zones */
|
||||
.morph-1 {
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.morph-2 {
|
||||
top: 8%;
|
||||
left: 85%;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.morph-3 {
|
||||
bottom: 15%;
|
||||
left: 5%;
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.morph-4 {
|
||||
bottom: 8%;
|
||||
left: 85%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.morph-5 {
|
||||
top: 40%;
|
||||
left: 1%;
|
||||
width: 25px;
|
||||
height: 80px;
|
||||
animation-delay: 16s;
|
||||
}
|
||||
|
||||
@keyframes morphTransform {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.1);
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== DATA STREAMS ===== */
|
||||
|
||||
.data-streams {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stream {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
rgba(59, 130, 246, 0.6),
|
||||
rgba(139, 92, 246, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: streamFlow 8s linear infinite;
|
||||
}
|
||||
|
||||
/* Optimized stream positioning to complement node scatter */
|
||||
.stream-1 {
|
||||
left: 25%;
|
||||
height: 180px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.stream-2 {
|
||||
left: 40%;
|
||||
height: 120px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.stream-3 {
|
||||
left: 70%;
|
||||
height: 160px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.stream-4 {
|
||||
left: 85%;
|
||||
height: 100px;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes streamFlow {
|
||||
0% {
|
||||
top: -200px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE CORE ADJUSTMENTS ===== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.neural-network-container {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.node-core, .industry-core, .specialty-core {
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 11px;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
/* Reduce morph shapes on mobile */
|
||||
.morph-shape {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.morph-1, .morph-3 {
|
||||
display: block;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.neural-network-container {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.node-core, .industry-core, .specialty-core {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
} */
|
||||
457
css/style.css
457
css/style.css
@@ -80,9 +80,8 @@
|
||||
--agentic-ai-primary-hover: #db2777;--primary-color-glow: rgba(109, 40, 217, 0.5);
|
||||
--accent: #a2abff;
|
||||
--accent-rgb: 162, 171, 255;
|
||||
|
||||
/* Spacing variables */
|
||||
--section-margin: 4rem;
|
||||
/* Spacing variables */
|
||||
--section-margin: 2rem;
|
||||
--section-padding: 1rem;
|
||||
--card-padding: 25px;
|
||||
--grid-gap: 30px;
|
||||
@@ -393,19 +392,7 @@ section h2 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tech-section-spacer {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tech-marquee-divider {
|
||||
height: 3px;
|
||||
width: 60%;
|
||||
max-width: 800px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.5), transparent);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#technologies .section-heading::before {
|
||||
content: "";
|
||||
@@ -453,7 +440,7 @@ section h2 {
|
||||
.agentic-ai-header h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.agentic-ai-header p {
|
||||
@@ -606,7 +593,6 @@ section h2 {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
padding: 0.3rem 1rem; /* Adjusted padding */
|
||||
border: 2px solid rgba(90, 107, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
|
||||
@@ -617,7 +603,6 @@ section h2 {
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
border-color: rgba(140, 154, 255, 0.6);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2);
|
||||
}
|
||||
@@ -682,6 +667,41 @@ section h2 {
|
||||
left: 7.5%;
|
||||
}
|
||||
|
||||
/* Hamburger Menu Styles */
|
||||
.hamburger-menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(1) {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
#automation-flows-hero {
|
||||
padding-top: 12rem;
|
||||
@@ -819,7 +839,9 @@ section h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 8rem;
|
||||
padding-top: 4rem !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
@@ -833,8 +855,8 @@ section h2 {
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 4%;
|
||||
align-items: flex-start;
|
||||
padding: 10rem 4% 0 4%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -967,13 +989,19 @@ section h2 {
|
||||
|
||||
.section-heading {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: var(--gap) 0;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0.7px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -1018,52 +1046,30 @@ h6 {
|
||||
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* Technology Marquee Styling */
|
||||
.tech-marquee-container {
|
||||
/* Modern Technology Cards Animation */
|
||||
.tech-cards-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin: 0 0 25px;
|
||||
padding: 30px 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: transform 0.5s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.tech-marquee-reversed {
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.tech-marquee {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 20px 0;
|
||||
max-width: none;
|
||||
padding: 60px 0;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2));
|
||||
border-radius: 20px;
|
||||
margin: 40px 0;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tech-marquee-content {
|
||||
.tech-cards-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: scrollTech 60s linear infinite;
|
||||
animation: techCardsFlow 150s linear infinite;
|
||||
will-change: transform;
|
||||
gap: 70px; /* Further increased gap between cards */
|
||||
}
|
||||
|
||||
.tech-marquee-content-reversed {
|
||||
animation: scrollTechReversed 60s linear infinite;
|
||||
}
|
||||
|
||||
.tech-marquee-content:hover {
|
||||
.tech-cards-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes scrollTech {
|
||||
@keyframes techCardsFlow {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -1072,47 +1078,136 @@ h6 {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollTechReversed {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add an expanding effect on hover to enhance full-width experience */
|
||||
.tech-marquee-container:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 15px 40px rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.tech-marquee-item {
|
||||
.tech-card {
|
||||
flex: 0 0 auto;
|
||||
width: 240px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform-style: preserve-3d;
|
||||
margin: 15px 0; /* Increased top/bottom margin */
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.tech-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(20, 25, 45, 0.7); /* Darker, more distinct background */
|
||||
border: 2px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 25px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 35px;
|
||||
transition: transform 0.3s ease;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20px);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tech-marquee-item:hover {
|
||||
.tech-card-inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 30%,
|
||||
rgba(var(--primary-color-rgb), 0.1) 50%,
|
||||
transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-card:hover .tech-card-inner::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
transform: translateY(-10px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tech-icon-container {
|
||||
.tech-card:hover .tech-card-inner {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(var(--primary-color-rgb), 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(var(--primary-color-rgb), 0.1) 100%);
|
||||
border-color: rgba(var(--primary-color-rgb), 0.5);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(var(--primary-color-rgb), 0.3),
|
||||
0 0 30px rgba(var(--primary-color-rgb), 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.tech-icon-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Removed decorative overlay - displaying raw icons */
|
||||
.tech-icon-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-icon-container:hover {
|
||||
transform: scale(1.1);
|
||||
.tech-card:hover .tech-icon-wrapper::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tech-card:hover .tech-icon-wrapper {
|
||||
transform: scale(1.1) rotateY(15deg);
|
||||
}
|
||||
|
||||
.tech-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--fg);
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tech-card:hover h3 {
|
||||
color: rgba(var(--primary-color-rgb), 1);
|
||||
text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tech-card p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tech-card:hover p {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tech-icon:hover {
|
||||
@@ -1209,15 +1304,7 @@ h6 {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
}
|
||||
|
||||
.tech-marquee-item p {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
|
||||
/* Icons for each technology - Using direct image URLs from official sources */
|
||||
.tech-icon.ollama {
|
||||
@@ -1435,62 +1522,106 @@ h6 {
|
||||
|
||||
/* Removed pulse hover effect - displaying raw icons */
|
||||
|
||||
.tech-marquee-item {
|
||||
animation: float 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.tech-marquee-item:nth-child(odd) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.tech-marquee-item:nth-child(even) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.tech-marquee-item:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Removed glow effects - displaying raw icons */
|
||||
|
||||
/* Custom loading animation for the technology marquee */
|
||||
@keyframes techLoading {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tech-marquee-container {
|
||||
animation: techLoading 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Add a subtle particle effect in the background */
|
||||
.tech-marquee-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 8%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Removed highlight glow effects - displaying raw icons */
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.tech-marquee-item {
|
||||
margin: 0 15px;
|
||||
/* Hamburger menu display */
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
}
|
||||
/* Hide nav links on mobile by default */
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(10, 10, 25, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
z-index: 1000;
|
||||
transition: left 0.3s ease;
|
||||
padding-top: 80px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Mobile menu backdrop */
|
||||
.nav-links::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 10, 25, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Show nav links when active */
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Style nav links for mobile */
|
||||
.nav-links li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* Dropdown menu adjustments for mobile */
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
margin-top: 1rem;
|
||||
background: rgba(20, 20, 40, 0.8);
|
||||
border-radius: 8px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
padding: 1.2rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-menu a:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Improve dropdown icons and text layout on mobile */
|
||||
.dropdown-item-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* Tech marquee adjustments */
|
||||
|
||||
.tech-icon {
|
||||
min-width: 35px;
|
||||
@@ -1498,17 +1629,9 @@ h6 {
|
||||
max-width: 65px;
|
||||
max-height: 65px;
|
||||
}
|
||||
|
||||
.tech-marquee-item p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tech-marquee-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
@@ -1714,7 +1837,6 @@ h6 {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border */
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
/* End of Footer Styles */
|
||||
|
||||
@@ -1767,7 +1889,7 @@ h6 {
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.contact-form-container,
|
||||
@@ -1782,16 +1904,15 @@ h6 {
|
||||
}
|
||||
|
||||
.contact-form-container {
|
||||
flex: 2;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.contact-info-container {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
padding: 2rem;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
@@ -1927,11 +2048,7 @@ h6 {
|
||||
.case-studies-hero h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
-webkit-background-clip: unset;
|
||||
background-clip: unset;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
|
||||
@@ -2206,6 +2323,7 @@ h6 {
|
||||
.generative-ai-header h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.generative-ai-header p {
|
||||
@@ -2325,7 +2443,7 @@ h6 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -2527,12 +2645,6 @@ h6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
|
||||
.dropdown-filter .dropdown-toggle-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -2637,9 +2749,8 @@ h6 {
|
||||
height: 55px;
|
||||
max-width: 170px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.logo {
|
||||
min-height: 50px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
}}
|
||||
}
|
||||
Reference in New Issue
Block a user