/* --- start vscom bridge modernization to reimagine --- */
:root {
--lh-body-btn: 22px;
--clr-black: hsl(0deg 0% 10%);
--clr-white: hsl(0deg 0% 100%);
--clr-violet: hsl(262deg 35% 49%);
}
.vscom-dropdown-menu-container {
margin-right: 24px;
}
.vscom-dropdown-button.vscom-btn-fill-grow button.toplink {
color: var(--clr-black);
background: var(--clr-white);
border-radius: 8px;
}
.vscom-dropdown-button.vscom-btn-fill-grow button.toplink,
a.vscom-btn-wire,
a.vscom-btn-primary {
padding: 12px 24px;
line-height: var(--lh-body-btn);
height: 49px;
}
.vscom-dropdown-button.fill-violet .vscom-dropdown-menu-container:hover button.toplink,
.vscom-dropdown-button.vscom-btn-fill-grow.fill-violet button.toplink:focus,
a.vscom-btn-primary.fill-violet:focus,
a.vscom-btn-wire.fill-violet:focus {
color: var(--clr-white);
background-color: var(--clr-violet);
}
.vscom-dropdown-button .toplink {
margin-top: 0;
margin-bottom: 0;
border-radius: 8px;
border: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
text-decoration: none !important;
padding: 0.5rem 1rem;
transition: none !important;
}
.vscom-dropdown-button.vscom-btn-fill-grow.fill-violet button::before,
a.vscom-btn-wire.fill-violet::before {
background: var(--clr-violet);
}
/* fusion button with modern btn secondary styles */
a.vscom-btn-secondary:hover,
a.vscom-btn-secondary:focus {
background: var(--clr-violet) !important;
}
/* featured hero bg none for mobile */
@media (max-width: 980px) {
.fusion-fullwidth.hero-bg-none {
background-color: #212121 !important;
background-image: unset !important;
}
}
/* --- stop vscom bridge modernization to reimagine --- */
/* --- start reimagine updates --- */
/* reimagine download button subnav width */
ul.vscom-subnav.vsopt-download-visual-studio {
width: 100% !important;
}
/* swimlane code images drop shadow */
@media (min-width: 1084px) {
.vscom-image--dropshadow .fusion-column-wrapper,
.vscom-image--dropshadow .vscom-video-player {
filter: drop-shadow(0px 4.8px 14.4px rgb(0 0 0 / 18%)) drop-shadow(0px 25.6px 26px rgb(0 0 0 / 22%));
-webkit-backdrop-filter: drop-shadow(0px 4.8px 14.4px rgb(0 0 0 / 18%)) drop-shadow(0px 25.6px 26px rgb(0 0 0 / 22%));
}
}
/* swimlane content max width */
.mw-632 {
max-width: 632px;
}
/* scroll animations comes from common.js*/
@media (min-width: 1084px) {
.reveal {
position: relative;
transform: translateY(150px);
opacity: 0;
transition: .6s all ease;
}
.card-container.reveal {
transform: translateY(100px);
}
.reveal.active,
.card-container.reveal.active {
transform: translateY(0);
opacity: 1;
}
.no-animate .reveal {
transform: translateY(0);
opacity: 1;
}
}
/* --- stop reimagine updates --- */