site/components/footer/style.css
@value badgerRedOnBlack, badgerWhite, badgerBlack, linesOnBlack from "../../css/_colors.css";
@value mediumScreen, largeScreen, linkSize, containerMaxWidth from "../../css/_sizes.css";
.addressHint {
margin-top: 14px;
}
.screenReaderText {
composes: visuallyHidden from '../../css/_accessibility.css';
}
.footer {
composes: dividerBlack from '../../css/_divider.css';
color: badgerWhite;
padding: 0px 20px;
background-color: badgerBlack;
}
.footer,
.footer:before {
box-shadow: -1px -1px linesOnBlack;
}
.footer:after {
box-shadow: 0 -1px linesOnBlack;
}
.footerContainer {
max-width: containerMaxWidth;
width: 100%;
}
.footerContainer a {
color: badgerWhite;
text-decoration: none;
}
.nav {
composes: serif from '../../css/typography/_fonts.css';
font-size: linkSize;
list-style: none;
line-height: 1.2em;
}
.nav li {
margin: 0 0 20px 0;
}
.nav li:last-child {
margin: 0;
}
.nav li a,
.nav p a {
color: badgerWhite;
text-decoration: none;
}
.nav li a:hover,
.nav p a:hover {
border-bottom: 2px solid badgerRedOnBlack;
}
.section {
padding: 30px 0px;
}
.underline {
border-bottom: 1px solid linesOnBlack;
}
.disclaimer.noBorder {
border-bottom: none;
}
.social {
composes: serif from '../../css/typography/_fonts.css';
line-height: 1.2em;
font-size: linkSize;
}
.mailtoLink,
.telLink {
color: badgerWhite;
display: block;
text-decoration: none;
margin-bottom: 20px;
}
.mailtoLinkText:hover {
border-bottom: 2px solid badgerRedOnBlack;
}
.telLinkText:hover {
border-bottom: 2px solid badgerRedOnBlack;
}
.socialLinks {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.socialLinks li {
margin-right: 23px;
margin-bottom: 5px;
width: 22px;
}
.socialIcon svg {
height: 20px;
fill: #fff;
}
.socialIcon svg:hover {
fill: #606060;
}
.address {
composes: boldSansSerif from '../../css/typography/_fonts.css';
composes: fontXS from '../../css/typography/_fonts.css';
display: flex;
}
.mapContainer {
margin-left: 15px;
}
.mapLink {
composes: redUnderlineLink from '../../css/_links.css';
border-color: badgerRedOnBlack;
margin-top: 20px;
display: inline-block;
}
.disclaimer {
composes: boldSansSerif from '../../css/typography/_fonts.css';
composes: fontXS from '../../css/typography/_fonts.css';
}
.disclaimerParagraph {
padding-bottom: 0px;
}
.cookieWarning {
margin-top: 16px;
}
.cookieWarning a {
text-decoration: underline;
}
.badgerIcon {
display: flex;
justify-content: flex-end;
align-self: flex-end;
}
.badgerIcon svg {
width: 50px;
height: 50px;
margin: 15px 20px;
}
.mapPin {
width: 22px;
height: 30px;
}
@media screen and (min-width: 820px) {
.footerContainer {
background-image: url('./PNG/map.png');
background-size: 465px 415px;
background-position: right 12px top 10px;
background-repeat: no-repeat;
}
.footer {
align-items: center;
justify-content: center;
}
.badgerIcon {
position: absolute;
right: 15px;
bottom: 15px;
}
.underline {
border-bottom: none;
}
.footerSections {
position: relative;
}
}
@media largeScreen {
.footer {
display: flex;
}
.footerLinks {
flex-grow: 2;
}
.social {
flex-grow: 1;
position: relative;
}
.socialLinks {
width: 100%;
}
.footerSections {
display: flex;
width: 55%;
}
.disclaimer {
margin-top: 30px;
padding-bottom: 20px;
}
.disclaimerParagraph {
padding: 0 20px;
display: inline-block;
position: relative;
}
.disclaimerParagraph:first-child {
padding: 0px 20px 0px 0px;
}
.cookieWarning {
padding: 0px;
display: block;
}
.afterDivider:after {
content: ' ';
display: block;
width: 1px;
height: 10px;
background-color: grey;
position: absolute;
right: 0;
top: 8px;
}
.footerEndContainer {
display: flex;
justify-content: space-between;
}
.footerContainer {
position: relative;
}
}