1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00
site/_src/_assets/styles/bigchain/_hero.scss

200 lines
3.4 KiB
SCSS

//
// Hero
// ---
// bigchaindb.com
//
$menu-height-md: 66px;
.hero {
@include background--photo();
background-image: url('../img/hero-berlin.jpg');
text-align: center;
overflow: hidden;
position: relative;
// vertically center everything
display: flex;
align-items: center;
min-height: 480px;
flex-wrap: wrap;
@media ($screen-md) {
height: 100vh;
}
.section-title {
color: #fff;
font-size: $font-size-h3;
@media ($screen-sm) {
font-size: $font-size-h2;
}
@media ($screen-md) {
font-size: $font-size-h1;
}
&:after { display: none; }
}
.section-subtitle {
font-size: $font-size-h4;
@media ($screen-sm) {
font-size: $font-size-h3;
}
@media ($screen-md) {
font-size: $font-size-h2;
}
}
}
//
// intro animation
//
.hero .section-title,
.hero .section-description,
.hero__action,
.logo-enterprise {
.wf-active &,
.wf-inactive & {
@include animation-slide-in-from-bottom;
animation-fill-mode: backwards;
}
}
.hero .section-description {
.wf-active &,
.wf-inactive & {
animation-delay: .3s;
}
}
.hero__action {
.wf-active &,
.wf-inactive & {
animation-delay: .5s;
}
}
.page-front .menu--main,
.hero__community,
.hero__more {
@include transition;
opacity: 0;
transition-delay: .8s;
.wf-active &,
.wf-inactive & {
opacity: 1;
}
}
.hero__content {
margin-top: $spacer * 2;
margin-bottom: $spacer * 4;
@media ($screen-md) {
align-self: flex-start;
margin-top: $spacer * 4;
margin-bottom: 0;
}
}
.hero__community {
align-self: flex-end;
width: 100%;
// resemble menu background, but a bit darker background
background: rgba($brand-main-blue-dark, .6);
backdrop-filter: saturate(150%) blur(10px);
border-top: 1px solid rgba($brand-main-gray, .5);
border-bottom: 1px solid rgba($brand-main-gray, .5);
.btn {
font-weight: $font-weight-normal;
box-shadow: none;
background: none;
opacity: .95;
&:hover,
&:focus {
opacity: 1;
}
&:first-child {
display: block;
@media ($screen-sm) {
display: inline-block;
}
}
.icon {
transform: translateY(1px);
}
}
.stars,
.release,
.meetup-title {
display: inline-block;
opacity: 0;
transition: opacity .2s ease-out;
}
strong {
font-weight: $font-weight-normal;
}
.stars {
font-size: .6rem;
background: rgba($brand-main-gray-lighter, .15);
padding: .1rem .3rem;
border-radius: 1rem;
display: inline-block;
transform: translateY(-1px);
min-width: 34px; // approx. width with 4 numbers
}
.release {
min-width: 44px;
}
}
.hero__community__label {
opacity: .5;
}
.hero__more {
position: relative;
z-index: 2;
color: rgba(#fff, .6);
align-self: flex-end;
margin-bottom: $spacer;
width: 100%;
display: none;
@media ($screen-md) {
display: block;
}
&:hover,
&:focus { color: #fff; }
// the caret
.icon {
width: 12px;
height: 12px;
stroke: #fff;
display: block;
margin: auto;
}
}