site/pages/our-work/case-study/fortnum-and-mason-digital-transformation/style.css
@value badgerWhite, badgerBlack, badgerRed, linesOnWhite from '../../../../css/_colors.css';
@value mediumScreen, largeScreen from "../../../../css/_sizes.css";
.header {
width: 100%;
background-color: rgb(147,168,155);
display: flex;
justify-content: center;
}
.header__image {
max-width: 100%;
max-height: 470px;
margin: 0 auto;
display: block;
}
.content {
padding-bottom: 80px;
background-color: #F8F8F8;
}
.content__wrapper {
padding: 0 20px 0;
}
.content__mainTitleWrapper {
padding: 30px 0 40px;
}
.content__mainTitleWrapper + h2 {
margin-top: 0;
padding-top: 0;
}
.content__mainTitle {
composes: fontL from "../../../../css/typography/_fonts.css";
composes: serif from "../../../../css/typography/_fonts.css";
margin: 0;
}
.content__title {
composes: fontM2 from "../../../../css/typography/_fonts.css";
composes: lightSerif from "../../../../css/typography/_fonts.css";
margin: 40px 0 30px;
}
.content__title:first-of-type {
margin-top: 0;
}
.content__redTitle {
composes: fontXS from "../../../../css/typography/_fonts.css";
composes: boldSansSerif from "../../../../css/typography/_fonts.css";
display: block;
color: badgerRed;
}
.content__secondaryTitle {
composes: fontS2 from "../../../../css/typography/_fonts.css";
composes: serif from "../../../../css/typography/_fonts.css";
margin-bottom: 30px;
}
.content__paragraph {
margin-bottom: 30px;
composes: lightSerif from "../../../../css/typography/_fonts.css";
composes: fontS2 from "../../../../css/typography/_fonts.css";
}
.contactBox {
padding: 33px 37px;
max-width: 332px;
margin: auto;
margin-bottom: 30px;
text-align: center;
background-color: #ededed;
}
.contactBox__heading {
composes: fontM2 from '../../../../css/typography/_fonts.css';
composes: serif from "../../../../css/typography/_fonts.css";
margin-bottom: 30px;
}
.contactBox__button {
composes: smallButton from "../../../../css/_links.css";
padding: 0 12px;
}
.imageRight,
.imageLeft {
width: 100%;
height: auto;
padding: 0;
padding-bottom: 30px;
}
.fullWidthImage {
width: 100%;
margin-bottom: 25px;
}
.floatRightImage {
display: none;
}
.link {
composes: bodyUnderlineLink from "../../../../css/_links.css";
}
@media mediumScreen {
.content__paragraph {
padding-left: 17%;
}
.content__secondaryTitle {
padding-left: 114px;
}
.content__mainTitleWrapper {
padding: 40px 0 50px;
}
.content__title {
margin: 50px 0 40px;
}
.contactBox {
float: left;
max-width: 47%;
margin-right: 30px;
margin-top: 3px;
}
.fullWidthImage {
padding-top: 10px;
padding-left: 34%;
padding-right: 16%;
}
.showSmall {
display: none;
}
.showMedium {
display: block;
}
}
@media largeScreen {
.content {
max-width: 1400px;
padding: 20px 120px 100px;
margin: auto;
}
.content__wrapper {
position: relative;
padding-left: 0;
padding-right: 0;
}
.content__mainTitleWrapper {
background-color: badgerWhite;
padding: 20px 20px 60px;
margin-top: -96px;
position: relative;
}
.content__paragraph,
.content__secondaryTitle {
padding-left: 30%;
padding-right: 10%;
}
.content__paragraph__left {
width: 71%;
display: inline-block;
vertical-align: middle;
padding-right: 28px;
}
.content__title {
padding-left: 15%;
font-size: 40px;
line-height: 1.1em;
margin: 60px 0 40px;
}
.contactBox {
float: none;
position: absolute;
left: 0;
right: 70%;
padding: 33px 29px;
margin-top: -30px;
}
.contactBox__heading {
font-size: 1.5rem;
}
.fullWidthImage {
width: 28%;
display: inline-block;
vertical-align: middle;
padding: 0;
}
.listBoxContainer {
padding: 2.5em 3.125em;
max-width: 790px;
margin: 0 auto 0 20%;
}
.listBoxContainer ul li div:first-of-type {
max-width: 500px;
}
}