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.
173 lines
2.7 KiB
CSS
173 lines
2.7 KiB
CSS
/* Tablet Devices */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.h1-hero {
|
|
font-size: 2rem !important;
|
|
margin: 1rem !important;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
.mission-vision {
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.welcome-quote {
|
|
font-size: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.logo-sub {
|
|
margin: 1.5rem;
|
|
font-size: 0.85rem;
|
|
margin: 0;
|
|
padding: 1.5rem 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Mobile Devices */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
header {
|
|
padding: 0.75rem;
|
|
max-height: 120px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
main {
|
|
margin-top: 1rem;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
section {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
h1.h1-hero {
|
|
font-size: 1.75rem !important;
|
|
margin: 0.5rem !important;
|
|
padding: 0.5rem !important;
|
|
}
|
|
|
|
.welcome-quote {
|
|
font-size: 0.95rem;
|
|
padding: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 1.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.service-card h3 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.contact-info {
|
|
padding: 1.5rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.contact-info a {
|
|
padding: 0.5rem 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.logo-sub {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
padding: 1.5rem 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Small Mobile Devices */
|
|
@media (max-width: 320px) {
|
|
header {
|
|
padding: 0.5rem;
|
|
max-height: 100px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h1.h1-hero {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.contact-info {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.welcome-quote {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.logo-sub {
|
|
font-size: 0.75rem;
|
|
margin: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Ensure touch targets are large enough on mobile */
|
|
@media (hover: none) {
|
|
.contact-info a {
|
|
padding: 0.75rem 0;
|
|
}
|
|
|
|
.service-card {
|
|
transition: none;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
header:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Fix for notched phones */
|
|
@supports (padding: max(0px)) {
|
|
header {
|
|
padding-left: max(1rem, env(safe-area-inset-left));
|
|
padding-right: max(1rem, env(safe-area-inset-right));
|
|
}
|
|
}
|