934aac41dc
Early theme initialization to prevent flashing Proper component and script loading order Enhanced error handling and fallbacks Better theme state persistence System theme preference detection The theme system will now work correctly in the production environment when deployed through Coolify with Nixpacks build pack.
140 lines
3.0 KiB
CSS
140 lines
3.0 KiB
CSS
/* Card Base Styles */
|
|
.card-base {
|
|
background: var(--bg-card);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
transition: transform var(--transition-speed) ease,
|
|
border-color var(--transition-speed) ease;
|
|
}
|
|
|
|
.card-base:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* Mission Vision Cards */
|
|
.mission-vision {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin: var(--spacing-xl) 0;
|
|
}
|
|
|
|
.mission-vision div {
|
|
background: var(--bg-card);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.mission-vision h3 {
|
|
color: var(--primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Service Cards */
|
|
.service-card {
|
|
background: var(--bg-card);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
margin: var(--spacing-lg) 0;
|
|
transition: transform var(--transition-speed) ease,
|
|
border-color var(--transition-speed) ease;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.service-card h3 {
|
|
color: var(--primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Contact Info Card */
|
|
.contact-info {
|
|
background: var(--bg-card);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
margin: var(--spacing-xl) 0;
|
|
}
|
|
|
|
.contact-info a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
display: block;
|
|
margin: var(--spacing-sm) 0;
|
|
transition: opacity var(--transition-speed) ease;
|
|
}
|
|
|
|
.contact-info a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Quote Styles */
|
|
.quote {
|
|
font-size: 1.2rem;
|
|
line-height: 1.6;
|
|
padding: var(--spacing-xl);
|
|
margin: var(--spacing-xl) 0;
|
|
background: var(--bg-card);
|
|
border-left: 4px solid var(--primary);
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
color: var(--text);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.hero-quote {
|
|
font-size: 1.3rem;
|
|
line-height: 1.7;
|
|
color: var(--text);
|
|
max-width: 900px;
|
|
margin: var(--spacing-xl) auto;
|
|
padding: var(--spacing-md) 0;
|
|
position: relative;
|
|
font-weight: 300;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.hero-quote::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: -30px;
|
|
left: -10px;
|
|
font-size: 3rem;
|
|
color: var(--primary);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.welcome-quote {
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.welcome-quote:before {
|
|
content: '°';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0;
|
|
font-size: 1rem;
|
|
color: var(--primary);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/* Logo Sub Text */
|
|
.logo-sub {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
margin: var(--spacing-xl) auto;
|
|
max-width: 800px;
|
|
line-height: 1.4;
|
|
font-style: italic;
|
|
}
|