/** * Фирменный слой Пифагора поверх ядра NBC. * * Ядро рисует вход и личный кабинет в своей нейтральной палитре (жёлтый Material + * Montserrat). Здесь переводим их на цвета и шрифт pifagor.cafe. * * Значения взяты из собранного CSS Elementor — не на глаз: * #FD6929 фирменный оранжевый — основной цвет заказа: заливка кнопок, * плашек и активных элементов, текст на нём белый * #E2551A он же на наведении * #FFC607 жёлтый CTA сайта — в интерфейсе заказа НЕ используем * #FDF9ED кремовый фон страниц * #181818 основной текст, #525252 — вторичный * #C2DBBE зелёный плашки «Открыто» * * Селекторы с префиксом body — намеренно. Ядро подключает nbc-account.css из * шорткода, то есть уже во время рендера контента, и этот файл может * напечататься позже нашего. Лишний body делает перебивку независимой от * порядка печати стилей. */ /* ═══════════════════════════════════════════════════════════ * Шрифт Jeko * * На сайте шрифт указан в стилях как "Jeko-Medium", но @font-face для него * нигде не объявлен — браузер молча подставляет системный. Файлы при этом * лежат в uploads с 2022 года. * * Объявляем под ОТДЕЛЬНЫМ именем PifagorJeko: если объявить как "Jeko-Medium", * шрифт подхватится всем сайтом разом и вёрстка заметно поедет. Здесь он * работает только в кабинете и модалке входа. * ═══════════════════════════════════════════════════════════ */ @font-face { font-family: 'PifagorJeko'; src: url('/wp-content/uploads/2022/07/jeko-medium.woff2') format('woff2'), url('/wp-content/uploads/2022/07/jeko-medium.woff') format('woff'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'PifagorJeko'; src: url('/wp-content/uploads/2022/07/jeko-bold-webfont.woff') format('woff'); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PifagorJeko'; src: url('/wp-content/uploads/2022/07/jeko-black-webfont.woff2') format('woff2'), url('/wp-content/uploads/2022/07/jeko-black-webfont.woff') format('woff'); font-weight: 800 900; font-style: normal; font-display: swap; } /* Единая шрифтовая стопка кабинета */ body .nbc-header, body .nbc-mobile-menu, body .nbc-login-modal, body .nbc-account-wrapper, body .nbc-order-modal { font-family: 'PifagorJeko', 'Jeko-Medium', -apple-system, BlinkMacSystemFont, sans-serif; } /* Ядро в паре мест прописывает Montserrat напрямую — перебиваем точечно */ body .nbc-account-login-notice, body .nbc-account-wrapper input, body .nbc-account-wrapper select, body .nbc-account-wrapper textarea, body .nbc-account-wrapper button, body .nbc-login-modal input, body .nbc-login-modal button { font-family: 'PifagorJeko', 'Jeko-Medium', -apple-system, BlinkMacSystemFont, sans-serif; } /* ═══════════════════════════════════════════════════════════ * Палитра: модалка входа и шапочные элементы * ═══════════════════════════════════════════════════════════ */ body .nbc-header, body .nbc-mobile-menu, body .nbc-login-modal { --nbc-primary: #FD6929; /* фирменный оранжевый Пифагора */ --nbc-primary-dark: #E2551A; /* он же на наведении */ --nbc-text: #181818; --nbc-text-light: #525252; --nbc-bg: #FFFFFF; --nbc-border: #EAE0CC; /* тёплая рамка вместо холодной серой */ --nbc-radius: 14px; --nbc-radius-sm: 10px; --nbc-shadow: 0 4px 22px rgba(24, 24, 24, .12); } /* ═══════════════════════════════════════════════════════════ * Палитра: личный кабинет * ═══════════════════════════════════════════════════════════ */ body .nbc-account-wrapper, body .nbc-order-modal { --nbc-primary: #FD6929; --nbc-primary-dark: #E2551A; --nbc-accent: #FD6929; /* фирменный оранжевый */ --nbc-orange: #FD6929; --nbc-text: #181818; --nbc-text-light: #525252; --nbc-bg: #FDF9ED; /* кремовый фон сайта */ --nbc-bg-white: #FFFFFF; --nbc-bg-light: #F7F1E2; /* панели чуть глубже фона */ --nbc-border: #EAE0CC; --nbc-radius: 14px; --nbc-radius-sm: 10px; --nbc-shadow: 0 4px 22px rgba(24, 24, 24, .10); } /* ═══════════════════════════════════════════════════════════ * Точечные правки там, где цвет зашит мимо переменных * ═══════════════════════════════════════════════════════════ */ /* Кнопка входа: как CTA на сайте — жёлтая заливка, тёмный текст, своя рамка */ body .nbc-login-submit { background: #FD6929; border: 2px solid #FD6929; color: #FFFFFF; font-weight: 700; letter-spacing: .2px; } body .nbc-login-submit:hover:not(:disabled) { background: #E2551A; border-color: #E2551A; } body .nbc-login-submit:focus-visible { outline: 2px solid #181818; outline-offset: 2px; } /* Поля ввода — тёплая рамка, оранжевый фокус */ body .nbc-login-field input:focus, body .nbc-account-wrapper input:focus, body .nbc-account-wrapper select:focus, body .nbc-account-wrapper textarea:focus { border-color: #FD6929; } /* Служебные ссылки модалки (сменить номер, выслать код заново) */ body .nbc-login-back, body .nbc-login-resend, body .nbc-login-loyalty-link { color: #FD6929; } body .nbc-login-back:hover, body .nbc-login-resend:hover, body .nbc-login-loyalty-link:hover { color: #E2551A; } /* Заголовок модалки — плотным начертанием Jeko */ body .nbc-login-title { font-weight: 900; letter-spacing: -.01em; color: #181818; } /* Ошибка — в тёплой гамме, а не в дежурном красном на голубоватом фоне */ body .nbc-login-error { background: #FDECE4; color: #C0421A; } /* Оверлей — тёплый, а не нейтрально-серый */ body .nbc-login-overlay { background: rgba(24, 18, 12, .55); } /* ═══════════════════════════════════════════════════════════ * Страница личного кабинета * * В настройках Elementor у сайта чёрный фон body — обычные страницы * закрывают его своими секциями. Кабинет рисуется шорткодом, поэтому * кремовую подложку ему нужно дать самому, иначе он висит на чёрном. * ═══════════════════════════════════════════════════════════ */ body .nbc-account-wrapper, body .nbc-account-login-notice { background: #FDF9ED; color: #181818; } /* Приглашение войти — карточка по центру, а не строчка на пустом фоне */ body .nbc-account-login-notice { display: flex; flex-direction: column; /* текст, под ним кнопка — не в строку */ align-items: center; justify-content: center; min-height: 58vh; padding: 64px 20px; text-align: center; } body .nbc-account-login-notice p { max-width: 30ch; margin: 0; font-size: 18px; line-height: 1.5; color: #181818; } /* «войти» — кнопка в стиле сайта, а не ссылка посреди предложения */ body .nbc-account-login-notice a { display: block; width: fit-content; margin: 20px auto 0; padding: 13px 30px; background: #FD6929; border: 2px solid #FD6929; border-radius: 10px; color: #FFFFFF; font-weight: 700; text-decoration: none; transition: background .2s ease, border-color .2s ease; } body .nbc-account-login-notice a:hover { background: #E2551A; border-color: #E2551A; text-decoration: none; } body .nbc-account-login-notice a:focus-visible { outline: 2px solid #181818; outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ * Режим «только самовывоз» * * У Пифагора доставки нет — переключателя «Доставка / Самовывоз» * в корзине не показываем, вместо него плашка и адрес точки. * ═══════════════════════════════════════════════════════════ */ /* Плашка режима вместо переключателя */ body .nbc-pickup-only-toggle { display: inline-flex; padding: 0; background: none; border: none; } body .nbc-pickup-only-toggle .nbc-mode-label { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; background: #FD6929; border-radius: 10px; color: #FFFFFF; font-weight: 700; font-size: 15px; } /* «ДОСТУПЕН ТОЛЬКО САМОВЫВОЗ» — главное сообщение блока */ body .nbc-pickup-only-notice { margin-bottom: 16px; color: #FD6929; font-weight: 800; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; } /* Карточка с адресом точки */ body .nbc-pickup-section { background: #FFFFFF; border: 1px solid #EAE0CC; border-radius: 14px; padding: 22px 24px; } body .nbc-pickup-info { display: flex; align-items: flex-start; gap: 12px; color: #181818; } body .nbc-pickup-info > svg { flex: none; margin-top: 2px; color: #FD6929; } body .nbc-pickup-label { margin-bottom: 4px; color: #525252; font-size: 13px; } body .nbc-pickup-address { font-weight: 700; font-size: 16px; line-height: 1.35; } /* ═══════════════════════════════════════════════════════════ * Корзина * * Ядро объявляет свои переменные на :root — перебиваем их на * .nbc-cart-page: специфичность выше, на остальной сайт не влияет. * ═══════════════════════════════════════════════════════════ */ body .nbc-cart-page { --nbc-primary: #FD6929; --nbc-primary-dark: #E2551A; --nbc-text: #181818; --nbc-text-light: #525252; --nbc-bg: #FFFFFF; --nbc-bg-warm: #FDF9ED; --nbc-bg-light: #F7F1E2; --nbc-border: #EAE0CC; --nbc-radius: 14px; --nbc-radius-sm: 10px; font-family: 'PifagorJeko', 'Jeko-Medium', -apple-system, BlinkMacSystemFont, sans-serif; background: #FDF9ED; max-width: none; /* кремовая подложка на всю ширину */ padding-inline: max(20px, calc((100% - 1100px) / 2)); } /* Кнопка оплаты — тот же CTA, что на сайте */ body .nbc-cart-page .nbc-checkout-btn, body .nbc-cart-page button[type="submit"] { background: #FD6929; color: #FFFFFF; font-weight: 700; } body .nbc-cart-page .nbc-checkout-btn:hover, body .nbc-cart-page button[type="submit"]:hover { background: #E2551A; } /* Ссылки-акценты: промокод, сертификат, очистить. :not() — намеренно: .nbc-back-to-menu это залитая оранжевым кнопка, и общий цвет ссылок делал на ней оранжевый текст на оранжевом фоне. */ body .nbc-cart-page a:not(.nbc-back-to-menu), body .nbc-cart-page .nbc-cart-clear-all { color: #FD6929; } /* Кнопка «Перейти в меню» из пустой корзины — залита оранжевым */ body .nbc-cart-page .nbc-back-to-menu { background: #FD6929; color: #FFFFFF; } body .nbc-cart-page .nbc-back-to-menu:hover { background: #E2551A; color: #FFFFFF; } /* «У меня есть промокод» / «бонусная карта» — в ядре тёмно-золотые. Жёлтый в интерфейсе заказа не используем, это просил клиент. */ body .nbc-cart-page .nbc-promo-toggle { color: #FD6929; border-color: #FD6929; } /* «Очистить» — подложка была красноватой, не из палитры */ body .nbc-cart-page .nbc-cart-clear-all, body .nbc-cart-page .nbc-cart-clear { background: rgba(253, 105, 41, .08); border-color: #EAE0CC; } /* Плашка «Самовывоз»: у переключателя ядра есть белый бегунок ::before, рассчитанный на две кнопки — при одной он наезжает на текст. Убираем. */ body .nbc-pickup-only-toggle::before { display: none; } /* Заголовки корзины: в ките Elementor у сайта заголовки белые (фон body чёрный), а корзина у нас на кремовом — задаём цвет явно. */ body .nbc-cart-page h1, body .nbc-cart-page h2, body .nbc-cart-page h3, body .nbc-cart-page .nbc-summary-title, body .nbc-cart-page .nbc-cart-section-title, body .nbc-cart-page .nbc-contacts-title { color: #181818; } /* ═══════════════════════════════════════════════════════════ * Витрина меню * ═══════════════════════════════════════════════════════════ */ body .nbc-catalog-wrapper { --nbc-primary: #FD6929; --nbc-primary-dark: #E2551A; --nbc-text: #181818; --nbc-text-light: #525252; --nbc-bg: #FFFFFF; --nbc-bg-light: #F7F1E2; --nbc-border: #EAE0CC; --nbc-radius: 14px; --nbc-radius-sm: 10px; --nbc-shadow: 0 4px 22px rgba(24, 24, 24, .10); font-family: 'PifagorJeko', 'Jeko-Medium', -apple-system, BlinkMacSystemFont, sans-serif; background: #FDF9ED; color: #181818; } /* Заголовки разделов: в ките Elementor они белые (фон сайта чёрный) */ body .nbc-catalog-wrapper h1, body .nbc-catalog-wrapper h2, body .nbc-catalog-wrapper h3, body .nbc-catalog-wrapper h4 { color: #181818; } /* Карточка блюда — белая на кремовом */ body .nbc-product-card { background: #FFFFFF; border: 1px solid #EAE0CC; border-radius: 14px; overflow: hidden; } body .nbc-product-card .nbc-product-img { background: #F7F1E2; /* подложка, пока грузится фото */ } body .nbc-cat-title { color: #181818; font-weight: 800; } /* Кнопка «+» на карточке и счётчик количества */ body .nbc-img-add-btn, body .nbc-counter-plus, body .nbc-counter-minus { background: #FD6929; color: #FFFFFF; border-color: #FD6929; } body .nbc-img-add-btn:hover, body .nbc-counter-plus:hover, body .nbc-counter-minus:hover { background: #E2551A; border-color: #E2551A; } body .nbc-inline-counter { background: #FFFFFF; border: 1px solid #EAE0CC; } /* Активный раздел в навигации — фирменный оранжевый */ body .nbc-catalog-nav .active, body .nbc-catalog-nav a.active, body .nbc-catalog-nav button.active { color: #FD6929; border-color: #FD6929; } /* ═══════════════════════════════════════════════════════════ * Шапка ядра на страницах заказа * * На витрине, в корзине и в кабинете шапку рисует ядро — в ней вход * в личный кабинет, счётчик корзины и график работы. Шапку Elementor * там убираем, иначе на странице оказываются две шапки сразу. * ═══════════════════════════════════════════════════════════ */ body.pif-order-page [data-elementor-type="header"] { display: none; } /* Фирменная шапка: кремовая, как сайт */ body .nbc-header { background: #FDF9ED; border-bottom: 1px solid #EAE0CC; color: #181818; } body .nbc-header a, body .nbc-header .nbc-header-schedule, body .nbc-header .nbc-header-phone { color: #181818; } body .nbc-header a:hover, body .nbc-find-us:hover { color: #FD6929; } /* Кнопка входа / имя гостя — без подложки, иконка и подпись чёрные. Рядом в шапке уже стоит телефон, и вторая оранжевая плашка перетягивала внимание на себя. */ body .nbc-header .nbc-user-btn, body .nbc-header #nbc-login-trigger, body .nbc-header .nbc-header-user { background: transparent; color: #181818; border-color: transparent; } body .nbc-header .nbc-user-btn:hover, body .nbc-header #nbc-login-trigger:hover, body .nbc-header .nbc-header-user:hover { background: transparent; border-color: transparent; color: #FD6929; } body .nbc-header .nbc-user-btn svg, body .nbc-header #nbc-login-trigger svg, body .nbc-header .nbc-header-user svg { color: currentColor; } /* Иконка сверху, подпись под ней мелким — так кнопка занимает меньше ширины и не спорит с телефоном, стоящим рядом. */ body .nbc-header .nbc-header-login-btn { flex-direction: column; gap: 2px; padding: 4px 8px; line-height: 1.1; } body .nbc-header .nbc-header-login-btn span { font-size: 11px; font-weight: 600; } /* Счётчик товаров на иконке корзины */ body .nbc-header-cart-badge { background: #FD6929; color: #FFFFFF; } /* Активный пункт меню */ body .nbc-header-menu .current-menu-item > a { color: #FD6929; } /* ═══════════════════════════════════════════════════════════ * Страница «Спасибо» * * У неё свой блок стилей внутри ядра. Цвета там вынесены * в переменные — перебиваем их, не трогая ядро. * ═══════════════════════════════════════════════════════════ */ body .nbc-ty { --nbc-ty-accent: #FD6929; --nbc-ty-accent-light: #FF8452; --nbc-ty-accent-deep: #E2551A; --nbc-ty-on-accent: #FFFFFF; font-family: 'PifagorJeko', 'Jeko-Medium', -apple-system, BlinkMacSystemFont, sans-serif; color: #181818; } /* Тень под галочкой была жёлтой */ body .nbc-ty-check { box-shadow: 0 8px 24px rgba(253, 105, 41, .25); } /* Заголовки: в ките Elementor у сайта они белые */ body .nbc-ty h1, body .nbc-ty h2, body .nbc-ty h3 { color: #181818; } /* ═══════════════════════════════════════════════════════════ * Страницы заказа поверх темы blankslate * * У родительской темы фон body чёрный, а шаблон страницы печатает *

. На страницах заказа * это давало чёрную полосу между шапкой ядра и содержимым и чёрный * провал при оверскролле на телефоне. * ═══════════════════════════════════════════════════════════ */ body.pif-order-page { background: #FDF9ED; } /* Заголовок страницы от темы: витрина, корзина, ЛК и «Спасибо» называют себя сами, второй заголовок здесь лишний. */ body.pif-order-page > .wrapper > article > header.header, body.pif-order-page article > header.header, body.pif-order-page h1.entry-title { display: none; } /* Скрытый заголовок темы был заодно и распоркой: витрина решает, прятать ли шапку, по тому, дошла ли полоса разделов до её низа (nbc-catalog.js, updateHeaderState). Без 16 пикселей заголовка на телефоне это условие выполнялось сразу при загрузке — шапка пряталась ещё до первой прокрутки, оставляя пустую полосу. Возвращаем зазор отступом. На десктопе он уже есть в ядре. */ @media (max-width: 768px) { body.pif-order-page .nbc-catalog-nav { margin-top: 16px; } } /* ═══════════════════════════════════════════════════════════ * Телефон * * Для фритерии с самовывозом мобильный — основной экран. * Ядро свои брейкпоинты имеет, здесь только то, что ломалось * именно на этом сайте. * ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Пальцем по 32-пиксельной кнопке не попасть. 44 — минимум, на который целятся мобильные гайдлайны. */ body .nbc-img-add-btn { width: 40px; height: 40px; font-size: 22px; } body .nbc-header-login-btn, body .nbc-header-burger, body .nbc-header-phone { min-width: 40px; min-height: 40px; } /* Плашка «Согласен» от Cookie Notice висит внизу на весь экран и накрывала плавающую кнопку корзины — до неё было не дотянуться, пока баннер не закрыт. Поднимаем кнопку над баннером. */ body.cookies-not-set .nbc-mobile-cart-btn { bottom: 170px; } } @media (max-width: 480px) { body.cookies-not-set .nbc-mobile-cart-btn { bottom: 190px; } } /* ═══════════════════════════════════════════════════════════ * Личный кабинет: заглушка сертификата * * В ядре она нарисована инлайновым SVG с зашитым жёлтым Material * (#FFC107 рамка, #FFFDE7 заливка, #FFD54F пунктир). На фоне кремовой * страницы это единственное жёлтое пятно в интерфейсе заказа. * CSS перебивает атрибуты презентации SVG без !important. * ═══════════════════════════════════════════════════════════ */ body .nbc-cert-svg-frame { stroke: #FD6929; fill: #FFF4EC; } body .nbc-cert-svg-dash { stroke: #F0A17B; } body .nbc-cert-svg-dot { fill: #FD6929; } /* ═══════════════════════════════════════════════════════════ * Кнопки корзины витрины * * Их цвет задаёт модуль «Стили витрины» опциями nbc_style_btn_* * (см. class-nbc-admin-styles.php) — значения выставлены в базе, * фирменный оранжевый с белым текстом. Здесь добиваем то, что * в ядре зашито мимо этих опций. * ═══════════════════════════════════════════════════════════ */ body .nbc-mobile-cart-sum { color: #FFFFFF; } body .nbc-mobile-cart-btn svg { stroke: #FFFFFF; } /* ═══════════════════════════════════════════════════════════ * Витрина внутри страницы, а не на всю страницу * * Ядро рисует витрину на отдельной странице, где выше и ниже неё * ничего нет, и низ боковой корзины там прибит к низу окна * (position: fixed). На главной выше витрины стоит hero, ниже — * карта и подвал, и эта плашка «Итого / Оформить заказ» висела * поверх них обоих. * * Сажаем её на место: колонка корзины и так липкая и ограничена * по высоте, а список товаров внутри прокручивается — статичный * низ сам встаёт под список и не вылезает за витрину. * ═══════════════════════════════════════════════════════════ */ body .nbc-sidebar-cart-footer { position: static; width: auto; } /* Подвал сайта — поверх корзины, а не под ней */ body .elementor-location-footer, body.pif-order-page footer { position: relative; z-index: 60; } /* ═══════════════════════════════════════════════════════════ * Карточка товара * ═══════════════════════════════════════════════════════════ */ /* Цена, КБЖУ и название упирались в края карточки */ body .nbc-product-info { padding: 12px 14px 14px; } /* Плюс в кружке стоял ниже центра: кнопка рисует его текстом, а «+» в шрифте сидит выше базовой линии несимметрично. Рисуем крест из псевдоэлементов — он центрируется по геометрии кружка и не зависит от шрифта. */ body .nbc-img-add-btn { font-size: 0; line-height: 0; position: absolute; } body .nbc-img-add-btn::before, body .nbc-img-add-btn::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; } body .nbc-img-add-btn::before { width: 14px; height: 2px; transform: translate(-50%, -50%); } body .nbc-img-add-btn::after { width: 2px; height: 14px; transform: translate(-50%, -50%); } /* ═══════════════════════════════════════════════════════════ * Личный кабинет: чата поддержки нет * * Раздел «Помощь» в ядре заканчивается заглушкой: строка «задайте его * нам в чате» и кнопка «Начать чат», которая показывает alert * «Чат поддержки — скоро». Обещать гостю то, чего нет, не будем. * Сама кнопка «Задать вопрос» в сайдбаре ведёт на телефон — * см. PIF_Core::account_ask_url(). * * Когда чат поднимут — снять это правило и фильтр в PIF_Core. * ═══════════════════════════════════════════════════════════ */ body .nbc-faq-hint, body .nbc-faq-ask { display: none; } /* «Задать вопрос» — белым по оранжевому */ body .nbc-account-sidebar .nbc-sidebar-ask, body .nbc-account-sidebar .nbc-sidebar-bottom .nbc-sidebar-item { background: #FD6929; color: #FFFFFF; text-decoration: none; } body .nbc-account-sidebar .nbc-sidebar-ask:hover, body .nbc-account-sidebar .nbc-sidebar-bottom .nbc-sidebar-item:hover { background: #E2551A; color: #FFFFFF; } body .nbc-account-sidebar .nbc-sidebar-bottom .nbc-sidebar-icon, body .nbc-account-sidebar .nbc-sidebar-bottom .nbc-sidebar-icon svg, body .nbc-account-sidebar .nbc-sidebar-bottom .nbc-sidebar-label { color: #FFFFFF; background: transparent; stroke: currentColor; } /* ═══════════════════════════════════════════════════════════ * Модалка «Нужны приборы?» * * Кнопка была жёлтым градиентом ядра, иконка — фиолетовой: * оба цвета мимо палитры. * ═══════════════════════════════════════════════════════════ */ body .nbc-cutlery-popup-pay { background: #FD6929; background-image: none; color: #FFFFFF; } body .nbc-cutlery-popup-pay:hover { background: #E2551A; opacity: 1; } body .nbc-cutlery-popup-icon { color: #FD6929; } /* Реквизиты в подвале Elementor — шорткод [pif_requisites] */ .pif-requisites { line-height: 1.6; }