/* ============================================================ Скин «Таблица» — экспериментальный облик data-board.ru. Включается классом .skin-sheet на (параметр ?skin=sheet). Идея: страница начинается как электронная таблица и по мере прокрутки «расшивается» в дашборд. ============================================================ */ .skin-sheet { --cell: 34px; --grid-a: 1; --grid-line: color-mix(in srgb, var(--line) 62%, transparent); --gutter: 46px; --hdr: 34px; } /* ---------- сетка ячеек ---------- */ .skin-sheet body { position: relative; background-image: repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--cell)), repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--cell)); background-position: var(--gutter) 0; background-attachment: fixed; } .skin-sheet body::before { content: ""; position: fixed; inset: 0; background: var(--bg); opacity: calc(1 - var(--grid-a)); pointer-events: none; z-index: 0; transition: opacity .25s linear; } .skin-sheet header, .skin-sheet footer, .skin-sheet .sheet-nav, .skin-sheet .col-heads, .skin-sheet .row-gutter { position: relative; z-index: 1; } .skin-sheet main { position: relative; z-index: 1; } .skin-sheet header { z-index: 41; } /* ---------- гуттер с номерами строк ---------- */ .skin-sheet .row-gutter { position: fixed; top: 0; bottom: 0; left: 0; width: var(--gutter); z-index: 40; background: var(--panel-2, var(--panel)); border-right: 1px solid var(--line); font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); padding-top: calc(var(--hdr) + 58px); overflow: hidden; user-select: none; } .skin-sheet .row-gutter i { display: block; height: var(--cell); line-height: var(--cell); text-align: center; font-style: normal; border-bottom: 1px solid var(--grid-line); opacity: .55; } /* ---------- строка заголовков колонок ---------- */ .skin-sheet .col-heads { position: absolute; top: 64px; left: var(--gutter); right: 0; height: var(--hdr); z-index: 40; display: flex; align-items: stretch; background: var(--panel-2, var(--panel)); border-bottom: 1px solid var(--line); font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); overflow: hidden; user-select: none; } .skin-sheet .col-heads b { flex: 0 0 var(--cell); display: flex; align-items: center; justify-content: center; font-weight: 500; border-right: 1px solid var(--grid-line); opacity: .55; } /* сдвигаем весь контент под гуттер и шапку колонок */ @media (min-width: 1001px) { .skin-sheet body { padding-left: var(--gutter); } .skin-sheet main { padding-top: var(--hdr); } /* .topbar — sticky внутри body с padding-left, сдвиг не нужен */ } @media (max-width: 1000px) { .skin-sheet .row-gutter, .skin-sheet .col-heads { display: none; } .skin-sheet { --gutter: 0px; } } /* ---------- прямые углы: таблица не знает скруглений ---------- */ .skin-sheet .btn, .skin-sheet .contour, .skin-sheet .plan, .skin-sheet .faq-item, .skin-sheet .step, .skin-sheet .preview, .skin-sheet .sheet, .skin-sheet .vs, .skin-sheet .field input, .skin-sheet .field textarea, .skin-sheet .field select, .skin-sheet .lead-card, .skin-sheet .contacts-box, .skin-sheet .case-stat, .skin-sheet .metric-item, .skin-sheet .chip, .skin-sheet .tag, .skin-sheet .switch-tabs, .skin-sheet .switch-tab { border-radius: 0; } /* ---------- заголовок раздела = адрес ячейки ---------- */ .skin-sheet .sec-idx { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 7px; background: var(--accent); color: #fff; border-radius: 0; font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; } .skin-sheet .sec-head h2 { position: relative; display: inline-block; padding: 4px 12px 6px; outline: 2px solid var(--accent); outline-offset: 0; background: var(--panel); } .skin-sheet .sec-head h2::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--accent); border: 1px solid var(--panel); } .skin-sheet .sec-head .lead { margin-top: 18px; } /* ---------- «строка формул» над разделом ---------- */ .skin-sheet .fx { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); font: 500 12px/1.35 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); overflow-x: auto; white-space: nowrap; } .skin-sheet .fx s { flex: none; text-decoration: none; font-style: italic; color: var(--accent); border-right: 1px solid var(--line); padding-right: 10px; } /* ---------- карточки как диапазоны ячеек ---------- */ .skin-sheet .contour, .skin-sheet .plan, .skin-sheet .step, .skin-sheet .metric-item, .skin-sheet .case-stat { background: var(--panel); border: 1px solid var(--line); box-shadow: none; } .skin-sheet .contour:hover, .skin-sheet .plan:hover { box-shadow: inset 0 0 0 2px var(--accent); transform: none; } .skin-sheet .contour-idx, .skin-sheet .chip { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ---------- нижние вкладки-листы вместо меню ---------- */ .skin-sheet .sheet-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: stretch; gap: 2px; padding: 0 10px; height: 40px; background: var(--panel-2, var(--panel)); border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .skin-sheet .sheet-nav::-webkit-scrollbar { display: none; } .skin-sheet .sheet-nav a { flex: none; display: inline-flex; align-items: center; padding: 0 14px; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: 0; min-height: 40px; } .skin-sheet .sheet-nav a:hover { color: var(--fg); background: var(--panel); } .skin-sheet .sheet-nav a.on { color: var(--fg); background: var(--panel); border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent); } .skin-sheet .sheet-nav .fx-cta { margin-left: auto; color: #fff; background: var(--accent); border-color: var(--accent); } .skin-sheet .sheet-nav .fx-cta:hover { color: #fff; background: var(--accent); filter: brightness(1.06); } .skin-sheet body { padding-bottom: 40px; } .skin-sheet .action-bar { display: none; } .skin-sheet .cookiebar { bottom: 48px; } /* ---------- герой ---------- */ .skin-sheet .hero { padding-top: 34px; } .skin-sheet .hero h1 { letter-spacing: -.02em; } /* ---------- полоса фактов как строка итогов ---------- */ .skin-sheet .trust-strip { border-top: 1px solid var(--line); border-bottom: 2px double var(--line); background: var(--panel); } .skin-sheet .trust-cell + .trust-cell { border-left: 1px solid var(--grid-line); } /* ---------- уважение к пользователю ---------- */ @media (prefers-reduced-motion: reduce) { .skin-sheet body::before { transition: none; } } /* служебные полосы тают вместе с сеткой */ .skin-sheet .row-gutter { opacity: calc(.22 + .78 * var(--grid-a)); } /* шапка колонок перекрывает контент, поэтому уходит полностью, а не в призрак */ .skin-sheet .col-heads { opacity: 1; pointer-events: none; } .skin-sheet .col-heads[data-off] { visibility: hidden; }