@charset "utf-8"; /* ============================================================================= ARMLIX — дизайн-система, версия 3 «пиксель» ----------------------------------------------------------------------------- Материал интерфейса — не стекло и не бумага, а игровая панель: прямые углы, фаска в три пикселя (светлая сверху-слева, тёмная снизу-справа), физический торец под кнопкой и тень текста в один шаг. Нажатие уводит кнопку ровно на глубину торца — то же движение, что в самой игре. Всё держится на переменных: толщина фаски, глубина торца, палитра, фон и шрифты меняются из админпанели («ARMLIX: настройки сети» → Оформление), которая дописывает :root поверх этого файла. Имена классов совпадают с версиями 1 и 2 — разметка плагинов не менялась. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Шрифты Handjet — пиксельный дисплейный, Golos Text — для длинных описаний. Подключение (Google Fonts или локальные файлы) задаётся настройкой и вставляется в ; здесь только запасные локальные начертания. -------------------------------------------------------------------------- */ @font-face { font-family: 'ARMLIX Display'; src: url('../fonts/Handjet.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'ARMLIX Text'; src: url('../fonts/GolosText-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'ARMLIX Text'; src: url('../fonts/GolosText-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'ARMLIX Text'; src: url('../fonts/GolosText-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'ARMLIX Text'; src: url('../fonts/GolosText-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ----------------------------------------------------------------------------- 2. Токены -------------------------------------------------------------------------- */ :root { /* --- фон и полосы --- */ --bg: #12110d; --bg-deep: #0d0c09; --bg-foot: #1c1a15; --bg-bar: #1c1a15; --bg-image: url('../images/skin/bg-site.png'); --bg-fix: fixed; --bg-dim-1: rgba(18,17,13,.52); --bg-dim-2: rgba(18,17,13,.62); /* --- корпус панели: фаска светлая/тёмная --- */ --frame: #4a463d; --frame-hi: #6e6860; --frame-lo: #2b2823; --head: #3f3b33; --head-hi: #5a5449; --head-lo: #262319; /* --- колодец: та же фаска, вывернутая наизнанку --- */ --well: #181712; --well-hi: #33302a; --well-lo: #0c0b08; --row: #221f19; --btn: #55504a; --btn-hi: #6e6860; --btn-lo: #322e29; --chip: #3a352c; --chip-hi: #524b3e; --chip-lo: #211e18; /* совместимость с прежними именами */ --panel-1: #4a463d; --panel-2: #4a463d; --panel-lit: #55504a; --head-1: #3f3b33; --head-2: #322f28; --btn-1: #55504a; --btn-2: #55504a; --chip-1: #3a352c; --chip-2: #3a352c; /* --- чернила --- */ --ink: #f2f0e4; --ink-hi: #ffffff; --ink-2: #ded8c7; --ink-3: #c4beaf; --ink-4: #a8a293; --ink-5: #9a9384; --ink-6: #9a9384; --ink-7: #8d8578; --ink-8: #6f6a5e; /* --- акцент --- */ --gold: #ffcc33; --gold-hi: #ffe680; --gold-lo: #a9761a; --gold-lt: #ffe680; --gold-pale: #fff3c4; --gold-warm: #ffe680; --gold-dp: #a9761a; --gold-edge: #a9761a; --gold-2: #ffcc33; --gold-dim: rgba(255,204,51,.16); --gold-line: rgba(255,204,51,.34); --on-gold: #2b2118; --patina: #55c355; --patina-dim: rgba(85,195,85,.4); --rust: #ff5555; --rust-lt: #ff8080; --rust-dp: #a33636; /* --- линии --- */ --hair: rgba(0,0,0,.5); --hair-2: rgba(0,0,0,.6); --hair-3: rgba(255,255,255,.08); --hair-4: rgba(255,255,255,.12); --line: rgba(0,0,0,.55); --line-soft: rgba(255,255,255,.07); --sheen: rgba(255,255,255,.08); --sheen-2: rgba(255,255,255,.04); /* --- фаска: толщина и глубина торца --- */ --px: 3px; --px-sm: 2px; --drop: 4px; --sh: rgba(0,0,0,.45); --sh-2: rgba(0,0,0,.42); --ts: 2px 2px 0 rgba(0,0,0,.6); --ts-soft: 2px 2px 0 rgba(0,0,0,.5); --ts-gold: 2px 2px 0 rgba(255,255,255,.28); --sh-frame: inset var(--px) var(--px) 0 var(--frame-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--frame-lo), var(--drop) var(--drop) 0 var(--sh-2); --sh-frame-f: inset var(--px) var(--px) 0 var(--frame-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--frame-lo); --sh-panel: var(--sh-frame); --sh-panel-s: var(--sh-frame); --sh-head: inset 0 var(--px-sm) 0 var(--head-hi), inset 0 calc(var(--px-sm) * -1) 0 var(--head-lo); --sh-well: inset var(--px) var(--px) 0 var(--well-lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--well-hi); --sh-trough: inset var(--px-sm) var(--px-sm) 0 #060504, inset calc(var(--px-sm) * -1) calc(var(--px-sm) * -1) 0 #2a2721; --sh-btn: inset var(--px) var(--px) 0 var(--btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--btn-lo), var(--drop) var(--drop) 0 var(--sh); --sh-btn-a: inset var(--px) var(--px) 0 var(--btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--btn-lo); --sh-gold: inset var(--px) var(--px) 0 var(--gold-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold-lo), var(--drop) var(--drop) 0 var(--sh); --sh-gold-a: inset var(--px) var(--px) 0 var(--gold-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold-lo); --sh-chip: inset var(--px-sm) var(--px-sm) 0 var(--chip-hi), inset calc(var(--px-sm) * -1) calc(var(--px-sm) * -1) 0 var(--chip-lo); --sh-chip-in: inset var(--px-sm) var(--px-sm) 0 var(--chip-lo), inset calc(var(--px-sm) * -1) calc(var(--px-sm) * -1) 0 var(--chip-hi); --sh-pin: 2px 2px 0 rgba(0,0,0,.55); --glow-gold: none; --glow-patina:none; /* плоские заливки вместо градиентов версии 2 */ --g-gold: var(--gold); --g-gold-h: var(--gold-hi); --g-panel: var(--frame); --g-panel-l: var(--panel-lit); --g-head: var(--head); --g-btn: var(--btn); --g-chip: var(--chip); --g-bar: var(--gold); --hatch: repeating-linear-gradient(90deg,#3a352c 0 4px,#2b2820 4px 8px); --hatch-lg: repeating-linear-gradient(90deg,#2b2820 0 8px,#221f19 8px 16px); --bar-tex: repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 6px,rgba(0,0,0,.18) 6px 8px); /* * Подложка строки: слева сплошная панель под текст, дальше картинка. * В макете подложки были тёмными текстурами, а настоящие обложки новостей * бывают яркими — поэтому правый край гасим сильнее, чем в макете, и * плотность вынесена в настройку «Затемнение подложки». */ --well-62: rgba(24,23,18,.66); --well-34: rgba(24,23,18,.52); --row-solid: 22%; --row-fade: 34%; --row-grad: linear-gradient(90deg, var(--well) 0%, var(--well) var(--row-solid), var(--well-62) var(--row-fade), var(--well-34) 100%); /* --- шрифты --- */ --font-mono: 'Handjet', 'ARMLIX Display', ui-monospace, 'Cascadia Mono', monospace; --font-sans: 'Golos Text', 'ARMLIX Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* * Оси вариативного шрифта. Пусто = normal, и это единственное безопасное * значение по умолчанию: у Handjet ось ELSH задаёт форму «пикселя», и * ELSH 0 рисует пустой элемент — весь интерфейс становится невидимым. * Нужный инстанс уже приходит из запроса к Google Fonts, повторно * выставлять оси не нужно. Меняется настройкой «Оси дисплейного шрифта». */ --font-feat: normal; --mono-weight: 800; --mono-tr: .09em; --caps: uppercase; /* --- размеры: пиксельный шрифт узкий, поэтому крупнее обычного --- */ --fs-nano: 12px; --fs-micro: 13px; --fs-xxs: 13px; --fs-xs: 14px; --fs-sm: 15px; --fs-cap: 14px; --fs-small: 13px; --fs-body-s: 13px; --fs-body: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 15px; --fs-h4: 19px; --fs-h3: 22px; --fs-h2: clamp(17px, .8rem + 1vw, 22px); --fs-h1: clamp(24px, 1.1rem + 2.2vw, 34px); --fs-hero: clamp(26px, 1.2rem + 3vw, 40px); --tr-wide: .1em; --tr-label: .08em; /* --- скругления: в пиксельной сетке их нет --- */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --gap: 14px; --gap-lg: 24px; --pad: clamp(12px, 2vw, 24px); --pad-x: clamp(12px, 2vw, 24px); --pad-card: 16px; --frame-pad: 8px; --aside: 380px; --aside-sm: 340px; --maxw: 1680px; --tap: 44px; --h-ribbon: 40px; --h-mast: 80px; /* Имена из первой версии набора: разметка плагинов их ещё помнит. */ --amber: var(--gold); --amber-dim: rgba(255,204,51,.18); --red: var(--rust); --line-mid: rgba(0,0,0,.6); --surface-in: var(--well); --font-size-lg: var(--fs-md); --font-size-sm: var(--fs-body-s); /* * Панель игрового меню не плывёт — она щёлкает. Но щелчок обязан длиться, * иначе это не отклик, а телепорт: мгновенная смена состояния читается как * подмена картинки. Отсюда короткие сроки и кривая с быстрым стартом. */ --dur-fast: 90ms; --dur: 150ms; --dur-slow: 260ms; --ease: cubic-bezier(.2, .7, .3, 1); --ease-s: cubic-bezier(.2, .7, .3, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-step: steps(4, end); --rise: 6px; --pixelate: pixelated; color-scheme: dark; } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .45 } } @keyframes splash { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.08) } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes rise { from { opacity: 0; transform: translateY(var(--rise)) } to { opacity: 1; transform: none } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } } @keyframes drop-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } } /* ----------------------------------------------------------------------------- 3. Сброс и база -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* * В пиксельной сетке скруглений нет. Гасим их разом — включая кнопки и поля * движка, у которых свои значения в engine.css: убрать объявление там нельзя, * файл из поставки DLE. Настройка «Скругление углов» меняет --r-md, поэтому * это же правило даёт ей власть над всем интерфейсом сразу. */ *, *::before, *::after { border-radius: var(--r-md); } /* * Почему одного «*» мало. * * У универсального селектора нулевая специфичность, поэтому любое правило * движка вида «.btn { border-radius: .55em }» его перебивает. engine.css * скругляет кнопки, все поля ввода, шкалы и диалоги — то есть ровно те * места, на которые человек нажимает и куда печатает. * * Селекторы здесь повторяют движковые один в один: специфичность та же, * а styles.css подключается позже — значит побеждает. Значение берётся из * настройки «Скругление углов», так что округлить интерфейс по-прежнему * можно одним полем в админпанели. */ select, textarea, input[type="text"], input[type="password"], input[type="file"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .btn, .bbcodes, .btn-border, .btn-big, .progress, .progress .progress-bar, .voteprogress, .pollprogress, .ui-dialog, .ui-button, .file-box, .self_delete_link, .DLEPush-notification.wrapper, #searchsuggestions, #share-popup, #marker-bar, #loading-layer, #loading-layer.withtext, #loading-layer.withouttext, .pm_navigation .navigation { border-radius: var(--r-md); } html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-color: var(--chip) var(--bg-deep); } body { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; overflow-wrap: break-word; background-color: var(--bg); background-image: linear-gradient(var(--bg-dim-1), var(--bg-dim-2)), var(--bg-image); background-size: cover; background-position: center top; background-attachment: var(--bg-fix); background-repeat: no-repeat; image-rendering: var(--pixelate); } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video, canvas { max-width: 100%; } img, video { height: auto; display: block; } img { image-rendering: var(--pixelate); } a { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease-s); } a:hover { color: var(--gold); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } hr { border: 0; border-top: 2px solid var(--well-lo); box-shadow: 0 2px 0 var(--frame-hi); margin: var(--pad) 0; } ::selection { background: var(--gold); color: var(--on-gold); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--well); } ::-webkit-scrollbar-thumb { background: var(--btn); box-shadow: var(--sh-chip); } ::-webkit-scrollbar-thumb:hover { background: var(--frame-hi); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .a-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--gold); color: var(--on-gold); padding: 12px 18px; box-shadow: var(--sh-gold); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); } .a-skip:focus { left: 10px; top: 10px; } /* ----------------------------------------------------------------------------- 4. Утилиты -------------------------------------------------------------------------- */ .mono, .num, .label, .note, .badge, .chip, .btn, .tag, .nav, .crumbs, .pager, .foot__in, .ribbon, .mon__ver, .mon__load, .mon__online, .topline__n, .topline__name, .topline__v, .stat__v, .stat__k, .bigmoney, .cabnav__k, .cabnav__id, .tbl__head, .newsline__date, .newsline__num, .postcard__foot, .comment__date, .comment__act, .field__k, .auth__tabs, .tabs, .feedrow__t, .empty__t, .msg__t, .toast, .step__n, .step__t, .nodata, .servertab__name, .servertab__meta, .product__price, .product__old, .product__big, .cart__unit, .cart__sum, .qty span, .ach__title, .ach__when, .privilege__term, .hero__eyebrow, .hero__title, .article__title, .prof__name h1, .card__title, .newsline__title, .postcard__title, .mon__name, .comment__author, .sechead__more, .clan-card__name, .stat b, .stat i { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-variant-numeric: tabular-nums; } .dim { color: var(--ink-6); } .dimmer { color: var(--ink-5); } .faint { color: var(--ink-8); } .accent { color: var(--gold); } .ok { color: var(--patina); } .bad { color: var(--rust); } .pretty { text-wrap: pretty; } .balance { text-wrap: balance; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .label { position: relative; display: flex; align-items: center; gap: 10px; font-size: var(--fs-h2); text-transform: var(--caps); color: var(--ink-hi); text-shadow: var(--ts); margin: 0; } .label::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; background: var(--gold); box-shadow: var(--sh-pin); display: block; } .label--sm { font-size: var(--fs-lg); } .label--muted { color: var(--ink-4); } .label--muted::before { background: var(--ink-8); } .label--bare { padding-left: 0; } .label--bare::before { display: none; } .note { font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); text-shadow: var(--ts-soft); } .sechead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .sechead__more { font-size: var(--fs-xs); color: var(--ink-5); background: none; border: 0; padding: 0; text-transform: var(--caps); text-shadow: var(--ts-soft); } .sechead__more:hover { color: var(--gold); } /* ----------------------------------------------------------------------------- 5. Каркас -------------------------------------------------------------------------- */ .page { min-height: 100vh; display: flex; flex-direction: column; } .shell { width: 100%; max-width: var(--maxw); margin: 0 auto; } .pad { padding-left: var(--pad); padding-right: var(--pad); } /* Панель с .pad встречается в разметке плагинов: там ждут полный отступ. */ .panel.pad, .card.pad { padding: var(--pad-card); } .rule { box-shadow: inset 0 -2px 0 var(--well-lo); } .rule-top { box-shadow: inset 0 2px 0 var(--frame-hi); } /* Раскладка резиновая: колонки складываются сами, без брейкпоинтов. */ .layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-lg); max-width: var(--maxw); margin: 0 auto; padding: var(--pad) var(--pad) 40px; } .layout > .layout__main { flex: 1 1 560px; min-width: 0; } .layout > .layout__aside { flex: 1 1 300px; min-width: 0; max-width: var(--aside); display: flex; flex-direction: column; gap: var(--gap-lg); } .layout--gap > .layout__aside { max-width: var(--aside-sm); } .layout--single { display: block; padding: var(--pad) var(--pad) 48px; max-width: var(--maxw); margin: 0 auto; } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } /* Две колонки без сетки: узкая сама уходит вниз, когда места не остаётся. */ .grid--split, .grid--aside { display: flex; flex-wrap: wrap; gap: var(--gap-lg); align-items: flex-start; } .grid--split > *, .grid--aside > * { min-width: 0; } .grid--split > * { flex: 1 1 300px; } .grid--split > :first-child { flex: 2 1 460px; } .grid--aside > * { flex: 2 1 460px; } .grid--aside > :first-child { flex: 1 1 300px; } /* ----------------------------------------------------------------------------- 6. Строка состояния -------------------------------------------------------------------------- */ .ribbon { background: var(--bg-bar); box-shadow: inset 0 var(--px-sm) 0 var(--frame-lo), inset 0 calc(var(--px-sm) * -1) 0 #0b0a07; font-size: var(--fs-micro); color: var(--ink-4); text-transform: var(--caps); position: relative; z-index: 20; } .ribbon__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: center; gap: 8px 14px; min-height: var(--h-ribbon); max-width: var(--maxw); margin: 0 auto; padding: 8px var(--pad-x); } .ribbon__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; } .ribbon__group--end { justify-content: flex-end; } .ribbon strong { color: var(--ink-2); font-weight: inherit; text-shadow: var(--ts-soft); } .ribbon span { text-shadow: var(--ts-soft); } .ribbon .sep { width: 2px; height: 14px; background: #33302a; display: block; flex: none; box-shadow: none; } .ribbon a { color: var(--ink-4); } .ribbon a:hover { color: var(--gold); } /* Адрес лобби — самый быстрый путь в игру, поэтому он в центре и пульсирует. */ .ribbon__lobby { justify-self: center; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 6px; cursor: pointer; font-size: var(--fs-lg); color: #ffff55; text-shadow: 2px 2px 0 #3f3f14; transform-origin: center; } .ribbon__lobby:hover { color: #ffffa8; } @media (prefers-reduced-motion: no-preference) { .ribbon__lobby { animation: splash 1.5s ease-in-out infinite; } .dot--on { animation: blink 2.4s infinite; } } .dot { width: 8px; height: 8px; display: block; flex: none; background: var(--ink-8); box-shadow: var(--sh-pin); border-radius: 0; margin: 0; vertical-align: baseline; } .dot--on { background: var(--patina); } .dot--off { background: var(--rust); } .dot--wait{ background: var(--gold); } .dot--lg { width: 10px; height: 10px; } .dot--new { background: var(--patina); width: 8px; height: 8px; display: inline-block; margin-right: 6px; vertical-align: middle; } .ipcopy { font-size: var(--fs-micro); color: var(--gold); background: var(--chip); border: 0; padding: 6px 10px; text-transform: var(--caps); text-shadow: var(--ts-soft); box-shadow: var(--sh-chip), 3px 3px 0 var(--sh); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); } .ipcopy { transition: color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .ipcopy:hover { color: var(--gold-hi); } .ipcopy:active { transform: translate(3px, 3px); box-shadow: var(--sh-chip); } .ipcopy.is-done { color: var(--patina); } /* ----------------------------------------------------------------------------- 7. Шапка -------------------------------------------------------------------------- */ .mast { position: relative; z-index: 30; background: var(--frame); box-shadow: inset 0 var(--px) 0 var(--frame-hi), inset 0 calc(var(--px) * -1) 0 var(--frame-lo), 0 6px 0 var(--sh-2); } /* * Спрайт-полоса: повторяется по горизонтали, живёт под содержимым шапки. * За края не выходит и без overflow: фон рисуется внутри своего блока, а * обрезка мешала бы выпадающему меню аккаунта. */ .mast::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--sprite, none); background-repeat: repeat-x; background-position: left center; background-size: auto var(--h-mast); image-rendering: var(--pixelate); opacity: var(--sprite-opacity, 1); } .mast__in { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; min-height: var(--h-mast); max-width: var(--maxw); margin: 0 auto; padding: 12px var(--pad-x); } .mast__left { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; min-width: 0; } .mast__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .logo { display: flex; align-items: center; gap: 14px; flex: none; } .logo__mark { width: 40px; height: 40px; background: var(--gold); display: grid; place-items: center; box-shadow: inset var(--px) var(--px) 0 var(--gold-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold-lo), var(--drop) var(--drop) 0 var(--sh); } .logo__mark::after { content: ""; width: 12px; height: 12px; background: #2b2118; box-shadow: inset 2px 2px 0 #17110b; display: block; } .logo__word { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .06em; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6); } .logo:hover { color: #fff; } .nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-sm); color: var(--ink-2); text-transform: var(--caps); } .nav a { padding: 0 11px; min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap; text-shadow: var(--ts); } .nav a:hover { color: var(--gold); background: #413c33; } .nav a.is-active { color: var(--gold); background: var(--chip); box-shadow: var(--sh-chip-in); } .face { display: block; flex: none; background: var(--chip); box-shadow: inset 2px 2px 0 #4d4739, inset -2px -2px 0 #1a1712; image-rendering: pixelated; object-fit: cover; } span.face, .face:not(img):not(canvas) { background: var(--hatch); } .face--20 { width: 20px; height: 20px; } .face--22 { width: 22px; height: 22px; } .face--24 { width: 24px; height: 24px; } .face--26 { width: 26px; height: 26px; } .face--28 { width: 28px; height: 28px; } .face--30 { width: 30px; height: 30px; } .face--32 { width: 32px; height: 32px; } .face--38 { width: 38px; height: 38px; } .face--44 { width: 44px; height: 44px; } .face--46 { width: 46px; height: 46px; } .face--76 { width: 76px; height: 76px; } .burger { display: none; align-items: center; gap: 9px; min-height: var(--tap); padding: 0 14px; border: 0; background: var(--btn); color: var(--ink); box-shadow: var(--sh-btn); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-xs); text-transform: var(--caps); text-shadow: var(--ts-soft); } .burger:active { transform: translate(var(--drop), var(--drop)); box-shadow: var(--sh-btn-a); } .burger__bars { display: block; width: 16px; height: 12px; position: relative; } .burger__bars i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .burger__bars i:nth-child(1) { top: 0 } .burger__bars i:nth-child(2) { top: 5px } .burger__bars i:nth-child(3) { top: 10px } .is-menu-open .burger__bars i:nth-child(2) { opacity: 0; } /* ----------------------------------------------------------------------------- 7a. Мой аккаунт Одна панель на всё личное: кто я, сколько денег, куда идти, как выйти. Единственное число в блоке — баланс, поэтому он и подан как счётчик ресурса: колодец, крупный акцентный кегль. Остальное держится тихо. -------------------------------------------------------------------------- */ .acct__who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .acct__name { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct__money { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 var(--frame-pad); padding: 12px 16px 12px 14px; background: var(--well); box-shadow: var(--sh-well); } .acct__money .btn { flex: none; } .acct__money-k { display: block; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .acct__money b { display: block; margin-top: 3px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-h3); line-height: 1; color: var(--gold); text-shadow: var(--ts); } .acct__links { display: flex; flex-direction: column; padding: 12px var(--frame-pad); } .acct__links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; font-size: var(--fs-md); color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .acct__links a:hover { background: var(--chip); color: var(--ink); } .acct__links b { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--gold); } /* Выход отделён линией: это единственное действие, которое что-то прекращает. */ .acct__exit { display: flex; align-items: center; justify-content: center; min-height: 40px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); color: var(--ink-4); box-shadow: inset 0 2px 0 var(--head-lo); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .acct__exit:hover { color: var(--rust); background: rgba(0,0,0,.2); } /* Чип в шапке: вход в личные разделы, а не ещё один список ссылок. */ .userchip { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--tap); padding: 0 12px; background: var(--chip); box-shadow: var(--sh-chip); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .userchip:hover { color: var(--gold); background: var(--btn); } .userchip__name { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; text-shadow: var(--ts-soft); } .userchip__sum { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--gold); white-space: nowrap; padding-left: 10px; box-shadow: inset 2px 0 0 var(--chip-lo); text-shadow: var(--ts-soft); } /* ----------------------------------------------------------------------------- 8. Кнопки, чипы, бейджи Нажатие уводит кнопку на глубину торца — движение из самой игры. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); min-height: var(--tap); padding: 0 18px; border: 0; background: var(--btn); color: var(--ink); text-align: center; box-shadow: var(--sh-btn); text-shadow: var(--ts-soft); text-decoration: none; white-space: nowrap; vertical-align: middle; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } /* Наведение приподнимает клавишу, нажатие — сажает её на глубину торца. */ .btn:hover { color: var(--gold); background: #5f5a52; transform: translate(-1px, -1px); } .btn:active { transform: translate(var(--drop), var(--drop)); box-shadow: var(--sh-btn-a); transition-duration: var(--dur-fast); } .btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; } .btn--primary { background: var(--gold); color: var(--on-gold); text-shadow: var(--ts-gold); box-shadow: var(--sh-gold); } .btn--primary:hover { background: var(--gold-hi); color: var(--on-gold); transform: translate(-1px, -1px); } .btn--primary:active { transform: translate(var(--drop), var(--drop)); box-shadow: var(--sh-gold-a); } .btn--danger:hover { color: var(--rust-lt); } .btn--quiet { background: var(--chip); color: var(--ink-4); box-shadow: var(--sh-chip), var(--drop) var(--drop) 0 var(--sh); } .btn--quiet:hover { background: var(--chip); color: var(--ink); } .btn--quiet:active { transform: translate(var(--drop), var(--drop)); box-shadow: var(--sh-chip); } .btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-micro); --drop: 3px; } .btn--lg { min-height: 52px; padding: 0 24px; font-size: var(--fs-lg); } .btn--block { display: flex; width: 100%; } .btn > .icon, .chip > .icon, a > .icon { fill: none; stroke: currentColor; } .btnrow { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); border: 0; color: var(--ink-2); background: var(--chip); padding: 9px 12px; box-shadow: var(--sh-chip), 2px 2px 0 var(--sh); text-shadow: var(--ts-soft); } .chip { transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .chip:hover { color: var(--gold); transform: translate(-1px, -1px); } .chip:active { transform: translate(2px, 2px); box-shadow: var(--sh-chip); } .chip.is-active, .chip[aria-current="true"] { color: var(--on-gold); background: var(--gold); text-shadow: 1px 1px 0 rgba(255,255,255,.3); box-shadow: inset var(--px-sm) var(--px-sm) 0 var(--gold-hi), inset calc(var(--px-sm) * -1) calc(var(--px-sm) * -1) 0 var(--gold-lo); } .chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); color: var(--ink); padding: 4px 9px; background: var(--chip); box-shadow: var(--sh-chip); text-shadow: var(--ts-soft); } .badge--accent { color: var(--on-gold); background: var(--gold); text-shadow: 1px 1px 0 rgba(255,255,255,.3); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .badge--ok { color: var(--patina); } .badge--bad { color: var(--rust); } .badge--lg { font-size: var(--fs-sm); padding: 6px 11px; } .tag { display: inline-block; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--ink-2); padding: 6px 10px; background: var(--chip); box-shadow: var(--sh-chip); text-shadow: var(--ts-soft); } .tag:hover { color: var(--gold); } /* ----------------------------------------------------------------------------- 9. Панели и карточки -------------------------------------------------------------------------- */ .panel { background: var(--frame); box-shadow: var(--sh-frame); min-width: 0; } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--head); box-shadow: var(--sh-head); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); color: var(--ink-hi); text-shadow: var(--ts); } .panel__head .note { color: var(--ink-4); } .panel__body { padding: var(--pad-card); } .panel__foot { padding: 14px 16px; box-shadow: inset 0 var(--px-sm) 0 var(--head-lo); } .panel--framed { position: relative; padding: 18px; } .panel--framed .frame-tr, .panel--framed .frame-bl { display: none; } .card { background: var(--frame); box-shadow: var(--sh-frame); padding: var(--pad-card); min-width: 0; display: flex; flex-direction: column; } .card--flat { padding: 0; } .card--off { background: #3f3b33; } .card__title { font-size: var(--fs-lg); color: var(--ink-hi); margin-bottom: 8px; text-shadow: var(--ts); } .card__text { font-size: var(--fs-body-s); color: var(--ink-3); line-height: 1.6; text-wrap: pretty; } .card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card__mark { width: 32px; height: 32px; display: block; margin-bottom: 14px; background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo), 3px 3px 0 var(--sh); } .card--acc { box-shadow: var(--sh-frame), inset 6px 0 0 var(--gold); } .card--warn { box-shadow: var(--sh-frame), inset 6px 0 0 var(--rust); } .card--mute { box-shadow: var(--sh-frame), inset 6px 0 0 var(--ink-8); } /* Плитки чисел: колодец внутри рамки, как счётчики в игровом меню. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--frame-pad); background: var(--frame); padding: var(--frame-pad); box-shadow: var(--sh-frame); } .stats--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .stats .stat { padding: 16px; min-width: 0; background: var(--well); box-shadow: var(--sh-well); display: block; text-align: left; } .stat__v { font-size: 26px; line-height: 1.1; color: var(--ink-hi); text-shadow: var(--ts); } .stat__v small { font-size: 15px; color: var(--ink-5); } .stat__k { font-size: var(--fs-micro); color: var(--ink-5); margin-top: 8px; text-transform: var(--caps); text-shadow: var(--ts-soft); } .kv { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: var(--fs-body); color: var(--ink-3); padding: 10px 0; box-shadow: inset 0 -2px 0 var(--head-lo); } .kv:last-child { box-shadow: none; } .kv b { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--ink); text-align: right; } .ph { background: var(--hatch-lg); box-shadow: var(--sh-well); display: flex; align-items: flex-end; padding: 12px; color: var(--ink-5); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); } .ph span { background: rgba(10,7,3,.7); padding: 5px 9px; } .ph--center { align-items: center; justify-content: center; } /* ----------------------------------------------------------------------------- 10. Шкалы и графики -------------------------------------------------------------------------- */ .meter { height: 14px; background: #0d0c09; box-shadow: var(--sh-trough); padding: 2px; } .meter__fill { height: 100%; width: var(--v, 0%); background-color: var(--gold); background-image: var(--bar-tex); transition: width .6s var(--ease-s); } .meter--thin { height: 10px; } .meter--thick { height: 18px; } .meter--off .meter__fill { background-color: #3e382c; background-image: none; } .meter--warn .meter__fill { background-color: var(--rust); } @media (prefers-reduced-motion: no-preference) { .armlix-js .js-meter .meter__fill { width: 0; } .armlix-js .js-meter.is-filled .meter__fill { width: var(--v, 0%); transition-delay: calc(var(--i, 0) * 50ms); } } @media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } } .spark { display: block; width: 100%; height: 36px; } .spark polyline.line, .spark path.line { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; } .spark polygon.area, .spark path.area { fill: rgba(255,204,51,.18); stroke: none; } /* ----------------------------------------------------------------------------- 11. Формы -------------------------------------------------------------------------- */ .field { display: block; } .field + .field { margin-top: 16px; } .field__k, .field > span { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--ink-4); margin-bottom: 8px; text-transform: var(--caps); } .field__k a { color: var(--ink-4); } /* * Подсказка под полем — целое предложение, её читают. Дисплейный шрифт * узкий и капсовый: на подписи в два слова он хорош, на фразе — нет. */ .field__hint { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-5); margin-top: 7px; text-transform: none; } .field__hint:empty { display: none; } .field__err { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--rust-lt); margin-top: 7px; text-transform: none; } .field input[type="color"] { width: 64px; height: var(--tap); padding: 3px; cursor: pointer; } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; } .inp, .sel, .txt, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], select, textarea { width: 100%; background: var(--well); border: 0; color: var(--ink); padding: 12px 13px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-lg); line-height: 1.35; outline: none; box-shadow: var(--sh-well); min-height: var(--tap); -webkit-appearance: none; appearance: none; } textarea { resize: vertical; min-height: 110px; line-height: 1.55; font-family: var(--font-sans); font-weight: 400; letter-spacing: 0; font-size: var(--fs-md); } select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%), linear-gradient(135deg, var(--ink-4) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } select option { background: var(--well); color: var(--ink); } .inp:focus, .txt:focus, input:focus, select:focus, textarea:focus { box-shadow: var(--sh-well), 0 0 0 3px var(--gold); } .inp--mono, input.mono { font-family: var(--font-mono); } ::placeholder { color: var(--ink-8); opacity: 1; } .check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); color: var(--ink-3); line-height: 1.5; cursor: pointer; } /* * Свои флажки: браузерные — единственное, что оставалось круглым и чужим. * Квадрат в колодце, отметка — залитый квадрат в цвете акцента. Переключатели * выбора рисуем так же: круга в этой сетке не существует. */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; background: var(--well); box-shadow: var(--sh-trough); display: inline-grid; place-items: center; cursor: pointer; vertical-align: -4px; } input[type="checkbox"]::before, input[type="radio"]::before { content: ""; width: 10px; height: 10px; background: var(--gold); transform: scale(0); transition: transform var(--dur) var(--ease-s); } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: default; } .check input[type="checkbox"], .check input[type="radio"] { margin-top: 1px; } /* Поле выбора цвета: браузер рисует свой образец — убираем его рамку. */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 0; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .inputgroup { display: flex; flex-wrap: wrap; gap: 8px; } .inputgroup > .inp, .inputgroup > input { flex: 1 1 160px; min-width: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--well-lo); box-shadow: 0 2px 0 var(--frame-hi); } .switch { width: 46px; height: 24px; background: var(--well); position: relative; display: block; flex: none; border: 0; padding: 0; box-shadow: var(--sh-trough); } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--btn); display: block; box-shadow: inset 2px 2px 0 var(--btn-hi), inset -2px -2px 0 var(--btn-lo); transition: transform var(--dur) var(--ease-s); } .switch[aria-checked="true"] { background: var(--gold-lo); } .switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } /* ----------------------------------------------------------------------------- 12. Таблицы Общая механика: рамка снаружи, колодец внутри, строки — гибкие ячейки, которые сами перестраиваются в карточку. Шапка колонок прячется, когда строка уже перенеслась: подписи в ней перестают совпадать со столбцами. -------------------------------------------------------------------------- */ .tbl, .mon, .newsfeed { position: relative; background: var(--frame); padding: var(--frame-pad); box-shadow: var(--sh-frame); min-width: 0; } .tbl::before, .mon::before, .newsfeed::before { content: ""; position: absolute; inset: var(--frame-pad); z-index: 0; background: var(--well); box-shadow: var(--sh-well); pointer-events: none; } .tbl > *, .mon > *, .newsfeed > * { position: relative; z-index: 1; } .tbl__head, .mon__head { display: flex; flex-wrap: nowrap; gap: 16px; align-items: center; padding: 12px 16px; background: var(--row); box-shadow: inset 0 -2px 0 var(--well-lo); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .tbl__head > *, .mon__head > * { text-shadow: var(--ts-soft); } .tbl__row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px 16px; box-shadow: inset 0 -2px 0 var(--well-lo); } .tbl__row:last-child { box-shadow: none; } .tbl__row { transition: background var(--dur) var(--ease); } .tbl__row:hover { background: rgba(255,255,255,.05); } .tbl__row > .r, .tbl .r { text-align: right; } /* Когда строка перенеслась, итоговая ячейка остаётся у правого края. */ .tbl__row > :last-child.r { margin-left: auto; } /* * Ширины столбцов приходят со строки как --c1..--c8: так их видно в одном * месте разметки, а раздаёт их по ячейкам стиль. Ячейка с запасом ширины * переносится сама, поэтому брейкпоинты для таблиц не нужны. */ .tbl__head > *, .tbl__row > * { min-width: 0; } .tbl__head > :nth-child(1), .tbl__row > :nth-child(1) { flex: var(--c1, 1 1 auto); } .tbl__head > :nth-child(2), .tbl__row > :nth-child(2) { flex: var(--c2, 1 1 auto); } .tbl__head > :nth-child(3), .tbl__row > :nth-child(3) { flex: var(--c3, 1 1 auto); } .tbl__head > :nth-child(4), .tbl__row > :nth-child(4) { flex: var(--c4, 1 1 auto); } .tbl__head > :nth-child(5), .tbl__row > :nth-child(5) { flex: var(--c5, 1 1 auto); } .tbl__head > :nth-child(6), .tbl__row > :nth-child(6) { flex: var(--c6, 1 1 auto); } .tbl__head > :nth-child(7), .tbl__row > :nth-child(7) { flex: var(--c7, 1 1 auto); } .tbl__head > :nth-child(8), .tbl__row > :nth-child(8) { flex: var(--c8, 1 1 auto); } .tbl__empty { padding: 36px 20px; text-align: center; color: var(--ink-5); } /* Настоящие таблицы движка (статистика, топ авторов) — тот же приём. */ .content table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: var(--fs-body); } .content th, .content td { padding: 11px 13px; text-align: left; box-shadow: inset 0 -2px 0 var(--well-lo); } .content th { background: var(--row); color: var(--ink-4); font-weight: inherit; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); } .content tr:hover td { background: rgba(255,255,255,.04); } .table-wrap { overflow-x: auto; background: var(--well); box-shadow: var(--sh-well); padding: var(--frame-pad); } @media (max-width: 720px) { /* Таблица разворачивается в карточки: заголовок столбца уезжает в ячейку. */ .content table.responsive, .content table.responsive tbody, .content table.responsive tr, .content table.responsive td { display: block; width: 100%; } .content table.responsive thead { display: none; } .content table.responsive tr { margin-bottom: 8px; background: var(--row); box-shadow: var(--sh-well); padding: 6px 10px; } .content table.responsive td { box-shadow: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; } .content table.responsive td::before { content: attr(data-label); color: var(--ink-5); text-transform: var(--caps); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); } } /* ----------------------------------------------------------------------------- 13. Мониторинг -------------------------------------------------------------------------- */ .mon__head > :nth-child(1) { flex: 0 0 10px; } .mon__head > :nth-child(2) { flex: 1 1 240px; } /* * Версия растёт по содержимому: «1.21.4» занимает те же 82px, а диапазон * «1.1 - 1.12.2 [1.6.4]» получает свою ширину вместо трёх строк подряд. */ .mon__head > :nth-child(3) { flex: 0 0 auto; min-width: 82px; } .mon__head > :nth-child(4) { flex: 1 1 180px; min-width: 112px; } .mon__head > :nth-child(5) { flex: 0 0 auto; margin-left: auto; } .mon__head > :nth-child(6) { flex: 0 0 150px; } .mon__row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 16px; box-shadow: inset 0 -2px 0 var(--well-lo); background-size: cover; background-position: center; image-rendering: var(--pixelate); } .mon__row:last-child { box-shadow: none; } .mon__row { transition: background-color var(--dur) var(--ease); } .mon__row:hover { background-color: rgba(255,255,255,.05); } .mon__row > :nth-child(1) { flex: 0 0 auto; } .mon__row > :nth-child(2) { flex: 1 1 240px; min-width: 0; } .mon__row > :nth-child(3) { flex: 0 0 auto; min-width: 82px; } .mon__row > :nth-child(4) { flex: 1 1 180px; min-width: 112px; } .mon__row > :nth-child(5) { flex: 0 0 auto; margin-left: auto; } .mon__row > :nth-child(6) { flex: 1 1 150px; min-width: 112px; } .mon__row.is-offline { opacity: .55; } .mon__name { font-size: clamp(18px, 2.2vw, 22px); color: #fff; text-shadow: var(--ts); } .mon__name a { color: inherit; } .mon__name small { color: var(--ink-5); font-size: 15px; } .mon__descr { font-size: var(--fs-body-s); color: var(--ink-5); margin-top: 4px; } .mon__note { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); color: var(--gold); text-transform: var(--caps); margin-top: 5px; text-shadow: var(--ts-soft); } .mon__ver { display: block; font-size: var(--fs-xs); color: var(--gold); background: #2b2820; padding: 5px 8px; text-align: center; text-shadow: var(--ts-soft); white-space: nowrap; box-shadow: inset 2px 2px 0 #16140f, inset -2px -2px 0 #3f3a30; } .mon__load { font-size: var(--fs-micro); color: var(--ink-5); margin-top: 6px; text-transform: var(--caps); text-shadow: var(--ts-soft); } .mon__online { text-align: right; text-shadow: var(--ts); } .mon__online b { font-size: 22px; color: #fff; } .mon__online span { font-size: var(--fs-xs); color: var(--ink-5); } .monmini__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); } .monmini__row:last-child { box-shadow: none; } .monmini__name { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); min-width: 0; } .monmini__num { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; } .monmini__num span { color: var(--ink-5); } .servertabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; padding: var(--pad) var(--pad) 0; max-width: var(--maxw); margin: 0 auto; } .servertabs__ink { display: none; } .servertab { background: var(--frame); box-shadow: var(--sh-frame); padding: 14px 16px; text-align: left; color: var(--ink); min-width: 0; border: 0; } .servertab:hover { background: var(--panel-lit); color: var(--ink); } .servertab.is-active { background: var(--gold); color: var(--on-gold); box-shadow: var(--sh-gold); } .servertab.is-active .servertab__name, .servertab.is-active .servertab__meta { color: var(--on-gold); text-shadow: var(--ts-gold); } .servertab__name { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts); } .servertab__meta { display: block; font-size: var(--fs-micro); color: var(--ink-4); text-transform: var(--caps); } .hero { display: flex; flex-wrap: wrap; gap: var(--gap-lg); padding: var(--pad) var(--pad) 30px; max-width: var(--maxw); margin: 0 auto; } .hero > * { flex: 1 1 380px; min-width: 0; } .hero > :first-child { flex: 2 1 480px; } .hero__eyebrow { font-size: var(--fs-sm); color: var(--gold); margin-bottom: 12px; text-transform: var(--caps); text-shadow: var(--ts-soft); } .hero__title { margin: 0 0 14px; font-size: var(--fs-h1); line-height: 1.1; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6); } .hero__lead { margin: 0 0 22px; font-size: var(--fs-md); line-height: 1.65; color: var(--ink-3); max-width: 62ch; text-wrap: pretty; } .hero__shot { height: 260px; margin-top: 20px; } .statuscard__big { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: 38px; line-height: 1; color: #fff; text-shadow: var(--ts); } .statuscard__big span { font-size: 17px; color: var(--ink-5); } /* ----------------------------------------------------------------------------- 14. Новости -------------------------------------------------------------------------- */ .newsline { padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; box-shadow: inset 0 -2px 0 var(--well-lo); background-size: cover; background-position: center; image-rendering: var(--pixelate); } .newsline:last-child { box-shadow: none; } .newsline { transition: background-color var(--dur) var(--ease); } .newsline:hover { background-color: rgba(255,255,255,.05); } .newsline[data-art] { background-image: var(--row-grad), var(--art); } .newsline__date { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--ink-4); line-height: 1.6; text-shadow: var(--ts-soft); } .newsline__date span { color: var(--ink-7); } .newsline > :nth-child(2) { flex: 1 1 320px; min-width: 0; } .newsline__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; } .newsline__title { margin: 0 0 7px; font-size: 19px; line-height: 1.35; } .newsline__title a { color: #fff; text-shadow: var(--ts); } .newsline__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-5); text-wrap: pretty; } .newsline__num { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--ink-5); text-align: right; text-transform: var(--caps); text-shadow: var(--ts-soft); } .postcard { display: flex; flex-wrap: wrap; gap: 16px; background: var(--frame); box-shadow: var(--sh-frame); padding: var(--frame-pad); } .postcard__cover { flex: 1 1 240px; max-width: 320px; height: 170px; overflow: hidden; background: var(--hatch-lg); box-shadow: var(--sh-well); } .postcard__cover img { width: 100%; height: 100%; object-fit: cover; } .postcard__body { flex: 3 1 320px; min-width: 0; padding: 8px 10px 10px 0; } .postcard__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .postcard__title { display: block; font-size: var(--fs-h4); line-height: 1.3; margin-bottom: 10px; color: #fff; text-shadow: var(--ts); text-wrap: pretty; } .postcard__text { display: block; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-5); margin-bottom: 14px; text-wrap: pretty; } .postcard__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .postlist { display: flex; flex-direction: column; gap: var(--gap); } .article { padding-bottom: 28px; margin-bottom: 28px; box-shadow: inset 0 -2px 0 var(--well-lo); } .article__meta { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; } .article__title { margin: 0 0 18px; font-size: var(--fs-h1); line-height: 1.15; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6); text-wrap: balance; } .article__by { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; flex-wrap: wrap; } .article__cover { margin-bottom: 24px; background: var(--frame); padding: var(--frame-pad); box-shadow: var(--sh-frame); } .article__cover img { width: 100%; } .article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .content { font-size: var(--fs-md); line-height: 1.7; color: var(--ink-3); } .content > * + * { margin-top: 18px; } .content h2, .content h3, .content h4 { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); color: #fff; text-shadow: var(--ts); } .content h2 { font-size: var(--fs-h3); margin-top: 30px; } .content h3 { font-size: var(--fs-h4); margin-top: 24px; } .content h4 { font-size: var(--fs-lg); margin-top: 20px; } .content ul, .content ol { padding-left: 22px; line-height: 1.75; } .content ul { list-style: none; } .content ul > li { position: relative; } .content ul > li::before { content: ""; position: absolute; left: -18px; top: .62em; width: 7px; height: 7px; background: var(--gold); box-shadow: var(--sh-pin); } .content ol { list-style: decimal; } .content li::marker { color: var(--ink-5); } .content li + li { margin-top: 7px; } .content a { color: var(--gold); box-shadow: inset 0 -2px 0 rgba(255,204,51,.4); } .content a:hover { color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); } .content img { margin: 4px 0; } .content blockquote, .content .quote { background: var(--well); box-shadow: var(--sh-well), inset 6px 0 0 var(--gold); padding: 16px 20px; color: var(--ink-3); font-size: var(--fs-md); } .content pre, .content code, .content .scriptcode { font-family: var(--font-mono); font-size: var(--fs-body-s); background: var(--well); color: var(--ink-2); box-shadow: var(--sh-well); } .content code { padding: 2px 6px; } .content pre, .content .scriptcode { padding: 16px; overflow-x: auto; } .content hr { margin: 26px 0; } .reactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- 15. Комментарии -------------------------------------------------------------------------- */ .comments { display: flex; flex-direction: column; gap: var(--gap); } .comment { background: var(--frame); box-shadow: var(--sh-frame); padding: var(--pad-card); } .comment__in { display: flex; gap: 14px; } .comment__body { flex: 1; min-width: 0; } .comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; } /* Имя автора движок отдаёт уже ссылкой, поэтому оформляем и обёртку, и её. */ .comment__author, .comment__author a { font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); } .comment__author a:hover { color: var(--gold); } .comment__date { font-size: var(--fs-micro); color: var(--ink-5); } .comment__text { margin: 0 0 12px; font-size: var(--fs-md); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; } .comment__text a { color: var(--gold); } .comment__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .comment__act { background: none; border: 0; padding: 0; color: var(--ink-5); font-size: var(--fs-micro); text-transform: var(--caps); } .comment__act:hover { color: var(--gold); } .comment__act--quiet { color: var(--ink-8); } .comment__act--quiet:hover { color: var(--ink-5); } .comment__file { margin-top: 10px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); } .comment__file a { color: var(--gold); } .comment .comments-tree-list, .comment__replies { margin: 16px 0 0 52px; padding-left: 16px; box-shadow: inset 4px 0 0 var(--gold-lo); display: flex; flex-direction: column; gap: var(--gap); } .comment .comments-tree-list .comment { box-shadow: none; background: transparent; padding: 0; } .commentform { background: var(--frame); box-shadow: var(--sh-frame); padding: var(--pad-card); margin-bottom: 20px; } .commentform__row { display: flex; gap: 14px; } .commentform__body { flex: 1; min-width: 0; } .commentform__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- 16. Пагинация -------------------------------------------------------------------------- */ .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; } .pager a, .pager span, .pager b { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--ink-2); padding: 0 14px; min-width: var(--tap); min-height: var(--tap); background: var(--chip); box-shadow: var(--sh-chip), 2px 2px 0 var(--sh); text-shadow: var(--ts-soft); } .pager a:hover { color: var(--gold); } .pager a:active { transform: translate(2px, 2px); box-shadow: var(--sh-chip); } .pager span.nav_ext { background: none; box-shadow: none; color: var(--ink-5); } .pager > span:not(.nav_ext), .pager b { color: var(--on-gold); background: var(--gold); text-shadow: 1px 1px 0 rgba(255,255,255,.3); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } /* ----------------------------------------------------------------------------- 17. Сайдбар -------------------------------------------------------------------------- */ .side { display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; } .side__block { min-width: 0; } .toplist { background: var(--well); padding: var(--frame-pad); box-shadow: var(--sh-well); display: flex; flex-direction: column; gap: 6px; } .topline { display: grid; grid-template-columns: 24px 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; } .topline:first-child { background: var(--row); } .topline__n { font-size: var(--fs-sm); color: var(--ink-5); text-shadow: var(--ts-soft); } .topline:first-child .topline__n { color: var(--gold); } .topline__name { font-size: var(--fs-lg); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--ts-soft); } .topline__v { font-size: var(--fs-xs); color: var(--ink-5); text-transform: var(--caps); } .presence { padding: 12px; background: var(--well); box-shadow: var(--sh-well); display: flex; flex-direction: column; gap: 10px; } .presence__row { display: flex; align-items: center; gap: 10px; } .presence__row span:last-child { margin-left: auto; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); } .discussed { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 12px 14px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); } .discussed:last-child { box-shadow: none; } .discussed:hover { background: var(--row); } .discussed__n { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-sm); color: var(--ink-5); } .discussed:first-of-type .discussed__n { color: var(--gold); } .discussed__t { font-size: var(--fs-body); line-height: 1.45; text-wrap: pretty; } .sidelink { display: block; padding: 13px 14px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); } .sidelink:last-child { box-shadow: none; } .sidelink:hover { background: var(--row); } .sidelink__t { font-size: var(--fs-md); font-weight: 500; line-height: 1.45; margin-bottom: 6px; text-wrap: pretty; } .sidelink__m { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .loginmini { display: flex; flex-direction: column; gap: 10px; } .loginmini__links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-xs); text-transform: var(--caps); } .loginmini__links a { color: var(--ink-3); text-shadow: var(--ts-soft); } /* Родные виджеты сообществ: колодец под ними, внутрь стилей не навязываем. */ .embed { padding: 0; background: var(--well); box-shadow: var(--sh-well); line-height: 0; } .embed > iframe { display: block; width: 100%; border: 0; } .embed > div { width: 100% !important; } .embed__fallback { padding: 18px; text-align: center; color: var(--ink-3); font-size: var(--fs-body-s); line-height: 1.6; background: var(--well); box-shadow: var(--sh-well); } /* ----------------------------------------------------------------------------- 18. Магазин -------------------------------------------------------------------------- */ .shop { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .shop__sec > h2 { margin: 0 0 6px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-h4); color: #fff; text-shadow: var(--ts); } .shop__sec > p { margin: 0 0 16px; font-size: var(--fs-body); color: var(--ink-5); } .product { position: relative; } .product__price { font-size: var(--fs-h4); color: var(--gold); text-shadow: var(--ts-soft); } .product__old { font-size: var(--fs-body-s); color: var(--ink-8); text-decoration: line-through; margin-left: 8px; } .product__art { height: 120px; } .product__big { font-size: 26px; line-height: 1; margin-bottom: 10px; color: var(--gold); text-shadow: var(--ts); } .product.is-owned { box-shadow: var(--sh-frame), inset 6px 0 0 var(--patina); } .serverpick { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--frame-pad); background: var(--well); box-shadow: var(--sh-well); } .serverpick__ink { display: none; } .serverpick a, .serverpick button { flex: 1 1 130px; border: 0; background: var(--chip); color: var(--ink-3); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); padding: 12px 16px; min-height: var(--tap); text-align: center; text-transform: var(--caps); box-shadow: var(--sh-chip); text-shadow: var(--ts-soft); } .serverpick a:hover, .serverpick button:hover { color: var(--ink); } .serverpick a.is-active, .serverpick button.is-active { color: var(--on-gold); background: var(--gold); text-shadow: var(--ts-gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .cart { position: sticky; top: 12px; } .cart__item { padding: 14px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); } .cart__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cart__name { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; } .cart__unit { font-size: var(--fs-micro); color: var(--ink-5); margin-top: 4px; text-transform: var(--caps); } .cart__x { background: none; border: 0; color: var(--ink-8); font-family: var(--font-mono); font-size: 17px; line-height: 1; padding: 0; flex: none; } .cart__x:hover { color: var(--rust); } .cart__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .qty { display: flex; align-items: center; background: #0d0c09; box-shadow: var(--sh-trough); padding: 2px; } .qty button { background: var(--chip); border: 0; color: var(--ink); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-lg); width: 30px; height: 30px; box-shadow: var(--sh-chip); } .qty button:hover { color: var(--gold); } .qty span { font-size: var(--fs-md); width: 34px; text-align: center; } .cart__sum { font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); } .cart__totals { padding: 16px; } .cart__totals .kv { padding: 0 0 10px; box-shadow: none; } .cart__totals .kv--sep { box-shadow: inset 0 -2px 0 var(--head-lo); padding-bottom: 12px; margin-bottom: 6px; } .cart__hint { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); line-height: 1.7; margin-top: 14px; text-transform: var(--caps); } /* ----------------------------------------------------------------------------- 19. Кабинет -------------------------------------------------------------------------- */ .cab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-lg); padding: var(--pad) var(--pad) 48px; max-width: var(--maxw); margin: 0 auto; } .cabnav { flex: 1 1 220px; max-width: 260px; background: var(--frame); box-shadow: var(--sh-frame); padding: 14px 0; position: sticky; top: 12px; } .cabnav__k { font-size: var(--fs-micro); color: var(--ink-4); padding: 0 16px 12px; text-transform: var(--caps); } .cabnav__list { position: relative; padding: 0 8px; } .cabnav__ink { display: none; } .cabnav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; margin-bottom: 3px; color: var(--ink-3); font-size: var(--fs-md); } .cabnav a:hover { background: var(--chip); color: var(--ink); } .cabnav a.is-active { color: var(--on-gold); background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); text-shadow: var(--ts-gold); } .cabnav a b { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); } .cabnav a.is-active b { color: var(--on-gold); } .cabnav a b.acc { color: var(--gold); } .cabnav a b.warn { color: var(--rust); } .cabnav__foot { box-shadow: inset 0 2px 0 var(--head-lo); margin-top: 12px; padding: 14px 16px 0; } .cabnav__id { font-size: var(--fs-micro); color: var(--ink-4); line-height: 1.8; text-transform: var(--caps); } .cabmain { flex: 3 1 520px; min-width: 0; } .cabmain > h1 { margin: 0 0 6px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-h3); color: #fff; text-shadow: var(--ts); } .cabmain > .lead { margin: 0 0 22px; font-size: var(--fs-body); color: var(--ink-5); } .bigmoney { font-size: 34px; line-height: 1; color: #fff; text-shadow: var(--ts); } .bigmoney span { font-size: 18px; color: var(--ink-5); } .bigmoney--xl { font-size: 42px; } .bigmoney--xl span { font-size: 20px; } .privilege__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .privilege__mark { width: 32px; height: 32px; display: block; background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo), 3px 3px 0 var(--sh); } .privilege__mark--off { background: var(--chip); box-shadow: var(--sh-chip), 3px 3px 0 var(--sh); } .privilege__term { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-micro); color: var(--ink-5); margin-bottom: 16px; text-transform: var(--caps); } .ach { padding: 16px; } .ach__mark { width: 34px; height: 34px; display: block; margin-bottom: 12px; background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo), 3px 3px 0 var(--sh); } .ach--locked .ach__mark { background: var(--chip); box-shadow: var(--sh-chip); } .ach--locked .card__title, .ach--locked .ach__title { color: var(--ink-5); } .ach--locked .card__text { color: var(--ink-8); } .ach__title { font-size: var(--fs-lg); margin-bottom: 6px; color: var(--ink-hi); text-shadow: var(--ts-soft); } .ach__when { font-size: var(--fs-micro); color: var(--ink-5); margin-top: 12px; text-transform: var(--caps); } .ach--locked .ach__when { color: var(--ink-8); } .dropzone { background: var(--well); box-shadow: var(--sh-well); padding: 26px; text-align: center; } .dropzone.is-over { box-shadow: var(--sh-well), inset 0 0 0 3px var(--gold); } .dropzone__t { font-size: var(--fs-md); margin-bottom: 6px; } .capepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 8px; } .capepick__i { background: var(--chip); box-shadow: var(--sh-chip); padding: 10px; text-align: center; border: 0; color: var(--ink); } .capepick__i.is-active { background: var(--gold); color: var(--on-gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .capepick__i.is-locked { opacity: .45; pointer-events: none; } .capepick__img { display: block; height: 64px; background: var(--hatch); margin-bottom: 9px; image-rendering: pixelated; object-fit: contain; width: 100%; } .capepick__n { font-size: var(--fs-body-s); } .skinview { position: relative; overflow: hidden; background: var(--well); background-image: linear-gradient(rgba(255,255,255,.03) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.03) 2px, transparent 2px); background-size: 32px 32px, 32px 32px; box-shadow: var(--sh-well); } .skinview canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } .skinview__hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); pointer-events: none; text-transform: var(--caps); } .skinview__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .skinview__tabs .chip { flex: 1 1 90px; justify-content: center; } /* ----------------------------------------------------------------------------- 20. Профиль -------------------------------------------------------------------------- */ .prof { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-lg); padding: var(--pad) var(--pad) 28px; max-width: var(--maxw); margin: 0 auto; } .prof > * { min-width: 0; } .prof > :first-child { flex: 0 0 200px; } /* * Имя тянется, плитки берут свою ширину. Раньше оба блока делили остаток * поровну, и между коротким ником и статистикой зияла пустота в пол-экрана. */ .prof > :nth-child(2) { flex: 1 1 260px; } .prof > .stats { flex: 0 1 520px; } .prof__skin { height: 280px; } .prof__name { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .prof__name h1 { margin: 0; font-size: var(--fs-hero); line-height: 1; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6); } .prof__sub { font-size: var(--fs-md); color: var(--ink-5); margin-bottom: 16px; } .prof__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--pad); max-width: var(--maxw); margin: 0 auto; } .tabs a, .tabs button { background: var(--chip); border: 0; color: var(--ink-3); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); padding: 0 18px; min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap; text-transform: var(--caps); box-shadow: var(--sh-chip); text-shadow: var(--ts-soft); } .tabs a:hover, .tabs button:hover { color: var(--ink); } .tabs a.is-active, .tabs button.is-active { color: var(--on-gold); background: var(--gold); text-shadow: var(--ts-gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .feedrow { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); align-items: baseline; } .feedrow:last-child { box-shadow: none; } .feedrow__t { flex: 0 0 auto; min-width: 130px; font-size: var(--fs-xs); color: var(--ink-5); text-transform: var(--caps); } .feedrow__v { flex: 1 1 240px; min-width: 0; font-size: var(--fs-body); color: var(--ink-2); } /* ----------------------------------------------------------------------------- 21. Авторизация -------------------------------------------------------------------------- */ .auth { min-height: 100vh; display: flex; flex-wrap: wrap; } /* Четверть экрана: витрина не должна спорить с формой, ради которой пришли. */ .auth__art { flex: 0 1 25%; min-width: 260px; padding: 32px var(--pad); background: var(--bg-bar); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; box-shadow: inset 0 3px 0 #2b2822; } .auth__pitch { max-width: 560px; margin-top: 26px; } .auth__pitch h2 { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: clamp(20px, 1rem + 1.4vw, 30px); line-height: 1.2; color: #fff; text-shadow: var(--ts); text-wrap: balance; margin-bottom: 14px; } .auth__pitch p { font-size: var(--fs-md); line-height: 1.65; color: var(--ink-5); text-wrap: pretty; } .auth__facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; padding-top: 20px; box-shadow: inset 0 2px 0 #2b2822; } .auth__fact b { display: block; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: 24px; line-height: 1; color: var(--gold); text-shadow: var(--ts); } .auth__fact span { display: block; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-4); margin-top: 7px; text-transform: var(--caps); } .auth__form { flex: 1 1 480px; min-width: 0; padding: 40px var(--pad); display: flex; align-items: center; justify-content: center; } /* Поля остаются читаемой ширины, даже когда справа три четверти экрана. */ .auth__in { width: 100%; max-width: 560px; } /* * Видна ровно одна панель. Какая — решает PHP и ставит класс на .auth__in. * Никаких :target и :has(): проверка показала, что :target при заходе по * ссылке с решёткой срабатывает не всегда, а вход в аккаунт не то место, * где можно на это полагаться. Здесь работает всё и везде. */ .auth__pane { display: none; } .auth__pane--first { display: block; } .auth__in--enter .auth__pane--first { display: none; } .auth__in--enter .auth__pane--enter { display: block; } .auth__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .auth__tabs a { background: var(--chip); color: var(--ink-3); padding: 0 16px; min-height: var(--tap); display: inline-flex; align-items: center; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); box-shadow: var(--sh-chip); text-shadow: var(--ts-soft); } .auth__tabs a:hover { color: var(--ink); } /* Активна та вкладка, чья панель сейчас открыта. */ .auth__tabs a[data-current], .auth__in--enter .auth__tab--login { color: var(--on-gold); background: var(--gold); text-shadow: var(--ts-gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .auth__in--enter .auth__tab--main[data-current] { color: var(--ink-3); background: var(--chip); text-shadow: var(--ts-soft); box-shadow: var(--sh-chip); } .auth__form h1 { margin: 0 0 8px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: clamp(22px, 1rem + 1.2vw, 30px); line-height: 1.15; color: #fff; text-shadow: var(--ts); } .auth__form .lead { margin: 0 0 24px; font-size: var(--fs-md); color: var(--ink-5); line-height: 1.6; } /* Левая половина: не реклама, а пропуск в сеть — адрес лобби и живой онлайн. */ .auth__pass { background: var(--well); box-shadow: var(--sh-well); padding: 14px 16px; margin: 22px 0; } .auth__pass .field__k { margin-bottom: 8px; } .auth__host { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: clamp(20px, 2.4vw, 28px); color: #ffff55; text-shadow: 2px 2px 0 #3f3f14; } .auth__host .ipcopy { font-size: var(--fs-micro); } /* «Уже есть аккаунт» — вход не должен требовать поиска по сайту. */ .authswitch { margin-top: 26px; padding-top: 22px; box-shadow: inset 0 2px 0 var(--well-lo); } /* ----------------------------------------------------------------------------- Площадки для голосования Плашка вертикальная: логотип чуть выше середины, под ним название и награда, внизу — единственное действие. Свечение берёт цвет из самого логотипа: у каждого мониторинга он свой, и страница перестаёт быть рядом одинаковых прямоугольников. -------------------------------------------------------------------------- */ .votegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; margin-bottom: 26px; } .votecard { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 3 / 4; min-height: 240px; padding: 0 16px 16px; overflow: hidden; background: var(--well); box-shadow: var(--sh-well); color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .votecard:hover { transform: translateY(-3px); box-shadow: var(--sh-well), 0 0 0 2px color-mix(in srgb, var(--glow) 55%, transparent); } .votecard:active { transform: translateY(0); } /* Ореол: мягкое пятно за логотипом, шире самого логотипа. */ .votecard__halo { position: absolute; left: 50%; top: 34%; width: 190px; height: 190px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 46%, transparent) 0%, color-mix(in srgb, var(--glow) 14%, transparent) 42%, transparent 68%); transition: opacity var(--dur-slow) var(--ease); opacity: .85; } .votecard:hover .votecard__halo { opacity: 1; } /* Логотип чуть выше середины — туда падает взгляд. */ .votecard__logo { position: relative; margin-top: auto; width: 72px; height: 72px; object-fit: contain; image-rendering: var(--pixelate); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 65%, transparent)); } .votecard__logo--none { display: grid; place-items: center; background: var(--chip); box-shadow: var(--sh-chip); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: 26px; color: var(--glow); filter: none; } .votecard__name { position: relative; margin-top: 16px; text-align: center; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); } .votecard__pts { position: relative; margin-top: 5px; margin-bottom: auto; font-size: var(--fs-sm); color: var(--ink-5); } .votecard__pts i { font-style: normal; } /* Действие внизу: до нажатия — приглашение, после — ожидание. */ .votecard__state { position: relative; width: 100%; min-height: 36px; margin-top: 14px; display: grid; place-items: center; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); text-transform: var(--caps); background: var(--chip); box-shadow: var(--sh-chip); color: var(--ink-4); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .votecard.is-ready .votecard__state { background: var(--gold); color: var(--on-gold); box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); } .votecard:hover .votecard__state { color: var(--ink); } .votecard.is-ready:hover .votecard__state { color: var(--on-gold); } /* Сводка одной строкой вместо четырёх карточек во всю ширину. */ .votestat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--well-lo); box-shadow: var(--sh-well); } .votestat__i { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--well); } .votestat__i b { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: 26px; line-height: 1; color: var(--ink-hi); text-shadow: var(--ts); } .votestat__i span { font-size: var(--fs-sm); color: var(--ink-5); line-height: 1.45; } .votestat__i .btn { margin-top: 8px; align-self: flex-start; } @media (max-width: 560px) { .votegrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .votecard { min-height: 210px; padding: 0 12px 12px; } .votecard__logo { width: 60px; height: 60px; } .votecard__halo { width: 150px; height: 150px; } } /* ----------------------------------------------------------------------------- Флажок «ждут ответа» Отличается от простого счётчика намеренно: это не состояние раздела, а просьба зайти. Число, которое человек захочет погасить, — акцентное и плотное; спокойный счёт остаётся тихой подписью. -------------------------------------------------------------------------- */ .cabnav__flag, .acct__flag { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--gold); color: var(--on-gold); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); line-height: 1; box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); text-shadow: none; } .cabnav__flag--warn { background: var(--rust); color: #fff; box-shadow: inset 2px 2px 0 var(--rust-lt), inset -2px -2px 0 rgba(0,0,0,.35); } /* В меню аккаунта флажок прижат к правому краю строки. */ .acct__links .acct__flag { margin-left: auto; } /* ----------------------------------------------------------------------------- Регистрация: шаги, подсказки, пароль Нумерация здесь не украшение — это настоящая последовательность, и человек имеет право заранее знать, что после формы будет письмо, а не вход. -------------------------------------------------------------------------- */ .steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; } .steps__i { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--well); box-shadow: var(--sh-well); } .steps__n { display: grid; place-items: center; width: 20px; height: 20px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); background: var(--chip); color: var(--ink-4); } .steps__t { font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); letter-spacing: var(--mono-tr); } .steps__i.is-now .steps__n { background: var(--gold); color: var(--on-gold); } .steps__i.is-now .steps__t { color: var(--ink-hi); } .steps__i.is-done .steps__n { background: var(--patina); color: var(--on-gold); } /* Подсказка под полем — то же место, где появляется ответ проверки. */ .field__hint--ok { color: var(--patina); } .field__hint--bad { color: var(--rust); } .pw { display: flex; align-items: stretch; gap: 0; } .pw input { flex: 1; min-width: 0; } .pw__eye { flex: none; padding: 0 14px; border: 0; cursor: pointer; background: var(--chip); box-shadow: var(--sh-chip); color: var(--ink-4); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-micro); text-transform: var(--caps); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .pw__eye:hover { color: var(--gold); background: var(--btn); } /* Согласие стоит там, где решение принимается, — вплотную к кнопке. */ .check--rules { margin: 22px 0 4px; padding: 12px 14px; background: var(--well); box-shadow: var(--sh-well); } /* Целое предложение — набирается текстовым шрифтом, а не дисплейным капсом. */ .note--center { margin-top: 12px; text-align: center; line-height: 1.5; font-family: var(--font-sans); font-variation-settings: normal; letter-spacing: normal; text-transform: none; } /* ----------------------------------------------------------------------------- Кто играет — выбор сохранённого аккаунта Метафора взята из лаунчера: выбирают не «учётную запись», а персонажа. Поэтому голова скина здесь крупнее всего остального на экране входа. -------------------------------------------------------------------------- */ .who { margin-bottom: 30px; } .who h1 { margin: 0 0 8px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: clamp(22px, 1rem + 1.2vw, 30px); line-height: 1.15; color: #fff; text-shadow: var(--ts); } .who .lead { margin: 0 0 20px; font-size: var(--fs-md); color: var(--ink-5); line-height: 1.6; } .who__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } .who__card { display: flex; flex-direction: column; } .who__card > form { display: flex; } .who__card > form:first-child { flex: 1; } .who__card > form > .who__pick { flex: 1; } .who__pick { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; border: 0; padding: 18px 12px 14px; text-align: center; cursor: pointer; background: var(--btn); box-shadow: var(--sh-btn); color: var(--ink); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .who__pick:hover { background: var(--btn-hi); transform: translateY(-2px); } .who__pick:active { transform: translate(var(--drop), var(--drop)); box-shadow: var(--sh-btn-a); } .who__face { width: 64px; height: 64px; image-rendering: var(--pixelate); box-shadow: var(--sh-well); background: var(--well); } .who__nick { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-md); color: var(--ink-hi); text-shadow: var(--ts-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who__when { font-size: var(--fs-micro); color: var(--ink-5); line-height: 1.3; } .who__need { font-size: var(--fs-micro); color: var(--gold); text-transform: var(--caps); } /* Свой аккаунт не выбирают заново — его отмечают. */ .who__pick.is-current, .who__pick--locked { background: var(--chip); box-shadow: var(--sh-chip); } .who__pick.is-current .who__when { color: var(--patina); } .who__forget { width: 100%; min-height: 30px; margin-top: 2px; cursor: pointer; border: 0; background: transparent; font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); transition: color var(--dur) var(--ease); } .who__forget:hover { color: var(--rust); } .who__all { margin-top: 16px; } .who__wipe { font-size: var(--fs-sm); color: var(--ink-5); cursor: pointer; border: 0; background: transparent; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .who__wipe:hover { color: var(--rust); } /* Заголовок формы лишний, когда выше уже спросили «кто играет?». */ .auth__in--who .auth__lead { display: none; } .auth__in--who .loginmini::before { content: 'Войти в другой аккаунт'; display: block; margin-bottom: 12px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--ink-4); text-transform: var(--caps); padding-top: 18px; box-shadow: inset 0 2px 0 var(--well-lo); } /* * На узком экране колонки складываются: витрина занимает всю ширину и * ужимается до полезного — адреса лобби и онлайна. Заголовок-обещание там * только отодвигает форму, ради которой человек пришёл. */ @media (max-width: 760px) { /* * Витрина сжимается до логотипа. Адрес лобби и цифры полезны на большом * экране, но с телефона в игру не заходят, а форму они отодвигают на * пол-экрана вниз — до неё пришлось бы доскроллить. */ .auth__art { flex: 1 1 100%; min-width: 0; padding: 14px var(--pad); } .auth__art .auth__pitch, .auth__art .auth__pass, .auth__art .auth__facts { display: none; } .auth__form { flex: 1 1 100%; padding: 22px var(--pad) 40px; } .who__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr)); gap: 10px; } } .authswitch__t { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); margin-bottom: 14px; } /* Капча движка: картинка мельче, чем нужно глазу, — увеличиваем и даём кнопку. */ .c-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .c-captcha a, .c-captcha #dle-captcha { display: block; line-height: 0; flex: 0 0 auto; } .c-captcha img { width: 170px; height: 85px; background: var(--well); box-shadow: var(--sh-well); image-rendering: auto; opacity: .92; } .c-captcha input { flex: 1 1 160px; min-width: 0; max-width: 240px; } .c-captcha__redo { flex: 0 0 auto; } /* ----------------------------------------------------------------------------- 22. Подвал -------------------------------------------------------------------------- */ .foot { margin-top: auto; background: var(--bg-foot); box-shadow: inset 0 3px 0 #2b2822; } .foot__in { max-width: var(--maxw); margin: 0 auto; padding: 22px var(--pad-x); display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-4); text-transform: var(--caps); text-shadow: var(--ts-soft); } .foot__links { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; } .foot a, .foot button { color: var(--ink-4); background: none; border: 0; padding: 0; font: inherit; text-shadow: var(--ts-soft); } .foot a:hover, .foot button:hover { color: var(--gold); } /* ----------------------------------------------------------------------------- 23. Крошки, сообщения, пустые состояния, тосты -------------------------------------------------------------------------- */ .crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 12px var(--pad); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); text-shadow: var(--ts-soft); } .crumbs a { color: var(--ink-5); } .crumbs a:hover { color: var(--gold); } .crumbs > span:last-child { color: var(--ink-2); } .msg { background: var(--frame); box-shadow: var(--sh-frame), inset 6px 0 0 var(--gold); padding: 16px 20px; margin-bottom: var(--gap); } .msg__t { font-size: var(--fs-lg); color: var(--ink-hi); margin-bottom: 6px; text-shadow: var(--ts-soft); } .msg__b { font-size: var(--fs-body); color: var(--ink-3); line-height: 1.65; text-wrap: pretty; } .msg__b a { color: var(--gold); } .msg--bad { box-shadow: var(--sh-frame), inset 6px 0 0 var(--rust); } .msg--ok { box-shadow: var(--sh-frame), inset 6px 0 0 var(--patina); } .msg--info { box-shadow: var(--sh-frame), inset 6px 0 0 var(--patina); } .msg--warn { box-shadow: var(--sh-frame), inset 6px 0 0 var(--gold); } .msg--warn .msg__t { color: var(--gold); } .empty { background: var(--well); box-shadow: var(--sh-well); padding: 40px 24px; text-align: center; } .empty__t { font-size: var(--fs-lg); color: var(--ink-hi); margin-bottom: 8px; text-shadow: var(--ts-soft); } .empty__b { font-size: var(--fs-body); color: var(--ink-5); } .empty__act { margin-top: 16px; display: inline-flex; } .toasts { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 210; display: flex; flex-direction: column; gap: 10px; max-width: 460px; } .toast { background: var(--frame); color: #fff; padding: 15px 19px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-lg); line-height: 1.5; text-shadow: var(--ts); box-shadow: inset var(--px) var(--px) 0 var(--gold), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--frame-lo), 6px 6px 0 rgba(0,0,0,.5); animation: pop var(--dur-slow) var(--ease-out); } .toast--bad { box-shadow: inset var(--px) var(--px) 0 var(--rust), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--frame-lo), 6px 6px 0 rgba(0,0,0,.5); } .toast--ok { box-shadow: inset var(--px) var(--px) 0 var(--patina), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--frame-lo), 6px 6px 0 rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce) { .toast { animation: none } } .step__n { font-size: var(--fs-sm); color: var(--gold); margin-bottom: 10px; text-transform: var(--caps); } .step__t { font-size: var(--fs-lg); color: var(--ink-hi); margin-bottom: 8px; text-shadow: var(--ts-soft); } .step__b { font-size: var(--fs-body); color: var(--ink-5); line-height: 1.65; margin-bottom: 16px; text-wrap: pretty; } .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.13em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } .icon--14 { width: 14px; height: 14px; } .icon--16 { width: 16px; height: 16px; } .icon--20 { width: 20px; height: 20px; } /* Модальное окно: скрыто атрибутом hidden, показывается снятием атрибута. */ .modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(6,5,3,.8); animation: fade var(--dur) var(--ease-out); } .modal[hidden] { display: none; } .modal__box { width: 100%; max-width: 480px; padding: 20px; max-height: 88vh; overflow-y: auto; background: var(--frame); box-shadow: var(--sh-frame); animation: pop var(--dur-slow) var(--ease-out); } .modal__foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* ----------------------------------------------------------------------------- 24. Мобильное меню -------------------------------------------------------------------------- */ .mobilenav { display: none; background: var(--bg-bar); box-shadow: inset 0 3px 0 #2b2822; position: relative; z-index: 25; } .mobilenav.is-open { display: block; animation: drop-in var(--dur) var(--ease-out); } .mobilenav__in { padding: 12px var(--pad) 20px; display: flex; flex-direction: column; gap: 4px; max-width: var(--maxw); margin: 0 auto; } .mobilenav a { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; min-height: var(--tap); font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: var(--mono-tr); font-size: var(--fs-sm); color: var(--ink-2); text-transform: var(--caps); text-shadow: var(--ts-soft); } .mobilenav a:hover, .mobilenav a.is-active { color: var(--gold); background: var(--chip); } .mobilenav .btnrow { margin-top: 14px; } .mobilenav .btnrow .btn { flex: 1 1 140px; } /* ----------------------------------------------------------------------------- 24a. Появление Список собирается лесенкой сверху вниз — так читается, что это перечень, а не одна картинка. Задержка мелкая: к четвёртой строке движение уже кончилось. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .armlix-js .mon > .mon__row, .armlix-js .newsfeed > .newsline, .armlix-js .tbl > .tbl__row, .armlix-js .clan-grid > .clan-card, .armlix-js .side__block, .armlix-js .postlist > .postcard { animation: rise var(--dur-slow) var(--ease-out) backwards; } .armlix-js .mon > .mon__row:nth-child(2), .armlix-js .newsfeed > .newsline:nth-child(1), .armlix-js .tbl > .tbl__row:nth-child(1), .armlix-js .clan-grid > .clan-card:nth-child(1), .armlix-js .side__block:nth-child(1), .armlix-js .postlist > .postcard:nth-child(1) { animation-delay: 0ms; } .armlix-js .mon > .mon__row:nth-child(3), .armlix-js .newsfeed > .newsline:nth-child(2), .armlix-js .tbl > .tbl__row:nth-child(2), .armlix-js .clan-grid > .clan-card:nth-child(2), .armlix-js .postlist > .postcard:nth-child(2) { animation-delay: 45ms; } .armlix-js .mon > .mon__row:nth-child(4), .armlix-js .newsfeed > .newsline:nth-child(3), .armlix-js .tbl > .tbl__row:nth-child(3), .armlix-js .clan-grid > .clan-card:nth-child(3), .armlix-js .postlist > .postcard:nth-child(3) { animation-delay: 90ms; } .armlix-js .mon > .mon__row:nth-child(n+5), .armlix-js .newsfeed > .newsline:nth-child(n+4), .armlix-js .tbl > .tbl__row:nth-child(n+4), .armlix-js .clan-grid > .clan-card:nth-child(n+4), .armlix-js .postlist > .postcard:nth-child(n+4) { animation-delay: 130ms; } /* * Блоки ниже сгиба проявляются, когда до них доходит прокрутка: класс * ставит наблюдатель в lib.js. Смещение маленькое — страница не должна * дёргаться под курсором. */ .armlix-js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .armlix-js [data-reveal].is-in { opacity: 1; transform: none; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; } } /* ----------------------------------------------------------------------------- 25. Адаптив Вёрстка резиновая, поэтому запросов всего три: спрятать то, что теряет смысл при переносе, и вернуть зонам нажатия полный размер. -------------------------------------------------------------------------- */ @media (max-width: 1100px) { :root { --gap-lg: 20px; } } @media (max-width: 900px) { .nav, .mast__right .userchip { display: none; } .burger { display: inline-flex; } .mon__head, .tbl__head, [data-colhead] { display: none; } .cabnav { position: static; max-width: none; flex: 1 1 100%; padding: 8px; } .cabnav__k, .cabnav__foot { display: none; } .cabnav__list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; } .cabnav a { flex: 1 1 140px; white-space: nowrap; margin-bottom: 0; } .cart { position: static; } .prof > :first-child { flex: 0 1 150px; } .prof__skin { height: 200px; } body { background-attachment: scroll; } } @media (max-width: 560px) { :root { --pad: 12px; --pad-x: 12px; --gap: 10px; --gap-lg: 16px; --pad-card: 14px; --frame-pad: 6px; } .mon__row > :nth-child(4), .mon__row > :nth-child(6) { flex: 1 1 100%; } .mon__row > :nth-child(5) { margin-left: 0; } .newsline__num { text-align: left; } .comment .comments-tree-list, .comment__replies { margin-left: 0; } .commentform__row > .face, .comment__in > .face { display: none; } .toasts { max-width: none; } .foot__in { flex-direction: column; align-items: flex-start; } .stats, .stats--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } } /* ----------------------------------------------------------------------------- 26. Мелочи движка -------------------------------------------------------------------------- */ .hide-sm { display: inline; } @media (max-width: 900px) { .hide-sm { display: none !important; } } .catmenu { display: flex; flex-direction: column; } .catmenu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; box-shadow: inset 0 -2px 0 var(--head-lo); font-size: var(--fs-body); } .catmenu li:last-child > a { box-shadow: none; } .catmenu ul { padding-left: 14px; } .rate { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); } .rate span[title] { cursor: pointer; } .rate span[title]:hover { color: var(--gold); } .vote_list li { padding: 8px 0; font-size: var(--fs-body); color: var(--ink-3); } .vote_list label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .vote_list input[type="radio"], .vote_list input[type="checkbox"] { margin-top: 2px; } .card a:not(.btn):not(.chip) { color: inherit; } .card a:not(.btn):not(.chip):hover { color: var(--gold); } .nodata { font-size: var(--fs-micro); color: var(--ink-8); text-transform: var(--caps); } /* ----------------------------------------------------------------------------- 27. Печать -------------------------------------------------------------------------- */ @media print { .ribbon, .mast, .mobilenav, .layout__aside, .foot, .pager, .commentform, .toasts, .crumbs { display: none !important; } body { background: #fff; color: #000; } .panel, .card, .article, .tbl, .mon { background: #fff; box-shadow: none; } .panel::before, .tbl::before, .mon::before, .newsfeed::before { display: none; } .content { color: #000; font-size: 12pt; } a { color: #000; } } /* ----------------------------------------------------------------------------- 28. Кланы Герб — не картинка, а тег клана в его собственном цвете: набирается тем же пиксельным шрифтом, что и остальной интерфейс, поэтому не требует ассетов и не ломается, если глава не загрузил баннер. -------------------------------------------------------------------------- */ .crest { display: inline-grid; place-items: center; flex: 0 0 auto; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: .04em; line-height: 1; font-size: 13px; color: var(--on-gold); text-transform: var(--caps); overflow: hidden; background: var(--crest, var(--gold)); box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.35), 3px 3px 0 var(--sh); text-shadow: 1px 1px 0 rgba(255,255,255,.25); } .crest[style*="64px"] { font-size: 20px; } .crest[style*="56px"] { font-size: 18px; } .crest[style*="52px"] { font-size: 17px; } .crest[style*="32px"] { font-size: 12px; } /* Метка клана рядом с ником: цвет и формат задаёт глава в настройках клана. */ .clantag { display: inline-flex; align-items: center; vertical-align: baseline; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); letter-spacing: .05em; font-size: .92em; color: var(--clan, var(--gold)); text-shadow: var(--ts-soft); } .clantag--box { padding: 2px 7px; color: var(--on-gold); background: var(--clan, var(--gold)); box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.3); text-shadow: 1px 1px 0 rgba(255,255,255,.22); } .clantag__role { color: var(--ink-4); font-size: .9em; margin-left: 4px; text-transform: var(--caps); } .clantitle { font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-4); text-transform: var(--caps); } .clan-grid { display: grid; gap: 8px; } .clan-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; background: var(--frame); box-shadow: var(--sh-frame); color: var(--ink); background-size: cover; background-position: center; } .clan-card { transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .clan-card:hover { color: var(--ink); background-color: var(--panel-lit); transform: translate(-1px, -1px); } .clan-card:active { transform: translate(2px, 2px); } .clan-card__body { flex: 1 1 220px; min-width: 0; } .clan-card__name { font-size: var(--fs-lg); color: #fff; text-shadow: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clan-card__motto { font-size: var(--fs-body-s); color: var(--ink-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clan-card__stats { flex: 0 0 auto; min-width: 76px; text-align: right; } .clan-card__stats b { display: block; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-lg); color: var(--ink-hi); text-shadow: var(--ts-soft); } .clan-card__stats i { display: block; font-style: normal; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .clan-banner { height: 190px; background-size: cover; background-position: center; box-shadow: var(--sh-well); image-rendering: var(--pixelate); } /* ----------------------------------------------------------------------------- 29. Служебные раскладки разделов -------------------------------------------------------------------------- */ .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .searchbar { display: flex; flex-wrap: wrap; gap: 8px; } .searchbar input { flex: 1 1 180px; min-width: 0; } .row-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .row-tools .inp, .row-tools input, .row-tools select { width: auto; min-width: 150px; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: var(--frame-pad); } .stat-row .stat { display: grid; gap: 3px; padding: 12px 14px; text-align: center; background: var(--well); box-shadow: var(--sh-well); } .stat-row .stat b { font-size: var(--fs-h4); color: var(--ink-hi); text-shadow: var(--ts-soft); } .stat-row .stat i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .feed { display: grid; gap: 0; } .feed__row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 9px 0; font-size: var(--fs-body-s); box-shadow: inset 0 -2px 0 var(--head-lo); } .feed__row:last-child { box-shadow: none; } .feed__row > :first-child { flex: 0 0 auto; min-width: 110px; color: var(--ink-5); } .feed__row > :last-child { flex: 1 1 200px; min-width: 0; } /* ----------------------------------------------------------------------------- 30. Голоса -------------------------------------------------------------------------- */ .voterow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--well); box-shadow: inset 0 -2px 0 var(--well-lo); } .voterow:last-child { box-shadow: none; } .voterow__name { flex: 1 1 160px; min-width: 0; font-size: var(--fs-md); } .voterow__when { flex: 0 0 auto; font-family: var(--font-mono); font-variation-settings: var(--font-feat); font-weight: var(--mono-weight); font-size: var(--fs-micro); color: var(--ink-5); text-transform: var(--caps); } .voterow .btn { flex: 0 0 auto; }