/* ============================================================ VECTRON · DESIGN SYSTEM · vectron.css «Инженерный спец-лист / приборная панель» — light engineering paper, Archivo + IBM Plex Mono, restrained industrial-orange signal. Single source of truth for tokens + base + shared components. Pages keep their Google Fonts in . ============================================================ */ :root{ /* surfaces — warm engineering paper */ --bg:#EBE9E2; --bg-2:#F3F1EB; --bg-3:#E1DED4; --card:#F5F3ED; /* hairlines */ --line:#CAC6BB; --line-2:#B4AFA2; /* ink */ --ink:#16140F; --ink-2:#47443C; --ink-3:#7C796E; --ink-4:#ABA79C; /* the ONE signal colour — deep industrial orange, used sparingly */ --orange:#C8401A; --orange-2:#A8350F; --orange-glow:rgba(200,64,26,.08); --ok:#3E7D49; --warn:#8A5E00; /* dark instrument / LCD blocks (deliberate dark focal areas on the light page) */ --lcd-bg:#101418; --lcd-panel:#14181C; --lcd-line:#27313a; --lcd-ink:#C7E8CF; --lcd-ink-2:#6FA57C; --lcd-dim:#3C5A44; --lcd-amber:#E0A24B; --screw:#9A968B; /* type */ --f-display:'Archivo', system-ui, sans-serif; --f-mono:'IBM Plex Mono', ui-monospace, monospace; --wrap:1340px; } /* ============================================================ LEGACY ALIASES — map the OLD (dark-theme) token names used by the existing inner pages onto the NEW light semantics, so a page can adopt the system by just: link vectron.css + delete its own :root + swap fonts. (The homepage does NOT link vectron.css, so it is unaffected.) ============================================================ */ :root{ --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3); --text-4:var(--ink-4); --paper:var(--ink); /* old "bright fg" → ink (headings stay dark; logo chip → dark) */ --amber:var(--orange); --amber-2:var(--orange-2); --amber-glow:var(--orange-glow); --bg-4:var(--bg-3); --line-soft:var(--line); --cyan:#2C6E66; --cyan-2:#3A8C82; --gold:#9A6B00; --rose:#B14A3A; --violet:#6C5C86; /* font aliases: old display=Anton, body=Manrope, serif=Fraunces, mono=JetBrains → Archivo / IBM Plex Mono */ --f-body:var(--f-display); --f-serif:var(--f-display); } /* ===== reset / base ===== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); /* subtle vertical hairline texture — matches the homepage's engineering-surface feel */ background-image:repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px); font-family:var(--f-display); font-size:14.5px; line-height:1.5; letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;border:0;cursor:pointer;background:transparent;color:inherit} ::selection{background:var(--orange);color:var(--bg-2)} :focus-visible{outline:2px solid var(--orange);outline-offset:2px} /* skip link (a11y) */ .vc-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--orange);color:var(--bg-2); padding:10px 16px;font-family:var(--f-mono);font-size:12px;text-decoration:none} .vc-skip:focus{left:8px;top:8px} /* ===== type primitives ===== */ .mono{font-family:var(--f-mono)} .num{font-variant-numeric:tabular-nums} .lbl{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--ink-3);font-weight:500} .h1{font-family:var(--f-display);font-weight:900;letter-spacing:-.025em;line-height:.95;color:var(--ink); font-size:clamp(40px,7vw,92px)} .h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:.98;color:var(--ink); font-size:clamp(30px,4.6vw,60px)} .h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.015em;line-height:1;color:var(--ink);font-size:24px} .accent{color:var(--orange)} /* safety: long RU words in heavy Archivo must never overflow narrow screens */ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.sec-h,.ct,.model{overflow-wrap:break-word} .lead{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:62ch} .lead b{color:var(--ink);font-weight:700} /* ===== layout helpers ===== */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .rule{height:1px;background:var(--line);border:0} .stack-sep > * + *{border-top:1px solid var(--line)} /* ===== utility (document) bar ===== */ .util{background:var(--bg-2);border-bottom:1px solid var(--line); font-family:var(--f-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em} .util-inner{max-width:var(--wrap);margin:0 auto;padding:8px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px} .util-left,.util-right{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .util a{transition:color .14s}.util a:hover{color:var(--ink)} .util .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(62,125,73,.7); display:inline-block;margin-right:7px;animation:vc-blink 2.6s steps(1) infinite} @keyframes vc-blink{0%,72%{opacity:1}73%,100%{opacity:.32}} .util .sep{color:var(--ink-4)} /* ===== header / nav ===== */ .hdr{position:sticky;top:0;z-index:100;background:rgba(235,233,226,.9); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .hdr-inner{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:34px} .logo{display:flex;align-items:center;gap:13px} .logo-mark{width:42px;height:42px;border-radius:5px;background:var(--lcd-panel);color:#EDEAE1; display:grid;place-items:center;position:relative;flex:0 0 auto; font-family:var(--f-display);font-weight:900;font-size:24px;letter-spacing:-.04em; box-shadow:inset 0 0 0 1px #2a3036,0 1px 2px rgba(0,0,0,.25)} .logo-mark::after{content:"";position:absolute;right:6px;top:7px;width:6px;height:6px;background:var(--orange);border-radius:1px} .logo-text{display:flex;flex-direction:column;line-height:1} .logo-name{font-family:var(--f-display);font-weight:900;font-size:23px;letter-spacing:-.02em;color:var(--ink)} .logo-sub{font-family:var(--f-mono);font-size:9px;color:var(--ink-3);letter-spacing:.26em;text-transform:uppercase;margin-top:3px} .nav{display:flex;gap:2px;flex:1;justify-content:center} .nav a{padding:9px 13px;font-size:13px;font-weight:600;color:var(--ink-2);position:relative;transition:color .14s; letter-spacing:.01em} .nav a:hover,.nav a.active{color:var(--ink)} .nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--orange)} .hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto} .icon-btn{width:40px;height:40px;border:1px solid var(--line-2);border-radius:3px;display:grid;place-items:center; color:var(--ink-2);transition:.14s} .icon-btn:hover{border-color:var(--ink-3);color:var(--ink);background:var(--bg-2)} /* ===== buttons ===== */ .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:3px; font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:.14s} .btn-primary{background:var(--orange);color:var(--bg-2)} .btn-primary:hover{background:var(--orange-2)} .btn-ghost{border:1px solid var(--line-2);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bg-2)} .btn .arw{font-family:var(--f-mono)} /* ===== mobile burger nav (public pages) ===== */ .vc-burger{display:none;background:none;border:1px solid var(--line-2);color:var(--ink); width:42px;height:42px;font-size:20px;line-height:1;cursor:pointer;border-radius:3px} @media(max-width:1080px){ .vc-burger{display:inline-flex;align-items:center;justify-content:center} .hdr{position:sticky} .hdr .nav{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start; gap:2px;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:14px 22px;max-height:0;overflow:hidden;opacity:0;pointer-events:none; transition:max-height .25s ease,opacity .2s ease;z-index:60} .hdr .nav.vc-open{max-height:80vh;overflow:auto;opacity:1;pointer-events:auto} } /* ===== panel / instrument bezel ===== */ .panel{background:linear-gradient(180deg,var(--bg-2),var(--bg-3));border:1px solid var(--line-2);border-radius:6px; position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.06)} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 8px;border-bottom:1px solid var(--line)} .panel-head .pt{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink-2)} .panel-head .px{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:var(--ink-4)} .screw{position:absolute;width:9px;height:9px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0%,var(--screw) 55%,#6e6a60 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.5)} .screw::after{content:"";position:absolute;inset:2px;border-top:1px solid rgba(0,0,0,.32);transform:rotate(34deg)} .screw.tl{top:7px;left:7px}.screw.tr{top:7px;right:7px}.screw.bl{bottom:7px;left:7px}.screw.br{bottom:7px;right:7px} /* ===== LCD / dark screen block ===== */ .lcd{background:var(--lcd-bg);border:1px solid var(--lcd-line);border-radius:6px;color:var(--lcd-ink);position:relative;overflow:hidden} .lcd .lcd-lbl{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--lcd-ink-2)} .lcd-amber{color:var(--lcd-amber)} /* ===== segmented bar gauge ===== */ .segbar{display:flex;gap:2px} .segbar .seg{flex:1;height:9px;background:var(--line);border-radius:1px} .segbar .seg.on{background:var(--ink-2)} .segbar .seg.warn{background:var(--lcd-amber)} .segbar .seg.hot{background:var(--orange)} /* ===== section head (datasheet numbering) ===== */ .sec{max-width:var(--wrap);margin:0 auto;padding:96px 28px} .sec-num{font-family:var(--f-mono);font-size:12px;color:var(--orange);letter-spacing:.18em;text-transform:uppercase; display:flex;align-items:center;gap:16px;margin-bottom:22px} .sec-num::before{content:"";width:44px;height:1px;background:var(--orange)} .sec-h{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:.98;color:var(--ink); font-size:clamp(30px,4.6vw,60px);max-width:18ch} .sec-meta{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap; margin-top:22px;padding-top:18px;border-top:1px solid var(--line); font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase} .sec-meta b{color:var(--ink);font-weight:600} /* ===== card grid (index/applications) ===== */ .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .card{background:var(--bg);padding:30px 28px;display:flex;flex-direction:column;gap:14px;min-height:200px;transition:background .14s} .card:hover{background:var(--card)} .card .ix{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)} .card .ct{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.01em;line-height:1.02;color:var(--ink)} .card .cm{font-family:var(--f-mono);font-size:11px;color:var(--orange);letter-spacing:.04em;margin-top:auto; display:flex;justify-content:space-between;align-items:center} .card .cm .arw{color:var(--ink-3)} /* ===== spec / register table ===== */ .spec{width:100%;border-collapse:collapse;font-size:13px} .spec th{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-2);background:var(--bg-2);position:sticky;top:0} .spec td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .spec td.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink-2)} .spec tr:hover td{background:var(--card)} .spec .grp td{background:var(--bg-3);font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);padding:8px 14px} .spec .model{font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink)} .spec .flag{color:var(--orange)} /* ===== tag / badge ===== */ .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);padding:5px 10px;border-radius:3px} .tag.on{color:var(--orange);border-color:var(--orange)} .tag .d{width:6px;height:6px;border-radius:50%;background:var(--ok)} /* ===== footer ===== */ .ftr{border-top:1px solid var(--line);background:var(--bg-2);margin-top:40px} .ftr-inner{max-width:var(--wrap);margin:0 auto;padding:54px 28px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .ftr-col h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;font-weight:600} .ftr-col a{display:block;padding:5px 0;color:var(--ink-2);font-size:13.5px;transition:color .14s} .ftr-col a:hover{color:var(--ink)} .ftr-bottom{max-width:var(--wrap);margin:0 auto;padding:22px 28px;margin-top:40px;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .ftr-bottom a{transition:color .14s}.ftr-bottom a:hover{color:var(--ink)} /* ===== unified brand footer (matches the homepage's narrow brand bar) ===== */ .vftr-wrap{max-width:var(--wrap);margin:0 auto;padding:56px 28px 26px} .vftr{background:var(--lcd-bg);border:1px solid var(--lcd-line);border-radius:6px;padding:14px 20px; display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;font-family:var(--f-mono);color:var(--lcd-ink)} .vftr-brand{font-family:var(--f-display);font-weight:900;font-size:19px;letter-spacing:-.02em;color:#EDEAE1;line-height:1} .vftr-brand .o{color:var(--orange)} .vftr-seg{display:flex;flex-direction:column;gap:3px} .vftr-seg .k{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lcd-dim)} .vftr-seg .v{font-size:11px;letter-spacing:.04em;color:var(--lcd-ink);font-weight:500;font-variant-numeric:tabular-nums} .vftr-seg a.v{transition:color .14s}.vftr-seg a.v:hover{color:var(--lcd-amber)} .vftr-sp{flex:1;min-width:16px} .vftr-online{display:flex;align-items:center;gap:8px;border:1px solid #2a4a32;border-radius:3px;padding:6px 11px} .vftr-online .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok);animation:vc-blink 1.8s steps(1) infinite} .vftr-online .t{font-size:9px;letter-spacing:.14em;color:var(--lcd-ink-2)} .vcopy{margin-top:13px;display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap; font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .vcopy a{transition:color .14s}.vcopy a:hover{color:var(--orange)} /* ===== responsive ===== */ @media(max-width:900px){ .cards{grid-template-columns:1fr} .ftr-inner{grid-template-columns:1fr 1fr} .sec{padding:64px 22px} } /* mobile overflow guards — !important so they win over pages' own inline CSS */ @media(max-width:680px){ .util-inner{flex-wrap:wrap;gap:6px 16px} .hdr-inner{gap:14px !important} .hdr-actions{gap:8px !important} .hdr-actions .btn{display:none !important} /* phone header = logo + burger; CTAs live in the menu/content */ .crumb-r,.crumb-meta{display:none !important} /* secondary breadcrumb metadata */ .logo-sub{display:none} /* free header space on phones */ .crumb-strip{display:none !important} /* breadcrumb strip — least useful on phones */ .hdr-actions .search-btn,.hdr-actions .icon-btn{display:none !important} /* drop header search; keep CTA + burger */ /* fix 2-col section-head grid blowout (heading cell exceeds track) */ .section-head,.sec-head{grid-template-columns:1fr !important;gap:14px !important} .section-head > *,.sec-head > *{min-width:0} /* catch-all: tame grid/flex blowout + keep media within the viewport on phones */ *{min-width:0} img,svg,video,table{max-width:100%} /* catalog compare drawer is a desktop power-feature — hide the fixed widget on phones */ .cmp-drawer{display:none !important} /* wide data tables (dashboards) → horizontally scrollable on phones instead of clipping */ table{display:block !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%} /* app-shell topbars (admin/cabinet/order/configurator): wrap instead of cramming/overlapping */ .topbar-inner,.top{flex-wrap:wrap !important;height:auto !important;gap:8px 14px !important;padding-top:10px !important;padding-bottom:10px !important} .crumb{flex-wrap:wrap} /* topbar action clusters wrap their own buttons so labels never clip */ .tb-right,.top-actions{flex-wrap:wrap !important;gap:8px !important} .tb-btn{padding:9px 12px !important;font-size:11px !important} .ribbon,.ribbon-l,.ribbon-r{flex-wrap:wrap !important;height:auto !important;row-gap:5px} .ribbon-sep{display:none !important} .top-search{order:5;width:100%;max-width:none} /* pagination wraps instead of clipping */ .page-nav,.pagination,.pager{flex-wrap:wrap} } @media(max-width:560px){ .ftr-inner{grid-template-columns:1fr} .wrap,.util-inner,.hdr-inner{padding-left:18px;padding-right:18px} } /* respect reduced motion */ @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important}}