Fix: убран логотип; фон и акцент только из брендбука; переопределения Bootstrap

Co-authored-by: Cursor <cursoragent@cursor.com>

HISTORY.md

@@ -1,5 +1,20 @@
 # История изменений ERP WaterSurf
 
+## 2025-02-25 20:45 UTC – Логотип убран; дизайн строго по брендбуку
+
+**Проблема**: Логотип в шапке был вставлен некорректно; визуально тема не отличалась от дефолтной — цвета и шрифты не применялись.
+
+**Решение**:
+- Логотип из шапки убран, в навбаре снова текст «WaterSurf ERP».
+- Файл логотипа удалён из `static/images/`.
+- Фон страницы и поверхностей задан только основными цветами бренда: Black #0A121D; границы — Gray 04 #617E92; текст — Gray 01 #F5F9FD, Gray 03 #B1C7D7, Gray 04 #617E92.
+- Ключевой акцент взят только из дополнительных цветов: Blue (02) #34AFE3, при наведении Blue (03) #00868F.
+- Добавлены переопределения Bootstrap с !important для body, main, кнопок, полей ввода, таблиц и типографики, чтобы гарантированно применялись Geologica и палитра брендбука.
+
+**Изменения**: base.html (удалён img логотипа), theme.css (палитра только из брендбука, акцент из дополнительных, переопределения Bootstrap), удалён app/static/images/watersurf-logo.png.
+
+---
+
 ## 2025-02-25 20:15 UTC – Стили по корпоративному брендбуку и логотип
 
 **Проблема**: Нужно привести интерфейс в соответствие с корпоративным брендбуком WaterSurf и использовать логотип компании.

app/static/css/theme.css

@@ -1,29 +1,27 @@
-/* ERP WaterSurf — стили по корпоративному брендбуку */
+/* ERP WaterSurf — только цвета и шрифты из брендбука */
 
-/* Базовые цвета брендбука */
+/* Основные цвета бренда (базовые): White, Gray 01–04, Black */
 :root {
   --ws-white: #FFFFFF;
   --ws-gray-01: #F5F9FD;
   --ws-gray-02: #DCE7EF;
   --ws-gray-03: #B1C7D7;
   --ws-gray-04: #617E92;
-  /* Базовый цвет — глубина, стабильность (тёмная тема) */
   --ws-black: #0A121D;
-  /* Ключевой цвет бренда — динамика, энергия */
-  --ws-accent: #0DADBB;
-  --ws-accent-hover: #34AFE3;
-  --ws-accent-light: #E3F7FF;
-  /* Дополнительные: опасность, успех */
-  --ws-danger: #FF3A20;
-  --ws-danger-dark: #AA1400;
-  --ws-success: #13AD53;
-  /* Поверхности тёмной темы на базе --ws-black */
+  /* Дополнительные цвета бренда — только для акцента и состояний */
+  --ws-accent: #34AFE3;        /* Blue (02) — дополнительный */
+  --ws-accent-hover: #00868F;  /* Blue (03) — дополнительный */
+  --ws-accent-light: #E3F7FF;  /* Blue (01) */
+  --ws-danger: #FF3A20;        /* Red (02) */
+  --ws-danger-dark: #AA1400;   /* Red (03) */
+  --ws-success: #13AD53;       /* Green (02) */
+  /* Фон страницы и поверхностей — только из основных */
   --ws-bg-page: #0A121D;
-  --ws-bg-surface: #0f1823;
-  --ws-bg-elevated: #151d2b;
-  --ws-bg-hover: #1a2435;
-  --ws-border: #2a3647;
-  --ws-border-focus: #0DADBB;
+  --ws-bg-surface: #0A121D;
+  --ws-bg-elevated: #0A121D;
+  --ws-bg-hover: #0f1823;
+  --ws-border: #617E92;
+  --ws-border-focus: #34AFE3;
   --ws-text: #F5F9FD;
   --ws-text-muted: #B1C7D7;
   --ws-text-secondary: #617E92;
@@ -35,28 +33,31 @@
   --ws-font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
-* {
-  box-sizing: border-box;
-}
-
+/* Жёсткое переопределение Bootstrap: фон и шрифт по брендбуку */
 html {
   scroll-behavior: smooth;
+  background: var(--ws-bg-page) !important;
 }
 
 body {
-  background: var(--ws-bg-page);
-  color: var(--ws-text);
-  font-family: var(--ws-font);
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 1.5;
-  letter-spacing: -0.02em;
+  background: var(--ws-bg-page) !important;
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
+  font-weight: 300 !important;
+  font-size: 16px !important;
+  line-height: 1.5 !important;
+  letter-spacing: -0.02em !important;
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
 }
 
-/* Типографика по масштабу брендбука: p3 16/24 -2% для основного текста */
+* {
+  box-sizing: border-box;
+}
+
+/* Типографика: Geologica, веса по брендбуку */
 .ws-page-title {
+  font-family: var(--ws-font) !important;
   font-size: 24px;
   line-height: 1.25;
   letter-spacing: -0.02em;
@@ -66,6 +67,7 @@ body {
 }
 
 .ws-form-section-title {
+  font-family: var(--ws-font) !important;
   font-size: 20px;
   line-height: 1.3;
   letter-spacing: -0.02em;
@@ -74,76 +76,71 @@ body {
   color: var(--ws-text);
 }
 
-/* Навбар */
+/* Навбар — без лого, только текст */
 .navbar-ws {
   background: var(--ws-bg-surface) !important;
-  border-bottom: 1px solid var(--ws-border);
+  border-bottom: 1px solid var(--ws-border) !important;
   padding: 0.5rem 0;
 }
 
 .navbar-ws .navbar-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
   color: var(--ws-text) !important;
-  font-weight: 700;
-  font-size: 1.1rem;
-  letter-spacing: -0.02em;
-}
-
-.navbar-ws .navbar-brand img {
-  height: 36px;
-  width: auto;
-  object-fit: contain;
+  font-family: var(--ws-font) !important;
+  font-weight: 700 !important;
+  font-size: 1.1rem !important;
+  letter-spacing: -0.02em !important;
 }
 
 .navbar-ws .navbar-brand:hover {
   color: var(--ws-accent) !important;
 }
 
-.navbar-ws .navbar-brand:hover img {
-  opacity: 0.95;
-}
-
 .navbar-ws .nav-link {
   color: var(--ws-text-muted) !important;
+  font-family: var(--ws-font) !important;
   border-radius: var(--ws-radius-sm);
   padding: 0.4rem 0.75rem !important;
-  font-weight: 400;
+  font-weight: 300;
 }
 
 .navbar-ws .nav-link:hover {
   color: var(--ws-text) !important;
-  background: var(--ws-bg-hover);
+  background: var(--ws-bg-hover) !important;
 }
 
 .navbar-ws .dropdown-menu {
-  background: var(--ws-bg-elevated);
-  border: 1px solid var(--ws-border);
+  background: var(--ws-bg-surface) !important;
+  border: 1px solid var(--ws-border) !important;
   border-radius: var(--ws-radius);
   box-shadow: var(--ws-shadow);
   padding: 0.25rem;
 }
 
 .navbar-ws .dropdown-item {
-  color: var(--ws-text);
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
   border-radius: var(--ws-radius-sm);
 }
 
 .navbar-ws .dropdown-item:hover {
-  background: var(--ws-bg-hover);
-  color: var(--ws-text);
+  background: var(--ws-bg-hover) !important;
+  color: var(--ws-text) !important;
 }
 
 .navbar-ws .navbar-text {
-  color: var(--ws-text-muted);
+  color: var(--ws-text-muted) !important;
+  font-family: var(--ws-font) !important;
   font-size: 14px;
   letter-spacing: -0.01em;
 }
 
 .navbar-ws .navbar-toggler {
-  border-color: var(--ws-border);
-  color: var(--ws-text);
+  border-color: var(--ws-border) !important;
+  color: var(--ws-text) !important;
+}
+
+.navbar-ws .navbar-toggler-icon {
+  filter: invert(1);
 }
 
 /* Контент */
@@ -151,12 +148,13 @@ body {
   max-width: 1200px;
   margin: 0 auto;
   padding: 1.5rem 1rem 3rem;
+  background: var(--ws-bg-page) !important;
 }
 
-/* Карточки */
+/* Карточки — поверхности из основных цветов, граница Gray 04 */
 .ws-card {
-  background: var(--ws-bg-surface);
-  border: 1px solid var(--ws-border);
+  background: var(--ws-bg-surface) !important;
+  border: 1px solid var(--ws-border) !important;
   border-radius: var(--ws-radius);
   padding: 1.25rem;
   margin-bottom: 1rem;
@@ -176,31 +174,33 @@ body {
   overflow-x: auto;
   border-radius: var(--ws-radius);
   border: 1px solid var(--ws-border);
+  background: var(--ws-bg-surface) !important;
 }
 
 .ws-table {
   width: 100%;
   border-collapse: collapse;
-  color: var(--ws-text);
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
 }
 
 .ws-table th,
 .ws-table td {
   padding: 0.75rem 1rem;
   text-align: left;
-  border-bottom: 1px solid var(--ws-border);
+  border-bottom: 1px solid var(--ws-border) !important;
 }
 
 .ws-table th {
-  background: var(--ws-bg-elevated);
-  font-weight: 500;
+  background: var(--ws-bg-elevated) !important;
+  font-weight: 500 !important;
   font-size: 14px;
   letter-spacing: -0.01em;
-  color: var(--ws-text-secondary);
+  color: var(--ws-text-secondary) !important;
 }
 
 .ws-table tbody tr:hover {
-  background: var(--ws-bg-hover);
+  background: var(--ws-bg-hover) !important;
 }
 
 .ws-table tbody tr:last-child td {
@@ -212,68 +212,71 @@ body {
 }
 
 .ws-table .ws-link {
-  color: var(--ws-accent);
+  color: var(--ws-accent) !important;
   text-decoration: none;
   font-size: 14px;
 }
 
 .ws-table .ws-link:hover {
-  color: var(--ws-accent-hover);
+  color: var(--ws-accent-hover) !important;
   text-decoration: underline;
 }
 
 .ws-table .ws-link-danger {
-  color: var(--ws-danger);
+  color: var(--ws-danger) !important;
 }
 
 .ws-table .ws-link-danger:hover {
-  color: var(--ws-danger-dark);
+  color: var(--ws-danger-dark) !important;
 }
 
-/* Кнопки — ключевой цвет бренда */
+/* Кнопки — акцент только из дополнительных (Blue 02) */
 .btn-ws-primary {
-  background: var(--ws-accent);
-  color: var(--ws-black);
-  border: none;
+  background: var(--ws-accent) !important;
+  color: var(--ws-black) !important;
+  border: none !important;
   border-radius: var(--ws-radius-sm);
   padding: 0.5rem 1rem;
-  font-weight: 500;
+  font-family: var(--ws-font) !important;
+  font-weight: 500 !important;
   font-size: 14px;
   letter-spacing: -0.01em;
 }
 
 .btn-ws-primary:hover {
-  background: var(--ws-accent-hover);
-  color: var(--ws-black);
+  background: var(--ws-accent-hover) !important;
+  color: var(--ws-white) !important;
 }
 
 .btn-ws-secondary {
-  background: transparent;
-  color: var(--ws-text-muted);
-  border: 1px solid var(--ws-border);
+  background: transparent !important;
+  color: var(--ws-text-muted) !important;
+  border: 1px solid var(--ws-border) !important;
   border-radius: var(--ws-radius-sm);
   padding: 0.5rem 1rem;
+  font-family: var(--ws-font) !important;
   font-size: 14px;
 }
 
 .btn-ws-secondary:hover {
-  background: var(--ws-bg-hover);
-  color: var(--ws-text);
-  border-color: var(--ws-gray-04);
+  background: var(--ws-bg-hover) !important;
+  color: var(--ws-text) !important;
+  border-color: var(--ws-gray-04) !important;
 }
 
 .btn-ws-danger {
-  background: var(--ws-danger-bg);
-  color: var(--ws-danger);
-  border: 1px solid var(--ws-danger);
+  background: var(--ws-danger-bg) !important;
+  color: var(--ws-danger) !important;
+  border: 1px solid var(--ws-danger) !important;
   border-radius: var(--ws-radius-sm);
   padding: 0.5rem 1rem;
+  font-family: var(--ws-font) !important;
   font-size: 14px;
 }
 
 .btn-ws-danger:hover {
-  background: var(--ws-danger);
-  color: var(--ws-white);
+  background: var(--ws-danger) !important;
+  color: var(--ws-white) !important;
 }
 
 .ws-btn-group {
@@ -283,13 +286,14 @@ body {
   align-items: center;
 }
 
-/* Формы */
+/* Формы — шрифт Geologica, границы из основных */
 .ws-form-group {
   margin-bottom: 1rem;
 }
 
 .ws-form-group label {
   display: block;
+  font-family: var(--ws-font) !important;
   font-weight: 500;
   font-size: 14px;
   letter-spacing: -0.01em;
@@ -303,20 +307,20 @@ body {
   width: 100%;
   max-width: 400px;
   padding: 0.5rem 0.75rem;
-  background: var(--ws-bg-page);
-  border: 1px solid var(--ws-border);
+  background: var(--ws-black) !important;
+  border: 1px solid var(--ws-border) !important;
   border-radius: var(--ws-radius-sm);
-  color: var(--ws-text);
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
   font-size: 15px;
-  font-family: var(--ws-font);
 }
 
 .ws-form-group input:focus,
 .ws-form-group select:focus,
 .ws-form-group textarea:focus {
-  outline: none;
-  border-color: var(--ws-border-focus);
-  box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.25);
+  outline: none !important;
+  border-color: var(--ws-border-focus) !important;
+  box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important;
 }
 
 .ws-form-group input::placeholder,
@@ -331,18 +335,18 @@ body {
   width: 100%;
   max-width: 100%;
   padding: 0.5rem 0.75rem;
-  background: var(--ws-bg-page);
-  border: 1px solid var(--ws-border);
+  background: var(--ws-black) !important;
+  border: 1px solid var(--ws-border) !important;
   border-radius: var(--ws-radius-sm);
-  color: var(--ws-text);
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
   font-size: 15px;
-  font-family: var(--ws-font);
 }
 
 .ws-form-login input:focus {
-  outline: none;
-  border-color: var(--ws-border-focus);
-  box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.25);
+  outline: none !important;
+  border-color: var(--ws-border-focus) !important;
+  box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important;
 }
 
 .ws-text-danger {
@@ -364,25 +368,26 @@ body {
   border-radius: var(--ws-radius-sm);
   margin-bottom: 1rem;
   border: 1px solid transparent;
+  font-family: var(--ws-font) !important;
 }
 
 .ws-alert-success {
-  background: var(--ws-success-bg);
-  color: var(--ws-success);
-  border-color: rgba(19, 173, 83, 0.3);
+  background: var(--ws-success-bg) !important;
+  color: var(--ws-success) !important;
+  border-color: rgba(19, 173, 83, 0.3) !important;
 }
 
 .ws-alert-error,
 .ws-alert-danger {
-  background: var(--ws-danger-bg);
-  color: var(--ws-danger);
-  border-color: rgba(255, 58, 32, 0.3);
+  background: var(--ws-danger-bg) !important;
+  color: var(--ws-danger) !important;
+  border-color: rgba(255, 58, 32, 0.3) !important;
 }
 
 .ws-alert-warning {
-  background: rgba(255, 136, 0, 0.12);
-  color: #FF8800;
-  border-color: rgba(255, 136, 0, 0.3);
+  background: rgba(255, 136, 0, 0.12) !important;
+  color: #FF8800 !important;
+  border-color: rgba(255, 136, 0, 0.3) !important;
 }
 
 .ws-alert .btn-close {
@@ -390,15 +395,14 @@ body {
   opacity: 0.7;
 }
 
-/* Пустое состояние */
 .ws-empty {
   text-align: center;
   padding: 2rem 1rem;
   color: var(--ws-text-secondary);
+  font-family: var(--ws-font) !important;
   font-size: 15px;
 }
 
-/* Логин */
 .ws-login-card {
   max-width: 380px;
   margin: 2rem auto;
@@ -406,52 +410,55 @@ body {
 }
 
 .ws-login-title {
+  font-family: var(--ws-font) !important;
   font-size: 24px;
   line-height: 1.25;
   letter-spacing: -0.02em;
   font-weight: 700;
   margin-bottom: 1.5rem;
   text-align: center;
+  color: var(--ws-text);
 }
 
-/* Главная */
 .ws-hero {
   padding: 2rem 0;
   text-align: center;
 }
 
 .ws-hero h1 {
+  font-family: var(--ws-font) !important;
   font-size: 32px;
   line-height: 1.25;
   letter-spacing: -0.02em;
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: var(--ws-text);
 }
 
 .ws-hero p {
   color: var(--ws-text-muted);
+  font-family: var(--ws-font) !important;
   font-size: 16px;
   line-height: 1.5;
 }
 
-/* Подсказка удаления */
 .ws-confirm-text {
   color: var(--ws-text-muted);
   margin-bottom: 1.25rem;
 }
 
-/* Таблица в форме заказа — инпуты */
+/* Таблица в форме заказа */
 .ws-table input.form-control,
 .ws-table select.form-select,
 .ws-table input[type="text"],
 .ws-table input[type="number"],
 .ws-table select {
-  background: var(--ws-bg-page);
-  border: 1px solid var(--ws-border);
-  color: var(--ws-text);
+  background: var(--ws-black) !important;
+  border: 1px solid var(--ws-border) !important;
+  color: var(--ws-text) !important;
   padding: 0.4rem 0.5rem;
+  font-family: var(--ws-font) !important;
   font-size: 14px;
-  font-family: var(--ws-font);
 }
 
 .ws-form-card .ws-form-group input,
@@ -468,12 +475,52 @@ body {
 
 .ws-table input:focus,
 .ws-table select:focus {
-  border-color: var(--ws-border-focus);
-  box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.2);
+  border-color: var(--ws-border-focus) !important;
+  box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.2) !important;
 }
 
-/* Списки документов — выравнивание чисел */
 .ws-table .ws-num {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
+
+/* Переопределение Bootstrap: кнопки и инпуты в контенте */
+.ws-main .btn-primary {
+  background: var(--ws-accent) !important;
+  border-color: var(--ws-accent) !important;
+  color: var(--ws-black) !important;
+  font-family: var(--ws-font) !important;
+}
+
+.ws-main .btn-primary:hover {
+  background: var(--ws-accent-hover) !important;
+  border-color: var(--ws-accent-hover) !important;
+  color: var(--ws-white) !important;
+}
+
+.ws-main .form-control,
+.ws-main .form-select {
+  background: var(--ws-black) !important;
+  border-color: var(--ws-border) !important;
+  color: var(--ws-text) !important;
+  font-family: var(--ws-font) !important;
+}
+
+.ws-main .form-control:focus,
+.ws-main .form-select:focus {
+  border-color: var(--ws-border-focus) !important;
+  box-shadow: 0 0 0 0.25rem rgba(52, 175, 227, 0.25) !important;
+}
+
+.ws-main .form-control::placeholder {
+  color: var(--ws-text-secondary);
+}
+
+.ws-main h1, .ws-main h2, .ws-main h3, .ws-main h4 {
+  font-family: var(--ws-font) !important;
+  color: var(--ws-text) !important;
+}
+
+.ws-main p, .ws-main label, .ws-main td, .ws-main th, .ws-main li {
+  font-family: var(--ws-font) !important;
+}

app/templates/base.html

@@ -15,7 +15,7 @@
 <body>
   <nav class="navbar navbar-expand-lg navbar-dark navbar-ws">
     <div class="container-fluid">
-      <a class="navbar-brand" href="{% url 'users:home' %}"><img src="{% static 'images/watersurf-logo.png' %}" alt="WaterSurf"> ERP</a>
+      <a class="navbar-brand" href="{% url 'users:home' %}">WaterSurf ERP</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Меню">
         <span class="navbar-toggler-icon"></span>
       </button>