/* =========================================================================== 3300.md — общая обвязка страниц: шапка, подвал, переключатель языка. До этого файла шапка и подвал были у каждой страницы свои: главная, раздел разработки, калькулятор и страница входа расходились в отступах, размерах и поведении. Теперь исходник один — правишь здесь, меняется везде. Файл рассчитан на любую страницу сайта: цвета берутся из её токенов, но у каждого var() есть запасное значение, поэтому обвязка не рассыпется и там, где токен не объявлен. =========================================================================== */ /* Две языковые версии лежат в разметке рядом: без запроса к серверу и без мигания подменённого текста. Показывается та, что выбрана на . */ html:not([data-lang="en"]) .en{ display:none !important; } html[data-lang="en"] .ru{ display:none !important; } /* ---------- шапка ---------- */ .topbar{ position:sticky; top:0; z-index:10; /* Полоса тянется во всю ширину окна, содержимое внутри ограничено той же мерой, что и страница. */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(to bottom, rgba(5,7,14,.85), rgba(5,7,14,.4)); border-bottom:1px solid rgba(255,255,255,.05); } .topbar-inner{ max-width:1060px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:12px; } @media (max-width:560px){ .topbar-inner{ padding:12px 18px; } } .path{ font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:13px; color:var(--muted,#8b9bc4); letter-spacing:.04em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .path b{ color:var(--ink,#eef3ff); font-weight:600; } .path .tilde{ color:var(--accent,#7fb2ff); } .path a{ color:inherit; text-decoration:none; } .path a:hover{ color:var(--accent,#7fb2ff); } /* Подпись у пути — коротко и в одну строку: значок часов и «33 сек». Полная фраза на телефоне упиралась в переключатель языка, смысл остался в title. */ .path .comment{ display:inline-flex; align-items:center; gap:5px; margin-left:9px; vertical-align:middle; } .path .comment .read-ico{ width:12px; height:12px; flex:none; opacity:.85; } /* position:relative — под счётом монет раскрывается окно обмена. */ .topbar-right{ display:flex; align-items:center; gap:10px; position:relative; } /* Счёт нашивок: ретро-HUD в цвете станции. */ .pan-btn{ display:flex; align-items:center; gap:6px; cursor:pointer; -webkit-appearance:none; appearance:none; font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:12px; line-height:1; letter-spacing:.06em; color:var(--accent,#7fb2ff); border:1px solid rgba(127,178,255,.28); border-radius:4px; padding:6px 9px; background:rgba(127,178,255,.07); transition:color .2s, border-color .2s, background .2s; } .pan-btn:hover{ color:var(--ink,#eef3ff); border-color:var(--accent,#7fb2ff); background:rgba(127,178,255,.16); } .pan-btn .pan-ico{ font-size:11px; opacity:.9; } .pan-btn .pan-sum{ font-weight:700; } .pan-btn:focus-visible{ outline:2px solid var(--accent-2,#b48cff); outline-offset:2px; } /* Счёт монет. display:flex сильнее UA-правила для [hidden], поэтому скрытие задаётся явно — иначе счётчик виден до первой монеты. */ .coins{ display:flex; align-items:center; gap:7px; cursor:pointer; -webkit-appearance:none; appearance:none; font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:12px; line-height:1; letter-spacing:.08em; color:#ffd97a; border:1px solid rgba(255,199,64,.30); border-radius:4px; padding:6px 9px; background:rgba(255,199,64,.07); text-shadow:0 0 9px rgba(255,199,64,.45); box-shadow:0 0 0 1px rgba(5,7,14,.6), 0 6px 18px -12px rgba(255,199,64,.8); } .coins[hidden]{ display:none; } .coins .coin-ico{ width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #fff4c8 0%, #ffd24a 46%, #d1900f 100%); box-shadow:inset 0 0 0 1px rgba(120,72,8,.55), 0 0 8px rgba(255,199,64,.55); } .coins .coin-sum{ color:#ffc740; font-weight:700; } .coins.bump{ animation:coinBump .34s ease-out; } .coins.bump .coin-ico{ animation:coinSpin .42s ease-in-out; } @keyframes coinBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.14); } 100%{ transform:scale(1); } } /* Значок проворачивается вокруг вертикальной оси — та же анимация, что у монеты на канвасе. */ @keyframes coinSpin{ 0%{ transform:scaleX(1); } 50%{ transform:scaleX(.14); } 100%{ transform:scaleX(1); } } /* На узком экране в шапке тесно: путь с подписью, счёт и языки. */ @media (max-width:560px){ .coins{ padding:5px 8px; gap:6px; letter-spacing:.04em; } } /* Совсем узкие корпуса (320px): счёт ужимаем, но не прячем — кроме суммы в нём больше ничего нет. */ @media (max-width:340px){ .coins{ padding:5px 6px; gap:5px; letter-spacing:0; } } /* Обмен монет — окно под счётом, а не системный confirm. */ .xchg{ position:absolute; top:calc(100% + 9px); right:0; z-index:12; width:224px; padding:13px 14px 14px; font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:12px; line-height:1.45; color:#ffd97a; text-align:left; background:rgba(8,11,20,.97); border:1px solid rgba(255,199,64,.34); border-radius:4px; box-shadow:0 20px 44px -22px rgba(0,0,0,.9), 0 0 22px -8px rgba(255,199,64,.35); animation:xchgPop .18s ease-out; } .xchg[hidden]{ display:none; } @keyframes xchgPop{ from{ opacity:0; transform:translateY(-5px) scale(.97); } } .xchg-q{ margin-bottom:11px; color:var(--ink,#eef3ff); } .xchg-q b{ color:#ffc740; font-weight:700; } .xchg-row{ display:flex; gap:8px; } .xchg-row[hidden]{ display:none; } .xchg-row button{ flex:1; font:inherit; font-weight:700; letter-spacing:.08em; cursor:pointer; padding:7px 10px; border-radius:3px; transition:background .18s, border-color .18s, color .18s; } .xchg-ok{ color:#0a0d16; background:#ffc740; border:1px solid #ffc740; } .xchg-ok:hover{ background:#ffd97a; border-color:#ffd97a; } .xchg-no{ color:var(--dim,#7481ab); background:transparent; border:1px solid var(--card-brd,rgba(255,255,255,.10)); } .xchg-no:hover{ color:var(--muted,#8b9bc4); border-color:rgba(255,255,255,.22); } .xchg-row button:focus-visible{ outline:2px solid var(--accent-2,#b48cff); outline-offset:2px; } /* Бегущая линия обмена: ширину ведёт анимация, а не таймер в JS — кадры считает браузер, и полоса не спотыкается на занятом потоке. */ .xchg-bar{ height:4px; border-radius:2px; overflow:hidden; background:rgba(255,199,64,.14); border:1px solid rgba(255,199,64,.22); } .xchg-bar[hidden]{ display:none; } .xchg-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #d1900f, #ffd24a 60%, #fff4c8); box-shadow:0 0 10px rgba(255,199,64,.6); animation:xchgFill var(--xchg-ms, 1100ms) cubic-bezier(.35,.1,.4,1) forwards; } @keyframes xchgFill{ from{ width:0; } to{ width:100%; } } .xchg-done{ color:#ffc740; font-weight:700; letter-spacing:.06em; } .xchg-done[hidden]{ display:none; } /* Переключатель языка: без рамки-пилюли, активный обведён акцентом. */ .lang-switch{ display:flex; gap:4px; font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:12px; } .lang-switch button{ background:none; border:1px solid transparent; border-radius:5px; padding:3px 9px; font:inherit; font-weight:700; letter-spacing:.08em; color:var(--dim,#7481ab); cursor:pointer; transition:color .2s, border-color .2s, background .2s; } .lang-switch button:hover{ color:var(--muted,#8b9bc4); } .lang-switch button.on{ color:var(--accent,#7fb2ff); border-color:rgba(127,178,255,.35); background:rgba(127,178,255,.08); } .lang-switch button:focus-visible{ outline:2px solid var(--accent-2,#b48cff); outline-offset:2px; } /* ---------- подвал ---------- */ footer.foot{ max-width:1060px; margin:0 auto; padding:60px 28px 40px; text-align:center; font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace); font-size:12.5px; color:var(--dim,#7481ab); letter-spacing:.05em; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 0; border-top:0; } footer.foot .sep{ margin:0 10px; opacity:.4; } footer.foot a{ color:var(--muted,#8b9bc4); text-decoration:none; } footer.foot a:hover{ color:var(--accent,#7fb2ff); } footer.foot a.foot-link{ font-size:14px; color:var(--accent,#7fb2ff); } footer.foot a.foot-link:hover{ color:var(--ink,#eef3ff); } /* Разделителя перед телефоном нет, а column-gap подвала нулевой — отступ задаётся здесь и сбрасывается в мобильной колонке. */ footer.foot a.tel{ margin-left:14px; } /* Ссылка без href, пока скрипт не собрал адрес: курсор задаём сами. */ footer.foot a.mail{ cursor:pointer; } footer.foot a.mail .at{ opacity:.75; } footer.foot .foot-note{ flex-basis:100%; margin:10px auto 0; max-width:62ch; font-size:12px; line-height:1.55; color:var(--dim,#7481ab); } @media (max-width:860px){ footer.foot{ flex-direction:column; gap:8px; padding:48px 20px 36px; } footer.foot .sep{ display:none; } footer.foot a.tel{ margin-left:0; } } @media (prefers-reduced-motion: reduce){ .coins.bump, .coins.bump .coin-ico, .xchg, .xchg-bar i{ animation:none !important; } }