Edit
/* scss/7-menus-and-header/_banner.scss */
// ==============================================
// header photo and title card - base/mobile settings
// ==============================================
// ----------------------------------------------
// main photo title container
.m-header,
.m-header.-small,
.m-header .m-header__photo,
.m-header .banner-img {
// small banner mobile
height: $shortbanner-height-mobile;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
height: $shortbanner-height;
}
}
.m-header.-medium,
.m-header.-medium .m-header__photo,
.m-header.-medium .banner-img {
// medium banner mobile
height: $mediumbanner-height-mobile;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
// height: $mediumbanner-height;
height: 459px;
}
}
.m-header.-tall,
.m-header.-tall .m-header__photo,
.m-header.-tall .banner-img {
@include tallbanner-height();
}
.touch .m-header.-tall,
.touch .m-header.-tall .m-header__photo,
.touch .m-header.-tall .banner-img {
// tall banner mobile
@include tallbanner-height-mobile();
}
// ----------------------------------------------
// FONT SIZES
.m-header {
.m-title-card__dept {
font-size: 1rem;
}
.m-title-card__dept a {
@include fluid("font-size", 25, 50);
text-decoration: none;
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
font-size: 50px;
}
&.XXX-Small {
@include fluid("font-size", 25, 45);
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
line-height: 1.1;
}
}
}
&.-medium .m-title-card__dept a {
@include fluid("font-size", 25, 60);
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
font-size: 60px;
}
}
&.-tall .m-title-card__dept a {
@include fluid("font-size", 45, 75);
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
font-size: 75px;
}
}
}
// ----------------------------------------------
// STYLES
// .m-header default is .m-header.-small
.m-header {
position: relative;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
//margin-top: $topbar-height-mobile;
margin-top: 0;
padding: 0 5%;
text-align: center;
letter-spacing: 0.05rem;
background-color: black;
@include breakpoint($mobile-to-desktop-breakpoint) {
// .-small
//margin-top: $topbar-height;
}
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
padding: 0 10%;
}
&.-medium {
& .m-header__photo {
&::after {
@include m-header__photo-gradient;
}
}
}
&.-tall {
position: relative;
.scroll-down {
position: absolute;
right: 0;
bottom: 40px;
left: 0;
transition: all 0.2s ease-in;
animation: bounce 0.5s 1;
animation-delay: 1s;
animation-iteration-count: 1;
width: 50px;
margin: 0 auto;
}
.scroll-down:hover {
transform: scale(1.2);
transition: all 0.2s ease-in;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}
&::after {
@include m-header__photo-gradient;
background: black;
}
// tall banner image anchor options
// center center, top center, top right, center right, bottom right, bottom center, bottom left, center left, top left
// (default is top center)
&.-img-cc .m-header__photo {
background-position: center center;
}
// image anchor point top center
&.-img-mc .m-header__photo {
background-position: top center;
}
// image anchor point mid-top center
&.-img-mtc .m-header__photo {
background-position: center 25%;
}
// image anchor point top right
&.-img-tr .m-header__photo {
background-position: top right;
}
// image anchor point center right
&.-img-cr .m-header__photo {
background-position: center right;
}
// image anchor point bottom right
&.-img-br .m-header__photo {
background-position: bottom right;
}
// image anchor point bottom center
&.-img-bc .m-header__photo {
background-position: bottom center;
}
// image anchor point bottom left
&.-img-bl .m-header__photo {
background-position: bottom left;
}
// image anchor point center left
&.-img-cl .m-header__photo {
background-position: center left;
}
// image anchor point top left
&.-img-tl .m-header__photo {
background-position: top left;
}
// tall banner text position options
// center center, bottom left
// (default position is center center)
&.-text-cc,
&.-text-bl {
align-items: center;
justify-content: center;
padding: 70px kspaces(sm);
}
&.-text-bl {
align-items: flex-end;
justify-content: center;
.m-title-card {
text-align: left;
width: 100%;
}
.m-title-card__umbrella a {
margin: 0 3px;
}
.m-title-card__dept {
max-width: 1112px;
}
.m-title-card + .m-header__photo::before {
opacity: 0 !important;
}
.m-title-card:hover + .m-header__photo {
transform: none;
}
.scroll-down {
display: none;
}
}
}
}
// ----------------------------------------------
//title card
@keyframes fadein {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes umbrellafadein {
0% {
transform: translateY(10px);
opacity: 0;
}
20% {
transform: translateY(10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.m-title-card {
z-index: 1;
// max-width: 90%;
margin-top: 0;
border-top: none;
border-bottom: none;
background: transparent;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
font-size: 1rem;
// @include breakpoint($mobile-to-wide-mobile-breakpoint) {
// // width: 80%;
// max-width: 1000px;
// }
// @include breakpoint($mobile-to-desktop-breakpoint) {
// display: inline-block;
// margin-top: -#{kspaces(sm)};
// }
padding: 0;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
margin: 0;
}
@include breakpoint($mobile-to-desktop-breakpoint) {
max-width: 1172px;
}
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
padding: 0 kspaces(sm);
}
@include breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint) {
max-width: 1288px;
}
&:hover + .m-header__photo {
transform: scale(1.04);
}
&:hover + .m-header__photo::before {
opacity: 1;
}
& + .m-header__photo::before,
& + .m-header__photo::after {
content: "";
}
&__dept {
margin-top: 12px;
margin-bottom: 0;
animation: fadein 2s;
& a {
margin-top: 0;
margin-bottom: 1.58rem;
letter-spacing: 0.05rem;
color: white;
font-family: font(heading-serif);
font-weight: font(serif-weight, bold);
line-height: 1.1;
// use lining figures
font-feature-settings: "lnum";
@include breakpoint($mobile-to-desktop-breakpoint) {
letter-spacing: 0.05rem;
line-height: 1;
}
&:hover {
text-decoration: none;
}
}
}
&__umbrella {
margin: 0;
padding: 0;
animation: umbrellafadein 1.75s;
background: transparent;
line-height: 1;
& a {
@include fluid("font-size", 15, 18);
text-decoration: none;
display: inline;
margin: 1.14rem 1.3rem 0;
letter-spacing: 0.05rem;
color: white;
background: transparent;
font-weight: font(sans-weight, demi);
&:hover {
text-decoration: underline;
}
}
}
.m-breadcrumbs {
display: none;
}
}
// ----------------------------------------------
// header photo
.m-header__photo,
.banner-img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
transition: ease-out 0.65s;
background-position: top center;
background-size: cover;
// dark element that covers photo on title hover
&::before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: none;
transition: opacity 0.65s ease-out;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
}
// photo gradient
&::after {
@include m-header__photo-gradient;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: none;
}
}
// ---- end header section -------//