@font-face {
font-family: 'Shantell Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/shantell-marker.woff2) format('woff2');
}
@font-face {
font-family: 'Scada';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/scada-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Scada';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/scada-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Scada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/scada-700-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Scada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/scada-700-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Вес листа металла. Идея: пачка горячекатаных листов на складе. Листы лежат на деревянных прокладках,
длина и ширина в общем масштабе, на верхнем листе маркером написаны размер и вес — как пишут на металлобазе.
Shantell Sans (неформальное начертание) — только надпись маркером; шрифт урезан до нужных знаков
(fonts/shantell-marker.woff2, параметр text= у Google Fonts), fetch_fonts.py его не перезаписывает — не запускать для этого сайта без правки fonts.css.
Scada — весь остальной текст. */
:root{
--paper:#fff; --ink:#20262c; --muted:#5b646d; --line:#dfe3e6; --tint:#f2f4f5;
--face:#5f6b76; --face-2:#4f5a64; --edge:#3b444d; --side:#2b3239; --rim:#8c98a3;
--wood:#b07a42; --wood-2:#8a5a2b; --marker:#f7f7f2;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--hand:"Shantell Sans","Scada",sans-serif; --text:"Scada",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18.5px/1.55 var(--text);font-variant-numeric:tabular-nums lining-nums}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--wood);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 21px var(--text);text-decoration:none}
.brand-mark{width:30px;height:22px}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nav a{text-decoration:none;font-size:17px;padding:4px 0;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current]{border-color:var(--wood)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:15px;color:var(--muted);padding-top:12px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font:700 clamp(34px,4.6vw,54px)/1.06 var(--text);letter-spacing:-.01em;margin:.4em 0 .35em;text-wrap:balance}
h2{font:700 clamp(23px,2.5vw,30px)/1.15 var(--text);margin:1.8em 0 .5em}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(18.5px,1.7vw,21px);line-height:1.5}
.src,.note{font-size:15.5px;color:var(--muted)}
.strong{font-weight:700}
/* Рисунок пачки */
.plate{display:block;max-width:100%;height:auto;overflow:visible}
.plate .face{fill:var(--face)}
.plate .edge{fill:var(--edge);stroke:var(--rim);stroke-width:.8;stroke-dasharray:none}
.plate .side{fill:var(--side)}
.plate .beam{fill:var(--wood)}
.plate .beam-s{fill:var(--wood-2)}
.plate .beam-top{fill:#c9955c}
.plate .ink{font-family:var(--hand);font-weight:600;fill:var(--marker)}
.hero-plate{margin:6px 0 18px;max-width:760px}
.hero-plate figcaption,.yard-pic figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}
.hero-plate.empty .plate{width:330px}
/* Калькулятор */
.calc{margin:22px 0 10px}
.fields{display:flex;flex-wrap:wrap;gap:14px 16px}
.field label,.sizes legend{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.field input{font:700 22px var(--text);min-height:54px;padding:8px 12px;border:2px solid var(--ink);border-radius:3px;background:#fff;color:var(--ink);width:150px}
.field input[aria-invalid=true]{border-color:#a3261b}
.field input:focus-visible{outline:3px solid var(--wood);outline-offset:0}
.sizes{border:0;padding:0;margin:16px 0 0;min-width:0}
.sizes legend{font-weight:400;color:var(--muted)}
.sizes-in{display:flex;flex-wrap:wrap;gap:6px}
.size{min-height:44px;padding:6px 14px;border:2px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);font:700 17px var(--text);cursor:pointer}
.size:hover{border-color:var(--ink)}
.size[aria-pressed=true]{background:var(--edge);border-color:var(--edge);color:#fff}
.yard{display:flex;flex-wrap:wrap;gap:24px clamp(32px,5vw,72px);align-items:flex-end;margin:26px 0 12px;padding:28px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.yard-pic{margin:0;min-width:0;flex:0 1 auto;max-width:100%}
.res{flex:1 0 280px;max-width:440px}
#c-pic{min-height:120px;display:flex;align-items:flex-end}
.res{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.res div{margin:0}
.res dt{font-size:15px;color:var(--muted)}
.res dd{margin:0;font:700 24px/1.2 var(--text)}
.res .res-main{grid-column:1 / -1}
.res .res-main dt{font-size:17px;color:var(--ink);font-weight:700}
.res .res-main dd.err{font-size:22px;line-height:1.3;color:#a3261b}
.res .res-main dd{font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.01em;margin-top:4px}
/* Листы одной толщины в ряд */
.lineup{list-style:none;padding:0;margin:20px 0 6px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 36px}
.lineup li{margin:0;max-width:100%}
.lineup a{display:block;text-decoration:none}
.lineup a:hover .face{fill:#6c7884}
.cap{display:flex;gap:10px;align-items:baseline;margin-top:10px;font-size:16.5px}
.cap-sz{color:var(--muted)}
.cap-kg{font-weight:700;font-size:20px;text-decoration:underline;text-decoration-color:var(--wood);text-decoration-thickness:2px;text-underline-offset:3px}
.chips{list-style:none;padding:0;margin:8px 0 1.4em;display:flex;flex-wrap:wrap;gap:6px}
.chips li{margin:0}
.chips a,.chips span{display:inline-block;min-width:44px;text-align:center;padding:6px 12px;border:2px solid var(--line);border-radius:3px;text-decoration:none;font-weight:700}
.chips a:hover{border-color:var(--ink)}
.chips span[aria-current]{background:var(--edge);border-color:var(--edge);color:#fff}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;font-size:17px}
table.narrow{max-width:560px}
thead th{font-size:14.5px;font-weight:700;color:var(--muted);text-align:left;padding:8px 16px 8px 0;border-bottom:2px solid var(--ink);vertical-align:bottom;white-space:nowrap}
thead th a{color:var(--muted)}
td,tbody th{padding:7px 16px 7px 0;border-bottom:1px solid var(--line);text-align:left}
tbody th{font-weight:700;white-space:nowrap}
.num,th.num{text-align:right;white-space:nowrap}
td:last-child,th:last-child{padding-right:0}
tbody tr:hover th,tbody tr:hover td{background:var(--tint)}
table.big tbody th{position:sticky;left:0;background:#fff;z-index:1}
table.big tbody tr:hover th{background:var(--tint)}
.foot{margin-top:56px;padding:24px 0 40px;border-top:2px solid var(--ink);font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot nav a{color:var(--muted)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--edge);color:#fff;padding:12px 14px 12px 18px;font-size:14.5px;border-radius:3px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:700 15px/1 var(--text);min-height:40px;padding:0 16px;border:0;border-radius:3px;background:#fff;color:var(--ink);cursor:pointer}
@media(max-width:860px){.res{order:-1;flex-basis:100%;max-width:none}}
@media(max-width:640px){
body{font-size:17.5px}
.head{display:block}
.nav{margin-top:6px;gap:4px 16px}
.nav a{font-size:16px}
.nav-x{display:none}
.fields{gap:12px}
.field{flex:1 1 40%}
.field input{width:100%}
.sizes-in{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 6px}
.size{flex:none}
.res dd{font-size:21px}
table{font-size:15.5px}
td,tbody th,thead th{padding-right:10px}
.lineup{gap:22px}
}