Refactor: Extract CSS and JavaScript into external files for reusability
- Create professional-theme.css with complete soft professional blue theme - Soft professional color palette with reduced saturation - Professional card styling with hover effects - Button styles (primary, secondary, urgent) with animations - Navbar, hero section, and support section styles - Dark mode support and mobile responsiveness - Create professional-theme.js with comprehensive functionality - Theme toggle with localStorage persistence - Card hover animations with 3D effects - Scroll animations using Intersection Observer - Button ripple effects and smooth scrolling - WebP detection and utility functions - Additional features: loading states, toast notifications, scroll-to-top - Update index.html to use external files instead of inline styles/scripts - Replace Bootstrap with Tailwind CSS and Flowbite - Implement professional hero section with call-to-action buttons - Create featured ROA AUTO card spanning 2 columns with problems list and image - Add ROA PROIECTE DEVIZE LUCRĂRI card for construction cost estimation - Professional support tools section with enhanced styling - Add CLAUDE.md with project documentation and development guidelines - Architecture overview and development commands - CSS architecture with custom properties system - Frontend design workflow and styling guidelines 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
395
professional-theme.css
Normal file
395
professional-theme.css
Normal file
@@ -0,0 +1,395 @@
|
||||
/* Soft Professional Blue Theme - Gentle & Attenuated Colors */
|
||||
:root {
|
||||
/* Soft Professional Color Palette - Reduced Saturation 40-50% */
|
||||
--executive-navy: #2c3e50; /* Softer navy foundation */
|
||||
--soft-professional-blue: #5288c4; /* Much lighter than #1565c0 - primary soft blue */
|
||||
--gentle-trust-blue: #4a7ba7; /* Softer than #0d47a1 - gentle trust */
|
||||
--muted-accent-red: #b85555; /* Much softer than #c62828 - muted red */
|
||||
--soft-executive-white: #fafbfc; /* Clean background maintained */
|
||||
|
||||
/* Soft Professional Design System */
|
||||
--background: #fafbfc !important; /* Soft executive white background */
|
||||
--foreground: #2c3e50 !important; /* Soft executive navy for text */
|
||||
--card: #ffffff !important; /* Pure white cards */
|
||||
--card-foreground: #2c3e50 !important; /* Soft executive navy text */
|
||||
--card-hover: #f8f9fa !important; /* Very light hover */
|
||||
|
||||
--primary: #5288c4 !important; /* Soft professional blue primary */
|
||||
--primary-foreground: #ffffff !important; /* White text on primary */
|
||||
--secondary: #4a7ba7 !important; /* Gentle trust blue secondary */
|
||||
--secondary-foreground: #ffffff !important; /* White text on secondary */
|
||||
|
||||
--accent: #b85555 !important; /* Muted accent red for attention */
|
||||
--accent-foreground: #ffffff !important; /* White text on accent */
|
||||
|
||||
--muted: #f5f6f7 !important; /* Light gray muted */
|
||||
--muted-foreground: #2c3e50 !important; /* Soft executive navy muted text */
|
||||
|
||||
--border: #e8f2ff !important; /* Very light blue border */
|
||||
--input: #ffffff !important; /* White input background */
|
||||
--ring: #5288c4 !important; /* Soft professional blue focus ring */
|
||||
|
||||
/* Soft Professional Gradients - Gentle & Muted */
|
||||
--navbar-bg: linear-gradient(135deg, #2c3e50, #4a7ba7) !important; /* Soft navy to gentle trust blue */
|
||||
--hero-gradient: linear-gradient(180deg, #fafbfc, #ffffff) !important; /* Soft executive white to pure white */
|
||||
--button-gradient: linear-gradient(90deg, #5288c4, #4a7ba7) !important; /* Soft professional blue to gentle trust blue */
|
||||
--red-gradient: linear-gradient(90deg, #b85555, #c67b7b) !important; /* Muted red accent gradient */
|
||||
|
||||
/* Typography - Professional and trustworthy */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||||
--font-serif: 'Merriweather', Georgia, serif !important;
|
||||
--font-mono: 'JetBrains Mono', monospace !important;
|
||||
|
||||
/* Professional rounded corners */
|
||||
--radius: 8px !important;
|
||||
--radius-sm: 4px !important;
|
||||
--radius-md: 6px !important;
|
||||
--radius-lg: 12px !important;
|
||||
--radius-xl: 16px !important;
|
||||
|
||||
/* Soft professional shadows with reduced opacity - Gentle blue shadows */
|
||||
--shadow-2xs: 0 1px 3px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-xs: 0 2px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-sm: 0 3px 10px 0px rgba(82, 136, 196, 0.05), 0 1px 2px 0px rgba(82, 136, 196, 0.02) !important;
|
||||
--shadow: 0 4px 16px 0px rgba(82, 136, 196, 0.06), 0 2px 4px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-md: 0 6px 20px 0px rgba(82, 136, 196, 0.08), 0 3px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-lg: 0 8px 28px 0px rgba(82, 136, 196, 0.10), 0 4px 8px 0px rgba(82, 136, 196, 0.05) !important;
|
||||
--shadow-xl: 0 12px 36px 0px rgba(82, 136, 196, 0.12), 0 6px 12px 0px rgba(82, 136, 196, 0.06) !important;
|
||||
--shadow-2xl: 0 16px 48px 0px rgba(82, 136, 196, 0.16) !important;
|
||||
|
||||
/* Conservative spacing */
|
||||
--spacing: 0.375rem !important;
|
||||
--tracking-normal: -0.01em !important;
|
||||
}
|
||||
|
||||
/* Soft Professional Custom Styles */
|
||||
body {
|
||||
font-family: var(--font-sans) !important;
|
||||
background: var(--background) !important;
|
||||
color: var(--foreground) !important;
|
||||
letter-spacing: var(--tracking-normal) !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
/* Professional card styling with soft blue accents */
|
||||
.professional-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-card::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -1px !important;
|
||||
left: -1px !important;
|
||||
right: -1px !important;
|
||||
bottom: -1px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
z-index: -1 !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover {
|
||||
background: var(--card-hover) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-4px) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.professional-card:hover::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Soft professional blue buttons */
|
||||
.professional-btn-primary {
|
||||
background: var(--button-gradient) !important;
|
||||
color: var(--primary-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: -100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background: var(--red-gradient) !important;
|
||||
transition: left 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover::before {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary {
|
||||
background: var(--card) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 2px solid var(--primary) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 500 !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 100% !important;
|
||||
background: var(--primary) !important;
|
||||
transition: width 0.3s ease !important;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover {
|
||||
color: var(--primary-foreground) !important;
|
||||
border-color: var(--primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover::before {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* Muted red accent button for urgent actions */
|
||||
.professional-btn-urgent {
|
||||
background: var(--red-gradient) !important;
|
||||
color: var(--accent-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-urgent:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
filter: brightness(1.05) !important;
|
||||
}
|
||||
|
||||
/* Professional navbar with soft gradient */
|
||||
.professional-navbar {
|
||||
background: var(--navbar-bg) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Hero section with soft professional styling */
|
||||
.professional-hero {
|
||||
background: var(--hero-gradient) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 4rem 2rem !important;
|
||||
margin-bottom: 4rem !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-hero::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(82, 136, 196, 0.03) 0%, transparent 50%) !important;
|
||||
opacity: 0.5 !important;
|
||||
animation: subtle-float 12s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
@keyframes subtle-float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(20px, -20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
/* Professional support section */
|
||||
.professional-support {
|
||||
background: var(--muted) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 3rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Professional icon containers with soft blue themes */
|
||||
.professional-icon-wrapper {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 auto 1.5rem auto !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-icon-wrapper::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover .professional-icon-wrapper::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
.romfast-logo {
|
||||
height: 60px !important;
|
||||
filter: brightness(1.05) contrast(1.05) !important;
|
||||
}
|
||||
|
||||
/* Enhanced typography */
|
||||
h1, h2, h3 {
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* Soft professional text colors */
|
||||
.professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Special featured card (ROA AUTO) - Muted red accent styling */
|
||||
.professional-card-featured {
|
||||
background: var(--card) !important;
|
||||
border: 2px solid var(--accent) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
}
|
||||
|
||||
.professional-card-featured .professional-icon-wrapper {
|
||||
background: var(--red-gradient) !important;
|
||||
}
|
||||
|
||||
/* Muted red bullet points for ROA AUTO problems */
|
||||
.red-bullet {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* Enhanced hover effects for support cards */
|
||||
.professional-support-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.professional-support-card:hover {
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Soft blue hover states for navigation */
|
||||
.nav-link {
|
||||
transition: color 0.3s ease !important;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #90caf9 !important; /* Gentle blue hover - softer than original */
|
||||
}
|
||||
|
||||
/* Professional service sections with soft blue accents */
|
||||
.service-technology {
|
||||
background: linear-gradient(135deg, rgba(82, 136, 196, 0.03), rgba(74, 123, 167, 0.03)) !important;
|
||||
border-left: 4px solid var(--primary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
.service-reliability {
|
||||
background: linear-gradient(135deg, rgba(74, 123, 167, 0.03), rgba(82, 136, 196, 0.03)) !important;
|
||||
border-left: 4px solid var(--secondary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for soft professional blue theme */
|
||||
.dark-mode {
|
||||
--background: #141822 !important;
|
||||
--foreground: #e2e8f0 !important;
|
||||
--card: #1e2235 !important;
|
||||
--card-foreground: #e2e8f0 !important;
|
||||
--card-hover: #252a3e !important;
|
||||
--muted: #252a3e !important;
|
||||
--muted-foreground: #94a3b8 !important;
|
||||
--border: #334155 !important;
|
||||
--input: #1e2235 !important;
|
||||
--navbar-bg: linear-gradient(135deg, #0f172a, #1e293b) !important;
|
||||
--hero-gradient: linear-gradient(180deg, #1e2235, #141822) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for soft professional design */
|
||||
@media (max-width: 768px) {
|
||||
.professional-hero {
|
||||
padding: 2rem 1.5rem !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
|
||||
.professional-card {
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary,
|
||||
.professional-btn-secondary,
|
||||
.professional-btn-urgent {
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user