From e1c66ae53cb018efd84c9c7f5d7ca07731b0f5e6 Mon Sep 17 00:00:00 2001
From: Alisa <you@example.com>
Date: Thu, 4 Jun 2026 19:47:34 +0300
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D0=B7=D0=B8=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D0=B7=D0=B0=D0=B2=D0=B5=D1=80=D1=88?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/css/app.css | 126 ++++++++++++++++++++++++++++----------
 1 file changed, 93 insertions(+), 33 deletions(-)

diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 2d12f3e..c1bb87e 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -2,6 +2,17 @@
     box-sizing: border-box;
 }
 
+img,
+iframe {
+    max-width: 100%;
+}
+
+:root {
+    --page-max: 1440px;
+    --page-gap: 24px;
+    --panel-radius: 8px;
+}
+
 body {
     margin: 0;
     min-height: 100vh;
@@ -20,7 +31,7 @@ body {
 }
 
 .site-topbar-inner {
-    width: min(1180px, calc(100% - 48px));
+    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
     display: grid;
     grid-template-columns: 220px minmax(0, 1fr) 290px;
     gap: 24px;
@@ -95,7 +106,7 @@ body {
 }
 
 .site-utility {
-    width: min(1180px, calc(100% - 48px));
+    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
     display: flex;
     gap: 14px;
     align-items: center;
@@ -140,7 +151,7 @@ body {
 
 .page {
     min-height: 100vh;
-    padding: 24px 24px 56px;
+    padding: var(--page-gap) var(--page-gap) 56px;
 }
 
 .primary-link {
@@ -148,7 +159,8 @@ body {
 }
 
 .start-screen {
-    width: min(760px, 100%);
+    width: min(var(--page-max), 100%);
+    margin: 0 auto;
     padding: 32px;
     border: 1px solid #d9dfd3;
     border-radius: 8px;
@@ -156,7 +168,7 @@ body {
 }
 
 .start-screen.wide {
-    width: min(1180px, 100%);
+    width: min(var(--page-max), 100%);
     margin: 0 auto;
     border: 0;
     padding: 0;
@@ -571,7 +583,8 @@ a:hover {
 
 .catalog-layout,
 .admin-layout {
-    width: min(1180px, 100%);
+    width: min(var(--page-max), 100%);
+    margin: 0 auto;
     display: grid;
     grid-template-columns: 300px minmax(0, 1fr);
     gap: 20px;
@@ -607,12 +620,12 @@ a:hover {
 }
 
 .text-page {
-    width: min(920px, 100%);
+    width: min(var(--page-max), 100%);
     margin: 0 auto;
 }
 
 .info-page {
-    width: min(1180px, 100%);
+    width: min(var(--page-max), 100%);
     display: grid;
     gap: 18px;
     margin: 0 auto;
@@ -929,7 +942,7 @@ a:hover {
 }
 
 .text-page-header p:last-child {
-    max-width: 760px;
+    max-width: 880px;
     margin-bottom: 0;
 }
 
@@ -939,6 +952,11 @@ a:hover {
     padding: 8px 30px 30px;
 }
 
+.text-page-body section,
+.text-page-body > p {
+    max-width: 920px;
+}
+
 .text-page-body section {
     padding: 24px 0;
     border-bottom: 1px solid #e5eadf;
@@ -1038,7 +1056,7 @@ a:hover {
 }
 
 .site-footer-inner {
-    width: min(1180px, calc(100% - 48px));
+    width: min(var(--page-max), calc(100% - (var(--page-gap) * 2)));
     display: grid;
     grid-template-columns: 1.15fr 1.25fr 1fr 1.2fr;
     gap: 34px;
@@ -1142,7 +1160,7 @@ a:hover {
 }
 
 .site-footer-bottom p {
-    max-width: 1180px;
+    max-width: var(--page-max);
     margin: 6px auto 0;
     font-size: 12px;
     line-height: 1.5;
@@ -1154,17 +1172,64 @@ a:hover {
     color: #c7d2c3;
 }
 
-@media (max-width: 760px) {
-    .site-utility {
-        width: calc(100% - 32px);
-        display: grid;
-        margin-top: 12px;
+@media (max-width: 1180px) {
+    .site-topbar-inner {
+        grid-template-columns: 220px minmax(0, 1fr);
     }
 
-    .content-grid {
+    .topbar-contacts {
+        grid-column: 1 / -1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px 18px;
+        justify-content: flex-end;
+    }
+
+    .home-banners {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .calculator-form {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .site-footer-inner {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 980px) {
+    .catalog-layout,
+    .admin-layout,
+    .info-hero,
+    .info-grid,
+    .info-grid.three,
+    .contact-grid,
+    .route-layout {
         grid-template-columns: 1fr;
     }
 
+    .sticky-panel {
+        position: static;
+        max-height: none;
+    }
+
+    .info-visual {
+        min-height: 170px;
+    }
+}
+
+@media (max-width: 760px) {
+    :root {
+        --page-gap: 16px;
+    }
+
+    .site-utility {
+        width: calc(100% - (var(--page-gap) * 2));
+        display: grid;
+        margin-top: 12px;
+    }
+
     .site-topbar-inner,
     .home-banners,
     .promo-strip,
@@ -1173,7 +1238,7 @@ a:hover {
     }
 
     .site-topbar-inner {
-        width: calc(100% - 32px);
+        width: calc(100% - (var(--page-gap) * 2));
         justify-items: start;
         gap: 12px;
     }
@@ -1188,6 +1253,7 @@ a:hover {
     }
 
     .topbar-contacts {
+        display: grid;
         justify-items: start;
     }
 
@@ -1212,17 +1278,8 @@ a:hover {
         display: grid;
     }
 
-    .catalog-layout,
-    .admin-layout {
-        grid-template-columns: 1fr;
-    }
-
-    .info-hero,
-    .info-grid,
-    .info-grid.three,
-    .calculator-form,
-    .contact-grid,
-    .route-layout {
+    .content-grid,
+    .calculator-form {
         grid-template-columns: 1fr;
     }
 
@@ -1244,13 +1301,16 @@ a:hover {
     }
 
     .site-footer-inner {
-        width: calc(100% - 32px);
+        width: calc(100% - (var(--page-gap) * 2));
         grid-template-columns: 1fr;
         gap: 26px;
     }
 
-    .sticky-panel {
-        position: static;
-        max-height: none;
+    .text-page-header,
+    .text-page-body,
+    .info-card,
+    .catalog-heading,
+    .panel {
+        padding: 18px;
     }
 }