/* ritmomera.ru: статическая копия старого сайта (Drupal 7, темы basic и bartik).
   Значения отступов и размеров перенесены из агрегатов Drupal, чтобы раскладка совпала с оригиналом. */

/* ===================================================================== общее */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { border: 0; outline: 0; vertical-align: baseline; }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.swf-anim { position: relative; }

/* ============================================================ подвал: меню-спрайт
   (одинаковый на главной и внутренних, отличается только отступами) */
.footer-menu { margin: 0; list-style: none; }
.footer-menu::after { content: ""; display: block; clear: both; }
.footer-menu li { list-style: none; float: left; margin: 0 30px; height: 20px; }
.footer-menu li a { display: block; height: 20px; text-decoration: none; }
.footer-menu li.fm-sep {
  width: 14px; height: 14px; margin: 2px 0 0 0;
  background: url(/assets/img/footer_nav_separator.png) no-repeat;
}
.footer-menu li.fm-home { background: url(/assets/img/footer_nav_links.png) no-repeat 3px 0; width: 71px; }
.footer-menu li.fm-home a { width: 71px; }
.footer-menu li.fm-home:hover { background-position: 3px -19px; }
.footer-menu li.fm-feedback { background: url(/assets/img/footer_nav_links.png) no-repeat -213px 1px; width: 137px; }
.footer-menu li.fm-feedback a { width: 137px; }
.footer-menu li.fm-feedback:hover { background-position: -213px -18px; }
.footer-menu li.fm-about { background: url(/assets/img/footer_nav_links.png) no-repeat -420px 1px; width: 180px; }
.footer-menu li.fm-about a { width: 180px; }
.footer-menu li.fm-about:hover { background-position: -422px -18px; }
.footer-menu li a:focus-visible { outline: 1px dotted #9d9d9d; }

.copy { text-align: center; color: #737272; }
.copy a { color: #737272; }

/* ===================================================== главная (тема basic) */
body.front {
  width: 999px; margin: 0 auto; background: #4f4f4f; color: #919191;
  font: 13px/1.5em "Helvetica World", Helvetica, Arial, sans-serif; letter-spacing: 0.03em;
}
.front p, .front ul { margin: 0; padding: 0; }
.front-page { width: 960px; margin: 0 auto; }

.front-header {
  height: 225px;
  background: url(/assets/img/main_header_bg.png) no-repeat bottom;
}
.front-logo { display: block; padding: 25px 0 0 0; }
.front-slogan {
  text-align: center; font-family: "Helvetica World", Helvetica, Arial, sans-serif; font-size: 24px;
  color: #6e6e6d; padding: 40px 0 0 0; letter-spacing: -0.08em; word-spacing: 0.12em;
}
.front-all { margin-top: -35px; }
.front .front-all p { margin: 1em 0; }
.front-all a {
  position: absolute; color: #9d9d9d; letter-spacing: -0.05em; text-decoration: underline; font-size: 120%;
}
.front-all a:hover { color: #9d9d9d; }

/* центр между двумя боковыми «лентами» (190 слева, 200 справа) */
.front-main {
  position: relative;
  padding: 0 200px 0 190px; text-align: center;
  background: url(/assets/img/main_content_bg.png) no-repeat bottom;
}
.front-flower { padding-bottom: 40px; }
.front-flower .swf-anim { margin: 0 auto; }

/* киноленты главной: окно 190×508, плёнка ползёт вверх 20 px/с, под курсором стоит
   (как scroller_left.js / scroller_right.js старого сайта) */
.lenta { position: absolute; top: 0; width: 190px; height: 528px; }
.lenta--left { left: 0; }
.lenta--right { right: 5px; }
.lenta-view { position: absolute; top: 10px; left: 0; width: 190px; height: 508px; overflow: hidden; background: #4f4f4f; }
.lenta-track { animation: lenta-up var(--lenta-dur, 26.4s) linear infinite; }
.lenta:hover .lenta-track, .lenta:focus-within .lenta-track { animation-play-state: paused; }
@keyframes lenta-up { to { transform: translateY(-33.3333%); } }
.lenta-copy { padding-top: 10px; background: url(/assets/img/lenta/lenta.jpg) repeat-y; }
.lenta-kadr {
  display: block; width: 116px; height: 92px; margin: 21px 37px; padding: 0; border: 0;
  overflow: hidden; background: no-repeat 0 0; cursor: pointer;
}
.lenta-copy .lenta-kadr:first-child { margin-top: 3px; }
.lenta--left .lenta-kadr:hover, .lenta--left .lenta-kadr:focus-visible { background-position: -126px 0; }
.lenta--right .lenta-copy .lenta-kadr:first-child { margin: 4px 39px 21px; }
.lenta-kadr:focus-visible { outline: 2px solid #ffac00; outline-offset: 2px; }
.lenta-top, .lenta-bottom { position: absolute; left: 0; z-index: 2; pointer-events: none; }
.lenta-top { top: 5px; }
.lenta-bottom { top: 490px; }
@media (prefers-reduced-motion: reduce) { .lenta-track { animation: none; } }

/* окно отзыва из правой ленты */
.lenta-popup {
  position: absolute; z-index: 555; width: 320px; text-align: justify; color: #ccc; cursor: pointer;
  font-size: 13px; line-height: 1.35;
}
.lenta-popup[hidden] { display: none; }
.lenta-popup-top { height: 15px; background: url(/assets/img/lenta/lenta_kadr_bg1.png) no-repeat; }
.lenta-popup-text { padding: 0 20px; background: url(/assets/img/lenta/lenta_kadr_bg2.png) repeat-y; }
.lenta-popup-bottom { height: 20px; background: url(/assets/img/lenta/lenta_kadr_bg3.png) no-repeat; }

.front-footer {
  clear: both; height: 70px;
  background: url(/assets/img/main_footer_bg.png) no-repeat center 0;
}
.front-footer .footer-nav { height: 30px; }
.front .footer-menu { padding: 15px 0 0 179px; }
/* остаток меню ритмомер Drupal: одна ссылка, висит над подвалом */
.front-rmenu { position: relative; }
.front .front-rmenu ul {
  position: absolute; margin-top: -70px; padding: 10px 0 20px calc(11% + 0.25em); width: 80%;
  list-style: none;
}
.front-rmenu li { float: left; list-style: none; max-width: 225px; }
.front-rmenu a { color: #9d9d9d; font-size: 16px; }
.front-rmenu a:hover { color: #9d9d9d; text-decoration: underline; }
.front-copy { padding-top: 10px; }
.front .copy { margin: 3px 0 0 0; }

/* =============================================== внутренние страницы (bartik) */
body.inner {
  margin: 0; padding: 0; min-width: 1000px; background: #4f4f4f; color: #e9e9e9;
  font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 87.5%; line-height: 1.5;
  word-wrap: break-word;
}
.inner a { color: #0070b3; }
.inner a:hover, .inner a:focus { color: #008ee2; }
.inner h1, .inner h2, .inner h3, .inner h4 { margin: 1em 0 0.5em; font-weight: inherit; }
.inner h2 { font-size: 1.143em; }
.inner p { margin: 0 0 1.2em; }

/* шапка */
.site-header {
  padding: 20px 0 0 0;
  background: #4f4f4f url(/assets/img/header_bg.jpg) no-repeat center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.site-header .section { position: relative; width: 1000px; margin: 0 auto; }
.site-header .section::after { content: ""; display: block; clear: both; }
.site-header .logo { float: left; padding: 10px 15px 7px 40px; }
.name-and-slogan { float: right; margin: 0 45px 0 15px; }
.inner .slogan {
  margin: 7px 0 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 22px;
  color: #9d9d9d; letter-spacing: -0.08em; word-spacing: 0.12em;
}

/* доска */
.main {
  width: 1000px; margin: -1px auto 0; min-height: 300px;
  padding: 1px 0 20px;
  background: #4f4f4f url(/assets/img/bg.jpg) 0 0;
}
.main > .section { padding: 0 15px; }
.region { padding: 0 30px 0 40px; }

.highlighted { position: relative; font-size: 14px; line-height: 1.5em; }
.highlighted .all-link a { letter-spacing: -0.05em; color: #9d9d9d; text-decoration: underline; }
/* «уголок», 360×330, как блок conner.swf */
.corner { position: absolute; margin: -108px 0 0 658px; z-index: 0; }

/* заголовок страницы */
.page-title {
  font-size: 30px; line-height: 1; text-align: center; color: #e9e9e9;
  letter-spacing: -0.05em; word-spacing: 0.15em;
}
.inner .page-title { margin-bottom: 20px; }
.ritmomera .page-title {
  font-size: 60px; color: var(--title);
  background: url(/assets/img/title_bg.png) no-repeat bottom right;
  padding: 0 0 50px 0; width: 660px; margin: 35px 0 30px 40px;
}
.rm-love .page-title { width: 650px; }

.region-content { min-height: 250px; }
.rm-hurt .region-content, .rm-love .region-content, .rm-fear .region-content { min-height: 1400px; }
.region-content p { margin: 0.4em 0; }
.region-content ul, .region-content ol { margin: 1em 0; padding: 0 0 0.25em 2.5em; }

/* текст материала */
.node { font-size: 15px; line-height: 22.5px; }
.node::after { content: ""; display: block; clear: both; }
.rm-node { color: #262626; }
.rm-node a, .rm-node span { color: var(--accent); }
.rm-node a:hover { color: var(--accent-hover, var(--accent)); text-decoration: underline; }

/* «Что такое ритмомера?» справа от заголовка */
.what-is { position: absolute; padding: 23px 0 0 740px; text-align: center; }
.what-is a { display: block; }

/* телевизор с отзывом */
.tv {
  float: right; position: relative; z-index: 1; margin: 160px 0 0; padding: 0;
  width: 315px; height: 328px; color: #f1e9d4;
  background: url(/assets/img/tv.png);
}
.tv-screen {
  position: relative; z-index: 10; border-top: 1px solid #353537;
  background: url(/assets/img/tv.png);
}
.tv-text {
  /* в оригинале: окно 235×160 с отступом 75/35/45/45 и самописный скролл справа у x=288.
     Здесь: то же окно, расширенное вправо до скроллбара, родной overflow:auto */
  margin: 75px 17px 45px 45px; padding: 0 14px 0 0;
  width: 239px; height: 160px; overflow-x: hidden; overflow-y: auto;
  font-size: 12px; line-height: 22.5px; outline: none;
}
/* скроллбар в цветах оригинала (кремовая нитка scroll_bg.png, оранжевый бегунок scroller.png, стрелки) */
.tv-text::-webkit-scrollbar { width: 9px; }
.tv-text::-webkit-scrollbar-track {
  background: url(/assets/img/scroll_bg.png) no-repeat center / 9px 100%;
}
.tv-text::-webkit-scrollbar-thumb {
  min-height: 31px; border-radius: 3px;
  background: url(/assets/img/scroller.png) no-repeat center / 7px 100%;
}
.tv-text::-webkit-scrollbar-button:vertical:start:increment,
.tv-text::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
.tv-text::-webkit-scrollbar-button:vertical:start:decrement {
  display: block; height: 17px; background: url(/assets/img/scroll_arrow_up.png) no-repeat center;
}
.tv-text::-webkit-scrollbar-button:vertical:end:increment {
  display: block; height: 17px; background: url(/assets/img/scroll_arrow_down.png) no-repeat center;
}
.tv-text:focus-visible { outline: 1px dotted #f1e9d4; }
@supports not selector(::-webkit-scrollbar) {
  .tv-text { scrollbar-width: thin; scrollbar-color: #ff8a00 rgba(241, 233, 212, 0.35); }
}

/* листок с вводным текстом (короткий: одна картинка) */
.intro {
  float: left; width: 545px; height: 520px; margin: 15px 0 0 0;
  background: url(/assets/img/block1_bg_1.png) no-repeat;
}
.intro-scroll { position: relative; margin: 47px 35px 35px 40px; height: 600px; overflow: auto; }
.intro-inner { position: relative; display: block; margin: 0; padding-left: 10px; }

/* листок длинный: верх, середина и низ отдельными картинками (обида, страх, энергосовмещение).
   В оригинале высоты были жёсткими (650/699/563) и длинный текст уезжал под скролл;
   здесь листок растёт по тексту, минимальные высоты те же. */
.intro-long { background: none; width: 530px; height: auto; min-height: 650px; padding-bottom: 30px; }
.intro-long .intro-scroll { margin: 0; height: auto; width: 540px; overflow: visible; }
.paper-bottom {
  position: relative; z-index: 2; width: 530px; min-height: 650px; padding-bottom: 60px;
  box-sizing: border-box;
  background: url(/assets/img/block1__3_bg.png) no-repeat bottom left;
}
.rm-hurt .paper-bottom { min-height: 699px; }
.rm-energy .paper-bottom { min-height: 563px; }
.paper-top {
  position: relative; z-index: 10; width: 530px; min-height: 430px;
  background: url(/assets/img/block1__1_bg.png) no-repeat;
}
.paper-middle {
  position: relative; z-index: 3; width: 99%; height: auto; padding-bottom: 1px;
  background: url(/assets/img/block1__2_bg.png) no-repeat 0 80px;
}
.paper-middle p { padding: 0 20px 0 40px; }
.paper-middle p.p-first { padding-top: 40px; }

/* анимация ритмомеры: строчный блок, как флеш-объект, уходит под листок */
.rm-anim { width: 38%; padding-right: 5%; height: 280px; text-align: center; color: #f1e9d4; }
.rm-anim .swf-anim { display: inline-block; vertical-align: top; text-align: left; }

/* плеер и вопросы */
.player {
  float: right; width: 490px; height: 295px; margin: 35px 0 0 0; padding: 42px 45px 30px 35px;
  background: url(/assets/img/block2_bg.png);
  color: #6f6f6f; text-align: center; font-size: 14px;
}
.player audio { display: block; width: 440px; height: 32px; margin: 8px auto; }
.region-content .player ul { margin: 30px 0 0 0; }
.player li { color: #262626; list-style: none; font-size: 16px; margin: 10px 0; }

/* «Цель обучения» */
.goal {
  clear: both; width: 591px; height: 345px; margin: 0 auto; padding: 78px 50px 0 58px;
  background: url(/assets/img/block3_bg.png) no-repeat center 15px;
}
.goal h3 { text-align: center; margin: 0.2em 0 0.5em 0; font-size: 1.17em; }
.rm-energy .goal { padding-top: 64px; height: 401px; }
.rm-hurt .goal { padding-top: 71px; height: 396px; }
.rm-fear .goal { padding-top: 65px; height: 401px; }
.rm-love .goal { height: 364px; padding-top: 58px; background-image: url(/assets/img/block3_bg_1.png); }
.rm-age .goal { height: 368px; padding-top: 52px; background-image: url(/assets/img/block3_bg_1.png); }
.rm-info .goal { height: 370px; padding-top: 51px; background-image: url(/assets/img/block3_bg_1.png); }
.rm-sleep .goal { height: 368px; padding-top: 53px; background-image: url(/assets/img/block3_bg_1.png); }

/* кнопки */
.buy { position: relative; width: 498px; height: 200px; margin: -30px auto; font-size: 14px; line-height: 21px; }
.buy p { margin: 0; padding: 0; }
.inner .btn {
  display: block; color: #181818; text-align: center; text-decoration: none;
  background: linear-gradient(to top, var(--btn-from), var(--btn-to));
}
.inner .btn:hover, .inner .btn:focus { color: #181818; text-decoration: none;
  background: linear-gradient(to top, var(--btn-hover-from), var(--btn-hover-to)); }
/* высота строки 21px унаследована от блока, как в оригинале */
.btn-buy { font-size: 24pt; padding: 14px; }
.btn-talk { font-size: 20pt; padding: 10px; }
.ritmolog {
  display: none; position: absolute; left: 0; right: 0; padding: 10px;
  border: 2px solid var(--ritmolog);
}
.btn-talk:hover + .ritmolog, .btn-talk:focus + .ritmolog, .ritmolog:hover { display: block; }

/* цвета ритмомер (из лепестков цветка) */
.ritmomera {
  --title: #ffac00; --accent: #ff8401; --accent-hover: #ffac00;
  --btn-from: #e0a339; --btn-to: #e9c591; --btn-hover-from: #faa517; --btn-hover-to: #e8bc7b;
  --ritmolog: #f8bb52;
}
.rm-hurt .rm-node span { color: #ffac00; }
.rm-love {
  --title: #ea348b; --accent: #ea348b; --accent-hover: #ea348b;
  --btn-from: #ed387b; --btn-to: #e58eb1; --btn-hover-from: #ec276f; --btn-hover-to: #e983ab;
  --ritmolog: #ea348b;
}
.rm-fear {
  --title: #40edfa; --accent: #40edfa; --accent-hover: #40edfa;
  --btn-from: #75e0e8; --btn-to: #9eeaea; --btn-hover-from: #47e2f4; --btn-hover-to: #96e1e6;
  --ritmolog: #40edfa;
}
.rm-age {
  --title: #ff5151; --accent: #ff5151; --accent-hover: #ff5151;
  --btn-from: #d7423e; --btn-to: #e19391; --btn-hover-from: #f7221c; --btn-hover-to: #f08380;
  --ritmolog: #ff5151;
}
.rm-energy {
  --title: #e77843; --accent: #e77843; --accent-hover: #e77843;
  --btn-from: #d48342; --btn-to: #d7a67b; --btn-hover-from: #ee7c19; --btn-hover-to: #f1a363;
  --ritmolog: #fe9539;
}
.rm-info {
  --title: #4a81ff; --accent: #4a81ff; --accent-hover: #4a81ff;
  --btn-from: #298cdf; --btn-to: #6daee6; --btn-hover-from: #118dfd; --btn-hover-to: #54afff;
  --ritmolog: #2499ff;
}
.rm-sleep {
  --title: #00a8ec; --accent: #00a8ec; --accent-hover: #00a8ec;
  --btn-from: #1faed6; --btn-to: #65c3dc; --btn-hover-from: #00cced; --btn-hover-to: #4bd7f8;
  --ritmolog: #2fd7fb;
}

/* простые страницы */
.page-about p { padding: 7px 0; }
.page-about .center { text-align: center; }
.inner .page-feedback h2 { margin-bottom: 2px; font-size: 1.429em; line-height: 1.4; }
.page-feedback .ask a { color: #ffac00; }
.page-feedback .ask a:hover { color: #ffc261; }

/* подвал внутренних страниц */
.site-footer {
  margin-top: -36px; padding: 100px 0 0 0;
  background: url(/assets/img/inner_footer_bg.png) no-repeat top;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.857em;
}
.site-footer .footer { width: 940px; margin: 30px auto 0; text-align: center; letter-spacing: 0.2px; }
.site-footer .region { margin-top: 20px; font-size: 14px; line-height: 1.5em; }
.site-footer .footer-nav { height: 30px; margin: 6px 0; }
.inner .footer-menu { padding: 16px 0 0 145px; }
.inner .copy { margin: 6px 0; padding: 27px 0 15px; }
.inner .copy a, .inner .copy a:hover { color: #737272; }