From 3de138ff4171d957a2177c20f791fc575cc9a559 Mon Sep 17 00:00:00 2001 From: Kirik Date: Tue, 24 Mar 2026 00:44:57 +0100 Subject: [PATCH] UX overhaul: glassmorphism nav/footer, forms redesign, mobile fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Navigation: - Nav bar pill shape (border-radius: 100px), dark glass style - Icons added to all nav items (FA4 outline variants, fixed-width alignment) - Footer hidden on all devices (nav panel covers mobile) - Footer nav icons + text added before removal Forms (ask.md, plan.md): - Full glassmorphism redesign: rounded card, blur backdrop - Input borders visible (#b8c4ce), focus ring, proper placeholder colors - Select: self-contained CSS, no backdrop-filter conflict, arrow fixed - Submit button: gradient with shadow - File upload button: .file-btn class, fa-arrow-down icon - form-note styled as info callout with left border + ⓘ icon - Footnotes sup.fn: circular badge, baseline positioning (no line-height jump) - Footnote ¹ on both consent checkboxes, accordion = full legal text - Dark mode: opaque dark card (rgba 22,26,34,0.88), proper contrast - Dark mode success/error messages adapted - Double checkmark bug fixed (removed ::after overlay) - Italic removed from privacy-details text Layout: - #main rounded corners (20px all sides) + margin for visibility - Post card images rounded (border-radius: 10px) - Page titles: uppercase removed, font-weight 900, left-aligned - "Подробнее" button hidden on post cards - iOS background-attachment: fixed bug fixed (scroll on mobile) - Pagination mobile: counter restored, buttons above footer Content: - Page titles uncommented in front matter (gallery, map, ask, plan) - Duplicate rawhtml title blocks removed Co-Authored-By: Claude Sonnet 4.6 --- content/ask.md | 67 +- content/plan.md | 90 +-- data/en/nav.yaml | 6 +- data/ru/nav.yaml | 6 +- layouts/partials/nav.html | 40 ++ static/css/adaptive-background.css | 5 +- static/css/footer-nav.css | 161 ++--- static/css/forms.css | 618 +++++++++++++----- static/css/mobile-menu.css | 30 +- static/css/nav-background.css | 93 ++- static/css/page-spacing.css | 54 +- static/css/pagination-info.css | 152 +++-- static/css/typography-improvements.css | 69 +- static/test_encryption.html | 104 --- .../layouts/partials/footer/index.html | 10 +- 15 files changed, 964 insertions(+), 541 deletions(-) create mode 100644 layouts/partials/nav.html delete mode 100755 static/test_encryption.html diff --git a/content/ask.md b/content/ask.md index d3de6a8..16130be 100755 --- a/content/ask.md +++ b/content/ask.md @@ -1,16 +1,12 @@ +++ -# title = 'Спросить' +title = 'Хочу поехать' slug = 'ask' disableComments = true +++ {{< rawhtml >}} -

Задать вопрос

+

Есть вопрос или хотите предложить маршрут — напишите нам. Смотреть календарь поездок →

{{< /rawhtml >}} -Если у Вас есть вопрос или Вы хотите предложить свою локацию / тур для поездки, напишите в форме ниже. Мы вам с радостью ответим! - -**Календарь поездок** можно посмотреть [здесь](/plan/) - {{< rawhtml >}}
@@ -57,12 +53,8 @@ disableComments = true // Загружаем скрипт шифрования const script = document.createElement('script'); script.src = '/js/encryption.js'; - script.onload = function() { - console.log('✅ Скрипт шифрования загружен для формы ask'); - }; - script.onerror = function() { - console.error('❌ Ошибка загрузки скрипта шифрования'); - }; + script.onload = function() {}; + script.onerror = function() {}; document.head.appendChild(script); }); @@ -83,12 +75,9 @@ disableComments = true body: formData }) .then(response => { - console.log('HTTP статус:', response.status); - console.log('Content-Type:', response.headers.get('content-type')); return response.text(); }) .then(text => { - console.log('Ответ сервера:', text); try { const data = JSON.parse(text); return data; @@ -147,19 +136,19 @@ disableComments = true
-

* Укажите email или Telegram ник (одно из двух обязательно)

+

Укажите email или Telegram ник (одно из двух обязательно)

@@ -175,7 +164,7 @@ disableComments = true - Я согласен на обработку персональных данных в соответствии с ФЗ №152 1 + Я согласен на обработку персональных данных в соответствии с ФЗ №152 1

Данные будут обрабатываться для ответа на ваш вопрос.

Согласие действует 1 месяц. Отзыв согласия: sleep-trip@ya.ru

@@ -191,26 +180,22 @@ disableComments = true
{{< /rawhtml >}} ---- - -### Пояснения к форме: - -1 **Согласие на обработку персональных данных:** - -Заполнение «чек-бокса» (проставление «галочки»/ «веб-метки» на сайте sleeptrip.ru в графе «Я согласен на обработку персональных данных») и нажатие соответствующей кнопки и (или) направление персональных данных (фамилия, имя, телефон, имя (ник) в Телеграм) в ответном письме на адрес: sleep-trip@ya.ru является подтверждением Вашего согласия на обработку персональных данных либо с целью получения разрешения на полёты беспилотного воздушного судна (БВС), либо с целью ответа на вопрос, заданный на сайте sleeptrip.ru. - -Предоставленные персональные данные будут обрабатываться в соответствии с положениями Федерального закона Российской Федерации №152-ФЗ от 27.07.2006 «О персональных данных». - -Заявление об уточнении персональных данных, отзыве настоящего согласия может быть направлено по электронной почте по адресу: sleep-trip@ya.ru. - -Я выражаю свое согласие на обработку, включая: сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (предоставление, доступ), блокирование, обезличивание, удаление, уничтожение, своих персональных данных (в случае предоставления мной) Оператору (владельцу сайта sleeptrip.ru) для целей: - -- обеспечения получения разрешения на полёты БВС и направления мне информационных сообщений о статусе получения такого разрешения; -- ответа на вопрос, заданный на сайте sleeptrip.ru. - -Я согласен и разрешаю Оператору обрабатывать мои персональные данные с использованием средств автоматизации или без использования таких средств (смешанная обработка). - -Я согласен с тем, что мои персональные данные будут переданы третьим лицам – Единой системе организации воздушного движения, сервису "Небосвод" (skyarc.ru) или сервису СППИ (https://sppi.ivprf.ru), а также сотрудникам полиции (в случае взаимодействия с ними на местности) для реализации целей обработки персональных данных - получения разрешения на полёты БВС. Без передачи данных указанным организациям (сервисам) реализация целей обработки персональных данных будет невозможна. - -Настоящее Согласие действует до момента достижения целей обработки или отзыва согласия на обработку, но не более 1 (одного) месяца с момента предоставления Согласия. +{{< rawhtml >}} +
+1 Постановка «галочки» в чекбоксе является подтверждением вашего согласия — читать полный текст (ФЗ №152) +
+

Заполнение «чек-бокса» (проставление «галочки»/«веб-метки» на сайте sleeptrip.ru в графе «Я согласен на обработку персональных данных») и нажатие соответствующей кнопки и (или) направление персональных данных (фамилия, имя, телефон, имя (ник) в Телеграм) в ответном письме на адрес: sleep-trip@ya.ru является подтверждением Вашего согласия на обработку персональных данных либо с целью получения разрешения на полёты беспилотного воздушного судна (БВС), либо с целью ответа на вопрос, заданный на сайте sleeptrip.ru.

+

Предоставленные персональные данные будут обрабатываться в соответствии с положениями Федерального закона Российской Федерации №152-ФЗ от 27.07.2006 «О персональных данных».

+

Заявление об уточнении персональных данных, отзыве настоящего согласия может быть направлено по электронной почте по адресу: sleep-trip@ya.ru.

+

Я выражаю свое согласие на обработку, включая: сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (предоставление, доступ), блокирование, обезличивание, удаление, уничтожение, своих персональных данных (в случае предоставления мной) Оператору (владельцу сайта sleeptrip.ru) для целей:

+
    +
  • обеспечения получения разрешения на полёты БВС и направления мне информационных сообщений о статусе получения такого разрешения;
    • +
  • ответа на вопрос, заданный на сайте sleeptrip.ru.
    • +
+

Я согласен и разрешаю Оператору обрабатывать мои персональные данные с использованием средств автоматизации или без использования таких средств (смешанная обработка).

+

Я согласен с тем, что мои персональные данные будут переданы третьим лицам – Единой системе организации воздушного движения, сервису «Небосвод» (skyarc.ru) или сервису СППИ (sppi.ivprf.ru), а также сотрудникам полиции (в случае взаимодействия с ними на местности) для реализации целей обработки персональных данных — получения разрешения на полёты БВС. Без передачи данных указанным организациям реализация целей обработки персональных данных будет невозможна.

+

Настоящее Согласие действует до момента достижения целей обработки или отзыва согласия на обработку, но не более 1 (одного) месяца с момента предоставления Согласия.

+
+
+{{< /rawhtml >}} diff --git a/content/plan.md b/content/plan.md index 77076ab..5e7a7eb 100755 --- a/content/plan.md +++ b/content/plan.md @@ -1,11 +1,9 @@ +++ +title = 'Предстоящие поездки' slug = 'plan' -# description = 'Выберите поездку из календаря' disableComments = true +++ {{< rawhtml >}} -

Предстоящие поездки

-
@@ -76,29 +74,20 @@ disableComments = true // Загружаем скрипт шифрования const encryptionScript = document.createElement('script'); encryptionScript.src = '/js/encryption.js'; - encryptionScript.onload = function() { - console.log('✅ Скрипт шифрования загружен для формы plan'); - }; - encryptionScript.onerror = function() { - console.error('❌ Ошибка загрузки скрипта шифрования'); - }; + encryptionScript.onload = function() {}; + encryptionScript.onerror = function() {}; document.head.appendChild(encryptionScript); // Загружаем скрипт динамического заполнения поездок const tripScript = document.createElement('script'); tripScript.src = '/js/trip-form-loader.js'; tripScript.onload = function() { - console.log('✅ Скрипт загрузчика поездок загружен'); - // Принудительно инициализируем после загрузки скрипта if (typeof TripFormLoader !== 'undefined') { window.tripFormLoader = new TripFormLoader(); window.tripFormLoader.populateTripsDropdown(); - console.log('🔄 Принудительная инициализация загрузчика поездок'); } }; - tripScript.onerror = function() { - console.error('❌ Ошибка загрузки скрипта поездок'); - }; + tripScript.onerror = function() {}; document.head.appendChild(tripScript); }); @@ -119,12 +108,9 @@ disableComments = true body: formData }) .then(response => { - console.log('HTTP статус:', response.status); - console.log('Content-Type:', response.headers.get('content-type')); - return response.text(); // Сначала получаем как текст + return response.text(); }) .then(text => { - console.log('Ответ сервера:', text); try { const data = JSON.parse(text); return data; @@ -188,19 +174,19 @@ disableComments = true
-

* Укажите email или Telegram ник (одно из двух обязательно)

+

Укажите email или Telegram ник (одно из двух обязательно)

- - + +
- +
- - + +
@@ -215,7 +201,7 @@ disableComments = true
@@ -227,7 +213,7 @@ disableComments = true - Я выражаю своё согласие на обработку персональных данных + Я выражаю своё согласие на обработку персональных данных 1

Персональные данные обрабатываются исключительно для получения разрешения на полёты БВС. Согласие действует 1 месяц. Отзыв согласия – заявление на sleep-trip@ya.ru

@@ -240,7 +226,7 @@ disableComments = true - Мне есть 18 лет 2 + Мне есть 18 лет 2 @@ -252,31 +238,23 @@ disableComments = true {{< /rawhtml >}} ---- - -### Пояснения к форме: - -1 **Согласие на обработку персональных данных:** - -Заполнение «чек-бокса» (проставление «галочки»/ «веб-метки» на сайте sleeptrip.ru в графе «Я согласен на обработку персональных данных») и нажатие соответствующей кнопки и (или) направление персональных данных (фамилия, имя, телефон, имя (ник) в Телеграм) в ответном письме на адрес: sleep-trip@ya.ru является подтверждением Вашего согласия на обработку персональных данных либо с целью получения разрешения на полёты беспилотного воздушного судна (БВС), либо с целью ответа на вопрос, заданный на сайте sleeptrip.ru. - -Предоставленные персональные данные будут обрабатываться в соответствии с положениями Федерального закона Российской Федерации №152-ФЗ от 27.07.2006 «О персональных данных». - -Заявление об уточнении персональных данных, отзыве настоящего согласия может быть направлено по электронной почте по адресу: sleep-trip@ya.ru. - -
СОГЛАСИЕ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ
- -Я выражаю свое согласие на обработку, включая: сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (предоставление, доступ), блокирование, обезличивание, удаление, уничтожение, своих персональных данных (в случае предоставления мной) Оператору (владельцу сайта sleeptrip.ru) для целей: - -- обеспечения получения разрешения на полёты БВС и направления мне информационных сообщений о статусе получения такого разрешения; -- ответа на вопрос, заданный на сайте sleeptrip.ru. - -Я согласен и разрешаю Оператору обрабатывать мои персональные данные с использованием средств автоматизации или без использования таких средств (смешанная обработка). - -Я согласен с тем, что мои персональные данные будут переданы третьим лицам – Единой системе организации воздушного движения, сервису "Небосвод" (skyarc.ru) или сервису СППИ (https://sppi.ivprf.ru), а также сотрудникам полиции (в случае взаимодействия с ними на местности) для реализации целей обработки персональных данных - получения разрешения на полёты БВС. Без передачи данных указанным организациям (сервисам) реализация целей обработки персональных данных будет невозможна. - -Настоящее Согласие действует до момента достижения целей обработки или отзыва согласия на обработку, но не более 1 (одного) месяца с момента предоставления Согласия. - -2 **Подтверждение совершеннолетия:** Поставление отметки в данном поле подтверждает, что вам исполнилось 18 лет. - ---- +{{< rawhtml >}} +
+1 Постановка «галочки» в чекбоксе является подтверждением вашего согласия — читать полный текст (ФЗ №152) +
+

Заполнение «чек-бокса» (проставление «галочки»/«веб-метки» на сайте sleeptrip.ru в графе «Я согласен на обработку персональных данных») и нажатие соответствующей кнопки и (или) направление персональных данных (фамилия, имя, телефон, имя (ник) в Телеграм) в ответном письме на адрес: sleep-trip@ya.ru является подтверждением Вашего согласия на обработку персональных данных либо с целью получения разрешения на полёты беспилотного воздушного судна (БВС), либо с целью ответа на вопрос, заданный на сайте sleeptrip.ru.

+

Предоставленные персональные данные будут обрабатываться в соответствии с положениями Федерального закона Российской Федерации №152-ФЗ от 27.07.2006 «О персональных данных».

+

Заявление об уточнении персональных данных, отзыве настоящего согласия может быть направлено по электронной почте по адресу: sleep-trip@ya.ru.

+

СОГЛАСИЕ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ

+

Я выражаю свое согласие на обработку, включая: сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (предоставление, доступ), блокирование, обезличивание, удаление, уничтожение, своих персональных данных (в случае предоставления мной) Оператору (владельцу сайта sleeptrip.ru) для целей:

+
    +
  • обеспечения получения разрешения на полёты БВС и направления мне информационных сообщений о статусе получения такого разрешения;
    • +
  • ответа на вопрос, заданный на сайте sleeptrip.ru.
    • +
+

Я согласен и разрешаю Оператору обрабатывать мои персональные данные с использованием средств автоматизации или без использования таких средств (смешанная обработка).

+

Я согласен с тем, что мои персональные данные будут переданы третьим лицам – Единой системе организации воздушного движения, сервису «Небосвод» (skyarc.ru) или сервису СППИ (sppi.ivprf.ru), а также сотрудникам полиции (в случае взаимодействия с ними на местности) для реализации целей обработки персональных данных — получения разрешения на полёты БВС. Без передачи данных указанным организациям реализация целей обработки персональных данных будет невозможна.

+

Настоящее Согласие действует до момента достижения целей обработки или отзыва согласия на обработку, но не более 1 (одного) месяца с момента предоставления Согласия.

+
+
+

2 Отметка подтверждает, что участнику поездки исполнилось 18 лет.

+{{< /rawhtml >}} diff --git a/data/en/nav.yaml b/data/en/nav.yaml index 8b14a86..056b47c 100755 --- a/data/en/nav.yaml +++ b/data/en/nav.yaml @@ -1,13 +1,17 @@ items: - title: 'Хочу поехать' url: '/plan' + icon: 'fa-calendar-o' - title: 'Маршруты' url: '/map' + icon: 'fa-map-o' - title: 'Спросить' url: '/ask' - + icon: 'fa-envelope-o' + - title: 'Галерея' url: '/gallery' + icon: 'fa-picture-o' diff --git a/data/ru/nav.yaml b/data/ru/nav.yaml index 8b14a86..056b47c 100755 --- a/data/ru/nav.yaml +++ b/data/ru/nav.yaml @@ -1,13 +1,17 @@ items: - title: 'Хочу поехать' url: '/plan' + icon: 'fa-calendar-o' - title: 'Маршруты' url: '/map' + icon: 'fa-map-o' - title: 'Спросить' url: '/ask' - + icon: 'fa-envelope-o' + - title: 'Галерея' url: '/gallery' + icon: 'fa-picture-o' diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html new file mode 100644 index 0000000..81af80c --- /dev/null +++ b/layouts/partials/nav.html @@ -0,0 +1,40 @@ + +{{ $data := index .Site.Data .Site.Language.Lang }} +{{ $currentPage := .Page }} + diff --git a/static/css/adaptive-background.css b/static/css/adaptive-background.css index 25b8339..2b1853e 100755 --- a/static/css/adaptive-background.css +++ b/static/css/adaptive-background.css @@ -7,8 +7,9 @@ linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../../images/mobile4.webp') !important; background-size: cover; - background-position: center; - background-attachment: fixed; + background-position: center top; + /* iOS Safari не поддерживает background-attachment: fixed нормально */ + background-attachment: scroll; } } diff --git a/static/css/footer-nav.css b/static/css/footer-nav.css index ef4684c..af5b146 100755 --- a/static/css/footer-nav.css +++ b/static/css/footer-nav.css @@ -1,74 +1,87 @@ -/* Горизонтальное меню в футере */ -.footer-nav-links { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 2rem; -} - -.footer-nav-link { - display: flex; - flex-direction: column; - align-items: center; - padding: 0.75rem 1rem; - color: #ffffff; - text-decoration: none; - font-size: 0.85rem; - font-weight: 400; - transition: all 0.3s ease; - border-radius: 6px; - background: rgba(255, 255, 255, 0.05); - min-width: 80px; -} - -.footer-nav-link:hover { - color: #18bfef; - background: rgba(24, 191, 239, 0.1); - transform: translateY(-3px); - text-decoration: none; -} - -.footer-nav-link .icon { - font-size: 1.2rem; - margin-bottom: 0.4rem; - opacity: 0.9; -} - -.footer-nav-link:hover .icon { - opacity: 1; -} - -.footer-nav-link span { - color: #ffffff; - font-weight: 500; -} - -/* Адаптивность для мобильных */ -@media (max-width: 768px) { - .footer-nav-links { - gap: 1rem; - } - - .footer-nav-link { - padding: 0.6rem 0.8rem; - font-size: 0.8rem; - min-width: 70px; - } - - .footer-nav-link .icon { - font-size: 1rem; - margin-bottom: 0.3rem; - } -} - -/* Стиль для заголовка секции */ -#footer h3 { - font-size: 1.1rem; - margin-bottom: 1rem; - color: #ffffff; - font-weight: 600; -} \ No newline at end of file +/* Меняем светлый фон футера (#f5f5f5) на тёмный под стиль сайта */ +#footer { + background: rgba(0, 0, 0, 0.3) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-top: 1px solid rgba(255, 255, 255, 0.08) !important; + border-radius: 20px 20px 0 0 !important; +} + +/* Скрываем футер везде — навигация есть в #nav и мобильной панели */ +#footer { + display: none !important; +} + +/* Текст и заголовки в футере на тёмном фоне */ +#footer h3, +#footer p, +#footer a:not(.footer-nav-link) { + color: rgba(255, 255, 255, 0.5) !important; + border-bottom-color: transparent !important; +} + +#footer a:not(.footer-nav-link):hover { + color: rgba(255, 255, 255, 0.85) !important; +} + +/* Footer nav — icon left + text, единый стиль с #nav */ + +#footer .footer-nav-links { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 0; +} + +#footer .footer-nav-link { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.4rem; + padding: 0 1.3rem; + height: 3.5rem; + color: rgba(255, 255, 255, 0.75); + text-decoration: none; + border-bottom: none; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 0.78rem; + font-weight: 900; + letter-spacing: 0.07em; + text-transform: uppercase; + transition: color 0.2s ease, background 0.2s ease; +} + +#footer .footer-nav-link:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.1); + border-bottom: none; + text-decoration: none; +} + +#footer .footer-nav-link .icon { + font-size: 0.9rem; + color: inherit; + opacity: 0.7; + display: inline-block; + line-height: 1; + flex-shrink: 0; +} + +#footer .footer-nav-link:hover .icon { + opacity: 1; +} + +#footer .footer-nav-link span { + color: inherit; +} + +/* Мобильные: скрываем footer nav — есть боковое меню */ +@media (max-width: 736px) { + #footer .footer-nav-links { + display: none !important; + } +} diff --git a/static/css/forms.css b/static/css/forms.css index f0bc66e..2057cce 100755 --- a/static/css/forms.css +++ b/static/css/forms.css @@ -1,83 +1,112 @@ -/* Стили для форм обратной связи */ +/* Стили для форм обратной связи — glassmorphism 2025 */ .travel-form-container, .contact-form-container { - max-width: 600px; - margin: 2rem auto; - background: rgba(255, 255, 255, 0.98); - padding: 2.5rem; + max-width: 580px; + margin: 0 auto 2rem; + padding: 2.25rem 2.5rem; + background: rgba(255, 255, 255, 0.72); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); border-radius: 16px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04); } .travel-form, .contact-form { width: 100%; } +/* Снимаем uppercase темы внутри форм */ +.travel-form-container *, +.contact-form-container * { + text-transform: none; + letter-spacing: normal; +} + +/* Разделитель секций — только капитализация первой буквы */ +.travel-form-container .form-section-title, +.contact-form-container .form-section-title { + font-size: 0.72rem; + font-weight: 600; + color: #9aa3ad; + letter-spacing: 0.05em; + text-transform: uppercase; /* намеренно — tiny label */ +} + .form-group { margin-bottom: 1.8rem; } .form-group label { display: block; - margin-bottom: 0.75rem; - font-weight: 500; - color: #2c3e50; - font-size: 0.95rem; - line-height: 1.4; + margin-bottom: 0.6rem; + font-weight: 600; + color: #1e2d3d; + font-size: 0.88rem; + line-height: 1.45; + letter-spacing: 0.01em; } .form-group input, -.form-group select, .form-group textarea { width: 100%; - padding: 1rem; - border: 1px solid #e1e5e9; - border-radius: 12px; + padding: 0.85rem 1rem; + border: 1.5px solid #b8c4ce; + border-radius: 10px; font-size: 0.95rem; - background: #fafbfc; - transition: all 0.3s ease; + background: rgba(255, 255, 255, 0.92); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; box-sizing: border-box; font-family: inherit; - color: #2c3e50; + color: #1a252f; } +/* Select — полностью самодостаточное правило, без backdrop-filter */ .form-group select { width: 100%; - padding: 1.5rem 3.5rem 2.5rem 1rem; - border: 1px solid #e1e5e9; - border-radius: 12px; - font-size: 0.9rem; - background: white; - color: #333; + padding: 0.95rem 2.5rem 1rem 1rem; + border: 1.5px solid #b8c4ce; + border-radius: 10px; + font-size: 0.95rem; + background-color: rgba(255, 255, 255, 0.92); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.9rem center; + background-repeat: no-repeat; + background-size: 1.25rem 1.25rem; + color: #1a252f; font-family: inherit; appearance: none; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.75rem center; - background-repeat: no-repeat; - background-size: 1.2em 1.2em; - min-height: 5.5rem; - line-height: 1.3; - transition: all 0.3s ease; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + -webkit-appearance: none; + line-height: 1.7; + box-sizing: border-box; + transition: border-color 0.2s, box-shadow 0.2s; + cursor: pointer; + min-height: 3rem; } .form-group select option { - background: white; - color: #333; - padding: 0.5rem; + background: #ffffff; + color: #1a252f; } .form-group input:focus, -.form-group select:focus, .form-group textarea:focus { outline: none; - border-color: #3498db; - background: white; - box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); - transform: translateY(-1px); + border-color: #4a8fc8; + background: #ffffff; + box-shadow: 0 0 0 3px rgba(74, 143, 200, 0.18); +} + +.form-group select:focus { + outline: none; + border-color: #4a8fc8; + background-color: #ffffff; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234a8fc8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.9rem center; + background-repeat: no-repeat; + background-size: 1.25rem 1.25rem; + box-shadow: 0 0 0 3px rgba(74, 143, 200, 0.18); } .form-group textarea { @@ -86,15 +115,15 @@ } .submit-btn { - background: transparent; - color: #2c3e50; - padding: 1.2rem 2.5rem; - border: 2px solid #2c3e50; - border-radius: 12px; + background: linear-gradient(135deg, #4a8fc8 0%, #3476b5 100%); + color: #ffffff; + padding: 0.9rem 2rem; + border: none; + border-radius: 10px; cursor: pointer; - font-size: 1rem; - font-weight: 500; - transition: all 0.3s ease; + font-size: 0.95rem; + font-weight: 600; + transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; display: inline-flex; align-items: center; justify-content: center; @@ -103,19 +132,20 @@ font-family: inherit; letter-spacing: 0.3px; width: 100%; - margin-top: 1rem; + margin-top: 0.5rem; + box-shadow: 0 2px 10px rgba(52, 118, 181, 0.3); } .submit-btn:hover { - background: #2c3e50; - color: white; - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(44, 62, 80, 0.2); + opacity: 0.92; + transform: translateY(-1px); + box-shadow: 0 5px 18px rgba(52, 118, 181, 0.4); } .submit-btn:active { transform: translateY(0); - box-shadow: 0 4px 15px rgba(44, 62, 80, 0.1); + opacity: 1; + box-shadow: 0 2px 6px rgba(52, 118, 181, 0.25); } .submit-btn i { @@ -145,26 +175,51 @@ /* Мобильная адаптация */ @media (max-width: 768px) { .travel-form-container, .contact-form-container { - margin: 1rem; + margin: 0; padding: 1.5rem; + border-radius: 12px; } - + + .form-group { + margin-bottom: 1.1rem; + } + + .form-group label { + margin-bottom: 0.4rem; + font-size: 0.88rem; + } + .form-group input, .form-group select, .form-group textarea { + padding: 0.65rem 0.8rem; font-size: 16px; /* Предотвращает зум на iOS */ + border-radius: 8px; } - + .form-group select { - padding: 1.2rem 3rem 2rem 0.8rem; - min-height: 4.5rem; - font-size: 15px; - line-height: 1.2; + padding: 0.65rem 2.2rem 0.65rem 0.8rem; + font-size: 16px; } - + + .form-group textarea { + min-height: 80px; + } + + .checkbox-group { + padding: 1rem; + margin: 1.2rem 0; + } + .submit-btn { width: 100%; justify-content: center; + padding: 0.9rem 1.5rem; + } + + .form-subtitle { + margin-bottom: 1.2rem; + font-size: 0.88rem; } } @@ -234,60 +289,109 @@ } .form-group label:has(input[type="checkbox"]:checked) { - background-color: rgba(39, 174, 96, 0.1); - border-color: rgba(39, 174, 96, 0.3); - color: #27ae60; + background-color: rgba(39, 174, 96, 0.07); + color: inherit; } -.form-group label:has(input[type="checkbox"]:checked)::after, -.checkbox-label:has(input[type="checkbox"]:checked)::after { - content: "✓"; - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: #27ae60; - font-size: 1.4em; - font-weight: bold; - animation: checkmark-appear 0.3s ease; +/* Подсказка — инфо-блок между полями */ +.form-note { + margin: -0.6rem 0 1.4rem; + padding: 0.55rem 0.85rem; + background: rgba(91, 155, 213, 0.07); + border-left: 2.5px solid rgba(91, 155, 213, 0.45); + border-radius: 0 6px 6px 0; + font-size: 0.8rem; + color: #6b7f94; + line-height: 1.45; } -@keyframes checkmark-appear { - 0% { - opacity: 0; - transform: translateY(-50%) scale(0.5); - } - 100% { - opacity: 1; - transform: translateY(-50%) scale(1); - } +.form-note p { + margin: 0; } -/* Специфичные стили для checkbox-label */ -.checkbox-label:has(input[type="checkbox"]):hover { - background-color: rgba(52, 152, 219, 0.05); +.form-note p::before { + content: "ⓘ "; + font-style: normal; + color: #5b9bd5; + font-size: 0.9em; } -.checkbox-label:has(input[type="checkbox"]:checked) { - background-color: rgba(39, 174, 96, 0.1) !important; - border-color: rgba(39, 174, 96, 0.3) !important; - color: #27ae60 !important; +/* Заголовок формы */ +.form-title { + font-size: 1.4rem; + font-weight: 700; + color: #1a252f; + margin-bottom: 0.4rem; + text-align: center; +} + +.form-subtitle { + font-size: 0.92rem; + color: #7f8c8d; + text-align: center; + margin-bottom: 2rem; + line-height: 1.5; +} + +/* Подводка под заголовком страницы */ +.page-lead { + font-size: 1rem; + color: #555c63; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + line-height: 1.65; + margin-bottom: 2rem; + text-align: left; +} + +.page-lead a { + color: #5b9bd5; + text-decoration: none; + border-bottom: none; +} + +.page-lead a:hover { + color: #4585c2; +} + +/* Разделитель секций */ +.form-section-title { + font-size: 0.78rem; + font-weight: 600; + color: #95a5a6; + text-transform: uppercase; + letter-spacing: 0.08em; + margin: 2rem 0 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid #f0f0f0; } /* Плейсхолдеры */ .form-group input::placeholder, .form-group textarea::placeholder { - color: #95a5a6; + color: #8896a0; opacity: 1; } +/* Select в состоянии placeholder (required:invalid или has disabled:checked) */ +.form-group select:required:invalid, +.form-group select:has(option[value=""]:checked) { + color: #8896a0; +} + +@media (prefers-color-scheme: dark) { + .form-group select:required:invalid, + .form-group select:has(option[value=""]:checked) { + color: rgba(255, 255, 255, 0.32); + } +} + /* Стили для согласия на обработку персональных данных */ .checkbox-group { - background: rgba(52, 152, 219, 0.05); - border: 1px solid rgba(52, 152, 219, 0.2); + background: rgba(74, 143, 200, 0.07); + border: 1.5px solid rgba(74, 143, 200, 0.3); border-radius: 12px; - padding: 1.5rem; - margin: 2rem 0; + padding: 1.25rem 1.5rem; + margin: 1.5rem 0; } .checkbox-container { @@ -321,9 +425,9 @@ border: none; border-radius: 0; font-size: 0.8rem; - line-height: 1.3; + line-height: 1.4; color: #888; - font-style: italic; + font-style: normal; } .privacy-details p { @@ -473,74 +577,294 @@ font-style: italic; } -/* Интеграция с темой сайта */ +/* Нумерованные сноски — маленькие круглые бейджи */ +sup.fn { + display: inline-block; + min-width: 1.4em; + height: 1.4em; + line-height: 1.4em; + text-align: center; + background: rgba(91, 155, 213, 0.18); + color: #5b9bd5 !important; + border-radius: 50%; + font-size: 0.58em; + font-weight: 700; + vertical-align: baseline; + position: relative; + top: -0.5em; + margin-left: 0.25em; + text-decoration: none !important; + font-style: normal; +} + +/* Сворачиваемый юридический текст — без рамки */ +.legal-details { + margin-top: 1.5rem; +} + +.legal-details summary { + padding: 0.4rem 0; + font-size: 0.8rem; + color: #5b9bd5; + cursor: pointer; + list-style: none; + user-select: none; + display: inline-flex; + align-items: baseline; + gap: 0.35rem; + text-decoration: underline; + text-decoration-color: rgba(91, 155, 213, 0.4); + text-underline-offset: 3px; + transition: color 0.2s, text-decoration-color 0.2s; + line-height: 1.5; +} + +.legal-details summary sup.fn { + flex-shrink: 0; + text-decoration: none; +} + +.legal-details summary::-webkit-details-marker { + display: none; +} + +.legal-details summary::after { + content: "↓"; + font-size: 0.85em; + transition: transform 0.2s ease; + display: inline-block; + text-decoration: none; +} + +.legal-details[open] summary::after { + transform: rotate(180deg); +} + +.legal-details summary:hover { + color: #4585c2; + text-decoration-color: rgba(69, 133, 194, 0.6); +} + +.legal-text { + padding: 0.75rem 0 0; + font-size: 0.79rem; + color: #8a9199; + line-height: 1.65; +} + +.legal-text p { + margin: 0 0 0.7rem; +} + +.legal-text p:last-child { + margin-bottom: 0; +} + +.legal-text a { + color: #3498db; + text-decoration: none; +} + +.legal-text a:hover { + text-decoration: underline; +} + +.legal-note { + font-size: 0.78rem; + color: #aaa; + margin-top: 0.75rem; + line-height: 1.5; +} + +/* Кнопка загрузки файла — единый стиль с формой */ +.file-btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.7rem 1.4rem; + background: rgba(91, 155, 213, 0.1); + color: #5b9bd5; + border: 1.5px solid rgba(91, 155, 213, 0.35); + border-radius: 8px; + font-size: 0.88rem; + font-weight: 500; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; + font-family: inherit; +} + +.file-btn:hover { + background: rgba(91, 155, 213, 0.18); + border-color: #5b9bd5; +} + +.file-name-display { + margin-left: 0.75rem; + font-size: 0.82rem; + color: #7f8c8d; +} + +@media (prefers-color-scheme: dark) { + .file-btn { + color: #7ab3e0; + border-color: rgba(91, 155, 213, 0.3); + background: rgba(91, 155, 213, 0.08); + } + .file-name-display { + color: #888; + } +} + +/* Тёмная тема — тёмная карточка с достаточным контрастом */ @media (prefers-color-scheme: dark) { .travel-form-container, .contact-form-container { - background: rgba(30, 30, 30, 0.95); + background: rgba(22, 26, 34, 0.88); + backdrop-filter: blur(28px); + -webkit-backdrop-filter: blur(28px); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 6px rgba(0, 0, 0, 0.3); } - + .form-group label { - color: #e0e0e0; + color: #dde3ea; } - + .form-group input, .form-group select, .form-group textarea { - background: rgba(50, 50, 50, 0.8); - border-color: #555; - color: #e0e0e0; + background: rgba(255, 255, 255, 0.07); + border-color: rgba(255, 255, 255, 0.16); + color: #e8edf4; } - + + .form-group select { + background-color: rgba(255, 255, 255, 0.07); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23aab2bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.9rem center; + background-repeat: no-repeat; + background-size: 1.25rem 1.25rem; + border-color: rgba(255, 255, 255, 0.16); + color: #e8edf4; + } + + .form-group select option { + background: #1e2533; + color: #e8edf4; + } + + .form-group select:focus { + background-color: rgba(255, 255, 255, 0.11); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236aaee0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.9rem center; + background-repeat: no-repeat; + background-size: 1.25rem 1.25rem; + } + + .form-group input::placeholder, + .form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.32); + } + .form-group input:focus, .form-group select:focus, .form-group textarea:focus { - border-color: #4a9eff; + border-color: #6aaee0; + background: rgba(255, 255, 255, 0.11); + box-shadow: 0 0 0 3px rgba(106, 174, 224, 0.2); } - + + .submit-btn { + background: linear-gradient(135deg, #3d82be 0%, #2d6aa8 100%); + box-shadow: 0 2px 10px rgba(45, 106, 168, 0.4); + } + + .submit-btn:hover { + opacity: 0.9; + box-shadow: 0 5px 18px rgba(45, 106, 168, 0.5); + } + + .form-note { + background: rgba(91, 155, 213, 0.1); + border-left-color: rgba(91, 155, 213, 0.5); + color: #8ca8c4; + } + + .form-note p::before { + color: #7ab3e0; + } + + .form-subtitle { + color: #99a6b0; + } + .checkbox-group { - background: rgba(52, 152, 219, 0.1); - border-color: rgba(52, 152, 219, 0.3); + background: rgba(91, 155, 213, 0.1); + border-color: rgba(91, 155, 213, 0.3); } - + .privacy-text { - color: #e0e0e0; + color: #c8d4de; } - + .privacy-details { - background: rgba(40, 40, 40, 0.8); - border-color: rgba(52, 152, 219, 0.3); - color: #ccc; + color: #8a9baa; } - - .privacy-details strong { - color: #e0e0e0; + + .privacy-details a { + color: #7ab3e0; } - - .file-input-wrapper { - background: rgba(50, 50, 50, 0.8); - border-color: #555; - color: #aaa; + + .legal-details summary { + color: #7ab3e0; + text-decoration-color: rgba(122, 179, 224, 0.4); } - - .file-input-wrapper:hover { - border-color: #4a9eff; - background: rgba(50, 50, 50, 0.9); + + .legal-text { + color: #8fa4b8; } - - .file-input-wrapper:focus-within { - border-color: #4a9eff; - background: rgba(50, 50, 50, 0.9); + + .legal-text a { + color: #7ab3e0; } - - .file-input-text { - color: #aaa; + + .legal-note { + color: #6a7884; } - - .file-input-text.file-selected { - color: #5dade2; + + /* Success/error в тёмной теме */ + .form-success { + background: rgba(39, 174, 96, 0.15); + color: #6ecf9a; + border-color: rgba(39, 174, 96, 0.3); } - - .file-info small { - color: #aaa; + + .form-error { + background: rgba(231, 76, 60, 0.15); + color: #f08080; + border-color: rgba(231, 76, 60, 0.3); + } + + .form-group label:has(input[type="checkbox"]:checked) { + background-color: rgba(39, 174, 96, 0.1); + } + + sup.fn { + background: rgba(122, 179, 224, 0.2); + color: #7ab3e0 !important; + } + + .file-btn { + background: rgba(91, 155, 213, 0.15); + color: #7ab3e0; + border-color: rgba(91, 155, 213, 0.35); + } + + .file-btn:hover { + background: rgba(91, 155, 213, 0.25); + border-color: #7ab3e0; + } + + .file-name-display { + color: #7a8896; } } \ No newline at end of file diff --git a/static/css/mobile-menu.css b/static/css/mobile-menu.css index 194721b..6219db2 100755 --- a/static/css/mobile-menu.css +++ b/static/css/mobile-menu.css @@ -1,25 +1,29 @@ -/* Улучшенная мобильная кнопка меню */ +/* Кнопка открытия меню */ #navPanelToggle { - background: rgba(255, 255, 255, 0.15) !important; - backdrop-filter: blur(10px) !important; - border: 1px solid rgba(255, 255, 255, 0.3) !important; - color: white !important; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; - border-radius: 8px !important; + background: rgba(18, 22, 28, 0.75) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + border-radius: 6px !important; + color: rgba(255, 255, 255, 0.9) !important; + text-shadow: none !important; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; + font-family: 'Source Sans Pro', Helvetica, sans-serif !important; + font-weight: 900 !important; + letter-spacing: 0.075em !important; + text-transform: uppercase !important; } #navPanelToggle:hover { - background: rgba(255, 255, 255, 0.25) !important; - transform: translateY(-1px) !important; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; + background: rgba(18, 22, 28, 0.92) !important; + color: #ffffff !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } -/* Улучшение для очень маленьких экранов */ + @media (max-width: 480px) { #navPanelToggle { font-size: 0.75rem !important; padding: 0.3rem 0.8rem !important; - backdrop-filter: blur(8px) !important; } } \ No newline at end of file diff --git a/static/css/nav-background.css b/static/css/nav-background.css index b415aca..66f2618 100755 --- a/static/css/nav-background.css +++ b/static/css/nav-background.css @@ -1,42 +1,89 @@ -/* Улучшение фона для десктопного меню навигации */ +/* Desktop nav bar */ #nav { - background: rgba(0, 0, 0, 0.4) !important; - backdrop-filter: blur(8px) !important; - border-radius: 10px !important; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + background: rgba(0, 0, 0, 0.35) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 100px !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; } -#nav ul.links li a { - color: rgba(255, 255, 255, 0.9) !important; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; - transition: all 0.3s ease !important; +/* Ссылки с иконкой — flex row */ +#nav ul.links li a.nav-link { + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + color: rgba(255, 255, 255, 0.82) !important; + text-shadow: none !important; + padding: 0 1.4rem !important; + transition: color 0.2s ease, background 0.2s ease !important; + text-transform: uppercase !important; + font-size: 0.78rem !important; + letter-spacing: 0.07em !important; + font-weight: 900 !important; } -#nav ul.links li a:hover { - background-color: rgba(255, 255, 255, 0.2) !important; - color: white !important; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important; +#nav ul.links li a.nav-link:hover { + background-color: rgba(255, 255, 255, 0.12) !important; + color: #ffffff !important; + text-shadow: none !important; } +/* Иконки в nav — фиксированная ширина чтобы все выровнялись */ +#nav ul.links li a .nav-icon { + font-size: 0.85rem !important; + opacity: 0.75; + flex-shrink: 0; + line-height: 1 !important; + width: 1em !important; + text-align: center !important; + display: inline-block !important; +} + +#nav ul.links li a:hover .nav-icon { + opacity: 1; +} + +/* Активный пункт */ #nav ul.links li.active { - background-color: rgba(255, 255, 255, 0.2) !important; - border-radius: 5px !important; + background-color: rgba(255, 255, 255, 0.15) !important; } #nav ul.links li.active a { - color: white !important; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important; + color: #ffffff !important; +} + +#nav ul.links li.active a .nav-icon { + opacity: 1; } /* Иконки соцсетей */ #nav ul.icons li a { - color: rgba(255, 255, 255, 0.8) !important; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; + color: rgba(255, 255, 255, 0.75) !important; + text-shadow: none !important; + transition: color 0.2s ease !important; } #nav ul.icons li a:hover { - color: white !important; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important; - transform: scale(1.1) !important; + color: #ffffff !important; +} + +/* Мобильная панель — иконки + текст в строку */ +#navPanel .links li a.nav-link { + display: flex !important; + align-items: center !important; + gap: 0.6rem !important; + padding: 0.85rem 0 !important; +} + +#navPanel .links li a .nav-icon { + font-size: 1rem !important; + opacity: 0.7; + flex-shrink: 0; + width: 1.2rem; + text-align: center; +} + +#navPanel .links li a:hover .nav-icon { + opacity: 1; } \ No newline at end of file diff --git a/static/css/page-spacing.css b/static/css/page-spacing.css index ee67dbe..f6d6bf8 100755 --- a/static/css/page-spacing.css +++ b/static/css/page-spacing.css @@ -10,14 +10,64 @@ } } -/* Уменьшение размера заголовков на страницах */ +/* Заголовок страницы — убираем UPPERCASE, нормальный регистр */ .post header.major h1 { font-size: 2.5rem !important; line-height: 1.2 !important; + text-transform: none !important; + letter-spacing: 0.01em !important; + font-weight: 900 !important; + color: #1a252f !important; + margin-bottom: 1rem !important; +} + +/* Описание под заголовком — читаемое, не тонкое */ +.post header.major p { + font-size: 1rem !important; + font-weight: 400 !important; + line-height: 1.65 !important; + color: #555c63 !important; + font-family: 'Source Sans Pro', Helvetica, sans-serif !important; + text-align: left !important; +} + +/* Выравнивание заголовка влево */ +.post header.major { + text-align: left !important; } @media (max-width: 736px) { .post header.major h1 { - font-size: 2rem !important; + font-size: 1.9rem !important; + } +} + +/* Скруглённые углы — изображения в карточках постов */ +a.image.main img, +a.image.fit img { + border-radius: 10px; + overflow: hidden; +} + +a.image.main, +a.image.fit { + border-radius: 10px; + overflow: hidden; + display: block; +} + +/* Скруглённые углы — белая подложка #main */ +#main { + border-radius: 20px; + overflow: hidden; + margin-top: 1rem; + margin-bottom: 1.5rem; +} + +@media (max-width: 736px) { + #main { + border-radius: 14px; + margin-top: 0.75rem; + margin-bottom: 1rem; } } \ No newline at end of file diff --git a/static/css/pagination-info.css b/static/css/pagination-info.css index 366f201..0010063 100755 --- a/static/css/pagination-info.css +++ b/static/css/pagination-info.css @@ -1,71 +1,81 @@ -/* Фиксируем пагинацию */ -.pagination ul { - display: flex !important; - align-items: center !important; - justify-content: center !important; - list-style: none !important; - margin: 0 !important; - padding: 0 !important; - gap: 1rem !important; -} - -/* Убираем рамки со всех кнопок пагинации */ -.pagination a, -.pagination .previous, -.pagination .next, -.pagination .first, -.pagination .last { - border: none !important; - border-radius: 0 !important; - box-shadow: none !important; - outline: none !important; -} - -/* Информация о страницах для десктопа */ -.pagination .page-info { - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - padding: 0.4rem 0.8rem !important; - font-size: 0.8rem !important; - color: #333 !important; - background: none !important; - border: none !important; - border-radius: 0 !important; - text-align: center !important; - font-weight: 300 !important; - white-space: nowrap !important; - min-width: 60px !important; - box-sizing: border-box !important; - flex-shrink: 0 !important; - box-shadow: none !important; - outline: none !important; -} - -.pagination .page-info .current-page { - color: #333 !important; - font-weight: 400 !important; - font-size: 1em !important; -} - -.pagination .page-info .separator { - margin: 0 0.3rem !important; - color: #666 !important; - font-size: 0.9em !important; - font-weight: 300 !important; -} - -.pagination .page-info .total-pages { - color: #333 !important; - font-weight: 300 !important; -} - -/* Скрываем информацию о страницах на мобильных */ -@media (max-width: 768px) { - .pagination .page-info, - .pagination .page-info.desktop-only, - .pagination-info, - .pagination-status { - display: none !important; - } -} \ No newline at end of file +/* Пагинация — новые классы, нет конфликтов с темой */ + +.pager { + display: flex; + justify-content: center; + padding: 1.5rem 0 3.5rem; +} + +.pager-inner { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Кнопки Новее / Старше */ +.pager-btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.5rem 1.1rem; + font-size: 0.82rem; + font-weight: 500; + color: #555c63; + background: transparent; + border: 1px solid #d0d4d8; + border-radius: 20px; + text-decoration: none; + transition: color 0.18s, border-color 0.18s, background 0.18s; + cursor: pointer; + white-space: nowrap; + letter-spacing: 0.01em; +} + +.pager-btn:hover { + color: #5b9bd5; + border-color: #5b9bd5; + background: rgba(24, 191, 239, 0.06); + text-decoration: none; +} + +.pager-btn svg { + flex-shrink: 0; +} + +/* Заблокированная кнопка */ +.pager-disabled { + color: #c0c5ca; + border-color: #e8eaec; + cursor: default; + pointer-events: none; +} + +/* Счётчик страниц */ +.pager-info { + font-size: 0.78rem; + color: #aaa; + padding: 0 0.5rem; + white-space: nowrap; + font-variant-numeric: tabular-nums; + min-width: 3.5rem; + text-align: center; +} + +/* Мобильные: уменьшить счётчик, добавить пространство */ +@media (max-width: 736px) { + .pager-info { + font-size: 0.72rem; + min-width: 2.5rem; + color: #bbb; + } + + /* Больше белого пространства под кнопками — чёткое разделение с футером */ + #main > nav.pager { + padding-bottom: 3rem !important; + } + + .pager-btn { + padding: 0.6rem 1.4rem; + font-size: 0.85rem; + } +} diff --git a/static/css/typography-improvements.css b/static/css/typography-improvements.css index 149a57e..932541c 100755 --- a/static/css/typography-improvements.css +++ b/static/css/typography-improvements.css @@ -42,7 +42,7 @@ } #main article a:hover { - color: #18bfef; + color: #5b9bd5; } /* Списки в статьях */ @@ -118,6 +118,73 @@ color: #1a252f; } +/* Карточки постов */ +#main > .posts > article { + padding: 2rem !important; + text-align: left !important; + transition: box-shadow 0.2s ease; +} + +#main > .posts > article:hover { + box-shadow: inset 0 0 0 1px rgba(24, 191, 239, 0.3); +} + +/* Фиксированная высота хедера — фото на одном уровне в ряду */ +#main > .posts > article header { + min-height: 5.5rem; +} + +/* Заголовок карточки */ +#main > .posts > article header h2 { + font-size: 1.3rem; + line-height: 1.35; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + margin-bottom: 0; + text-align: left; +} + +#main > .posts > article header h2 a { + text-decoration: none; +} + +/* Убираем огромный отступ у фото (тема: 4rem 0) */ +#main > .posts > article .image.main { + margin: 1rem 0 !important; +} + +/* Описание — обрезаем до 2 строк */ +#main > .posts > article > p { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-align: left; + font-size: 0.88rem; + color: #666; + margin-bottom: 1rem; + line-height: 1.5; +} + +/* Скрываем кнопку «Подробнее» — карточка и так кликабельна по заголовку */ +#main > .posts > article .actions { + display: none !important; +} + +@media screen and (max-width: 980px) { + #main > .posts > article { + padding: 1.5rem !important; + } +} + +@media screen and (max-width: 736px) { + #main > .posts > article { + text-align: left !important; + } +} + /* Адаптивность для мобильных */ @media (max-width: 768px) { #main article h1 { diff --git a/static/test_encryption.html b/static/test_encryption.html deleted file mode 100755 index 73edfc2..0000000 --- a/static/test_encryption.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - Тест шифрования файлов - - - -
-

Тест системы шифрования файлов

- -
-
- - -
- -
- -
- - Выберите файл для тестирования -
-
- -
- -
-
- -
-

Отладочная информация:

- 
Выберите файл для просмотра информации о шифровании
-
-
- - - - - \ No newline at end of file diff --git a/themes/hugo-theme-massively/layouts/partials/footer/index.html b/themes/hugo-theme-massively/layouts/partials/footer/index.html index 191109b..9caa2c7 100755 --- a/themes/hugo-theme-massively/layouts/partials/footer/index.html +++ b/themes/hugo-theme-massively/layouts/partials/footer/index.html @@ -11,7 +11,7 @@
- +
@@ -52,25 +52,25 @@ {{ end }} {{ with .plan}}
  • - + Хочу поехать
    • {{ end }} {{ with .map}}
  • - + Маршруты
    • {{ end }} {{ with .ask}}
  • - + Спросить
    • {{ end }} {{ with .gallery}}
  • - + Галерея
    • {{ end }}