> For the complete documentation index, see [llms.txt](https://support.morozovpimnev.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.morozovpimnev.ru/market/nastroika-stilei-saita.md).

# Настройка стилей сайта

Для CSS стилей в шаблоне используется синтаксис [Less](https://www.hostcms.ru/documentation/step-by-step/templates/less/)

{% hint style="success" %}
LESS — это динамический язык стилей, препроцессор CSS, позволяющий писать ясный CSS с использованием программных конструкций вместо статических правил. LESS включает в себя такие расширения CSS, как переменные, вложенные блоки, примеси, операторы и функции.
{% endhint %}

Перейдите в главный макет вашего сайта **Структура сайта -> Макеты сайта** и нажмите "Редактировать" (1)

<div data-full-width="true"><figure><img src="/files/XrPbTYlQ7pQS6EonDXs5" alt=""><figcaption></figcaption></figure></div>

Перейдите во вкладку "CSS/LESS/SCSS", в самом начале указаны основные переменные стиля сайта

<div data-full-width="true"><figure><img src="/files/xs2t8HdwPafFzAyb2RKE" alt=""><figcaption></figcaption></figure></div>

@fontFamily - основной шрифт сайта `Montserrat` (так же поддерживает Lato, Inter, Noto Sans)¹

@fontSize - основной размер шрфита сайта (`14px`)

@color - основной цвет текста сайта (`#2C2F34`)

@themeColor - основной фирменный цвет сайта (`#0051B8`)

@themeWidth - максимаьная ширина сайта (`1240px`)

@radius - основной радиус закругления углов у элементов (`3px`)

@bg1, @bg2, @bg3 - цвет фона для блоков [Баннеров на слайдере](/market/dizain-glavnaya/bannera-na-slaidere.md)

{% hint style="warning" %}
¹При указании шрифта подключите их из папки /templates/asmp/fonts/ через @font-face
{% endhint %}

<pre class="language-css" data-full-width="true"><code class="lang-css"><strong>/* Montserrat */
</strong><strong>@font-face {
</strong>    font-family: "Montserrat";
    src: url("/templates/asmp/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/templates/asmp/fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Inter */
@font-face {
    font-family: "Montserrat";
    src: url("/templates/asmp/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/templates/asmp/fonts/Inter-VariableFont_opsz,wght") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans */
@font-face {
    font-family: "Noto Sans";
    src: url("/templates/asmp/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/templates/asmp/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Lato */
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/templates/asmp/fonts/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
</code></pre>