%PDF-
%PDF-
Mini Shell
Mini Shell
// Homepage
body.page-template-homepage {
#primary.homepage-primary {
color: $white;
background-color: $secondary;
counter-reset: section -1;
div.section {
counter-increment: section;
h4:first-child {
margin-bottom: 32px;
}
&::before {
content: counter(section);
position: absolute;
top: 60%;
left: -60px;
top: calc(50% + 100px);
font-size: 240px;
font-weight: 500;
color: rgba(255,255,255,0.04);
}
&:nth-child(-n+9):before {
content: '0'counter(section);
}
&:nth-child(1):before {
content: '';
}
}
div.section:nth-child(1) {
background: $secondary;
@media (min-width: $breakpoint-lg) {
background-image: linear-gradient(to bottom, $secondary 0%,$secondary calc(50% + 85px),$lightpeach calc(50% + 85px),$lightpeach 100%);
}
@media (min-width: $breakpoint-xl) {
background-image: linear-gradient(to bottom, $secondary 0%,$secondary calc(50% + 90px),$lightpeach calc(50% + 90px),$lightpeach 100%);
}
@media (min-width: $breakpoint-xxl) {
background-image: linear-gradient(to bottom, $secondary 0%,$secondary calc(50% + 110px),$lightpeach calc(50% + 110px),$lightpeach 100%);
}
.wp-block-column:first-child {
display: flex;
flex-direction: column;
.wp-block-button {
margin-top: 10px;
@media (min-width: $breakpoint-xl) {
margin-top: 15px;
}
@media (min-width: $breakpoint-xxl) {
margin-top: 40px;
}
}
}
}
div.section:nth-child(2) {
background-color: $lightpeach;
color: $secondary;
@media (min-width: $breakpoint-lg) {
color: $white;
background-image: linear-gradient(to right, $darkblue 0%,$darkblue 50%,$secondary 50%,$secondary 100%),linear-gradient(to bottom, $lightpeach 0%,$lightpeach calc(50% - 140px),$secondary calc(50% - 140px),$secondary 100%);
}
@media (min-width: $breakpoint-xl) {
background-image: linear-gradient(to right, $darkblue 0%,$darkblue 50%,$secondary 50%,$secondary 100%),linear-gradient(to bottom, $lightpeach 0%,$lightpeach calc(50% - 175px),$secondary calc(50% - 175px),$secondary 100%);
}
@media (min-width: $breakpoint-xxl) {
background-image: linear-gradient(to right, $darkblue 0%,$darkblue 50%,$secondary 50%,$secondary 100%),linear-gradient(to bottom, $lightpeach 0%,$lightpeach calc(50% - 210px),$secondary calc(50% - 210px),$secondary 100%);
}
background-repeat: no-repeat;
background-size: 100% 100px, 100% 100%;
background-position: 0 100%;
h4:first-child {
color: $secondary;
}
}
div.section:nth-child(3) {
background-color: $darkblue;
@media (min-width: $breakpoint-lg) {
background: linear-gradient(to right, $darkblue 0%,$darkblue 50%,$secondary 50%,$secondary 100%);
}
h4:first-child {
color: $primary;
}
}
div.section:nth-child(4) {
@media (min-width: $breakpoint-lg) {
background: linear-gradient(to top, $darkblue 0%,$darkblue 100px,$secondary 100px,$secondary 100%);
h4:first-child {
color: $secondary;
}
}
}
div.section:nth-child(5) {
@media (min-width: $breakpoint-lg) {
background-image: linear-gradient(to bottom, $darkblue 0%,$darkblue calc(50% - 208px),$secondary calc(50% - 208px),$secondary 100%);
}
@media (min-width: $breakpoint-xl) {
background-image: linear-gradient(to bottom, $darkblue 0%,$darkblue calc(50% - 200px),$secondary calc(50% - 200px),$secondary 100%);
}
@media (min-width: $breakpoint-xxl) {
background-image: linear-gradient(to bottom, $darkblue 0%,$darkblue calc(50% - 210px),$secondary calc(50% - 210px),$secondary 100%);
}
h4:first-child {
color: $primary;
}
}
div.section:nth-child(6), div.section:nth-child(7){
.fp-controlArrow.fp-prev {
right: auto;
left: calc(50% - 48px);
}
.fp-controlArrow.fp-next {
right: auto;
left: 50%;
}
@media (min-width: $breakpoint-lg) {
.fp-controlArrow.fp-prev {
top: calc(50% + 175px);
right: auto;
left: calc(33% - 96px);
}
.fp-controlArrow.fp-next {
top: calc(50% + 175px);
right: auto;
left: calc(33% - 48px);
}
}
}
div.section:nth-child(6){
background-color: $secondary;
z-index: 0;
@media (min-width: $breakpoint-lg) {
background-image: linear-gradient(to bottom, $secondary 0%,$secondary calc(100% - 100px),$darkblue calc(100% - 100px),$darkblue 100%);
.slideBgImg {
background-image: url(../img/06Abg.jpg);
}
}
}
div.section:nth-child(7){
background-color: $darkblue;
z-index: 0;
@media (min-width: $breakpoint-lg) {
background-image: linear-gradient(to bottom, $darkblue 0%,$darkblue calc(100% - 100px),$lightpeach calc(100% - 100px),$lightpeach 100%);
.slideBgImg {
background-image: url(../img/07Abg.jpg);
}
}
.slideProgress {
display: none;
}
}
@media (min-width: $breakpoint-lg) {
.slideBgImg {
position: absolute;
width: 50%;
height: 100%;
right: 0;
top: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
}
#sectionProgress {
width: 2px;
height: 224px;
background: #ccc;
background: rgba($white, 0.32);
position: absolute;
top: 50%;
right: 20px;
top: calc(50% - 224px/2);
right: 24px;
display: none;
@media(min-width: $breakpoint-lg){
display: block;
right: calc(50% - 960px/2);
}
@media(min-width: $breakpoint-xl){
right: calc(50% - 1170px/2);
}
@media(min-width: $breakpoint-xxl){
right: calc(50% - 1392px/2);
}
#sectionProgressFill {
width: 2px;
height: 100%;
background:$white;
transform: scaleY(0.25);
transform-origin: bottom;
transition: transform 0.7s;
}
}
ul {
list-style: none;
padding-left: 30px;
@media (min-width: $breakpoint-lg) {
li {
position: relative;
&::before {
content: "\2192";
font-size: 14px;
line-height: 24px;
position: absolute;
left: -30px;
top: 0;
}
}
}
}
.fp-controlArrow {
position: absolute;
z-index: 4;
bottom: 10px;
top: auto;
@media (min-width: $breakpoint-lg) {
bottom: auto;
top: 50%;
top: calc(50% + 170px);
}
@media (min-width: $breakpoint-xl) {
top: calc(50% + 200px);
}
@media (min-width: $breakpoint-xxl) {
top: calc(50% + 220px);
}
cursor: pointer;
width: 48px;
height: 48px;
border: none;
background: $primary;
color: $white;
text-align: center;
&.fp-next {
right: calc(50% - 48px);
@media (min-width: $breakpoint-lg) {
right: calc(50% - 960px/2 + 82px + 8px);
}
@media (min-width: $breakpoint-xl) {
right: calc(50% - 1170px/2 + 100px + 15px);
}
@media (min-width: $breakpoint-xxl) {
right: calc(50% - 1392px/2 + 118px + 20px);
}
border: none;
&::before {
content: "\2192";
font-size: 20px;
line-height: 48px;
}
}
&.fp-prev {
left: auto;
right: 50%;
@media (min-width: $breakpoint-xl) {
right: calc(50% - 960px/2 + 82px + 8px + 48px);
}
@media (min-width: $breakpoint-xl) {
right: calc(50% - 1170px/2 + 100px + 15px + 48px);
}
@media (min-width: $breakpoint-xxl) {
right: calc(50% - 1392px/2 + 118px + 20px + 48px);
}
border: none;
&::before {
content: "\2190";
font-size: 20px;
line-height: 48px;
text-align: center;
}
}
}
.slideProgress {
background: $lightpeach;
position: absolute;
top: -50px;
height: 100px;
display: none;
@media (min-width: $breakpoint-lg) {
display: block;
top: -100px;
height: calc(50% - 40px);
}
@media (min-width: $breakpoint-xl) {
height: calc(50% - 78px);
}
@media (min-width: $breakpoint-xxl) {
height: calc(50% - 110px);
}
width: 33%;
transition: width 0.7s;
.slideProgressCounter {
position: absolute;
right: 36px;
bottom: 64px;
color: $secondary;
font-weight: 500;
}
}
}
}
body.fp-viewing-0 {
#colophon {
color: $darkblue;
.social-media ul li a {
color: rgba($darkblue, 0.72);
}
}
}
body.fp-viewing-1 {
#masthead {
color: $darkblue;
.site-branding {
svg {
fill: $darkblue;
}
}
#site-navigation ul li a {
color: rgba($darkblue, 0.72)
}
}
}
body.fp-viewing-2, body.fp-viewing-6-0, body.fp-viewing-6-1, body.fp-viewing-6-2 {
#colophon {
color: $darkblue;
}
}
body.fp-viewing-3-0, body.fp-viewing-3-1, body.fp-viewing-3-2, body.fp-viewing-3-3, body.fp-viewing-3-4 {
#masthead {
.site-branding {
svg {
fill: $darkblue;
}
}
}
}
body.fp-viewing-5-0, body.fp-viewing-5-2 {
#primary.homepage-primary {
div.section:nth-child(6){
@media (min-width: $breakpoint-lg) {
.slideBgImg {
animation: fadeIn 0.7s ease-in-out;
}
}
}
}
}
body.fp-viewing-5-1, body.fp-viewing-5-3 {
#primary.homepage-primary {
div.section:nth-child(6){
@media (min-width: $breakpoint-lg) {
.slideBgImg {
animation: fadeInAlt 0.7s ease-in-out;
}
}
}
}
}
body.fp-viewing-6-0, body.fp-viewing-6-2 {
#primary.homepage-primary {
div.section:nth-child(7){
@media (min-width: $breakpoint-lg) {
.slideBgImg {
animation: fadeInAlt2 0.7s ease-in-out;
}
}
}
}
}
body.fp-viewing-6-1 {
#primary.homepage-primary {
div.section:nth-child(7){
@media (min-width: $breakpoint-lg) {
.slideBgImg {
animation: fadeInAlt3 0.7s ease-in-out;
}
}
}
}
}
Zerion Mini Shell 1.0