site/pages/what-we-do/header-slice/style.css
@value badgerWhite, badgerBlack, badgerRed from "../../../css/_colors.css";
@value mediumScreen, largeScreen from "../../../css/_sizes.css";
.screenReaderText {
composes: visuallyHidden from "../../../css/_accessibility.css";
}
.pageHeaderContainer {
composes: dividerWhite from "../../../css/_divider.css";
background-color: badgerWhite;
margin: 0 auto;
padding: 40px 0px;
}
.upperContainer,
.lowerContainer {
margin: 0 auto;
}
.upperContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 280px;
}
.lowerContainer {
max-width: 440px;
min-width: 280px;
width: 80%;
}
.headingWrapper {
width: 100%;
}
.alignLeft {
margin-right: auto;
text-align: left;
}
.alignRight {
margin-left: auto;
text-align: right;
}
.flexibleUpper,
.flexibleLower {
display: flex;
position: relative;
}
.flexibleUpper::after,
.flexibleLower::after {
color: badgerRed;
font-family: 'ProximaNova-Bold', sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.1em;
margin-bottom: 5px;
margin-top: 10px;
position: absolute;
bottom: 0;
}
.flexibleUpper::after {
content: "Innovation";
left: 0;
}
.flexibleLower {
justify-content: flex-end;
}
.flexibleLower::after {
content: "Delivery";
right: 0;
}
.pageHeaderUpper,
.pageHeaderLower {
composes: serif from "../../../css/typography/_fonts.css";
composes: fontXL from "../../../css/typography/_fonts.css";
color: badgerBlack;
margin-bottom: 32px;
}
.pageHeaderLower {
margin-left: auto;
}
.pageSubHeader {
composes: fontM from "../../../css/typography/_fonts.css";
composes: boldSansSerif from "../../../css/typography/_fonts.css";
color: badgerRed;
margin-bottom: 5px;
margin-top: 10px;
width: 100%;
}
.arrow {
height: 40px;
width: 60px;
}
.arrowUp {
composes: arrow;
margin: 15px 5px 0 0;
margin-bottom: 52px;
transform: rotate(-170deg);
}
.arrowDown {
composes: arrow;
margin-top: auto;
margin-bottom: 52px;
transform: rotate(15deg);
}
.subtitle {
composes: fontXS from "../../../css/typography/_fonts.css";
composes: boldSansSerif from "../../../css/typography/_fonts.css";
margin-top: 20px;
text-align: center;
}
@media mediumScreen {
.pageHeaderContainer {
width: 610px;
}
.upperContainer,
.lowerContainer {
max-width: none;
width: 100%;
}
.pageHeaderUpper,
.pageHeaderLower {
margin-bottom: 40px;
}
.pageHeaderLower {
margin-left: unset;
}
.pageSubHeader {
composes: fontS from "../../../css/typography/_fonts.css";
}
.flexibleUpper::after,
.flexibleLower::after {
font-size: 24px;
}
.flexibleLower::after {
margin-bottom: 5px;
}
.arrow {
height: 85px;
width: 140px;
}
.arrowUp {
margin-top: 46px;
margin-right: 45px;
}
.arrowDown {
margin-left: 42px;
margin-bottom: 36px;
transform: rotate(2deg);
}
.subtitle {
composes: fontS from "../../../css/typography/_fonts.css";
width: 100%;
}
}
@media largeScreen {
.pageHeaderContainer {
padding: 80px 0;
width: 790px;
}
.lowerContainer {
max-width: 640px;
}
.flexibleUpper::after,
.flexibleLower::after {
font-size: 32px;
}
.flexibleLower:after {
right: 5px;
}
.pageHeaderUpper,
.pageHeaderLower {
margin-bottom: 68px;
}
.pageSubHeader {
font-size: 40px;
margin-top: 15px;
}
.arrow {
height: 116px;
width: 183px;
}
.arrowUp {
margin-right: 60px;
margin-top: 62px;
}
.arrowDown {
margin-bottom: 68px;
}
.subtitle {
font-size: 24px;
margin-top: 30px;
}
}