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

Для CSS стилей в шаблоне используется синтаксис Less

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

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

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

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

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

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

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

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

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

@bg1, @bg2, @bg3 - цвет фона для блоков Баннеров на слайдере

¹При указании шрифта подключите их из папки /templates/asmp/fonts/ через @font-face

/* Montserrat */
@font-face {
    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;
}