54 lines
966 B
SCSS
54 lines
966 B
SCSS
@import 'variables';
|
|
@import 'animations';
|
|
|
|
.header {
|
|
background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
|
|
no-repeat center 10rem;
|
|
background-size: cover;
|
|
width: 100%;
|
|
padding: $spacer * 2 0;
|
|
min-height: 30rem;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.headerLogo,
|
|
.headerTitle,
|
|
.headerDescription {
|
|
animation: fadeInUp 0.6s ease-out backwards;
|
|
}
|
|
|
|
.headerLogo {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.headerTitle {
|
|
margin-bottom: $spacer;
|
|
font-size: $font-size-h2;
|
|
animation-delay: 0.2s;
|
|
|
|
@media (min-width: $break-point--small) {
|
|
font-size: $font-size-h1;
|
|
}
|
|
}
|
|
|
|
.headerDescription {
|
|
margin-bottom: $spacer * 4;
|
|
max-width: $break-point--small;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
animation-delay: 0.4s;
|
|
|
|
@media (min-width: $break-point--small) {
|
|
font-size: $font-size-large;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
margin-top: $spacer * 0.5;
|
|
align-items: 'center';
|
|
}
|