SUPPORT-8615

html/css/inbox.css

@@ -62,6 +62,7 @@
     --color-text-secondary: #acacac;
     --color-link: #c64e1b;
     --color-link-hover: #fa773f;
+    --color-warning: #fff3e5;
     --color-form: #3f434b;
     --color-bg-main: #223d36;
     --color-light: #868b87;
@@ -232,6 +233,29 @@ a.btn:is(:hover, :focus, :active) {
     margin-top: var(--indent-medium);
 }
 
+.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(--color-warning);
+}
+.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 {

html/img/svg/info.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="#C64E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="#C64E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 8C11 7.44772 11.4477 7 12 7H12.01C12.5623 7 13.01 7.44772 13.01 8C13.01 8.55228 12.5623 9 12.01 9H12C11.4477 9 11 8.55228 11 8Z" fill="#C64E1B"/>
+</svg>

html/index.html

@@ -16,10 +16,8 @@
 	<div id="browser-check-info">
 		<div class="browser-check-content">
 			<div class="browser-check-text">
-				<p class="plain-text bold mb-12"> Установите браузер </p>
+				<div class="plain-text text-header">Установите браузер</div>
-				<p class="plain-text">
+				<div class="plain-text">Для обеспечения защищённого соединения с сайтом реестра повесток необходимо установить браузер Яндекс или Chromium GOST.</div>
-					Для обеспечения защищённого соединения с сайтом реестра повесток необходимо установить браузер Яндекс или Chromium GOST.
-				</p>
 			</div>
 		</div>
 	</div>