/* ========================================================================= CPRED // IMPLANT LAB — design tokens / темы оформления Тема выбирается атрибутом data-theme на : "green" (по умолч.), "red", "mono". Каждая тема переопределяет один и тот же набор переменных, включая *-rgb триплеты (нужны для rgba() в свечениях/тенях — обычный var(--c-accent) этого не даёт). ========================================================================= */ /* ========================================================================= CPRED // IMPLANT LAB — стили интерфейса ВНИМАНИЕ: палитры тем здесь БОЛЬШЕ НЕТ. Темы хранятся в базе и отдаются отдельным файлом /themes.css (генерируется в app.py из таблицы themes, редактируется ГМ через админку). Здесь остался только аварийный набор значений: если /themes.css почему-то не загрузится, интерфейс не рассыплется, а просто будет в зелёной теме по умолчанию. ========================================================================= */ :root { --c-bg: #0a0d12; --c-bg-grid: #0d1115; --c-panel: #10141c; --c-panel-2: #1a2230; --c-border: #1f2a3a; --c-border-lt: #2c3e52; --c-panel-light: #131a26; --c-text: #c8f7e5; --c-text-dim: #8aa89c; --c-text-faint: #516a60; --c-accent: #00f0a0; --c-accent-rgb: 0,240,160; --c-accent-light: #6dffce; --c-accent-ink: #04130d; --c-accent-2: #5fffd6; --c-accent-2-rgb: 95,255,214; --c-danger: #ff3b5c; --c-danger-rgb: 255,59,92; --c-warn: #ffb020; --c-warn-rgb: 255,176,32; --bg-grain-opacity: 0.012; } :root { /* Типографика */ --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius-sm: 6px; --radius-md: 12px; --glow: 0 0 22px rgba(var(--c-accent-rgb),0.18); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--c-bg); background-image: radial-gradient(ellipse at 50% -10%, rgba(var(--c-accent-rgb),0.07), transparent 55%), repeating-linear-gradient(0deg, rgba(255,255,255,var(--bg-grain-opacity)) 0 1px, transparent 1px 3px); color: var(--c-text); font-family: var(--font-body); font-size: calc(15 * var(--fs)); line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--c-accent-2); text-decoration: none; } ::selection { background: var(--c-accent); color: var(--c-accent-ink); } button { font-family: var(--font-body); cursor: pointer; } button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 2px; } .mono { font-family: var(--font-mono); } /* Полоса-предупреждение в духе корбука ("ВНИМАНИЕ! ДИСКЛЕЙМЕР") — переиспользуем ритм чёрно-жёлтых полос как фирменный мотив, но сдержанно: только тонкая линия. */ .hazard-rule { height: 5px; background: repeating-linear-gradient(135deg, var(--c-accent) 0 10px, #060807 10px 20px); box-shadow: 0 0 16px rgba(var(--c-accent-rgb),0.35); opacity: 0.95; } /* ========================================================================= Header ========================================================================= */ /* Шапка на сетке, а не в одну строку флексом. Было: логотип, оформление, пользователь, билды и циферблат ПЧ стояли в ряд с равным весом — глазу не за что зацепиться, а на планшете всё это сминалось в кашу. Стало две смысловые строки: слева — кто мы (логотип) и кто вошёл; центр — с чем работаем (выбор билда и кнопки); справа — главный показатель (человечность), он же самый крупный элемент. */ .topbar { position: relative; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand build gauge" "meta build gauge"; align-items: center; column-gap: 22px; row-gap: 4px; padding: 12px 22px; background: linear-gradient(180deg, var(--c-panel-light), var(--c-panel)); border-bottom: 2px solid var(--c-border); box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 0 60px rgba(var(--c-accent-rgb),0.04); } .brand { grid-area: brand; display: flex; flex-direction: column; } .theme-switcher { grid-area: meta; } .user-info { grid-area: meta; justify-self: start; margin-left: 118px; } .build-switcher { grid-area: build; justify-self: center; flex-wrap: wrap; } .humanity-gauge { grid-area: gauge; } /* Планшет: две строки вместо трёх колонок, ПЧ остаётся рядом с логотипом */ @media (max-width: 1100px) { .topbar { grid-template-columns: 1fr auto; grid-template-areas: "brand gauge" "build build" "meta meta"; row-gap: 8px; } .user-info { margin-left: 0; } .build-switcher { justify-self: stretch; } } .brand-mark { font-family: var(--font-display); font-weight: 700; font-size: calc(23 * var(--fs)); letter-spacing: 1px; text-transform: uppercase; color: var(--c-text); } .brand-mark span { color: var(--c-accent); text-shadow: 0 0 18px rgba(var(--c-accent-rgb),0.55); } .brand-sub { font-family: var(--font-mono); font-size: calc(10 * var(--fs)); letter-spacing: 1.5px; color: var(--c-text-faint); text-transform: uppercase; } .build-switcher { display: flex; align-items: center; gap: 8px; } /* Инфо о пользователе в шапке */ .user-info { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: 30px; font-size: calc(12 * var(--fs)); } .user-info .user-name { color: var(--c-text); font-weight: 600; } .user-info .user-role { font-family: var(--font-mono); font-size: calc(9.5 * var(--fs)); padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; } .user-info .user-role.role-gm { background: rgba(var(--c-warn-rgb),.15); color: var(--c-warn); border: 1px solid rgba(var(--c-warn-rgb),.5); } .user-info .user-role.role-player { background: rgba(var(--c-accent-rgb),.12); color: var(--c-accent); border: 1px solid rgba(var(--c-accent-rgb),.45); } /* Переключатель темы оформления */ .theme-switcher { position: relative; } .theme-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; background: linear-gradient(180deg, var(--c-panel-light), var(--c-panel)); border: 2px solid var(--c-border-lt); border-radius: var(--radius-md); box-shadow: 0 14px 36px rgba(0,0,0,.55); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 210px; } .theme-popover button { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; color: var(--c-text-dim); border-radius: var(--radius-sm); padding: 8px 10px; font-size: calc(12.5 * var(--fs)); text-align: left; } .theme-popover button:hover { background: var(--c-panel-2); color: var(--c-text); } .theme-popover button.active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(var(--c-accent-rgb),.08); } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,.15); } .theme-swatch-green { background: linear-gradient(135deg, #00f0a0, #0a0d12); } .theme-swatch-red { background: linear-gradient(135deg, #e8341f, #120907); } .theme-swatch-mono { background: linear-gradient(135deg, #b9c8e0, #0b0d11); } .theme-swatch-violet { background: linear-gradient(135deg, #c04cff, #0c0814); } .theme-swatch-amber { background: linear-gradient(135deg, #ffb12e, #100b04); } .theme-swatch-ice { background: linear-gradient(135deg, #38c6ff, #070d12); } .build-switcher select { background: var(--c-panel-2); color: var(--c-text); border: 2px solid var(--c-border-lt); border-radius: 30px; padding: 7px 14px; font-family: var(--font-body); font-size: calc(13 * var(--fs)); max-width: 200px; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); } .btn { border: 2px solid var(--c-border-lt); background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel-light)); color: var(--c-text); border-radius: 30px; padding: 7px 16px; font-size: calc(12.5 * var(--fs)); font-weight: 700; letter-spacing: .2px; box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: border-color .15s, color .15s, box-shadow .15s, transform .1s; } .btn:hover { border-color: var(--c-accent-2); color: var(--c-accent-2); box-shadow: 0 3px 14px rgba(var(--c-accent-rgb),.25); } .btn:active { transform: translateY(1px); } .btn-accent { background: linear-gradient(180deg, var(--c-accent-light), var(--c-accent)); color: var(--c-accent-ink); border-color: var(--c-accent); font-weight: 800; box-shadow: 0 3px 16px rgba(var(--c-accent-rgb),.45); } .btn-accent:hover { filter: brightness(1.08); border-color: var(--c-accent); color: var(--c-accent-ink); } .btn-danger { border-color: rgba(var(--c-danger-rgb),.4); } .btn-danger:hover { border-color: var(--c-danger); color: var(--c-danger); box-shadow: 0 3px 14px rgba(var(--c-danger-rgb),.25); } .btn-sm { padding: 4px 11px; font-size: calc(11 * var(--fs)); } .btn[disabled] { opacity: .4; cursor: not-allowed; } /* Циферблат Человечности — фирменный элемент интерфейса */ .humanity-gauge { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 2px solid var(--c-border); } .humanity-gauge svg { display: block; } .humanity-gauge-text { font-family: var(--font-mono); line-height: 1.2; } .humanity-gauge-text b { font-size: calc(17 * var(--fs)); color: var(--c-text); text-shadow: 0 0 14px rgba(var(--c-accent-rgb),.3); } .humanity-gauge-text small { display: block; font-size: calc(9 * var(--fs)); letter-spacing: 1px; color: var(--c-text-faint); text-transform: uppercase; } /* ========================================================================= Tabs ========================================================================= */ .tabs { display: flex; gap: 2px; padding: 0 22px; background: var(--c-panel); border-bottom: 2px solid var(--c-border); } .tab-btn { background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--c-text-faint); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; font-size: calc(13 * var(--fs)); padding: 13px 16px 10px; } .tab-btn:before { content: '['; opacity: .35; margin-right: 6px; } .tab-btn:after { content: ']'; opacity: .35; margin-left: 6px; } .tab-btn:hover { color: var(--c-text); background: rgba(var(--c-accent-rgb),0.05); } .tab-btn.active { color: var(--c-accent); border-bottom-color: var(--c-accent); text-shadow: 0 0 16px rgba(var(--c-accent-rgb),.35); } main { padding: 20px; max-width: 1320px; margin: 0 auto; } .view { display: none; } .view.active { display: block; } /* ========================================================================= Panels / общие карточки ========================================================================= */ .panel { background: linear-gradient(180deg, var(--c-panel-light), var(--c-panel)); border: 2px solid var(--c-border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--c-border); } .panel-title { font-family: var(--font-display); font-size: calc(12 * var(--fs)); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-text-dim); } .panel-body { padding: 14px; } /* ========================================================================= Конструктор ========================================================================= */ .constructor-grid { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .constructor-grid { grid-template-columns: 1fr; } } .doll-stage { position: relative; aspect-ratio: 9 / 20; border-radius: var(--radius-md); border: 2px solid var(--c-border); background-color: #0c1014; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(var(--c-accent-rgb),0.05); background-image: radial-gradient(ellipse at 50% 10%, rgba(var(--c-accent-rgb),0.08), transparent 50%), repeating-linear-gradient(0deg, rgba(var(--c-accent-2-rgb),0.025) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(var(--c-accent-2-rgb),0.025) 0 1px, transparent 1px 26px); } .doll-stage.has-bg { background-color: #05070a; } .doll-stage .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.95; } .doll-stage.has-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,15,.78) 0%, rgba(8,11,15,.12) 22%, rgba(8,11,15,.05) 60%, rgba(8,11,15,.55) 100%), radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(5,7,10,.55) 100%); pointer-events: none; z-index: 1; } .doll-silhouette { position: absolute; inset: 0; } .doll-stage.has-bg .doll-silhouette { opacity: 0; } .doll-bg-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 6; } .doll-bg-controls .btn-sm { background: rgba(16,20,28,.9); } /* Силуэт тела из простых форм (показывается, когда нет своего фона) */ .silhouette-shape { position: absolute; background: linear-gradient(180deg, rgba(var(--c-accent-2-rgb),0.14), rgba(var(--c-accent-2-rgb),0.04)); border: 2px solid rgba(var(--c-accent-2-rgb),0.32); box-shadow: 0 0 18px rgba(var(--c-accent-rgb),0.06) inset; } .s-head { width: 20%; height: 9%; top: 4%; left: 40%; border-radius: 50%; } .s-neck { width: 5%; height: 2.5%;top: 12.5%; left: 47.5%; } .s-torso { width: 38%; height: 22%; top: 15%; left: 31%; border-radius: 18px 18px 10px 10px; } .s-arm-l { width: 11%; height: 20%; top: 17%; left: 16%; border-radius: 10px; transform: rotate(6deg); } .s-arm-r { width: 11%; height: 20%; top: 17%; left: 73%; border-radius: 10px; transform: rotate(-6deg); } .s-leg-l { width: 15%; height: 32%; top: 37%; left: 32%; border-radius: 10px; } .s-leg-r { width: 15%; height: 32%; top: 37%; left: 53%; border-radius: 10px; } .slot-hotspot { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 66px; min-height: 66px; padding: 6px 6px; border-radius: 16px; border: 2px solid var(--c-accent-2); background: linear-gradient(160deg, rgba(var(--c-accent-2-rgb),0.14), rgba(10,14,18,0.92)); backdrop-filter: blur(6px); color: var(--c-accent-2); font-family: var(--font-mono); font-size: calc(9 * var(--fs)); font-weight: 700; letter-spacing: .3px; text-align: center; box-shadow: 0 0 10px rgba(var(--c-accent-2-rgb),.25), 0 4px 12px rgba(0,0,0,.6); /* НЕ используем transform: scale на hover, чтобы хотспоты не "прыгали". */ transition: border-color .15s, color .15s, background .15s, box-shadow .2s; z-index: 4; cursor: pointer; } .slot-hotspot .icon { font-size: calc(18 * var(--fs)); line-height: 1; margin-bottom: 2px; } .slot-hotspot .icon svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 0 6px rgba(var(--c-accent-rgb),.35)); } .slot-hotspot .icon img { max-width: 38px; max-height: 32px; display: block; object-fit: contain; filter: drop-shadow(0 0 5px rgba(0,0,0,.65)); } .slot-hotspot .label { font-size: calc(9.5 * var(--fs)); opacity: .9; line-height: 1.1; max-width: 100%; word-break: break-word; } /* Конечности — крупнее и заметнее, чтобы было удобно попадать */ .hs-left_arm, .hs-right_arm, .hs-left_leg, .hs-right_leg { width: 120px; min-height: 150px; border-radius: 20px; } .hs-left_arm .icon svg, .hs-right_arm .icon svg, .hs-left_leg .icon svg, .hs-right_leg .icon svg { width: 42px; height: 42px; } .hs-left_arm .icon img, .hs-right_arm .icon img, .hs-left_leg .icon img, .hs-right_leg .icon img { max-width: 88px; max-height: 112px; } .hs-left_arm .label, .hs-right_arm .label, .hs-left_leg .label, .hs-right_leg .label { font-size: calc(11 * var(--fs)); } .hs-body { width: 110px; min-height: 124px; } .hs-body .icon svg { width: 36px; height: 36px; } .hs-body .icon img { max-width: 88px; max-height: 92px; } .slot-hotspot .slots-badge { margin-top: 2px; font-size: calc(8.5 * var(--fs)); color: var(--c-text-faint); background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 7px; } .slot-hotspot:hover { border-color: var(--c-accent); color: var(--c-accent); box-shadow: 0 0 0 5px rgba(var(--c-accent-rgb),.15), 0 0 16px rgba(var(--c-accent-rgb),.45); } .slot-hotspot.filled { border-color: var(--c-accent); color: var(--c-accent); background: linear-gradient(160deg, rgba(var(--c-accent-rgb),0.18), rgba(8,18,14,0.92)); box-shadow: 0 0 14px rgba(var(--c-accent-rgb),.45), 0 4px 12px rgba(0,0,0,.6); } .slot-hotspot.filled:hover { box-shadow: 0 0 0 5px rgba(var(--c-accent-rgb),.22), 0 0 18px rgba(var(--c-accent-rgb),.6); } .slot-hotspot.selected { border-color: #fff; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 14px rgba(255,255,255,.35); } .slot-hotspot.drag-over { border-color: var(--c-accent); box-shadow: 0 0 0 7px rgba(var(--c-accent-rgb),.32), 0 0 20px rgba(var(--c-accent-rgb),.6); } .slot-hotspot .badge { position: absolute; bottom: -7px; right: -7px; background: var(--c-panel-2); border: 1px solid var(--c-border-lt); border-radius: 7px; font-size: calc(9 * var(--fs)); padding: 1px 4px; color: var(--c-text-dim); display: none; /* отключаем — теперь используем .slots-badge внутри */ } /* центрируем относительно точки на теле через translate(-50%,-50%) */ .slot-hotspot { transform: translate(-50%, -50%); } .hs-left_eye { top: 7.5%; left: 32%; } .hs-right_eye { top: 7.5%; left: 64%; } .hs-audio { top: 17%; left: 73%; } .hs-neural_interface { top: 19%; left: 50%; } .hs-netrunning_deck { top: 26%; left: 30%; } .hs-body { top: 39%; left: 50%; } .hs-left_arm { top: 42%; left: 18%; } .hs-right_arm { top: 42%; left: 82%; } .hs-left_leg { top: 81%; left: 30%; } .hs-right_leg { top: 81%; left: 70%; } .doll-legend { margin-top: 10px; font-size: calc(11 * var(--fs)); color: var(--c-text-faint); display: flex; gap: 14px; flex-wrap: wrap; } .doll-legend span { display: inline-flex; align-items: center; gap: 5px; } .legend-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-accent-2); display:inline-block;} .legend-dot.filled { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb),.25); } /* Инспектор / список совместимых имплантов */ .inspector-empty { padding: 40px 20px; text-align: center; color: var(--c-text-faint); font-size: calc(13 * var(--fs)); } .inspector-region-title { font-family: var(--font-display); font-size: calc(16 * var(--fs)); letter-spacing: .5px; text-transform: uppercase; color: var(--c-accent); } .subslot-tabs { display: flex; gap: 6px; margin: 10px 0 14px; flex-wrap: wrap; } .subslot-tabs button { border: 1px solid var(--c-border-lt); background: var(--c-panel-2); color: var(--c-text-dim); border-radius: var(--radius-sm); font-size: calc(11 * var(--fs)); padding: 5px 10px; } .subslot-tabs button.active { border-color: var(--c-accent-2); color: var(--c-accent-2); } .slot-capacity-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-family: var(--font-mono); font-size: calc(11 * var(--fs)); color: var(--c-text-dim); } .slot-capacity-bar .track { flex: 1; height: 6px; background: var(--c-panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--c-border); } .slot-capacity-bar .fill { height: 100%; background: var(--c-accent-2); } .slot-capacity-bar .fill.over { background: var(--c-danger); } .installed-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .installed-chip { display: flex; align-items: center; gap: 8px; background: var(--c-panel-2); border: 2px solid var(--c-border-lt); border-left: 4px solid var(--c-accent); border-radius: var(--radius-sm); padding: 7px 9px; font-size: calc(12.5 * var(--fs)); box-shadow: 0 2px 8px rgba(0,0,0,.25); } .installed-chip.base { border-left-color: var(--c-accent-2); font-weight: 700; box-shadow: 0 2px 10px rgba(var(--c-accent-2-rgb),.12); } .installed-chip .name { flex: 1; } .installed-chip .meta { color: var(--c-text-faint); font-family: var(--font-mono); font-size: calc(10.5 * var(--fs)); } .installed-chip button { background: none; border: none; color: var(--c-text-faint); font-size: calc(14 * var(--fs)); line-height: 1; padding: 2px 4px; } .installed-chip button:hover { color: var(--c-danger); } .compat-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding-right: 4px;} .compat-item { display: flex; align-items: center; gap: 10px; border: 2px solid var(--c-border); background: var(--c-panel-2); border-radius: var(--radius-sm); padding: 8px 10px; cursor: grab; } .compat-item:hover { border-color: var(--c-accent-2); box-shadow: 0 0 12px rgba(var(--c-accent-2-rgb),.15); } .compat-item[disabled], .compat-item.disabled { opacity: .35; cursor: not-allowed; } .compat-item .name { font-weight: 600; font-size: calc(12.5 * var(--fs)); flex: 1; } .compat-item .tag { font-family: var(--font-mono); font-size: calc(10 * var(--fs)); color: var(--c-text-faint); } .compat-item .price { font-family: var(--font-mono); font-size: calc(11 * var(--fs)); color: var(--c-accent); white-space: nowrap; } .compat-item .hl { font-family: var(--font-mono); font-size: calc(11 * var(--fs)); color: var(--c-danger); white-space: nowrap; } .compat-item .base-pick { display: block; margin-top: 6px; font-size: calc(10 * var(--fs)); color: var(--c-accent-2); text-transform: uppercase; letter-spacing: .4px; } /* Сворачиваемые секции (details/summary) в инспекторе */ details.section-collapsible { margin: 14px 0 4px; border: 2px solid var(--c-border-lt); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel-light)); overflow: hidden; } details.section-collapsible[open] { border-color: var(--c-accent); box-shadow: 0 0 16px rgba(var(--c-accent-rgb),.12); } details.section-collapsible > summary { cursor: pointer; list-style: none; padding: 11px 14px; font-family: var(--font-display); font-size: calc(13 * var(--fs)); letter-spacing: 1px; text-transform: uppercase; color: var(--c-accent); font-weight: 700; display: flex; align-items: center; justify-content: space-between; user-select: none; } details.section-collapsible > summary::-webkit-details-marker { display: none; } details.section-collapsible > summary::after { content: '▾'; font-family: var(--font-body); font-size: calc(14 * var(--fs)); transform: rotate(-90deg); transition: transform .2s; color: var(--c-accent); } details.section-collapsible[open] > summary::after { transform: rotate(0); } details.section-collapsible > summary:hover { background: rgba(var(--c-accent-rgb),.06); } details.section-collapsible > .section-body { padding: 8px 14px 14px; } details.section-collapsible.variant-swap > summary { color: var(--c-warn); } details.section-collapsible.variant-swap > summary::after { color: var(--c-warn); } details.section-collapsible.variant-swap[open] { border-color: var(--c-warn); box-shadow: 0 0 16px rgba(var(--c-warn-rgb),.15); } .stats-strip { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-family: var(--font-mono); } .stat-box { background: var(--c-panel-2); border: 2px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.3); } .stat-box .v { font-size: calc(18 * var(--fs)); color: var(--c-accent); text-shadow: 0 0 10px rgba(var(--c-accent-rgb),.3); } .stat-box .l { font-size: calc(9 * var(--fs)); letter-spacing: 1px; color: var(--c-text-faint); text-transform: uppercase; display:block; } /* Панель человечности */ .humanity-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .humanity-controls label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: calc(12 * var(--fs)); color: var(--c-text-dim); } .humanity-controls label.toggle-row { justify-content: flex-start; cursor: pointer; } .therapy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); } .therapy-label { font-size: calc(11.5 * var(--fs)); color: var(--c-text-dim); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; } .humanity-log-entry { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-border); font-size: calc(12.5 * var(--fs)); } .humanity-log-entry:last-child { border-bottom: none; } .humanity-log-entry .hl-name { flex: 1; color: var(--c-text); } .humanity-log-entry .hl-roll { font-family: var(--font-mono); color: var(--c-text-faint); font-size: calc(11 * var(--fs)); } .humanity-log-entry .hl-delta { font-family: var(--font-mono); font-weight: 700; min-width: 38px; text-align: right; } .humanity-log-entry .hl-delta.positive { color: var(--c-accent); } .humanity-log-entry .hl-delta.negative { color: var(--c-danger); } .humanity-log-entry .hl-time { font-size: calc(10 * var(--fs)); color: var(--c-text-faint); white-space: nowrap; } .humanity-controls input[type=number] { width: 80px; background: var(--c-panel-2); border: 2px solid var(--c-border-lt); color: var(--c-accent); border-radius: var(--radius-sm); padding: 5px 8px; font-family: var(--font-mono); font-size: calc(13 * var(--fs)); text-align: right; } .humanity-controls input[type=checkbox] { width: 16px; height: 16px; margin-right: 8px; accent-color: var(--c-accent); } .tier-banner { border-radius: var(--radius-sm); padding: 10px 12px; font-size: calc(12.5 * var(--fs)); line-height: 1.5; border: 2px solid var(--c-border-lt); } .tier-banner b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; font-size: calc(12 * var(--fs)); } .tier-banner.tier-good { border-color: rgba(var(--c-accent-rgb),.4); background: rgba(var(--c-accent-rgb),.07); color: var(--c-text); } .tier-banner.tier-good b { color: var(--c-accent); } .tier-banner.tier-warn { border-color: rgba(var(--c-warn-rgb),.45); background: rgba(var(--c-warn-rgb),.08); color: var(--c-text); } .tier-banner.tier-warn b { color: var(--c-warn); } .tier-banner.tier-danger { border-color: rgba(var(--c-danger-rgb),.5); background: rgba(var(--c-danger-rgb),.09); color: var(--c-text); } .tier-banner.tier-danger b { color: var(--c-danger); } /* ========================================================================= Библиотека ========================================================================= */ .library-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .library-controls input[type=search] { flex: 1; min-width: 200px; background: var(--c-panel-2); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: 30px; padding: 8px 16px; font-size: calc(13 * var(--fs)); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); } .chip-filter { display: flex; gap: 6px; flex-wrap: wrap; } .chip-filter button { border: 2px solid var(--c-border-lt); background: var(--c-panel-2); color: var(--c-text-dim); border-radius: 20px; padding: 6px 13px; font-size: calc(11.5 * var(--fs)); text-transform: uppercase; letter-spacing: .3px; } .chip-filter button.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 0 14px rgba(var(--c-accent-rgb),.4); } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .lib-card { background: linear-gradient(180deg, var(--c-panel-light), var(--c-panel)); border: 2px solid var(--c-border); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.3); } .lib-card:hover { border-color: var(--c-border-lt); } .lib-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;} .lib-card .name { font-weight: 700; font-size: calc(14 * var(--fs)); } .lib-card .cat { font-family: var(--font-mono); font-size: calc(9.5 * var(--fs)); color: var(--c-accent-2); text-transform: uppercase; letter-spacing: .5px;} .lib-card .desc { font-size: calc(12 * var(--fs)); color: var(--c-text-dim); flex: 1; } .lib-card .foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: calc(11 * var(--fs)); margin-top: 4px;} .lib-card .install-tag { font-size: calc(9.5 * var(--fs)); padding: 2px 7px; border-radius: 10px; border: 1px solid var(--c-border-lt); color: var(--c-text-faint); } .lib-card .price { color: var(--c-accent); } .lib-card .hl { color: var(--c-danger); } .lib-card .armor { color: var(--c-accent-2); } .lib-empty { padding: 50px; text-align: center; color: var(--c-text-faint); } /* ========================================================================= Оружие ========================================================================= */ .data-table { width: 100%; border-collapse: collapse; font-size: calc(12.5 * var(--fs)); margin-bottom: 26px; box-shadow: 0 6px 16px rgba(0,0,0,.3);} .data-table caption { text-align: left; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .6px; color: var(--c-accent); font-size: calc(13 * var(--fs)); padding-bottom: 8px; } .data-table th, .data-table td { border: 1px solid var(--c-border); padding: 7px 9px; text-align: center; } .data-table th { background: var(--c-panel-2); color: var(--c-text-dim); font-family: var(--font-mono); font-size: calc(10.5 * var(--fs)); text-transform: uppercase; letter-spacing: .4px; } .data-table td:first-child, .data-table th:first-child { text-align: left; } .data-table td.mono, .data-table td { font-family: var(--font-mono); } .data-table tr:hover td { background: rgba(var(--c-accent-rgb),0.06); } .data-table td.na { color: var(--c-text-faint); } .dc-cell { font-weight: 700; } .section-note { font-size: calc(12 * var(--fs)); color: var(--c-text-dim); margin: -8px 0 18px; max-width: 760px; } h2.section-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: calc(18 * var(--fs)); color: var(--c-text); margin: 28px 0 4px; border-left: 3px solid var(--c-accent); padding-left: 10px; } h2.section-h:first-child { margin-top: 0; } .toast-wrap { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; } .toast { background: var(--c-panel-2); border: 1px solid var(--c-border-lt); border-left: 3px solid var(--c-danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: calc(12.5 * var(--fs)); max-width: 320px; box-shadow: 0 6px 18px rgba(0,0,0,.4); } /* ========================================================================= Модальное окно (ввод имени билда) ========================================================================= */ .modal-overlay { position: fixed; inset: 0; background: rgba(5,7,9,.72); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { background: var(--c-panel); border: 1px solid var(--c-border-lt); border-top: 3px solid var(--c-accent); border-radius: var(--radius-md); padding: 18px 20px; width: 320px; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .modal-box h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: calc(14 * var(--fs)); margin: 0 0 12px; color: var(--c-text); } .modal-box input { width: 100%; background: var(--c-panel-2); border: 1px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 9px 11px; font-size: calc(14 * var(--fs)); margin-bottom: 14px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ========================================================================= Админка ========================================================================= */ .admin-subview { display: none; } .admin-subview.active { display: block; } .admin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .admin-toolbar input[type=search] { flex: 1; min-width: 200px; background: var(--c-panel-2); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: 30px; padding: 8px 16px; font-size: calc(13 * var(--fs)); } .admin-toolbar select { background: var(--c-panel-2); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 8px 12px; font-size: calc(13 * var(--fs)); } .admin-table-wrap { overflow-x: auto; } .admin-table td, .admin-table th { white-space: nowrap; } .admin-table td.wrap { white-space: normal; } .admin-table .row-actions { display: flex; gap: 6px; } .admin-table .row-actions button { border: 1px solid var(--c-border-lt); background: var(--c-panel-2); color: var(--c-text-dim); border-radius: var(--radius-sm); padding: 4px 10px; font-size: calc(11 * var(--fs)); } .admin-table .row-actions button:hover { border-color: var(--c-accent-2); color: var(--c-accent-2); } .admin-table .row-actions button.danger:hover { border-color: var(--c-danger); color: var(--c-danger); } .admin-form-box { width: 640px; max-width: 92vw; max-height: 86vh; overflow-y: auto; } .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 4px 0 16px; } .admin-form-grid .field-full { grid-column: 1 / -1; } .admin-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: calc(11.5 * var(--fs)); color: var(--c-text-dim); text-transform: uppercase; letter-spacing: .4px; } .admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea { background: var(--c-panel-2); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 9px 11px; font-family: var(--font-body); font-size: calc(13.5 * var(--fs)); text-transform: none; letter-spacing: 0; } .admin-form-grid textarea { resize: vertical; min-height: 60px; } .admin-form-grid .checkbox-field { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: calc(12.5 * var(--fs)); } .admin-form-grid .checkbox-field input { width: 17px; height: 17px; accent-color: var(--c-accent); } .admin-form-grid .field-hint { font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); text-transform: none; letter-spacing: 0; margin-top: 2px; } .admin-category-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--c-panel-2); border: 2px solid var(--c-border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; } .admin-category-card .cat-key { font-family: var(--font-mono); font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); width: 110px; } .admin-category-card input[type=text] { background: var(--c-panel); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 7px 11px; font-size: calc(13 * var(--fs)); width: 200px; } .admin-category-card input[type=number] { background: var(--c-panel); border: 2px solid var(--c-border-lt); color: var(--c-accent); border-radius: var(--radius-sm); padding: 7px 11px; font-size: calc(13 * var(--fs)); width: 90px; font-family: var(--font-mono); } .admin-category-card .na { color: var(--c-text-faint); font-size: calc(12 * var(--fs)); width: 90px; } .admin-user-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--c-panel-2); border: 2px solid var(--c-border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; } .admin-user-card .u-name { font-weight: 700; min-width: 140px; } .admin-user-card .u-created { font-family: var(--font-mono); font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); flex: 1; } .admin-user-card select { background: var(--c-panel); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 7px 11px; font-size: calc(13 * var(--fs)); } .admin-user-card .u-self-tag { font-family: var(--font-mono); font-size: calc(9.5 * var(--fs)); color: var(--c-accent-2); border: 1px solid rgba(var(--c-accent-2-rgb),.4); padding: 1px 7px; border-radius: 10px; text-transform: uppercase; } .workshop-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(var(--c-warn-rgb),.12), var(--c-panel)); border: 2px dashed rgba(var(--c-warn-rgb),.5); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 18px; } .workshop-banner-icon { font-size: calc(34 * var(--fs)); line-height: 1; flex-shrink: 0; } .workshop-banner-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; color: var(--c-warn); font-size: calc(16 * var(--fs)); font-weight: 700; margin-bottom: 4px; } .workshop-banner-text { color: var(--c-text-dim); font-size: calc(13.5 * var(--fs)); line-height: 1.5; } .role-subabilities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .role-subability { background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px 12px; } .role-subability-name { font-weight: 700; color: var(--c-accent-2); font-size: calc(12.5 * var(--fs)); margin-bottom: 3px; } .role-subability-desc { font-size: calc(12 * var(--fs)); color: var(--c-text-dim); line-height: 1.45; } .role-table-block { margin-top: 18px; } .role-table-title { font-family: var(--font-mono); font-size: calc(11 * var(--fs)); letter-spacing: .5px; text-transform: uppercase; color: var(--c-accent-2); margin-bottom: 8px; } .admin-registration-toggle { background: var(--c-panel-2); border: 2px solid var(--c-border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; } .admin-create-user-card { background: var(--c-panel-2); border: 2px dashed var(--c-border-lt); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 18px; } .admin-create-user-row { display: flex; gap: 8px; flex-wrap: wrap; } .admin-create-user-row input[type=text], .admin-create-user-row input[type=password] { background: var(--c-panel); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 8px 11px; font-size: calc(13 * var(--fs)); flex: 1; min-width: 160px; } .admin-create-user-row select { background: var(--c-panel); border: 2px solid var(--c-border-lt); color: var(--c-text); border-radius: var(--radius-sm); padding: 8px 11px; font-size: calc(13 * var(--fs)); } footer.app-footer { text-align: center; padding: 24px; color: var(--c-text-faint); font-size: calc(11 * var(--fs)); font-family: var(--font-mono); } /* === Полупрозрачный задний фон "Найт Сити" (фиксированный, под контентом) === */ body::before { content: ''; position: fixed; inset: 0; background-image: url("/static/img/nightcity.jpg"); background-size: cover; background-position: center; opacity: 0.20; z-index: 0; pointer-events: none; } /* затемнение поверх фото, чтобы текст оставался читаемым */ body::after { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(var(--c-accent-rgb),0.04), transparent 40%), var(--c-bg); opacity: 0.55; z-index: 0; pointer-events: none; } body > * { position: relative; z-index: 1; } .toast-wrap { z-index: 50; } /* ===================== АВАТАР БИЛДА ===================== */ .avatar-card { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .avatar-frame { width: 86px; height: 86px; flex-shrink: 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--c-accent-2); background: linear-gradient(160deg, rgba(var(--c-accent-2-rgb),0.14), rgba(10,14,18,0.92)); box-shadow: 0 0 14px rgba(var(--c-accent-rgb),.25); display: flex; align-items: center; justify-content: center; } .avatar-frame img { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--c-text-faint); font-size: calc(9 * var(--fs)); text-align: center; font-family: var(--font-mono); } .avatar-actions { display: flex; flex-direction: column; gap: 6px; } /* ===================== МОДДЕР ОРУЖИЯ ===================== */ .modder-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; } @media (max-width: 860px) { .modder-layout { grid-template-columns: 1fr; } } .modder-picker .panel-body > input[type="search"] { width: 100%; margin-bottom: 10px; } .modder-weapon-list { display: flex; flex-direction: column; gap: 6px; max-height: 540px; overflow-y: auto; } .modder-weapon { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 10px; text-align: left; background: var(--c-panel-2); border: 1px solid var(--c-border); color: var(--c-text); transition: border-color .15s, background .15s; } .modder-weapon:hover { border-color: var(--c-accent); } .modder-weapon.active { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb),.1); box-shadow: 0 0 0 1px var(--c-accent) inset; } .mw-icon { width: 46px; height: 30px; color: var(--c-accent-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mw-img { max-width: 46px; max-height: 30px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); } .mw-svg svg { width: 40px; height: 20px; } .mw-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; } .mw-text small { color: var(--c-text-dim); font-size: calc(11 * var(--fs)); } .mw-badge { font-family: var(--font-mono); font-size: calc(10 * var(--fs)); color: var(--c-accent); background: rgba(var(--c-accent-rgb),.12); padding: 2px 6px; border-radius: 7px; } .bench-weapon { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); } .bench-weapon-visual { width: 120px; min-width: 120px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c-accent); } .bench-img { max-width: 120px; max-height: 64px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(0,0,0,.7)); } .bench-svg svg { width: 64px; height: 32px; filter: drop-shadow(0 0 8px rgba(var(--c-accent-rgb),.4)); } .bench-weapon-info { flex: 1; min-width: 0; } .bench-weapon-info h3 { margin: 0 0 4px; font-family: var(--font-head); } .bench-weapon-stats { display: flex; flex-wrap: wrap; gap: 6px; } .bench-weapon-stats span { font-size: calc(11 * var(--fs)); font-family: var(--font-mono); color: var(--c-text-dim); background: var(--c-panel-2); padding: 2px 7px; border-radius: 6px; } .bench-weapon-price { text-align: right; flex-shrink: 0; } .bench-weapon-price small { display: block; color: var(--c-text-faint); font-size: calc(10 * var(--fs)); } .bench-weapon-price b { color: var(--c-accent); font-size: calc(16 * var(--fs)); } .bench-slots-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; } .bench-slots-head > span { font-family: var(--font-mono); font-size: calc(13 * var(--fs)); } .bench-upgrade { font-size: calc(12 * var(--fs)); color: var(--c-text-dim); } .bench-slots { display: grid; gap: 8px; margin-bottom: 16px; } .slot-cell { min-height: 54px; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(12 * var(--fs)); font-family: var(--font-mono); position: relative; } .slot-cell.empty { border: 1.5px dashed var(--c-border-lt); color: var(--c-text-faint); justify-content: center; } .slot-cell.filled { border: 1.5px solid var(--c-accent); color: var(--c-accent); background: rgba(var(--c-accent-rgb),.1); } .slot-remove { background: transparent; border: none; color: var(--c-danger); font-size: calc(13 * var(--fs)); padding: 2px 4px; } .bench-mods-title { font-family: var(--font-head); font-size: calc(14 * var(--fs)); margin-bottom: 8px; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: .5px; } .bench-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .mod-option { padding: 9px 11px; border-radius: 10px; cursor: pointer; background: var(--c-panel-2); border: 1px solid var(--c-border); transition: border-color .15s, background .15s; } .mod-option:not(.disabled):hover { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb),.08); } .mod-option.disabled { opacity: .5; cursor: not-allowed; } .mo-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .mo-head b { font-size: calc(13 * var(--fs)); } .mo-head .mono { font-size: calc(10.5 * var(--fs)); color: var(--c-text-dim); } .mo-meta { font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); margin-top: 3px; font-family: var(--font-mono); } .mo-reason { color: var(--c-warn); } /* === Скрипты нетраннера: бейджи уровней === */ .net-tier { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: calc(11 * var(--fs)); font-family: var(--font-mono); white-space: nowrap; border: 1px solid var(--c-border-lt); } .net-tier.tier-simple { color: var(--c-accent-2); background: rgba(var(--c-accent-2-rgb),.12); border-color: var(--c-accent-2); } .net-tier.tier-std { color: var(--c-accent); background: rgba(var(--c-accent-rgb),.12); border-color: var(--c-accent); } .net-tier.tier-hard { color: var(--c-warn); background: rgba(var(--c-warn-rgb),.12); border-color: var(--c-warn); } .net-tier.tier-adv { color: var(--c-danger); background: rgba(var(--c-danger-rgb),.12); border-color: var(--c-danger); } /* === Админ: редактор ролей === */ .admin-role-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .admin-role-field > .field-hint { font-size: calc(12 * var(--fs)); color: var(--c-text-dim); } .admin-role-table { border: 1px solid var(--c-border-lt); border-radius: 10px; padding: 12px; margin-top: 14px; background: rgba(255,255,255,.02); } .admin-role-table .admin-table-wrap { overflow-x: auto; } .link-btn { background: none; border: none; color: var(--c-accent); cursor: pointer; padding: 0; } .link-btn:hover { text-decoration: underline; } /* карточка библиотеки: вынесено из инлайнового style, чтобы разметку можно было собирать одной строкой */ .lib-card-tag { font-family: var(--font-mono); font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); } /* ========================================================================= СЛОЙ ОФОРМЛЕНИЯ — независим от палитры Палитра (тема) приходит из /themes.css и управляется атрибутом data-theme. Здесь — всё остальное, что игрок может настроить под себя: data-font = набор шрифтов (список в appearance.py) data-scale = compact | normal | large размер текста data-corners = round | notch форма элементов data-fx = on | off атмосферные эффекты Все четыре независимы: любую тему можно смотреть любым шрифтом. ========================================================================= */ :root { /* Единица масштаба текста. Все font-size в файле записаны как calc(N * var(--fs)) — поэтому размер всего интерфейса меняется одним значением, а не правкой сотни правил. */ --fs: 1px; /* Срез угла в стиле интерфейсов CP2077 */ --notch: 10px; --clip-notch: polygon( var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch) ); } /* --- Размер текста ------------------------------------------------------ */ [data-scale="compact"] { --fs: 0.92px; } [data-scale="normal"] { --fs: 1px; } [data-scale="large"] { --fs: 1.12px; } /* --- Наборы шрифтов ----------------------------------------------------- */ /* Блоки html[data-font="..."] генерируются приложением в /themes.css из appearance.py — там же, где лежат ссылки на Google Fonts. Держать имена семейств в двух местах нельзя: они разъедутся при первой же правке. */ /* --- Форма элементов ---------------------------------------------------- */ [data-corners="notch"] { --radius-sm: 0px; --radius-md: 0px; } [data-corners="notch"] .btn, [data-corners="notch"] .panel, [data-corners="notch"] .slot-hotspot, [data-corners="notch"] .lib-card, [data-corners="notch"] .stat-box, [data-corners="notch"] .modal-box, [data-corners="notch"] .theme-popover, [data-corners="notch"] .compat-item, [data-corners="notch"] .admin-form-box, [data-corners="notch"] .admin-user-card, [data-corners="notch"] .admin-category-card, [data-corners="notch"] .tier-banner { border-radius: 0; clip-path: var(--clip-notch); } /* Мелкие кнопки со срезом в 10px выглядят обгрызенными — уменьшаем срез */ [data-corners="notch"] .btn-sm, [data-corners="notch"] .slot-hotspot { --notch: 7px; } /* --- Атмосферные эффекты ------------------------------------------------ */ /* Скан-линия поверх интерфейса. pointer-events:none обязателен — иначе слой перехватит все клики. */ [data-fx="on"] body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } [data-fx="off"] { --glow: none; --bg-grain-opacity: 0; } [data-fx="off"] body::after { display: none; } /* --- Общее для читаемости ----------------------------------------------- */ /* Цифры ПЧ и цен — табличными, чтобы не «прыгали» при пересчёте */ .mono, .humanity-gauge b, .stat-box .v, .data-table td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Планшет за столом: пальцем нужно попадать, а не целиться */ @media (pointer: coarse) { .btn, .tab-btn, .compat-item { min-height: 44px; } } /* Уважение к системной настройке «меньше движения» и к слабым планшетам */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } [data-fx="on"] body::after { display: none; } } /* ========================================================================= Панель «Оформление» в шапке ========================================================================= */ .appearance-popover { flex-direction: column; gap: 14px; width: 300px; max-height: 70vh; overflow-y: auto; padding: 14px; } .ap-section { display: flex; flex-direction: column; gap: 7px; } .ap-title { font-family: var(--font-display); font-size: calc(10.5 * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); } .ap-row { display: flex; flex-wrap: wrap; gap: 6px; } .ap-row button, .ap-themes button { flex: 1 1 auto; min-width: 84px; padding: 7px 9px; font-size: calc(11.5 * var(--fs)); background: var(--c-panel-2); color: var(--c-text-dim); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s ease, color .12s ease; } .ap-row button:hover, .ap-themes button:hover { border-color: var(--c-border-lt); color: var(--c-text); } /* Активный вариант подсвечен акцентом — ровно один на группу */ .ap-row button.active, .ap-themes button.active { border-color: var(--c-accent); color: var(--c-accent); box-shadow: 0 0 0 1px rgba(var(--c-accent-rgb), .35); } .ap-themes { display: flex; flex-direction: column; gap: 6px; } .ap-themes button { display: flex; align-items: center; gap: 9px; text-align: left; } /* Мини-превью палитры: три ключевых цвета темы прямо в кнопке — видно, как тема выглядит, ещё до её включения */ .ap-swatch { display: inline-flex; width: 34px; height: 16px; border-radius: 3px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); } .ap-swatch i { display: block; height: 100%; flex: 1; } .ap-hint { font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); line-height: 1.4; } /* ========================================================================= Редактор тем в админке ========================================================================= */ .theme-editor { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; } .theme-list { display: flex; flex-direction: column; gap: 6px; } .theme-list button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; background: var(--c-panel-2); color: var(--c-text-dim); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; font-size: calc(12 * var(--fs)); } .theme-list button.active { border-color: var(--c-accent); color: var(--c-accent); } .theme-list .builtin-tag { margin-left: auto; font-size: calc(9.5 * var(--fs)); color: var(--c-text-faint); } .theme-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 8px; } .token-row { display: flex; align-items: center; gap: 8px; } .token-row label { flex: 1; font-family: var(--font-mono); font-size: calc(11 * var(--fs)); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token-row input[type="color"] { width: 38px; height: 28px; padding: 0; border: 1px solid var(--c-border); background: none; cursor: pointer; } .token-row input[type="text"] { width: 96px; font-family: var(--font-mono); font-size: calc(11 * var(--fs)); } .theme-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; } @media (max-width: 900px) { .theme-editor { grid-template-columns: 1fr; } } /* Кнопки выбора шрифта: каждая написана своим же шрифтом, поэтому они разной ширины — даём им место и не сжимаем в одну строку. */ .ap-fonts button { flex: 1 1 46%; text-align: center; padding: 9px 8px; font-size: calc(12.5 * var(--fs)); line-height: 1.2; } /* ========================================================================= Фокус внимания: светится ровно один элемент — тот, с которым работают. До этого акцентная рамка была у активной вкладки, выбранной зоны, кнопок и панелей одновременно — интерфейс «кричал» всем сразу, и взгляд не находил точку входа. ========================================================================= */ .slot-hotspot { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .slot-hotspot.selected { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 0 26px -6px rgba(var(--c-accent-rgb), .6); transform: translateY(-1px); } /* Заполненные зоны обозначаем спокойно — цветом рамки, без свечения: свечение зарезервировано за выбранным элементом. */ .slot-hotspot.filled:not(.selected) { border-color: var(--c-border-lt); box-shadow: none; } /* Клавиатурная навигация: видимый фокус — это доступность, а не украшение */ .btn:focus-visible, .tab-btn:focus-visible, .slot-hotspot:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 2px; } /* Кнопки терапии: параметры второй строкой — видно без наведения */ .therapy-btn { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; } .therapy-btn small { font-family: var(--font-mono); font-size: calc(9.5 * var(--fs)); color: var(--c-text-faint); letter-spacing: .02em; } /* Кнопка «Установить» на карточке библиотеки */ .lib-install { width: 100%; margin-top: 8px; } /* Меню выбора конечности — всплывает над карточкой */ .target-menu { position: absolute; left: 0; right: 0; bottom: 100%; flex-direction: column; gap: 4px; padding: 6px; z-index: 50; } /* ========================================================================= ЛИСТ ПЕРСОНАЖА: характеристики, здоровье, навыки ========================================================================= */ .character-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; } .character-grid__skills { grid-column: 1 / -1; } @media (max-width: 900px) { .character-grid { grid-template-columns: 1fr; } } /* --- HUD-рамка: полупрозрачная панель с уголковой меткой --------------- */ .hud-frame { position: relative; } .hud-frame::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; pointer-events: none; border-top: 2px solid var(--c-accent); border-right: 2px solid var(--c-accent); opacity: .55; } /* --- Характеристики ---------------------------------------------------- */ .stat-group + .stat-group { margin-top: 12px; } .stat-group__title { font-family: var(--font-display); font-size: calc(10 * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: 6px; } .stat-row { display: flex; flex-wrap: wrap; gap: 8px; } .stat-cell { display: grid; justify-items: center; gap: 2px; min-width: 62px; padding: 7px 6px; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .stat-cell__value { width: 46px; text-align: center; background: none; border: none; font-family: var(--font-display); font-size: calc(21 * var(--fs)); line-height: 1; color: var(--c-accent-2); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .stat-cell__value::-webkit-outer-spin-button, .stat-cell__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stat-cell__key { font-family: var(--font-mono); font-size: calc(9.5 * var(--fs)); letter-spacing: .1em; color: var(--c-text-dim); } /* --- Полоса здоровья --------------------------------------------------- */ .hp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .hp-title { font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-size: calc(11 * var(--fs)); color: var(--c-text-dim); } .hp-numbers { font-size: calc(19 * var(--fs)); color: var(--c-accent-2); font-variant-numeric: tabular-nums; } .hp-bar { position: relative; height: 16px; overflow: hidden; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } /* Цвет стадии ранения задаётся ОДНОЙ переменной: так же красится текст состояния ниже, и они не могут разъехаться. */ .hp-bar[data-wound="healthy"], .hp-bar[data-wound="light"] { --hp-color: var(--c-accent-2); } .hp-bar[data-wound="serious"] { --hp-color: var(--c-warn); } .hp-bar[data-wound="mortal"] { --hp-color: var(--c-danger); } .hp-bar__fill { height: 100%; width: 0; background: var(--hp-color, var(--c-accent-2)); box-shadow: 0 0 18px -4px var(--hp-color, var(--c-accent-2)); transition: width .28s ease, background-color .2s ease; } /* Засечка порога тяжёлого ранения */ .hp-bar__threshold { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-danger); opacity: .75; } .hp-state { display: flex; gap: 8px; align-items: baseline; margin-top: 7px; flex-wrap: wrap; } .hp-state b { font-family: var(--font-display); letter-spacing: .06em; } .hp-state span { font-size: calc(11.5 * var(--fs)); color: var(--c-text-dim); } .hp-state[data-wound="serious"] b { color: var(--c-warn); } .hp-state[data-wound="mortal"] b { color: var(--c-danger); } /* Глитч только на смертельном ранении и только если эффекты включены: мигающий текст в спокойном состоянии — визуальный шум, а здесь он несёт смысл «персонаж умирает, каждый ход спасбросок». */ [data-fx="on"] .hp-state[data-wound="mortal"] b { animation: hp-glitch 1.4s steps(3, end) infinite; text-shadow: 1px 0 var(--c-accent-2), -1px 0 var(--c-danger); } @keyframes hp-glitch { 0%, 82%, 100% { transform: translateX(0); opacity: 1; } 86% { transform: translateX(-2px); opacity: .75; } 92% { transform: translateX(2px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-fx="on"] .hp-state[data-wound="mortal"] b { animation: none; } } .hp-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .hp-input { width: 74px; text-align: center; padding: 6px; background: var(--c-panel-2); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .hp-derived { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: calc(11 * var(--fs)); color: var(--c-text-dim); } .hp-derived b { color: var(--c-text); } /* --- Навыки ------------------------------------------------------------ */ .skill-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; } .skill-toolbar input[type="search"] { min-width: 180px; } .skill-group { margin-bottom: 14px; } .skill-group__title { font-family: var(--font-display); font-size: calc(10.5 * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); border-bottom: 1px solid var(--c-border); padding-bottom: 4px; margin-bottom: 6px; } .skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 14px; } .skill-row { display: grid; grid-template-columns: 1fr auto 54px 38px; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.03); } /* Прокачанные подсвечены, остальные приглушены: на листе 66 навыков, и глаз должен сразу находить те, что у персонажа реально есть. */ .skill-row__name { color: var(--c-text-faint); font-size: calc(12 * var(--fs)); } .skill-row.is-trained .skill-row__name { color: var(--c-text); } .skill-row.is-trained .skill-row__base { color: var(--c-accent-2); } .skill-x2 { font-style: normal; font-size: calc(9 * var(--fs)); color: var(--c-warn); margin-left: 4px; vertical-align: super; } .skill-row__stat { font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); } .skill-row__lvl { width: 54px; text-align: center; padding: 3px; background: var(--c-panel-2); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .skill-row__base { text-align: right; font-size: calc(13 * var(--fs)); color: var(--c-text-dim); font-variant-numeric: tabular-nums; } /* ========================================================================= ЛИЧНЫЙ КАБИНЕТ ========================================================================= */ .dash-wrap { max-width: 1180px; margin: 0 auto; padding: 22px; } .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .char-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; } .char-card:hover { border-color: var(--c-accent); box-shadow: 0 0 24px -8px rgba(var(--c-accent-rgb), .5); } .char-card__portrait { width: 76px; height: 76px; object-fit: cover; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .char-card__name { font-family: var(--font-display); font-size: calc(15 * var(--fs)); } .char-card__role { font-size: calc(11 * var(--fs)); color: var(--c-text-dim); margin-bottom: 6px; } .char-card__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } /* ========================================================================= ЭКИПИРОВКА: слоты брони и оружия ========================================================================= */ .armor-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--c-border); font-size: calc(11.5 * var(--fs)); color: var(--c-text-dim); } .armor-summary b { color: var(--c-accent-2); font-size: calc(15 * var(--fs)); } .armor-summary__penalty { color: var(--c-warn); } .armor-summary__penalty b { color: var(--c-warn); } .gear-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .gear-slot { position: relative; padding: 8px 10px; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .gear-slot.is-filled { border-color: var(--c-border-lt); } .gear-slot__label { font-family: var(--font-display); font-size: calc(9.5 * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: 5px; } .gear-slot__body { display: flex; align-items: center; gap: 9px; } /* Неоновая подсветка предмета: свечение берёт цвет акцента темы, поэтому выглядит своим в любой из семи палитр. */ .gear-slot__img { width: 62px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(var(--c-accent-2-rgb), .45)); } .gear-slot__info { flex: 1; min-width: 0; } .gear-slot__name { font-size: calc(12.5 * var(--fs)); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gear-slot__stats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: calc(10.5 * var(--fs)); color: var(--c-accent-2); } .gear-slot__sp { width: 46px; text-align: center; padding: 1px 3px; background: var(--c-panel); color: var(--c-accent-2); border: 1px solid var(--c-border); border-radius: 3px; } .gear-slot__off, .gear-slot__add { flex-shrink: 0; } .gear-picker { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; padding: 6px; } .gear-picker button { display: flex; align-items: center; gap: 8px; text-align: left; } .gear-picker__img { width: 44px; height: 28px; object-fit: contain; flex-shrink: 0; } .gear-picker button i { display: block; font-style: normal; font-family: var(--font-mono); font-size: calc(10 * var(--fs)); color: var(--c-text-faint); } /* ============ МАСТЕРСКАЯ: сборщик оружия ============ */ .wk-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .wk-controls label { display: flex; flex-direction: column; gap: 4px; font-size: calc(10.5 * var(--fs)); color: var(--c-text-faint); } .wk-components { display: grid; gap: 6px; margin-bottom: 12px; } .wk-comp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wk-comp__slot { min-width: 96px; font-family: var(--font-display); font-size: calc(11.5 * var(--fs)); letter-spacing: .06em; } .wk-comp__effect { max-width: 220px; } .wk-comp__price { width: 84px; text-align: right; } .wk-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .wk-stat { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 8px 10px; background: var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .wk-stat .v { font-family: var(--font-display); font-size: calc(19 * var(--fs)); color: var(--c-accent-2); font-variant-numeric: tabular-nums; } .wk-stat .l { font-size: calc(9.5 * var(--fs)); color: var(--c-text-faint); letter-spacing: .08em; text-transform: uppercase; } .wk-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; margin-top: 4px; } .wk-tag { padding: 3px 9px; font-size: calc(10.5 * var(--fs)); color: var(--c-accent-ink); background: var(--c-accent); border-radius: var(--radius-sm); } /* Пометки о «поганых» узлах — предупреждающим цветом: это то, чем игрок расплачивается за дешевизну, и оно должно быть видно сразу. */ .wk-note { padding: 3px 9px; font-size: calc(10.5 * var(--fs)); color: var(--c-warn); border: 1px solid var(--c-warn); border-radius: var(--radius-sm); } .wk-save { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .wk-save input[type="text"] { min-width: 220px; } .wk-save input[type="number"] { width: 120px; } /* ============ ВЕРСТАК: слоты прямо на картинке оружия ============ */ .bench-canvas { position: relative; width: 100%; aspect-ratio: 16 / 7; margin: 10px 0 14px; background: radial-gradient(ellipse at 50% 55%, rgba(var(--c-accent-2-rgb), .07), transparent 65%), var(--c-panel-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; } .bench-canvas__img { position: absolute; inset: 6% 8%; width: 84%; height: 88%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(var(--c-accent-2-rgb), .25)); } .bench-canvas__svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-text-faint); opacity: .5; } .bench-canvas__svg svg { width: 42%; height: 42%; } /* Точка слота на оружии. Свободные подсвечены акцентом и «дышат» — взгляд сразу находит, куда ещё можно поставить мод. */ .wslot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; background: rgba(0, 0, 0, .58); border: 1px solid var(--c-border-lt); border-radius: var(--radius-sm); font-size: calc(10.5 * var(--fs)); white-space: nowrap; backdrop-filter: blur(2px); } .wslot__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .wslot.is-free { border-color: var(--c-accent); color: var(--c-accent); } .wslot.is-free .wslot__dot { background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); } .wslot.is-filled { border-color: var(--c-accent-2); color: var(--c-text); } .wslot.is-filled .wslot__dot { background: var(--c-accent-2); } /* Слот, добавленный доработкой, помечаем пунктиром: это не «родной» слот ствола */ .wslot.is-extra { border-style: dashed; } .wslot__off { background: none; border: none; cursor: pointer; padding: 0 2px; color: var(--c-danger); font-size: calc(11 * var(--fs)); } [data-fx="on"] .wslot.is-free .wslot__dot { animation: wslot-pulse 2.2s ease-in-out infinite; } @keyframes wslot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .wslot.is-free .wslot__dot { animation: none; } } @media (max-width: 700px) { .bench-canvas { aspect-ratio: 4 / 3; } .wslot { font-size: calc(9.5 * var(--fs)); padding: 2px 6px; } } /* ============ ЗАКЛАДКИ ВНУТРИ РАЗДЕЛА ============ */ .subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--c-border); } .subtab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--c-text-dim); cursor: pointer; font-family: var(--font-display); font-size: calc(12 * var(--fs)); letter-spacing: .08em; text-transform: uppercase; transition: color .12s ease, border-color .12s ease; } .subtab:hover { color: var(--c-text); } .subtab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); } .subview { display: none; } .subview.active { display: block; } @media (pointer: coarse) { .subtab { min-height: 44px; } }