fix book club page on mobile
This commit is contained in:
@ -26,6 +26,11 @@ body {
|
||||
max-width: 908px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground-text);
|
||||
@ -34,6 +39,7 @@ a {
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@ -64,6 +70,13 @@ h2 {
|
||||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.site-navigation {
|
||||
flex-direction: column;
|
||||
padding-top: 3rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
.site-navigation ul.pages-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -83,26 +96,43 @@ section {
|
||||
padding-block: 82px;
|
||||
}
|
||||
|
||||
.hero--container {
|
||||
section.hero {
|
||||
padding-block: 0;
|
||||
}
|
||||
section.hero .hero--container {
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.hero--container .hero--text {
|
||||
@media (max-width: 480px) {
|
||||
section.hero .hero--container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
section.hero .hero--container .hero--text {
|
||||
grid-column: 2/4;
|
||||
}
|
||||
.hero--container .hero--text h2 {
|
||||
section.hero .hero--container .hero--text h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
max-width: 385px;
|
||||
}
|
||||
.hero--container .hero--text p {
|
||||
@media (max-width: 480px) {
|
||||
section.hero .hero--container .hero--text h2 {
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
section.hero .hero--container .hero--text p {
|
||||
font-family: var(wp--preset--font-family--sora);
|
||||
font-size: 18px;
|
||||
max-width: 446px;
|
||||
}
|
||||
.hero--container .hero--img {
|
||||
section.hero .hero--container .hero--img {
|
||||
grid-column: 4/6;
|
||||
width: 100%;
|
||||
border: 1px solid white;
|
||||
@ -110,6 +140,13 @@ section {
|
||||
border-bottom-left-radius: 12px;
|
||||
border-right: none;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.hero .hero--container .hero--img {
|
||||
order: -1;
|
||||
border-radius: 12px;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-logos {
|
||||
padding-block: 41px;
|
||||
@ -123,6 +160,11 @@ section {
|
||||
column-gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.sponsor-logos .container {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
section.pitch {
|
||||
padding-block: 82px;
|
||||
@ -142,6 +184,11 @@ section.pitch .pitch--cards {
|
||||
grid-template-columns: repeat(3, 300px);
|
||||
gap: 16px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.pitch .pitch--cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
section.pitch .pitch--cards .pitch--card-item {
|
||||
border: 1px solid #FAF7EF;
|
||||
border-radius: 12px;
|
||||
@ -182,11 +229,25 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
|
||||
margin-inline: auto;
|
||||
margin-block: 36px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
|
||||
border-radius: 12px;
|
||||
border-right: 1px solid #F6F6F8;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
|
||||
width: 100%;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--foreground-text);
|
||||
}
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
|
||||
padding-inline: 40px;
|
||||
padding-block: 36px;
|
||||
@ -194,15 +255,23 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text * {
|
||||
text-align: left;
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p.book-club-example-card--item--text--heading {
|
||||
font-size: 18px;
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text--description {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
}
|
||||
section.book-club-examples .btn {
|
||||
display: inline-block;
|
||||
padding-inline: 5em;
|
||||
@ -218,12 +287,23 @@ section.testimonial-section .testimonial-cards {
|
||||
gap: 1rem;
|
||||
padding-block: 84px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.testimonial-section .testimonial-cards {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
section.testimonial-section .testimonial-cards .testimonial-card--item {
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
padding: 64px;
|
||||
max-width: 446px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.testimonial-section .testimonial-cards .testimonial-card--item {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
section.testimonial-section .testimonial-cards .testimonial-card--item .bio {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@ -262,6 +342,11 @@ section.faq .faq-list .faq--item {
|
||||
padding-block: 45px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.faq .faq-list .faq--item {
|
||||
padding-block: 30px;
|
||||
}
|
||||
}
|
||||
section.faq .faq-list .faq--item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -270,6 +355,11 @@ section.faq .faq-list .faq--item .answer {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.faq .faq-list .faq--item .answer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
section.faq .faq-list .faq--item summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
@ -295,11 +385,25 @@ section.book-club-benefits .benefit-cards {
|
||||
row-gap: 90px;
|
||||
margin-block: 140px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.book-club-benefits .benefit-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
section.book-club-benefits .benefit-cards .benefit-card--item img {
|
||||
max-width: 215px;
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@media (min-width: 1084px) {
|
||||
section.book-club-benefits .benefit-cards .benefit-card--item img {
|
||||
max-width: 215px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section.book-club-benefits .benefit-cards .benefit-card--item img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
section.book-club-benefits .benefit-cards .benefit-card--item p {
|
||||
max-width: 289px;
|
||||
margin-inline: auto;
|
||||
@ -316,7 +420,6 @@ section.book-club-benefits .book-club-benefits-cta p {
|
||||
}
|
||||
|
||||
footer.somos-infinitos-footer {
|
||||
padding-inline: 114px;
|
||||
padding-top: 73px;
|
||||
margin-top: 200px;
|
||||
padding-bottom: 150px;
|
||||
@ -325,6 +428,26 @@ footer.somos-infinitos-footer {
|
||||
background-position: right;
|
||||
background-size: contain;
|
||||
}
|
||||
@media (min-width: 1084px) {
|
||||
footer.somos-infinitos-footer {
|
||||
padding-inline: 114px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer {
|
||||
padding-inline: 3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer {
|
||||
background-size: cover;
|
||||
background-position-x: 253px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
footer.somos-infinitos-footer .container {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
footer.somos-infinitos-footer .footer-navigation {
|
||||
margin-top: 75px;
|
||||
margin-bottom: 120px;
|
||||
@ -335,6 +458,12 @@ footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 144px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
@ -358,15 +487,29 @@ footer.somos-infinitos-footer .email-cta form {
|
||||
gap: 16px;
|
||||
margin-block: 16px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer .email-cta form {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
footer.somos-infinitos-footer .email-cta form input {
|
||||
padding: 1em;
|
||||
font-family: inherit;
|
||||
width: 370px;
|
||||
color: var(--foreground-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@media (min-width: 1084px) {
|
||||
footer.somos-infinitos-footer .email-cta form input {
|
||||
width: 370px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer .email-cta form input {
|
||||
width: 286px;
|
||||
}
|
||||
}
|
||||
footer.somos-infinitos-footer .email-cta form input::placeholder {
|
||||
color: var(--foreground-text);
|
||||
}
|
||||
@ -377,6 +520,13 @@ footer.somos-infinitos-footer .email-cta form button.btn {
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
footer.somos-infinitos-footer .email-cta form button.btn {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
footer.somos-infinitos-footer .email-cta form button.btn:hover {
|
||||
background-color: white;
|
||||
color: var(--background);
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EAAU;;;AAId;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EAEE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAKvB;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAiB;;AACjB;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AA9BE;EA4BJ;IAG6B;;;;AAG7B;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EAAU;;;AAId;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAtEE;EA+DJ;IAUI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;AACA;EAEE;EACA;EACA;;AAzGA;EAqGF;IAOI;IACA;IACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAxHJ;EAoHE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AA7IF;EAuIA;IAQI;IACA;IACA;;;;AAMR;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAhKA;EAyJF;IAUI;;;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;;AA1LA;EAsLF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AAxOF;EAiOA;IAE6B;;;AAO3B;EACE;EACA;EACA;;AA7OJ;EA0OE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AA9PrB;EAuPE;IASI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAtRA;EAmRF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAhSF;EA4RA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAEA;;AA9UF;EAyUA;IAI6B;;;AAE3B;EAAiB;;AACjB;EACE;EACA;EAEA;;AApVJ;EAgVE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;;AAhXA;EA0WF;IAG6B;;;AAMzB;EAGE;EACA;;AA1XJ;EAsXE;IAC8B;;;AApXhC;EAmXE;IAE6B;;;AAI7B;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AA1ZE;EAiZJ;IAC8B;;;AA/Y1B;EA8YJ;IAE6B;;;AAhZzB;EA8YJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAxaF;EAoaA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;;AA1cF;EAscA;IAE6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AAtdJ;EA8cE;IAG8B;;;AA9chC;EA2cE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AA9dJ;EAydE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}
|
||||
@ -1,3 +1,11 @@
|
||||
@mixin respond($breakpoint) {
|
||||
@if($breakpoint == desktop) {
|
||||
@media (min-width: 1084px) { @content }
|
||||
}
|
||||
@if($breakpoint == mobile) {
|
||||
@media (max-width: 480px) { @content }
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--background: #040810;
|
||||
--foreground-text: #FAF7EF;
|
||||
@ -26,6 +34,7 @@ body {
|
||||
.container {
|
||||
max-width: 908px;
|
||||
margin-inline: auto;
|
||||
@include respond(mobile) { padding: 3rem; }
|
||||
}
|
||||
|
||||
a {
|
||||
@ -35,6 +44,7 @@ a {
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@ -65,6 +75,12 @@ h2 {
|
||||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
|
||||
@include respond(mobile) {
|
||||
flex-direction: column;
|
||||
padding-top: 3rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
ul.pages-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -86,36 +102,55 @@ section {
|
||||
padding-block: 82px;
|
||||
}
|
||||
|
||||
.hero--container {
|
||||
// max-width: 1440px;
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
section.hero {
|
||||
padding-block: 0;
|
||||
.hero--container {
|
||||
// max-width: 1440px;
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
||||
.hero--text {
|
||||
grid-column: 2 / 4;
|
||||
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
max-width: 385px;
|
||||
@include respond(mobile) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(wp--preset--font-family--sora);
|
||||
font-size: 18px;
|
||||
max-width: 446px;
|
||||
|
||||
.hero--text {
|
||||
grid-column: 2 / 4;
|
||||
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
max-width: 385px;
|
||||
@include respond(mobile) {
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(wp--preset--font-family--sora);
|
||||
font-size: 18px;
|
||||
max-width: 446px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero--img {
|
||||
grid-column: 4 / 6;
|
||||
width: 100%;
|
||||
border: 1px solid white;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-right: none;
|
||||
@include respond(mobile) {
|
||||
order: -1;
|
||||
border-radius: 12px;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero--img {
|
||||
grid-column: 4 / 6;
|
||||
width: 100%;
|
||||
border: 1px solid white;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -129,6 +164,10 @@ section {
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
|
||||
@include respond(mobile) {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -149,7 +188,8 @@ section.pitch {
|
||||
.pitch--cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 300px);
|
||||
gap: 16px;
|
||||
@include respond(mobile) { grid-template-columns: 1fr; }
|
||||
gap: 16px;
|
||||
|
||||
.pitch--card-item {
|
||||
border: 1px solid #FAF7EF;
|
||||
@ -190,6 +230,7 @@ section.book-club-examples {
|
||||
padding-block: 84px;
|
||||
.book-club-example-card--item {
|
||||
display: flex;
|
||||
@include respond(mobile) { flex-direction: column; }
|
||||
max-width: 908px;
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
@ -200,15 +241,26 @@ section.book-club-examples {
|
||||
border-radius: 12px;
|
||||
border-right: 1px solid #F6F6F8;
|
||||
object-fit: cover;
|
||||
@include respond(mobile) {
|
||||
width: 100%;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--foreground-text);
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
* { text-align: left; }
|
||||
padding-inline: 40px;
|
||||
padding-block: 36px;
|
||||
p { font-size: 18px; }
|
||||
p.book-club-example-card--item--text--heading { font-size: 18px; }
|
||||
p { font-size: 16px; }
|
||||
strong { font-weight: 600; }
|
||||
&--description { font-size: 16px; }
|
||||
@include respond(mobile) {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,12 +282,21 @@ section.testimonial-section {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-block: 84px;
|
||||
@include respond(mobile) {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.testimonial-card--item {
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
padding: 64px;
|
||||
max-width: 446px;
|
||||
|
||||
@include respond(mobile) {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@ -275,11 +336,13 @@ section.faq {
|
||||
padding-inline: 60px;
|
||||
padding-inline-start: calc(60px - 16px);
|
||||
padding-block: 45px;
|
||||
@include respond(mobile) { padding-block: 30px; }
|
||||
border-bottom: 1px solid;
|
||||
&:last-of-type { border-bottom: none; }
|
||||
.answer {
|
||||
margin-top: 16px;
|
||||
padding-left: 16px;
|
||||
@include respond(mobile) { padding-left: 0; }
|
||||
display: block;
|
||||
}
|
||||
summary {
|
||||
@ -305,13 +368,15 @@ section.book-club-benefits {
|
||||
.benefit-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@include respond(mobile) { grid-template-columns: 1fr; }
|
||||
gap: 16px;
|
||||
row-gap: 90px;
|
||||
margin-block: 140px;
|
||||
|
||||
.benefit-card--item {
|
||||
img {
|
||||
max-width: 215px;
|
||||
@include respond(desktop) { max-width: 215px; }
|
||||
@include respond(mobile) { width: 100%; }
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@ -337,7 +402,8 @@ section.book-club-benefits {
|
||||
}
|
||||
|
||||
footer.somos-infinitos-footer {
|
||||
padding-inline: 114px;
|
||||
@include respond(desktop) { padding-inline: 114px; }
|
||||
@include respond(mobile) { padding-inline: 3rem; }
|
||||
padding-top: 73px;
|
||||
margin-top: 200px;
|
||||
padding-bottom: 150px;
|
||||
@ -346,14 +412,26 @@ footer.somos-infinitos-footer {
|
||||
background-position: right;
|
||||
background-size: contain;
|
||||
|
||||
@include respond(mobile) {
|
||||
.container { padding-inline: 0; }
|
||||
background-size: cover;
|
||||
background-position-x: 253px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
margin-top: 75px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
ul.footer-navigation--links {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 144px);
|
||||
@include respond(mobile) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
li {
|
||||
a {
|
||||
font-size: 14px;
|
||||
@ -381,12 +459,14 @@ footer.somos-infinitos-footer {
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
@include respond(mobile) { flex-direction: column; }
|
||||
gap: 16px;
|
||||
margin-block: 16px;
|
||||
input {
|
||||
padding: 1em;
|
||||
font-family: inherit;
|
||||
width: 370px;
|
||||
@include respond(desktop) { width: 370px; }
|
||||
@include respond(mobile) { width: 286px; }
|
||||
color: var(--foreground-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--foreground-text);
|
||||
@ -402,6 +482,13 @@ footer.somos-infinitos-footer {
|
||||
color: var(--foreground-text);
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
|
||||
@include respond(mobile) {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: var(--background);
|
||||
|
||||
Reference in New Issue
Block a user