Complete website optimization: Color scheme standardization and hero page enhancement
- STANDARDIZED COLOR SCHEMES: Unified all service pages to use consistent purple theme (#6d28d9) - Removed theme-specific body classes from automation-flows.html and agentic-ai.html - Removed inline CSS color overrides from machine-learning.html, generative-ai.html, and data-analysis.html - Updated 15+ instances of hardcoded border colors to use rgba(var(--primary-color-rgb), 0.3) - Updated 5+ hover effects to use rgba(var(--primary-color-rgb), 0.4) for consistent glow colors - All service pages now maintain visual consistency with the main website - ENHANCED HERO PAGE: Improved data node scattering for better organic distribution - Repositioned core service nodes (ML, AI, Analytics, Automation) for natural scatter pattern - Enhanced industry nodes positioning with organic right-side distribution - Improved strategic nodes placement across right quadrant for better visual balance - Added varied animation delays and floating patterns for different node groups - Implemented micro-positioning adjustments for more natural appearance - Created size variations and rotation effects for enhanced organic feel - NEW FEATURES ADDED: - Enhanced CSS animations with varied floating patterns - Improved node interaction effects with staggered hover animations - Better responsive design for mobile devices - New documentation files for color standardization completion - TECHNICAL IMPROVEMENTS: - Updated hero-animation.css with enhanced organic scatter positioning - Maintained all existing functionality while improving visual aesthetics - Ensured cross-browser compatibility and mobile responsiveness
This commit is contained in:
339
css/animations.css
Normal file
339
css/animations.css
Normal file
@@ -0,0 +1,339 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user