main {
display: flex;
flex-direction: column;
gap: 5rem;
}
@media (max-width: 991px) {
main {
gap: 4.5rem;
}
}
@media (max-width: 650px) {
main {
gap: 4rem;
}
}
.embla {
position: relative;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
}
.popular__section {
padding-top: 1rem;
}
@media (max-width: 991px) {
.popular__section {
padding-top: 0;
}
}
.popular__wrapper {
gap: 2.4rem;
}
@media (max-width: 991px) {
.popular__wrapper {
gap: 2.2rem;
}
}
@media (max-width: 650px) {
.popular__wrapper {
gap: 2rem;
}
}
.popular__title {
font-size: 4rem;
line-height: 6rem;
font-weight: 600;
}
@media (max-width: 991px) {
.popular__title {
font-size: 3.6rem;
line-height: 5.4rem;
}
}
@media (max-width: 650px) {
.popular__title {
font-size: 3.2rem;
line-height: 4.8rem;
}
}
.popular__slide {
display: flex;
border-radius: 2.4rem;
overflow: hidden;
position: relative;
min-height: 60rem;
padding: 6rem;
}
@media (max-width: 991px) {
.popular__slide {
padding: 4.2rem;
border-radius: 1.8rem;
min-height: 4rem;
}
}
@media (max-width: 650px) {
.popular__slide {
padding: 2.4rem;
border-radius: 1.2rem;
min-height: 26.8rem;
}
}
@media (min-width: 651px) {
.popular__slide:hover .popular__slide-background {
transform: scale(1.05);
}
.popular__slide:hover .popular__slide-read-more {
color: white;
gap: 1.6rem;
}
.popular__slide:hover .popular__slide-read-more-icon {
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-icon-white.svg);
background-size: contain;
}
}
.popular__slide-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
z-index: 1;
transition: transform 0.2s ease-in-out;
}
.popular__slide-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.6%, rgba(0, 0, 0, 0.5) 69.81%, rgba(0, 0, 0, 0.5) 100%);
}
.popular__slide-content {
display: flex;
position: relative;
z-index: 3;
color: white;
gap: 8rem;
}
.popular__slide-categories {
gap: 1.6rem;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.popular__slide-categories {
gap: 1.2rem;
}
}
@media (max-width: 650px) {
.popular__slide-categories {
gap: 0.8rem;
}
}
.popular__slide-category {
padding: 0.4rem 1.6rem;
font-size: 1.6rem;
line-height: 2.4rem;
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: 0.8rem;
}
@media (max-width: 991px) {
.popular__slide-category {
padding: 0.2rem 1.6rem;
}
}
@media (max-width: 650px) {
.popular__slide-category {
padding: 0.1rem 1.6rem;
}
}
.popular__slide-date {
font-size: 1.8rem;
line-height: 2.7rem;
color: #c0c0c0;
}
@media (max-width: 991px) {
.popular__slide-date {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.popular__slide-date {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.popular__slide-title {
font-size: 5.2rem;
line-height: 6.2rem;
font-weight: 600;
padding: 1rem 0;
transition: color 0.2s ease-in-out;
}
@media (max-width: 991px) {
.popular__slide-title {
font-size: 3.6rem;
line-height: 1.5;
}
}
@media (max-width: 650px) {
.popular__slide-title {
font-size: 1.8rem;
padding: 0.8rem 0;
}
}
.popular__slide-excerpt {
font-size: 1.6rem;
line-height: 2.4rem;
color: #f9f9f9;
}
@media (max-width: 991px) {
.popular__slide-excerpt {
font-size: 1.4rem;
line-height: 1.5;
}
}
@media (max-width: 650px) {
.popular__slide-excerpt {
display: none;
}
}
.popular__slide-bottom {
gap: 1.6rem;
}
.popular__slide-read-more {
color: #909090;
gap: 1.2rem;
transition: color 0.2s ease-in-out, gap 0.2s ease-in-out;
}
.popular__slide-read-more-icon {
display: block;
min-width: 0.7rem;
min-height: 1rem;
max-width: 0.7rem;
max-height: 1rem;
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-icon.svg);
background-size: contain;
transition: background 0.2s ease-in-out;
}
.popular__next, .popular__prev {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #212121;
border-radius: 1.4rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
@media (max-width: 991px) {
.popular__next, .popular__prev {
width: 4.8rem;
height: 4.8rem;
border-radius: 1rem;
}
.popular__next img, .popular__prev img {
max-width: 1.2rem;
}
}
@media (max-width: 650px) {
.popular__next, .popular__prev {
width: 2.8rem;
height: 2.8rem;
border-radius: 0.6rem;
}
.popular__next img, .popular__prev img {
max-width: 0.8rem;
}
}
.popular__prev {
left: -3rem;
}
@media (max-width: 1299px) {
.popular__prev {
left: -1.4rem;
}
}
.popular__next {
right: -3rem;
}
@media (max-width: 1299px) {
.popular__next {
right: -1.4rem;
}
}
.categories__wrapper {
row-gap: 1.6rem;
-moz-column-gap: 0.8rem;
column-gap: 0.8rem;
margin: 0 auto;
max-width: 71.2rem;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.categories__wrapper {
row-gap: 1.2rem;
}
}
@media (max-width: 650px) {
.categories__wrapper {
row-gap: 0.8rem;
justify-content: flex-start;
}
}
.categories__category {
padding: 0.8rem 1.6rem;
font-size: 1.8rem;
line-height: 2.7rem;
border-radius: 0.8rem;
border: 1px solid #c0c0c0;
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.categories__category:is(div) {
color: white;
background-color: #212121;
border-color: #212121;
}
@media (max-width: 650px) {
.categories__category {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (min-width: 651px) {
.categories__category:not(div):hover {
border-color: #212121;
background-color: #eeeeee;
}
}
.popup {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(33, 33, 33, 0.8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
z-index: -1;
transition: opacity 0.2s ease-out, visibility 0.2s ease-out, z-index 0.2s ease-out;
overscroll-behavior: contain;
max-width: 100vw;
}
.popup.visible {
opacity: 1;
visibility: visible;
z-index: 1001;
}
.popup.visible .popup__wrapper {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0.1s;
}
.popup .container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.popup__close {
position: absolute;
top: 1.8rem;
right: 1.8rem;
width: 2.9rem;
height: 2.9rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.popup__wrapper {
color: white;
padding: 5.7rem 3.6rem 5.2rem;
border-radius: 2rem;
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/images/homepage-popup-background.webp) no-repeat center;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 48rem;
max-width: 100%;
width: 100%;
text-align: center;
position: relative;
visibility: hidden;
opacity: 0;
transform: translateY(2rem);
transition: transform 0.2s ease-out, visibility 0.2s ease-out, opacity 0.2s ease-out;
}
@media (max-width: 991px) {
.popup__wrapper {
padding: 9rem 3rem;
}
}
@media (max-width: 650px) {
.popup__wrapper {
padding: 13rem 2.4rem;
}
}
.popup__title {
font-size: 4rem;
line-height: 6rem;
letter-spacing: -0.0258rem;
font-weight: 600;
}
@media (max-width: 991px) {
.popup__title {
font-size: 3.2rem;
line-height: 4.8rem;
}
}
@media (max-width: 650px) {
.popup__title {
font-size: 2.4rem;
line-height: 3.4rem;
}
}
.popup__text {
padding-top: 1.6rem;
font-size: 1.8rem;
line-height: 2.7rem;
}
@media (max-width: 650px) {
.popup__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.popup__text {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.popup__cta {
padding-top: 4rem;
}
.actionLine {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
padding: 1.6rem 0;
background-color: #212121;
color: #f9f9f9;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visibility: visible;
transform: translateY(100%);
z-index: 10;
transition: transform 0.2s ease-out;
}
.actionLine--visible {
visibility: visible;
transform: none;
}
.actionLine__close {
position: absolute;
width: 2.8rem;
height: 2.8rem;
display: flex;
justify-content: center;
align-items: center;
top: 1.1rem;
right: 1rem;
cursor: pointer;
transition: opacity 0.2s ease-in-out;
}
@media (min-width: 651px) {
.actionLine__close:not(:hover) {
opacity: 0.5;
}
}
.actionLine__wrapper {
gap: 2.4rem;
justify-content: center;
padding-right: 4.8rem;
}
@media (max-width: 650px) {
.actionLine__wrapper {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
}
.actionLine__text {
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 500;
}
@media (max-width: 991px) {
.actionLine__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.actionLine__cta {
font-size: 1.4rem;
line-height: 2.1rem;
padding: 0.5rem 1.6rem;
min-width: -moz-fit-content;
min-width: fit-content;
}
@media (min-width: 651px) {
.actionLine__cta:hover {
padding: 0.5rem 1.6rem;
transform: translateY(-0.5rem);
}
}