html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
::-moz-selection {
background: #ffe61c80;
opacity: 1;
color: var(--wp--preset--color--white);
}
::selection {
background: #ffe61c80;
opacity: 1;
color: var(--wp--preset--color--white);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.admin-bar {
margin-top: calc(0px - var(--wp-admin--admin-bar--height));
}
#wpadminbar {
display: none !important;
}
header.wp-block-template-part {
top: 0;
position: fixed;
width: 100%;
z-index: 10;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,.5);
transition: 0.2s ease-out;
}
body.home:not(.vp-main-cta-is-offscreen) header.wp-block-template-part {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent;
}
.wp-block-site-title a {
text-decoration: none !important;
}
.has-custom-vp-white-65-p-color strong {
font-weight: 600;
color: var(--wp--preset--color--white);
}
.no-bullets-list {
list-style-type: none;
}
.vp-header-cta {
transition: 0.1s ease-out;
}
body:not(.vp-main-cta-is-offscreen) .vp-header-cta .wp-element-button {
box-shadow: 0 0 0 1px var(--wp--preset--color--custom-vp-white-15-p) !important;
background: transparent !important;
color: var(--wp--preset--color--white) !important;
transition: 0.2s ease-in;
}
body:not(.vp-main-cta-is-offscreen) .vp-header-cta .wp-element-button:hover {
box-shadow: 0 0 0 1px var(--wp--preset--color--custom-vp-yellow) !important;
color: var(--wp--preset--color--custom-vp-yellow) !important;
}
.vp-header-nav-menu a {
position: relative;
}
.vp-header-nav-menu a::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 1px;
background-color: currentColor;
transition: 0.2s ease-in-out;
}
.vp-header-nav-menu a:hover::after {
width: 100%;
}
.wp-site-blocks .vp-hero-video {
height: 85vh;
min-height: 760px;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-bottom: -80px;
}
.wp-site-blocks .vp-hero-video .vp-hero-video-text {
margin-top: 40px;
}
.wp-site-blocks .vp-hero-video .jetpack-videopress-player {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
}
.wp-site-blocks .vp-hero-video .jetpack-videopress-player::after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 400px;
background: linear-gradient(transparent 0%, var(--wp--preset--color--custom-vp-background-darker) 100%);
}
.wp-site-blocks .vp-hero-video .jetpack-videopress-player::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--wp--preset--color--custom-vp-background-darker);
top: 0;
left: 0;
z-index: 10;
animation-name: video-hero-cover;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.wp-site-blocks .vp-hero-video .jetpack-videopress-player__wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.wp-site-blocks .vp-hero-video > * iframe {
height: 100%;
width: 100%;
}
.wp-site-blocks .vp-hero-video .vp-hero-video-text h1,
.wp-site-blocks .vp-hero-video .vp-hero-video-text p,
.wp-site-blocks .vp-hero-video .vp-hero-video-text .wp-block-buttons {
animation-name: video-hero-text;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.170, 0.145, 0.005, 0.995);
opacity: 0;
}
.wp-site-blocks .vp-hero-video .vp-hero-video-text p {
animation-delay: 1.4s;
}
.wp-site-blocks .vp-hero-video .vp-hero-video-text .wp-block-buttons {
animation-delay: 1.8s;
}
body.home header.wp-block-template-part,
body.home #features {
animation-name: fade-in;
animation-duration: 2s;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes video-hero-cover {
from { opacity: 1; } to { opacity: 0; }
}
@keyframes video-hero-text {
from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1;}
}
@keyframes fade-in {
from { opacity: 0; } to { opacity: 1;}
}
@media screen and (prefers-reduced-motion: reduce) {
.wp-site-blocks .vp-hero-video .jetpack-videopress-player::before,
.wp-site-blocks .vp-hero-video .vp-hero-video-text h1,
.wp-site-blocks .vp-hero-video .vp-hero-video-text p,
.wp-site-blocks .vp-hero-video .vp-hero-video-text .wp-block-buttons,
body.home header.wp-block-template-part,
body.home #features {
animation: none;
opacity: 1;
}
.wp-site-blocks .vp-hero-video .jetpack-videopress-player::before {
opacity: 0;
}
}
.wp-block-group:not(.vp-hero-video) .jetpack-videopress-player__wrapper {
border-radius: 4px;
overflow: hidden;
}
.video-text-overlap-left {
margin-left: -72px !important;
z-index: 1;
}
.vp-video-credit {
position: absolute;
}
.feature-icon {
text-align: left;
width: 64px;
height: 64px;
}
.vp-pricing-features p {
font-size: 15px;
display: flex;
}
.vp-pricing-features p:not(.vp-nocheckmark)::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
position: relative;
right: 8px;
background: url('svg/icon-checkmark.svg');
background-size: 24px 24px;
}
.vp-pricing-screenshots img {
max-width: 550px;
width: 100%;
height: auto;
}
.wp-block-button .wp-block-button__link {
transition: 0.2s ease-in-out;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
box-shadow: inset 0 0 0 1px #ffffff1a, 0 2px 24px #ffe61c4d, 0 0 8px #ffe61c2e, 0 0 4px #ffe61c26, 0 0 2.5px #ffe61c1f, 0 0 4px #ffe61c1a, 0 0 2px #000c;
}
.vp-pricing-features p.vp-nocheckmark::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
}
.vp-pricing-button .wp-block-button__link.wp-element-button {
transition: border .2s ease-in;
}
.vp-pricing-button .wp-block-button__link.wp-element-button:hover {
border-left-color: var(--wp--preset--color--custom-vp-yellow) !important;
border-right-color: var(--wp--preset--color--custom-vp-yellow) !important;
border-top-color: var(--wp--preset--color--custom-vp-yellow) !important;
border-bottom-color: var(--wp--preset--color--custom-vp-yellow) !important;
}
.vp-play-roll-share {
background: linear-gradient(116.82deg, #FFFC1B 0%, #FFE61C 0.01%, #FFC700 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.vp-footer-gold-bar {
background: linear-gradient(116.82deg,#fffc1b 0%,#ffe61c 0.01%,#ffc700 100%);
font-size: 16px;
}
.vp-footer-wp img {
width: 24px;
height: 24px;
display: block;
}
.vp-footer-links {
font-size: 16px;
}
.vp-footer-links ul {
padding: 0;
}
.vp-footer-links-list li {
text-align: right;
margin-bottom: 4px;
list-style-type: none;
}
.vp-footer-links-list li a {
color: var(--wp--preset--color--white);
position: relative;
}
.vp-footer-automattic img {
width: 154px;
height: 13px;
display: block;
margin-top: -1px;
}
.vp-footer-external-link,
.vp-footer-internal-link {
white-space: nowrap;
}
.vp-footer-external-link a::after {
content: "";
display: inline-block;
position: absolute;
right: -24px;
top: 0;
width: 24px;
height: 24px;
background: url('svg/icon-external-link.svg');
background-size: 24px 24px;
transition: 0.2s ease-in-out;
opacity: 0.5;
}
.vp-footer-external-link a:hover::after {
right: -28px;
top: -4px;
opacity: 1;
}
#actionbar {
display: none;
}
.carousel-list div {
cursor: pointer;
position: relative;
overflow: hidden;
}
.carousel-list div::before {
content: '';
position: absolute;
z-index: 1;
left: -100%;
top: calc(100% - 1px);
width: 200%;
height: 1px;
background-color: rgba(255, 255, 255, 0.15);
background-repeat: no-repeat;
background-size: 50% 100%;
background-position: 0 0;
background-image: linear-gradient(var(--wp--preset--color--custom-vp-yellow), var(--wp--preset--color--custom-vp-yellow));
}
.carousel-list div.active:not(.no-animation)::before {
animation: translate 10s linear;
}
@keyframes translate {
100% {
transform: translateX(50%);
}
}
.carousel-list div p {
max-height: 0px;
transition: 0.5s ease-in-out;
overflow: hidden;
visibility: hidden;
}
.carousel-list div.active p {
visibility: visible;
}
.carousel-list div h6 {
opacity: 0.4;
}
.carousel-list div.active p,
.carousel-list div.initial-active p {
height: fit-content;
max-height: 120px;
margin-bottom: 16px;
}
.carousel-list div.active h6,
.carousel-list div.initial-active h6 {
opacity: 1;
}
.carousel-images {
display: flex;
justify-content: flex-end;
position: relative;
}
.carousel-images figure {
position: absolute;
opacity: 0;
transition: opacity 0.5s;
max-width: 688px;
height: fit-content;
padding: 30px 4px 4px;
border-radius: 8px;
background: #242424;
border: 1px solid rgba(255,255,255,.05);
box-shadow: 0px 10px 33px rgba(0, 0, 0, 0.25), 0px 5px 18px rgba(0, 0, 0, 0.20), 0px 3px 10px rgba(0, 0, 0, 0.18), 0px 1.5px 5px rgba(0, 0, 0, 0.14), 0px 0.6px 2.2px rgba(0, 0, 0, 0.1);
}
.carousel-images figure::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
background-image:url('data:image/svg+xml;utf8,');
width: 46px;
height: 10px;
background-size: 100% 100%;
}
.carousel-images figure img {
width: 100%;
height: auto;
border-radius: 0 0 4px 4px;
}
.carousel-images figure.active {
opacity: 1;
position: relative;
}
footer .vp-footer-section {
padding-right: 112px;
padding-left: 112px;
}
.vp-slogan-section p br {
display: none;
}
@media screen and (max-width: 1300px) {
.wp-site-blocks {
margin: 0 auto;
}
.wp-site-blocks footer .vp-footer-section {
padding-right: 50px;
padding-left: 50px;
}
h1 {
font-size: max(6vw, 48px);
}
h2 {
font-size: max(5vw, 32px);
}
.vp-hero-video-text p {
width: max(60vw, 380px) !important;
}
}
@media screen and (max-width: 780px) {
body.admin-bar {
margin-top: -46px !important;
}
.vp-header-topbar {
padding: 12px 24px !important;
}
.vp-header-nav h1 {
display: none !important;
}
.vp-header-nav-menu {
padding-left: 0 !important;
border-left: none !important;
}
#features,
#features-distribution {
padding-bottom: 0 !important;
}
#features-manage {
padding-bottom: 80px !important;
}
.feature-icon {
width: 48px;
height: 48px;
}
.vp-features-player-demo {
width: calc(100vw);
margin-left: -40px;
}
.vp-features-player-demo .jetpack-videopress-player__wrapper {
border-radius: 0 !important;
}
.wp-block-columns.vp-three-columns {
gap: 24px !important;
}
.wp-block-columns.vp-three-columns .wp-block-column {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 32px !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid var(--wp--preset--color--custom-vp-white-15-p) !important;
}
.video-text-overlap-left-wrapper {
flex-direction: column-reverse;
gap: 0;
}
.video-text-overlap-left-wrapper iframe {
width: 100%;
}
.video-text-overlap-left {
margin-left: revert !important;
margin-bottom: 32px !important;
}
.vp-hero-video-text p {
width: 100% !important;
}
#solutions h2 {
padding-bottom: 48px !important;
}
.carousel-images figure {
padding-top: 24px;
}
.carousel-images figure::after {
height: 8px;
top: 8px;
left: 4px;
}
#pricing {
padding-bottom: 96px !important;
gap: 48px !important;
}
.wp-block-columns.vp-pricing-plans {
gap: 48px !important;
}
.wp-block-columns.vp-pricing-plans .wp-block-column {
padding-left: 0 !important;
padding-right: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid var(--wp--preset--color--custom-vp-white-15-p) !important;
padding-top: 48px !important;
}
.wp-block-columns.vp-pricing-plans .wp-block-column:first-child {
border: none !important;
padding-top: 0 !important;
}
.vp-pricing-screenshots {
display: none !important;
}
}
@media screen and (max-width: 600px) {
.vp-header-topbar {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.wp-site-blocks header .wp-block-buttons {
display: none;
}
.vp-slogan-section p br {
display: revert;
}
.vp-slogan-section {
align-items: start !important;
padding-left: 50px !important;
padding-top: 72px !important;
padding-bottom: 72px !important;
width: 100% !important;
}
.vp-footer-links .vp-footer-automattic {
justify-content: center !important;
}
.vp-footer-links-list li {
text-align: center !important;
margin-bottom: 6px;
}
}
.reblogger-note img.avatar {
float: left;
padding: 0;
border: 0;
}
.reblogger-note-content {
margin: 0 0 20px;
}
.wpcom-reblog-snapshot .reblog-from img {
margin: 0 .75em 0 0;
padding: 0;
border: 0;
}
.wpcom-reblog-snapshot .reblogger-note img.avatar {
float: left;
padding: 0;
border: 0;
margin: 0 .5em 0 0;
}
.wpcom-reblog-snapshot {
margin-bottom: 1em;
}
.wpcom-reblog-snapshot p.reblog-from {
margin: 0 0 1em 0;
}
.wpcom-reblog-snapshot p.reblogger-headline {
line-height: 32px;
margin: 0 0 1em 0;
}
.wpcom-reblog-snapshot .reblogged-content {
margin: 0 0 1em 0;
}
.reblog-post .wpcom-enhanced-excerpt-content {
border-left: 3px solid #eee;
padding-left: 15px;
}
.reblog-post ul.thumb-list {
display: block;
list-style: none;
margin: 2px 0;
padding: 0;
clear: both;
}
.reblog-post ul.thumb-list li {
display: inline;
margin: 0;
padding: 0 1px;
border: 0;
}
.reblog-post ul.thumb-list li a {
margin: 0;
padding: 0;
border: 0;
}
.reblog-post ul.thumb-list li img {
margin: 0;
padding: 0;
border: 0;
}
.reblog-post .wpcom-enhanced-excerpt {
clear: both;
}
.reblog-post .wpcom-enhanced-excerpt address,
.reblog-post .wpcom-enhanced-excerpt li,
.reblog-post .wpcom-enhanced-excerpt h1,
.reblog-post .wpcom-enhanced-excerpt h2,
.reblog-post .wpcom-enhanced-excerpt h3,
.reblog-post .wpcom-enhanced-excerpt h4,
.reblog-post .wpcom-enhanced-excerpt h5,
.reblog-post .wpcom-enhanced-excerpt h6,
.reblog-post .wpcom-enhanced-excerpt p {
font-size: 100% !important;
}
.reblog-post .wpcom-enhanced-excerpt blockquote,
.reblog-post .wpcom-enhanced-excerpt pre,
.reblog-post .wpcom-enhanced-excerpt code,
.reblog-post .wpcom-enhanced-excerpt q {
font-size: 98% !important;
}
.reblog-from img {
margin: 0 10px 0 0;
vertical-align: middle;
padding: 0;
border: 0;
}
.reblog-source {
margin-bottom: 0;
font-size: .8em;
line-height: 1;
}
.reblog-source .more-words {
color: #668eaa;
}
.wpcom-reblog-snapshot .reblog-post {
box-shadow: 0 0 0 1px rgba(46, 68, 83, .1) inset, 0 1px 1px rgba(46, 68, 83, .05);
border-radius: 4px;
padding: 24px;
}
.wpcom-reblog-snapshot .reblogger-note {
margin: 0 0 1em 0;
overflow: hidden;
}
.wpcom-reblog-snapshot p.reblogger-headline {
line-height: 32px;
margin: 0 0 1em 0;
}
.wpcom-reblog-snapshot .reblogger-note-content {
margin: 0;
padding: 0;
}
body .wpcom-reblog-snapshot .reblogger-note-content blockquote {
font-style: normal;
font-weight: normal;
font-size: 1em;
margin: 0;
padding: 0;
position: relative;
border: none;
}
.wpcom-reblog-snapshot .reblogger-note-content blockquote p:last-child {
margin-bottom: 0;
}
.geolocation-chip .noticon {
display: inline-block;
vertical-align: middle;
}
.geolocation-chip {
margin-bottom: 1em;
}