/* Страховочно скрываем старое текстовое описание, если оно осталось в кэше/старой разметке. */ #dkx #dkxLineTabs .dkx__line-description { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Общая сетка блока LUXE / PREMIUM. */ #dkx #dkxLineTabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(18px, 2.6vw, 44px) !important; align-items: stretch !important; overflow: visible !important; } /* Главное исправление: заголовок и изображение теперь находятся в разных grid-зонах. */ #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; height: clamp(360px, 27vw, 486px) !important; min-height: 0 !important; padding: clamp(24px, 2.4vw, 42px) clamp(24px, 2.8vw, 48px) clamp(20px, 2.2vw, 34px) !important; box-sizing: border-box !important; isolation: isolate !important; overflow: hidden !important; color: #1a1818 !important; border-radius: clamp(28px, 2.5vw, 44px) !important; border: 2px solid rgba(153,0,17,.34) !important; background: radial-gradient(circle at 84% 10%, rgba(153,0,17,.13), transparent 34%), radial-gradient(circle at 12% 90%, rgba(252,246,245,.92), transparent 42%), linear-gradient(145deg, #FCF6F5 0%, #fffaf9 48%, #eee5e3 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(26,24,24,.08), 0 11px 0 rgba(26,24,24,.18), 0 28px 58px rgba(26,24,24,.24), 0 0 0 1px rgba(252,246,245,.55) inset !important; transform: translate3d(0,0,0) scale(1) !important; transform-style: preserve-3d !important; perspective: 1100px !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .24s ease, filter .24s ease !important; animation: dkxLineCardBreathV48 5.4s ease-in-out infinite !important; will-change: transform, box-shadow !important; } #dkx #dkxLineTabs .dkx__choice--line::before, #dkx #dkxLineTabs .dkx__line-card::before { content: "" !important; position: absolute !important; top: -40% !important; bottom: -40% !important; left: -42% !important; width: 32% !important; z-index: 2 !important; display: block !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent) !important; transform: translateX(-120%) rotate(18deg) !important; opacity: 0 !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__choice--line::after, #dkx #dkxLineTabs .dkx__line-card::after { content: "" !important; position: absolute !important; left: 18px !important; right: 18px !important; bottom: 7px !important; z-index: -1 !important; display: block !important; height: 14px !important; border-radius: 0 0 30px 30px !important; background: rgba(153,0,17,.24) !important; filter: blur(11px) !important; opacity: .82 !important; pointer-events: none !important; } /* Заголовок: всегда отдельная верхняя зона, без absolute-позиционирования. */ #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; grid-column: 1 !important; grid-row: 1 !important; z-index: 4 !important; display: block !important; align-self: start !important; justify-self: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 0 clamp(14px, 1.8vw, 24px) !important; color: #1a1818 !important; font-family: TildaSans, Arial, sans-serif !important; font-size: clamp(42px, 4.45vw, 82px) !important; line-height: .88 !important; letter-spacing:0 !important; font-weight: 1000 !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: left !important; text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 12px 26px rgba(26,24,24,.14) !important; transform: translateZ(34px) !important; transition: color .24s ease, transform .28s cubic-bezier(.2,.8,.2,1), text-shadow .24s ease !important; pointer-events: none !important; } /* Изображение: отдельная нижняя зона. Оно физически не может залезть на заголовок. */ #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; inset: auto !important; grid-column: 1 !important; grid-row: 2 !important; z-index: 3 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: none !important; opacity: 1 !important; transform: translateZ(26px) scale(1) !important; transform-origin: center bottom !important; transition: transform .30s cubic-bezier(.2,.8,.2,1), filter .26s ease !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-media img, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media img, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: right bottom !important; filter: drop-shadow(0 24px 28px rgba(26,24,24,.27)) drop-shadow(0 8px 0 rgba(153,0,17,.10)) !important; transform: translate3d(0,0,0) !important; transition: transform .30s cubic-bezier(.2,.8,.2,1), filter .26s ease !important; } #dkx #dkxLineTabs .dkx__choice--line:hover, #dkx #dkxLineTabs .dkx__choice--line:focus-visible, #dkx #dkxLineTabs .dkx__line-card:hover, #dkx #dkxLineTabs .dkx__line-card:focus-visible { border-color: rgba(153,0,17,.76) !important; transform: translate3d(0,-9px,0) rotateX(2.2deg) rotateY(-2.2deg) scale(1.01) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.97), inset 0 -1px 0 rgba(26,24,24,.08), 0 15px 0 rgba(26,24,24,.20), 0 38px 76px rgba(26,24,24,.28), 0 0 38px rgba(153,0,17,.24), 0 0 0 1px rgba(252,246,245,.64) inset !important; filter: saturate(1.05) contrast(1.02) !important; } #dkx #dkxLineTabs .dkx__choice--line:hover::before, #dkx #dkxLineTabs .dkx__choice--line:focus-visible::before, #dkx #dkxLineTabs .dkx__line-card:hover::before, #dkx #dkxLineTabs .dkx__line-card:focus-visible::before { animation: dkxLineShineV48 1.05s ease-out 1 !important; } #dkx #dkxLineTabs .dkx__choice--line:hover .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line:focus-visible .dkx__line-title, #dkx #dkxLineTabs .dkx__line-card:hover .dkx__line-title, #dkx #dkxLineTabs .dkx__line-card:focus-visible .dkx__line-title { color: #990011 !important; transform: translateZ(48px) translateY(-2px) !important; text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 22px rgba(153,0,17,.22) !important; } #dkx #dkxLineTabs .dkx__choice--line:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line:focus-visible .dkx__line-media, #dkx #dkxLineTabs .dkx__line-card:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__line-card:focus-visible .dkx__line-media { transform: translateZ(48px) translateY(-4px) scale(1.035) !important; } #dkx #dkxLineTabs .dkx__choice--line.active, #dkx #dkxLineTabs .dkx__line-card.active { border-color: #990011 !important; background: radial-gradient(circle at 80% 8%, rgba(153,0,17,.17), transparent 35%), linear-gradient(145deg, #FCF6F5 0%, #fffaf9 48%, #f1e8e6 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(26,24,24,.08), 0 13px 0 rgba(153,0,17,.30), 0 34px 76px rgba(26,24,24,.26), 0 0 0 2px rgba(153,0,17,.24), 0 0 46px rgba(153,0,17,.34) !important; } #dkx #dkxLineTabs .dkx__choice--line.active .dkx__line-title, #dkx #dkxLineTabs .dkx__line-card.active .dkx__line-title { color: #990011 !important; } #dkx #dkxLineTabs .dkx__choice--line:active, #dkx #dkxLineTabs .dkx__line-card:active { transform: translate3d(0,3px,0) scale(.992) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 5px 0 rgba(26,24,24,.18), 0 16px 30px rgba(26,24,24,.22) !important; } /* Средний desktop / узкое окно браузера: уменьшаем высоту и шрифт, но зоны остаются раздельными. */ @media (min-width: 1024px) and (max-width: 1280px) { #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card { height: clamp(320px, 31vw, 390px) !important; padding: clamp(20px, 2.1vw, 28px) clamp(20px, 2.3vw, 34px) clamp(18px, 2vw, 28px) !important; } #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { font-size: clamp(36px, 4.1vw, 58px) !important; padding-bottom: clamp(12px, 1.4vw, 18px) !important; } } /* Планшеты: одна колонка, карточка шире, изображение под заголовком. */ @media (max-width: 920px) { #dkx #dkxLineTabs { grid-template-columns: 1fr !important; gap: clamp(16px, 4vw, 24px) !important; } #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card { height: clamp(280px, 58vw, 420px) !important; padding: clamp(20px, 5vw, 34px) clamp(18px, 5vw, 36px) clamp(16px, 4.4vw, 28px) !important; border-radius: clamp(24px, 6vw, 36px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 9px 0 rgba(26,24,24,.17), 0 24px 48px rgba(26,24,24,.22) !important; } #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { font-size: clamp(42px, 11vw, 76px) !important; line-height: .86 !important; padding-bottom: clamp(14px, 4vw, 24px) !important; } #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { justify-content: flex-end !important; align-items: flex-end !important; } } /* Обычные телефоны. */ @media (max-width: 560px) { #dkx #dkx-config > .dkx__wrap { width: min(100% - 24px, 520px) !important; } #dkx #dkxLineTabs { gap: 16px !important; } #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card { height: clamp(218px, 64vw, 318px) !important; padding: 18px 16px 14px !important; border-radius: 24px !important; } #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { font-size: clamp(34px, 12.4vw, 56px) !important; padding-bottom: 12px !important; letter-spacing:0 !important; } #dkx #dkxLineTabs .dkx__choice--line:hover, #dkx #dkxLineTabs .dkx__choice--line:focus-visible, #dkx #dkxLineTabs .dkx__line-card:hover, #dkx #dkxLineTabs .dkx__line-card:focus-visible { transform: translate3d(0,-5px,0) scale(1.006) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 11px 0 rgba(26,24,24,.18), 0 25px 48px rgba(26,24,24,.23), 0 0 28px rgba(153,0,17,.20) !important; } #dkx #dkxLineTabs .dkx__choice--line:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line:focus-visible .dkx__line-media, #dkx #dkxLineTabs .dkx__line-card:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__line-card:focus-visible .dkx__line-media { transform: translateZ(34px) translateY(-2px) scale(1.02) !important; } } /* Очень узкие телефоны: ещё меньше заголовок, но структура не меняется. */ @media (max-width: 370px) { #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card { height: clamp(202px, 67vw, 260px) !important; padding: 16px 13px 12px !important; } #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { font-size: clamp(30px, 11.8vw, 44px) !important; padding-bottom: 10px !important; } } @media (prefers-reduced-motion: reduce) { #dkx #dkxLineTabs .dkx__choice--line, #dkx #dkxLineTabs .dkx__line-card, #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__line-media img, #dkx #dkxLineTabs .dkx__line-title, #dkx #dkxLineTabs .dkx__choice--line > strong { animation: none !important; transition-duration: .01ms !important; } } @keyframes dkxLineCardBreathV48 { 0%, 100% { filter: saturate(1) contrast(1); } 50% { filter: saturate(1.035) contrast(1.01); } } @keyframes dkxLineShineV48 { 0% { transform: translateX(-140%) rotate(18deg); opacity: 0; } 22% { opacity: .82; } 100% { transform: translateX(530%) rotate(18deg); opacity: 0; } }