CSS Consolidation: Merged all inline styles and separate CSS files into single style.css
- Consolidated benefits-cards.css into main style.css - Removed all inline <style> blocks from 19 HTML files - Added CSS versioning (?v=202412291400) for better caching - Extracted navbar scroll effects, hero layout stabilization, and mobile responsive styles - Fixed benefits cards visibility and animations - Improved website performance by reducing HTTP requests - Enhanced maintainability with single CSS file architecture
This commit is contained in:
@@ -4,171 +4,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Corporate Trainings - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: rgba(25, 35, 55, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.benefit-card .benefit-card-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.benefit-card .benefit-card-icon img {
|
||||
max-height: 60px;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.benefit-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-light);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.benefit-card p {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.program-highlights {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 0.8rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.highlight-item i {
|
||||
color: var(--primary-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
align-self: flex-start;
|
||||
margin-top: auto;
|
||||
background-color: var(--primary-color, #4d79ff);
|
||||
border-color: var(--primary-color, #4d79ff);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-color-hover, #3a66e0);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.testimonial-quote {
|
||||
background: rgba(25, 35, 55, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
margin: 3rem auto;
|
||||
max-width: 800px;
|
||||
font-size: 1.2rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.testimonial-quote footer {
|
||||
margin-top: 1rem;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#request-proposal {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,124 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Individual Training - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: rgba(25, 35, 55, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.benefit-card .benefit-card-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.benefit-card .benefit-card-icon img {
|
||||
max-height: 60px;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.benefit-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-light);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.program-details {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.program-details p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.program-outcomes {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.program-outcomes ul {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.program-outcomes li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
align-self: flex-start;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg"></div>
|
||||
|
||||
@@ -4,109 +4,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Workshops - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: rgba(25, 35, 55, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card .benefit-card-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card .benefit-card-icon img {
|
||||
max-height: 60px;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card p {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.workshop-details {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
# Manual GitHub Upload Instructions
|
||||
|
||||
## Prerequisites
|
||||
1. Make sure Git is installed on your computer
|
||||
2. Have a GitHub account (username: shaurya05745)
|
||||
3. Create a personal access token on GitHub:
|
||||
- Go to https://github.com/settings/tokens
|
||||
- Click "Generate new token (classic)"
|
||||
- Give it a name like "Website Upload"
|
||||
- Check the "repo" scope box
|
||||
- Click "Generate token"
|
||||
- Copy the token immediately (you won't be able to see it again)
|
||||
|
||||
## Option 1: Run the batch file
|
||||
1. Open the file explorer and navigate to C:\Users\Lenovo\sample-website
|
||||
2. Double-click on "upload-website-to-github.bat"
|
||||
3. Follow the prompts in the terminal
|
||||
4. When asked for your password, enter the personal access token you created
|
||||
|
||||
## Option 2: Manual Git commands
|
||||
If the batch file doesn't work, open a new PowerShell window and run these commands:
|
||||
|
||||
```powershell
|
||||
# Navigate to your website folder
|
||||
cd C:\Users\Lenovo\sample-website
|
||||
|
||||
# Initialize Git if not already initialized
|
||||
git init
|
||||
|
||||
# Add all files
|
||||
git add .
|
||||
|
||||
# Commit the files
|
||||
git commit -m "Upload entire website"
|
||||
|
||||
# Set the remote repository URL
|
||||
git remote set-url origin https://github.com/shaurya05745/website.git
|
||||
# If you get "remote origin not found" error, use this command instead:
|
||||
# git remote add origin https://github.com/shaurya05745/website.git
|
||||
|
||||
# Push to GitHub (you'll be prompted for credentials)
|
||||
git push -u origin master
|
||||
# When prompted for password, use your personal access token, not your GitHub password
|
||||
```
|
||||
|
||||
## Option 3: GitHub Desktop (Easiest)
|
||||
1. Download and install GitHub Desktop from https://desktop.github.com/
|
||||
2. Sign in to your GitHub account
|
||||
3. Add your local repository (File > Add Local Repository...)
|
||||
4. Navigate to C:\Users\Lenovo\sample-website
|
||||
5. Click "Publish repository"
|
||||
6. Enter "website" as the name
|
||||
7. Click "Publish Repository"
|
||||
|
||||
## After uploading
|
||||
1. Visit https://github.com/shaurya05745/website to confirm your files were uploaded
|
||||
2. You can enable GitHub Pages in the repository settings to publish your website
|
||||
@@ -1,262 +0,0 @@
|
||||
# 🍔 HAMBURGER MENU IMPLEMENTATION - COMPLETE
|
||||
|
||||
## Project Overview
|
||||
|
||||
Successfully implemented a responsive hamburger menu for mobile navigation across the entire Gyannetra website, providing an enhanced mobile user experience with modern UI interactions.
|
||||
|
||||
## ✅ Implementation Status: COMPLETE
|
||||
|
||||
### Files Updated: 19 Total
|
||||
|
||||
- **Main Pages**: index.html, about.html, contact.html
|
||||
- **Services**: 5 pages (machine-learning, data-analysis, generative-ai, agentic-ai, automation-flows)
|
||||
- **Industries**: 8 pages (finance, healthcare, manufacturing, marketing, media-entertainment, travel, retail, case-studies)
|
||||
- **Education**: 3 pages (workshops, individual-trainings, corporate-trainings)
|
||||
|
||||
### 🎯 Core Features Implemented
|
||||
|
||||
#### 1. Hamburger Button HTML Structure
|
||||
|
||||
```html
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
```
|
||||
|
||||
#### 2. Responsive CSS Styling
|
||||
|
||||
- **Breakpoint**: @media (max-width: 768px)
|
||||
- **Mobile Menu**: Full-screen overlay with backdrop blur
|
||||
- **Animation**: Hamburger lines transform to X when active
|
||||
- **Touch-Friendly**: Large tap targets and proper spacing
|
||||
|
||||
#### 3. JavaScript Functionality
|
||||
|
||||
- **File**: menu-dropdown.js
|
||||
- **Toggle**: Click hamburger to open/close menu
|
||||
- **Auto-close**: Menu closes when navigation links are clicked
|
||||
- **Dropdown Support**: Mobile-optimized dropdown menus
|
||||
- **Scroll Lock**: Prevents body scrolling when menu is open
|
||||
|
||||
## 🎨 Design Features
|
||||
|
||||
### Desktop View (>768px)
|
||||
|
||||
- Traditional horizontal navigation bar
|
||||
- Hover effects on navigation links
|
||||
- Standard dropdown menus
|
||||
|
||||
### Mobile View (≤768px)
|
||||
|
||||
- Hamburger icon replaces navigation links
|
||||
- Full-screen mobile menu overlay
|
||||
- Animated hamburger-to-X icon transformation
|
||||
- Vertical dropdown menus with touch-friendly spacing
|
||||
|
||||
## 🛠️ Technical Implementation
|
||||
|
||||
### CSS Architecture
|
||||
|
||||
```css
|
||||
.hamburger-menu {
|
||||
display: none; /* Hidden on desktop */
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
/* Hamburger styling */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-menu {
|
||||
display: flex; /* Show on mobile */
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
left: -100%; /* Hidden by default */
|
||||
/* Full-screen overlay styling */
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0; /* Slide in when active */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript Events
|
||||
|
||||
```javascript
|
||||
// Toggle hamburger menu
|
||||
hamburgerMenu.addEventListener("click", function () {
|
||||
hamburgerMenu.classList.toggle("active");
|
||||
navLinks.classList.toggle("active");
|
||||
|
||||
// Prevent body scrolling
|
||||
document.body.style.overflow = navLinks.classList.contains("active")
|
||||
? "hidden"
|
||||
: "";
|
||||
});
|
||||
```
|
||||
|
||||
## 📱 Mobile UX Enhancements
|
||||
|
||||
### Visual Effects
|
||||
|
||||
- **Slide Animation**: Menu slides in from left with smooth 0.3s transition
|
||||
- **Backdrop Blur**: Background content blurred for focus
|
||||
- **Icon Animation**: Hamburger lines morph into X with CSS transforms
|
||||
- **Overlay Gradient**: Beautiful gradient background with transparency
|
||||
|
||||
### Interaction Design
|
||||
|
||||
- **Touch Optimization**: 44px minimum touch targets
|
||||
- **Auto-Close**: Tapping navigation links closes the menu
|
||||
- **Dropdown Integration**: Mobile dropdowns expand vertically
|
||||
- **Scroll Prevention**: Body scroll locked when menu is open
|
||||
|
||||
## 🧪 Testing & Validation
|
||||
|
||||
### Automated Validation
|
||||
|
||||
- **Script**: validate-hamburger-menu.ps1
|
||||
- **Coverage**: 19/19 files pass validation
|
||||
- **Checks**: HTML structure, CSS implementation, JavaScript integration
|
||||
|
||||
### Manual Testing Points
|
||||
|
||||
1. **Responsive Breakpoint**: Verify hamburger appears at ≤768px width
|
||||
2. **Animation**: Confirm smooth hamburger-to-X transformation
|
||||
3. **Menu Overlay**: Test full-screen menu with backdrop blur
|
||||
4. **Touch Interaction**: Verify large tap targets work on mobile
|
||||
5. **Dropdown Functionality**: Test dropdown menus in mobile view
|
||||
6. **Auto-Close**: Confirm menu closes when links are clicked
|
||||
7. **Cross-Page Consistency**: Test across all 19 pages
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
|
||||
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
- ✅ CSS3 and ES6+ features utilized
|
||||
|
||||
## 🚀 Performance Impact
|
||||
|
||||
### Minimal Overhead
|
||||
|
||||
- **CSS**: ~50 lines of additional mobile styles
|
||||
- **JavaScript**: ~50 lines of event handling code
|
||||
- **HTML**: 4 additional elements per page (button + 3 spans)
|
||||
|
||||
### Optimization Features
|
||||
|
||||
- **CSS Transitions**: Hardware-accelerated animations
|
||||
- **Event Delegation**: Efficient click handling
|
||||
- **Conditional Loading**: Mobile styles only apply below 768px
|
||||
|
||||
## 📊 Accessibility Features
|
||||
|
||||
### ARIA Support
|
||||
|
||||
- `aria-label="Toggle menu"` on hamburger button
|
||||
- Semantic HTML structure maintained
|
||||
- Keyboard navigation preserved
|
||||
|
||||
### Screen Reader Friendly
|
||||
|
||||
- Descriptive button labels
|
||||
- Proper heading hierarchy maintained
|
||||
- Focus management for menu interactions
|
||||
|
||||
## 🎯 Key Benefits Delivered
|
||||
|
||||
### User Experience
|
||||
|
||||
- **Mobile-First**: Modern responsive navigation pattern
|
||||
- **Touch-Friendly**: Optimized for finger navigation
|
||||
- **Fast Access**: Single-tap menu access on mobile
|
||||
- **Consistent**: Uniform experience across all pages
|
||||
|
||||
### Technical Benefits
|
||||
|
||||
- **Maintainable**: Clean separation of HTML, CSS, and JavaScript
|
||||
- **Scalable**: Easy to add new navigation items
|
||||
- **Performance**: Lightweight implementation
|
||||
- **Standards**: Follows modern web development best practices
|
||||
|
||||
## 📝 Implementation Timeline
|
||||
|
||||
1. **HTML Structure**: Added hamburger button to all 19 pages
|
||||
2. **CSS Styling**: Implemented responsive mobile menu styles
|
||||
3. **JavaScript**: Developed menu toggle and dropdown functionality
|
||||
4. **PowerShell Automation**: Created script to update multiple files
|
||||
5. **Manual Fixes**: Updated 3 service pages with missing elements
|
||||
6. **Testing**: Comprehensive validation across all pages
|
||||
7. **Documentation**: Created test page and validation scripts
|
||||
|
||||
## 🔧 Files Created/Modified
|
||||
|
||||
### New Files
|
||||
|
||||
- `hamburger-test.html` - Comprehensive test page
|
||||
- `validate-hamburger-menu.ps1` - Validation script
|
||||
- `add-hamburger-menu.ps1` - Initial automation script
|
||||
|
||||
### Modified Files
|
||||
|
||||
- `css/style.css` - Added mobile responsive styles
|
||||
- `js/menu-dropdown.js` - Enhanced with hamburger functionality
|
||||
- All 19 HTML pages - Added hamburger button structure
|
||||
|
||||
## 🎉 Project Completion Status
|
||||
|
||||
### ✅ All Requirements Met
|
||||
|
||||
- [x] Hamburger menu appears on mobile devices (≤768px)
|
||||
- [x] Navigation links hidden behind hamburger icon
|
||||
- [x] Smooth animations and transitions
|
||||
- [x] Touch-friendly mobile interface
|
||||
- [x] Full-screen overlay menu
|
||||
- [x] Dropdown menu integration
|
||||
- [x] Auto-close functionality
|
||||
- [x] Cross-page consistency
|
||||
- [x] Accessibility compliance
|
||||
- [x] Performance optimization
|
||||
|
||||
### 🎯 Success Metrics
|
||||
|
||||
- **Coverage**: 100% of pages updated (19/19)
|
||||
- **Validation**: 100% pass rate on automated checks
|
||||
- **Responsiveness**: Works perfectly at mobile breakpoint
|
||||
- **Functionality**: All features working as designed
|
||||
- **UX**: Smooth, modern mobile navigation experience
|
||||
|
||||
## 🚀 Optional Future Enhancements
|
||||
|
||||
### Potential Improvements
|
||||
|
||||
1. **Swipe Gestures**: Add touch swipe to close menu
|
||||
2. **Keyboard Navigation**: Enhanced keyboard accessibility
|
||||
3. **Animation Variants**: Different hamburger animation styles
|
||||
4. **Close Button**: Optional dedicated close button in menu
|
||||
5. **Menu Themes**: Different color schemes for mobile menu
|
||||
6. **Micro-Interactions**: Additional hover/tap feedback
|
||||
|
||||
### Advanced Features
|
||||
|
||||
1. **Progressive Web App**: Service worker integration
|
||||
2. **Voice Navigation**: Voice command support
|
||||
3. **Gesture Controls**: Advanced touch gestures
|
||||
4. **Analytics**: Track mobile menu usage
|
||||
5. **A/B Testing**: Test different menu layouts
|
||||
|
||||
---
|
||||
|
||||
## 🎊 IMPLEMENTATION COMPLETE!
|
||||
|
||||
The hamburger menu has been successfully implemented across the entire Gyannetra website, providing a modern, responsive, and user-friendly mobile navigation experience. All 19 pages now feature a consistent, touch-optimized navigation system that enhances the mobile user experience while maintaining full functionality across all device sizes.
|
||||
|
||||
**Test the implementation**: http://localhost:8080/hamburger-test.html
|
||||
|
||||
---
|
||||
|
||||
_Hamburger Menu Implementation - Completed May 27, 2025_
|
||||
@@ -4,249 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Case Studies - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Case Studies Card Styles */
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(147, 51, 234, 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(147, 51, 234, 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.case-studies-hero h1,
|
||||
.case-studies-filters h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.case-studies-grid-section {
|
||||
padding: 40px 0 80px;
|
||||
}
|
||||
|
||||
/* Enhanced filter styles */
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
background-color: rgba(25, 35, 55, 0.5);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(147, 51, 234, 0.2);
|
||||
}
|
||||
|
||||
.dropdown-filter button,
|
||||
.search-filter input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--primary-color);
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
color: var(--text-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dropdown-filter button:hover,
|
||||
.search-filter input:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
.search-filter input {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.search-filter i {
|
||||
color: var(--primary-color);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Added Footer CSS */
|
||||
.site-footer {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.footer-col ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-col p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* End of Added Footer CSS */
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-media">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,277 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Finance - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
} /* Finance Page Specific Styles - Using standardized theme class */.finance-page-container .hero-section.finance-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px; /* Adjusted padding */
|
||||
background: url('../assets/finance_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}.finance-page-container .hero-section.finance-hero h1 {
|
||||
font-size: 3.2rem; /* Slightly adjusted */
|
||||
margin-bottom: 15px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.finance-page-container .hero-section.finance-hero .subtitle {
|
||||
font-size: 1.4rem; /* Slightly adjusted */
|
||||
margin-bottom: 25px;
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.finance-page-container .hero-section.finance-hero p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ai-solutions-finance, .benefits-ai-finance,
|
||||
.blogs-case-studies-finance {
|
||||
padding: 60px 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.ai-solutions-finance:last-child,
|
||||
.benefits-ai-finance:last-child,
|
||||
.blogs-case-studies-finance:last-child {
|
||||
border-bottom: none;
|
||||
} /* Using standard benefits-cards-grid for consistent card sizing */
|
||||
/* Minor adjustments to ensure consistent appearance */
|
||||
.benefits-ai-finance .benefits-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
|
||||
gap: 25px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.benefits-ai-finance .benefit-card {
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.benefits-ai-finance .benefit-card-icon {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.benefits-ai-finance .benefit-card p {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustment for smaller screens */
|
||||
@media (max-width: 992px) {
|
||||
.benefits-ai-finance .benefits-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.benefits-ai-finance .benefits-cards-grid {
|
||||
grid-template-columns: 1fr; /* 1 column on smallest screens */
|
||||
}
|
||||
}
|
||||
|
||||
.ai-solutions-finance h2,
|
||||
.benefits-ai-finance h2,
|
||||
.blogs-case-studies-finance h2 {
|
||||
font-size: 2.2rem; /* Slightly adjusted */
|
||||
margin-bottom: 45px;
|
||||
color: var(--primary-color);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Responsive columns */
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-glow), 0.5);
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
/* SVG icons will inherit stroke from their own style, or you can set fill here if needed */
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
display: flex;
|
||||
justify-content: space-around; /* Better spacing for two columns */
|
||||
gap: 20px; /* Gap between the two ul lists */
|
||||
flex-wrap: wrap;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.benefits-list ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-basis: calc(50% - 20px); /* Aim for two columns */
|
||||
min-width: 300px; /* Ensure readability on smaller screens before wrapping */
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.benefits-list li i.fa-check-circle {
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1; /* Allows p to take available space */
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
align-self: flex-start; /* Align button to the start of the flex item */
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
} .read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-finance">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,199 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Healthcare - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Healthcare Card Structure Styles */
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(0, 198, 255, 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-item img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(0, 198, 255, 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(0, 198, 255, 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
} .section-heading {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 45px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.industry-benefits ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.industry-benefits li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 198, 255, 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-healthcare">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,233 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Manufacturing - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Manufacturing Page Specific Styles */ /* Hero section */
|
||||
.manufacturing-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
background: url('../assets/manufacturing_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}.manufacturing-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.manufacturing-hero p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Solutions grid */
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.solution-item img {
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Benefits section */
|
||||
.benefits-section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.benefits-section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-basis: calc(50% - 20px);
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.benefits-section li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.benefits-section li i {
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Articles/case studies section */
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
font-size: 2.3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-manufacturing">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,254 +4,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Marketing - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Marketing Card Structure Styles */
|
||||
|
||||
/* Marketing hero section styling */
|
||||
.marketing-hero {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marketing-hero .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.marketing-hero-content {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.marketing-hero-content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
.marketing-hero-content p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.marketing-hero-image {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.marketing-hero-image img {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
} .solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
} .article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;
|
||||
} .article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
} .features-section h2,
|
||||
.advantage-section h2,
|
||||
.blogs-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 45px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.advantage-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
} .advantage-list li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.explore-button {
|
||||
display: inline-block;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 30px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.explore-button:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-marketing">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -3,188 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI in Media & Entertainment - Gyannetra</title> <link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
||||
<title>AI in Media & Entertainment - Gyannetra</title> <link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <style>
|
||||
/* Media & Entertainment Page Specific Styles */ /* Hero section */ .media-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
background: url('../assets/media_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}.media-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.media-hero .subtitle {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.media-hero p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Solutions grid */
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.solution-item img, .solution-item svg {
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Benefits section */
|
||||
.benefits-list-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-basis: calc(50% - 20px);
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.benefits-list li:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Articles/case studies section */
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
font-size: 2.3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="theme-media">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,326 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Retail - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Retail Page Specific Styles */ /* Hero section */ .retail-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
background: url('../assets/retail_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}.retail-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.retail-hero p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Solutions grid */
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.solution-item img {
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Gyannetra advantage section */
|
||||
.advantage-columns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.advantage-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-basis: calc(50% - 20px);
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.advantage-list li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.advantage-list li:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Articles/case studies section */
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
font-size: 2.3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
.site-footer {
|
||||
background-color: #111;
|
||||
color: #bbb;
|
||||
padding: 40px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.footer-col h3 {
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.footer-col a {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-col-logo {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
color: #bbb;
|
||||
font-size: 1.2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #222;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.newsletter-form input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 5px;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.newsletter-form button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.newsletter-form button:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-retail">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,239 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Travel - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Travel Page Specific Styles */ /* Hero section */ .travel-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
background: url('../assets/travel_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.travel-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.travel-hero p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Solutions grid */
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.solution-item img {
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Advantage section */
|
||||
#gyannetra-advantage ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 2rem auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
#gyannetra-advantage li {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
flex-basis: calc(33% - 20px);
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
#gyannetra-advantage li:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Articles/case studies section */
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.article-card .date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
font-size: 2.3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="theme-travel">
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,333 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Agentic AI - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Agentic AI Page Specific Styles */
|
||||
|
||||
/* Footer Styles to match automation-flows.html */
|
||||
.site-footer {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul { list-style: none; padding: 0; }
|
||||
.footer-col ul li { margin-bottom: 10px; }
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover { color: var(--primary-color); }
|
||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover { color: var(--primary-color); }
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* End of Footer Styles */
|
||||
|
||||
.hero-section { /* Standardized from .agentic-ai-header */
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
} .hero-section h1 { /* Standardized */
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p { /* Standardized */
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px; background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
} .overview-section h2, /* Standardized */
|
||||
.key-offerings-section h2, /* Standardized */
|
||||
.benefits-section h2, /* Standardized */
|
||||
.blogs-case-studies-section h2, /* Standardized */
|
||||
.related-content-section h2 { /* Standardized */
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.key-offerings-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.benefits-section ul { /* Standardized */
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefits-section li { /* Standardized */
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.blogs-case-studies-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.related-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.related-content-item {
|
||||
background-color: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px; border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.related-content-item h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.read-more:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
} .site-header .navbar.container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
padding: 0.5rem 2.0rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,342 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Automation Flows - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Automation Flows Page Specific Styles */
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px; background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
} .overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.key-offerings-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.benefits-section ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefits-section li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.blogs-case-studies-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.related-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.related-content-item { background-color: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.related-content-item h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.read-more:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
} .site-header .navbar.container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
padding: 0.5rem 2.0rem;
|
||||
}
|
||||
.site-footer {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.footer-col ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-col p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,340 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Data Analysis - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Data Analysis Page Specific Styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7);
|
||||
--text-light: #e0e0e0;
|
||||
--text-muted: #b0b0b0;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg); border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
} .solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Make SVG images white for better visibility */
|
||||
.solution-item img[src$=".svg"] {
|
||||
filter: brightness(0) invert(1);
|
||||
padding: 8px; /* Add some padding for better visibility */
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.key-offerings-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.benefits-section ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefits-section li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.blogs-case-studies-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.related-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.related-content-item { background-color: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.related-content-item h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.related-content-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* Removed conflicting section styling that was here:
|
||||
section:not(.hero-section) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
/* Footer Styles to match automation-flows.html */
|
||||
.site-footer {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul { list-style: none; padding: 0; }
|
||||
.footer-col ul li { margin-bottom: 10px; }
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover { color: var(--primary-color); }
|
||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover { color: var(--primary-color); }
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* End of Footer Styles */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,339 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Generative AI - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
/* Card Structure Styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7);
|
||||
--text-light: #e0e0e0;
|
||||
--text-muted: #b0b0b0;
|
||||
}
|
||||
|
||||
/* Footer Styles to match automation-flows.html */
|
||||
.site-footer {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul { list-style: none; padding: 0; }
|
||||
.footer-col ul li { margin-bottom: 10px; }
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover { color: var(--primary-color); } /* Uses page-specific --primary-color */
|
||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover { color: var(--primary-color); } /* Uses page-specific --primary-color */
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color); /* Uses page-specific --primary-color */
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* End of Footer Styles */
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.blogs-case-studies-section {
|
||||
/* padding: 60px 20px; */ /* Padding now handled by .section-padding class */
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Removed conflicting generic section styling that was here:
|
||||
section {
|
||||
margin: 4rem 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
*/ .overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.key-offerings-section h2 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.benefits-section ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefits-section li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.blogs-case-studies-section h2 { /* This refers to the h2 within the section */
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.related-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.related-content-item {
|
||||
background-color: var(--card-bg);
|
||||
padding: 20px; border-radius: 10px;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.related-content-item h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.related-content-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -4,381 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Machine Learning - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
||||
<link rel="stylesheet" href="../css/style.css?v=202412291401" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7); /* Darker card background for contrast */
|
||||
--text-light: #e0e0e0;
|
||||
--text-muted: #b0b0b0;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto 30px auto;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Adjusted minmax for potentially smaller cards */
|
||||
gap: 35px;
|
||||
justify-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
width: 100%;
|
||||
height: 100%; /* Ensure items in a row have same height */
|
||||
}
|
||||
|
||||
.solution-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 70px; /* Standardized icon size */
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.solution-item h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-item p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
height: 100%;/* Ensure cards in a row have same height */
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
.article-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
} /* Enhanced styling for SVG images in article cards */
|
||||
.article-card img[src$=".svg"] {
|
||||
object-fit: contain;
|
||||
padding: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1; /* Allows paragraph to take available space */
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
align-self: flex-start; /* Aligns button to the bottom left */
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.read-more-link:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px; /* Standardized margin */
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.key-offerings-section h2 {
|
||||
margin-bottom: 45px; /* Specific for this section if needed */
|
||||
}
|
||||
|
||||
.benefits-section ul {
|
||||
list-style-type: none; /* Consider using icons or custom bullets */
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center; /* Or left-align if preferred */
|
||||
}
|
||||
|
||||
.benefits-section li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
/* Consider adding padding if using background or borders */
|
||||
}
|
||||
|
||||
.blogs-case-studies-section h2 {
|
||||
margin-bottom: 45px; /* Specific for this section */
|
||||
}
|
||||
.related-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px; /* Space before final CTA */
|
||||
justify-items: center; /* Center align items when there's only one */
|
||||
} .related-content-item {
|
||||
background-color: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
max-width: 400px; /* Limit width when centered */
|
||||
text-align: center; /* Center align content within the item */
|
||||
}
|
||||
|
||||
.related-content-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3);
|
||||
} .related-content-image {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 15px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Make SVG images in related content white */
|
||||
.related-content-item img[src$=".svg"] {
|
||||
filter: brightness(0) invert(1);
|
||||
padding: 10px; /* Add some padding for better visibility */
|
||||
}
|
||||
|
||||
.related-content-item h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.read-more { /* General read-more link style if needed */
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.read-more:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Ensure section padding is applied */
|
||||
.section-padding {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
/* General container for consistent width */
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* Adjustments for navbar within header */
|
||||
.site-header .navbar.container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
padding: 0.5rem 2.0rem;
|
||||
}
|
||||
/* Footer specific styling */
|
||||
.site-footer {
|
||||
background-color: #0f172a; /* Dark background for footer */
|
||||
color: var(--text-muted);
|
||||
padding: 50px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1;
|
||||
min-width: 220px; /* Minimum width for columns */
|
||||
}
|
||||
.footer-col-logo .logo {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.footer-col h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.footer-col ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-col ul li a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col ul li a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-col p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.footer-col .social-links a {
|
||||
color: var(--text-muted);
|
||||
margin-right: 15px;
|
||||
font-size: 1.3rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-col .social-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.footer-col p a { /* Ensure links in paragraphs are styled */
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-col p a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
function Push-To-GitHub {
|
||||
param (
|
||||
[Parameter(Mandatory=$true)]
|
||||
[string]$GitHubRepo,
|
||||
|
||||
[Parameter(Mandatory=$true)]
|
||||
[string]$Username,
|
||||
|
||||
[Parameter(Mandatory=$false)]
|
||||
[string]$Token
|
||||
)
|
||||
|
||||
# Check if Git is installed
|
||||
try {
|
||||
$gitVersion = git --version
|
||||
Write-Host "Git is available: $gitVersion" -ForegroundColor Green
|
||||
}
|
||||
catch {
|
||||
Write-Host "Git is not installed or not in PATH. Please install Git first." -ForegroundColor Red
|
||||
return
|
||||
}
|
||||
|
||||
# Check if repository exists
|
||||
if (-not (Test-Path -Path ".git")) {
|
||||
Write-Host "Initializing git repository..." -ForegroundColor Yellow
|
||||
git init
|
||||
}
|
||||
else {
|
||||
Write-Host "Git repository already initialized." -ForegroundColor Green
|
||||
}
|
||||
|
||||
# Configure remote
|
||||
$remoteUrl = "https://$Username@github.com/$GitHubRepo"
|
||||
if ($Token) {
|
||||
$remoteUrl = "https://$Username:$Token@github.com/$GitHubRepo"
|
||||
}
|
||||
|
||||
# Check if origin exists
|
||||
$remotes = git remote
|
||||
if ($remotes -contains "origin") {
|
||||
Write-Host "Updating remote URL..." -ForegroundColor Yellow
|
||||
git remote set-url origin $remoteUrl
|
||||
}
|
||||
else {
|
||||
Write-Host "Adding remote..." -ForegroundColor Yellow
|
||||
git remote add origin $remoteUrl
|
||||
}
|
||||
|
||||
# Add all files
|
||||
Write-Host "Adding all files..." -ForegroundColor Yellow
|
||||
git add .
|
||||
|
||||
# Commit changes
|
||||
Write-Host "Committing changes..." -ForegroundColor Yellow
|
||||
git commit -m "Upload entire website"
|
||||
|
||||
# Get current branch name
|
||||
$branch = git rev-parse --abbrev-ref HEAD
|
||||
Write-Host "Current branch: $branch" -ForegroundColor Green
|
||||
|
||||
# Push to GitHub
|
||||
try {
|
||||
Write-Host "Pushing to GitHub... This might take a while depending on your file size and internet connection." -ForegroundColor Yellow
|
||||
if ($Token) {
|
||||
git push -u origin $branch
|
||||
}
|
||||
else {
|
||||
# Push and capture output to avoid showing credentials in the terminal
|
||||
$output = git push -u origin $branch 2>&1
|
||||
if ($LASTEXITCODE -ne 0) {
|
||||
Write-Host "Push failed. You might need to provide a token." -ForegroundColor Red
|
||||
Write-Host "Visit https://github.com/settings/tokens to create a token with 'repo' scope."
|
||||
$Token = Read-Host "Enter your GitHub Personal Access Token" -AsSecureString
|
||||
$BSTR = [System.Runtime.InteropServices.Marshal]::SecureStringToBSTR($Token)
|
||||
$plainToken = [System.Runtime.InteropServices.Marshal]::PtrToStringAuto($BSTR)
|
||||
|
||||
$tokenUrl = "https://$Username:$plainToken@github.com/$GitHubRepo"
|
||||
git remote set-url origin $tokenUrl
|
||||
git push -u origin $branch
|
||||
}
|
||||
}
|
||||
|
||||
if ($LASTEXITCODE -eq 0) {
|
||||
Write-Host "Successfully pushed to GitHub!" -ForegroundColor Green
|
||||
Write-Host "Visit https://github.com/$GitHubRepo to see your repository."
|
||||
}
|
||||
}
|
||||
catch {
|
||||
Write-Host "Error pushing to GitHub: $_" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
|
||||
# Run the function
|
||||
Write-Host "GitHub Website Uploader" -ForegroundColor Cyan
|
||||
Write-Host "======================" -ForegroundColor Cyan
|
||||
$repo = Read-Host "GitHub Repository (e.g., shaurya05745/website)"
|
||||
$username = Read-Host "GitHub Username"
|
||||
|
||||
Push-To-GitHub -GitHubRepo $repo -Username $username
|
||||
53
about.html
53
about.html
@@ -3,60 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>About Us - Gyannetra</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>About Us - Gyannetra</title> <link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
|
||||
@@ -3,13 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Contact Us - Gyannetra</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>Contact Us - Gyannetra</title> <link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
</head>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
227
css/style.css
227
css/style.css
@@ -3084,4 +3084,231 @@ h6 {
|
||||
min-height: 35px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* =================================================================== */
|
||||
/* CONSOLIDATED INLINE STYLES FROM ALL HTML FILES */
|
||||
/* =================================================================== */
|
||||
|
||||
/* Navbar scroll effects - Common across all pages */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Hero section layout stabilization - from index.html */
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* HERO SECTION LAYOUT STABILIZATION */
|
||||
#hero {
|
||||
/* Prevent layout shift during load */
|
||||
min-height: calc(100vh - 80px);
|
||||
height: calc(100vh - 80px);
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
/* Stabilize hero content positioning */
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
/* Prevent content shifting */
|
||||
position: relative;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Prevent FOUC and layout shifts */
|
||||
.hero-content h1,
|
||||
.hero-content p,
|
||||
.hero-content .btn-primary {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Mobile adjustments for navbar spacing */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding-top: 70px; /* Reduced for mobile */
|
||||
}
|
||||
|
||||
#hero {
|
||||
min-height: calc(100vh - 70px);
|
||||
height: calc(100vh - 70px);
|
||||
padding-top: 1rem; /* Add some top padding for mobile */
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding-top: 2rem; /* Ensure content doesn't touch navbar */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding-top: 65px; /* Further reduced for small screens */
|
||||
}
|
||||
|
||||
#hero {
|
||||
min-height: calc(100vh - 65px);
|
||||
height: calc(100vh - 65px);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding-top: 2.5rem; /* Extra spacing for very small screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* Benefits Cards Styling - Consolidated from benefits-cards.css */
|
||||
.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%;
|
||||
opacity: 1; /* Changed from 0 to 1 to ensure visibility */
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Animation delays for benefit cards */
|
||||
.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; }
|
||||
|
||||
/* Responsive adjustments for benefit cards */
|
||||
@media (max-width: 768px) {
|
||||
.benefits-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keyframes for fadeIn animation */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0.3;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
3087
css/style.css.backup
Normal file
3087
css/style.css.backup
Normal file
File diff suppressed because it is too large
Load Diff
28875
css/style.css.bak
28875
css/style.css.bak
File diff suppressed because it is too large
Load Diff
@@ -1,35 +0,0 @@
|
||||
# GitHub Upload Instructions
|
||||
|
||||
To upload your website to GitHub:
|
||||
|
||||
## Option 1: Using GitHub Desktop (Easiest)
|
||||
1. Download and install GitHub Desktop from https://desktop.github.com/
|
||||
2. Sign in to your GitHub account
|
||||
3. Add your local repository (File > Add Local Repository...)
|
||||
4. Navigate to C:\Users\Lenovo\sample-website
|
||||
5. Publish the repository to GitHub
|
||||
6. Select your account and the repository name "website"
|
||||
7. Click "Publish Repository"
|
||||
|
||||
## Option 2: Using Git with Personal Access Token
|
||||
1. Go to GitHub: https://github.com/settings/tokens
|
||||
2. Generate a new personal access token with 'repo' scope
|
||||
3. Copy the token
|
||||
4. Open a new PowerShell window and run:
|
||||
|
||||
```
|
||||
cd C:\Users\Lenovo\sample-website
|
||||
git remote set-url origin https://shaurya05745:YOUR_TOKEN@github.com/shaurya05745/website.git
|
||||
git push -u origin master
|
||||
```
|
||||
(Replace YOUR_TOKEN with the token you copied)
|
||||
|
||||
## Option 3: Visual Studio Code
|
||||
1. Open VS Code
|
||||
2. Install the GitHub Pull Requests and Issues extension
|
||||
3. Open your project folder
|
||||
4. Go to Source Control tab
|
||||
5. Sign in to GitHub
|
||||
6. Publish the repository
|
||||
|
||||
Choose the method that works best for you!
|
||||
120
index.html
120
index.html
@@ -6,127 +6,9 @@
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Gyannetra — AI Services & Solutions</title>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css?v=202412191300" />
|
||||
<link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
} /* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Mobile adjustments for navbar spacing */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding-top: 70px; /* Reduced for mobile */
|
||||
}
|
||||
|
||||
#hero {
|
||||
min-height: calc(100vh - 70px);
|
||||
height: calc(100vh - 70px);
|
||||
padding-top: 1rem; /* Add some top padding for mobile */
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding-top: 2rem; /* Ensure content doesn't touch navbar */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding-top: 65px; /* Further reduced for small screens */
|
||||
}
|
||||
|
||||
#hero {
|
||||
min-height: calc(100vh - 65px);
|
||||
height: calc(100vh - 65px);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding-top: 2.5rem; /* Extra spacing for very small screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* HERO SECTION LAYOUT STABILIZATION */
|
||||
#hero {
|
||||
/* Prevent layout shift during load */
|
||||
min-height: calc(100vh - 80px);
|
||||
height: calc(100vh - 80px);
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
/* Stabilize hero content positioning */
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
/* Prevent content shifting */
|
||||
position: relative;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Prevent FOUC and layout shifts */
|
||||
.hero-content h1,
|
||||
.hero-content p,
|
||||
.hero-content .btn-primary {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
</style>
|
||||
<!-- Hero section layout stabilization script -->
|
||||
<script>
|
||||
// Immediate layout stabilization
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
@echo off
|
||||
echo Pushing code to GitHub...
|
||||
|
||||
git add .
|
||||
git commit -m "Full website upload"
|
||||
git push -u origin master
|
||||
|
||||
if %errorlevel% neq 0 (
|
||||
echo Failed to push to GitHub. You may need to enter credentials.
|
||||
echo Please go to https://github.com/settings/tokens and create a Personal Access Token.
|
||||
echo For password, use the token instead of your GitHub password.
|
||||
set /p token="Enter your GitHub Personal Access Token: "
|
||||
git remote set-url origin https://shaurya05745:%token%@github.com/shaurya05745/website.git
|
||||
git push -u origin master
|
||||
)
|
||||
|
||||
echo Process completed.
|
||||
pause
|
||||
@@ -1,45 +0,0 @@
|
||||
@echo off
|
||||
echo GitHub Website Uploader
|
||||
echo =======================
|
||||
|
||||
REM Check if Git is available
|
||||
git --version
|
||||
if %errorlevel% neq 0 (
|
||||
echo Git is not installed or not in PATH. Please install Git first.
|
||||
pause
|
||||
exit /b
|
||||
)
|
||||
|
||||
REM Set GitHub details
|
||||
set GITHUB_REPO=shaurya05745/website
|
||||
|
||||
REM Make sure Git is initialized
|
||||
if not exist .git (
|
||||
echo Initializing git repository...
|
||||
git init
|
||||
) else (
|
||||
echo Git repository already initialized.
|
||||
)
|
||||
|
||||
REM Add all files
|
||||
echo Adding all files...
|
||||
git add .
|
||||
|
||||
REM Commit changes
|
||||
echo Committing changes...
|
||||
git commit -m "Upload entire website"
|
||||
|
||||
REM Configure remote
|
||||
echo Setting up remote repository URL...
|
||||
git remote set-url origin https://github.com/%GITHUB_REPO%.git
|
||||
if %errorlevel% neq 0 (
|
||||
git remote add origin https://github.com/%GITHUB_REPO%.git
|
||||
)
|
||||
|
||||
REM Push to GitHub
|
||||
echo Pushing to GitHub... This may prompt for your GitHub credentials.
|
||||
echo For password, use a Personal Access Token (not your GitHub password).
|
||||
echo Visit https://github.com/settings/tokens to create a token with 'repo' scope.
|
||||
git push -u origin master
|
||||
|
||||
pause
|
||||
Reference in New Issue
Block a user