:root { --background: #040810; --foreground-text: #FAF7EF; --bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */ --font-family-serif: "EB Garamond", serif; --font-family-mono: "Jura", sans-serif; --font-family-sans: "Sora", sans-serif; } @media (max-width: 480px) { :root { --wp--preset--font-size--x-large: 32px !important; } } * { box-sizing: border-box; } html { background: var(--background); } body { font-family: var(--font-family-sans); color: var(--foreground-text); margin: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.4) 0%, rgba(142, 154, 236, 0) 100%); } .container { max-width: 908px; margin-inline: auto; } @media (max-width: 480px) { .container { padding-inline: 3rem; } } @media (min-width: 481px) and (max-width: 1083px) { .container { padding-inline: 3rem; } } a { color: var(--foreground-text); } h2 { font-family: var(--wp--preset--font-family--eb-garamond); font-size: 38px; line-height: 1; margin-block-start: 0; margin-block-end: 42px; } p { margin-block-start: 0; margin-block-end: 25px; line-height: 1.3; } .btn { border: 1px solid; border-radius: 0.85em; padding: 0.75em 1.5em; text-decoration: none; font-size: 16px; transition: all 0.25s ease; margin-bottom: 26px; font-family: var(--wp--preset--font-family--jura); font-weight: bold; } .btn:hover { text-decoration: none; } .btn--solid { background-color: var(--foreground-text); color: var(--background); } .btn--solid:hover { background-color: transparent; color: var(--foreground-text); background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(30px); color: rgba(255, 255, 255, 0.8); } .site-navigation { display: flex; justify-content: space-between; padding: 50px; font-family: var(--font-family-mono); font-weight: 700; text-transform: uppercase; align-items: center; } @media (max-width: 480px) { .site-navigation { flex-direction: column; padding-top: 3rem; gap: 2rem; align-items: first baseline; padding-bottom: 0; } } .site-navigation ul.pages-list { display: flex; justify-content: space-between; list-style-type: none; gap: 2em; margin: 0; padding: 0; } .site-navigation .action-buttons { display: flex; align-items: center; justify-content: space-between; gap: 1em; } @media (max-width: 480px) { .site-navigation .action-buttons { display: none; } } .site-navigation .action-buttons .btn { margin-bottom: 0; } section { padding-block: 82px; } @media (max-width: 480px) { section { padding-block: 54px; } } section.hero { padding-block: 0; } section.hero .hero--container { margin-inline: auto; display: grid; grid-template-columns: 1fr 446px 170px 292px 1fr; } @media (max-width: 480px) { section.hero .hero--container { display: flex; flex-direction: column; padding: 3rem; } } @media (min-width: 481px) and (max-width: 1083px) { section.hero .hero--container { display: flex; flex-direction: column; padding-inline: 3rem; } } section.hero .hero--container .hero--text { grid-column: 2/4; display: flex; flex-direction: column; justify-content: center; } 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; } @media (max-width: 480px) { section.hero .hero--container .hero--text h2 { font-size: 32px; line-height: 1; margin-top: 2rem; } } @media (min-width: 481px) and (max-width: 1083px) { section.hero .hero--container .hero--text h2 { font-size: 32px; 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; } @media (max-width: 480px) { section.hero .hero--container .hero--text p { font-size: 16px; } } section.hero .hero--container .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; max-height: 366px; object-fit: cover; } @media (max-width: 480px) { section.hero .hero--container .hero--img { order: -1; border-radius: 12px; border-right: 1px solid; aspect-ratio: 16/9; } } @media (min-width: 481px) and (max-width: 1083px) { section.hero .hero--container .hero--img { order: -1; border-radius: 12px; border-right: 1px solid; } } section.hero .hero--container .hero--cta { width: fit-content; } @media (min-width: 1000px) { section.hero .hero--container .hero--cta { display: none; } } .sponsor-logos { padding-top: 78px; padding-bottom: 41px; } @media (max-width: 480px) { .sponsor-logos { padding-top: 42px; } } .sponsor-logos .container { display: flex; text-align: center; flex-wrap: wrap; justify-content: space-between; align-items: center; } @media (min-width: 481px) and (max-width: 1083px) { .sponsor-logos .container { justify-content: center; } } @media (max-width: 480px) { .sponsor-logos .container { display: grid; place-items: center; gap: 1.2em; justify-content: center; } } .sponsor-logos .container img { transform: scale(0.67); } section.pitch { padding-block: 82px; text-align: center; } section.pitch h2 { font-family: var(--wp--preset--font-family--eb-garamond); font-size: 38px; font-weight: 400; line-height: 100%; max-width: 527px; margin-inline: auto; margin-bottom: 54px; } @media (max-width: 480px) { section.pitch h2 { font-size: 32px; } } section.pitch .pitch--cards { display: grid; grid-template-columns: repeat(3, 300px); gap: 16px; } @media (min-width: 481px) and (max-width: 1083px) { section.pitch .pitch--cards { grid-template-columns: repeat(3, 1fr); } } @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; text-align: center; padding-block: 25px; padding-inline: 25px; } section.pitch .pitch--cards .pitch--card-item h3 { font-family: var(--wp--preset--font-family--sora); font-size: 18px; font-weight: 600; line-height: 1.3; } section.pitch .pitch--cards .pitch--card-item p { font-family: var(--wp--preset--font-family--sora); font-size: 16px; font-weight: 300; line-height: 1.3; } @media (max-width: 480px) { section.pitch .pitch--cards .pitch--card-item p { font-size: 14px; } } section.book-club-examples { text-align: center; } section.book-club-examples h2 { font-weight: 400; max-width: 563px; margin-inline: auto; line-height: 1; } section.book-club-examples .book-club-example-cards { padding-block: 84px; padding-top: 12px; } section.book-club-examples .book-club-example-cards .book-club-example-card--item { display: flex; max-width: 908px; border: 1px solid var(--foreground-text); border-radius: 12px; 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; } } @media (min-width: 1084px) { section.book-club-examples .book-club-example-cards .book-club-example-card--item { max-height: 264px; } } 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; } 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.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; } @media (max-width: 480px) { section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p { font-size: 14px; } } 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: 1.8rem; } } section.book-club-examples .btn { display: inline-block; padding-inline: 5em; font-size: 16px; } section.testimonial-section h2 { text-align: center; font-weight: 400; } section.testimonial-section .testimonial-cards { display: flex; 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: 1.8rem; } } section.testimonial-section .testimonial-cards .testimonial-card--item .bio { display: flex; gap: 1rem; padding-bottom: 32px; align-items: center; } section.testimonial-section .testimonial-cards .testimonial-card--item .bio--img { border-radius: 100%; border: 1px solid var(--foreground-text); width: 61px; } section.testimonial-section .testimonial-cards .testimonial-card--item .bio--name { max-width: 12ch; font-weight: 600; font-size: 18px; margin-block-end: 0; } section.testimonial-section .testimonial-cards .testimonial-card--item--description { font-size: 16px; } @media (max-width: 480px) { section.testimonial-section .testimonial-cards .testimonial-card--item--description { font-size: 14px; } } section.faq { padding-block: 84px; } @media (max-width: 480px) { section.faq { padding-block: 42px; } } section.faq h2 { text-align: center; font-weight: 400; margin-bottom: 3rem; } section.faq .faq-list { border: 1px solid white; border-radius: 12px; } section.faq .faq-list .faq--item { padding-inline: 60px; padding-inline-start: 44px; padding-block: 45px; border-bottom: 1px solid; } @media (max-width: 480px) { section.faq .faq-list .faq--item { padding-block: 18px; padding-inline: 22px; padding-inline-start: 22px; } } section.faq .faq-list .faq--item:last-of-type { border-bottom: none; } section.faq .faq-list .faq--item .answer { margin-top: 16px; 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; list-style-type: "+"; } section.faq .faq-list .faq--item summary span { margin-left: 16px; } @media (max-width: 480px) { section.faq .faq-list .faq--item summary span { margin-left: 6px; } section.faq .faq-list .faq--item summary::marker { position: relative; left: -1em; } } section.faq .faq-list .faq--item[open] summary { list-style-type: "-"; } section.book-club-benefits { text-align: center; } section.book-club-benefits h2 { font-weight: 400; } section.book-club-benefits .benefit-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; row-gap: 90px; margin-block: 140px; margin-top: 84px; } @media (max-width: 480px) { section.book-club-benefits .benefit-cards { grid-template-columns: 1fr; } } section.book-club-benefits .benefit-cards .benefit-card--item img { 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%; } } @media (min-width: 481px) and (max-width: 1083px) { 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; margin-top: 21px; } section.book-club-benefits .benefit-cards .benefit-card--item p strong { font-weight: 600; } section.book-club-benefits .book-club-benefits-cta .btn { padding-inline: 4em; display: inline-block; } section.book-club-benefits .book-club-benefits-cta p { font-size: 16px; } #by-somos-inf { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; opacity: 0; transition: all 0.5s ease-in-out; } #by-somos-inf.show { opacity: 1; } footer.somos-infinitos-footer { padding-top: 73px; margin-top: 200px; padding-bottom: 150px; background-image: url("/wp-content/themes/somos-infinitos-theme/assets/images/footer-bg.svg"); background-repeat: no-repeat; 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 (min-width: 481px) and (max-width: 1083px) { 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: 0; margin-bottom: 0; opacity: 0; user-select: none; visibility: hidden; } footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links { list-style-type: none; padding-inline-start: 0; 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; margin-bottom: 14px; font-weight: 400; text-transform: uppercase; text-decoration: none; } footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a:hover, footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a:focus { text-decoration: none; text-shadow: 0px 0px 0px #fff; } footer.somos-infinitos-footer .email-cta h3 { font-family: var(--wp--preset--font-family--eb-garamond); font-size: 32px; font-weight: 400; line-height: 1; } footer.somos-infinitos-footer .email-cta form { display: none; 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; 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); } footer.somos-infinitos-footer .email-cta form button.btn { font-family: inherit; background-color: transparent; color: var(--foreground-text); 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); transform: none; } footer.somos-infinitos-footer .email-cta .external-social-links { display: flex; align-items: center; gap: 40px; margin-top: 24px; } footer.somos-infinitos-footer .email-cta .external-social-links a { display: flex; justify-content: center; align-items: center; text-decoration: none; } footer.somos-infinitos-footer .email-cta .external-social-links a:hover { text-decoration: none; } footer.somos-infinitos-footer .email-cta .external-social-links a img { height: 20px; } footer.somos-infinitos-footer .email-cta .external-social-links a img.insta, footer.somos-infinitos-footer .email-cta .external-social-links a img.youtube { height: 24px; } /*# sourceMappingURL=static.css.map */