/* TM зима 2026: поверх темы skydrive-style-09-2026 (HT осень) */ /* Скрины GUI в перспективе (по мотивам карточек HT осень: ESC-меню, награды за онлайн) */ #skydrive-landing .tm-shot-card { overflow: hidden; } #skydrive-landing .tm-shot-card .skydrive-landing__card-info-1 { display: flex; flex-direction: column; bottom: 0; clip-path: inset(2.6% 3% 2.6% 3%); } #skydrive-landing .tm-shot { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 26px; perspective: 1200px; pointer-events: none; } #skydrive-landing .tm-shot__in { position: absolute; top: 0; } #skydrive-landing .tm-shot_r .tm-shot__in { left: 6%; width: 118%; } #skydrive-landing .tm-shot_l .tm-shot__in { right: 6%; width: 118%; } #skydrive-landing .tm-shot__img { display: block; width: 100%; height: auto; border: 2px solid rgba(214, 160, 255, .8); border-radius: 8px; box-shadow: 0 0 0 1px rgba(10, 0, 25, .7), 0 0 28px rgba(178, 60, 255, .55), 0 30px 80px rgba(0, 0, 0, .6); -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 78%, transparent 100%); } #skydrive-landing .tm-shot_r .tm-shot__img { transform-origin: 0 0; transform: rotateY(-26deg) rotateX(12deg) rotateZ(4deg); } #skydrive-landing .tm-shot_l .tm-shot__img { transform-origin: 100% 0; transform: rotateY(26deg) rotateX(12deg) rotateZ(-4deg); } #skydrive-landing .tm-shot_softfade .tm-shot__img { -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .4) 100%); mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .4) 100%); } #skydrive-landing .tm-shot_nofade .tm-shot__img { -webkit-mask-image: none; mask-image: none; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 1px rgba(214, 160, 255, .9)) drop-shadow(0 0 22px rgba(178, 60, 255, .55)) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); } #skydrive-landing .tm-shot__block { position: absolute; z-index: 4; bottom: 6%; width: 36%; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 18px rgba(178, 60, 255, .5)); } #skydrive-landing .tm-shot__block_r { left: 4%; } #skydrive-landing .tm-shot__block_l { right: 4%; } @media (max-width: 767px) { #skydrive-landing .tm-baked .skydrive-landing__card-paragraph-1 { font-size: 13px; line-height: 1.3; } } /* Блок запечён в картинку, текст поверх: отступы и кегль в долях ширины карточки (на десктопе 472px те же 48/24/14px), иначе на узкой карточке отступ 48px съедает треть ширины и текст наезжает на блок */ #skydrive-landing .tm-baked { container-type: inline-size; } #skydrive-landing .tm-baked > .skydrive-landing__card-info-1 { padding: 10.17cqw !important; } #skydrive-landing .tm-baked .skydrive-landing__card-heading-1 { font-size: clamp(14px, 5.08cqw, 24px) !important; } #skydrive-landing .tm-baked .skydrive-landing__card-paragraph-1 { font-size: clamp(11px, 2.97cqw, 14px) !important; line-height: 1.3; } @container (max-width: 360px) { #skydrive-landing .tm-baked > .skydrive-landing__card-info-1 { padding: 7cqw 6cqw !important; } } #skydrive-landing .skydrive-btn_style-purple { --color-shadow: rgba(206, 1, 233, .45); } #skydrive-landing .tm-gui-flat { filter: drop-shadow(0 0 1px rgba(214, 160, 255, .9)) drop-shadow(0 0 22px rgba(178, 60, 255, .55)); transform: perspective(900px) rotateY(-14deg) rotateX(6deg); } /* Ферма нового уровня (порт игрового лендинга metaevent-skydrive) */ #skydrive-landing .tm-shot_cut .tm-shot__img { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 1px rgba(214, 160, 255, .9)) drop-shadow(0 0 22px rgba(178, 60, 255, .55)); } #skydrive-landing .tm-shot__frames { position: relative; } #skydrive-landing .tm-shot__frames > img { display: block; width: 100%; } #skydrive-landing .tm-pulse { position: absolute; display: block; z-index: 2; border: 4px solid var(--c); border-radius: 6px; box-shadow: 0 0 0 2px rgba(10, 4, 20, .85), 0 0 18px var(--c), inset 0 0 12px var(--c); animation: tm-pulse 1.7s ease-in-out infinite; } @keyframes tm-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } #skydrive-landing .tm-kicker { font-family: Furore, sans-serif; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #8BE2B6; } #skydrive-landing .tm-farm-hero .skydrive-landing__card-info-1 { display: flex; align-items: center; gap: 24px; text-align: left; bottom: 0; } #skydrive-landing .tm-farm-cmp .skydrive-landing__card-info-1 { display: flex; flex-direction: column; justify-content: center; bottom: 0; } #skydrive-landing .tm-farm-hero .skydrive-landing__card-heading-1, #skydrive-landing .tm-farm-hero .skydrive-landing__card-paragraph-1 { text-align: left; } #skydrive-landing .tm-farm-hero__text { flex: 1 1 55%; } #skydrive-landing .tm-farm-hero__art { flex: 1 1 45%; display: flex; justify-content: center; } #skydrive-landing .tm-farm-hero__art img { width: min(100%, 360px); filter: drop-shadow(0 0 30px rgba(139, 226, 182, .35)) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); } #skydrive-landing .tm-float { animation: tm-float 4.8s ease-in-out infinite; } @keyframes tm-float { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } } #skydrive-landing .tm-metrics { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } #skydrive-landing .tm-metrics > div { padding: 14px 20px; border: 2px solid rgba(139, 226, 182, .44); border-radius: 8px; background: rgba(20, 34, 34, .7); box-shadow: 0 5px 16px rgba(139, 226, 182, .08); } #skydrive-landing .tm-metrics b { display: block; font-family: Furore, sans-serif; font-size: 30px; font-weight: 400; color: #8BE2B6; line-height: 1.1; } #skydrive-landing .tm-metrics span { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: #A6B2C8; margin-top: 4px; } #skydrive-landing .tm-cmp { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; } #skydrive-landing .tm-cmp figure { position: relative; margin: 0; width: 44%; } #skydrive-landing .tm-cmp figure img { display: block; width: 100%; border-radius: 8px; border: 2px solid rgba(214, 160, 255, .5); box-shadow: 0 0 24px rgba(178, 60, 255, .35); transition: transform .26s; } #skydrive-landing .tm-cmp figure:hover img { transform: scale(1.035); } #skydrive-landing .tm-cmp figcaption { font-size: 14px; color: #A6B2C8; margin-top: 8px; } #skydrive-landing .tm-cmp__tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); z-index: 1; font-family: Furore, sans-serif; font-size: 14px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(10, 4, 20, .8); color: #A6B2C8; } #skydrive-landing .tm-cmp__tag_on { color: #0b1a14; background: #8BE2B6; } #skydrive-landing .tm-cmp__arrow { font-size: 32px; color: #8BE2B6; } #skydrive-landing .tm-fert-wrap { overflow-x: auto; margin-top: 30px; } #skydrive-landing .tm-fert { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0 8px; text-align: left; color: #E5EAFF; } #skydrive-landing .tm-fert th { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: #A6B2C8; padding: 0 16px 4px; } #skydrive-landing .tm-fert td { background: rgba(255, 255, 255, .04); padding: 12px 16px; font-size: 16px; vertical-align: middle; } #skydrive-landing .tm-fert tr td:first-child { border-radius: 8px 0 0 8px; display: flex; align-items: center; gap: 14px; } #skydrive-landing .tm-fert tr td:last-child { border-radius: 0 8px 8px 0; color: #A6B2C8; } #skydrive-landing .tm-fert td img { width: 44px; height: 44px; image-rendering: pixelated; transition: transform .22s; } #skydrive-landing .tm-fert tr:hover td img { transform: scale(1.08); } #skydrive-landing .tm-fert b { font-weight: 600; } #skydrive-landing .tm-fert small { display: block; font-size: 12px; color: #A6B2C8; letter-spacing: .05em; } #skydrive-landing .tm-fert__k { font-family: Furore, sans-serif; font-size: 22px; color: #8BE2B6; } #skydrive-landing .tm-fert tbody tr:first-child td { background: rgba(139, 226, 182, .1); } #skydrive-landing .tm-thermal { position: relative; height: 46%; display: flex; align-items: center; justify-content: center; margin-top: auto; } #skydrive-landing .tm-thermal img { width: 46%; image-rendering: pixelated; filter: drop-shadow(0 0 24px rgba(255, 214, 152, .35)); transition: transform .22s; } #skydrive-landing .tm-thermal img:first-child { transform: rotate(-10deg) translateX(14%); } #skydrive-landing .tm-thermal img:last-child { transform: rotate(10deg) translateX(-14%) translateY(12%); } #skydrive-landing .tm-farm-thermal:hover .tm-thermal img:first-child { transform: rotate(-10deg) translateX(14%) scale(1.05); } #skydrive-landing .tm-farm-thermal:hover .tm-thermal img:last-child { transform: rotate(10deg) translateX(-14%) translateY(12%) scale(1.05); } @media (max-width: 767px) { #skydrive-landing .tm-farm-hero .skydrive-landing__card-info-1 { flex-direction: column-reverse; } #skydrive-landing .tm-cmp { flex-direction: column; } #skydrive-landing .tm-cmp figure { width: 100%; } #skydrive-landing .tm-cmp__arrow { transform: rotate(90deg); } } /* width/height на картинках задают пропорции; высоту по-прежнему считает вёрстка (правила темы сильнее :where) */ :where(#skydrive-landing) img[width][height] { height: auto; } /* Контраст: пояснения и приглушённые абзацы светлее, чем в теме (40% и 30% плохо читались) */ #skydrive-landing .color-white-40 { color: rgba(255, 255, 255, .6); } #skydrive-landing .skydrive-landing__card-paragraph-1_muted { opacity: .5; } /* Зимний слой: редкий снег и виньетка поверх страницы (не ловят клики, выключаются при reduced-motion) */ #skydrive-landing .tm-snow { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; } #skydrive-landing .tm-snow i { position: absolute; top: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: var(--o); background: radial-gradient(circle, #fff 0%, rgba(230, 210, 255, .9) 45%, rgba(206, 128, 255, 0) 100%); box-shadow: 0 0 5px rgba(216, 160, 255, .55); animation: tm-snow var(--t) linear var(--dl) infinite; will-change: transform; } @keyframes tm-snow { 0% { transform: translate3d(0, -2vh, 0); } 50% { transform: translate3d(var(--dx), 50vh, 0); } 100% { transform: translate3d(0, 104vh, 0); } } #skydrive-landing .tm-vignette { position: fixed; inset: 0; z-index: 24; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 60%, rgba(3, 0, 10, .45) 100%); } @media (max-width: 767px) { #skydrive-landing .tm-snow i:nth-child(n+31) { display: none; } } @media (prefers-reduced-motion: reduce) { #skydrive-landing .tm-snow { display: none; } } /* Исправления: счётчик и сворачивание длинных групп (js/tm-more.js) */ #skydrive-landing .tm-fixcount { text-align: center; font-size: 20px; color: rgba(255, 255, 255, .7); margin: 0 0 10px; } #skydrive-landing .tm-fixcount b { font-family: Furore, sans-serif; font-weight: 400; font-size: 34px; color: #CE80FF; text-shadow: 0 0 14px rgba(165, 86, 255, .6); margin-right: 6px; } #skydrive-landing .skydrive-landing__article:not(.is-open) .tm-more { display: none; } #skydrive-landing .tm-more-btn { display: block; margin: 30px auto 0; padding: 10px 22px; font: inherit; font-size: 16px; color: #fff; cursor: pointer; background: rgba(165, 86, 255, .14); border: 1px solid rgba(206, 128, 255, .5); border-radius: 999px; transition: background .2s; } #skydrive-landing .tm-more-btn:hover { background: rgba(165, 86, 255, .3); } #skydrive-landing .tm-more-btn:focus-visible { outline: 2px solid #CE80FF; outline-offset: 3px; } /* Подсказки в стиле игрового тултипа на GUI-скринах (js/tm-tips.js) */ #skydrive-landing .tm-hot { position: absolute; z-index: 3; pointer-events: auto; cursor: help; border-radius: 4px; transition: background .2s, box-shadow .2s; } #skydrive-landing .tm-shot-card:hover .tm-hot { box-shadow: inset 0 0 0 2px rgba(206, 128, 255, .45); } #skydrive-landing .tm-hot:hover, #skydrive-landing .tm-hot:focus-visible, #skydrive-landing .tm-hot.is-on { background: rgba(206, 128, 255, .2); box-shadow: inset 0 0 0 2px #CE80FF; outline: none; } .tm-tip { position: fixed; z-index: 9999; max-width: 280px; padding: 7px 10px 8px; pointer-events: none; font-family: Tektur, sans-serif; font-size: 14px; line-height: 1.35; color: #AAAAAA; background: rgba(16, 0, 16, .95); border: 2px solid transparent; border-radius: 3px; background-clip: padding-box; box-shadow: 0 0 0 2px #100010, inset 0 0 0 1px #5000FF, inset 0 -1px 0 1px #28007F, 0 8px 24px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; } .tm-tip.is-on { opacity: 1; transform: none; } .tm-tip b { display: block; font-weight: 400; color: #fff; margin-bottom: 2px; } /* Главы: кикер и контурный номер над заголовком раздела */ #skydrive-landing .tm-chapter { position: relative; text-align: center; margin-bottom: 14px; } #skydrive-landing .tm-chapter__num { position: absolute; right: -5%; top: -0.32em; z-index: 0; pointer-events: none; user-select: none; font-family: Furore, sans-serif; font-size: clamp(110px, 13vw, 200px); line-height: 1; color: rgba(165, 86, 255, .06); -webkit-text-stroke: 2px rgba(206, 128, 255, .3); } #skydrive-landing .tm-chapter__kicker { position: relative; z-index: 1; display: inline-block; font-family: Furore, sans-serif; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #CE80FF; text-shadow: 0 0 12px rgba(165, 86, 255, .6); } #skydrive-landing .tm-chapter + .skydrive-landing__section-heading { position: relative; z-index: 1; } @media (max-width: 991px) { #skydrive-landing .tm-chapter__num { display: none; } } @media (max-width: 767px) { #skydrive-landing .tm-chapter__kicker { font-size: 12px; letter-spacing: .1em; } } /* Навигация по разделам: справа на широких экранах, кнопка + шторка на узких, чипы в шапке */ #skydrive-landing section[id] { scroll-margin-top: 24px; } #skydrive-landing .tm-toc { position: fixed; right: 22px; top: 50%; z-index: 30; display: none; flex-direction: column; gap: 2px; padding: 6px 0 6px 18px; opacity: 0; pointer-events: none; transform: translate(16px, -50%); transition: opacity .35s, transform .35s; } #skydrive-landing .tm-toc.is-shown { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } #skydrive-landing .tm-toc__line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(165, 86, 255, .18); border-radius: 2px; overflow: hidden; } #skydrive-landing .tm-toc__line i { position: absolute; inset: 0; background: linear-gradient(#CE80FF, #A556FF); box-shadow: 0 0 8px #A556FF; transform: scaleY(var(--p, 0)); transform-origin: top; } #skydrive-landing .tm-toc a, #skydrive-landing .tm-sheet a { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.2; color: rgba(255, 255, 255, .45); text-decoration: none; transition: color .2s; } #skydrive-landing .tm-toc a:hover, #skydrive-landing .tm-toc a.is-active { color: #fff; } #skydrive-landing .tm-nav__num { font-family: Furore, sans-serif; font-size: 11px; letter-spacing: .08em; width: 22px; color: rgba(206, 128, 255, .55); } #skydrive-landing a.is-active .tm-nav__num { color: #CE80FF; text-shadow: 0 0 10px #A556FF; } #skydrive-landing .tm-toc a:focus-visible, #skydrive-landing .tm-sheet a:focus-visible, #skydrive-landing .tm-chip:focus-visible, #skydrive-landing .tm-navbtn:focus-visible { outline: 2px solid #CE80FF; outline-offset: 3px; } @media (min-width: 1400px) { #skydrive-landing .tm-toc { display: flex; } #skydrive-landing .tm-navbtn { display: none; } } #skydrive-landing .tm-navbtn { position: fixed; left: calc(var(--g-25) + 80px); bottom: var(--g-25); z-index: 51; height: 65px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; display: flex; align-items: center; gap: 10px; padding: 0 20px; border: 1px solid rgba(206, 128, 255, .5); border-radius: 12px; background: rgba(16, 6, 30, .85); backdrop-filter: blur(10px); color: #fff; font: inherit; font-size: 15px; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(165, 86, 255, .25); } #skydrive-landing .tm-navbtn.is-shown { opacity: 1; pointer-events: auto; transform: none; } @media (max-width: 767px) { #skydrive-landing .tm-navbtn { width: 48px; height: 45px; left: calc(var(--g-25) + 56px); padding: 0; justify-content: center; border-radius: 10px; } #skydrive-landing .tm-navbtn__label { display: none; } #skydrive-landing .tm-navbtn__icon i { width: 20px; } } @media (min-width: 1400px) { #skydrive-landing .tm-navbtn { display: none; } } #skydrive-landing .tm-navbtn__icon { display: flex; flex-direction: column; gap: 3px; } #skydrive-landing .tm-navbtn__icon i { display: block; width: 14px; height: 2px; border-radius: 2px; background: #CE80FF; } #skydrive-landing .tm-sheet { position: fixed; inset: 0; z-index: 60; } #skydrive-landing .tm-sheet[hidden] { display: none; } #skydrive-landing .tm-sheet__backdrop { position: absolute; inset: 0; background: rgba(4, 0, 12, .6); backdrop-filter: blur(4px); } #skydrive-landing .tm-sheet__panel { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(92vw, 420px); max-height: 75vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding: 18px 22px 20px; border: 1px solid rgba(206, 128, 255, .4); border-radius: 18px; background: rgba(16, 6, 30, .96); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(165, 86, 255, .2); animation: tm-sheet-in .25s ease-out; } #skydrive-landing .tm-sheet__head { grid-column: 1 / -1; font-family: Furore, sans-serif; font-size: 18px; color: #fff; margin-bottom: 8px; } #skydrive-landing .tm-sheet a { padding: 9px 0; font-size: 16px; color: rgba(255, 255, 255, .75); } #skydrive-landing .tm-sheet a.is-active { color: #fff; } @keyframes tm-sheet-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } #skydrive-landing .tm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; } #skydrive-landing .tm-chip { padding: 7px 14px; border: 1px solid rgba(206, 128, 255, .35); border-radius: 999px; background: rgba(16, 6, 30, .45); color: rgba(255, 255, 255, .8); font-size: 14px; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } #skydrive-landing .tm-chip:hover { background: rgba(165, 86, 255, .25); border-color: #CE80FF; color: #fff; } /* Шапка не обрезает содержимое на низких экранах: растёт по высоте вместо max-height: 93vh */ #skydrive-landing .skydrive-landing__header__banner { max-height: none; } #skydrive-landing .skydrive-landing__header__banner-content { min-height: 100%; height: auto; } #skydrive-landing .skydrive-landing__header__banner-content { padding-top: 40px !important; padding-bottom: 40px !important; } #skydrive-landing .skydrive-landing__header__banner-content > .wrapper { padding-top: 40px !important; padding-bottom: 110px !important; } @media (max-width: 575px) { #skydrive-landing .tm-chips { gap: 6px; margin-top: 22px; } #skydrive-landing .tm-chip { padding: 5px 11px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { #skydrive-landing .tm-toc, #skydrive-landing .tm-navbtn, #skydrive-landing .tm-sheet__panel { transition: none; animation: none; } } /* Интерактивные 3D мультиблоки (js/tm-mb3d.js) */ #skydrive-landing .tm-mb3d { position: relative; margin-left: auto; margin-right: auto; pointer-events: auto; } #skydrive-landing .skydrive-landing__card-info-1:has(> .tm-mb3d_work) { display: flex; flex-direction: column; bottom: 0; padding-bottom: 28px !important; } #skydrive-landing .tm-mb3d_work { width: 100%; flex: 1 1 auto; min-height: 0; } @media (max-width: 767px) { #skydrive-landing .skydrive-landing__card-info-1:has(> .tm-mb3d_work) { display: block; } #skydrive-landing .tm-mb3d_work { flex: none; aspect-ratio: 4 / 3; } } #skydrive-landing .tm-mb3d_reactor { width: 100%; aspect-ratio: 1293 / 930; } #skydrive-landing .skydrive-landing__card-info-2:has(.tm-mb3d_reactor) { grid-template-columns: 100%; justify-items: stretch; } #skydrive-landing .tm-mb3d.is-3d .tm-mb3d__fallback { display: none; } #skydrive-landing .tm-mb3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; filter: drop-shadow(0 25px 50px rgba(122, 44, 255, .35)); } #skydrive-landing .tm-mb3d__canvas.is-drag { cursor: grabbing; } #skydrive-landing .tm-mb3d__bar { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; } #skydrive-landing .tm-mb3d__btn { font: inherit; font-size: 16px; line-height: 1; color: #fff; background: rgba(165, 86, 255, .18); border: 1px solid rgba(206, 128, 255, .45); border-radius: 6px; min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } #skydrive-landing .tm-mb3d__btn:hover { background: rgba(165, 86, 255, .4); } #skydrive-landing .tm-mb3d__hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 14px; color: rgba(255, 255, 255, .55); pointer-events: none; transition: opacity .6s; white-space: nowrap; } #skydrive-landing .tm-mb3d__hint.is-hidden { opacity: 0; } @media (max-width: 767px) { #skydrive-landing .tm-mb3d__hint { display: none; } } /* Одиночный блок в карточке: размер от ширины карточки, по центру свободного места */ #skydrive-landing .skydrive-landing__card-info-1:has(.tm-solo) { display: flex; flex-direction: column; bottom: 0; } #skydrive-landing .tm-solo { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 0 24px; } #skydrive-landing .tm-solo__box { width: min(80%, 400px); } #skydrive-landing .tm-solo__img { display: block; width: 100%; height: auto; } /* Ховеры: только мышь. Карточки чуть поднимаются и светлеют; наклонённые скрины выпрямляются, детали и блоки приподнимаются. translate отдельно от transform появления */ @media (hover: hover) and (pointer: fine) { #skydrive-landing .skydrive-landing__card { pointer-events: auto; } #skydrive-landing .scroll-animation-trigger.skydrive-landing__card { transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1), translate .35s ease, box-shadow .35s ease; } #skydrive-landing .skydrive-landing__card > .skydrive-landing__card-image { transition: filter .35s ease; } #skydrive-landing .skydrive-landing__card:hover > .skydrive-landing__card-image { filter: brightness(1.14) saturate(1.12); } #skydrive-landing .skydrive-landing__section-gallery .skydrive-landing__card:not(.tm-wide):hover { translate: 0 -6px; } /* Наклонённые скрины GUI: на ховер выпрямляются и ярче светятся */ #skydrive-landing .tm-shot__img, #skydrive-landing .tm-shot__block { transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s ease, box-shadow .5s ease; } #skydrive-landing .tm-shot-card:hover .tm-shot_r .tm-shot__img { transform: rotateY(-14deg) rotateX(6deg) rotateZ(2deg) translateY(-6px); } #skydrive-landing .tm-shot-card:hover .tm-shot_l .tm-shot__img { transform: rotateY(14deg) rotateX(6deg) rotateZ(-2deg) translateY(-6px); } #skydrive-landing .tm-shot-card:hover .tm-shot__block { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 0 26px rgba(178, 60, 255, .75)); } /* Детали широких карточек и одиночный блок: приподнять, усилить свечение */ #skydrive-landing .tm-parts > [class*=col] { pointer-events: auto; } #skydrive-landing .tm-media-part, #skydrive-landing .tm-solo__img { transition: translate .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease; } #skydrive-landing .tm-parts > [class*=col]:hover .tm-media-part { translate: 0 -10px; filter: drop-shadow(0 0 22px rgba(190, 110, 255, .6)); } #skydrive-landing .tm-parts > [class*=col] .skydrive-landing__card-heading-1 { transition: color .25s, text-shadow .25s; } #skydrive-landing .tm-parts > [class*=col]:hover .skydrive-landing__card-heading-1 { color: #E7C9FF; text-shadow: 0 0 14px rgba(206, 128, 255, .6); } #skydrive-landing .skydrive-landing__card:hover .tm-solo__img { translate: 0 -10px; filter: drop-shadow(0 0 26px rgba(120, 230, 255, .45)); } /* Сравнение До/После: картинка ярче, рамка светится */ #skydrive-landing .tm-cmp figure img { transition: transform .3s, box-shadow .3s, border-color .3s; } #skydrive-landing .tm-cmp figure:hover img { border-color: #E2C2FF; box-shadow: 0 0 34px rgba(190, 90, 255, .6); } /* Статьи: шапка с картинкой медленно приближается */ #skydrive-landing .skydrive-landing__article > .skydrive-landing__card > img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter .5s; } #skydrive-landing .skydrive-landing__article:hover > .skydrive-landing__card > img { transform: scale(1.05); filter: brightness(1.12); } /* Чипы глав в шапке */ #skydrive-landing .tm-chip { transition: background .2s, border-color .2s, color .2s, translate .2s, box-shadow .2s; } #skydrive-landing .tm-chip:hover { translate: 0 -2px; box-shadow: 0 0 16px rgba(206, 128, 255, .45); } } @media (prefers-reduced-motion: reduce) { #skydrive-landing .skydrive-landing__card, #skydrive-landing .tm-media-part, #skydrive-landing .tm-solo__img, #skydrive-landing .tm-chip { translate: none !important; } #skydrive-landing .tm-shot__img, #skydrive-landing .tm-shot__block, #skydrive-landing .skydrive-landing__article > .skydrive-landing__card > img { transition: none; } } /* HT держит will-change на каждой карточке и абзаце с появлением (200+ GPU-слоёв): каждый кадр 3D пересобирает их все. Анимация появления работает и без него, браузер сам поднимает слой на время перехода */ #skydrive-landing .scroll-animation-trigger, #skydrive-landing .skydrive-landing__section-heading { will-change: auto; } /* Пульсация фоновых эффектов секций: HT анимирует filter: brightness у картинок шириной 140vw, это перерисовка каждый кадр. opacity считает видеокарта без перерисовки, на тёмном фоне выглядит так же */ #skydrive-landing .skydrive-landing__section-effect { animation-name: tm-section-effect; } @keyframes tm-section-effect { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { #skydrive-landing .skydrive-landing__section-effect { animation: none; } } /* Постройка мультиблоков под раскрывашкой (js/tm-build.js) */ #skydrive-landing .tm-build { pointer-events: auto; } #skydrive-landing .tm-build__dd summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 14px; } #skydrive-landing .tm-build__dd summary::-webkit-details-marker { display: none; } #skydrive-landing .tm-build__q { font-size: 18px; color: rgba(255, 255, 255, .6); } #skydrive-landing .tm-build__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; font-size: 16px; color: #fff; background: rgba(165, 86, 255, .14); border: 1px solid rgba(206, 128, 255, .5); border-radius: 999px; transition: background .2s, box-shadow .2s; } #skydrive-landing .tm-build__btn i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; } #skydrive-landing .tm-build__dd summary:hover .tm-build__btn { background: rgba(165, 86, 255, .3); box-shadow: 0 0 16px rgba(206, 128, 255, .4); } #skydrive-landing .tm-build__dd summary:focus-visible { outline: none; } #skydrive-landing .tm-build__dd summary:focus-visible .tm-build__btn { outline: 2px solid #CE80FF; outline-offset: 3px; } #skydrive-landing .tm-build__dd[open] .tm-build__btn i { transform: translateY(2px) rotate(-135deg); } #skydrive-landing .tm-build__body { display: flex; justify-content: center; margin-top: 22px; animation: tm-build-in .35s ease-out; } #skydrive-landing .tm-build__body video { width: 100%; max-width: 480px; aspect-ratio: 1; } @keyframes tm-build-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #skydrive-landing .tm-build__body { animation: none; } } /* Цвет TM: пятно курсора как на TM осень */ .skydrive-cursor__blur { width: 170px; height: 170px; filter: blur(55px); background: rgb(165 86 255 / .1) !important; transition: opacity .3s; } .skydrive-cursor__ring { width: 30px; height: 30px; background: transparent; border-color: rgba(255, 255, 255, .22); transition: transform .2s ease, opacity .2s; } /* Над скринами, видео и 3D пятно гаснет, над 3D гаснет и кольцо: не мешают смотреть тёмные картинки */ body:has(.tm-mb3d:hover, .tm-shot-card:hover, video:hover, .tm-media-part:hover) .skydrive-cursor__blur { opacity: 0; } body:has(.tm-mb3d__canvas:hover) .skydrive-cursor__ring { opacity: 0; } /* Заголовки секций текстом (до готовых SVG) */ #skydrive-landing .tm-heading { font-family: "Furore", sans-serif; font-size: var(--size-64); line-height: 1.1; text-transform: uppercase; color: #fff; } #skydrive-landing .tm-heading span { font-family: inherit; background: linear-gradient(to bottom, #fff, #b7a3d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Фиолетовый стиль заголовка карточки */ #skydrive-landing .skydrive-landing__card-heading-1._style-violet { --text-color: #ecc8ff; } /* Свечение заголовков карточек как в Figma: drop shadow 0 0 45 цветом карточки (CSS ~22px) + узкий слой у букв */ #skydrive-landing .tm-glow { --glow: 206, 128, 255; text-shadow: none; filter: drop-shadow(0 0 4px rgba(var(--glow), .6)) drop-shadow(0 0 16px rgba(var(--glow), .9)) drop-shadow(0 0 34px rgba(var(--glow), .55)); } #skydrive-landing .tm-glow._style-gold { --glow: 255, 176, 80; } #skydrive-landing .tm-glow._style-skyblue { --glow: 95, 215, 255; } #skydrive-landing .tm-glow._style-green { --glow: 120, 230, 120; } /* Плашка заголовка статьи: ширина по тексту (иначе считается до загрузки Furore и текст вылезает) */ #skydrive-landing .skydrive-landing__card-info-2__content { width: max-content; max-width: min(85vw, 860px); } #skydrive-landing .skydrive-landing__card-heading-1 { max-width: 100%; overflow-wrap: break-word; } /* ---------- Пометки для работы (убрать перед публикацией) ---------- */ #skydrive-landing .tm-todo { outline: 2px dashed rgba(255, 170, 40, .7); outline-offset: -2px; } #skydrive-landing .tm-todo::after, #skydrive-landing .tm-todo-inline::after { content: attr(data-todo); position: absolute; right: 8px; bottom: 8px; z-index: 5; font: 12px/1.3 sans-serif; color: #000; background: #ffaa28; padding: 2px 6px; border-radius: 3px; max-width: 80%; } #skydrive-landing .tm-todo-inline { position: relative; padding-right: 120px; } #skydrive-landing .tm-todo-inline::after { top: 0; bottom: auto; } #skydrive-landing .tm-todo-media { display: grid; place-items: center; margin: var(--g-25) auto 0; width: 70%; aspect-ratio: 4 / 3; border: 2px dashed rgba(255, 255, 255, .25); border-radius: 8px; font: 14px sans-serif; color: rgba(255, 255, 255, .45); } #skydrive-landing .tm-todo-media_wide { width: 70%; aspect-ratio: 16 / 9; } #skydrive-landing .tm-todo-media_part { width: 100%; aspect-ratio: 1; margin-top: 0; } #skydrive-landing .tm-todo-media_build { width: 100%; max-width: 480px; margin-top: 0; aspect-ratio: 1; } html.tm-clean #skydrive-landing .tm-todo { outline: none; } html.tm-clean #skydrive-landing .tm-todo::after, html.tm-clean #skydrive-landing .tm-todo-inline::after { display: none; } /* Детали широких карточек: отражение и тень запечены в картинку (_cards/parts), здесь только мягкое свечение */ #skydrive-landing .tm-media-part { filter: drop-shadow(0 0 14px rgba(165, 86, 255, .28)); } #skydrive-landing .tm-parts > [class*=col] { margin-bottom: 24px; } #skydrive-landing .tm-parts > [class*=col] { overflow: visible; } #skydrive-landing .tm-part-box { position: relative; } /* Карточка из деталей: высота по содержимому, фон растягивается под неё */ #skydrive-landing .tm-farm-cmp > .skydrive-landing__card-image, #skydrive-landing .tm-parts-card > .skydrive-landing__card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } #skydrive-landing .tm-farm-cmp > .skydrive-landing__card-info-1, #skydrive-landing .tm-parts-card > .skydrive-landing__card-info-1 { position: relative; padding-top: 56px !important; padding-bottom: 40px !important; } #skydrive-landing .tm-parts-card .tm-parts > [class*=col] { margin-bottom: 0; } /* Чёрная модель на тёмном фоне: мягкое свечение по силуэту (видео с альфой) */ #skydrive-landing .tm-media-wide { filter: drop-shadow(0 0 14px rgba(178, 60, 255, .55)) drop-shadow(0 0 40px rgba(178, 60, 255, .25)); } #skydrive-landing .tm-part-box > img { display: block; } /* Первый элемент галереи (статья, подзаголовок) без верхнего отступа, иначе чёрная полоса */ #skydrive-landing .skydrive-landing__section-gallery > .row > :first-child { margin-top: 0 !important; } /* Телефон: шапка статьи выше, плашка мельче */ @media (max-width: 767px) { #skydrive-landing .tm-wide > .skydrive-landing__card-image { position: absolute; inset: 0; height: 100%; object-fit: cover; } #skydrive-landing .tm-wide > .skydrive-landing__card-info-1 { position: relative; padding: 32px 20px !important; } #skydrive-landing .tm-parts > [class*=col] { flex: 0 0 100%; max-width: 100%; margin-top: 20px; } #skydrive-landing .tm-parts .tm-todo-media_part { width: 45%; } #skydrive-landing .skydrive-landing__article > .skydrive-landing__card > img { height: 150px; width: 100%; object-fit: cover; } #skydrive-landing .skydrive-landing__article .skydrive-landing__card-info-2 { padding: 12px !important; } #skydrive-landing .skydrive-landing__article .skydrive-landing__card-info-2__content { max-width: calc(100vw - 80px); } #skydrive-landing .skydrive-landing__article .skydrive-landing__card-heading-1 { font-size: var(--size-20) !important; padding: 12px !important; } } /* Уменьшить движение: системная настройка */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #skydrive-landing *, #skydrive-landing *::before, #skydrive-landing *::after { animation: none !important; transition: none !important; } #skydrive-landing .scroll-animation-trigger { opacity: 1; transform: none; } }