best shot

website-7sys/css/responsive.css

@@ -1,51 +1,244 @@
-/* Responsive Design */
-@media (max-width: 768px) {
-    html {
-        font-size: 14px;
-    }
-    
-    .hero h1 {
-        font-size: 2rem;
-    }
-    
-    .hero p {
-        font-size: 1.2rem;
-    }
-    
-    .contact-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    footer .container {
-        flex-direction: column;
-        gap: 1rem;
+/* Base Responsive Design */
+html {
+    font-size: 16px;
+}
+
+@media (max-width: 1400px) {
+    .container {
+        max-width: 1140px;
     }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 1200px) {
     .container {
-        padding: 0 15px;
+        max-width: 960px;
     }
-    
-    .service-card,
-    .vision-item {
-        padding: 1.5rem;
+
+    /* Service Grid */
+    .service-grid {
+        gap: var(--space-lg);
+    }
+}
+
+@media (max-width: 992px) {
+    .container {
+        max-width: 720px;
+    }
+
+    /* Typography */
+    h1 {
+        font-size: var(--font-size-3xl);
+    }
+
+    h2 {
+        font-size: var(--font-size-2xl);
+    }
+
+    h3 {
+        font-size: var(--font-size-xl);
+    }
+
+    /* Hero Section */
+    .hero {
+        min-height: 70vh;
+    }
+
+    /* Contact Grid */
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+}
+
+@media (max-width: 768px) {
+    html {
+        font-size: 15px;
+    }
+
+    .container {
+        max-width: 540px;
+        padding: 0 var(--space-md);
+    }
+
+    /* Header */
+    .main-nav {
+        padding: 0 var(--space-md);
+    }
+
+    /* Hero Section */
+    .hero {
+        min-height: 60vh;
+        padding: var(--space-2xl) var(--space-md);
+    }
+
+    .hero h1 {
+        font-size: var(--font-size-2xl);
+    }
+
+    .hero p {
+        font-size: var(--font-size-lg);
+    }
+
+    /* Service Grid */
+    .service-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    /* Vision Grid */
+    .vision-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    /* Contact Form */
+    .contact-form,
+    .contact-info {
+        padding: var(--space-lg);
+    }
+
+    /* Footer */
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-lg);
+    }
+
+    .footer-right {
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+}
+
+@media (max-width: 576px) {
+    html {
+        font-size: 14px;
+    }
+
+    .container {
+        padding: 0 var(--space-md);
+    }
+
+    /* Header */
+    .logo {
+        font-size: var(--font-size-xl);
+    }
+
+    /* Hero Section */
+    .hero {
+        text-align: center;
+        padding: var(--space-xl) var(--space-md);
+    }
+
+    .hero h1 {
+        font-size: var(--font-size-xl);
+    }
+
+    .hero p {
+        font-size: var(--font-size-base);
+    }
+
+    .cta-button {
+        width: 100%;
+        justify-content: center;
+    }
+
+    /* Service Cards */
+    .service-card {
+        padding: var(--space-lg);
+    }
+
+    /* Contact Section */
+    .contact-form {
+        padding: var(--space-md);
+    }
+
+    .form-group {
+        margin-bottom: var(--space-md);
+    }
+
+    .input-wrapper input,
+    .input-wrapper textarea {
+        padding: var(--space-sm);
+        padding-left: calc(var(--space-sm) * 2 + 16px);
+    }
+
+    /* Cookie Consent */
+    .cookie-consent {
+        flex-direction: column;
+        text-align: center;
+        padding: var(--space-md);
+    }
+
+    .cookie-buttons {
+        width: 100%;
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    .cookie-button {
+        width: 100%;
+    }
+}
+
+/* Height-based Media Queries */
+@media (max-height: 700px) {
+    .hero {
+        min-height: auto;
+        padding: var(--space-2xl) 0;
     }
 }
 
 /* Print Styles */
 @media print {
-    .hero {
-        height: auto;
-        padding: 2rem 0;
-    }
-    
-    .stars {
+    .hero,
+    .contact-form,
+    .cookie-consent,
+    #theme-toggle,
+    .back-to-top {
         display: none;
     }
-    
+
+    body {
+        color: black;
+        background: white;
+    }
+
+    .container {
+        max-width: none;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+
     .service-card,
-    .vision-item {
+    .vision-item,
+    .contact-info {
         break-inside: avoid;
+        page-break-inside: avoid;
+        border: 1px solid #ddd;
+    }
+}
+
+/* High Contrast Support */
+@media (forced-colors: active) {
+    .service-card,
+    .vision-item,
+    .contact-form,
+    .contact-info {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
     }
 }