/* «Золото» — оформление. Тема управляется атрибутом data-theme на (ставит theme-boot.js): с 20:00 до 07:00 тёмная принудительно, иначе — последняя выбранная. Про цвет. Золото на светлом фоне — ловушка: чтобы текст держал контраст 4,5, его приходится затемнять, и оно уезжает в хаки. Поэтому золота здесь ДВА. --gold — материал: линии, полосы, свечение. Ему нужен контраст 3:1 (графика), и он остаётся насыщенным янтарём. --gold-ink — краска для текста, темнее и глубже. Полосы графиков строятся от --band (тот же янтарь, что --gold), а не от текстовой краски: именно смешение этих двух ролей и давало грязь. */ :root { color-scheme: dark; --void: #0a0908; --surface: #14110f; --surface-2: #191512; --surface-tip: #17130f; --gold: #f2c55c; --gold-ink: #f2c55c; --gold-hot: #ffe3a8; --chip-ink: #0a0908; --band: 242, 197, 92; --ink: #f3eee5; --ink-2: #b7ad9c; --muted: #8d8373; --hist-rgb: 183, 173, 156; --edge: rgba(242, 197, 92, .16); --edge-soft: rgba(242, 197, 92, .085); --neg: #e6907a; --pos: #7ecba4; --warn: #e5b25a; --glow-text: 0 0 16px rgba(242, 197, 92, .26); --glow-rule: 0 0 12px rgba(242, 197, 92, .45); --glow-dot: 0 0 10px rgba(242, 197, 92, .85); --median-shadow: drop-shadow(0 0 5px rgba(242, 197, 92, .70)); --dot-shadow: drop-shadow(0 0 7px rgba(242, 197, 92, .9)); } html[data-theme="light"] { color-scheme: light; --void: #f2efe9; --surface: #ffffff; --surface-2: #fbf9f5; --surface-tip: #ffffff; --gold: #c4881a; --gold-ink: #8a5c07; --gold-hot: #a5710f; --chip-ink: #ffffff; --band: 201, 141, 30; --ink: #1b160f; --ink-2: #514a3e; --muted: #6d6455; --hist-rgb: 81, 74, 62; --edge: rgba(27, 22, 15, .14); --edge-soft: rgba(27, 22, 15, .07); --neg: #9c3b2c; --pos: #24614a; --warn: #8a5c07; /* Свечение на белом читается как грязное пятно. Вместо него — мягкая тень: та же роль «объекта над поверхностью», но чистыми средствами. */ --glow-text: none; --glow-rule: none; --glow-dot: 0 1px 3px rgba(27, 22, 15, .28); --median-shadow: drop-shadow(0 1px 1.5px rgba(27, 22, 15, .22)); --dot-shadow: drop-shadow(0 1px 2px rgba(27, 22, 15, .3)); } * { box-sizing: border-box; } html { background: var(--void); scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--void); color: var(--ink); font-family: Onest, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; isolation: isolate; } /* Фон тёмной темы: два тёплых пятна и вертикальный градиент. */ body::before { content: ""; position: fixed; z-index: -3; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 2%, rgba(242, 197, 92, .10), transparent 36%), radial-gradient(circle at 4% 44%, rgba(242, 197, 92, .045), transparent 28%), linear-gradient(180deg, #0a0908 0%, #100d0a 55%, #0a0908 100%); } /* В светлой теме фон — бумага. Никаких пятен и сеток: они и превращали светлую тему в мутную. */ html[data-theme="light"] body::before { background: linear-gradient(180deg, #f5f2ec 0%, #f2efe9 46%, #efece5 100%); } /* Сетка в перспективе — только в тёмной теме, где она даёт глубину. */ body::after { content: ""; position: fixed; z-index: -2; left: -30%; right: -30%; top: 48vh; height: 60vh; pointer-events: none; opacity: .14; transform: perspective(430px) rotateX(64deg); transform-origin: center top; background-image: linear-gradient(rgba(242, 197, 92, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 197, 92, .26) 1px, transparent 1px); background-size: 76px 54px; mask-image: linear-gradient(to bottom, transparent, black 14%, black 60%, transparent 100%); } html[data-theme="light"] body::after { display: none; } .wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px) 96px; } h1, h2, h3 { margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.04; } h1 b { font-weight: 500; color: var(--gold-ink); text-shadow: var(--glow-text); } h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -.035em; } h3 { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } p { margin: 0; } .mono, .n, .kick, .eyebrow, thead th, .chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- шапка */ .topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--edge); position: relative; } .topbar::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 148px; height: 2px; background: var(--gold); box-shadow: var(--glow-rule); } .brand { display: flex; align-items: baseline; gap: 13px; min-width: 0; } .brand-word { font-family: "JetBrains Mono", monospace; font-size: clamp(13px, 2.2vw, 18px); letter-spacing: .26em; font-weight: 500; text-transform: uppercase; text-shadow: var(--glow-text); white-space: nowrap; } .brand-caption { padding-left: 12px; border-left: 1px solid var(--edge); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .17em; line-height: 1.35; white-space: nowrap; } .topbar-meta { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; } /* Точка состояния. Пока данные не получены — серая и неподвижная: молчание честнее зелёного, которое нечем подтвердить. Золотым она не горит никогда, иначе цвет оформления читался бы как цвет состояния. */ .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--muted); } .live-dot.ok { background: var(--pos); box-shadow: 0 0 9px color-mix(in srgb, var(--pos) 75%, transparent); animation: live 2.4s ease-in-out infinite; } .live-dot.stale { background: var(--warn); box-shadow: 0 0 9px color-mix(in srgb, var(--warn) 75%, transparent); animation: live 1.1s ease-in-out infinite; } .live-dot.down { background: var(--neg); box-shadow: 0 0 9px color-mix(in srgb, var(--neg) 75%, transparent); animation: live 1.1s ease-in-out infinite; } @keyframes live { 0%, 100% { opacity: 1 } 50% { opacity: .38 } } .theme-toggle { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); background: var(--surface); border: 1px solid var(--edge); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 55%, transparent); outline: none; } .theme-toggle-track { width: 30px; height: 14px; padding: 2px; border: 1px solid var(--edge); display: block; flex: none; } .theme-toggle-track i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: var(--glow-dot); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } html[data-theme="light"] .theme-toggle-track i { transform: translateX(16px); } .theme-toggle[data-locked="1"] { border-style: dashed; } /* ---------------------------------------------------------------- баннер */ .banner { margin-top: 20px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); font-size: .92rem; color: var(--ink-2); } .banner b { color: var(--warn); } /* ---------------------------------------------------------------- герой */ header.pg { padding: 60px 0 34px; display: flex; flex-direction: column; gap: 20px; } .eyebrow { font-size: 9px; letter-spacing: .19em; text-transform: uppercase; color: var(--gold-ink); } .lede { font-size: 1.06rem; color: var(--ink-2); } /* -------------------------------------------------------------- плитки */ .state { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-top: 30px; } .cell { position: relative; padding: 16px 16px 15px; background: var(--surface); border: 1px solid var(--edge-soft); display: flex; flex-direction: column; gap: 4px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); transition: border-color .3s; } .cell::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 44%; background: linear-gradient(90deg, var(--gold), transparent); opacity: .75; } .cell:hover { border-color: color-mix(in srgb, var(--gold) 42%, transparent); } .cell .v { font-family: "JetBrains Mono", monospace; font-size: 1.42rem; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cell .v.big { color: var(--gold-ink); text-shadow: var(--glow-text); } .cell .l { font-size: .75rem; color: var(--muted); line-height: 1.35; } /* Живая котировка — справочная строка, а не показатель движка: мельче, приглушённее и отделена волосяной линией от числа, на котором стоит панель. */ .cell .live { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--edge-soft); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--muted); white-space: nowrap; } .cell .live b { color: var(--ink-2); font-weight: 500; } .cell .live .up { color: var(--pos); } .cell .live .down { color: var(--neg); } /* ------------------------------------------------------------- секции */ section { padding-top: 76px; display: flex; flex-direction: column; gap: 18px; } .shead { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 9px; } .shead::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--gold); box-shadow: var(--glow-rule); } .kick { font-size: 9px; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); } /* Ширину текста не режем: абзацы идут во всю ширину блока, который под ними. */ .note { font-size: .95rem; color: var(--ink-2); } .note.sm { font-size: .85rem; margin-top: 12px; } .note b, .lede b { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------- панели */ .card { position: relative; background: var(--surface); border: 1px solid var(--edge-soft); padding: 22px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent 58%); opacity: .7; } /* -------------------------------------------------------------- график */ .chart { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; } svg { display: block; width: 100%; height: auto; min-width: 660px; } #fan { min-width: 720px; } /* Градиенты полос: цвет приходит из CSS, прозрачность — из атрибутов в разметке. Это принципиально: тема переключается без перерисовки графика, а значит цвет не имеет права жить в атрибутах SVG. */ svg .gs { stop-color: var(--gold); } svg .gh { stop-color: rgb(var(--hist-rgb)); } svg .grid { stroke: var(--edge-soft); stroke-width: 1; } svg .base { stroke: var(--edge); stroke-width: 1; } svg .spotline { stroke: rgba(var(--band), .34); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; } svg .today { stroke: rgba(var(--band), .5); stroke-width: 1; stroke-dasharray: 3 4; } svg .vrule { stroke: rgba(var(--band), .28); stroke-width: 1; stroke-dasharray: 2 6; } svg .axlbl { fill: var(--muted); font: 11.5px "JetBrains Mono", monospace; } svg .axlbl.strong { fill: var(--ink-2); } svg .mark { fill: var(--muted); font: 400 11.5px "JetBrains Mono", monospace; } svg .chip-bg { fill: var(--gold); } svg .chip-tx { fill: var(--chip-ink); font: 500 12px "JetBrains Mono", monospace; } svg .histfill { stroke: none; } svg .hist { fill: none; stroke: rgb(var(--hist-rgb)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } svg .median { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: var(--median-shadow); } svg .dot { fill: var(--gold); filter: var(--dot-shadow); } svg .dot-ring { fill: none; stroke: rgba(var(--band), .45); stroke-width: 1; } svg .b90, svg .b90c { stroke: none; } svg .b80 { stroke: none; } svg .b50, svg .b50c { stroke: none; } svg .edge { fill: none; stroke: rgba(var(--band), .34); stroke-width: 1; } svg .edge.inner { stroke: rgba(var(--band), .30); } /* Проявление при загрузке: полосы растворяются из ничего, медиана прочерчивается. Ровно один раз и только если пользователь не просил покоя. */ svg .fade-in { animation: fadeIn .55s ease both; } svg .fade-in.d1 { animation-delay: .04s; } svg .fade-in.d2 { animation-delay: .11s; } svg .fade-in.d3 { animation-delay: .18s; } svg .median { animation: drawIn .9s cubic-bezier(.4, 0, .2, 1) both; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes drawIn { from { stroke-dasharray: 1; stroke-dashoffset: 1 } to { stroke-dasharray: 1; stroke-dashoffset: 0 } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none } svg .fade-in, svg .median { animation: none } } /* Слой наведения */ svg .hit { fill: transparent; cursor: crosshair; } svg .hover-line { stroke: var(--gold); stroke-width: 1; opacity: .55; } svg .hover-dot { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; } svg .hover-dot.mid { fill: var(--gold); filter: var(--dot-shadow); } .tip { position: absolute; z-index: 6; pointer-events: none; left: 0; top: 0; min-width: 182px; padding: 12px 14px; background: var(--surface-tip); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); opacity: 0; transition: opacity .12s ease; } .tip.on { opacity: 1; } .tip .tip-head { color: var(--gold-ink); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--edge-soft); } .tip .row { display: flex; justify-content: space-between; gap: 18px; } .tip .row.mid { color: var(--ink); font-weight: 500; } .tip .row span:first-child { color: var(--muted); } .tip .row.mid span:first-child { color: var(--gold-ink); } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; } .sw { display: inline-block; width: 20px; height: 8px; margin-right: 7px; vertical-align: middle; } .sw-b90, .sw-b90c { background: rgba(var(--band), .10); border: 1px solid rgba(var(--band), .32); } .sw-b80 { background: rgba(var(--band), .22); border: 1px solid rgba(var(--band), .32); } .sw-b50, .sw-b50c { background: rgba(var(--band), .38); border: 1px solid rgba(var(--band), .4); } .sw-med { background: var(--gold); height: 2px; } .sw-hist { background: rgb(var(--hist-rgb)); height: 2px; } .legend-hint { margin-left: auto; } /* -------------------------------------------------------------- таблицы */ .scroll { overflow-x: auto; border: 1px solid var(--edge-soft); background: var(--surface); } .scroll:focus-visible, .chart:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; } table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 660px; } thead th { /* Иерархию держат размер, капитель и трекинг, а не бледность: приглушённый цвет на золотистой подложке шапки не добирал 4,5 в светлой теме. */ text-align: left; padding: 13px 15px; color: var(--ink-2); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--gold) 5%, transparent); border-bottom: 1px solid var(--edge); } thead th.r, td.n { text-align: right; } tbody td { padding: 13px 15px; border-bottom: 1px solid var(--edge-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: color-mix(in srgb, var(--gold) 4%, transparent); } td.k { font-weight: 500; white-space: nowrap; } td.k .sub { display: block; margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--muted); font-weight: 400; } td.n { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Медиана — главное число строки. Выделяем её тёплой подложкой и весом, а не золотой краской: краска на светлом фоне обязана быть тёмной, и весь смысл «золотого акцента» пропадал. */ td.em { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--gold) 9%, transparent); } tbody tr:hover td.em { background: color-mix(in srgb, var(--gold) 13%, transparent); } td.dim { color: var(--muted); } td.neg { color: var(--neg); } td.pos { color: var(--pos); } td.warn { color: var(--warn); } tr.anchor td { background: color-mix(in srgb, var(--gold) 5%, transparent); } tr.anchor td.em { background: color-mix(in srgb, var(--gold) 13%, transparent); } tr.anchor td.k { font-weight: 400; } tr.anchor td.k::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; background: var(--gold); transform: rotate(45deg); vertical-align: middle; } /* ------------------------------------------------------------ карточки */ .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--edge-soft); font-size: .88rem; } .kv:last-child { border-bottom: 0; } .kv .kk { color: var(--muted); } .kv .vv { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--ink); } .card > h3 { margin-bottom: 12px; } .chip { display: inline-block; padding: 3px 8px; margin-right: 6px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); background: color-mix(in srgb, var(--gold) 5%, transparent); } .chip.w { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .callout { position: relative; padding: 17px 19px; border: 1px solid var(--edge-soft); border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 4%, var(--surface)); display: flex; flex-direction: column; gap: 8px; } .callout h3 { color: var(--warn); font-size: .92rem; font-weight: 600; } .callout p { font-size: .89rem; color: var(--ink-2); } /* ------------------------------------------------- сворачиваемые блоки */ .fold { background: var(--surface); border: 1px solid var(--edge-soft); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 19px; font: 500 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: color .2s; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::marker { content: ""; } .fold > summary:hover, .fold > summary:focus-visible { color: var(--gold-ink); outline: none; } .fold > summary:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); } .fold-arrow { width: 8px; height: 8px; flex: none; margin: 0 1px 2px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .25s ease; } .fold[open] .fold-arrow { transform: rotate(45deg) translate(-1px, -1px); } .fold-meta { margin-left: auto; color: var(--muted); text-align: right; } .fold-body { padding: 2px 19px 20px; display: flex; flex-direction: column; gap: 14px; } .fold-lg > summary { font-size: 12px; letter-spacing: .16em; padding: 19px; color: var(--ink); } /* Плавное раскрытие там, где браузер это уже умеет; где нет — просто мгновенно. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .fold::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s ease allow-discrete; } .fold[open]::details-content { block-size: auto; } } ul.plain { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: .91rem; color: var(--ink-2); } ul.plain li { position: relative; padding-left: 20px; } ul.plain li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } ul.plain b { color: var(--ink); font-weight: 600; } footer.pg { margin-top: 78px; padding-top: 24px; border-top: 1px solid var(--edge); font-size: .78rem; color: var(--muted); line-height: 1.7; display: flex; flex-direction: column; gap: 8px; } .footer-mark { display: flex; gap: 4px; margin-top: 10px; } .footer-mark i { width: 20px; height: 2px; background: var(--gold); box-shadow: var(--glow-rule); } .footer-mark i:nth-child(2) { opacity: .55; } .footer-mark i:nth-child(3) { opacity: .25; } a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-color: var(--gold-ink); } a:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } @media (max-width: 700px) { .topbar { min-height: 0; padding: 14px 0; flex-wrap: wrap; gap: 10px; } .brand-caption { display: none; } header.pg { padding: 36px 0 26px; } section { padding-top: 52px; } .card { padding: 15px; } .fold > summary { padding: 14px; font-size: 9.5px; } .fold-body { padding: 2px 14px 16px; } .fold-meta { display: none; } .tip { min-width: 150px; font-size: 10.5px; padding: 9px 11px; } }