.dkx, .dkx *, .dkx button, .dkx input { font-family:TildaSans, Arial, sans-serif; } .dkx { --dkx-red: #990011; --dkx-red-2: #990011; --dkx-red-3: #1a1818; --dkx-panel: #FCF6F5; --dkx-panel-2: #FCF6F5; --dkx-white: #FCF6F5; --dkx-muted: rgba(26,24,24,.66); } /* удалено по скринам */ .dkx__kicker, .dkx__hero-steps { display: none !important; } /* header */ .dkx__header { background: rgba(6,6,8,.92) !important; border-bottom: 1px solid rgba(252,246,245,.08) !important; backdrop-filter: blur(14px) !important; } .dkx__header-inner { min-height: 72px !important; } .dkx__nav a, .dkx__phone, .dkx__mobile-menu .dkx__nav a, .dkx__phone--mobile { color: #FCF6F5 !important; font-size: 14px !important; font-weight: 750 !important; letter-spacing: .01em !important; text-shadow: none !important; } .dkx__nav a:hover, .dkx__phone:hover { color: #FCF6F5 !important; opacity: .78 !important; text-shadow: none !important; } .dkx__burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(252,246,245,.16); border-radius: 14px; background: rgba(252,246,245,.06); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; } .dkx__burger span { display: block; width: 24px; height: 2px; border-radius: 999px; background: #FCF6F5; transition: transform .24s ease, opacity .24s ease; } .dkx__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dkx__burger.active span:nth-child(2) { opacity: 0; } .dkx__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .dkx__mobile-menu { position: fixed; inset: 0; z-index: 280; display: none; background: rgba(26,24,24,.72); backdrop-filter: blur(10px); } .dkx__mobile-menu.open { display: block; } .dkx__mobile-menu-inner { position: absolute; top: 0; right: 0; width: min(350px, 88vw); height: 100%; padding: 24px 20px 28px; background: linear-gradient(180deg,#1a1818,#1a1818); box-shadow: -24px 0 64px rgba(26,24,24,.55); display: flex; flex-direction: column; gap: 20px; } .dkx__mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(252,246,245,.08); color: #FCF6F5; font-size: 30px; line-height: 1; cursor: pointer; } .dkx__mobile-menu-title { color: #FCF6F5; font-size: 18px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .dkx__nav--mobile { display: grid !important; gap: 16px !important; } .dkx__nav--mobile a { font-size: 18px !important; } .dkx__phone--mobile { display: inline-flex !important; margin-top: auto; font-size: 17px !important; } /* hero/video */ .dkx__title span, .dkx__section-title span, .dkx__price, .dkx__step-num { color: var(--dkx-red) !important; text-shadow: 0 0 22px rgba(153,0,17,.18) !important; } .dkx__video-card { opacity: 1 !important; animation: none !important; background: linear-gradient(150deg, rgba(153,0,17,.24), rgba(21,22,28,.96) 24%, rgba(6,7,9,.98)) !important; box-shadow: 0 12px 0 rgba(95,6,14,.58), 0 0 0 1px rgba(153,0,17,.20), 0 32px 80px rgba(26,24,24,.64) !important; } .dkx__video { position: relative; background: #1a1818 !important; } .dkx__video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,24,24,.10), rgba(26,24,24,.62)), url("https://xn--3-dtbfrajc3at.xn--p1ai/logo-3dkovriki.png") center/58% auto no-repeat, radial-gradient(circle at 50% 38%, rgba(153,0,17,.24), transparent 34%), #1a1818; opacity: 1; transition: opacity .24s ease; pointer-events: none; } .dkx__video.is-started::before { opacity: 0; } .dkx__video iframe { position: relative; z-index: 2; opacity: 0; transition: opacity .24s ease; } .dkx__video.is-started iframe { opacity: 1; } .dkx__video-cover { z-index: 3 !important; background: linear-gradient(180deg, rgba(26,24,24,.10), rgba(26,24,24,.72)) !important; } .dkx__video-cover.hidden { display: none !important; } .dkx__video-btn.is-active { color: #FCF6F5 !important; border-color: rgba(252,246,245,.16) !important; background: linear-gradient(135deg,#990011,#990011 58%,#1a1818) !important; box-shadow: 0 8px 0 #1a1818, 0 24px 48px rgba(26,24,24,.45) !important; } /* section text */ #dkx-config .dkx__section-text { max-width: 680px; margin-inline: auto !important; color: rgba(26,24,24,.66) !important; font-size: 16px !important; line-height: 1.5 !important; } /* separate form */ .dkx__selection-form { display: none; margin-top: 24px; padding: 26px; border-radius: 32px; background: radial-gradient(circle at 92% 0%, rgba(153,0,17,.12), transparent 32%), linear-gradient(180deg, rgba(252,246,245,.98), rgba(236,227,216,.96)), #FCF6F5; border: 1px solid rgba(153,0,17,.20); box-shadow: 0 14px 0 rgba(153,0,17,.16), 0 30px 70px rgba(26,24,24,.18); } .dkx-has-line .dkx__selection-form { display: block; } .dkx__selection-form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(153,0,17,.14); } .dkx__selection-form-title { margin: 0 0 8px; color: #1a1818; font-family:TildaSans, Arial, sans-serif; font-size: clamp(24px, 3vw, 36px); line-height: 1; letter-spacing:0; font-weight: 900; text-transform: uppercase; } .dkx__selection-form-title span { color: var(--dkx-red); } .dkx__selection-form-text { margin: 0; color: rgba(26,24,24,.62); font-size: 14px; line-height: 1.45; font-weight: 650; } .dkx__selection-back { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(153,0,17,.18); background: rgba(252,246,245,.78); color: #1a1818; cursor: pointer; font-weight: 800; white-space: nowrap; } /* line cards */ .dkx__choice--line { display: grid !important; grid-template-columns: 1fr 160px !important; gap: 18px !important; align-items: center !important; min-height: 150px !important; padding: 24px !important; border: 1px solid rgba(153,0,17,.22) !important; background: linear-gradient(180deg, #FCF6F5 0%, #FCF6F5 70%, #FCF6F5 100%) !important; color: #1a1818 !important; border-radius: 26px !important; box-shadow: 0 12px 0 #a8a4a3, 0 28px 60px rgba(26,24,24,.28), inset 0 1px 0 rgba(252,246,245,.95), inset 0 -10px 18px rgba(115,124,140,.16) !important; } .dkx__choice--line::before, .dkx__choice--line::after { display: none !important; } .dkx__choice--line:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 0 #a8a4a3, 0 34px 70px rgba(26,24,24,.34), inset 0 1px 0 rgba(252,246,245,.95) !important; } .dkx__choice--line.active { border-color: rgba(153,0,17,.30) !important; background: linear-gradient(180deg,#FCF6F5,#FCF6F5 45%,#FCF6F5 100%) !important; box-shadow: 0 14px 0 #1a1818, 0 0 0 3px rgba(153,0,17,.14), 0 32px 66px rgba(26,24,24,.34), inset 0 1px 0 rgba(252,246,245,.95) !important; color: #1a1818 !important; text-shadow: none !important; } .dkx__choice--line strong { color: #1a1818 !important; font-size: 26px !important; text-shadow: none !important; } .dkx__choice--line > span:not(.dkx__line-media):not(.dkx__check) { color: #a8a4a3 !important; font-size: 13px !important; line-height: 1.35 !important; text-shadow: none !important; } .dkx__line-media { position: relative !important; width: 150px !important; height: 108px !important; border-radius: 22px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; filter: drop-shadow(0 14px 18px rgba(26,24,24,.20)) !important; } /* round samples + 3D cards, no red border */ .dkx__materials { gap: 18px !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; } .dkx__material { position: relative !important; min-height: 286px !important; padding: 0 !important; border: 1px solid rgba(var(--dkx-card-rgb, 255,255,255), .45) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(24,25,28,.98) 0%, rgba(11,12,14,.98) 100%) !important; color: #FCF6F5 !important; box-shadow: 0 12px 30px rgba(26,24,24,.34), 0 0 0 1px rgba(var(--dkx-card-rgb, 255,255,255), .12), inset 0 1px 0 rgba(252,246,245,.06), inset 0 -10px 20px rgba(26,24,24,.38) !important; transform: none !important; overflow: hidden !important; animation: none !important; } .dkx__material::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(252,246,245,.04) 0%, rgba(252,246,245,0) 28%), linear-gradient(0deg, rgba(26,24,24,.78) 0%, rgba(26,24,24,.42) 18%, rgba(26,24,24,0) 44%) !important; z-index: 1 !important; pointer-events: none !important; } .dkx__material::after { content: "" !important; position: absolute !important; inset: 4px !important; border-radius: 20px !important; border: 1px solid rgba(var(--dkx-card-rgb, 255,255,255), .18) !important; z-index: 1 !important; pointer-events: none !important; } .dkx__material:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 34px rgba(26,24,24,.42), 0 0 0 1px rgba(var(--dkx-card-rgb, 255,255,255), .22), 0 0 18px rgba(var(--dkx-card-rgb, 255,255,255), .16), inset 0 1px 0 rgba(252,246,245,.08) !important; } .dkx__material.active { border-color: rgba(var(--dkx-card-rgb, 255,255,255), .92) !important; box-shadow: 0 0 0 1px rgba(var(--dkx-card-rgb, 255,255,255), .95), 0 0 22px rgba(var(--dkx-card-rgb, 255,255,255), .34), 0 16px 36px rgba(26,24,24,.46), inset 0 1px 0 rgba(252,246,245,.08) !important; animation: none !important; } .dkx__sample { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; aspect-ratio: auto !important; padding: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; overflow: hidden !important; transform: none !important; } .dkx__sample::before, .dkx__sample::after { display: none !important; } .dkx__sample img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border-radius: inherit !important; transform: none !important; } .dkx__material:hover .dkx__sample, .dkx__material:hover .dkx__sample img { transform: none !important; } .dkx__material-badge { position: absolute !important; left: 10px !important; right: 10px !important; bottom: 12px !important; z-index: 2 !important; display: grid !important; justify-items: center !important; gap: 4px !important; padding: 0 !important; } .dkx__material-name { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 76px !important; min-height: 30px !important; padding: 0 18px !important; border-radius: 999px !important; border: 1px solid rgba(252,246,245,.20) !important; background: rgba(26,24,24,.26) !important; color: #FCF6F5 !important; text-shadow: none !important; font-size: 22px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing:0 !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.08), 0 10px 18px rgba(26,24,24,.22) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .dkx__material-meta { color: rgba(252,246,245,.78) !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 600 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(26,24,24,.28) !important; } .dkx__check { top: 10px !important; right: 10px !important; background: var(--dkx-red) !important; color: #FCF6F5 !important; box-shadow: 0 10px 18px rgba(26,24,24,.30), 0 0 0 3px rgba(252,246,245,.08) !important; z-index: 3 !important; } /* protect choices */ .dkx__protect-choice { min-height: 132px !important; border: 1px solid rgba(153,0,17,.16) !important; border-radius: 28px !important; background: linear-gradient(180deg,#FCF6F5 0%,#FCF6F5 100%) !important; color: #1a1818 !important; box-shadow: 0 12px 0 #a8a4a3, 0 28px 56px rgba(26,24,24,.28), inset 0 1px 0 rgba(252,246,245,.96) !important; } .dkx__protect-choice::before { color: var(--dkx-red) !important; text-shadow: none !important; } .dkx__protect-choice::after { display: none !important; } .dkx__protect-choice strong { color: #1a1818 !important; text-shadow: none !important; } .dkx__protect-choice span { color: #a8a4a3 !important; } .dkx__protect-choice.active { background: linear-gradient(180deg,#FCF6F5 0%,#FCF6F5 45%,#FCF6F5 100%) !important; color: #1a1818 !important; border: none !important; box-shadow: 0 14px 0 #1a1818, 0 0 0 3px rgba(153,0,17,.14), 0 34px 70px rgba(26,24,24,.34), inset 0 1px 0 rgba(252,246,245,.96) !important; text-shadow: none !important; } .dkx__protect-choice.active::before { color: var(--dkx-red) !important; } .dkx__protect-choice.active span { color: #a8a4a3 !important; } /* footer */ .dkx__footer { padding: 64px 0 50px !important; background: linear-gradient(180deg,#FCF6F5,#FCF6F5) !important; border-top: 1px solid rgba(168,164,163,.34) !important; color: #1a1818 !important; } .dkx__footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; } .dkx__footer-title { margin: 0 0 16px; color: #1a1818; font-size: 15px; line-height: 1.2; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .dkx__footer-text, .dkx__footer-bottom, .dkx__footer-requisites { color: rgba(26,24,24,.68); font-size: 14px; line-height: 1.65; font-weight: 550; } .dkx__footer-links { display: grid; gap: 10px; } .dkx__footer-link { color: #1a1818 !important; text-decoration: none; font-size: 14px; font-weight: 700; opacity: .78; transition: opacity .2s ease; } .dkx__footer-link:hover { opacity: 1; } .dkx__footer-bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(168,164,163,.34); display: grid; gap: 6px; } @media (max-width: 980px) { .dkx__nav, .dkx__phone { display: none !important; } .dkx__burger { display: inline-flex !important; } .dkx__selection-form-head { display: grid; } .dkx__selection-back { width: fit-content; } .dkx__footer-grid { grid-template-columns: 1fr; gap: 28px; } .dkx__materials { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .dkx__sample { width: 100% !important; height: 100% !important; } .dkx__material { min-height: 242px !important; } } @media (max-width: 640px) { .dkx__choice--line { grid-template-columns: 1fr !important; gap: 12px !important; } .dkx__line-media { width: 100% !important; max-width: 160px !important; justify-self: center; } .dkx__selection-form { padding: 18px !important; border-radius: 26px !important; } .dkx__materials { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .dkx__material { min-height: 214px !important; padding: 0 !important; border-radius: 24px !important; overflow: hidden !important; } .dkx__sample { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; aspect-ratio: auto !important; padding: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; } .dkx__material-badge { position: absolute !important; left: 8px !important; right: 8px !important; bottom: 10px !important; margin-top: 0 !important; padding: 0 !important; } .dkx__material-name { min-width: 64px !important; min-height: 26px !important; padding: 0 14px !important; font-size: 16px !important; line-height: 1 !important; } .dkx__material-meta { font-size: 11px !important; line-height: 1.2 !important; } }