*,:after,:before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: } footer { border-top: solid 1px #eee; margin-top: 30px; padding-top: 30px; font-size: 1.125em; text-align: left; } *,:after,:before { border: 0 solid #e5e7eb; box-sizing: border-box } :after,:before { --tw-content: "" } html { -webkit-text-size-adjust: 100%; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; line-height: 1.5; -moz-tab-size: 4; tab-size: 4 } body { line-height: inherit; margin: 0 } hr { border-top-width: 1px; color: inherit; height: 0 } abbr:where([title]) { text-decoration: underline; -webkit-text-decoration: underline dotted currentColor; text-decoration: underline dotted currentColor } h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit } b,strong { font-weight: bolder } code,kbd,pre,samp { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; font-size: 1em } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { border-collapse: collapse; border-color: inherit; text-indent: 0 } button,input,optgroup,select,textarea { color: inherit; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; margin: 0; padding: 0 } button,select { text-transform: none } [type=button],[type=reset],[type=submit],button { -webkit-appearance: button; background-color: transparent; background-image: none } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } progress { vertical-align: baseline } ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre { margin: 0 } fieldset { margin: 0 } fieldset,legend { padding: 0 } menu,ol,ul { list-style: none; margin: 0; padding: 0 } textarea { resize: vertical } input::-moz-placeholder,textarea::-moz-placeholder { color: #9ca3af; opacity: 1 } input::placeholder,textarea::placeholder { color: #9ca3af; opacity: 1 } [role=button],button { cursor: pointer } :disabled { cursor: default } audio,canvas,embed,iframe,img,object,svg,video { display: block; vertical-align: middle } img,video { height: auto; max-width: 100% } *,:after,:before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: } ::-webkit-backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: } .sr-only { clip: rect(0,0,0,0); border-width: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px } .static { position: static } .absolute { position: absolute } .relative { position: relative } .top-0 { top: 0 } .right-4 { right: 1rem } .-top-8 { top: -2rem } .left-8 { left: 2rem } .z-10 { z-index: 10 } .z-20 { z-index: 20 } .col-span-4 { grid-column: span 4/span 4 } .col-span-3 { grid-column: span 3/span 3 } .col-span-2 { grid-column: span 2/span 2 } .col-span-1 { grid-column: span 1/span 1 } .float-right { float: right } .float-left { float: left } .m-4 { margin: 1rem } .m-8 { margin: 2rem } .m-auto { margin: auto } .mx-auto { margin-left: auto; margin-right: auto } .my-6 { margin-bottom: 1.5rem; margin-top: 1.5rem } .my-4 { margin-bottom: 1rem; margin-top: 1rem } .my-8 { margin-bottom: 2rem; margin-top: 2rem } .ml-4 { margin-left: 1rem } .mb-16 { margin-bottom: 4rem } .mb-4 { margin-bottom: 1rem } .mb-8 { margin-bottom: 2rem } .mb-12 { margin-bottom: 3rem } .mt-8 { margin-top: 2rem } .mr-2 { margin-right: .5rem } .ml-2 { margin-left: .5rem } .mt-20 { margin-top: 5rem } .-mt-12 { margin-top: -3rem } .mt-4 { margin-top: 1rem } .mr-4 { margin-right: 1rem } .-mt-4 { margin-top: -1rem } .mb-2 { margin-bottom: .5rem } .mt-2 { margin-top: .5rem } .mb-24 { margin-bottom: 6rem } .mt-16 { margin-top: 4rem } .-ml-40 { margin-left: -10rem } .-mt-8 { margin-top: -2rem } .-mr-40 { margin-right: -10rem } .mr-0 { margin-right: 0 } .mt-12 { margin-top: 3rem } .-mt-20 { margin-top: -5rem } .block { display: block } .flex { display: flex } .grid { display: grid } .contents { display: contents } .hidden { display: none } .h-fit { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } .h-60 { height: 15rem } .h-20 { height: 5rem } .h-64 { height: 16rem } .h-24 { height: 6rem } .h-16 { height: 4rem } .h-full { height: 100% } .max-h-96 { max-height: 24rem } .max-h-20 { max-height: 5rem } .max-h-32 { max-height: 8rem } .max-h-80 { max-height: 20rem } .max-h-40 { max-height: 10rem } .max-h-16 { max-height: 4rem } .max-h-72 { max-height: 18rem } .max-h-\[35rem\] { max-height: 35rem } .max-h-24 { max-height: 6rem } .max-h-60 { max-height: 15rem } .w-1\/2 { width: 50% } .w-3\/4 { width: 75% } .w-full { width: 100% } .flex-1 { flex: 1 1 0% } .grow-0 { flex-grow: 0 } .grow { flex-grow: 1 } .basis-1\/3 { flex-basis: 33.333333% } .basis-full { flex-basis: 100% } .grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) } .grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) } .flex-row { flex-direction: row } .flex-col { flex-direction: column } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .justify-start { justify-content: flex-start } .justify-end { justify-content: flex-end } .justify-center { justify-content: center } .gap-4 { gap: 1rem } .overflow-hidden { overflow: hidden } .rounded-md { border-radius: .375rem } .rounded { border-radius: .25rem } .rounded-lg { border-radius: .5rem } .rounded-xl { border-radius: .75rem } .border-2 { border-width: 2px } .border-solid { border-style: solid } .border-vanilla-white { --tw-border-opacity: 1; border-color: rgba(255,255,255,var(--tw-border-opacity)) } .border-vanilla-pink { --tw-border-opacity: 1; border-color: rgba(225,66,111,var(--tw-border-opacity)) } .border-vanilla-gray { --tw-border-opacity: 1; border-color: rgba(206,206,206,var(--tw-border-opacity)) } .border-vanilla-dark-gray { --tw-border-opacity: 1; border-color: rgba(63,62,60,var(--tw-border-opacity)) } .border-vanilla-light-gray { --tw-border-opacity: 1; border-color: rgba(249,249,249,var(--tw-border-opacity)) } .bg-indigo-400 { --tw-bg-opacity: 1; background-color: rgba(129,140,248,var(--tw-bg-opacity)) } .bg-green-400 { --tw-bg-opacity: 1; background-color: rgba(74,222,128,var(--tw-bg-opacity)) } .bg-yellow-400 { --tw-bg-opacity: 1; background-color: rgba(250,204,21,var(--tw-bg-opacity)) } .bg-red-400 { --tw-bg-opacity: 1; background-color: rgba(248,113,113,var(--tw-bg-opacity)) } .bg-transparent { background-color: transparent } .bg-vanilla-white { --tw-bg-opacity: 1; background-color: rgba(255,255,255,var(--tw-bg-opacity)) } .bg-vanilla-pink { --tw-bg-opacity: 1; background-color: rgba(225,66,111,var(--tw-bg-opacity)) } .bg-vanilla-light-gray { --tw-bg-opacity: 1; background-color: rgba(249,249,249,var(--tw-bg-opacity)) } .bg-vanilla-dark-gray { --tw-bg-opacity: 1; background-color: rgba(63,62,60,var(--tw-bg-opacity)) } .bg-vanilla-blue { --tw-bg-opacity: 1; background-color: rgba(63,143,217,var(--tw-bg-opacity)) } .bg-vanilla-alert-bar { --tw-bg-opacity: 1; background-color: rgba(128,207,204,var(--tw-bg-opacity)) } .bg-opacity-5 { --tw-bg-opacity: 0.05 } .bg-gradient-to-r { background-image: linear-gradient(to right,var(--tw-gradient-stops)) } .from-vanilla-blue { --tw-gradient-from: #3f8fd9; --tw-gradient-to: rgba(63,143,217,0); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to) } .from-vanilla-light-blue { --tw-gradient-from: #6bbef6; --tw-gradient-to: rgba(107,190,246,0); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to) } .to-vanilla-light-blue { --tw-gradient-to: #6bbef6 } .to-vanilla-blue { --tw-gradient-to: #3f8fd9 } .bg-cover { background-size: cover } .bg-center { background-position: 50% } .bg-no-repeat { background-repeat: no-repeat } .p-6 { padding: 1.5rem } .p-4 { padding: 0.75rem } .p-8 { padding: 2rem } .p-2 { padding: .5rem } .p-16 { padding: 4rem } .py-40 { padding-bottom: 10rem; padding-top: 10rem } .px-20 { padding-left: 5rem; padding-right: 5rem } .py-8 { padding-bottom: 2rem; padding-top: 2rem } .py-12 { padding-bottom: 3rem; padding-top: 3rem } .py-4 { padding-bottom: 1rem; padding-top: 1rem } .px-8 { padding-left: 2rem; padding-right: 2rem } .py-2 { padding-bottom: .5rem; padding-top: .5rem } .px-4 { padding-left: 1rem; padding-right: 1rem } .py-16 { padding-bottom: 4rem; padding-top: 4rem } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem } .py-32 { padding-bottom: 8rem; padding-top: 8rem } .pt-8 { padding-top: 2rem } .pb-16 { padding-bottom: 4rem } .pb-8 { padding-bottom: 2rem } .pt-20 { padding-top: 5rem } .pb-24 { padding-bottom: 6rem } .pt-12 { padding-top: 3rem } .pb-12 { padding-bottom: 3rem } .pr-0 { padding-right: 0 } .pl-0 { padding-left: 0 } .pl-4 { padding-left: 1rem } .pr-4 { padding-right: 1rem } .pr-8 { padding-right: 2rem } .pb-32 { padding-bottom: 8rem } .pt-40 { padding-top: 10rem } .text-left { text-align: left } .text-center { text-align: center } .text-right { text-align: right } .text-8xl { font-size: 6rem; line-height: 1 } .text-2xl { font-size: 1.5rem; line-height: 2rem } .text-4xl { font-size: 2.25rem; line-height: 2.5rem } .text-lg { font-size: 1.125rem; line-height: 1.75rem } .text-sm { font-size: .875rem; line-height: 1.25rem } .text-xl { font-size: 1.25rem; line-height: 1.75rem } .text-3xl { font-size: 1.875rem; line-height: 2.25rem } .text-base { font-size: 1rem; line-height: 1.5rem } .text-xs { font-size: .75rem; line-height: 1rem } .text-5xl { font-size: 3rem; line-height: 1 } .font-bold { font-weight: 700 } .font-black { font-weight: 900 } .font-medium { font-weight: 500 } .uppercase { text-transform: uppercase } .italic { font-style: italic } .leading-9 { line-height: 2.25rem } .text-indigo-50 { --tw-text-opacity: 1; color: rgba(238,242,255,var(--tw-text-opacity)) } .text-green-50 { --tw-text-opacity: 1; color: rgba(240,253,244,var(--tw-text-opacity)) } .text-yellow-50 { --tw-text-opacity: 1; color: rgba(254,252,232,var(--tw-text-opacity)) } .text-red-50 { --tw-text-opacity: 1; color: rgba(254,242,242,var(--tw-text-opacity)) } .text-vanilla-white { --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity)) } .text-vanilla-dark-gray { --tw-text-opacity: 1; color: rgba(63,62,60,var(--tw-text-opacity)) } .text-vanilla-blue { --tw-text-opacity: 1; color: rgba(63,143,217,var(--tw-text-opacity)) } .text-vanilla-pink { --tw-text-opacity: 1; color: rgba(225,66,111,var(--tw-text-opacity)) } .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline } .shadow-3xl { --tw-shadow: 0px 0px 15px 1px rgba(0,0,0,.25); --tw-shadow-colored: 0px 0px 15px 1px var(--tw-shadow-color) } .shadow-3xl,.shadow-md { box-shadow: 0 0 transparent,0 0 transparent,var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow) } .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color) } .outline { outline-style: solid } .transition-all { transition-duration: .15s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1) } @font-face { font-display: swap; font-family: Gotham; font-weight: 400; src: url(/wp-content/themes/Vanilla/public/fonts/Gotham-Book.f15af4.otf) } @font-face { font-display: swap; font-family: Gotham; font-weight: 700; src: url(/wp-content/themes/Vanilla/public/fonts/Gotham-Bold.70a810.otf) } @font-face { font-display: swap; font-family: Gotham; font-weight: 900; src: url(/wp-content/themes/Vanilla/public/fonts/Gotham-Black.ad1381.otf) } body { font-family: Gotham,Arial,sans-serif } .vanilla-soft-margin { margin-left: auto!important; margin-right: auto!important; max-width: 1280px!important; padding-left: 2rem!important; padding-right: 2rem!important } @media screen and (min-width: 1536px) { .vanilla-soft-margin { padding-left:0!important; padding-right: 0!important } } img[data-src] { opacity: 0; transition: opacity .25s ease-in-out; will-change: opacity } img[data-src][src] { opacity: 1 } .banners__vf_header { background: #fff; border-bottom: 2px solid #3f8fd9; padding: 1rem 2rem } .banners__vf_header-logo-container { align-items: center; display: flex } .banners__vf_header-logo-container img { max-height: 3.5rem } .banners__vf_header-nav-container { display: flex; padding: 0 0 0 7rem } .banners__vf_header-cta-container { display: flex; text-align: right } .banners__vf_header-cta-container--cta { background: #e1426f; border: 2px solid #e1426f; border-radius: .375rem; color: #fff; font-weight: 700; padding: .25rem 1.75rem } @media(max-width: 1023px) { .banners__vf_header-cta-container--cta { padding:.25rem } } @media(max-width: 767px) { .banners__vf_header-cta-container--cta { padding:0; text-align: center } } .banners__vf_header-cta-container--cta:hover { background: #fff; color: #e1426f } .menu-main-nav-menu-container { flex-grow: 1; height: 100% } .menu-main-nav-menu-container ul { align-items: center; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); height: 100% } .menu-main-nav-menu-container ul li { flex-grow: 1; float: left; position: relative } .menu-main-nav-menu-container ul li a { color: #3f3e3c; font-size: .65rem; font-weight: 700; text-transform: uppercase } .menu-main-nav-menu-container ul li a:hover { color: #3f8fd9 } .menu-labels { color: #3f3e3c; font-size: 14px; font-weight: 400; text-transform: uppercase } .blue-border-left { border-left: 2px solid #3f8fd9!important } .flex-parent>ul { display: flex!important } .blue-bottom-bar { background-color: #e1426f!important } .blue-bottom-bar a { color: #fff!important } .extra-padding-column { padding-top: 6px!important } .mega-sub-menu li a { font-weight: 900!important } .mega-sub-menu .textwidget p { height: 4rem } @media(max-width: 1279px) { .banners__vf_header-nav-container { padding:0 0 0 1rem } } @media(max-width: 767px) { .banners__vf_header-nav-container #mega-menu-wrap-main-nav { display:none } .banners__vf_header-logo-container #mega-menu-wrap-mobile-nav { margin-right: 2rem } } .footer-section a { color: #3f8fd9 } .footer-section__content p { margin-bottom: .5rem } .footer-section__copyright a { color: #fff } .home-page-video-container { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative } .home-page-video-container iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .integration-box .logo-box { display: block } .integration-box .excerpt-box,.integration-box:hover .logo-box { display: none } .integration-box:hover .excerpt-box { display: block } .featured-logo-box img { max-height: 5rem; width: auto } #term_filter_form { padding: 2rem 0 } #term_filter_form ul { display: flex; flex-direction: column; justify-content: center; list-style-type: none } @media(min-width: 1024px) { #term_filter_form ul { flex-direction:row } } #term_filter_form ul li { display: flex; flex-basis: auto; float: left; height: 40px; margin: 0 0 1rem; position: relative } @media(min-width: 1024px) { #term_filter_form ul li { flex-basis:20%; margin: 0 1rem 0 0 } } #term_filter_form ul input,#term_filter_form ul label { background: #fff; bottom: 0; cursor: pointer; display: block; left: 0; position: absolute; right: 0; top: 0 } #term_filter_form ul input[type=radio] { opacity: .01; z-index: 100 } #term_filter_form ul .Checked+label,#term_filter_form ul input[type=radio]:checked+label { background: #3f8fd9; color: #fff } #term_filter_form ul label { border: 2px solid #3f8fd9; color: #3f8fd9; cursor: pointer; font-weight: 700; padding: 5px; z-index: 90 } #term_filter_form ul label:hover { background: #3f8fd9; color: #fff } .integration_detail_header { -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100% } .integration-detail-video-container { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative } .integration-detail-video-container iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .integration_detail_content h3 { color: #3f8fd9; font-size: 1.25rem; font-weight: 900; line-height: 1.75rem; margin-bottom: 2rem } .integration_detail_content a { color: #3f8fd9; text-decoration: underline } .integration_detail_content p,.integration_detail_content ul { margin-bottom: 2rem } .integration_detail_content ul li { list-style-type: disc; margin-left: 1rem } .integration_detail_content ol { margin-bottom: 2rem } .integration_detail_content ol li { list-style-type: decimal; margin-left: 1rem } .journey-content-box p { margin-bottom: 1rem } .features-media-video-container { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative } .features-media-video-container iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .accordion { align-items: center; background-color: #f9f9f9; border: none; color: #3f3e3c; cursor: pointer; display: flex; height: 7rem; justify-content: space-between; margin: 1rem 0; outline: none; padding: 2rem; text-align: left; transition: .4s; width: 100% } .accordion:hover { background-color: #3f8fd9; color: #fff } .accordion:hover .accordion__status:after { color: #fff } .accordion__status:after { color: #3f3e3c; content: "+"; float: right; font-size: 1rem; margin-left: .5rem } .active:after { content: "âˆ’" } .panel { background-color: #fff; display: none; overflow: hidden; padding: 0 2rem } .panel a { text-decoration: underline } .panel ul { margin-left: 1rem } .panel ul li { list-style: disc } .checklist-text-area p { margin-bottom: 1rem } .platform-video-container { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative } .platform-video-container iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .featured-case-study-wrapper img { margin: auto; max-height: 5rem; width: auto } .post-content { color: #3f3e3c } .post-content h2 { font-size: 1.5rem; font-weight: 900; line-height: 2rem; margin-bottom: 2rem } .post-content h3 { font-size: 1.25rem } .post-content h3,.post-content h4 { font-weight: 900; line-height: 1.75rem; margin-bottom: 2rem } .post-content h4 { font-size: 1.125rem } .post-content h5 { font-size: 1rem; line-height: 1.5rem } .post-content h5,.post-content h6 { font-weight: 900; margin-bottom: 2rem } .post-content h6 { font-size: .875rem; line-height: 1.25rem } .post-content p,.post-content ul { margin-bottom: 2rem } .post-content ul { margin-left: 3rem } .post-content ul li { list-style-type: disc } .post-content a { color: #3f8fd9 } .post-content a:hover { text-decoration: underline } .blog-thumbnail img { width: 100% } .sf-field-search input { border: 1px solid #3f3e3c; border-radius: 9999px; padding: .25rem .5rem; width: 100% } .searchandfilter>ul>li h4 { border-bottom: 2px solid #3f3e3c; color: #3f3e3c; font-size: 1.5rem } .hover\:translate-x-4:hover { --tw-translate-x: 1rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .hover\:bg-vanilla-white:hover { --tw-bg-opacity: 1; background-color: rgba(255,255,255,var(--tw-bg-opacity)) } .hover\:bg-vanilla-dark-gray:hover { --tw-bg-opacity: 1; background-color: rgba(63,62,60,var(--tw-bg-opacity)) } .hover\:text-vanilla-blue:hover { --tw-text-opacity: 1; color: rgba(63,143,217,var(--tw-text-opacity)) } .hover\:text-vanilla-pink:hover { --tw-text-opacity: 1; color: rgba(225,66,111,var(--tw-text-opacity)) } .hover\:text-vanilla-white:hover { --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity)) } .hover\:shadow-3xl:hover { --tw-shadow: 0px 0px 15px 1px rgba(0,0,0,.25); --tw-shadow-colored: 0px 0px 15px 1px var(--tw-shadow-color); box-shadow: 0 0 transparent,0 0 transparent,var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow) } .focus\:not-sr-only:focus { clip: auto; height: auto; margin: 0; overflow: visible; padding: 0; position: static; white-space: normal; width: auto } @media (min-width: 768px) { .md\:col-span-2 { grid-column:span 2/span 2 } .md\:col-span-3 { grid-column: span 3/span 3 } .md\:mx-4 { margin-left: 1rem } .md\:mr-4,.md\:mx-4 { margin-right: 1rem } .md\:mb-0 { margin-bottom: 0 } .md\:ml-8 { margin-left: 2rem } .md\:block { display: block } .md\:inline { display: inline } .md\:flex { display: flex } .md\:h-12 { height: 3rem } .md\:h-16 { height: 4rem } .md\:basis-1\/3 { flex-basis: 33.333333% } .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .md\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) } .md\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) } .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .md\:flex-row { flex-direction: row } .md\:gap-12 { gap: 3rem } .md\:py-20 { padding-bottom: 5rem; padding-top: 5rem } .md\:px-24 { padding-left: 6rem; padding-right: 6rem } .md\:py-24 { padding-bottom: 6rem; padding-top: 6rem } .md\:px-8 { padding-left: 2rem; padding-right: 2rem } .md\:pt-20 { padding-top: 5rem } .md\:pr-4 { padding-right: 1rem } .md\:pl-4 { padding-left: 1rem } .md\:text-left { text-align: left } .md\:text-right { text-align: right } .md\:odd\:mr-4:nth-child(odd) { margin-right: 1rem } .md\:even\:mr-0:nth-child(2n) { margin-right: 0 } .md\:even\:ml-4:nth-child(2n) { margin-left: 1rem } } @media (min-width: 1024px) { .lg\:col-span-4 { grid-column:span 4/span 4 } .lg\:mb-0 { margin-bottom: 0 } .lg\:mr-4 { margin-right: 1rem } .lg\:-mt-12 { margin-top: -3rem } .lg\:mt-0 { margin-top: 0 } .lg\:mr-8 { margin-right: 2rem } .lg\:block { display: block } .lg\:flex { display: flex } .lg\:h-20 { height: 5rem } .lg\:h-16 { height: 4rem } .lg\:h-40 { height: 10rem } .lg\:w-full { width: 100% } .lg\:w-1\/2 { width: 50% } .lg\:w-1\/4 { width: 25% } .lg\:w-3\/4 { width: 75% } .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) } .lg\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) } .lg\:p-0 { padding: 0 } .lg\:px-40 { padding-left: 10rem; padding-right: 10rem } .lg\:py-8 { padding-bottom: 2rem; padding-top: 2rem } .lg\:px-16 { padding-left: 4rem; padding-right: 4rem } .lg\:pt-0 { padding-top: 0 } .lg\:pl-8 { padding-left: 2rem } .lg\:text-left { text-align: left } .lg\:last\:m-0:last-child { margin: 0 } .lg\:last\:mr-0:last-child { margin-right: 0 } } @media (min-width: 1280px) { .xl\:left-0 { left:0 } } .bg-vanilla-dark-gray { --tw-bg-opacity: 1; background-color: rgba(63,62,60,var(--tw-bg-opacity)) } .hover\:bg-vanilla-dark-gray:hover { --tw-bg-opacity: 1; background-color: rgba(63,62,60,var(--tw-bg-opacity)) } .block { display: block } .flex { display: flex } .grid { display: grid } .grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) } .grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) } .flex-1 { flex: 1 1 0% } .flex-row { flex-direction: row } .flex-col { flex-direction: column } .flex-wrap { flex-wrap: wrap } .italic { font-style: italic } .items-center { align-items: center } .justify-start { justify-content: flex-start } .justify-end { justify-content: flex-end } .justify-center { justify-content: center } .font-bold { font-weight: 700 } .footer-section a { color: #3f8fd9 } .footer-section__content p { margin-bottom: .5rem } .footer-section__copyright a { color: #fff } .footer-section__content p { margin-bottom: .5rem } /* "footer-section__copyright": true, "footer-section__demo": true, "footer-section__grid": true, "footer-section__info": true, "footer-section__sales": true, "footer-section__title": true, "footer-section__title--bottom": true, "footer-section__title--top": true, "italic": true, "lg:grid-cols-4": true, "md:grid-cols-2": true, */ .text-right { text-align: right } .text-vanilla-white { --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity)) } .text-xs { font-size: .75rem; line-height: 1rem } .vanilla-soft-margin { margin-left: auto!important; margin-right: auto!important; max-width: 1280px!important; padding-left: 2rem!important; padding-right: 2rem!important } @media screen and (min-width: 1536px) { .vanilla-soft-margin { padding-left:0!important; padding-right: 0!important } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } } .fa, .fa-brands { font-weight: 400; font-family: "FontAwesome"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display,inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .fa-linkedin-in:before { content: "\f0e1"; } .fa-instagram:before { content: "\f16d"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before { content: "\f082"; }

Vanilla Release Notes

Release 2020.019

Schedule

Release 2020.019 will be deployed:

To staging sites: Wednesday, September 23rd
To production sites: Monday, September 28th
To Enterprise clients: Wednesday, October 7th

Knowledge Base: Rich Embed Codes

This release introduces embed code support for Knowledge Base articles. You can now use iFrame embed codes to incorporate widgets, media, feeds or other content into your knowledge articles.

Please note, that this feature is currently limited to knowledge base only in order to keep ensure user generated content is safe and secure

You can find out more here

https://success.vanillaforums.com/kb/articles/336-rich-embed-codes-for-knowledge-arricles

Groups & Events: Event URL

Events now include a URL field to allow you to link users to online events, or external event pages.

Screen Shot 2020-09-21 at 8.37.02 AM.png

Search: Tags & Ideas Filter

This release introduces Tags & Ideas filters to our new Search pages for discussions.

Screen Shot 2020-09-23 at 3.12.49 PM.png

Use these to narrow your search results to find ideas or posts containing specific tags.

Bugs

Fixed issues allowing users to search KB results they don't have permission to see - support#2613
Fixed Category drop-down in pocket locations to allow users to search and find all categories available - support#2398
Fixed misalignment and missing info when user cards are enabled - support#2435
Prevent unnecessary queries when creating subcommunity discussion URLs - vanilla-cloud#828
Fixed issue with Advanced Editor formats causing article conversion tool to publish blank article - support#2624
Fixed Navigation issues from More Events page - internal#2695
Fix invitations form display vanilla-cloud#788
Fix groups add/edit Banner image upload support#2622
Fix groups list styles on foundation theme vanilla-cloud#816
Fix meBoxMessage notifications message escaping vanilla-patches#706
Fix RecentActivityModule image accessibility vanilla-cloud#125
Fix "More..." links accessibility vanilla-cloud#124
Fix moderation messages image size support#2716
Fix Embedded community height cutoff support#2641
Improve accessibility on "Edit Profile" workflow vanilla-cloud#119
Fix Activity formatting support#2362
Improve email CTA accessibility vanilla-cloud#706
Improve "Report" button accessibility vanilla-cloud#698
Fix discussions list tab order vanilla-cloud#121
Fix categories dropdown display support#2621
Fix Applicants Queue display on "Moderation" support#2633
Fix required registration fields display support#2661
Fix comments pagination on user profiles support#2671
Fix drafts leading to 404 support#2690
Fix "Embed Settings" description support#2703
Fix buttons keyboard accessibility vanilla-cloud#115
Fix loop when users update their email support#2644
Fix error when creating Zendesk ticket support#2616
Fix dashboard styles support#2793
Fix groups/member error support#2810

Dev Notes

Support overriding the registration button on site node vanilla-cloud#907

Performance & Memory Optimizations

This release contained many performance and memory optimizations. These optimizations enable faster response times across the application and the ability to handle an increased volume of traffic. Optimizations were made to:

Subcommunities & Products.
Community Categories.
Ranks.
Bans.
Badges & the Badge Discussion plugin.
Authentication Providers.
The /api/v2/discussions and /api/v2/comments endpoints.

Many of these optimizations were also backported to the 2020.018 release.