Created
March 27, 2024 18:00
-
-
Save stuartchaney/d525c79bde908081d8fef3fd36b2d841 to your computer and use it in GitHub Desktop.
Rivo Landing Page Base CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**************************\ | |
Rivo Modal Styles | |
/**************************/ | |
.rivo-modal { | |
text-align:center; | |
} | |
.rivo-modal__overlay { | |
z-index: 999999999999; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: rgba(0,0,0,0.6); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.rivo-modal__container { | |
width: 100%; | |
background-color: #fff; | |
padding: 60px; | |
max-width: 600px; | |
max-height: 100vh; | |
border-radius: 4px; | |
overflow-y: auto; | |
box-sizing: border-box; | |
} | |
.rivo-modal__header { | |
text-align: center; | |
} | |
.rivo-modal__title { | |
margin-top: 0; | |
margin-bottom: 0; | |
font-weight: 600; | |
font-size: 22px; | |
box-sizing: border-box; | |
} | |
.rivo-modal__close { | |
background: transparent; | |
border: 0; | |
position: absolute; | |
top: 10px; | |
right: 10px; | |
font: inherit; | |
cursor: pointer; | |
outline: inherit; | |
} | |
.rivo-modal__close:hover{ | |
cursor: pointer; | |
} | |
.rivo-modal__header .rivo-modal__close:before { content: "\2715"; } | |
.rivo-modal__content { | |
position: relative; | |
padding: 20px; | |
line-height: 1.5; | |
color: rgba(0,0,0,.8); | |
} | |
.rivo-modal-body-content{ | |
margin-bottom: 20px; | |
} | |
.rivo-modal__btn { | |
font-size: .875rem; | |
padding-left: 1rem; | |
padding-right: 1rem; | |
padding-top: .5rem; | |
padding-bottom: .5rem; | |
background-color: #e6e6e6; | |
color: rgba(0,0,0,.8); | |
border-radius: .25rem; | |
border-style: none; | |
border-width: 0; | |
cursor: pointer; | |
-webkit-appearance: button; | |
text-transform: none; | |
overflow: visible; | |
line-height: 1.15; | |
margin: 0; | |
will-change: transform; | |
-moz-osx-font-smoothing: grayscale; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform: translateZ(0); | |
transform: translateZ(0); | |
transition: -webkit-transform .25s ease-out; | |
transition: transform .25s ease-out; | |
transition: transform .25s ease-out,-webkit-transform .25s ease-out; | |
} | |
.rivo-modal-button{ | |
position: relative; | |
} | |
.rivo-modal__btn:focus, .rivo-modal__btn:hover { | |
-webkit-transform: scale(1.05); | |
transform: scale(1.05); | |
} | |
.rivo-modal__btn-primary { | |
background-color: #00449e; | |
color: #fff; | |
} | |
.rivo-modal-title-content{ | |
display: flex; | |
justify-content: center; | |
gap: 15px; | |
margin-bottom: 15px; | |
} | |
.rivo-modal-title-icon{ | |
display: flex; | |
align-items: center; | |
} | |
.rivo-modal-title-icon svg{ | |
height: 40px; | |
width: 40px; | |
} | |
.rivo-modal-title-text{ | |
text-align: left; | |
display: flex; | |
flex-direction: column; | |
} | |
@keyframes mmfadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
@keyframes mmfadeOut { | |
from { opacity: 1; } | |
to { opacity: 0; } | |
} | |
@keyframes mmslideIn { | |
from { transform: translateY(15%); } | |
to { transform: translateY(0); } | |
} | |
@keyframes mmslideOut { | |
from { transform: translateY(0); } | |
to { transform: translateY(-10%); } | |
} | |
.micromodal-slide { | |
display: none; | |
} | |
.micromodal-slide.is-open { | |
display: block; | |
} | |
.micromodal-slide[aria-hidden="false"] .rivo-modal__overlay { | |
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
} | |
.micromodal-slide[aria-hidden="false"] .rivo-modal__container { | |
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); | |
} | |
.micromodal-slide[aria-hidden="true"] .rivo-modal__overlay { | |
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
} | |
.micromodal-slide[aria-hidden="true"] .rivo-modal__container { | |
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); | |
} | |
.micromodal-slide .rivo-modal__container, | |
.micromodal-slide .rivo-modal__overlay { | |
will-change: transform; | |
} | |
/**************************\ | |
Rivo General Styles | |
/**************************/ | |
.shopify-section{ | |
background: var(--rivo-page-background-color) !important; | |
background-color: var(--rivo-page-background-color) !important; | |
} | |
.rivo-lp-content{ | |
max-width: var(--rivo-lp-content-page-width, var(--page-width)); | |
margin-left: auto; | |
margin-right: auto; | |
padding: 0px; | |
} | |
.rivo-lp-content div:empty{ | |
display: flex; | |
} | |
.rivo-content-wrapper{ | |
display: flex; | |
justify-content: center; | |
text-align: center; | |
padding-top: var(--rivo-page-section-padding); | |
padding-bottom: var(--rivo-page-section-padding); | |
} | |
.rivo-button{ | |
font-size: 1.5rem; | |
letter-spacing: .1rem; | |
line-height: calc(1 + .2 / 1); | |
display: inline-flex; | |
justify-content: center; | |
align-items: center; | |
border: 0; | |
padding: 0 5rem; | |
cursor: pointer; | |
font: inherit; | |
text-decoration: none; | |
color: rgb(var(--color-button-text)); | |
transition: box-shadow var(--duration-short) ease; | |
-webkit-appearance: none; | |
appearance: none; | |
background-color: rgba(var(--color-button),var(--alpha-button-background)); | |
min-width: calc(12rem + 1px * 2); | |
min-height: calc(4.5rem + 1px * 2); | |
} | |
.rivo-lp-section-title{ | |
font-size: var(--rivo-page-section-title-font-size); | |
color: var(--rivo-page-section-title-font-color); | |
font-family: var(--rivo-title-font-family); | |
font-weight: 600; | |
} | |
.rivo-lp-section-subtitle{ | |
font-size: var(--rivo-page-section-subtitle-font-size); | |
color: var(--rivo-page-section-subtitle-font-color); | |
font-family: var(--rivo-subtitle-font-family); | |
padding-top: 15px; | |
} | |
[x-cloak] { display: none !important; } | |
.rivo-loading-spinner { | |
color: transparent!important; | |
pointer-events: none; | |
} | |
.rivo-loading-spinner::after { | |
animation: loading .5s infinite linear; | |
background: 0 0; | |
border: .1rem solid #EEEEEE; | |
border-radius: 50%; | |
border-right-color: transparent; | |
border-top-color: transparent; | |
content: ""; | |
display: block; | |
height: 20px; | |
left: 50%; | |
margin-left: -10px; | |
margin-top: -10px; | |
opacity: 1; | |
padding: 0; | |
position: absolute; | |
top: 50%; | |
width: 20px; | |
z-index: 1 | |
} | |
@keyframes loading { | |
0% { | |
transform: rotate(0) | |
} | |
100% { | |
transform: rotate(360deg) | |
} | |
} | |
.rivo-lp-skeleton-loader { | |
position: relative; | |
width: 100%; | |
height: 20px; | |
overflow: hidden; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.rivo-lp-skeleton-loader:after { | |
content: ''; | |
display: block; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
left: 0; | |
top: 0; | |
background-repeat: no-repeat; | |
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), | |
linear-gradient(#eceaea 25px, transparent 0), | |
linear-gradient(#ffffff 100%, transparent 0); | |
background-size: 50vw 100%, 100% 25px, 100% 100%; | |
animation: skeleton-animation 2s infinite linear; | |
} | |
@keyframes skeleton-animation { | |
from { | |
background-position: -100% 0, 0 0, 0 0; | |
} | |
to { | |
background-position: 100% 0, 0 0, 0 0; | |
} | |
} | |
.rivo-content div:empty{ | |
display: inherit; | |
} | |
/**************************\ | |
Rivo Header Styles | |
/**************************/ | |
.rivo-hero-banner-media{ | |
height: 100%; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
display: block; | |
background-color: var(--rivo-hero-banner-background-color); | |
overflow: hidden; | |
width: 100%; | |
} | |
.rivo-hero-banner-media img{ | |
object-fit: cover; | |
object-position: center; | |
transform: scale(1); | |
transition: opacity .4s cubic-bezier(.25,.46,.45,.94); | |
display: block; | |
max-width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
} | |
h1.rivo-hero-title{ | |
color: var(--rivo-hero-banner-desktop-text-color); | |
font-size: var(--rivo-hero-banner-title-desktop-font-size); | |
font-family: var(--rivo-title-font-family); | |
margin: 0; | |
padding: 0; | |
} | |
.rivo-hero-description{ | |
margin-top: 1rem; | |
font-size: var(--rivo-hero-banner-subtitle-desktop-font-size); | |
color: var(--rivo-hero-banner-desktop-text-color); | |
margin: 0px; | |
padding: 0px; | |
padding-top: var(--rivo-hero-banner-text-padding); | |
padding-bottom: var(--rivo-hero-banner-text-padding); | |
} | |
.rivo-hero-banner-wrapper{ | |
display: flex; | |
position: relative; | |
width: 100%; | |
justify-content: flex-start; | |
text-align: left; | |
height: 100%; | |
padding: 5rem; | |
padding-left: 0px; | |
padding-top: var(--rivo-hero-banner-desktop-padding-top); | |
} | |
.rivo-hero-banner-media img{ | |
filter: brightness(var(--rivo-hero-banner-desktop-brightness)); | |
} | |
.rivo-desktop-justify-left{ | |
justify-content: flex-start; | |
} | |
.rivo-desktop-justify-center{ | |
justify-content: center; | |
} | |
.rivo-desktop-justify-right{ | |
justify-content: flex-end; | |
} | |
.rivo-desktop-text-align-center .rivo-hero-title, .rivo-desktop-text-align-center .rivo-hero-description{ | |
text-align: var(--rivo-hero-banner-desktop-text-align); | |
width: 100%; | |
} | |
.rivo-desktop-text-align-center .rivo-hero-buttons{ | |
width: 100%; | |
max-width: none; | |
justify-content: center; | |
} | |
.rivo-hero-banner-text{ | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
max-width: 50%; | |
align-items: flex-start; | |
text-align: left; | |
background: var(--rivo-hero-banner-desktop-background-color); | |
padding: 4rem 3.5rem; | |
position: relative; | |
height: fit-content; | |
width: auto; | |
min-width: 540px; | |
max-width: var(--rivo-hero-banner-text-container-desktop-max-width); | |
} | |
.rivo-hero-buttons{ | |
display: inline-flex; | |
flex-wrap: wrap; | |
gap: 2rem; | |
max-width: 45rem; | |
word-break: break-word; | |
margin-top: 0px; | |
} | |
#rivo-lp-header{ | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
position: relative; | |
height: var(--rivo-hero-banner-desktop-height, 400px); | |
background-color: var(--rivo-hero-banner-background-color); | |
} | |
#rivo-how-it-works{ | |
display: flex; | |
justify-content: center; | |
text-align: center; | |
flex-direction: column; | |
margin-bottom: 40px; | |
} | |
#rivo-ways-to-earn{ | |
display: flex; | |
justify-content: center; | |
text-align:center; | |
} | |
.rivo-how-it-works-steps{ | |
display: flex; | |
justify-content: center; | |
margin-top: 30px; | |
} | |
.rivo-step-item{ | |
flex-basis: 31%; | |
padding: 0px 30px; | |
} | |
.rivo-how-it-works-step-number{ | |
font-size: 32px; | |
font-weight: 600; | |
} | |
.step-type-border .rivo-how-it-works-step-number{ | |
width: 70px; | |
height: 70px; | |
border-radius: 50%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-align: center; | |
border: 4px solid var(--rivo-primary-color); | |
margin: auto; | |
margin-bottom: 15px; | |
color: var(--rivo-primary-color); | |
} | |
.rivo-how-it-works-step-image img{ | |
height: var(--rivo-step-image-height); | |
} | |
.rivo-how-it-works-step-title{ | |
font-size: var(--rivo-step-title-font-size); | |
font-weight: 600; | |
padding-bottom: 10px; | |
padding-top: 10px; | |
color: var(--rivo-step-font-color); | |
} | |
.rivo-how-it-works-step-subtitle{ | |
font-size: var(--rivo-step-subtitle-font-size); | |
color: var(--rivo-step-font-color); | |
} | |
.rivo-lp-cards-container{ | |
display: flex; | |
align-items: stretch; | |
flex-flow: row wrap; | |
justify-content: center; | |
margin: 40px 0; | |
gap: 15px; | |
flex-wrap: wrap; | |
width: 960px; | |
} | |
.arrow.right { | |
transform: rotate(180deg) | |
} | |
.arrow { | |
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%238d8d8f' fill-rule='nonzero' d='M11.78 5.53a.75.75 0 0 0-1.06-1.06l-5 5a.75.75 0 0 0 0 1.06l5 5a.75.75 0 0 0 1.06-1.06L7.31 10l4.47-4.47z'/%3E%3C/svg%3E"); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: 50%; | |
opacity: .7; | |
transition: opacity .20s ease-in-out; | |
height: 25px; | |
width: 25px; | |
} | |
.rivo-lp-cards-container .item-box:not(.unhoverable){ | |
cursor: pointer; | |
} | |
.rivo-lp-cards-container .item-box:hover:not(.unhoverable){ | |
background: #f8f8f8 !important; | |
} | |
.rivo-success-button{ | |
position: relative; | |
color: transparent; | |
} | |
.rivo-success-button:before{ | |
content: ""; | |
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23eee' fill-rule='non-zero' /%3E%3C/svg%3E"); | |
background-size: 30px; | |
background-repeat: no-repeat; | |
width: 30px; | |
height: 30px; | |
z-index: 99; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
margin: auto; | |
display: block; | |
position: absolute; | |
-webkit-transform: translateZ(0); | |
-ms-transform: translateZ(0); | |
transform: translateZ(0); | |
-webkit-animation: load8 .6s infinite linear; | |
animation: load8 .6s infinite linear; | |
border: none!important; | |
-webkit-animation: none!important; | |
animation: none!important; | |
} | |
.rivo-success-button:after { | |
left: 0!important; | |
height: 100%!important; | |
width: 100%!important; | |
content: ""; | |
display: block!important; | |
position: absolute!important; | |
top: 0!important; | |
} | |
.rivo-card{ | |
all: unset; | |
position: relative; | |
flex-basis: 31%; | |
max-width: 275px; | |
display: flex; | |
justify-content: flex-start; | |
align-items: center; | |
flex-direction: column; | |
cursor: pointer; | |
padding: 25px 0px; | |
transition: all .3s ease; | |
background: var(--rivo-card-background-color); | |
color: var(--rivo-card-font-color); | |
min-width: 200px; | |
border-radius: var(--rivo-card-corners); | |
} | |
.rivo-card:hover:not(.rivo-no-click){ | |
transform: translateY(-2px); | |
opacity: 0.9; | |
} | |
.rivo-card-horizontal{ | |
flex-direction: row; | |
gap: 15px; | |
padding: 15px; | |
text-align: left; | |
min-height: 100px; | |
justify-content: flex-start; | |
} | |
.rivo-card.completed{ | |
opacity: 0.5; | |
cursor: default; | |
} | |
.rivo-card .rivo-completed{ | |
position: relative; | |
padding-top: 5px; | |
opacity: 0.4; | |
} | |
.rivo-completed svg{ | |
height: 20px; | |
width: 20px; | |
} | |
.rivo-card-icon svg, .rivo-card-icon img{ | |
height: var(--rivo-card-icon-size) !important; | |
width: var(--rivo-card-icon-size) !important; | |
} | |
.svg-icon path{ | |
fill: var(--rivo-page-icon-color); | |
} | |
.rivo-card-body{ | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.rivo-card-title{ | |
font-size: var(--rivo-card-title-font-size); | |
font-weight: 600; | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
.rivo-card-description{ | |
font-size: var(--rivo-card-subtitle-font-size); | |
transition: color 0.3ms ease-in; | |
padding-top: 5px; | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
.rivo-lp-customer-activity{ | |
margin-top: 20px; | |
} | |
img.custom-icon{ | |
height: 48px; | |
} | |
.rivo-copy-coupon{ | |
display: flex; | |
margin-bottom: 15px; | |
margin-top: 30px; | |
align-items: center; | |
} | |
input.rivo-coupon-code{ | |
width: 100%; | |
padding: 15px; | |
font-weight: 600; | |
font-family: monospace; | |
text-align: center; | |
} | |
input.rivo-coupon-code:focus{ | |
outline:none; | |
box-shadow: none; | |
} | |
.rivo-activity{ | |
padding-top: 40px; | |
} | |
#points-logs-activity{ | |
margin-left: auto; | |
margin-right: auto; | |
min-width: 700px; | |
box-shadow: none; | |
background: transparent; | |
} | |
#points-logs-activity thead{ | |
background: var(--rivo-primary-color); | |
color: var(--rivo-secondary-color); | |
text-align: left; | |
} | |
#points-logs-activity th{ | |
background: transparent; | |
text-transform: uppercase; | |
border: none; | |
} | |
#points-logs-activity th, #points-logs-activity td{ | |
text-align: left; | |
} | |
#points-logs-activity td{ | |
background: transparent; | |
border: none; | |
border-bottom: 1px solid; | |
} | |
button.rivo-copy-button{ | |
background-color: transparent; | |
cursor: pointer; | |
border: none; | |
position: absolute; | |
right: 25px; | |
} | |
input.rivo-form-input::focus{ | |
box-shadow: none; | |
outline: none; | |
outline-offset: none; | |
} | |
input.one-input::focus{ | |
box-shadow: none; | |
outline: none; | |
outline-offset: none; | |
} | |
.one-input:not(:last-child) { | |
margin-right: 3px; | |
} | |
.one-input { | |
width: 40px; | |
padding: 10px; | |
text-align: center; | |
} | |
.dob-container{ | |
margin-bottom: 15px; | |
margin-top: 15px; | |
} | |
.dob-month-label{ | |
width: 60px; | |
display: inline-block; | |
font-weight: bold; | |
text-align: left; | |
padding-right: 10px; | |
} | |
.dob-fields{ | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
/**************************\ | |
Rivo Utility Styles | |
/**************************/ | |
.rivo-text-right{ | |
text-align: right !important; | |
} | |
.mt-10{ | |
margin-top: 10px; | |
} | |
.mb-5{ | |
margin-bottom: 5px; | |
} | |
.rivo-no-click{ | |
cursor: default; | |
} | |
/**************************\ | |
Rivo Mobile Overrides | |
/**************************/ | |
@media screen and (max-width: 749px){ | |
.rivo-content{ | |
width: 100%; | |
padding-left: 0px; | |
padding-right: 0px; | |
} | |
.rivo-lp-content{ | |
max-width: 100%; | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
#rivo-lp-header{ | |
height: fit-content; | |
} | |
.rivo-hero-banner-media{ | |
height: 28rem; | |
position: relative; | |
} | |
.rivo-hero-banner-wrapper{ | |
order: 2; | |
flex-grow: 1; | |
padding: 0; | |
display: flex; | |
position: relative; | |
width: 100%; | |
align-items: center; | |
justify-content: center; | |
z-index: 2; | |
padding-top: var(--rivo-hero-banner-mobile-padding-top); | |
} | |
.rivo-hero-banner-media img{ | |
transform: scale(1) !important; | |
object-position: center !important; | |
} | |
.rivo-hero-banner-text{ | |
width: 100%; | |
padding: 20px; | |
min-width: auto; | |
max-width: 100%; | |
} | |
.rivo-hero-banner-text > div{ | |
width: 100%; | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.rivo-steps{ | |
flex-direction: column; | |
} | |
.rivo-step-item{ | |
margin-top: 50px; | |
} | |
.rivo-hero-buttons{ | |
flex-direction: column; | |
width: 100%; | |
} | |
h1.rivo-hero-title, .rivo-hero-description{ | |
color: var(--rivo-hero-banner-desktop-text-color); | |
text-align: var(--rivo-hero-banner-mobile-text-align); | |
width: 100%; | |
} | |
.rivo-hero-buttons{ | |
width: 100%; | |
max-width: none; | |
justify-content: center; | |
} | |
.rivo-hero-banner-text{ | |
background: var(--rivo-hero-banner-mobile-background-color); | |
} | |
.rivo-hero-banner-text h1, .rivo-hero-banner-text p{ | |
text-align: var(--rivo-hero-banner-mobile-text-align); | |
color: var(--rivo-hero-banner-mobile-text-color); | |
} | |
#points-logs-activity{ | |
min-width: unset; | |
width: 100%; | |
} | |
.rivo-how-it-works-steps{ | |
flex-direction: column; | |
} | |
.rivo-lp-cards-container{ | |
max-width: 960px !important; | |
width: unset !important; | |
} | |
.rivo-card{ | |
min-width: 44%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment