#dkx #dkx-config { padding-top: 86px !important; } #dkx #dkx-config > .dkx__wrap { width: min(1480px, calc(100vw - 88px)) !important; max-width: none !important; } #dkx #dkx-config .dkx__section-head { max-width: none !important; margin: 0 auto 34px !important; text-align: center !important; } #dkx #dkx-config .dkx__section-title { margin: 0 !important; color: #990011 !important; font-size: clamp(50px, 4.8vw, 78px) !important; line-height: .88 !important; letter-spacing:0 !important; font-weight: 950 !important; text-transform: uppercase !important; } #dkx #dkx-config .dkx__section-title span { color: #990011 !important; text-shadow: 0 0 34px rgba(153,0,17,.28) !important; } #dkx #dkx-config .dkx__section-text, #dkx #dkx-config .dkx__topline { display: none !important; } #dkx #dkx-config .dkx__config-shell, #dkx #dkx-config .dkx__panel { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #dkx #dkxLineStep { padding: 0 0 68px !important; border: 0 !important; background: transparent !important; overflow: visible !important; } #dkx #dkxLineStep .dkx__step-head { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 28px !important; margin: 0 0 40px !important; } #dkx #dkxLineStep .dkx__step-title { margin: 0 !important; color: #1a1818 !important; font-size: clamp(44px, 4.2vw, 68px) !important; line-height: .92 !important; letter-spacing:0 !important; font-weight: 950 !important; text-align: left !important; text-shadow: none !important; } #dkx #dkxLineStep .dkx__step-num { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 66px !important; padding: 0 34px !important; border-radius: 999px !important; border: 2px solid rgba(153,0,17,.84) !important; background: rgba(252,246,245,.68) !important; color: #990011 !important; font-size: clamp(16px, 1.25vw, 22px) !important; font-weight: 950 !important; letter-spacing: .045em !important; text-transform: uppercase !important; white-space: nowrap !important; } #dkx #dkxLineTabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(30px, 2.6vw, 44px) !important; width: 100% !important; padding: 0 0 68px !important; border-bottom: 1px solid rgba(153,0,17,.24) !important; overflow: visible !important; } #dkx #dkxLineTabs .dkx__line-card { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: clamp(380px, 27vw, 465px) !important; min-height: 380px !important; padding: 0 !important; overflow: hidden !important; border-radius: clamp(30px, 2.2vw, 42px) !important; border: 3px solid rgba(168,164,163,.96) !important; cursor: pointer !important; isolation: isolate !important; background: radial-gradient(circle at 86% 15%, rgba(26,24,24,.052) 0 2px, transparent 3px), radial-gradient(circle at 92% 21%, rgba(26,24,24,.04) 0 2px, transparent 3px), linear-gradient(180deg, #FCF6F5 0%, #FCF6F5 54%, #FCF6F5 100%) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 22px 52px rgba(26,24,24,.30) !important; transform: translateY(0) scale(1) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; animation: dkxLineHintV34 3.4s ease-in-out infinite !important; } #dkx #dkxLineTabs .dkx__line-card::before, #dkx #dkxLineTabs .dkx__line-card::after { content: none !important; display: none !important; } #dkx #dkxLineTabs .dkx__check { display: none !important; } #dkx #dkxLineTabs .dkx__line-media { position: absolute !important; left: 7% !important; top: 12% !important; width: 31% !important; height: 33% !important; inset: auto !important; z-index: 2 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; background: none !important; transform: translate3d(0,0,0) scale(1) !important; transition: transform .24s ease, filter .24s ease !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center top !important; filter: drop-shadow(0 22px 30px rgba(26,24,24,.25)) !important; } #dkx #dkxLineTabs .dkx__line-title { position: absolute !important; left: 7% !important; bottom: 14% !important; z-index: 3 !important; display: block !important; margin: 0 !important; padding: 0 !important; max-width: 40% !important; color: #1a1818 !important; font-size: clamp(48px, 4.45vw, 76px) !important; line-height: .84 !important; letter-spacing:0 !important; font-weight: 1000 !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-description { position: absolute !important; left: calc(52% + 6%) !important; right: 7% !important; top: 32% !important; z-index: 3 !important; display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(26,24,24,.90) !important; font-size: clamp(20px, 1.38vw, 25px) !important; line-height: 1.44 !important; font-weight: 520 !important; letter-spacing:0 !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-divider { position: absolute !important; left: 52% !important; top: 23% !important; width: 1px !important; height: 43% !important; z-index: 4 !important; background: linear-gradient(180deg, rgba(153,0,17,.18), rgba(153,0,17,.82), rgba(153,0,17,.18)) !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-divider i { position: absolute !important; left: -6px !important; top: calc(52% - 6px) !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; background: #990011 !important; box-shadow: 0 0 0 7px rgba(153,0,17,.13), 0 0 20px rgba(153,0,17,.22) !important; } #dkx #dkxLineTabs .dkx__line-card.active { border-color: #990011 !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.32), 0 0 30px rgba(153,0,17,.44), 0 0 70px rgba(153,0,17,.26), 0 25px 62px rgba(26,24,24,.36) !important; animation: dkxLineActiveV34 2.4s ease-in-out infinite !important; } #dkx #dkxLineTabs .dkx__line-card:hover, #dkx #dkxLineTabs .dkx__line-card:focus-visible { transform: translateY(-5px) scale(1.008) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 28px 66px rgba(26,24,24,.35), 0 0 0 1px rgba(252,246,245,.20) !important; } #dkx #dkxLineTabs .dkx__line-card:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__line-card.active .dkx__line-media { transform: translate3d(0,-4px,0) scale(1.045) !important; } #dkx #dkxLineTabs .dkx__line-card:active { transform: translateY(-1px) scale(.992) !important; transition-duration: .08s !important; } @keyframes dkxLineHintV34 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.002); } } @keyframes dkxLineActiveV34 { 0%,100% { transform: translateY(0) scale(1); box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.28), 0 0 26px rgba(153,0,17,.38), 0 0 60px rgba(153,0,17,.22), 0 25px 62px rgba(26,24,24,.36); } 50% { transform: translateY(-3px) scale(1.006); box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.40), 0 0 38px rgba(153,0,17,.52), 0 0 82px rgba(153,0,17,.31), 0 28px 68px rgba(26,24,24,.38); } } @media (max-width: 1240px) { #dkx #dkx-config > .dkx__wrap { width: min(1180px, calc(100vw - 54px)) !important; } #dkx #dkxLineTabs .dkx__line-card { height: 330px !important; min-height: 330px !important; } #dkx #dkxLineTabs .dkx__line-title { font-size: clamp(42px, 4.2vw, 62px) !important; } #dkx #dkxLineTabs .dkx__line-description { font-size: clamp(18px, 1.25vw, 22px) !important; } #dkx #dkxLineTabs .dkx__line-media { width: 30% !important; height: 31% !important; } } @media (max-width: 760px) { #dkx #dkx-config > .dkx__wrap { width: min(100%, calc(100vw - 28px)) !important; } #dkx #dkxLineStep .dkx__step-head { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 18px !important; } #dkx #dkxLineStep .dkx__step-title { font-size: 30px !important; } #dkx #dkxLineStep .dkx__step-num { min-height: 44px !important; padding: 0 18px !important; font-size: 13px !important; justify-self: start !important; } #dkx #dkxLineTabs { grid-template-columns: 1fr !important; gap: 16px !important; padding-bottom: 38px !important; } #dkx #dkxLineTabs .dkx__line-card { height: 214px !important; min-height: 214px !important; border-radius: 24px !important; border-width: 2px !important; } #dkx #dkxLineTabs .dkx__line-media { left: 6% !important; top: 11% !important; width: 34% !important; height: 35% !important; } #dkx #dkxLineTabs .dkx__line-divider { left: 48% !important; top: 25% !important; height: 45% !important; } #dkx #dkxLineTabs .dkx__line-title { left: 6% !important; bottom: 13% !important; font-size: 30px !important; max-width: 40% !important; } #dkx #dkxLineTabs .dkx__line-description { left: calc(48% + 22px) !important; right: 16px !important; top: 27% !important; font-size: 14px !important; line-height: 1.32 !important; } } @media (max-width: 390px) { #dkx #dkxLineTabs .dkx__line-card { height: 194px !important; min-height: 194px !important; } #dkx #dkxLineTabs .dkx__line-title { font-size: 27px !important; } #dkx #dkxLineTabs .dkx__line-description { font-size: 13px !important; line-height: 1.30 !important; } } /* Жестко убираем старую форму, которая ломала десктоп */ #dkx #dkx-config .dkx__selection-form, #dkx #dkx-config .dkx__selection-form-head, #dkx #dkx-config .dkx__selection-back { display: none !important; } /* Дополнительное усиление desktop-геометрии */ @media (min-width: 1024px) { #dkx #dkx-config > .dkx__wrap { width: min(1540px, calc(100vw - 96px)) !important; max-width: none !important; } #dkx #dkxLineTabs { gap: 48px !important; } #dkx #dkxLineTabs .dkx__line-card { height: clamp(400px, 26vw, 470px) !important; min-height: 400px !important; } }