SUPPORT-8615

frontend/home.html

@@ -13,16 +13,14 @@
 </div>
 
 <div class="container">
-    <div id="browser-check-info">
-        <div class="browser-check-content">
-            <div class="browser-check-text">
-                <p class="plain-text bold mb-12"> Установите браузер </p>
-                <p class="plain-text">
-                    Для обеспечения защищённого соединения с сайтом реестра повесток необходимо установить браузер Яндекс или Chromium GOST.
-                </p>
-            </div>
-        </div>
-    </div>
+	<div id="browser-check-info">
+		<div class="browser-check-content">
+			<div class="browser-check-text">
+				<div class="plain-text text-header">Установите браузер</div>
+				<div class="plain-text">Для обеспечения защищённого соединения с сайтом реестра повесток необходимо установить браузер Яндекс или Chromium GOST.</div>
+			</div>
+		</div>
+	</div>
     <script>
       document.getElementById("browser-check-info").hidden = navigator.userAgent.indexOf("Chromium GOST") > -1 || navigator.userAgent.indexOf("YaBrowser") > -1;
     </script>

frontend/src/resources/landing/home.css

@@ -624,6 +624,29 @@ a.btn:is(:hover, :focus, :active) {
     color: var(--color-link);
 }
 
+.browser-check-content {
+    font-family: 'Golos';
+    font-size: var(--size-text-secondary);    
+    padding: var(--indent-mini) var(--w-screen) var(--indent-mini) calc(var(--w-screen) + 38px);
+    background-color: var(--bg-warn);
+}
+.browser-check-text {
+    position: relative;
+    padding-left: 40px;
+}
+.browser-check-text::before {
+    position: absolute;
+    content: url(../img/svg/info.svg);
+    left: 0;
+    top: calc((100% - 24px) / 2);
+}
+.text-header {
+    color: var(--color-link);
+    font-family: 'GolosB';
+    font-size: var(--size-text-primary);
+    margin-bottom: 4px;
+}
+
 /*@media ((max-width: 780px) or ((orientation: landscape) and (max-device-width : 1024px))) {*/
 @media (max-width: 1024px) {
     body {