*, *::before, *::after { margin: 0; padding: 0; -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; scroll-behavior: smooth; } body { font-family: "Open Sans", sans-serif; color: #000000; font-size: 1.6rem; font-weight: 400; line-height: 1.6; padding: 0; } span { font-weight: 700; } span.red { color: #d14f3b; } span.blue { color: #525ea7; } h2 { font-family: "Arvo", serif; font-size: 2.4rem; text-align: center; font-weight: 400; } h3 { font-family: "Open Sans", serif; font-size: 1.7rem; text-align: center; font-weight: 700; color: #0f3f6d; padding: 0 10px; } header { width: 100%; height: 8rem; background-color: #fff; display: flex; align-items: center; justify-content: center; } header img { display: block; width: 24rem; height: 4.5rem; } .panelOne { min-height: 520px; width: 100%; height: fit-content; background: url("../images/hero_banner_YWO.jpg") center center no-repeat; background-size: cover; border-bottom: 5px solid #fff; display: flex; } .panelOne .textArea { max-width: 1100px; width: calc(100% - 100px); height: fit-content; margin: auto auto 25px auto; padding: 30px 80px; background: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; align-items: center; } .panelOne h2 { color: #505050; } .panelOne p { font-size: 1.4rem; text-align: center; color: #505050; margin: 16px 0 26px 0; } .panelOne .CTA:link, .panelOne .CTA:visited { display: block; font-family: "Arvo", serif; font-size: 1.4rem; text-align: center; text-decoration: none; color: #fff; padding: 15px 35px; width: 100%; max-width: 430px; background-color: #505050; border: 1px solid #d6d6d6; border-radius: 5px; transition: background-color 0.4s linear; } .panelOne .CTA:hover, .panelOne .CTA:active { background-color: #767676; transition: background-color 0.4s linear; } .panelTwo { position: relative; min-height: 420px; width: 100%; height: fit-content; padding: 65px 20px 40px 20px; background: radial-gradient(closest-side at 50% 50%, #b6f0fd 0%, #365e82 100%) 0% 0% no-repeat padding-box; border-bottom: 5px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .panelTwo .strapline { position: absolute; top: 0; left: calc(50% - 95px); width: 190px; padding: 6px 0; background-color: #365e82; color: #fff; font-family: "Arvo", serif; font-size: 1.6rem; text-align: center; text-transform: uppercase; } .panelTwo h2 { color: #fff; } .panelTwo .bookList { margin: 38px auto 28px auto; display: flex; flex-direction: row; align-items: center; justify-content: center; grid-gap: 20px; flex-wrap: wrap; } .panelTwo .bookList .bookCover { position: relative; width: 153px; height: 175px; display: flex; align-items: flex-start; justify-content: center; } .panelTwo .bookList .bookCover .shadow { position: absolute; bottom: 0; left: 0; width: 153px; height: 30px; } .panelTwo .bookList .bookCover .book { z-index: 1; border: 1px solid #5583af; } .panelTwo .CTA-Link:link, .panelTwo .CTA-Link:visited { display: block; font-family: "Arvo", serif; font-size: 1.5rem; text-align: center; text-decoration: none; color: #fff; padding: 15px; width: 100%; max-width: 430px; background-color: #71bfd6; border-radius: 5px; transition: background-color 0.4s linear; } .panelTwo .CTA-Link:hover, .panelTwo .CTA-Link:active { background-color: #9bd2e2; transition: background-color 0.4s linear; } .panelThree { min-height: 470px; width: 100%; height: fit-content; padding: 40px 50px; background: linear-gradient(rgba(65, 73, 80, 0.7), rgba(65, 73, 80, 0.7)), url("../images/FAR-bg-pic.jpg") center center no-repeat; background-size: cover; border-bottom: 5px solid #fff; display: flex; flex-direction: row; align-items: center; justify-content: center; grid-gap: 75px; } .panelThree .publish { width: 280px; background-color: #fff; border-radius: 5px; padding: 75px 0 0 0; } .panelThree .publish > p { color: #505050; font-size: 1.2rem; text-align: center; border: 1px solid #daadab; border-radius: 5px; padding: 10px; margin: 10px; } .panelThree .publish > p a:link, .panelThree .publish > p a:visited { color: #0f3f6d; font-weight: 700; text-decoration: none; transition: color 0.4s linear; } .panelThree .publish > p a:hover, .panelThree .publish > p a:active { text-decoration: underline; transition: color 0.4s linear; } .panelThree .publish img { display: block; width: 100%; height: auto; } .panelThree .publish .banner { background-color: #0f3f6d; border-radius: 0 0 5px 5px; padding: 10px 20px; display: flex; flex-direction: row; grid-gap: 20px; } .panelThree .publish .banner p { font-size: 1.2rem; text-align: right; font-style: italic; color: #fff; } .panelThree .publish .banner img { display: block; width: 63px; height: 64px; } .panelThree .book { width: 226px; height: auto; } .panelThree .info { max-width: 430px; width: 100%; flex: 1; } .panelThree .info h2 { color: #daadab; font-size: 2.5rem; text-align: center; } .panelThree .info .quote { color: #fff; font-style: italic; font-weight: 400; font-size: 2.1rem; text-align: center; margin: 32px 0 12px 0; } .panelThree .info .author { color: #daadab; font-weight: 700; font-style: italic; font-size: 1.8rem; text-align: center; } .panelThree .info .awards { color: #fff; font-weight: 400; font-style: unset; font-size: 1.6rem; text-align: center; } .panelThree .info .description { color: #fff; font-weight: 400; text-align: center; font-size: 1.2rem; margin: 30px 0 42px 0; } .panelThree .info .CTA:link, .panelThree .info .CTA:visited { display: block; font-family: "Arvo", serif; font-size: 1.4rem; text-align: center; text-decoration: none; color: #fff; padding: 11px 35px; max-width: 430px; width: 100%; background-color: transparent; border: 1px solid #daadab; border-radius: 5px; transition: background-color 0.4s linear; } .panelThree .info .CTA:hover, .panelThree .info .CTA:active { background-color: #daadab; transition: background-color 0.4s linear; } .panelFour { background-color: #fff; padding: 50px 30px; display: flex; flex-direction: column; align-items: center; border-bottom: 5px solid #fff; margin: 0 auto; } .panelFour h2 { color: #505050; } .panelFour .strapline { color: #505050; font-size: 1.4rem; text-align: center; margin: 28px 0 40px 0; } .panelFour .info { display: flex; flex-direction: row; max-width: 1200px; width: 100%; } .panelFour .info .authorQuote { display: flex; flex-direction: row; } .panelFour .info .authorQuote img { display: block; height: 240px; } .panelFour .info .authorQuote .quote { height: 240px; background-color: #71bfd6; padding: 25px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; max-width: 420px; } .panelFour .info .authorQuote .quote .text { font-family: "Arvo", serif; color: #fff; font-size: 2.1rem; text-align: center; line-height: 1.6; } .panelFour .info .authorQuote .quote .author { font-family: "Arvo", serif; color: #fff; font-size: 1.3rem; text-transform: uppercase; text-align: center; } .panelFour .info .bio { flex: 1; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .panelFour .info .bio p { font-size: 1.3rem; color: #505050; text-align: center; } .panelFour .info .bio p:first-of-type { margin-bottom: 20px; } .panelFive { background-color: #717171; padding: 45px 20px 55px 20px; display: flex; flex-direction: column; align-items: center; border-bottom: 5px solid #fff; } .panelFive h2 { color: #fff; } .panelFive p { color: #fff; font-size: 1.2rem; text-align: center; margin: 39px 0 50px 0; } .panelFive .form { display: flex; flex-direction: row; align-items: center; grid-gap: 30px; } .panelFive .form .input { display: flex; flex-direction: row; align-items: center; grid-gap: 12px; color: #fff; font-family: "Arvo", serif; font-size: 1.4rem; } .panelFive .form .input input[type="text"] { width: 240px; height: 40px; border: none; border-radius: 5px; color: #505050; padding: 5px; } .panelFive .form .input input[type="submit"] { width: 175px; height: 45px; border: 1px solid #d6d6d6; border-radius: 5px; background-color: #505050; color: #fff; cursor: pointer; transition: background-color 0.4s linear; } .panelFive .form .input input[type="submit"]:hover { background-color: #999999; transition: background-color 0.4s linear; } footer { width: 100%; height: 6.6rem; background-color: #d6d6d6; padding: 0 5rem; font-size: 1.2rem; color: #505050; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } footer a:link, footer a:visited { color: #505050; text-decoration: none; } footer a:hover, footer a:active { color: #505050; text-decoration: underline; } footer .design { display: flex; flex-direction: row; align-items: center; grid-gap: 1rem; } @media screen and (max-width: 1300px) { .panelThree { justify-content: space-between; grid-gap: 20px; } } @media screen and (max-width: 1050px) { .panelFour .info { flex-direction: column; } .panelFour .info .authorQuote .quote { height: unset; max-width: unset; justify-content: center; grid-gap: 25px; } .panelFour .info .bio { padding: 25px 25px 0 25px; } .panelFive .form { flex-direction: column; justify-content: center; } .panelFive .form .input { flex-direction: column; grid-gap: 5px; } .panelFive .form .input input[type="submit"] { margin-top: 15px; } } @media screen and (max-width: 950px) { .panelThree { flex-direction: column; } .panelThree .publish { padding: 30px 0 0 0; width: unset; margin-bottom: 30px; } .panelThree .publish > p { margin: 20px 60px 10px 60px; } .panelThree .publish .banner { align-items: center; justify-content: space-between; grid-gap: 20px; } .panelThree .publish .banner p { padding: 0; text-align: center; flex: 1; } .panelThree .info { max-width: unset; flex: unset; } .panelThree .info .CTA:link, .panelThree .info .CTA:visited { margin: 0 auto; } } @media screen and (max-width: 660px) { .panelFour .info .authorQuote .quote .text { font-size: 1.8rem; } } @media screen and (max-width: 600px) { .panelOne .textArea { width: 90%; padding: 30px; } .panelThree { padding: 30px; } .panelFour .info .authorQuote { flex-direction: column; } .panelFour .info .authorQuote img { width: 224px; height: auto; margin: 0 auto; padding: 0 0 25px 0; } .panelFour .info .authorQuote .quote { min-width: 224px; } .panelFour .info .authorQuote .quote .text { font-size: 1.6rem; } } @media screen and (max-width: 450px) { .panelOne .textArea { margin: auto; } .panelThree .publish > p { width: 90%; margin: 20px auto 10px auto; } footer { flex-direction: column; justify-content: center; grid-gap: 5px; } }