1462 lines
23 KiB
CSS
1462 lines
23 KiB
CSS
:root {
|
|
--bg-color: black;
|
|
--primary-color: #0e69eb;
|
|
--white: white;
|
|
--black: black;
|
|
--post-it: #ffd500;
|
|
--secondary-color: #e3f957;
|
|
--yellow-color: #00f6ff;
|
|
--content-color: #c8c8c8;
|
|
--heading-color: #b7b7b7;
|
|
--transparent: transparent;
|
|
--red-color: #f53434;
|
|
--dark-color: #101012;
|
|
--block-transparent: #e4e4e48f;
|
|
--primary-color-faded: #0e69eb80;
|
|
}
|
|
|
|
.w-layout-blockcontainer {
|
|
max-width: 940px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
|
|
.w-layout-grid {
|
|
grid-row-gap: 16px;
|
|
grid-column-gap: 16px;
|
|
grid-template-rows: auto auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
@media screen and (max-width: 991px) {
|
|
.w-layout-blockcontainer {
|
|
max-width: 728px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.w-layout-blockcontainer {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-size: 35px;
|
|
font-weight: 700;
|
|
line-height: 50px;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
line-height: 48px;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
}
|
|
|
|
h5 {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.body {
|
|
background-color: var(--bg-color);
|
|
font-family: Mukta, sans-serif;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #dfdfdf;
|
|
padding: 1vw 2vw;
|
|
font-size: 1.3vw;
|
|
transition: color .2s;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.w--current {
|
|
color: #00f6ff;
|
|
}
|
|
|
|
.nav-menu {
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: none;
|
|
display: flex;
|
|
}
|
|
|
|
.image {
|
|
width: 20vw;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.nav-wrap {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.nav-logo-wrap {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.navbar {
|
|
z-index: 50;
|
|
background-color: #0000;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.nav-link-line {
|
|
background-color: #dfdfdf;
|
|
width: 1px;
|
|
height: 15px;
|
|
}
|
|
|
|
.nav-link-wrap {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.menu-button {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: none;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 8vw;
|
|
padding-right: 8vw;
|
|
}
|
|
|
|
.container.frustrations-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.call-to-action {
|
|
grid-column-gap: .75vw;
|
|
grid-row-gap: .75vw;
|
|
flex-flow: wrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.home-banner-image {
|
|
border-radius: 12px;
|
|
max-width: 65vw;
|
|
overflow: clip;
|
|
box-shadow: 0 0 7vw 1vw #0e69eb;
|
|
}
|
|
|
|
.button {
|
|
grid-column-gap: 1vw;
|
|
grid-row-gap: 1vw;
|
|
color: #000;
|
|
background-color: #0e69eb;
|
|
border: 1px solid #0e69eb;
|
|
border-radius: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: .7vw 1.2vw;
|
|
font-size: 1.4vw;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition: box-shadow .2s, border-color .2s, background-color .2s;
|
|
display: flex;
|
|
box-shadow: 0 5px 20px #e8ff5933;
|
|
}
|
|
|
|
.button:hover {
|
|
box-shadow: none;
|
|
color: #000;
|
|
background-color: #fff;
|
|
border-color: #fff;
|
|
}
|
|
|
|
.button.button-black {
|
|
background-color: var(--black);
|
|
color: var(--white);
|
|
}
|
|
|
|
.button.button-black:hover, .button.button-black.chat-with-us:hover {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.button-icon-wrap {
|
|
justify-content: center;
|
|
align-self: center;
|
|
align-items: center;
|
|
width: 1.5vw;
|
|
height: 1.5vw;
|
|
display: flex;
|
|
}
|
|
|
|
.banner-title-top {
|
|
color: var(--white);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 3vw;
|
|
line-height: 3.2vw;
|
|
}
|
|
|
|
.home-banner-grid {
|
|
grid-column-gap: 4vw;
|
|
grid-row-gap: 4vw;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.black-icon-button {
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
border: 1px solid var(--primary-color);
|
|
color: #fff;
|
|
background-color: #000;
|
|
border-radius: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 14px 25px 12px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition: color .2s, border-color .2s, background-color .2s;
|
|
display: flex;
|
|
}
|
|
|
|
.black-icon-button:hover {
|
|
color: #000;
|
|
background-color: #0e69eb;
|
|
border-color: #0e69eb;
|
|
}
|
|
|
|
.home-banner {
|
|
padding-top: 6vw;
|
|
padding-bottom: 12vw;
|
|
overflow: visible;
|
|
}
|
|
|
|
.home-banner-image-wrap {
|
|
min-width: 140%;
|
|
position: relative;
|
|
}
|
|
|
|
.pi-reality-text {
|
|
color: var(--white);
|
|
text-align: center;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 5px;
|
|
font-family: Varela, sans-serif;
|
|
font-size: 1.3vw;
|
|
font-weight: 600;
|
|
line-height: 1.3vw;
|
|
}
|
|
|
|
.pi-reality-subtitle {
|
|
color: var(--post-it);
|
|
text-align: left;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 5px;
|
|
font-family: Varela Round, sans-serif;
|
|
font-size: 1.5vw;
|
|
font-weight: 400;
|
|
line-height: 1.5vw;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pi-paper-content {
|
|
flex-flow: column;
|
|
padding: 2.6vw;
|
|
display: flex;
|
|
}
|
|
|
|
.pi-paper {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
.pi-block {
|
|
flex-flow: column;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.chaos-section {
|
|
height: 200vh;
|
|
margin-bottom: 6vw;
|
|
}
|
|
|
|
.chaos-sticky {
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
background-image: url('../images/chaos.png');
|
|
background-position: 50% 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 100%;
|
|
background-attachment: scroll;
|
|
flex-flow: column;
|
|
grid-template-rows: 9vw auto 18vw;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: 1fr;
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: grid;
|
|
position: sticky;
|
|
top: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.frustrations-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.frustrations-list {
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.frustration-item {
|
|
flex: none;
|
|
width: 35vw;
|
|
height: 100%;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.align-center {
|
|
z-index: 3;
|
|
text-align: center;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.section-title-wrap {
|
|
color: var(--white);
|
|
max-width: 700px;
|
|
margin: 3vw auto 0;
|
|
position: relative;
|
|
bottom: 0;
|
|
}
|
|
|
|
.section-title-wrap.fed-up {
|
|
margin-bottom: 6vw;
|
|
}
|
|
|
|
.section-title-wrap.wifty {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.schedule-title {
|
|
color: var(--white);
|
|
text-align: center;
|
|
margin-top: 0;
|
|
margin-bottom: 3.5vw;
|
|
font-size: 2vw;
|
|
line-height: 2.3vw;
|
|
}
|
|
|
|
.schedule-title.what-if-we-told-you {
|
|
opacity: 0;
|
|
text-shadow: 0 9px 7px #000;
|
|
margin-bottom: 2vw;
|
|
}
|
|
|
|
.value-block {
|
|
flex-flow: column;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.value-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.value-icon-wrap {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
.value-title {
|
|
color: var(--secondary-color);
|
|
text-align: center;
|
|
margin-top: 0;
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.solution-block {
|
|
grid-column-gap: 2vw;
|
|
grid-row-gap: 2vw;
|
|
opacity: 1;
|
|
-webkit-backdrop-filter: blur(50px);
|
|
backdrop-filter: blur(50px);
|
|
mix-blend-mode: normal;
|
|
background-color: #222224bf;
|
|
border-radius: 20px;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
height: 100%;
|
|
padding: 2vw;
|
|
display: flex;
|
|
box-shadow: 0 10px 15px #00000080;
|
|
}
|
|
|
|
.solution-title {
|
|
color: var(--yellow-color);
|
|
margin-top: 0;
|
|
margin-bottom: 1.7vw;
|
|
font-size: 2vw;
|
|
font-weight: 600;
|
|
line-height: 2.2vw;
|
|
}
|
|
|
|
.solution-icon-wrap {
|
|
background-color: #09090b;
|
|
border-radius: 15px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 8vw;
|
|
height: 8vw;
|
|
padding: 1.5vw;
|
|
display: flex;
|
|
}
|
|
|
|
.footer-logo-wrap {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.footer-widget-area {
|
|
flex-flow: column;
|
|
display: flex;
|
|
}
|
|
|
|
.footer-widget-area.bottom {
|
|
grid-column-gap: 30px;
|
|
grid-row-gap: 30px;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.footer-content-area {
|
|
grid-column-gap: 40px;
|
|
grid-row-gap: 40px;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
}
|
|
|
|
.hover-icon {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.footer-social-link {
|
|
border: 1px solid #fff;
|
|
border-radius: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 35px;
|
|
max-width: 35px;
|
|
min-height: 35px;
|
|
max-height: 35px;
|
|
transition-property: background-color;
|
|
transition-duration: .3s;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.footer-social-link:hover {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.footer-social-wrap {
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 10px;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.footer-content-wrap {
|
|
max-width: 330px;
|
|
}
|
|
|
|
.footer-widget-title {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.copyright-text {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.designer-link {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.designer-link:hover {
|
|
color: #0e69eb;
|
|
}
|
|
|
|
.footer-copyright-area {
|
|
grid-column-gap: 20px;
|
|
grid-row-gap: 20px;
|
|
text-align: center;
|
|
border-top: 1px solid #525252;
|
|
flex-flow: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 35px;
|
|
padding-top: 30px;
|
|
display: flex;
|
|
}
|
|
|
|
.text-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-link {
|
|
color: #fff;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: #0e69eb;
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-column-gap: 50px;
|
|
grid-row-gap: 50px;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: .85fr .5fr .6fr 1fr .7fr;
|
|
margin-top: 140px;
|
|
}
|
|
|
|
.footer-section {
|
|
padding-top: 6vw;
|
|
padding-bottom: 6vw;
|
|
}
|
|
|
|
.banner-text {
|
|
color: var(--content-color);
|
|
margin-bottom: 2vw;
|
|
font-size: 1.5vw;
|
|
line-height: 1.7vw;
|
|
}
|
|
|
|
.pi-title {
|
|
text-align: center;
|
|
height: 2.5vw;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pi-title-text {
|
|
color: var(--post-it);
|
|
text-shadow: 0 9px 7px #000;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 1.5vw;
|
|
line-height: 1.8vw;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pi-top {
|
|
grid-column-gap: 2vw;
|
|
grid-row-gap: 2vw;
|
|
flex-flow: column;
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.pi-reality {
|
|
grid-column-gap: 16px;
|
|
grid-row-gap: 16px;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: 1fr;
|
|
justify-content: flex-start;
|
|
height: 8vw;
|
|
margin-top: 1vw;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-top: 0;
|
|
padding-left: 1vw;
|
|
padding-right: 1vw;
|
|
}
|
|
|
|
.text-span {
|
|
color: var(--post-it);
|
|
}
|
|
|
|
.values-section {
|
|
margin-top: 3vw;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.value-text {
|
|
color: var(--white);
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.values-grid {
|
|
grid-column-gap: 16px;
|
|
grid-row-gap: 16px;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-auto-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
.solution-section {
|
|
margin-top: 3vw;
|
|
padding-top: 0;
|
|
padding-bottom: 4vw;
|
|
}
|
|
|
|
.solutions-grid {
|
|
grid-column-gap: 2vw;
|
|
grid-row-gap: 2vw;
|
|
grid-template-rows: auto auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
.solution-text {
|
|
color: var(--white);
|
|
margin-bottom: 1.7vw;
|
|
font-size: 1.8vw;
|
|
line-height: 2vw;
|
|
}
|
|
|
|
.solution-details {
|
|
color: var(--white);
|
|
font-size: 1.4vw;
|
|
line-height: 1.6vw;
|
|
}
|
|
|
|
.solution-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.text-span-2 {
|
|
color: var(--secondary-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.castleberry-point-grid {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.castleberry-point-map {
|
|
border-radius: 40px;
|
|
}
|
|
|
|
.castleberry-point-content {
|
|
flex-flow: column;
|
|
display: flex;
|
|
}
|
|
|
|
.castleberry-point-subtitle {
|
|
color: var(--white);
|
|
text-shadow: 0 4px 13px var(--black);
|
|
flex: 1;
|
|
margin-top: 1vw;
|
|
font-family: Saira, sans-serif;
|
|
font-size: 3vw;
|
|
font-weight: 800;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.castleberry-point-title {
|
|
color: var(--yellow-color);
|
|
text-shadow: 2px 8px 10px var(--black);
|
|
margin-top: 4vw;
|
|
font-family: Saira, sans-serif;
|
|
font-size: 6vw;
|
|
font-weight: 800;
|
|
line-height: 2vw;
|
|
}
|
|
|
|
.castleberry-point-bottom {
|
|
color: var(--white);
|
|
text-shadow: 0 4px 13px var(--black);
|
|
flex: none;
|
|
margin-top: 0;
|
|
margin-bottom: 4vw;
|
|
font-family: Saira, sans-serif;
|
|
font-size: 3vw;
|
|
font-weight: 800;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.text-span-4, .text-span-5 {
|
|
color: var(--secondary-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.text-span-8 {
|
|
color: var(--yellow-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.italic-text, .italic-text-2 {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.pi-note {
|
|
color: #000;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-family: Gloria Hallelujah, sans-serif;
|
|
font-size: 2vw;
|
|
line-height: 2vw;
|
|
}
|
|
|
|
.pi-reality-content {
|
|
border: 1px solid var(--post-it);
|
|
opacity: 1;
|
|
mix-blend-mode: normal;
|
|
background-color: #000000b8;
|
|
border-radius: 30px;
|
|
flex-flow: row;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: 1fr;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 1vw;
|
|
display: flex;
|
|
box-shadow: 0 10px 11px -8px #000000b3;
|
|
}
|
|
|
|
.text-span-9 {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.banner-title-bottom {
|
|
color: var(--primary-color);
|
|
margin-top: 0;
|
|
margin-bottom: 4vw;
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
}
|
|
|
|
.banner-title-underline {
|
|
color: var(--primary-color);
|
|
background-image: url('../images/underline.svg');
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-attachment: scroll;
|
|
font-size: 3vw;
|
|
line-height: 3.2vw;
|
|
display: inline;
|
|
}
|
|
|
|
.text-span-10 {
|
|
color: var(--yellow-color);
|
|
}
|
|
|
|
.text-span-11 {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.scheduler {
|
|
display: block;
|
|
}
|
|
|
|
.image-3 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.booker {
|
|
background-color: var(--primary-color);
|
|
border-radius: 20px;
|
|
padding: 40px 25px;
|
|
}
|
|
|
|
.joyful-man {
|
|
width: 100%;
|
|
margin-bottom: 2vw;
|
|
}
|
|
|
|
.section-title-wrap-man {
|
|
color: var(--white);
|
|
max-width: 700px;
|
|
margin: 4vw auto 0;
|
|
}
|
|
|
|
.chaos-sticky-top {
|
|
flex: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.chaos-sticky-middle {
|
|
flex: 4 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chaos-sticky-bottom {
|
|
flex-flow: column;
|
|
flex: 4 4 auto;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.button-text {
|
|
align-self: center;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.man-grid {
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.man-text {
|
|
color: var(--white);
|
|
text-align: center;
|
|
text-shadow: 3px 4px 7px #000;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 3.8vw;
|
|
line-height: 3.8vw;
|
|
}
|
|
|
|
.man-text.what-if-we-told-you {
|
|
opacity: 0;
|
|
text-shadow: 0 9px 7px #000;
|
|
}
|
|
|
|
@media screen and (min-width: 1280px) {
|
|
.home-banner-image-wrap {
|
|
min-width: 130%;
|
|
}
|
|
|
|
.pi-block {
|
|
background-size: cover;
|
|
background-attachment: scroll;
|
|
min-height: 375px;
|
|
padding: 20px 15px 15px 25px;
|
|
}
|
|
|
|
.value-icon-wrap {
|
|
overflow: visible;
|
|
}
|
|
|
|
.solution-block {
|
|
-webkit-backdrop-filter: blur(40px);
|
|
backdrop-filter: blur(40px);
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-template-columns: 1fr 1fr .75fr 1fr .75fr;
|
|
}
|
|
|
|
.pi-reality {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.pi-note {
|
|
font-size: 1.8vw;
|
|
}
|
|
|
|
.pi-reality-content {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.banner-title-bottom {
|
|
font-size: 55px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1440px) {
|
|
.home-banner-image {
|
|
box-shadow: 0 2px 120px 20px #0e69eb;
|
|
}
|
|
|
|
.home-banner-image-wrap {
|
|
min-width: 160%;
|
|
}
|
|
|
|
.pi-block {
|
|
padding-bottom: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.section-title-wrap {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.schedule-title {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.castleberry-point-subtitle {
|
|
font-size: 38px;
|
|
}
|
|
|
|
.castleberry-point-title {
|
|
text-shadow: -2px 2px 7px var(--black);
|
|
margin-top: 90px;
|
|
font-size: 60px;
|
|
}
|
|
|
|
.castleberry-point-bottom {
|
|
text-shadow: -2px 2px 7px var(--black);
|
|
margin-bottom: 90px;
|
|
font-size: 38px;
|
|
}
|
|
|
|
.text-span-4, .text-span-5 {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.text-span-8 {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.section-title-wrap-man {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.man-text {
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1920px) {
|
|
.image {
|
|
width: 15vw;
|
|
}
|
|
|
|
.home-banner-image-wrap {
|
|
min-width: 180%;
|
|
}
|
|
|
|
.pi-reality-text {
|
|
font-size: 1vw;
|
|
line-height: 1.2vw;
|
|
}
|
|
|
|
.pi-reality-subtitle {
|
|
font-size: 1.2vw;
|
|
}
|
|
|
|
.frustration-item {
|
|
width: 25vw;
|
|
}
|
|
|
|
.reality-section {
|
|
background-color: #18181c;
|
|
}
|
|
|
|
.solution-block {
|
|
grid-column-gap: 1.5vw;
|
|
grid-row-gap: 1.5vw;
|
|
padding: 1.5vw;
|
|
}
|
|
|
|
.solution-title {
|
|
margin-bottom: 1vw;
|
|
font-size: 1.4vw;
|
|
line-height: 1.6vw;
|
|
}
|
|
|
|
.banner-text {
|
|
font-size: 35px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.solutions-wrap {
|
|
margin-top: 3vw;
|
|
}
|
|
|
|
.solution-text {
|
|
margin-bottom: 1vw;
|
|
font-size: 1vw;
|
|
line-height: 1.2vw;
|
|
}
|
|
|
|
.solution-details {
|
|
font-size: .8vw;
|
|
line-height: 1vw;
|
|
}
|
|
|
|
.pi-note {
|
|
font-size: 1.2vw;
|
|
line-height: 1.2vw;
|
|
}
|
|
|
|
.banner-title-underline {
|
|
font-size: 60px;
|
|
line-height: 60px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 991px) {
|
|
.nav-link {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.nav-menu {
|
|
background-color: #18181c;
|
|
max-width: none;
|
|
padding: 35px;
|
|
}
|
|
|
|
.nav-wrap {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.nav-link-line {
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
|
|
.nav-link-wrap {
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.menu-button {
|
|
color: var(--white);
|
|
border: 1px solid #00f6ff;
|
|
border-radius: 5px;
|
|
padding: 1.5vw;
|
|
}
|
|
|
|
.menu-button.w--open {
|
|
color: #00f6ff;
|
|
background-color: #0000;
|
|
}
|
|
|
|
.call-to-action {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.home-banner-image {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.home-banner-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.home-banner-image-wrap {
|
|
min-width: auto;
|
|
}
|
|
|
|
.frustration-item {
|
|
width: 40vw;
|
|
}
|
|
|
|
.value-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.solution-title {
|
|
font-size: 3vw;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.footer-copyright-area {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-column-gap: 35px;
|
|
grid-row-gap: 35px;
|
|
flex-flow: wrap;
|
|
grid-template-columns: 1fr .4fr .7fr;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.solutions-grid {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.solution-text {
|
|
font-size: 2.5vw;
|
|
line-height: 2.5vw;
|
|
}
|
|
|
|
.solution-details {
|
|
font-size: 2vw;
|
|
line-height: 2vw;
|
|
}
|
|
|
|
.pi-note {
|
|
font-size: 2.4vw;
|
|
line-height: 2.4vw;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.call-to-action {
|
|
grid-column-gap: 2vw;
|
|
grid-row-gap: 2vw;
|
|
}
|
|
|
|
.button {
|
|
padding-top: 1.4vw;
|
|
padding-bottom: 1.4vw;
|
|
}
|
|
|
|
.button-icon-wrap {
|
|
width: 3.5vw;
|
|
height: 3.5vw;
|
|
}
|
|
|
|
.banner-title-top {
|
|
font-size: 5vw;
|
|
line-height: 5vw;
|
|
}
|
|
|
|
.home-banner-image-wrap {
|
|
margin-top: 4vw;
|
|
}
|
|
|
|
.pi-reality-text {
|
|
font-size: 2.5vw;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.pi-reality-subtitle {
|
|
font-size: 2.5vw;
|
|
line-height: 2.5vw;
|
|
}
|
|
|
|
.pi-paper-content {
|
|
padding: 5vw;
|
|
}
|
|
|
|
.chaos-sticky {
|
|
grid-template-rows: 20vw auto 40vw;
|
|
}
|
|
|
|
.frustration-item {
|
|
width: 60vw;
|
|
}
|
|
|
|
.schedule-title {
|
|
margin-bottom: 6vw;
|
|
font-size: 5.5vw;
|
|
line-height: 6vw;
|
|
}
|
|
|
|
.solution-block {
|
|
grid-column-gap: 2.7vw;
|
|
grid-row-gap: 2.7vw;
|
|
padding: 3vw;
|
|
}
|
|
|
|
.solution-title {
|
|
font-size: 4vw;
|
|
line-height: 4.4vw;
|
|
}
|
|
|
|
.solution-icon-wrap {
|
|
min-width: 80px;
|
|
max-width: 80px;
|
|
min-height: 80px;
|
|
max-height: 80px;
|
|
}
|
|
|
|
.footer-content-wrap {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.footer-copyright-area {
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 10px;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-template-columns: .75fr 1fr;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.footer-section {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.banner-text {
|
|
margin-bottom: 5vw;
|
|
font-size: 3vw;
|
|
line-height: 3.4vw;
|
|
}
|
|
|
|
.pi-title {
|
|
height: 9vw;
|
|
}
|
|
|
|
.pi-title-text {
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
}
|
|
|
|
.pi-reality {
|
|
height: 20vw;
|
|
}
|
|
|
|
.values-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.solutions-grid {
|
|
grid-column-gap: 4vw;
|
|
grid-row-gap: 4vw;
|
|
}
|
|
|
|
.solution-text, .solution-details {
|
|
font-size: 3.3vw;
|
|
line-height: 3.7vw;
|
|
}
|
|
|
|
.pi-note {
|
|
font-size: 3.6vw;
|
|
line-height: 3.6vw;
|
|
}
|
|
|
|
.pi-reality-content {
|
|
grid-column-gap: 1vw;
|
|
grid-row-gap: 1vw;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.banner-title-bottom {
|
|
margin-bottom: 6vw;
|
|
font-size: 5vw;
|
|
line-height: 5vw;
|
|
}
|
|
|
|
.banner-title-underline {
|
|
font-size: 5vw;
|
|
line-height: 5vw;
|
|
}
|
|
|
|
.button-text {
|
|
font-size: 3vw;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.man-text {
|
|
margin-bottom: 6vw;
|
|
font-size: 5.5vw;
|
|
line-height: 5.5vw;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 479px) {
|
|
.nav-menu {
|
|
padding: 25px;
|
|
}
|
|
|
|
.image {
|
|
width: 40vw;
|
|
}
|
|
|
|
.call-to-action {
|
|
flex-flow: row;
|
|
}
|
|
|
|
.button-icon-wrap {
|
|
width: 5vw;
|
|
height: 5vw;
|
|
}
|
|
|
|
.banner-title-top {
|
|
font-size: 6vw;
|
|
line-height: 6vw;
|
|
}
|
|
|
|
.pi-reality-text {
|
|
font-size: 3vw;
|
|
line-height: 3.4vw;
|
|
}
|
|
|
|
.pi-reality-subtitle {
|
|
font-size: 3vw;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.chaos-sticky {
|
|
left: 0;
|
|
}
|
|
|
|
.frustration-item {
|
|
width: 80vw;
|
|
}
|
|
|
|
.value-icon-wrap {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.value-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.solution-block {
|
|
border-radius: 15px;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.solution-icon-wrap {
|
|
min-width: 70px;
|
|
max-width: 70px;
|
|
min-height: 70px;
|
|
max-height: 70px;
|
|
}
|
|
|
|
.footer-content-area {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-content-wrap {
|
|
max-width: none;
|
|
}
|
|
|
|
.footer-copyright-area {
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-column-gap: 80px;
|
|
grid-row-gap: 50px;
|
|
grid-template-columns: 1fr;
|
|
margin-top: 60px;
|
|
display: flex;
|
|
}
|
|
|
|
.footer-section {
|
|
padding-top: 80px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.banner-text {
|
|
font-size: 4vw;
|
|
line-height: 4.2vw;
|
|
}
|
|
|
|
.pi-title {
|
|
height: 9vw;
|
|
}
|
|
|
|
.pi-title-text {
|
|
font-size: 5vw;
|
|
line-height: 5vw;
|
|
}
|
|
|
|
.pi-top {
|
|
grid-column-gap: 3vw;
|
|
grid-row-gap: 3vw;
|
|
}
|
|
|
|
.values-grid {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pi-note {
|
|
font-size: 4.5vw;
|
|
line-height: 4.5vw;
|
|
}
|
|
|
|
.banner-title-bottom, .banner-title-underline {
|
|
font-size: 6vw;
|
|
line-height: 6vw;
|
|
}
|
|
|
|
.button-text {
|
|
font-size: 3vw;
|
|
line-height: 3vw;
|
|
}
|
|
|
|
.text-block-2 {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
#w-node-fcf31704-7989-722e-afb7-b3e19da4ba2d-c6b67b4a, #w-node-fcf31704-7989-722e-afb7-b3e19da4ba2e-c6b67b4a, #w-node-_5659da0b-eb13-063b-a27c-b0810245f037-c6b67b4a, #w-node-_5659da0b-eb13-063b-a27c-b0810245f038-c6b67b4a, #w-node-_5659da0b-eb13-063b-a27c-b0810245f03a-c6b67b4a, #w-node-_6400dd1e-1717-9058-b716-da336fdb5e2a-c6b67b4a {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
#w-node-_95d19cf3-e585-e146-8a2e-637065a6ae06-c6b67b4a {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
place-self: center;
|
|
}
|
|
|
|
#w-node-_17f1c697-ca96-8716-6c01-14a839af3728-c6b67b4a, #w-node-_9cfbcd91-6607-b16e-f76d-db2a37c942bd-c6b67b4a {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
@media screen and (min-width: 1920px) {
|
|
#w-node-fcf31704-7989-722e-afb7-b3e19da4ba2e-c6b67b4a {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
}
|
|
|
|
|