/* ═══════════════════════════════════════════════════════════════
ONE.Ru · ART THEME — Кандинский / Пикассо
Подключать ПОСЛЕ style.css:
Ничего не переименовывает: работает по существующим классам и id,
поэтому app.js, hero-feed.js и инлайн-скрипты остаются рабочими.
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+Arabic:wght@400;600;800&family=Noto+Sans+SC:wght@400;500;900&display=swap');
/* ───────── палитра ───────── */
:root{
--verm:#E8402C; /* киноварь */
--chrome:#FFC300; /* хром-жёлтый */
--cobalt:#1B3FCC; /* кобальт */
--cyan:#23B5E8;
--green:#12A67F;
--violet:#7B3FE4;
--rose:#F06FA5;
--orange:#FF6A18;
--paper:#F5F0E8;
--ink:#14120F;
--card:#FDFAF3;
--bd:2px;
/* мост к существующей разметке — эти имена уже используются в HTML */
--bg:var(--paper);
--text:var(--ink);
--white:var(--ink);
--muted:rgba(20,18,15,.58);
--border:rgba(20,18,15,.15);
--accent:var(--cobalt);
--gold:var(--chrome);
--display:'Unbounded',ui-sans-serif,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
--shadow:rgba(20,18,15,.13);
}
html[data-theme="dark"]{
--paper:#131110; --ink:#FFF9EE; --card:#1C1917;
--cobalt:#7793FF; --cyan:#55CCF4;
--muted:rgba(255,249,238,.74); --border:rgba(255,249,238,.25); --shadow:rgba(0,0,0,.55);
}
/* ───────── база ───────── */
html,body{background:var(--paper)!important;color:var(--ink)!important}
body{
font-family:'Manrope','Noto Sans Arabic','Noto Sans SC',ui-sans-serif,system-ui,sans-serif!important;
font-size:clamp(15px,.97vw,16.5px);line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.hero-h1,.section-title,.modal-title,.footer-brand,.partner-metal-brand{
font-family:var(--display)!important;font-weight:800;letter-spacing:-.022em;line-height:1.06;
}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{letter-spacing:0;font-weight:900}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--verm);outline-offset:2px}
::selection{background:var(--chrome);color:var(--ink)}
/* акцент в заголовках — не градиент, а киноварь с жёлтой подложкой */
.accent{color:var(--verm)!important;-webkit-text-fill-color:var(--verm)!important;background:none!important;position:relative}
/* ───────── верхняя лента ───────── */
.announce-bar{
background:var(--ink)!important;color:var(--paper)!important;border:0!important;
display:flex!important;gap:0;justify-content:center;flex-wrap:wrap;padding:8px 12px!important;
font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
}
.announce-bar span{display:inline-flex;align-items:center;gap:10px;padding-inline:14px}
.announce-bar span::after{content:"";width:9px;height:9px;background:var(--chrome);border-radius:50%}
.announce-bar span:nth-child(2)::after{background:var(--verm);border-radius:0}
.announce-bar span:nth-child(3)::after{background:var(--cyan);clip-path:polygon(50% 0,100% 100%,0 100%)}
.announce-bar a{color:inherit;text-decoration:none;opacity:.92}
.announce-bar a:hover{opacity:1;text-decoration:underline}
/* ───────── навигация ───────── */
.nav{
position:sticky;top:0;z-index:60;
background:var(--paper)!important;backdrop-filter:none!important;
border-bottom:var(--bd) solid var(--ink)!important;box-shadow:none!important;
display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);
padding:0 clamp(16px,4vw,54px)!important;height:68px;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.art-logo-mark{width:40px;height:40px;flex:0 0 40px}
.nav-logo-mark{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.025em;color:var(--ink)}
.nav-logo-mark span{color:var(--verm)}
.nav-logo small{
display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.nav-links{display:flex;gap:clamp(9px,1.3vw,20px);margin-inline-start:clamp(10px,2.2vw,34px)}
.nav-link{
font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;
padding:8px 2px;border-bottom:2px solid transparent;background:none!important;
}
.nav-link:hover,.nav-link.active{border-bottom-color:var(--verm);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang-switcher{display:flex;border:var(--bd) solid var(--ink);border-radius:999px;overflow:hidden;background:none}
.lang-btn{
padding:6px 10px;border:0;border-inline-end:2px solid var(--ink);background:transparent;
color:var(--ink);font-family:var(--mono);font-size:.65rem;cursor:pointer;line-height:1;
}
.lang-btn:last-child{border-inline-end:0}
.lang-btn:hover{background:var(--chrome);color:var(--ink)}
.lang-btn.active{background:var(--ink);color:var(--paper)}
.theme-toggle,.burger{
width:38px;height:38px;flex:0 0 38px;border:var(--bd) solid var(--ink)!important;border-radius:50%!important;
background:transparent!important;color:var(--ink)!important;display:grid;place-items:center;cursor:pointer;
}
.theme-toggle:hover,.burger:hover{background:var(--chrome)!important;color:var(--ink)!important}
.theme-icon{width:17px;height:17px}
html[data-theme="light"] .theme-icon-moon{display:none}
html[data-theme="dark"] .theme-icon-sun{display:none}
.nav-phone{font-family:var(--mono);font-size:.75rem;font-weight:700;white-space:nowrap;text-decoration:none;color:var(--ink)}
.nav-phone:hover{color:var(--verm)}
.nav-cta{
border:var(--bd) solid var(--verm)!important;background:var(--verm)!important;color:#fff!important;
border-radius:999px!important;padding:11px 22px!important;font-size:.83rem;font-weight:600;cursor:pointer;
transition:transform .18s,box-shadow .18s;
}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
@media(max-width:1200px){.nav-links{display:none}}
@media(max-width:1200px){.nav-links.active,.nav-links.open,.nav-links.is-open{
display:flex!important;position:fixed;inset-block:68px 0;inset-inline-end:0;width:min(340px,86vw);
flex-direction:column;gap:2px;background:var(--paper);border-inline-start:var(--bd) solid var(--ink);
padding:24px;z-index:70;overflow-y:auto}
.nav-links.active .nav-link,.nav-links.open .nav-link,.nav-links.is-open .nav-link{
font-family:var(--display);font-weight:700;font-size:1.28rem;padding:10px 0;border:0}}
@media(max-width:940px){.lang-switcher{display:none}}
@media(max-width:640px){.nav-phone{display:none}}
/* ───────── соцполоса ───────── */
.social-top-bar{
background:var(--paper)!important;border-bottom:var(--bd) solid var(--ink)!important;
padding:14px clamp(16px,4vw,54px)!important;display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px);
}
.social-top-bar-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-block-title{
display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.social-block-title svg{width:15px;height:15px;fill:var(--verm)}
.social-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.social-top-link{
width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
border:var(--bd) solid var(--ink);background:var(--card);transition:transform .18s,background .18s;
}
.social-top-link svg{width:17px;height:17px;fill:var(--ink)}
.social-top-link:hover{transform:translateY(-3px) rotate(-6deg)}
.social-top-link.s-inst:hover{background:var(--rose)}
.social-top-link.s-yt:hover,.social-top-link.s-rt:hover{background:var(--verm)}
.social-top-link.s-tt:hover,.social-top-link.s-tg:hover{background:var(--cyan)}
.social-top-link.s-pin:hover{background:var(--orange)}
.social-top-link.s-gh:hover{background:var(--violet)}
.social-top-link.s-wa:hover,.social-top-link.s-mail:hover{background:var(--green)}
.social-top-link.s-phone:hover,.social-top-link.s-user:hover,.social-top-link.s-action:hover{background:var(--chrome)}
.social-top-link:hover svg{fill:var(--paper)}
.social-top-link.s-inst:hover svg,.social-top-link.s-pin:hover svg,
.social-top-link.s-phone:hover svg,.social-top-link.s-user:hover svg,
.social-top-link.s-action:hover svg,.social-top-link.s-tt:hover svg{fill:var(--ink)}
.social-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* ───────── секции и заголовки ───────── */
.section,.video-section,.map-section,.informer-section{
background:transparent!important;padding:clamp(38px,5vw,76px) clamp(16px,4vw,54px)!important;
}
.section-label{
font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 12px;
}
.section-label::before{content:"";width:12px;height:12px;flex:0 0 12px;background:var(--verm);border-radius:50%}
.video-section .section-label::before{background:var(--chrome);border-radius:0}
.map-section .section-label::before{background:var(--green);transform:rotate(45deg)}
.informer-section .section-label::before{background:var(--violet);border-radius:50% 50% 50% 0}
html[lang="zh"] .section-label,html[lang="ar"] .section-label{
font-family:inherit;letter-spacing:.05em;text-transform:none;font-size:.8rem}
.section-title{font-size:clamp(1.5rem,3.4vw,2.5rem);margin:0 0 22px}
/* ───────── карточки-порталы (партнёры, проекты) ───────── */
.partner-metal-grid,.services-metal-grid{
display:grid;gap:clamp(12px,1.8vw,22px);
grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
}
.services-metal-grid{grid-template-columns:repeat(auto-fit,minmax(246px,1fr))}
.partner-metal-card{
position:relative;display:flex;flex-direction:column;gap:6px;overflow:hidden;
padding:20px!important;text-decoration:none;
border:var(--bd) solid var(--ink)!important;background:var(--card)!important;
box-shadow:none!important;backdrop-filter:none!important;
border-radius:26px 26px 26px 7px!important;
transition:transform .18s,box-shadow .18s;
}
.partner-metal-card:nth-child(2n){border-radius:26px 26px 7px 26px!important}
.partner-metal-card:nth-child(3n){border-radius:7px 26px 26px 26px!important}
.partner-metal-card:nth-child(5n){border-radius:26px 7px 26px 26px!important}
.partner-metal-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)!important}
.partner-metal-card::before,.partner-metal-card::after{content:none!important}
.partner-metal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.partner-metal-kicker{
font-family:var(--mono);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
html[lang="zh"] .partner-metal-kicker,html[lang="ar"] .partner-metal-kicker{
font-family:inherit;letter-spacing:.03em;text-transform:none;font-size:.74rem}
.partner-metal-pill{
font-family:var(--mono);font-size:.65rem;font-weight:700;color:var(--ink);
border:1.8px solid var(--ink);border-radius:999px;padding:3px 9px;background:transparent;
}
.partner-metal-brand{font-size:1.08rem;color:var(--ink)}
.partner-metal-copy{margin:0;font-size:.85rem;font-weight:300;color:var(--muted);flex:1}
.partner-metal-footer{
display:flex;align-items:center;gap:8px;margin-top:8px;
font-size:.78rem;font-weight:700;color:var(--verm);
}
.partner-metal-card:hover .partner-metal-footer span:first-child{border-bottom:2px solid var(--verm)}
.partner-metal-arrow{transition:transform .18s}
.partner-metal-card:hover .partner-metal-arrow{transform:translateX(4px)}
/* существо-аватар, который вставляет art-entities.js */
.art-face{width:56px;height:56px;flex:0 0 56px;margin-bottom:4px;transition:transform .28s cubic-bezier(.2,.9,.3,1)}
.partner-metal-card:hover .art-face,.hero-cards-link:hover .art-face{transform:rotate(-6deg) scale(1.07)}
.art-face--xs{width:38px;height:38px;flex:0 0 38px;margin:0}
/* ───────── герой ───────── */
.hero{position:relative;overflow:hidden;background:transparent!important;padding:clamp(20px,3vw,44px) clamp(16px,4vw,54px)!important}
.hero-bg,.hero-grid,.hero-orbit{display:none!important}
.art-hero-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.85}
.hero-inner,.hero-layout{position:relative;z-index:2}
.hero-layout{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:clamp(14px,1.8vw,24px);align-items:start}
@media(max-width:1280px){.hero-layout{grid-template-columns:280px minmax(0,1fr)}
.hero-layout>.hero-rank-rail{grid-column:1/-1}}
@media(max-width:900px){.hero-layout{grid-template-columns:1fr}}
.hero-side-rail{
border:var(--bd) solid var(--ink)!important;background:var(--card)!important;
border-radius:28px!important;padding:12px!important;display:flex;flex-direction:column;gap:10px;
box-shadow:none!important;backdrop-filter:none!important;
}
.hero-news-title-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 12px;border-radius:999px;background:var(--cobalt);color:#FDFAF3;
}
.hero-rank-rail .hero-news-title-row{background:var(--chrome);color:var(--ink)}
.hero-news-badge{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.02em}
.hero-news-archive{
font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
border:1.8px solid currentColor;border-radius:999px;padding:3px 10px;color:inherit;
}
.hero-news-archive:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero-rank-rail .hero-news-archive:hover{background:var(--ink);color:var(--paper)}
.hero-news-list{display:flex;flex-direction:column;gap:2px}
.hero-news-card{
display:flex;gap:10px;align-items:flex-start;text-decoration:none;
padding:10px 4px!important;border:0!important;border-bottom:1.8px solid var(--border)!important;
border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.hero-news-card:last-child{border-bottom:0!important}
.hero-news-card>div:not(.hero-news-meta),.hero-news-card>span:not(.art-face){min-width:0}
.hero-news-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:3px}
.hero-news-source,.hero-news-date{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--muted)}
.hero-news-source{font-weight:700;color:var(--cobalt)}
.hero-news-card h3{
font-family:'Manrope',sans-serif!important;font-weight:700;font-size:.87rem;line-height:1.3;
margin:0 0 3px;color:var(--ink)!important;letter-spacing:0;
}
.hero-news-card p{
margin:0;font-size:.77rem;font-weight:300;color:var(--muted);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-news-card:hover h3{color:var(--verm)!important}
.hero-tech-source{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-tech-link{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verm)}
.hero-rank-cta{
display:block;text-decoration:none;margin-top:6px;padding:12px 14px;
border:var(--bd) solid var(--ink);border-radius:20px 20px 20px 6px;background:var(--paper);
transition:transform .18s,box-shadow .18s;
}
.hero-rank-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.hero-rank-cta-kicker{
display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.hero-rank-cta strong{display:block;font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.25}
.hero-rank-cta span:last-child{display:block;font-size:.75rem;color:var(--muted);font-weight:300;margin-top:3px}
.hero-rank-cta-az{background:var(--cobalt)!important;border-color:var(--ink)!important;border-radius:6px 20px 20px 20px!important}
.hero-rank-cta-az .hero-rank-cta-kicker{color:rgba(253,250,243,.7)!important}
.hero-rank-cta-az strong{color:#FDFAF3!important}
.hero-rank-cta-az span:last-child{color:rgba(253,250,243,.82)!important}
/* центральная колонка */
.hero-main{gap:clamp(18px,2.4vw,32px)!important}
.hero-badge{
display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
background:none!important;border:0!important;padding:0!important;margin-bottom:12px;
}
.hero-badge::before{content:"";width:12px;height:12px;background:var(--verm);border-radius:50%}
html[lang="zh"] .hero-badge,html[lang="ar"] .hero-badge{font-family:inherit;letter-spacing:.05em;text-transform:none;font-size:.8rem}
.hero-h1{font-size:clamp(2.2rem,5.6vw,4.4rem)!important;letter-spacing:-.042em!important;margin:0}
.hero-desc{color:var(--muted)!important;font-weight:300;max-width:46ch;margin:16px 0 0;font-size:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;cursor:pointer;
border:var(--bd) solid var(--ink)!important;border-radius:999px!important;
padding:14px 26px!important;font-size:.88rem;font-weight:600;white-space:nowrap;
background:transparent!important;color:var(--ink)!important;box-shadow:none!important;
transition:transform .18s,box-shadow .18s,background .18s,color .18s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)!important}
.btn-primary{background:var(--verm)!important;border-color:var(--verm)!important;color:#fff!important}
.btn-outline{background:transparent!important}
.hero-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(10px,1.4vw,16px)}
.hero-cards-link{
position:relative;display:flex;flex-direction:column;gap:5px;text-decoration:none;overflow:hidden;
padding:16px!important;border:var(--bd) solid var(--ink)!important;background:var(--card)!important;
border-radius:22px 22px 22px 6px!important;box-shadow:none!important;
transition:transform .18s,box-shadow .18s;
}
.hero-cards-link:nth-child(2n){border-radius:22px 22px 6px 22px!important}
.hero-cards-link:nth-child(3n){border-radius:6px 22px 22px 22px!important}
.hero-cards-link:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)!important}
.hero-cards-kicker{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero-cards-link strong{font-family:var(--display);font-weight:700;font-size:.94rem;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.hero-cards-meta{font-size:.76rem;color:var(--muted);font-weight:300;line-height:1.4}
.hero-bnews-widget{border-radius:26px!important;border:var(--bd) solid var(--ink)!important;background:var(--card)!important}
/* ───────── погода (сохранены исходные классы) ───────── */
.hero-weather-mini{
overflow:hidden;border:var(--bd) solid var(--ink)!important;border-radius:24px 24px 24px 8px!important;
background:var(--paper)!important;box-shadow:none!important;
}
.hero-weather-mini-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 12px;background:var(--verm);color:#fff;border-bottom:var(--bd) solid var(--ink);
}
.hero-weather-mini-badge{
display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
font-weight:700;font-size:.8rem;letter-spacing:.01em;color:#fff;text-transform:none;
}
.hero-weather-mini-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--chrome);box-shadow:none}
.hero-weather-mini-link,.hero-weather-mini-refresh{
font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
color:#fff;text-decoration:none;border:1.8px solid currentColor;border-radius:999px;padding:3px 10px;background:transparent;
}
.hero-weather-mini-link:hover{background:var(--ink);border-color:var(--ink)}
.hero-weather-mini-main{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:14px 12px 10px}
.hero-weather-mini-icon-shell{
width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
border:var(--bd) solid var(--ink);background:var(--chrome);box-shadow:none;
}
.hero-weather-mini-icon{font-size:27px;line-height:1}
.hero-weather-mini-temp{font-family:var(--display);font-size:2rem;line-height:.95;letter-spacing:-.04em;color:var(--ink)!important}
.hero-weather-mini-city-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.hero-weather-mini-city{font-size:.8rem;font-weight:700;color:var(--ink)}
.hero-weather-mini-state{
padding:2px 8px;border-radius:999px;background:var(--green);color:#fff;
font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;
}
.hero-weather-mini-desc{margin-top:4px;font-size:.7rem;color:var(--muted)}
.hero-weather-mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.8px solid var(--border)}
.hero-weather-mini-stat{padding:8px 12px;border-inline-end:1.8px solid var(--border);border-bottom:1.8px solid var(--border)}
.hero-weather-mini-stat:nth-child(2n){border-inline-end:0}
.hero-weather-mini-stat:nth-last-child(-n+2){border-bottom:0}
.hero-weather-mini-stat-label{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-weather-mini-stat-value{margin-top:3px;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ink)}
.hero-weather-mini-forecast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px;border-top:1.8px solid var(--border)}
.hero-weather-mini-day{padding:7px 4px;border-radius:14px;border:1.8px solid var(--border);background:transparent;text-align:center}
.hero-weather-mini-dayname{font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-weather-mini-dayicon{margin:4px 0 3px;font-size:16px;line-height:1}
.hero-weather-mini-dayhigh{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--ink)}
.hero-weather-mini-daylow{margin-top:2px;font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.hero-weather-mini-citypicker{padding:0 12px 10px}
.hero-weather-mini-quick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.hero-weather-mini-citybtn{
padding:4px 10px;border:1.8px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);
font-family:var(--mono);font-size:.56rem;letter-spacing:.04em;text-transform:none;cursor:pointer;
transition:background .18s,color .18s;
}
.hero-weather-mini-citybtn:hover{background:var(--chrome)}
.hero-weather-mini-citybtn.is-active{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.hero-weather-mini-search{display:grid;grid-template-columns:1fr auto;gap:7px}
.hero-weather-mini-input{
min-width:0;padding:8px 14px;border-radius:999px;border:1.8px solid var(--ink);
background:var(--card);color:var(--ink);font:inherit;font-size:.78rem;outline:none;
}
.hero-weather-mini-input:focus{border-color:var(--verm)}
.hero-weather-mini-submit{
padding:8px 14px;border:1.8px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);
font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.hero-weather-mini-submit:hover{background:var(--verm);border-color:var(--verm);color:#fff}
.hero-weather-mini-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 12px}
.hero-weather-mini-updated{font-family:var(--mono);font-size:.55rem;color:var(--muted)}
.hero-weather-mini-refresh{color:var(--ink);border-color:var(--ink)}
.hero-weather-mini-refresh:hover{background:var(--chrome)}
@media(max-width:680px){
.hero-weather-mini-main{grid-template-columns:48px 1fr;gap:10px}
.hero-weather-mini-icon-shell{width:48px;height:48px}
.hero-weather-mini-icon{font-size:23px}
.hero-weather-mini-forecast{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-weather-mini-search{grid-template-columns:1fr}
}
/* ───────── видео и карта (контент вставляет hero-feed.js) ───────── */
.video-inner,.map-inner{max-width:1280px;margin:0 auto}
.video-grid{display:grid;gap:clamp(12px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}
.video-grid>*{
border:var(--bd) solid var(--ink)!important;background:var(--card)!important;
border-radius:24px!important;overflow:hidden;box-shadow:none!important;text-decoration:none;color:var(--ink);
transition:transform .18s,box-shadow .18s;
}
.video-grid>*:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)!important}
.video-grid img,.video-grid iframe{display:block;width:100%;border-bottom:var(--bd) solid var(--ink)}
.map-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center}
@media(max-width:900px){.map-inner{grid-template-columns:1fr}}
.map-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.map-tags>*{
border:1.8px solid var(--ink)!important;border-radius:999px!important;padding:7px 15px!important;
background:transparent!important;color:var(--ink)!important;font-size:.8rem;font-weight:600;text-decoration:none;
}
.map-tags>*:hover{background:var(--ink)!important;color:var(--paper)!important}
.map-visual{
border:var(--bd) solid var(--ink)!important;border-radius:clamp(26px,4vw,50px)!important;
overflow:hidden;background:var(--card)!important;box-shadow:none!important;
}
.map-visual svg{display:block;width:100%;height:auto}
/* ───────── информеры ───────── */
.informer-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px;margin-top:18px}
.informer-card{
border:1.8px dashed var(--border)!important;border-radius:22px!important;padding:16px!important;
background:var(--card)!important;box-shadow:none!important;display:flex;flex-direction:column;gap:9px;align-items:center;
}
.informer-frame{border:0;border-radius:14px;max-width:100%}
.informer-square{display:grid;place-items:center;min-height:96px}
.informer-link-row a{
font-size:.75rem;font-weight:700;color:var(--verm);text-decoration:none;border-bottom:2px solid var(--verm);
}
/* ───────── форма заказа ───────── */
.modal-overlay{
position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;
background:rgba(20,18,15,.6)!important;backdrop-filter:blur(4px);
}
.modal-overlay.active,.modal-overlay.open,.modal-overlay.show,.modal-overlay.is-open,.modal-overlay.visible{display:flex!important}
.modal-box{
width:min(680px,100%);max-height:calc(100vh - 32px);overflow-y:auto;
background:var(--paper)!important;border:var(--bd) solid var(--ink)!important;
border-radius:30px!important;box-shadow:0 30px 70px rgba(0,0,0,.4)!important;backdrop-filter:none!important;
}
.modal-header{
display:flex;align-items:center;gap:14px;padding:18px 22px!important;
border-bottom:var(--bd) solid var(--ink)!important;background:var(--card)!important;
position:sticky;top:0;z-index:2;border-radius:28px 28px 0 0;
}
.art-modal-mark{width:50px;height:50px;flex:0 0 50px}
.modal-title{font-size:1.26rem!important;color:var(--ink)!important}
.modal-sub{
margin-top:3px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);
}
html[lang="zh"] .modal-sub,html[lang="ar"] .modal-sub{font-family:inherit;letter-spacing:.02em;text-transform:none;font-size:.78rem}
.modal-close{
margin-inline-start:auto;width:34px;height:34px;flex:0 0 34px;
border:var(--bd) solid var(--ink)!important;border-radius:50%!important;background:transparent!important;
color:var(--ink)!important;display:grid;place-items:center;font-size:.84rem;cursor:pointer;
}
.modal-close:hover{background:var(--verm)!important;border-color:var(--verm)!important;color:#fff!important}
.modal-body{padding:22px!important}
.m-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.m-row{grid-template-columns:1fr}}
.m-group{margin-bottom:16px}
.m-label{
display:block;margin-bottom:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
}
html[lang="zh"] .m-label,html[lang="ar"] .m-label{font-family:inherit;letter-spacing:.02em;text-transform:none;font-size:.78rem}
.m-input{
width:100%;font:inherit;font-size:.96rem;padding:12px 18px!important;
border:var(--bd) solid var(--ink)!important;border-radius:999px!important;
background:var(--card)!important;color:var(--ink)!important;outline:none;
}
textarea.m-input{border-radius:22px!important;min-height:96px;resize:vertical;font-weight:300}
.m-input:focus{border-color:var(--verm)!important}
select.m-input{cursor:pointer}
.m-submit{
width:100%;cursor:pointer;border:var(--bd) solid var(--verm)!important;background:var(--verm)!important;
color:#fff!important;border-radius:999px!important;padding:15px 28px!important;
font-size:.92rem;font-weight:700;transition:transform .18s,box-shadow .18s;
}
.m-submit:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.m-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.m-gdpr{margin-top:14px;font-size:.78rem;font-weight:300;color:var(--muted);line-height:1.5}
.m-gdpr a{color:var(--verm)!important;border-bottom:2px solid var(--verm);text-decoration:none!important}
.m-success{display:none;text-align:center;padding:20px 0 8px}
.m-success.active,.m-success.show,.m-success.visible,.m-success[style*="block"]{display:block}
.m-success h3{font-size:1.35rem;margin:16px 0 8px;color:var(--green)}
.m-success p{color:var(--muted);font-weight:300;margin:0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* ───────── чат Jangera ───────── */
.chat-fab{
position:fixed;inset-inline-end:16px;bottom:16px;z-index:88;
display:flex;align-items:center;gap:11px;
}
.chat-fab-label{
order:1;display:flex;flex-direction:column;gap:2px;text-align:end;
background:var(--card);border:var(--bd) solid var(--ink);border-radius:999px;
padding:9px 18px;box-shadow:0 10px 22px var(--shadow);
}
.chat-fab-label>span{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--ink)}
.chat-fab-label small{font-size:.66rem;color:var(--muted)}
.chat-fab-btn{
order:2;position:relative;width:64px;height:64px;flex:0 0 64px;padding:0;cursor:pointer;
border:var(--bd) solid var(--ink)!important;border-radius:50%!important;overflow:hidden;
background:#100E0C!important;box-shadow:0 12px 26px var(--shadow)!important;
transition:transform .2s;
}
.chat-fab-btn:hover{transform:translateY(-3px) scale(1.04)}
.chat-mascot{display:block;width:100%;height:100%}
.chat-mascot svg{width:100%;height:100%;display:block}
.chat-fab-btn .ic-close{
position:absolute;inset:0;display:none;place-items:center;background:var(--verm);color:#fff;
}
.chat-fab-btn .ic-close svg{width:22px;height:22px}
.chat-fab.active .ic-close,.chat-fab.open .ic-close,
body.chat-open .chat-fab .ic-close{display:grid}
.chat-fab.active .chat-mascot,.chat-fab.open .chat-mascot,
body.chat-open .chat-fab .chat-mascot{opacity:0}
.chat-fab-online{
position:absolute;top:2px;inset-inline-end:2px;width:13px;height:13px;border-radius:50%;
background:var(--green);border:2px solid var(--paper);z-index:3;
animation:artBlip 2s ease-in-out infinite;
}
@keyframes artBlip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(max-width:560px){.chat-fab-label{display:none}}
.chat-panel{
position:fixed;inset-inline-end:16px;bottom:96px;z-index:89;
width:min(392px,calc(100vw - 28px));max-height:min(640px,calc(100vh - 128px));
display:none;flex-direction:column;overflow:hidden;
background:var(--paper)!important;border:var(--bd) solid var(--ink)!important;
border-radius:28px!important;box-shadow:0 24px 56px var(--shadow)!important;backdrop-filter:none!important;
}
.chat-panel.active,.chat-panel.open,.chat-panel.show,.chat-panel.is-open,.chat-panel.visible{display:flex!important}
.chat-head{
display:flex;align-items:center;gap:11px;padding:12px 14px!important;
background:var(--verm)!important;color:#fff!important;border-bottom:var(--bd) solid var(--ink)!important;
}
.chat-head-avatar{
width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;
border:2px solid #fff;background:#100E0C;
}
.chat-head-avatar svg{width:100%;height:100%;display:block}
.chat-head-copy{min-width:0}
.chat-head-title{font-family:var(--display);font-weight:700;font-size:.9rem;color:#fff}
.chat-head-status{display:flex;align-items:center;gap:6px;font-size:.66rem;opacity:.92;margin-top:2px}
.chat-head-status i{width:8px;height:8px;border-radius:50%;background:#7CF0C8;animation:artBlip 2s ease-in-out infinite;display:block}
.chat-head-close{
margin-inline-start:auto;width:32px;height:32px;flex:0 0 32px;cursor:pointer;
border:2px solid currentColor!important;border-radius:50%!important;background:transparent!important;
color:#fff!important;display:grid;place-items:center;font-size:.8rem;
}
.chat-head-close:hover{background:#fff!important;color:var(--verm)!important}
.chat-stream{
flex:1;overflow-y:auto;padding:15px 14px!important;display:flex;flex-direction:column;gap:10px;min-height:150px;
background:transparent!important;
}
/* пузыри — покрываем возможные имена классов из app.js */
.chat-stream>*,.chat-msg,.chat-message,.chat-bubble,.msg{
max-width:93%;border:var(--bd) solid var(--ink);border-radius:19px 19px 19px 5px;
padding:11px 14px;font-size:.87rem;font-weight:300;background:var(--card);line-height:1.5;color:var(--ink);
}
.chat-stream>.user,.chat-stream>.me,.chat-msg.user,.chat-message.user,.msg-user,.chat-bubble.user,
.chat-stream>[class*="user"],.chat-stream>[class*="self"]{
align-self:flex-end;background:var(--chrome);color:var(--ink);
border-radius:19px 19px 5px 19px;font-weight:500;
}
html[dir="rtl"] .chat-stream>*{border-radius:19px 19px 5px 19px}
.chat-stream a{font-weight:700;color:var(--verm);border-bottom:2px solid var(--verm);text-decoration:none}
.chat-quick{display:flex;gap:6px;padding:9px 14px;overflow-x:auto;border-top:var(--bd) solid var(--ink);scrollbar-width:none}
.chat-quick::-webkit-scrollbar{display:none}
.chat-quick button{
border:1.8px solid var(--ink);border-radius:999px;padding:6px 13px;font-size:.72rem;
background:transparent;color:var(--ink);white-space:nowrap;cursor:pointer;
}
.chat-quick button:hover{background:var(--ink);color:var(--paper)}
.chat-input-wrap{
display:flex;gap:8px;align-items:center;padding:10px 14px!important;
border-top:var(--bd) solid var(--ink)!important;background:transparent!important;
}
.chat-inp{
flex:1;min-width:0;font:inherit;font-size:.86rem;padding:11px 16px!important;resize:none;
border:1.8px solid var(--ink)!important;border-radius:999px!important;
background:var(--card)!important;color:var(--ink)!important;outline:none;
}
.chat-inp:focus{border-color:var(--verm)!important}
.chat-send{
width:44px;height:44px;flex:0 0 44px;cursor:pointer;
border:var(--bd) solid var(--ink)!important;border-radius:50%!important;
background:var(--verm)!important;color:#fff!important;display:grid;place-items:center;
}
.chat-send svg{width:17px;height:17px}
.chat-send:hover{transform:scale(1.06)}
.chat-foot{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 14px 12px!important;
font-family:var(--mono);font-size:.62rem;color:var(--muted);background:transparent!important;
}
.chat-foot-link{color:var(--verm)!important;font-weight:700;text-decoration:none;border-bottom:2px solid var(--verm)}
.chat-foot-dot{color:var(--muted)}
/* ───────── куки ───────── */
.cookie-banner{
background:var(--card)!important;border:var(--bd) solid var(--ink)!important;
border-radius:24px!important;color:var(--ink)!important;font-size:.8rem!important;
max-width:340px!important;box-shadow:0 18px 40px var(--shadow)!important;backdrop-filter:none!important;
padding:14px 16px!important;
}
.cookie-banner a{color:var(--verm)!important;border-bottom:2px solid var(--verm)}
#accept-cookies{
border:var(--bd) solid var(--verm)!important;background:var(--verm)!important;color:#fff!important;
border-radius:999px!important;padding:8px 18px!important;font-size:.78rem!important;font-weight:600!important;
}
#accept-cookies:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
/* ───────── подвал ───────── */
.footer{
background:transparent!important;border-top:var(--bd) solid var(--ink)!important;
padding:clamp(32px,4.5vw,58px) clamp(16px,4vw,54px) 22px!important;margin-top:clamp(34px,5vw,70px);
}
.footer-inner{
display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(140px,1fr));
gap:clamp(22px,4vw,48px);max-width:1280px;margin:0 auto;
}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink)}
.footer-brand span{color:var(--verm)}
.footer-col h4,.footer-inner h4{
font-family:var(--mono)!important;font-size:.6rem!important;letter-spacing:.2em!important;
text-transform:uppercase!important;color:var(--muted)!important;margin:0 0 12px!important;font-weight:400!important;
}
.footer-col a,.footer-inner a{
display:block;margin-bottom:9px;font-size:.87rem;font-weight:300;color:var(--ink);
opacity:1!important;text-decoration:none;
}
.footer-col a:hover,.footer-inner a:hover{color:var(--verm)}
.footer-bottom{
max-width:1280px;margin:26px auto 0;padding-top:16px;border-top:1.8px solid var(--border);
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
font-family:var(--mono);font-size:.68rem;color:var(--muted);
}
.footer-bottom a{color:var(--verm);border-bottom:2px solid var(--verm);text-decoration:none}
/* ───────── появление ───────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .62s ease,transform .62s cubic-bezier(.2,.85,.3,1)}
.reveal.visible,.reveal.is-visible,.reveal.active,.reveal.in{opacity:1;transform:none}
/* ───────── анимации арт-фигур ───────── */
.artFloatA{animation:artFloat 9s ease-in-out infinite alternate}
.artFloatB{animation:artFloat 12s ease-in-out infinite alternate-reverse}
.artFloatC{animation:artFloat 15s ease-in-out infinite alternate}
@keyframes artFloat{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.artSpin{transform-box:fill-box;transform-origin:center;animation:artSpin 40s linear infinite}
.artSpinR{transform-box:fill-box;transform-origin:center;animation:artSpin 28s linear infinite reverse}
@keyframes artSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}
.reveal{opacity:1;transform:none}
}
/* ───────── стабильная геометрия hero ─────────
Эти правила намеренно находятся в самом конце файла: они изолируют новый
макет от старых версий style.css, которые могут оставаться в CDN/браузере. */
.hero .hero-inner.hero-layout{
box-sizing:border-box!important;
width:min(1600px,100%)!important;
max-width:1600px!important;
margin-inline:auto!important;
display:grid!important;
grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(250px,300px)!important;
gap:clamp(14px,1.8vw,24px)!important;
align-items:start!important;
}
.hero .hero-layout>*{min-width:0!important;max-width:100%}
.hero .hero-main{
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
width:100%!important;
min-width:0!important;
padding:clamp(18px,2vw,28px)!important;
}
.hero .hero-main-left,.hero .hero-main-right{
box-sizing:border-box!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
}
.hero .hero-side-rail,.hero .hero-weather-mini{box-sizing:border-box!important;width:100%!important;min-width:0!important}
.hero .hero-weather-mini-head,.hero .hero-weather-mini-main,.hero .hero-weather-mini-stats,
.hero .hero-weather-mini-forecast,.hero .hero-weather-mini-citypicker,.hero .hero-weather-mini-foot{box-sizing:border-box!important}
@media(max-width:1280px){
.hero .hero-inner.hero-layout{
grid-template-columns:minmax(250px,300px) minmax(0,1fr)!important;
}
.hero .hero-layout>.hero-rank-rail{grid-column:1/-1!important;width:100%!important}
}
@media(max-width:900px){
.hero .hero-inner.hero-layout{grid-template-columns:minmax(0,1fr)!important}
.hero .hero-layout>.hero-rank-rail{grid-column:auto!important}
.hero .hero-news-rail{order:2}
.hero .hero-main{order:1}
.hero .hero-rank-rail{order:3}
}
/* ───────── стабильная верхняя часть страницы ───────── */
.announce-bar{
position:relative!important;
inset:auto!important;
top:auto!important;
left:auto!important;
right:auto!important;
width:100%!important;
min-height:34px!important;
box-sizing:border-box!important;
z-index:61!important;
}
.nav{
position:sticky!important;
top:0!important;
left:auto!important;
right:auto!important;
width:100%!important;
min-height:68px!important;
height:68px!important;
box-sizing:border-box!important;
transform:none!important;
overflow:visible!important;
}
.nav.hide{transform:none!important}
.nav-logo,.nav-links,.nav-right{min-width:0}
.nav-logo{overflow:visible!important}
.nav-right{flex:0 0 auto}
.social-top-bar{
box-sizing:border-box!important;
width:100%!important;
margin:0!important;
padding:14px clamp(16px,4vw,54px)!important;
position:relative!important;
z-index:10!important;
justify-content:center!important;
align-items:flex-start!important;
pointer-events:auto!important;
}
.social-top-bar-inner{
box-sizing:border-box!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
backdrop-filter:none!important;
pointer-events:auto!important;
}
.partner-showcase-top{
margin-top:0!important;
padding-top:clamp(30px,4vw,58px)!important;
}
@media(max-width:1500px){
.nav-links{gap:10px;margin-inline-start:10px}
.nav-link{font-size:.72rem}
.nav-phone{display:none}
.lang-btn{padding-inline:8px}
}
@media(max-width:1200px){
.burger{display:grid!important}
.nav-links.mobile-open,.nav-links.active,.nav-links.open,.nav-links.is-open{
top:68px!important;
inset-block:68px auto!important;
max-height:calc(100vh - 68px)!important;
}
}
@media(max-width:760px){
.announce-bar{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important}
.announce-bar span{flex:0 0 auto;padding-inline:9px}
.nav{padding-inline:14px!important}
.nav-logo small{display:none}
.social-top-bar{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important}
.social-top-bar-inner{flex:0 0 auto!important;flex-wrap:nowrap!important}
}
@media(max-width:520px){
.nav-logo-mark{font-size:.92rem}
.art-logo-mark{width:34px;height:34px;flex-basis:34px}
.theme-toggle{display:none!important}
.nav-cta{padding:9px 14px!important;font-size:.72rem}
}
/* Контраст тёмной темы: перекрывает старые фирменные цвета style.css. */
html[data-theme="dark"] .partner-rank .partner-metal-brand,
html[data-theme="dark"] .partner-rank .partner-metal-copy,
html[data-theme="dark"] .partner-rank .partner-metal-kicker,
html[data-theme="dark"] .partner-topone .partner-metal-brand,
html[data-theme="dark"] .partner-topone .partner-metal-copy,
html[data-theme="dark"] .partner-topone .partner-metal-kicker,
html[data-theme="dark"] .partner-topone .partner-metal-footer{
color:var(--ink)!important;
}
html[data-theme="dark"] .partner-rank .partner-metal-footer{color:var(--verm)!important}
html[data-theme="dark"] .partner-metal-pill{color:var(--ink)!important;border-color:var(--ink)!important;background:transparent!important}
html[data-theme="dark"] .hero-main{background:#101625!important}
html[data-theme="dark"] .hero-desc,
html[data-theme="dark"] .partner-metal-copy,
html[data-theme="dark"] .hero-cards-meta,
html[data-theme="dark"] .footer-col a{color:var(--muted)!important}
html[data-theme="dark"] .hero-news-source{color:var(--cyan)!important}