/* Описание переменных и их применение ЦВЕТА --color-txt: .......... Цвет для текста на светлых участках сайта. - Текст сайта (Глобальный! Прописан в body). - Цвет текста заголовков сайта на светлом фоне. - Текст БРЕНДА рядом с логотипом. - Цвет ссылок главного меню. - Текст блока выбора стран. - Бэкграунд заголовка таблицы (Countries). - Бэкграунд кнопки в карточке с ценам. ... при наведении меняется на --color-bg - Цвет бордера всех кнопок. - Бэкграунд кнопи форм отправки сообщений (TopUp). ... при наведении меняется на --color-bg - Бэкграунд кнопи переключения видео. ... при наведении меняется на --color-bg - Цвет текста Аккордеона и текста его кнопок. - Цвет бэкграунда слайдера (подложка если убита картинка). --color-bg: ........... Цвет бэкграунда (Светлый). - Бэкграунд сайта (Глобальный! Прописан в body) - Цвет текста заголовков сайта на темном фоне. При создании темных блоков, цвет текста и бэка просто меняются местами!! - Цвет текста всего футера. - Цвет не четных строк выпадающей таблицы (Countries). - Цвет текста кнопки в карточке с ценами. ... при наведении меняется на --color-txt - Цвет заголовка в правой части раздела (TopUp). - Цвет текста кнопки форм отправки сообщений (TopUp). ... при наведении меняется на --color-txt - Цвет кнопи переключения видео. ... при наведении меняется на --color-txt - Цвет темных и градиентных инфо блоков. (Типа Get your eSIM......) - Цвет текста на кнопках и темных блоках личного кабтнета. --color-btnm: ......... Меню. - Цвет бэкграунда кнопок слайдера. ... при наведении меняется на --color-txt - Бекграунд кнопки и бордера (Login/Register) ... При навелении меняется на --color-bg (Кроме бордера). - Цвет стандартных ссылок сайта на светлом фоне. - Цвет черты при наведении на ссылки в главном меню. - Цвет бордера (Countries) при наведении мыши. --color-grad-l: ....... Более тёмный цвет для блоков с градиентным бекграундом. Используется для основного бэкграунда футера. --color-grad-r: ....... Более светлый цвет для блоков с градиентным бекграундом. - Бэкграунд кнопок личного кабинета. - Цвет стандартных ссылок сайта на светлом фоне (При наведении). --color-table-2n: ..... Цвет четных строк в таблице личного кабинета. --color-success: ...... Цвет положительных сообщений (Backend). --color-attention: .... Цвет сообщений требующих внимания (Backend). --color-error: ........ Цвет сообщений с ошибками (Backend). --color-border: ....... Основной цвет бордера на сайте. --color-tb-bg: ........ Основной бекграунд таблицы. --color-tb-child: ..... Бэкграунд каждой четной строки в выпадающей таблице. --cell-border: ........ Цвет бордера для выпадающей таблицы с ценами. --color-card-bg: ...... Бэк карточки с ценами и тарифами. --color-card-brd: ..... Цвет бордера карточек с ценами и тарифами. --color-shadow: ....... Цвет тени карточки с ценами и тарифами. --color-price: ........ Цвет цены в карточке с тарифами. --color-border-hover: . Цвет бордера при наведении на карточку с тарифами. --color-stok-on: ...... Цвет состояния склада, положительный, в карточке с ценами. --color-stok-of: ...... Цвет состояния склада, отрицательный, в карточке с ценами. --color-card-price: ... Цвет цены в каточке с тарифами. --color-main-gr-a: .... Цвет градиента инфо блоков (Более светлый). - Цвет заголовка личного кабинета (Более светлый). - Цвет правой части слайдера (Более светлый). --color-main-gr-b: .... Цвет градиента инфо блоков (Более темный). - Цвет заголовка личного кабинета (Более темный). - Цвет правой части слайдера (Более темный). --color-faq-bg: ....... Цвет заголовков аккордеона в разделе "FAQ" --searchMark: ......... Цвет для выборки по фильтру устройств с поддержкой eSIM ИЗОБРАЖЕНЬЯ ( Ударение на Я ))) ) !!! АХТУНГ !!! Перед тем, как менять имена файлов в переменных изображений, нужно закинуть сами изображения в папу /assets/img/ (Эта инфа для тех, у кого сетчатый люк на подводной лодке!) Желательно, что бы размер изображения не превышал значения 1000х800px, больше трудно для мобильного интрнета. Меньше 600х400 уже будет не очень красиво, ибо пикселы, мать их! Желательно все изображения оптимизировать, сжать в допустимых пределах (Меньше весят!). --hitwor-img: ......... Изображение в блоке (Как это работает, то которое в центре.) --slide-1-img: ........ Изображение первого слайда. --slide-2-img: ........ Изображение второго слайда. --slide-3-img: ........ Изображение третьего слайда. --topup-img: .......... Изображение справа в блоке (TopUp) ПОЗИЦИОНИРОВАНИЕ И РАЗМЕРЫ --slide-rl: ........... Пременная для смены положения картинки в слайдах Можно задать два значения: - row - Картинка слева. - row-reverse - Картинка справа. --topup-rl: ........... Пременная для смены положения картинки в блоке (TopUp) Значения аналогичны переменной (--slide-rl:) */ /* ПЕРЕМЕННЫЕ Менять только значения! Это то, что находится между ":" и ";" */ *, *::after, *::before { box-sizing: border-box; } :root { --color-txt: #060243; --color-bg: #fffafa; --color-btnm: #023a7d; --color-grad-l: #060243; --color-grad-r: #090456; --color-table-2n: #dcffd9; --color-success: #269f26; --color-attention: #e6a705; --color-error: #d01a01; --color-border: #cdcdcd; --color-border-hover: #92beff; --color-card-price: #0251c8; --color-tb-bg: #efefef; --color-tb-child: #eeffe8; --cell-border: #efefef; --color-card-bg: #f4f4f4; --color-card-brd: #eaeaea; --color-shadow: #e7e7e7; --color-price: #178f0d; --color-stok-on: #54ad45; --color-stok-of: #f45f56; --color-main-gr-a: #0d5600; --color-main-gr-b: #043200; --color-faq-bg: #f2fce8; --searchMark: #98e5fe; --hitwor-img: url("../../assets/img/iphone.png"); --slide-1-img: url("../../assets/img/man2.jpg"); --slide-2-img: url("../../assets/img/fgirl.jpeg"); --slide-3-img: url("../../assets/img/man2.jpg"); --topup-img: url("../../assets/img/contact.jpg"); --slide-rl: row; --topup-rl: row-reverse; }