/* ========================================================= VOLTKIN HOME RACCOON MULTI-POSE SYSTEM V2 ========================================================= */ /* ========================================================= HOST CARDS ========================================================= */ .vk-home-hero, .vk-home-quick, .vk-home-feature{ overflow:visible !important; } /* cards stay above peek poses */ .vk-home-quick > img, .vk-home-feature > img{ position:relative; z-index:4 !important; } .vk-home-quick-copy, .vk-home-feature-copy{ z-index:8 !important; } /* ========================================================= RACCOON ACTOR ========================================================= */ .vk-raccoon-v2{ position:absolute; display:block; pointer-events:none; user-select:none; opacity:0; z-index:2; transform-origin:center bottom; transition: opacity .30s ease, transform .58s cubic-bezier(.18,.82,.22,1); filter: drop-shadow( 0 12px 18px rgba(0,0,0,.58) ); will-change: transform, opacity; } .vk-raccoon-v2 img{ display:block; width:100%; height:auto; pointer-events:none; user-select:none; } .vk-raccoon-v2.is-visible{ opacity:1; } /* ========================================================= LEFT TOP PEEK ========================================================= */ .vk-raccoon-v2.pose-peek-left{ width:112px; left:-28px; top:-46px; z-index:2; transform: translate3d( 55px, 37px, 0 ) rotate(5deg) scale(.92); } .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( 17px, 18px, 0 ) rotate(3deg) scale(1); } /* ========================================================= RIGHT TOP PEEK ========================================================= */ .vk-raccoon-v2.pose-peek-right{ width:112px; right:-28px; top:-46px; z-index:2; transform: translate3d( -55px, 37px, 0 ) rotate(-5deg) scale(.92); } .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( -17px, 18px, 0 ) rotate(-3deg) scale(1); } /* ========================================================= BOTTOM PEEK ========================================================= */ .vk-raccoon-v2.pose-bottom{ width:112px; bottom:-57px; z-index:2; transform: translate3d( 0, 62px, 0 ) scale(.94); } .vk-raccoon-v2.pose-bottom.corner-left{ left:8%; } .vk-raccoon-v2.pose-bottom.corner-right{ right:8%; } .vk-raccoon-v2.pose-bottom.is-visible{ transform: translate3d( 0, 13px, 0 ) scale(1); } /* ========================================================= HANGING ========================================================= */ .vk-raccoon-v2.pose-hanging{ width:118px; top:-26px; z-index:7; transform: translate3d( 0, -66px, 0 ) scale(.94); } .vk-raccoon-v2.pose-hanging.corner-left{ left:7%; } .vk-raccoon-v2.pose-hanging.corner-right{ right:7%; } .vk-raccoon-v2.pose-hanging.is-visible{ transform: translate3d( 0, 5px, 0 ) scale(1); } /* ========================================================= SITTING ON CORNER ========================================================= */ .vk-raccoon-v2.pose-sitting{ width:128px; top:-91px; z-index:7; transform: translate3d( 0, 26px, 0 ) scale(.90); opacity:0; } .vk-raccoon-v2.pose-sitting.corner-left{ left:-8px; } .vk-raccoon-v2.pose-sitting.corner-right{ right:-8px; } .vk-raccoon-v2.pose-sitting.is-visible{ opacity:1; transform: translate3d( 0, 0, 0 ) scale(1); } /* ========================================================= HERO - LARGER MASCOT ========================================================= */ .vk-home-hero .vk-raccoon-v2.pose-peek-left, .vk-home-hero .vk-raccoon-v2.pose-peek-right{ width:152px; top:-45px; } .vk-home-hero .vk-raccoon-v2.pose-bottom{ width:145px; bottom:-70px; } .vk-home-hero .vk-raccoon-v2.pose-hanging{ width:150px; } .vk-home-hero .vk-raccoon-v2.pose-sitting{ width:155px; top:-107px; } /* ========================================================= QUICK CARDS ========================================================= */ .vk-home-quick .vk-raccoon-v2.pose-peek-left, .vk-home-quick .vk-raccoon-v2.pose-peek-right{ width:98px; top:-42px; } .vk-home-quick .vk-raccoon-v2.pose-bottom{ width:96px; bottom:-51px; } /* No sitting/hanging on quick cards. JS will not select them there. */ /* ========================================================= FEATURE CARDS ========================================================= */ .vk-home-feature .vk-raccoon-v2.pose-peek-left, .vk-home-feature .vk-raccoon-v2.pose-peek-right{ width:112px; } .vk-home-feature .vk-raccoon-v2.pose-bottom{ width:108px; } .vk-home-feature .vk-raccoon-v2.pose-hanging{ width:116px; } .vk-home-feature .vk-raccoon-v2.pose-sitting{ width:125px; } /* ========================================================= SMALL IDLE MOVEMENT ========================================================= */ .vk-raccoon-v2.is-visible img{ animation: vkRaccoonAliveV2 3.1s ease-in-out infinite; } .vk-raccoon-v2.pose-hanging.is-visible img{ animation: vkRaccoonHangV2 3.8s ease-in-out infinite; } @keyframes vkRaccoonAliveV2{ 0%{ transform: translateY(0) rotate(0deg); } 35%{ transform: translateY(-2px) rotate(-.7deg); } 65%{ transform: translateY(-1px) rotate(.8deg); } 100%{ transform: translateY(0) rotate(0deg); } } @keyframes vkRaccoonHangV2{ 0%{ transform: rotate(-1.6deg); } 50%{ transform: rotate(1.6deg); } 100%{ transform: rotate(-1.6deg); } } /* ========================================================= GLOBAL SPEECH PORTAL IMPORTANT: This is attached to BODY, not to cards. It can never disappear underneath another card. ========================================================= */ .vk-raccoon-speech-portal{ position:fixed; left:0; top:0; width:300px; min-height:92px; z-index:99990; pointer-events:none; display:flex; align-items:center; justify-content:center; padding: 24px 38px 23px 43px; text-align:center; opacity:0; visibility:hidden; transform: translate3d( 0, 9px, 0 ) scale(.86); transition: opacity .30s ease, transform .42s cubic-bezier(.18,.88,.22,1.16), visibility .30s; filter: drop-shadow( 0 12px 24px rgba(0,0,0,.68) ); will-change: left, top, transform, opacity; } .vk-raccoon-speech-portal::before{ content:""; position:absolute; inset:0; z-index:-1; background: url("/static/voltkin/assets/home/ambient/voltkin_home_raccoon_speech_frame_v1.png") center / 100% 100% no-repeat; } /* speech is on RIGHT of raccoon */ .vk-raccoon-speech-portal.bubble-right::before{ transform:none; } /* speech is on LEFT of raccoon */ .vk-raccoon-speech-portal.bubble-left::before{ transform:scaleX(-1); } .vk-raccoon-speech-portal.bubble-left{ padding: 24px 43px 23px 38px; } .vk-raccoon-speech-portal.is-visible{ opacity:1; visibility:visible; transform: translate3d( 0, 0, 0 ) scale(1); } .vk-raccoon-speech-text{ position:relative; z-index:2; color:#f3fbff; font-size:14px; line-height:1.25; font-weight:800; text-shadow: 0 2px 7px rgba(0,0,0,.90); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1200px){ .vk-raccoon-speech-portal{ width:260px; min-height:82px; padding: 21px 32px 20px 36px; } .vk-raccoon-speech-text{ font-size:12px; } } @media(max-width:980px){ .vk-raccoon-v2, .vk-raccoon-speech-portal{ display:none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .vk-raccoon-v2, .vk-raccoon-speech-portal{ display:none !important; } } /* ========================================================= VOLTKIN CARD COPY POSITION FIX V1 Keep all text inside generated card panels ========================================================= */ /* --------------------------------------------------------- QUICK CARDS --------------------------------------------------------- */ .vk-home-quick-copy{ position:absolute !important; z-index:8 !important; top:50% !important; right:5.5% !important; left:auto !important; bottom:auto !important; width:46% !important; transform: translateY(-50%) !important; text-align:left !important; pointer-events:none; } .vk-home-quick-copy small{ display:block; margin:0 0 2px; font-size:8px; line-height:1; letter-spacing:.12em; color:#65edff; } .vk-home-quick-copy strong{ display:block; margin:0; font-size:18px; line-height:1.02; color:#ffffff; } .vk-home-quick-copy p{ margin:6px 0 0 !important; max-width:190px; font-size:8.5px !important; line-height:1.35 !important; color:#aab6c8 !important; } /* --------------------------------------------------------- LARGE FEATURE CARDS --------------------------------------------------------- */ .vk-home-feature-copy{ position:absolute !important; z-index:8 !important; left:10.5% !important; right:10.5% !important; top:auto !important; bottom:5.8% !important; width:auto !important; transform:none !important; text-align:center !important; } .vk-home-feature h3{ margin:0 0 6px !important; font-size:18px !important; line-height:1.05 !important; color:#ffffff !important; text-shadow: 0 2px 7px rgba(0,0,0,.9); } .vk-home-feature p{ min-height:29px !important; margin:0 0 9px !important; font-size:8.5px !important; line-height:1.35 !important; color:#a9b5c8 !important; } .vk-home-feature-action{ position:relative !important; width:100% !important; height:31px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:8px !important; line-height:1 !important; letter-spacing:.10em !important; z-index:9 !important; } /* --------------------------------------------------------- RACCOON STILL ABOVE COPY WHEN REQUIRED --------------------------------------------------------- */ .vk-raccoon-v2.pose-hanging, .vk-raccoon-v2.pose-sitting{ z-index:12 !important; } /* ========================================================= VOLTKIN HOME - QUICK CARDS FIX V1 Only top 3 horizontal cards ========================================================= */ /* container */ .vk-home-quick-card, .vk-home-quick-panel, .vk-home-quick-item{ position: relative !important; overflow: hidden !important; isolation: isolate !important; } /* text block */ .vk-home-quick-copy{ position: absolute !important; top: 50% !important; right: 4.8% !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; width: 39% !important; z-index: 8 !important; text-align: left !important; pointer-events: none !important; } /* soft dark readability plate behind text */ .vk-home-quick-copy::before{ content: "" !important; position: absolute !important; inset: -10px -12px -10px -18px !important; border-radius: 12px !important; background: linear-gradient( 90deg, rgba(3,10,20,0.00) 0%, rgba(3,10,20,0.28) 18%, rgba(3,10,20,0.62) 42%, rgba(3,10,20,0.84) 72%, rgba(3,10,20,0.94) 100% ) !important; z-index: -1 !important; } /* top small heading */ .vk-home-quick-copy small{ display: block !important; margin: 0 0 4px 0 !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: .12em !important; font-weight: 800 !important; color: #5fe9ff !important; text-transform: uppercase !important; text-shadow: 0 1px 8px rgba(0,0,0,.85) !important; } /* main title */ .vk-home-quick-copy strong{ display: block !important; margin: 0 0 6px 0 !important; font-size: 22px !important; line-height: 0.95 !important; font-weight: 900 !important; color: #ffffff !important; text-transform: uppercase !important; text-shadow: 0 2px 10px rgba(0,0,0,.90) !important; } /* description */ .vk-home-quick-copy p{ margin: 0 !important; max-width: 230px !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #c9d5e5 !important; text-shadow: 0 1px 8px rgba(0,0,0,.88) !important; } /* make all 3 cards feel more even */ .vk-home-quick-row > *:nth-child(1) .vk-home-quick-copy{ right: 5.0% !important; width: 39% !important; } .vk-home-quick-row > *:nth-child(2) .vk-home-quick-copy{ right: 5.2% !important; width: 40% !important; } .vk-home-quick-row > *:nth-child(3) .vk-home-quick-copy{ right: 5.4% !important; width: 38% !important; } /* raccoon always above quick cards but not over the text */ .vk-raccoon-v2{ z-index: 20 !important; } /* optional safety if card title is too low */ .vk-home-quick-copy > *{ position: relative !important; z-index: 2 !important; } /* ========================================================= VOLTKIN HOME - QUICK CARDS POSITION FIX V2 Move text a bit more to the right / center of empty window ========================================================= */ .vk-home-quick-copy{ top: 50% !important; right: 2.2% !important; width: 33% !important; transform: translateY(-50%) !important; } /* first */ .vk-home-quick-row > *:nth-child(1) .vk-home-quick-copy{ right: 2.0% !important; width: 32% !important; } /* second */ .vk-home-quick-row > *:nth-child(2) .vk-home-quick-copy{ right: 2.0% !important; width: 33% !important; } /* third */ .vk-home-quick-row > *:nth-child(3) .vk-home-quick-copy{ right: 1.8% !important; width: 32% !important; } /* keep description inside nicer */ .vk-home-quick-copy p{ max-width: 210px !important; } /* ========================================================= QUICK CARDS - REMOVE EXTRA TEXT BACKGROUND V1 Text should sit directly inside generated card window. ========================================================= */ .vk-home-quick-copy::before{ content:none !important; display:none !important; background:none !important; box-shadow:none !important; opacity:0 !important; } /* ========================================================= FEATURE CARD BUTTONS - POLISH V1 ========================================================= */ .vk-home-feature-action{ position:relative !important; width:76% !important; height:34px !important; margin: 3px auto 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding: 0 18px !important; color:#8df3ff !important; background: linear-gradient( 180deg, rgba(12,66,92,.94) 0%, rgba(4,31,52,.97) 52%, rgba(3,20,37,.98) 100% ) !important; border: 1px solid rgba(67,226,255,.58) !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(167,246,255,.10), inset 0 -1px 0 rgba(0,118,175,.20), 0 0 12px rgba(0,201,255,.08) !important; font-size:9px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.12em !important; text-transform:uppercase !important; text-shadow: 0 0 7px rgba(65,231,255,.28) !important; clip-path: polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ); transition: transform .20s ease, background .20s ease, border-color .20s ease, box-shadow .20s ease, color .20s ease !important; } /* small illuminated line inside button */ .vk-home-feature-action::before{ content:"" !important; position:absolute !important; left:16% !important; right:16% !important; top:0 !important; height:1px !important; background: linear-gradient( 90deg, transparent, rgba(100,240,255,.72), transparent ) !important; opacity:.65 !important; pointer-events:none !important; } /* hover */ .vk-home-feature-action:hover{ transform: translateY(-2px) !important; color:#ffffff !important; border-color: rgba(102,241,255,.92) !important; background: linear-gradient( 180deg, rgba(17,91,121,.98) 0%, rgba(5,49,75,.98) 52%, rgba(3,28,47,.98) 100% ) !important; box-shadow: inset 0 1px 0 rgba(190,250,255,.18), 0 0 13px rgba(43,222,255,.18), 0 0 24px rgba(0,179,255,.08) !important; } /* pressed */ .vk-home-feature-action:active{ transform: translateY(0) scale(.985) !important; } /* ========================================================= KEEP FEATURE COPY BALANCED ========================================================= */ .vk-home-feature-copy{ bottom:5.4% !important; } .vk-home-feature h3{ margin-bottom:6px !important; } .vk-home-feature p{ margin-bottom:8px !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1200px){ .vk-home-feature-action{ width:80% !important; height:32px !important; font-size:8px !important; } } /* ========================================================= RACCOON CORNER ALIGNMENT V3 Trimmed assets + precise corner placement ========================================================= */ /* --------------------------------------------------------- QUICK CARDS --------------------------------------------------------- */ .vk-home-quick .vk-raccoon-v2.pose-peek-left{ width:86px !important; left:-18px !important; right:auto !important; top:-35px !important; transform: translate3d( 36px, 24px, 0 ) rotate(5deg) scale(.92) !important; } .vk-home-quick .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( 0, 0, 0 ) rotate(3deg) scale(1) !important; } .vk-home-quick .vk-raccoon-v2.pose-peek-right{ width:86px !important; right:-18px !important; left:auto !important; top:-35px !important; transform: translate3d( -36px, 24px, 0 ) rotate(-5deg) scale(.92) !important; } .vk-home-quick .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( 0, 0, 0 ) rotate(-3deg) scale(1) !important; } /* bottom peek */ .vk-home-quick .vk-raccoon-v2.pose-bottom{ width:92px !important; bottom:-38px !important; } .vk-home-quick .vk-raccoon-v2.pose-bottom.is-visible{ transform: translate3d( 0, 0, 0 ) scale(1) !important; } /* --------------------------------------------------------- FEATURE CARDS --------------------------------------------------------- */ .vk-home-feature .vk-raccoon-v2.pose-peek-left{ width:102px !important; left:-20px !important; top:-43px !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( 0, 0, 0 ) rotate(3deg) scale(1) !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-right{ width:102px !important; right:-20px !important; top:-43px !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( 0, 0, 0 ) rotate(-3deg) scale(1) !important; } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .vk-home-hero .vk-raccoon-v2.pose-peek-left{ width:130px !important; left:-20px !important; top:-52px !important; } .vk-home-hero .vk-raccoon-v2.pose-peek-right{ width:130px !important; right:-20px !important; top:-52px !important; } /* --------------------------------------------------------- SPEECH BUBBLE Always above everything --------------------------------------------------------- */ .vk-raccoon-speech-portal{ z-index:999999 !important; width:280px !important; min-height:88px !important; } .vk-raccoon-speech-text{ font-size:13px !important; line-height:1.22 !important; } /* make raccoon itself stay attached to card */ .vk-raccoon-v2{ pointer-events:none !important; } /* card text always stays readable */ .vk-home-quick-copy{ z-index:20 !important; } /* special poses above frame */ .vk-raccoon-v2.pose-sitting, .vk-raccoon-v2.pose-hanging{ z-index:25 !important; } /* ========================================================= RACCOON TRUE CORNER PEEK V4 Anchor mascot to REAL card corners ========================================================= */ /* ========================================================= QUICK CARDS ========================================================= */ /* LEFT CORNER Actor origin is exactly card top-left. Most of mascot sits OUTSIDE the card. */ .vk-home-quick .vk-raccoon-v2.pose-peek-left{ left:0 !important; right:auto !important; top:0 !important; width:96px !important; z-index:2 !important; transform: translate3d( -64%, -48%, 0 ) rotate(4deg) scale(.92) !important; } .vk-home-quick .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( -48%, -42%, 0 ) rotate(3deg) scale(1) !important; } /* RIGHT CORNER */ .vk-home-quick .vk-raccoon-v2.pose-peek-right{ right:0 !important; left:auto !important; top:0 !important; width:96px !important; z-index:2 !important; transform: translate3d( 64%, -48%, 0 ) rotate(-4deg) scale(.92) !important; } .vk-home-quick .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( 48%, -42%, 0 ) rotate(-3deg) scale(1) !important; } /* ========================================================= FEATURE CARDS ========================================================= */ .vk-home-feature .vk-raccoon-v2.pose-peek-left{ left:0 !important; right:auto !important; top:0 !important; width:108px !important; z-index:2 !important; transform: translate3d( -66%, -47%, 0 ) rotate(4deg) scale(.92) !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( -49%, -41%, 0 ) rotate(3deg) scale(1) !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-right{ right:0 !important; left:auto !important; top:0 !important; width:108px !important; z-index:2 !important; transform: translate3d( 66%, -47%, 0 ) rotate(-4deg) scale(.92) !important; } .vk-home-feature .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( 49%, -41%, 0 ) rotate(-3deg) scale(1) !important; } /* ========================================================= HERO ========================================================= */ .vk-home-hero .vk-raccoon-v2.pose-peek-left{ left:0 !important; right:auto !important; top:0 !important; width:140px !important; transform: translate3d( -61%, -42%, 0 ) rotate(4deg) scale(.92) !important; } .vk-home-hero .vk-raccoon-v2.pose-peek-left.is-visible{ transform: translate3d( -46%, -37%, 0 ) rotate(3deg) scale(1) !important; } .vk-home-hero .vk-raccoon-v2.pose-peek-right{ right:0 !important; left:auto !important; top:0 !important; width:140px !important; transform: translate3d( 61%, -42%, 0 ) rotate(-4deg) scale(.92) !important; } .vk-home-hero .vk-raccoon-v2.pose-peek-right.is-visible{ transform: translate3d( 46%, -37%, 0 ) rotate(-3deg) scale(1) !important; } /* ========================================================= PHYSICAL OCCLUSION Card image is in front of raccoon. This hides the part of its body overlapping the card. ========================================================= */ .vk-home-quick > img, .vk-home-feature > img{ position:relative !important; z-index:4 !important; } /* text stays above image */ .vk-home-quick-copy, .vk-home-feature-copy{ z-index:8 !important; } /* special poses are intentionally on top */ .vk-raccoon-v2.pose-sitting, .vk-raccoon-v2.pose-hanging{ z-index:12 !important; }