/* * hex-theme.css — тема «соти»: тоноване скло + єдиний акцент. * * Підключається з base.html і admin_base.html. Усі правила прив'язані до * класу .hex-theme на , тому сторінка може НЕ брати тему, просто не * поставивши цей клас. Це принципово для двох сторінок у ланцюжку кліку — * bot_response.html (біла сторінка для ботів) та interstitial.html: там * тема змінила б поведінку клоакінгу й уповільнила редірект. * * КОЛЬОРОВА ЛОГІКА (не вигадувати нові кольори — брати звідси): * зелений — дія: почати, створити, зареєструватись, галочки * фіолетовий — фірмовий акцент: іконки, логотип, плитки * темне скло — матеріал: картки, підвал, другорядні кнопки * Бірюза акцентом НЕ буває: вона тепер матеріал фону, іконки на ній зникають. */ :root { --hex-brand: #667eea; --hex-brand-2: #764ba2; --hex-brand-soft: #8b9cf7; /* світліший фірмовий — читається на темному склі */ --hex-neon: #4fe8ff; /* неон зі швів між сотами */ --hex-glass-a: rgba(10, 52, 70, 0.52); --hex-glass-b: rgba(6, 26, 38, 0.60); --hex-rim: rgba(79, 232, 255, 0.22); --hex-base: #0c131c; /* підкладка сот — збігається з фоном полотна */ } /* --- спливаючі вікна: один вигляд на весь сайт -------------------------- До 2026-08-15 кожне вікно мало свій фон, вшитий прямо в розмітку: одні були темно-синіми, інші напівпрозоро-білими, треті лишались на дефолті Bootstrap. Тепер вигляд задається тут, а в розмітці кольорів немає — інакше наступне вікно знову з'явиться зі своїм власним. */ .modal-content { background: #1b2233; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; color: #e9ecef; } .modal-header, .modal-footer { border-color: rgba(255, 255, 255, 0.1); } .modal-title { font-size: 1rem; font-weight: 600; } .modal-body p { font-size: 0.85rem; line-height: 1.6; } /* Попередження всередині вікна (жовта плашка). */ .cl-warn { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.78rem; line-height: 1.55; background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.28); border-radius: 10px; padding: 0.6rem 0.75rem; } .cl-warn > i { color: #ffb74d; margin-top: 0.15rem; } /* Адреса/фрагмент коду, який користувач копіює. */ .pb-url { display: block; word-break: break-all; font-size: 0.75rem; line-height: 1.5; color: #a5b4fc; background: rgba(0, 0, 0, 0.28); border-radius: 8px; padding: 0.55rem 0.7rem; } .cl-copy-row { display: flex; gap: 0.5rem; align-items: stretch; } .cl-copy-row .pb-url { flex: 1; margin: 0; } .cl-copy-btn { flex: 0 0 auto; background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 8px; color: #fff; font-size: 0.75rem; padding: 0 0.9rem; cursor: pointer; } /* Підказки при наведенні — того самого вигляду, що й вікна. Bootstrap малює їх власними змінними, тому колір задається тут, а не через .tooltip-inner: так стрілочка автоматично отримує той самий фон і не лишається білою «пипкою» від теми за замовчуванням. */ .tooltip { --bs-tooltip-bg: #1b2233; --bs-tooltip-color: #e9ecef; --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: 10px; --bs-tooltip-font-size: 0.78rem; --bs-tooltip-max-width: 280px; --bs-tooltip-padding-x: 0.7rem; --bs-tooltip-padding-y: 0.5rem; } .tooltip .tooltip-inner { border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); text-align: left; line-height: 1.5; } /* Відкриття модального вікна не має рухати сторінку. Bootstrap ховає смугу прокрутки, поки вікно відкрите. Вікно перегляду від цього стає ширшим приблизно на 15 px, а полотно з сотами задане у відсотках — тож воно розтягується, і фон наче зсувається вбік (сам малюнок при цьому не перемальовується: resize() чекає на подію window.resize, якої тут немає). Постійно зарезервований жолоб тримає ширину незмінною; власну компенсацію Bootstrap-а доводиться вимкнути, інакше вона зсуне вміст у протилежний бік. */ html { scrollbar-gutter: stable; } body.modal-open { padding-right: 0 !important; } /* --- полотно з анімованими сотами --- */ #hex-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: -1; /* під усім контентом */ pointer-events: none; /* не перехоплює кліки */ } /* Фірмовий фіолетовий градієнт із base.html тут не потрібен — інакше він блимає до першої відмальовки полотна. Колір збігається з підкладкою сот. */ body.hex-theme { background: var(--hex-base); } /* --- скло --- */ /* Картки розраховані на спокійний градієнт, а під ними тепер малюнок — крізь 15% білого соти читаються наскрізь. Тонуємо НЕ білим, а кольорами самих сот: тіло — темна бірюза стінок, обідок — неон зі швів. Темний тон додатково рятує контраст: увесь текст сайту білий. Ставку робимо на непрозорість, а не на радіус розмиття: backdrop-filter над АНІМОВАНИМ фоном перераховується щокадру, тож великий радіус коштував би дорого, а зайва непрозорість — майже нічого. */ .hex-theme .glass-card { background: linear-gradient(135deg, var(--hex-glass-a) 0%, var(--hex-glass-b) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--hex-rim); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07); } /* Підвал у base.html розрахований на темний фіолетовий фон і має ледь помітну світлу підкладку — на світлих сотах текст на ній тоне. !important, бо в base.html фон підвалу теж із !important. */ .hex-theme .glass-footer { background: linear-gradient(135deg, rgba(10, 52, 70, 0.58) 0%, rgba(6, 26, 38, 0.66) 100%) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(79, 232, 255, 0.20); } .hex-theme .glass-footer .footer-rights { color: rgba(255, 255, 255, 0.62); } /* --- єдиний акцент --- */ .hex-theme .sec-ico, .hex-theme .hero-chip-ico { color: var(--hex-brand-soft); } /* --- кнопки в шапці --- */ /* Мали 10% білого: на фіолетовому фоні це читалось, на світлих сотах — ні. */ .hex-theme .auth-btn { background: linear-gradient(135deg, rgba(10, 52, 70, 0.62) 0%, rgba(6, 26, 38, 0.70) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(79, 232, 255, 0.30); color: #eaf6fb; font-weight: 500; } .hex-theme .auth-btn:hover, .hex-theme .auth-btn:focus { background: linear-gradient(135deg, rgba(14, 68, 92, 0.80) 0%, rgba(8, 34, 48, 0.86) 100%); border-color: rgba(79, 232, 255, 0.58); color: #ffffff; } /* Головна дія. Була світло-сірою з темним текстом — читалась як ВИМКНЕНА. Однакова дія — однаковий колір: той самий зелений, що й «Почати». */ .hex-theme .auth-btn-primary { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; font-weight: 600; box-shadow: 0 6px 18px rgba(76, 175, 80, 0.38); transition: all 0.25s ease; } .hex-theme .auth-btn-primary:hover, .hex-theme .auth-btn-primary:focus { background: linear-gradient(135deg, #57bd5b 0%, #35934a 100%); box-shadow: 0 10px 26px rgba(76, 175, 80, 0.55); color: #ffffff; transform: translateY(-1px); } /* --- меню вибору мови --- */ /* Стилі там прописані в розмітці, тому потрібен !important. */ .hex-theme #customLanguageMenu { background: linear-gradient(135deg, rgba(10, 52, 70, 0.94) 0%, rgba(6, 26, 38, 0.96) 100%) !important; border: 1px solid rgba(79, 232, 255, 0.28) !important; } .hex-theme #customLanguageMenu .custom-lang-item { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } .hex-theme #customLanguageMenu .custom-lang-item:hover { background: rgba(79, 232, 255, 0.18) !important; border-color: rgba(79, 232, 255, 0.45) !important; } /* --- верхня панель --- */ /* Була майже прозорою (10% білого в кабінеті, рожевий градієнт в адмінці) — на світлих сотах панель зникала, а кнопки на ній зливались із фоном. */ .hex-theme .glass-navbar, .hex-theme .admin-navbar { background: linear-gradient(135deg, rgba(10, 52, 70, 0.74) 0%, rgba(6, 26, 38, 0.82) 100%) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(79, 232, 255, 0.22); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30); } /* Адмінка має лишатись ВПІЗНАВАНОЮ з першого погляду: червона смуга знизу — той самий сигнал «ти в адмінці», який раніше давала рожева панель. */ .hex-theme .admin-navbar { border-bottom: 2px solid rgba(220, 53, 69, 0.60); } /* --- кнопки на панелі (кабінет і адмінка) --- */ .hex-theme .modern-nav-item, .hex-theme .admin-nav-item { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(79, 232, 255, 0.24); } .hex-theme .modern-nav-item:hover, .hex-theme .admin-nav-item:hover, .hex-theme .modern-nav-item:focus, .hex-theme .admin-nav-item:focus { background: rgba(79, 232, 255, 0.16); border-color: rgba(79, 232, 255, 0.52); } /* «Вийти» лишається червоною: дія руйнівна, вона й має вирізнятись. */ .hex-theme .admin-nav-item.admin-logout-btn { background: rgba(220, 53, 69, 0.22); border-color: rgba(220, 53, 69, 0.50); } .hex-theme .admin-nav-item.admin-logout-btn:hover { background: rgba(220, 53, 69, 0.38); border-color: rgba(220, 53, 69, 0.75); } /* --- плитки з цифрами й таблиці адмінки --- */ /* Мали 8% і 5% білого — крізь них соти було видно наскрізь. */ .hex-theme .admin-stat-card, .hex-theme .admin-table { background: linear-gradient(135deg, rgba(10, 52, 70, 0.52) 0%, rgba(6, 26, 38, 0.60) 100%); border: 1px solid var(--hex-rim); } .hex-theme .admin-stat-card:hover { background: linear-gradient(135deg, rgba(14, 68, 92, 0.66) 0%, rgba(8, 34, 48, 0.74) 100%); border-color: rgba(79, 232, 255, 0.42); } /* --- адмінка: SMTP --- */ /* Форма мала 8% білого й блакитні напівпрозорі заголовки — соти читались крізь усе, включно з полями сервера й пароля. */ .hex-theme .smtp-header, .hex-theme .smtp-info-box, .hex-theme .smtp-form-card { background: linear-gradient(135deg, rgba(10, 52, 70, 0.56) 0%, rgba(6, 26, 38, 0.66) 100%); border: 1px solid var(--hex-rim); } .hex-theme .smtp-form-card:hover { background: linear-gradient(135deg, rgba(14, 68, 92, 0.66) 0%, rgba(8, 34, 48, 0.74) 100%); } /* Заголовки секцій — трохи світліші за картку, щоб ділити форму на частини. */ .hex-theme .smtp-section-header { background: linear-gradient(135deg, rgba(18, 78, 104, 0.74) 0%, rgba(10, 40, 56, 0.80) 100%); border: 1px solid rgba(79, 232, 255, 0.30); } /* --- адмінка: білінг --- */ /* Тут не було ЖОДНОЇ картки: таблиця й тексти лежали прямо на фоні. Даємо сторінці власну поверхню (клас ab-page доданий у шаблоні). */ .hex-theme .ab-page { background: linear-gradient(135deg, rgba(10, 52, 70, 0.52) 0%, rgba(6, 26, 38, 0.62) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--hex-rim); border-radius: 18px; padding: 20px !important; margin-bottom: 24px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.30); } .hex-theme .ab-tablewrap { background: rgba(4, 20, 30, 0.42); border: 1px solid var(--hex-rim); } .hex-theme .ab-table { background: transparent; } .hex-theme .ab-table th { background: rgba(79, 232, 255, 0.10); } /* Пояснювальний текст був приглушено-бузковим — на світлих сотах тонув. */ .hex-theme .ab-note { color: rgba(226, 232, 255, 0.82); } /* --- Bootstrap-кнопка «прозора зі світлою рамкою» --- */ /* .btn-outline-light задумана під темний фон: на світлих сотах вона зникає. Таких кнопок 7 по всіх шаблонах (кабінет, гайд, адмінка) — тому одне правило замість семи правок. Вигляд той самий, що в кнопок другого плану в шапці: темне скло + обідок теми. */ .hex-theme .btn-outline-light { background: linear-gradient(135deg, rgba(10, 52, 70, 0.62) 0%, rgba(6, 26, 38, 0.70) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(79, 232, 255, 0.30); color: #eaf6fb; } .hex-theme .btn-outline-light:hover, .hex-theme .btn-outline-light:focus, .hex-theme .btn-outline-light:active { background: linear-gradient(135deg, rgba(14, 68, 92, 0.80) 0%, rgba(8, 34, 48, 0.86) 100%); border-color: rgba(79, 232, 255, 0.58); color: #ffffff; }