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;
|
||||
}
|
||||
106
css/benefits-cards.css
Normal file
106
css/benefits-cards.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/* Benefits Cards Styling */
|
||||
.benefits-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 25px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background: rgba(30, 40, 60, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.benefit-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.benefit-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, transparent, var(--primary-color));
|
||||
}
|
||||
|
||||
.benefit-card h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.benefit-card p {
|
||||
color: var(--text-light);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.benefit-card-icon {
|
||||
margin-bottom: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(var(--primary-color-rgb), 0.15);
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.benefit-card-icon i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.benefits-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for cards */
|
||||
.benefit-card {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.benefit-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.benefit-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.benefit-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.benefit-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
.benefit-card:nth-child(5) { animation-delay: 0.5s; }
|
||||
.benefit-card:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
1139
css/hero-animation.css
Normal file
1139
css/hero-animation.css
Normal file
File diff suppressed because it is too large
Load Diff
929
css/style.css
929
css/style.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user