/* ============================================================
   HELLSING — тема форума (XenForo 2.3)
   Гамма логотипа: чёрный + золото + серо-синяя сталь.
   Тёмная (по умолчанию) и светлая (html.hl-light) вариации.
   Правится по SSH: docroot/hellsing/hellsing-theme.css
   Подключение — <link> в PAGE_CONTAINER (см. инструкцию).
   ============================================================ */

/* ---- Шрифты ---- */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=PT+Serif:wght@400;700&display=swap');

/* ---- Переменные: ТЁМНАЯ (по умолчанию) ---- */
:root{
  --hl-bg:#080a0d; --hl-bg2:#0b0e13;
  --hl-steel-1:#141b24; --hl-steel-2:#1b2530; --hl-steel-3:#283646; --hl-steel-4:#41525f;
  --hl-panel:rgba(20,27,36,.72); --hl-panel-hi:rgba(28,38,50,.85);
  --hl-line:rgba(120,150,180,.12); --hl-line-2:rgba(120,150,180,.2);
  --hl-gold:#ffb560; --hl-gold-hi:#ffcb86; --hl-gold-2:#e0a04e;
  --hl-gold-line:#c9a24a; --hl-brass:#ab7a0e;
  --hl-tx-bright:#f2ede8; --hl-tx:#d3d8de; --hl-tx-2:#a7b2bd; --hl-tx-3:#8895a1; --hl-tx-4:#6d7b88;
  --hl-green:#63b85a;
  --hl-head-grad:linear-gradient(90deg,#05070a 20%,rgba(11,15,20,.55) 46%,rgba(20,27,36,.4) 70%,rgba(5,7,10,.85) 100%);
  --hl-cat-grad:linear-gradient(90deg,var(--hl-steel-1),var(--hl-steel-2) 70%);
}
/* ---- Переменные: СВЕТЛАЯ ---- */
html.hl-light{
  --hl-bg:#e6ecf2; --hl-bg2:#dde5ee;
  --hl-panel:#ffffff; --hl-panel-hi:#f4f7fa;
  --hl-line:rgba(38,54,69,.12); --hl-line-2:rgba(38,54,69,.18);
  --hl-gold:#8d6113; --hl-gold-hi:#b9862a; --hl-gold-2:#8d6113;
  --hl-tx-bright:#141d26; --hl-tx:#25333f; --hl-tx-2:#44586a; --hl-tx-3:#5a6f80; --hl-tx-4:#6f8393;
  --hl-cat-grad:linear-gradient(90deg,var(--hl-steel-1),var(--hl-steel-2) 70%); /* плашки остаются стальными */
}

/* ============================================================
   БАЗА
   ============================================================ */
/* Фон держит и html, и body, и обёртка — форсируем на всех. */
html,body,.p-pageWrapper{
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(115,71,11,.16), transparent 52%),
    radial-gradient(90% 70% at 88% 0%, rgba(40,54,70,.4), transparent 58%),
    linear-gradient(180deg,var(--hl-bg2),var(--hl-bg)) !important;
  background-attachment:fixed !important; background-color:var(--hl-bg) !important;
}
html.hl-light,html.hl-light body,html.hl-light .p-pageWrapper{
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg,var(--hl-bg),var(--hl-bg2)) !important;
  background-color:var(--hl-bg) !important;
}
/* Светлые контентные контейнеры XenForo — делаем прозрачными,
   чтобы просвечивал наш фон. Это и была причина «светлого экрана». */
.p-body,.p-body-inner,.p-body-main,.p-body-content,.p-body-pageContent,
.p-body-sidebar,.p-sectionLinks,.blockMessage{ background:transparent !important; }
body{ font-family:'PT Serif',Georgia,serif; color:var(--hl-tx) !important; }
.p-nav-list, .block-header, .node-title, h1,h2,h3,.p-title-value{ font-family:'Forum',Georgia,serif; }
a{ color:var(--hl-gold-2); }
/* базовая читаемость текста на тёмном */
.p-body-pageContent,.block-body,.contentRow-main,.pairs,.node-extra{ color:var(--hl-tx); }
.p-title-value,.contentRow-title{ color:var(--hl-tx-bright) !important; }

/* верхняя staff/section-полоса (была синей) */
.p-staffBar,.p-sectionLinks{ background:var(--hl-steel-1) !important; border-bottom:1px solid var(--hl-line-2); }
.p-staffBar a,.p-sectionLinks a{ color:var(--hl-tx-2) !important; }
.p-staffBar a:hover,.p-sectionLinks a:hover{ color:var(--hl-gold) !important; }

/* ФУТЕР (был синий) */
.p-footer{ background:linear-gradient(180deg,var(--hl-steel-2),var(--hl-steel-1)) !important;
  border-top:2px solid var(--hl-gold-line) !important; color:var(--hl-tx-3) !important; }
.p-footer a{ color:var(--hl-tx-2) !important; }
.p-footer a:hover{ color:var(--hl-gold) !important; }

/* ЛОГОТИП — подменяем дефолтный на нашу эмблему+лого */
.p-header-logo--image img{ display:none !important; }
.p-header-logo--image{ display:inline-block; width:300px; height:74px;
  background:url('/hellsing/logo.webp') left center/contain no-repeat; }

/* ============================================================
   ШАПКА — арт-баннер + эмблема
   ============================================================ */
.p-header{ position:relative; overflow:hidden; background:#05070a; border-bottom:1px solid var(--hl-line-2); }
.p-header::before{ content:''; position:absolute; inset:0; z-index:0;
  background:url('/hellsing/hero.webp') right center/cover no-repeat; opacity:.8; }
.p-header::after{ content:''; position:absolute; inset:0; z-index:1; background:var(--hl-head-grad); }
.p-header-inner{ position:relative; z-index:2; }
.p-header-logo img{ filter:drop-shadow(0 4px 16px rgba(0,0,0,.7)); }
.p-header-content{ position:relative; z-index:2; }
/* заголовок/слоган поверх баннера — светлый в обеих темах */
.p-header .p-title-value,.p-description{ color:#f2ede8 !important; text-shadow:0 2px 12px rgba(0,0,0,.8); }

/* ============================================================
   НАВБАР — стальной + золотая линия
   ============================================================ */
.p-nav{ background:linear-gradient(180deg,var(--hl-steel-2),var(--hl-steel-1)) !important;
  border-bottom:2px solid var(--hl-gold-line); box-shadow:0 6px 20px rgba(0,0,0,.4); }
.p-navEl-link,.p-navEl > a{ font-family:'Forum',serif; font-size:16px; letter-spacing:.5px; color:#c3ced9 !important; }
.p-navEl-link:hover{ color:#fff !important; background:rgba(255,255,255,.05); }
.p-navEl.is-selected .p-navEl-link,.p-navEl-link.is-active{
  color:var(--hl-gold) !important; background:rgba(150,105,26,.18); }
.p-nav-opposite a{ color:#c3ced9 !important; }

/* ============================================================
   БЛОКИ / КАТЕГОРИИ ФОРУМА
   ============================================================ */
.block-container{ background:var(--hl-panel) !important; border:1px solid var(--hl-line-2) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.4); }
html.hl-light .block-container{ box-shadow:0 8px 22px rgba(38,54,69,.09); }
/* заголовок категории — тёмная сталь + золото (в обеих темах) */
.block-header{ background:var(--hl-cat-grad) !important; border-bottom:2px solid var(--hl-gold-line) !important;
  font-family:'Forum',serif; font-size:18px; letter-spacing:.5px; color:var(--hl-gold) !important; }
.block-header a{ color:var(--hl-gold) !important; }
.block-minorHeader{ background:var(--hl-panel-hi) !important; color:var(--hl-tx-2) !important;
  border-bottom:1px solid var(--hl-line); }
.block-body{ background:transparent !important; }
.block-row{ background:transparent !important; color:var(--hl-tx); border-color:var(--hl-line) !important; }

/* ============================================================
   НОДЫ (форумы в списке)
   ============================================================ */
.node{ background:transparent !important; border-color:var(--hl-line) !important; transition:background .18s; }
.node:hover{ background:var(--hl-panel-hi) !important; }
.node-title,.node-title a{ font-family:'Forum',serif; font-size:17px; color:var(--hl-tx-bright) !important; }
.node:hover .node-title a{ color:var(--hl-gold) !important; }
.node-description{ color:var(--hl-tx-4) !important; font-size:13px; }
.node-icon i::before,.node-icon:before{ color:var(--hl-gold-2) !important; }
.node-icon{ color:var(--hl-gold-2) !important; }
/* стальная плитка под иконкой ноды */
.node--forum .node-icon{ background:linear-gradient(145deg,var(--hl-steel-3),var(--hl-steel-1));
  border:1px solid var(--hl-line-2); }
.node-stats,.node-statsMeta,.node-meta{ color:var(--hl-tx-4) !important; }
.node-extra-title a{ color:var(--hl-tx-2) !important; }
.node-extra-title a:hover{ color:var(--hl-gold) !important; }
.node-extra-user{ color:var(--hl-tx-3) !important; }

/* ============================================================
   САЙДБАР
   ============================================================ */
.p-body-sidebar .block-container{ background:var(--hl-panel) !important; }
.p-body-sidebar .block-header{ font-size:15px; }

/* ============================================================
   КНОПКИ — фирменные (золото-чёрный градиент + ромб + блик)
   ============================================================ */
.button,.button--link{ font-family:'Forum',serif; letter-spacing:.5px; }
.button--cta,.button.button--icon--login,.button--primary{
  position:relative; overflow:hidden; color:#f2ede8 !important;
  border:.5px solid var(--hl-brass) !important;
  background:linear-gradient(180deg,rgba(115,71,11,.82) 27%,rgba(0,0,0,.6) 125%) !important;
  box-shadow:0 4px 18px rgba(0,140,255,.08); transition:filter .25s,box-shadow .25s; }
.button--cta::after,.button--primary::after{ content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,225,170,.28),transparent); transform:skewX(-18deg);
  transition:left .5s; }
.button--cta:hover,.button--primary:hover{ filter:brightness(1.08); box-shadow:0 6px 24px rgba(255,181,96,.2); }
.button--cta:hover::after,.button--primary:hover::after{ left:130%; }
/* фирменный ромб над CTA-кнопкой */
.button--cta::before{ content:''; position:absolute; top:-4.5px; left:50%; z-index:4; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg); background:var(--hl-steel-2); border:1px solid var(--hl-brass);
  transition:transform .28s cubic-bezier(.3,1.4,.5,1),box-shadow .28s; }
.button--cta:hover::before{ transform:translateX(-50%) rotate(135deg) scale(1.25); box-shadow:0 0 12px rgba(255,181,96,.7); }

/* ============================================================
   ПРОЧЕЕ (ссылки, инпуты, футер)
   ============================================================ */
.input,.js-editor,textarea,select{ background:var(--hl-panel-hi) !important; color:var(--hl-tx) !important;
  border-color:var(--hl-line-2) !important; }
.p-footer{ border-top:1px solid var(--hl-line-2); color:var(--hl-tx-4); }
.p-footer a{ color:var(--hl-tx-3) !important; }
.p-footer a:hover{ color:var(--hl-gold) !important; }
.message-cell,.message-inner,.block-body{ color:var(--hl-tx); }

/* острые углы — как на сайте */
.block-container,.button,.input,.node,.contentRow,.structItem{ border-radius:0 !important; }

/* ============================================================
   КНОПКИ-КАРТИНКИ (вставляются виджетом/HTML в PAGE_CONTAINER;
   готовые стили, чтобы разметку осталось только добавить)
   ============================================================ */
.hl-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 4px; }
@media(max-width:860px){ .hl-tiles{ grid-template-columns:repeat(2,1fr); } }
.hl-tile{ position:relative; height:106px; overflow:hidden; border:2px solid var(--hl-gold-line);
  display:flex; align-items:center; padding:0 20px; box-shadow:0 8px 22px rgba(0,0,0,.5); transition:transform .2s,box-shadow .2s; }
.hl-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(255,181,96,.22); }
.hl-tile::before{ content:''; position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hl-tile::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(6,9,13,.92) 18%,rgba(20,27,36,.5) 70%,rgba(20,27,36,.25)); }
.hl-tile span{ position:relative; z-index:2; font-family:'Forum',serif; color:#fff; line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.85); }
.hl-tile span b{ display:block; font-size:22px; color:var(--hl-gold); font-weight:400; letter-spacing:.5px; }
.hl-tile span em{ font-style:normal; font-size:15px; letter-spacing:2px; color:#e7ddca; }