/* Tehpoisk 2026. Тема: по умолчанию берётся из настроек браузера (prefers-color-scheme), выбор пользователя переопределяет её атрибутом data-theme на и хранится в localStorage. Все цвета - переменные; жёстко заданы только те, что лежат поверх тёмной картинки (герой, плитки разделов) и одинаковы в обеих темах. */ /* ---------- ТЁМНАЯ (и она же по умолчанию) ---------- */ :root, :root[data-theme="dark"]{ color-scheme:dark; --bg:#070b14; --bg2:#0b1220; --panel:#111a2c; --panel2:#16213a; --line:#1f2c45; --line2:#2a3a5a; --tx:#dbe4f3; --tx2:#93a3bd; --tx3:#6b7c99; --h:#ffffff; --acc:#22d3ee; --acc-hi:#67e8f9; --acc-vis:#7dd3fc; --acc-b:#3b82f6; --acc2:#8b5cf6; --acc3:#f0b429; --err:#f87171; --btn-tx:#04121a; --head-bg:rgba(10,17,32,.88); --nav-bg:rgba(7,11,20,.55); --foot-bg:linear-gradient(180deg,rgba(11,18,32,.6),rgba(7,11,20,1)); --brand-hi:#e8f6ff; --shadow:0 12px 34px rgba(0,0,0,.34); --shadow-strong:0 16px 40px rgba(0,0,0,.55); --shadow-drop:0 22px 50px rgba(0,0,0,.6); --glow1:rgba(34,211,238,.16); --glow2:rgba(139,92,246,.15); --glow3:rgba(34,211,238,.07); --cat-op:.6; --cat-op-h:.82; --rad:14px; --wrap:1240px; /* поверх тёмной картинки - одинаково в обеих темах */ --on-dark:#ffffff; --on-dark-2:#b9c6da; --on-dark-3:#8d9cb4; } /* ---------- СВЕТЛАЯ ---------- */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ color-scheme:light; --bg:#f1f4fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef2f8; --line:#dee5f0; --line2:#c7d2e3; --tx:#1b2534; --tx2:#4d5c74; --tx3:#758298; --h:#0d1522; --acc:#0b7c93; --acc-hi:#095f72; --acc-vis:#6d4bbd; --acc-b:#2563eb; --acc2:#6d3fd4; --acc3:#96650a; --err:#c62828; --btn-tx:#ffffff; --head-bg:rgba(255,255,255,.9); --nav-bg:rgba(245,248,253,.8); --foot-bg:linear-gradient(180deg,#edf1f8,#e6ebf4); --brand-hi:#0d1522; --shadow:0 10px 26px rgba(20,35,60,.10); --shadow-strong:0 16px 36px rgba(20,35,60,.16); --shadow-drop:0 20px 44px rgba(20,35,60,.20); --glow1:rgba(34,211,238,.13); --glow2:rgba(139,92,246,.10); --glow3:rgba(34,211,238,.06); --cat-op:.92; --cat-op-h:1; } } :root[data-theme="light"]{ color-scheme:light; --bg:#f1f4fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef2f8; --line:#dee5f0; --line2:#c7d2e3; --tx:#1b2534; --tx2:#4d5c74; --tx3:#758298; --h:#0d1522; --acc:#0b7c93; --acc-hi:#095f72; --acc-vis:#6d4bbd; --acc-b:#2563eb; --acc2:#6d3fd4; --acc3:#96650a; --err:#c62828; --btn-tx:#ffffff; --head-bg:rgba(255,255,255,.9); --nav-bg:rgba(245,248,253,.8); --foot-bg:linear-gradient(180deg,#edf1f8,#e6ebf4); --brand-hi:#0d1522; --shadow:0 10px 26px rgba(20,35,60,.10); --shadow-strong:0 16px 36px rgba(20,35,60,.16); --shadow-drop:0 20px 44px rgba(20,35,60,.20); --glow1:rgba(34,211,238,.13); --glow2:rgba(139,92,246,.10); --glow3:rgba(34,211,238,.06); --cat-op:.92; --cat-op-h:1; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;padding:0; background:var(--bg); color:var(--tx); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; overflow-x:hidden; } body:before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(900px 500px at 12% -8%, var(--glow1), transparent 60%), radial-gradient(800px 460px at 88% 4%, var(--glow2), transparent 62%), radial-gradient(700px 700px at 50% 110%, var(--glow3), transparent 65%); } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;position:relative;z-index:1} a{color:var(--acc);text-decoration:none;transition:color .15s} a:hover{color:var(--acc-hi);text-decoration:underline} a:visited{color:var(--acc-vis)} img{max-width:100%;height:auto} /* Распорки старой вёрстки: прозрачный gif, растянутый атрибутами (width=660 height=2). Из-за height:auto он раздувается в квадрат. */ img[src*="blank.gif"]{display:none} /* ============ HEADER ============ */ .site-head{ position:sticky;top:0;z-index:50; background:var(--head-bg); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); } .head-inner{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto} .brand:hover{text-decoration:none} .brand img{width:46px;height:46px;border-radius:12px;display:block;box-shadow:0 0 0 1px var(--line2),0 6px 20px rgba(34,211,238,.22)} .brand-tx{display:flex;flex-direction:column;line-height:1.1} .brand-name{ font-size:23px;font-weight:800;letter-spacing:.16em; background:linear-gradient(92deg,var(--brand-hi) 10%,var(--acc) 55%,var(--acc2) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--acc); } .brand-sub{font-size:10.5px;letter-spacing:.22em;color:var(--tx3);text-transform:uppercase;margin-top:3px} .head-tools{margin-left:auto;display:flex;align-items:center;gap:12px} .srch{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:4px 5px 4px 16px;transition:border-color .15s,box-shadow .15s} .srch:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(34,211,238,.14)} .srch input.searchbox{ border:0;background:transparent;color:var(--tx);font:inherit;font-size:14px; width:190px;outline:none;padding:5px 0; } .srch input.searchbox::placeholder{color:var(--tx3)} .btn-go{ border:0;cursor:pointer;border-radius:999px;padding:8px 17px; font:inherit;font-size:13.5px;font-weight:700;color:var(--btn-tx); background:linear-gradient(135deg,var(--acc),var(--acc-b)); transition:filter .15s,transform .12s; } .btn-go:hover{filter:brightness(1.12)} .btn-go:active{transform:translateY(1px)} /* Форму поиска рисует сам движок (includes/search.inc) старой разметкой - приводим её к виду остальной шапки, не трогая сам HTML. */ .head-tools form[name=search] center{display:flex;align-items:center;gap:9px} .head-tools form[name=search] .dialogsmall{ font-size:11px;letter-spacing:.14em;color:var(--tx3);text-transform:uppercase;white-space:nowrap; } .head-tools form[name=search] input.searchbox{min-width:170px;border-radius:999px;padding:9px 16px} .head-tools form[name=search] input.logonbutton{ cursor:pointer;border:0;border-radius:999px;padding:9px 18px; font:inherit;font-size:13.5px;font-weight:700;color:var(--btn-tx); background:linear-gradient(135deg,var(--acc),var(--acc-b)); } .head-btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; background:var(--panel);border:1px solid var(--line2);color:var(--tx2); border-radius:999px;padding:9px 17px;font:inherit;font-size:13.5px;font-weight:600; transition:border-color .15s,color .15s; } .head-btn:hover{border-color:var(--acc);color:var(--tx)} /* ---- переключатель темы ---- */ .theme-btn{ display:inline-flex;align-items:center;justify-content:center;cursor:pointer; width:40px;height:40px;padding:0;flex:0 0 auto; background:var(--panel);border:1px solid var(--line2);border-radius:50%; color:var(--tx2);transition:border-color .15s,color .15s,transform .15s; } .theme-btn:hover{border-color:var(--acc);color:var(--acc)} .theme-btn:active{transform:scale(.94)} .theme-btn svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Показываем значок той темы, в которую переключимся. Тёмная сейчас -> солнце, светлая сейчас -> луна. */ .theme-btn .i-moon{display:none} .theme-btn .i-sun{display:block} @media (prefers-color-scheme: light){ :root:not([data-theme]) .theme-btn .i-sun{display:none} :root:not([data-theme]) .theme-btn .i-moon{display:block} } /* На время самого переключения гасим все переходы. Иначе Chromium оставляет старый цвет там, где на элементе висит transition:color, а сам цвет задан переменной (ссылки, пункты меню): переменная меняется, а перерисовки нет. Класс живёт один кадр - плавность наведения от этого не страдает. */ .tp-notrans *, .tp-notrans *::before, .tp-notrans *::after{transition:none!important} :root[data-theme="light"] .theme-btn .i-sun{display:none} :root[data-theme="light"] .theme-btn .i-moon{display:block} :root[data-theme="dark"] .theme-btn .i-sun{display:block} :root[data-theme="dark"] .theme-btn .i-moon{display:none} /* login drop */ .logon-wrap{position:relative} .logon-drop{ display:none;position:absolute;right:0;top:calc(100% + 12px);width:270px; background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad); padding:18px;box-shadow:var(--shadow-drop); } .logon-wrap.open .logon-drop{display:block} .logon-drop .logontext{display:block;font-size:12px;color:var(--tx3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em} .logon-drop input.logonbox{ width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:9px; color:var(--tx);font:inherit;font-size:14px;padding:9px 12px;margin-bottom:13px;outline:none; } .logon-drop input.logonbox:focus{border-color:var(--acc)} .logon-drop input.logonbutton{ width:100%;border:0;cursor:pointer;border-radius:9px;padding:10px; font:inherit;font-size:14px;font-weight:700;color:var(--btn-tx); background:linear-gradient(135deg,var(--acc),var(--acc2)); } .logon-links{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px} .logon-links a{font-size:13px} /* nav */ .mainnav{border-top:1px solid var(--line);background:var(--nav-bg)} .mainnav ul{list-style:none;margin:0;padding:9px 0;display:flex;flex-wrap:wrap;gap:6px} .mainnav li{margin:0;padding:0} .mainnav a{ display:block;padding:7px 14px;border-radius:999px; font-size:13.5px;font-weight:600;color:var(--tx2); border:1px solid transparent;transition:all .15s;white-space:nowrap; } .mainnav a:hover{color:var(--btn-tx);background:linear-gradient(135deg,var(--acc),var(--acc-b));text-decoration:none;border-color:transparent} .burger{display:none} /* ============ LAYOUT ============ */ .layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;padding-top:30px;padding-bottom:50px;align-items:start} .col-main{min-width:0} /* ============ HERO ============ */ /* Герой намеренно тёмный в обеих темах: это фотобаннер, и на светлой странице он читается как акцентная карточка. Текст поверх него - фиксированными цветами, иначе в светлой теме он пропадёт. */ .hero{ position:relative;border-radius:22px;overflow:hidden;margin-bottom:34px; border:1px solid var(--line2); background:#0b1220; box-shadow:var(--shadow-strong); } .hero img.hero-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42; } .hero:after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(7,11,20,.96) 8%,rgba(7,11,20,.72) 46%,rgba(11,18,32,.42) 100%); } .hero-in{position:relative;z-index:2;padding:56px 46px} .hero-badge{ display:inline-flex;align-items:center;gap:9px; font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#22d3ee;background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.32);border-radius:999px;padding:6px 15px;margin-bottom:20px; } .hero-badge b{width:6px;height:6px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee} .hero-title{ font-size:44px;line-height:1.12;font-weight:800;margin:0 0 16px;letter-spacing:-.5px; color:var(--on-dark);max-width:17em; } .hero-title span{ background:linear-gradient(95deg,#22d3ee,#8b5cf6); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#22d3ee; } .hero-lead{font-size:17px;color:var(--on-dark-2);max-width:44em;margin:0 0 26px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px} .cta{ display:inline-block;padding:12px 26px;border-radius:999px;font-size:14.5px;font-weight:700; background:linear-gradient(135deg,#22d3ee,#8b5cf6);color:#04121a; } .cta:hover{filter:brightness(1.12);text-decoration:none;color:#04121a} .cta.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--on-dark)} .cta.ghost:hover{border-color:#22d3ee;color:#22d3ee;filter:none} .hero-stats{ position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:38px; padding:20px 46px;border-top:1px solid rgba(255,255,255,.07); background:rgba(7,11,20,.5); } .hero-stats div{display:flex;flex-direction:column} .hero-stats b{font-size:23px;font-weight:800;color:var(--on-dark);line-height:1.2} .hero-stats span{font-size:11.5px;color:var(--on-dark-3);text-transform:uppercase;letter-spacing:.12em;margin-top:2px} /* ============ SECTION HEADS ============ */ .sect-head{display:flex;align-items:baseline;gap:14px;margin:0 0 20px} .sect-head h2{font-size:24px;font-weight:800;margin:0;color:var(--h);letter-spacing:-.2px} .sect-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)} .sect-head .more{font-size:13.5px;font-weight:600;white-space:nowrap} /* ============ CATEGORY CARDS ============ */ /* Тоже фотоплитки: затемняющая подложка и белая подпись в обеих темах. */ .cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:38px} .cat{ position:relative;display:block;border-radius:var(--rad);overflow:hidden; border:1px solid var(--line);background:var(--panel); min-height:158px;transition:transform .2s,border-color .2s,box-shadow .2s; } .cat:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--shadow-strong);text-decoration:none} .cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--cat-op);transition:opacity .25s,transform .35s} .cat:hover img{opacity:var(--cat-op-h);transform:scale(1.05)} .cat:before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(0deg,rgba(7,11,20,.95) 4%,rgba(7,11,20,.55) 48%,rgba(7,11,20,.12) 100%); } .cat-in{position:relative;z-index:2;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:158px} .cat-name{font-size:16px;font-weight:700;color:var(--on-dark);line-height:1.25} .cat-note{font-size:12.5px;color:var(--on-dark-2);margin-top:4px} .cat:hover .cat-name{color:#22d3ee} /* ============ CONTENT ============ */ .crumbs{font-size:13px;color:var(--tx3);margin-bottom:16px} .crumbs a{color:var(--tx2);font-size:13px} .crumbs a:hover{color:var(--acc)} .panel{ background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%); border:1px solid var(--line);border-radius:var(--rad); padding:28px 30px;box-shadow:var(--shadow); } .block{min-width:0} .block:after{content:"";display:table;clear:both} .block h1,.block h2,.block h3,.block h4{color:var(--h);line-height:1.25;margin:1.4em 0 .5em;font-weight:800} .block h1{font-size:31px;margin-top:0;letter-spacing:-.4px} .block h2{font-size:24px} .block h3{font-size:19px} .block h4{font-size:17px} .block p{margin:0 0 1.05em} .block ul,.block ol{padding-left:1.4em;margin:0 0 1.05em} .block li{margin-bottom:.4em} .block hr{border:0;border-top:1px solid var(--line);margin:26px 0} .block em,.block blockquote{ display:block;background:rgba(34,211,238,.07); border-left:3px solid var(--acc);border-radius:0 10px 10px 0; padding:13px 18px;margin:0 0 18px;color:var(--tx); } .block em{font-style:normal;font-weight:700} .block blockquote{font-style:italic;color:var(--tx2)} /* legacy content classes */ .article{text-align:left;padding:0} .articletitle{font-size:19px;font-weight:700;color:var(--h);line-height:1.3} a.articletitle,.articletitle a{color:var(--h)} a.articletitle:hover,.articletitle a:hover{color:var(--acc)} .highlight{font-weight:700;color:var(--h);padding:0} .podpis{font-size:12px;color:var(--tx3);text-align:left;padding:4px 0 0} .dialogsmall{font-size:13px;color:var(--tx2)} .redstring{color:var(--acc3)} .reddiv{color:var(--acc3)} .error{color:var(--err);font-weight:700} .big{font-size:19px} .italicsmall{font-size:12.5px;font-style:italic;color:var(--tx3)} .italicbold{font-style:italic;font-weight:700} .noindent{text-indent:0} .bukva{font-size:22px;font-weight:800;color:var(--acc)} .description{color:var(--tx2)} .points{color:var(--acc3);font-weight:700} .votes{color:var(--tx2);font-size:13px} .ref,.liink{color:var(--acc)} .adv{color:var(--tx2);font-size:14px} /* legacy nav strips inside content */ .navtitle,table.navtitle{ background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(139,92,246,.08)); color:var(--h);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase; padding:11px 15px;border-radius:10px 10px 0 0;border-bottom:1px solid var(--line2); } td.navtitle a,.navtitle a{color:var(--h)} .navigation,.navbutton{color:var(--tx2)} .navbutton{ display:inline-block;padding:5px 12px;margin:2px;border-radius:8px; background:var(--panel2);border:1px solid var(--line2);font-size:13px; } .navbutton:hover{border-color:var(--acc)} /* legacy images */ .block img.border,.block img.kadr,.block img.selectkadr,.block .tableimage img{ border:1px solid var(--line2);border-radius:10px;background:var(--bg2); } .block img.left,.block img.leftnoborder,.block .imageleft{float:left;margin:4px 18px 12px 0;border-radius:10px} .block img.right,.block img.rightnoborder,.block .imageright{float:right;margin:4px 0 12px 18px;border-radius:10px} .block img.left,.block img.right{border:1px solid var(--line2)} .block img.leftnoborder,.block img.rightnoborder{border:0} .advborder{border:1px solid var(--line2);border-radius:10px;margin:14px} .fotoimage{border-radius:10px} /* legacy tables */ .block table{ max-width:100%!important;width:auto!important; border-collapse:collapse;background:transparent; } .block table td,.block table th{padding:6px;vertical-align:top} .block table[border="1"] td,.block table[border="1"] th, .block td.line,.block .bordertop,.block .borderleft{border:1px solid var(--line)} .block th.art,.block td.art{border:1px solid var(--line);padding:8px} .block td.normaltd,.block td.articletd,.block td.art{color:var(--tx)} .block table.special,.block td.special{background:var(--panel2);border-radius:10px} .block .tcb,.block .tca,.block .tch{padding:7px} .block .tch{color:var(--h);font-weight:700} /* legacy forum blocks */ .forum,.forum2,.forumcolor,.forumtopics{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--tx)} .discusstitle{font-weight:700;color:var(--h)} .usermessageedit,div.usermessageedit{ min-height:120px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px; padding:12px;color:var(--tx);text-align:left; } .dialog,.dialogcaption{color:var(--tx)} .dialogcaption{font-weight:700;color:var(--h)} input.dialog,input.searchbox,select,textarea{ background:var(--bg2);border:1px solid var(--line2);border-radius:9px; color:var(--tx);font:inherit;font-size:14px;padding:8px 12px;outline:none;max-width:100%; } input.dialog:focus,select:focus,textarea:focus{border-color:var(--acc)} .dialogbutton,input.dialogbutton,input[type=submit],input[type=button]{ cursor:pointer;border:0;border-radius:9px;padding:9px 20px; font:inherit;font-size:14px;font-weight:700;color:var(--btn-tx); background:linear-gradient(135deg,var(--acc),var(--acc-b)); } .dialogbutton:hover,input[type=submit]:hover,input[type=button]:hover{filter:brightness(1.12)} /* legacy social/bookmark toolbar - должен остаться видимым */ .toolbar{margin:18px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .toolbar a{font-size:13px;margin-right:10px} ul.rekl{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:12px} ul.rekl li{margin:0} ul.rekl li div{font-size:12px;color:var(--tx2);text-align:center;margin-top:5px} .topbanner,.rek{margin:14px 0} .menupunkt{font-weight:600} .menubox,.menuelem{color:var(--tx2)} /* ============ SOURCE + SAPE PARTNER BLOCK ============ */ .src-note{font-size:12.5px;color:var(--tx3);margin-top:20px} .src-note a{font-size:12.5px} .partners{ margin-top:26px;padding:18px 22px; background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc2); border-radius:10px;color:var(--tx2);font-size:14px;line-height:1.8; } .partners-t{ display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--tx3);margin-bottom:8px;font-weight:700; } .partners a{color:var(--acc);font-weight:600} /* ============ SIDEBAR ============ */ .col-side{min-width:0} .side-card{ background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%); border:1px solid var(--line);border-radius:var(--rad); padding:20px 22px;margin-bottom:20px; } .side-t, .side-card > a:first-child{ display:block; font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--acc);margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--line); } .side-t a{color:var(--acc)} .side-card > a:first-child:hover{text-decoration:none;color:var(--acc-hi)} /* Движок отдаёт список новостей то как