html, body { /* zero the defaults */
margin:0;padding:0;
font-size: 62.5%; /* make type sizing a little easier to design for, assumes 16pt default */
scroll-behavior: smooth;
}
main { /* establishes our initial viewport, needed for Parallax */
position: relative;
width: 100vw;
height: 100vh; /* vh is messing with mobile still, % collapses */
overflow-x: hidden;
overflow-y: auto;
background-color: #333;
perspective: 2px;
}
.contentflex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
/* these aren't doing anything now */
.contentflex > * { /* drives the centering of the content divs */
align-items: center;
text-align: center;
}
.center > * {
margin: auto 0; /* Magic centering! */
}
/* for the small explor heading in the stripes, parks near the top of the screen based on the LowerBlock height */
.bottom {
padding-bottom: .5vh;
}
/* the block's absolute positions and the 100% heights work again now, probably due to playing ball with the viewport properly and providing a relative postion to work with. */
.upperblock {
position: relative; /* this works, but we need absolute for the bg cycler... maybe it'll work on a child? */
width: 100vw;
top: 0;
height: 100%;
}
.bgcycler { /* a div shell for the cycler to talk to, has the background */
position: absolute; /* ahah! yes! */
width: 100vw;
top: 0;
height: 100%;
z-index: 1;
}
.active { /* the Cycler script moves the active hero on top */
z-index:3;
}
/* home backgrounds and their type layers */
.mountain {
background: url('../image/james-adams.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: 30% 60%; /* hz vt */
color: #343f47;
}
.mountain .bigmark {
mix-blend-mode: multiply;
}
.mountain .tagline {
color: #fafcfd;
}
.fog {
background: url('../image/bernard-hermant.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: 25% 50%; /* hz vt */
color: #343f47;
}
.cave {
background: url('../image/banter-snaps.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: center center; /* hz vt */
color: #FFF;
}
.cave .bigmark {
mix-blend-mode: screen;
}
.valley {
background: url('../image/aleks-dahlberg.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: center center; /* hz vt */
color: #FFF;
}
.valley .bigmark {
mix-blend-mode: screen;
}
.arrow img {
margin-top: 6vh;
margin-bottom: 6vh;
width: 10vw;
max-width: 50px;
}
/* chunk for the Parallax stuff */
.parallax::after {
/* Display and position the pseudo-element */
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Move the pseudo-element back away from the camera,
* then scale it back up to fill the viewport.
* Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
transform: translateZ(-1px) scale(1.5);
/* Keep the image from overlapping sibling elements. */
z-index: -1;
}
.midblock {
background-color: #F4F3ED;
height: 85vh;
}
.info {
width: 80vw;
justify-content: center;
}
.info p {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.lowerblock {
position: absolute;
width: 100vw;
height: 85vh; /* nearly full height forces bottom edge of stripes to lock on top, could also do this with calc(100vh - xx) if the height of that edge is known */
padding-bottom: 50vh;
}
.extension {
background:
linear-gradient(to bottom, rgba(18,24,29, .8), rgba(56,73,92, 0)),
/*rgba(44,102,143, .92), rgba(22,51,72, .30)), */
url('../image/diagram.svg'),
url('../image/james-adams-orange.jpg');
background-blend-mode: saturation, screen;
background-repeat:no-repeat;
background-size: cover, cover, cover;
background-position: 50% 70%, 50% 70%; /* hz vt */
}
.verticalsgrid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0;
margin-top: 5vh;
}
.verticalsgrid li {
list-style: none;
margin: auto;
}
.verticalsgrid img {
max-width: 260px;
width: 25vw;
}
#stripes {
width: 100vw;
height: 10vh;
margin-top: -60px; /*account for the Footer being in the middle of the page */
justify-content: center;
align-content: center;
}
.slicer1 {
height:5vh;
width: 100vw;
background: url('../image/hiker-slice.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: center center; /* hz vt */
}
.slicer2 {
height:5vh;
width: 100vw;
background: url('../image/valley-slice.jpg');
background-repeat:no-repeat;
background-size: cover;
background-position: center center; /* hz vt */
}
#footer {
position: -webkit-sticky;
width: 100vw;
position: sticky;
margin-top: -90px; /* move up the height of the TAG so it appears above the bottom of the screen. not sure how 90px manages to actually work tho... */
top: calc(100vh - 180px); /* calc the scroll position where it should be based on footbase+tag heights */
z-index: 10;
text-align: center;
}
.tag { /* going to have to specify a fixed size (height) for this guy */
width: 3.5rem;
font-size: 3rem;
line-height: 2.2rem;
letter-spacing: -0.18rem;
background-color: #ff0606;
color: #FFF;
padding: 12px 10px;
margin: 0 auto;
}
.footbase {
height: 90px;
background-color: #222;
width: 100vw;
}
.badge-inline {
margin: -2px 4px 0 4px;
}
/* sub 600px... PHONE PORTRAIT */
@media only screen and (max-width: 600px) {
.info {
width: 100vw;
}
.info p {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
}
@supports (-webkit-overflow-scrolling: touch) {
main {
height: calc(100vh - 112px);
}
.bigblock {
height: calc(100vh - 90px);
}
#footer {
position: -webkit-sticky;
width: 100vw;
position: sticky;
margin-top: -90px; /* move up the height of the TAG so it appears above the bottom of the screen. not sure how 90px manages to actually work tho... */
top: calc(calc(100vh - 112px) - 180px); /* calc the scroll position where it should be based on footbase+tag heights */
z-index: 10;
text-align: center;
}
}