/*
 * Стили страницы приглашения в канал — копия оформления t.me.
 *
 * Файл собран из telegram.org/css/telegram.css: отобраны правила классов
 * tgme_*, относящихся к странице приглашения, плюс переменные тем. Копия, а не
 * подражание: страница должна читаться человеком с рекламы как привычное
 * превью канала, иначе он не понимает, куда попал, и уходит.
 *
 * Стили лежат У НАС, а не подключаются с telegram.org, намеренно. Чужой файл
 * означал бы, что наш лендинг ломается в тот день, когда они его поменяют, —
 * и узнали бы мы об этом по упавшей конверсии, а не по ошибке. Плюс лишний
 * запрос к внешнему домену на плохом мобильном интернете, ровно там, где
 * каждая секунда стоит денег.
 *
 * Обновлять — повторным отбором из их файла, а не правкой по месту.
 */

/* Переменные тем — оттуда же. Светлая по умолчанию, тёмная на body.bg_dark. */
body {
  --text-color: #000;
  --second-text-color: #7d7f81;
  --accent-btn-color: #2481cc;
  --accent-link-color: #2481cc;
  --body-bg: #fff;
  --box-bg: #fff;
  --box-bg-blured: rgba(255, 255, 255, .84);
  --tme-logo-color: #363b40;
}
body.bg_dark {
  --text-color: #fff;
  --accent-btn-color: #1c93e3;
  --accent-link-color: #3ca1eb;
  --body-bg: #000;
  --box-bg: #1e1e1e;
  --box-bg-blured: rgba(34, 34, 34, .84);
  --tme-logo-color: #fff;
}

html, body { height: 100%; margin: 0; }
a { text-decoration: none; }
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--body-bg);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}




/* Telegram Me */
.tgme_page_wrap {
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
}


.tgme_background_wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: var(--body-bg);
}

.tgme_background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tgme_background.default {
}

.tgme_background.motion {
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  animation: bg-motion 10s linear infinite;
}

.tgme_background_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background: center repeat;
  background-size: 420px auto;
  background-image: var(--pattern-url, none);
  opacity: var(--pattern-intensity, 1);
}

.tgme_background_pattern.default {
  opacity: 0.3;
  background-image: url('/pattern.svg');
}

html.theme_dark .tgme_background,
body.bg_dark .tgme_background {
  -webkit-mask: center repeat;
  -webkit-mask-size: 420px auto;
  -webkit-mask-image: var(--pattern-url, none);
  opacity: var(--pattern-intensity, 1);
}

html.theme_dark .tgme_background.default,
body.bg_dark .tgme_background.default {
  opacity: 0.3;
  -webkit-mask-image: url('/pattern.svg');
}

body.bg_light .tgme_background,
body.bg_light .tgme_background.default {
  -webkit-mask: none;
  opacity: 1;
}

html.theme_dark .tgme_background_pattern,
body.bg_dark .tgme_background_pattern {
  display: none;
}

body.bg_light .tgme_background_pattern {
  display: block;
}


.tgme_head_wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  padding: 10px 16px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: var(--box-bg-blured);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  z-index: 1;
}

.tgme_head {
  display: flex;
  justify-content: space-between;
}

.tgme_head_brand {
  display: inline-block;
  vertical-align: top;
}

.tgme_logo {
  display: inline-block;
  vertical-align: top;
}

a.tgme_head_right_btn {
  display: inline-block;
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-btn-color);
  padding: 9px 16px;
  height: 34px;
  border-radius: 17px;
  text-align: center;
  transition: all .15s ease .15s;
}

a.tgme_head_right_btn:hover,
a.tgme_head_right_btn:active {
  text-decoration: none;
  color: #fff;
  background: var(--accent-color-hover);
}

a.tgme_head_dl_button {
  display: block;
  font-size: 16px;
  line-height: 100%;
  color: #FFF;
  background: #32afed;
  padding: 2px 15px 0 16px;
  height: 45px;
  line-height: 43px;
  text-align: center;
}

.tlb_page_wrap a.tgme_head_dl_button {
  color: #FFF;
}

a.tgme_head_dl_button:hover,
a.tgme_head_dl_button:active,
.tlb_page_wrap a.tgme_head_dl_button:hover,
.tlb_page_wrap a.tgme_head_dl_button:active {
  color: #FFF;
  background: #32afed;
  text-decoration: none;
}


.tgme_body_wrap {
  padding: 70px 16px 40px;
}

.tgme_page {
  position: relative;
  margin: 16px auto;
  padding: 32px 0;
  max-width: 400px;
  background: var(--box-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  transition: all .15s ease .15s;
}

.tgme_page a {
  color: var(--accent-link-color);
}

.tgme_page_photo {
  text-align: center;
  padding-bottom: 16px;
}

.tgme_page_photo_image {
  width: 122px;
  height: 122px;
  border-radius: 61px;
}

.tgme_page_title {
  font-size: 26px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  max-width: 340px;
  padding: 0 10px;
  margin: 0 auto;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tgme_page_title mark.label {
  font-size: .6em;
  background: transparent;
  border: 1px solid #d14e4e;
  box-shadow: 0 0 0 .5px #d14e4e;
  color: #d14e4e;
  border-radius: 4px;
  padding: 2px 5px 1px;
  margin-left: 10px;
  vertical-align: top;
  font-weight: 500;
}

.tgme_page_extra {
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  padding: 6px 16px 0;
  color: var(--second-text-color);
}

.tgme_page_desc_header,
.tgme_page_description,
.tgme_page_additional {
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  margin: 10px 16px 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tgme_page_additional strong {
  -webkit-font-smoothing: antialiased;
}

.tgme_page_desc_header,
.tgme_page_description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 125px;
  word-break: break-word;
}

.tgme_page_additional {
  display: none;
  font-size: 14px;
  line-height: 23px;
  margin-top: 32px;
  color: #808080;
}

.tgme_page_action {
  text-align: center;
  margin-top: 24px;
  line-height: 0;
}

a.tgme_action_button,
a.tgme_action_button_new {
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  color: #FFF;
  background: #5dc390;
  border-radius: 22px;
  overflow: hidden;
  display: inline-block;
  padding: 13px 24px;
  height: 42px;
  text-transform: uppercase;
  vertical-align: top;
}

a.tgme_action_button:hover,
a.tgme_action_button:active,
a.tgme_action_button_new:hover,
a.tgme_action_button_new:active {
  color: #FFF;
  background: #4bbc87;
  text-decoration: none;
}

a.tgme_action_button_new {
  background-color: var(--accent-btn-color);
}

a.tgme_action_button_new.shine {
  background-image: linear-gradient(270deg, rgba(100, 181, 239, 0) 48.44%, #64b5ef 75.52%, rgba(100, 181, 239, 0) 100%);
  background-repeat: no-repeat;
  animation: bg-move linear 5s infinite;
}

a.tgme_action_button_new:hover,
a.tgme_action_button_new:active {
  background-color: var(--accent-color-hover);
}

.tgme_page_web_action a.tgme_action_button_new {
  color: var(--accent-btn-color);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent-btn-color);
}

.tgme_page_web_action a.tgme_action_button_new:hover,
.tgme_page_web_action a.tgme_action_button_new:active {
  color: var(--accent-btn-color);
  background: transparent;
  text-decoration: none;
}

.tgme_page_action ~ .tgme_gift_description {
  margin-top: 20px;
  margin-bottom: -12px;
}

.tgme_page_widget_actions .tgme_page_action {
  position: relative;
  margin: 0 auto;
}

.tgme_page_context_action a.tgme_action_button_new {
  font-weight: normal;
  text-transform: none;
}

.tgme_page_embed_btn a.tgme_action_button_new,
.tgme_page_context_btn a.tgme_action_button_new,
.tgme_page_copy_action a.tgme_action_button_new,
.tgme_page_widget_actions a.tgme_action_web_button {
  color: #7D7F81;
  padding: 13px 10px;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.tgme_page_widget_actions a.tgme_action_button_new .tgme_action_button_icon.web_icon .icon_body {
  animation-duration: 300ms;
  animation-timing-function: steps(18);
}

.tgme_page_widget_actions a.tgme_action_button_new:hover .tgme_action_button_icon.web_icon .icon_body {
  animation-name: play18;
}

.tgme_action_button_new .tgme_action_button_icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -7px 7px -7px 0;
}

.tgme_action_button_new .tgme_action_button_icon .icon_body {
  stroke: #7D7F81;
  animation-duration: 500ms;
  animation-timing-function: steps(30);
}

.tgme_page_additional,
.tgme_page_context_link_wrap {
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  padding: 0 16px;
  margin: 20px 0 0;
  color: var(--second-text-color);
}

.tgme_page_additional {
  margin-top: 24px;
}

.embed_opened .tgme_page_embed_btn a.tgme_action_button_new {
  color: var(--accent-btn-color);
}

.embed_opened .tgme_page_embed_btn .tgme_action_button_new .tgme_action_button_icon .icon_body {
  stroke: var(--accent-btn-color);
  animation-name: play30;
}

.tgme_page_embed_action a.tgme_action_button_new:hover,
.tgme_page_embed_action a.tgme_action_button_new:active,
.tgme_page_copy_action a.tgme_action_button_new:hover,
.tgme_page_copy_action a.tgme_action_button_new:active {
  color: #7D7F81;
  text-decoration: none;
  background: none;
}

.tgme_page_copy_action .tgme_action_button_new.pressed .tgme_action_button_icon .icon_body {
  animation-name: play30;
}
@media (max-width: 595px){

  .tgme_page_widget_actions .tgme_action_button_label {
    display: none;
  }

  .tgme_page_embed_btn a.tgme_action_button_new:before {
    margin-right: 0;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){

  .tgme_page_copy_action a.tgme_action_button_new:before {
    background-image: none;
    background-size: 24px 24px;
  }
}
@media (max-width: 480px){



  /* Telegram.me */
  .tgme_page_photo_image {
    width: 110px;
    height: 110px;
    border-radius: 55px;
  }


  .tgme_page {
    margin-top: 0;
  }


  .tgme_page_additional {
    display: block;
  }
}

/* ── Дописано нами ─────────────────────────────────────────────────────────
 *
 * Фон у Telegram рисует <canvas> их скриптом: холст заливается цветами обоев,
 * а рисунок даёт маска-паттерн поверх. Тащить ради этого чужой JS не стали —
 * те же цвета кладём градиентом, маска остаётся их.
 */
.tgme_background.default {
  background: linear-gradient(160deg, #dbddbb 0%, #6ba587 35%, #d5d88d 65%, #88b884 100%);
}
body.bg_dark .tgme_background.default {
  /* Маска у них прописана только с префиксом -webkit-. Дублируем стандартным
     свойством, иначе в части браузеров фон заливается сплошным цветом вместо
     рисунка. */
  mask: center repeat;
  mask-size: 420px auto;
  mask-image: url('/pattern.svg');
}

/* Отступ под фиксированную шапку добавлять НЕ НУЖНО: он уже заложен у них в
   `.tgme_body_wrap` (70px). Своя добавка сдвигала карточку на полсотни
   пикселей вниз — поймано измерением, а не на глаз. */

/* Описание канала приезжает с переносами строк, и они значимы: у людей там
   абзацы и списки. По умолчанию браузер их схлопывает. */
.tgme_page_description { white-space: pre-line; }