ectasy663
67c46fedb4
- Reorganized CSS into modular architecture (core.css, pages.css, responsive.css, components.css) - Implemented comprehensive design system with CSS custom properties for theming - Added responsive navigation with hamburger menu and dropdown systems - Created modern card-based component system for courses, expertise, and services - Enhanced all HTML pages with updated styling and improved user experience - Added extensive animation system with smooth transitions and hover effects - Implemented mobile-first responsive design with comprehensive breakpoints - Established industry-specific color theming system - Moved old CSS files to backup folder for reference - Updated all service, education, and industry pages with consistent styling
324 lines
8.5 KiB
CSS
324 lines
8.5 KiB
CSS
/* ===== BASE VARIABLES AND IMPORTS ===== */
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');
|
|
|
|
/* ===== CSS CUSTOM PROPERTIES ===== */
|
|
:root {
|
|
/* Typography */
|
|
--font-body: 'Space Grotesk', sans-serif;
|
|
--font-headings: 'VT323', monospace;
|
|
--font-mono: 'VT323', monospace;
|
|
|
|
/* Base colors */
|
|
--fg: #ececec;
|
|
--btn-bg: rgba(20, 20, 40, 0.8);
|
|
--btn-hover: rgba(20, 20, 40, 1);
|
|
--gap: 2rem;
|
|
--max-w: 1200px;
|
|
|
|
/* Standardized card and text styles */
|
|
--card-bg: rgba(25, 35, 55, 0.7);
|
|
--text-light: #e0e0e0;
|
|
--text-muted: #b0b0b0;
|
|
|
|
/* Default primary color scheme (purple) */
|
|
--primary-color: #6d28d9;
|
|
--primary-color-rgb: 109, 40, 217;
|
|
--primary-color-hover: #5b21b6;
|
|
--primary-color-glow: rgba(109, 40, 217, 0.5);
|
|
--accent: #a2abff;
|
|
--accent-rgb: 162, 171, 255;
|
|
|
|
/* Industry-specific color schemes */
|
|
/* Finance - Professional Blue */
|
|
--finance-primary: #007bff;
|
|
--finance-primary-rgb: 0, 123, 255;
|
|
--finance-primary-hover: #0056b3;
|
|
|
|
/* Healthcare - Medical Blue */
|
|
--healthcare-primary: #00c6ff;
|
|
--healthcare-primary-rgb: 0, 198, 255;
|
|
--healthcare-primary-hover: #0099cc;
|
|
|
|
/* Retail - Commercial Red */
|
|
--retail-primary: #e74c3c;
|
|
--retail-primary-rgb: 231, 76, 60;
|
|
--retail-primary-hover: #c0392b;
|
|
|
|
/* Manufacturing - Industrial Blue */
|
|
--manufacturing-primary: #3498db;
|
|
--manufacturing-primary-rgb: 52, 152, 219;
|
|
--manufacturing-primary-hover: #2980b9;
|
|
|
|
/* Marketing - Creative Pink */
|
|
--marketing-primary: #ec4899;
|
|
--marketing-primary-rgb: 236, 72, 153;
|
|
--marketing-primary-hover: #db2777;
|
|
|
|
/* Travel - Sky Blue */
|
|
--travel-primary: #0ea5e9;
|
|
--travel-primary-rgb: 14, 165, 233;
|
|
--travel-primary-hover: #0284c7;
|
|
|
|
/* Media & Entertainment - Purple */
|
|
--media-primary: #9333ea;
|
|
--media-primary-rgb: 147, 51, 234;
|
|
--media-primary-hover: #7e22ce;
|
|
|
|
/* Services color schemes */
|
|
/* Machine Learning - Deep Blue */
|
|
--machine-learning-primary: #2563eb;
|
|
--machine-learning-primary-rgb: 37, 99, 235;
|
|
--machine-learning-primary-hover: #1d4ed8;
|
|
|
|
/* Generative AI - Emerald Green */
|
|
--generative-ai-primary: #10b981;
|
|
--generative-ai-primary-rgb: 16, 185, 129;
|
|
--generative-ai-primary-hover: #059669;
|
|
|
|
/* Data Analysis - Amber */
|
|
--data-analysis-primary: #f59e0b;
|
|
--data-analysis-primary-rgb: 245, 158, 11;
|
|
--data-analysis-primary-hover: #d97706;
|
|
|
|
/* Automation - Purple */
|
|
--automation-primary: #8b5cf6;
|
|
--automation-primary-rgb: 139, 92, 246;
|
|
--automation-primary-hover: #7c3aed;
|
|
|
|
/* Agentic AI - Pink */
|
|
--agentic-ai-primary: #ec4899;
|
|
--agentic-ai-primary-rgb: 236, 72, 153;
|
|
--agentic-ai-primary-hover: #db2777;
|
|
|
|
/* Spacing variables */
|
|
--section-margin: 2rem;
|
|
--section-padding: 1.5rem;
|
|
--card-padding: 25px;
|
|
--grid-gap: 30px;
|
|
}
|
|
|
|
/* ===== COLOR THEME UTILITY CLASSES ===== */
|
|
.theme-finance {
|
|
--primary-color: var(--finance-primary);
|
|
--primary-color-rgb: var(--finance-primary-rgb);
|
|
--primary-color-hover: var(--finance-primary-hover);
|
|
--primary-color-glow: rgba(var(--finance-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-healthcare {
|
|
--primary-color: var(--healthcare-primary);
|
|
--primary-color-rgb: var(--healthcare-primary-rgb);
|
|
--primary-color-hover: var(--healthcare-primary-hover);
|
|
--primary-color-glow: rgba(var(--healthcare-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-retail {
|
|
--primary-color: var(--retail-primary);
|
|
--primary-color-rgb: var(--retail-primary-rgb);
|
|
--primary-color-hover: var(--retail-primary-hover);
|
|
--primary-color-glow: rgba(var(--retail-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-manufacturing {
|
|
--primary-color: var(--manufacturing-primary);
|
|
--primary-color-rgb: var(--manufacturing-primary-rgb);
|
|
--primary-color-hover: var(--manufacturing-primary-hover);
|
|
--primary-color-glow: rgba(var(--manufacturing-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-marketing {
|
|
--primary-color: var(--marketing-primary);
|
|
--primary-color-rgb: var(--marketing-primary-rgb);
|
|
--primary-color-hover: var(--marketing-primary-hover);
|
|
--primary-color-glow: rgba(var(--marketing-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-travel {
|
|
--primary-color: var(--travel-primary);
|
|
--primary-color-rgb: var(--travel-primary-rgb);
|
|
--primary-color-hover: var(--travel-primary-hover);
|
|
--primary-color-glow: rgba(var(--travel-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-media {
|
|
--primary-color: var(--media-primary);
|
|
--primary-color-rgb: var(--media-primary-rgb);
|
|
--primary-color-hover: var(--media-primary-hover);
|
|
--primary-color-glow: rgba(var(--media-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-machine-learning {
|
|
--primary-color: var(--machine-learning-primary);
|
|
--primary-color-rgb: var(--machine-learning-primary-rgb);
|
|
--primary-color-hover: var(--machine-learning-primary-hover);
|
|
--primary-color-glow: rgba(var(--machine-learning-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-generative-ai {
|
|
--primary-color: var(--generative-ai-primary);
|
|
--primary-color-rgb: var(--generative-ai-primary-rgb);
|
|
--primary-color-hover: var(--generative-ai-primary-hover);
|
|
--primary-color-glow: rgba(var(--generative-ai-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-data-analysis {
|
|
--primary-color: var(--data-analysis-primary);
|
|
--primary-color-rgb: var(--data-analysis-primary-rgb);
|
|
--primary-color-hover: var(--data-analysis-primary-hover);
|
|
--primary-color-glow: rgba(var(--data-analysis-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-automation {
|
|
--primary-color: var(--automation-primary);
|
|
--primary-color-rgb: var(--automation-primary-rgb);
|
|
--primary-color-hover: var(--automation-primary-hover);
|
|
--primary-color-glow: rgba(var(--automation-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-agentic-ai {
|
|
--primary-color: var(--agentic-ai-primary);
|
|
--primary-color-rgb: var(--agentic-ai-primary-rgb);
|
|
--primary-color-hover: var(--agentic-ai-primary-hover);
|
|
--primary-color-glow: rgba(var(--agentic-ai-primary-rgb), 0.5);
|
|
}
|
|
|
|
/* ===== BASE RESET AND TYPOGRAPHY ===== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
scroll-behavior: smooth;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
body {
|
|
background: url('../assets/3293677.png') no-repeat center center fixed;
|
|
background-size: cover;
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 1.3rem;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
/* ===== TYPOGRAPHY ===== */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-headings);
|
|
color: #52eef5;
|
|
letter-spacing: 0.7px;
|
|
font-size: 4.5rem;
|
|
font-weight: 100;
|
|
}
|
|
|
|
/* Card heading size exceptions */
|
|
.benefit-card h3,
|
|
.webinar-video-card .video-info h3,
|
|
.article-card h3,
|
|
.related-content-item h3 {
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Card heading styles are now handled in webinar-video.css */
|
|
|
|
/* ===== FOUC PREVENTION ===== */
|
|
.font-loading {
|
|
font-family: var(--font-mono), Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
/* Page loading transitions */
|
|
html.no-js {
|
|
visibility: hidden;
|
|
}
|
|
|
|
body.loading {
|
|
opacity: 1;
|
|
}
|
|
|
|
body.page-ready {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.fouc-prevention {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.fouc-prevention .site-header,
|
|
.fouc-prevention #hero {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
html:not(.fouc-prevention) {
|
|
transition: opacity 0.3s ease-in;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ===== PRELOADER STYLES ===== */
|
|
#preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #0a0a1a;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.5s ease, visibility 0.5s ease;
|
|
}
|
|
|
|
body.page-ready #preloader {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loader-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.loader-spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid rgba(139, 92, 246, 0.2);
|
|
border-radius: 50%;
|
|
border-top-color: var(--primary-color);
|
|
margin: 0 auto 15px;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-text {
|
|
color: var(--primary-color);
|
|
font-size: 1.2rem;
|
|
letter-spacing: 2px;
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
} |