@charset "UTF-8";

html,
body,
[id] {
scroll-padding-top: 17rem;
}
main {
padding-top: 21rem;
}
@media (max-width: 1099px) {
main {
padding-top: 17rem;
}
}
main .container {
max-width: 113.2rem;
}
.post__categories {
padding-bottom: 2rem;
gap: 0.8rem;
flex-wrap: wrap;
}
.post__category {
padding: 0.3rem 1.6rem;
font-size: 1.6rem;
line-height: 2.4rem;
color: white;
border-radius: 0.8rem;
text-align: center;
min-width: -moz-fit-content;
min-width: fit-content;
background: linear-gradient(to right, #fe7a7c, #f41c5d);
transition: padding 0.2s ease-out;
}
@media (min-width: 651px) {
.post__category:hover {
padding: 0.3rem 2.4rem;
}
}
.post__title {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
.post__description {
padding-top: 1.6rem;
font-size: 1.4rem;
line-height: 2.1rem;
gap: 1.6rem;
}
.post__hero-author {
padding-top: 3rem;
gap: 0.4rem;
max-width: -moz-fit-content;
max-width: fit-content;
font-size: 1.4rem;
line-height: 2.1rem;
}
.post__hero-author-top {
gap: 0.8rem;
}
.post__hero-author-details {
-moz-column-gap: 0.6rem;
column-gap: 0.6rem;
row-gap: 0;
flex-wrap: wrap;
}
@media (min-width: 651px) {
.post__hero-author-image-wrapper:hover ~ .post__hero-author-details > a {
color: #f41c5d;
}
}
.post__hero-author-name {
font-weight: 600;
transition: color 0.2s ease-in-out;
}
@media (min-width: 651px) {
.post__hero-author-name:hover {
color: #f41c5d;
}
}
.post__hero-author-bottom {
color: #909090;
-moz-column-gap: 1.2rem;
column-gap: 1.2rem;
flex-wrap: wrap;
}
.post__hero-author-image {
max-width: 4.4rem;
max-height: 4.4rem;
min-width: 4.4rem;
min-height: 4.4rem;
border-radius: 0.4rem;
}
.post__hero-author .bubble {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #212121;
}
.post__grid {
padding-top: 4rem;
grid-template-columns: 70fr 33.5fr;
gap: 2.2rem;
align-items: flex-start;
}
@media (max-width: 991px) {
.post__grid {
grid-template-columns: 1fr;
}
.post__grid > *:first-child {
order: 2;
}
.post__grid > *:last-child {
order: 1;
}
}
.post__toc {
width: 100%;
padding: 1.2rem 1rem 1.8rem;
border-radius: 1.6rem;
background-color: #f4eff9;
gap: 1.2rem;
position: sticky;
top: 17rem;
}
@media (max-width: 991px) {
.post__toc {
position: relative;
top: 0;
}
}
.post__toc-title {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
}
.post__toc-items {
font-size: 1.4rem;
line-height: 2.1rem;
}
.post__toc-items .toc-list {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.post__toc-items .toc-item a {
display: flex;
align-items: center;
gap: 1.2rem;
transition: color 0.2s ease-in-out;
}
@media (min-width: 651px) {
.post__toc-items .toc-item a:hover {
color: #f41c5d;
}
}
.post__toc-items .toc-item .toc-number {
min-width: 2.4rem;
height: 2.1rem;
background-color: white;
border-radius: 0.4rem;
text-align: center;
}
.post__content {
display: flex;
flex-direction: column;
gap: 3rem;
font-size: 1.8rem;
line-height: 2.7rem;
}
@media (max-width: 650px) {
.post__content {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.post__content h2 {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
padding-top: 1rem;
}
@media (max-width: 650px) {
.post__content h2 {
font-size: 2.8rem;
line-height: 3.6rem;
}
}
.post__content h3 {
font-size: 2.4rem;
line-height: 3.6rem;
font-weight: 600;
}
@media (max-width: 650px) {
.post__content h3 {
font-size: 2rem;
line-height: 2.8rem;
}
}
.post__content h4 {
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
}
.post__content ol,
.post__content ul {
padding: 0;
display: flex;
flex-direction: column;
gap: 1.2rem;
list-style: none;
}
.post__content iframe {
min-width: 100%;
}
.post__content ul li {
margin-left: 1.6rem;
}
.post__content ul li::before {
content: "";
display: inline-block;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.2rem;
background: linear-gradient(to right, #fe7a7c, #f41c5d);
vertical-align: middle;
margin: auto 1.6rem auto 0;
transform: translateY(-1px);
}
.post__content ol {
counter-reset: list-counter;
}
.post__content ol li {
counter-increment: list-counter;
margin-left: 1.6rem;
}
.post__content ol li::before {
content: counter(list-counter) ".";
box-sizing: border-box;
display: inline-block;
min-width: 1.8rem;
margin-right: 1.3rem;
}
.post__content blockquote {
margin: 0;
margin-left: 1.6rem;
padding-left: 1.6rem;
border-left: 1px solid #c0c0c0;
padding-bottom: 0.4rem;
padding-top: 3.3rem;
position: relative;
}
.post__content blockquote > p {
font-size: 2.4rem;
line-height: 3.6rem;
font-weight: 500;
}
.post__content blockquote > cite {
font-size: 1.4rem;
line-height: 2.1rem;
color: #909090;
font-style: normal;
padding-top: 0.8rem;
}
.post__content blockquote::before {
content: "“";
position: absolute;
left: 1.6rem;
top: 0;
font-size: 3.2rem;
line-height: 149.7%;
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.post__content p a {
color: #f41c5d;
}
@media (min-width: 651px) {
.post__content p a:hover {
text-decoration: underline;
}
}
.post__content .wp-element-button {
border-radius: 2.4rem;
max-width: -moz-fit-content;
max-width: fit-content;
transition: padding 0.2s ease-out;
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
color: white;
padding: 1.3rem 2.6rem;
font-weight: 600;
font-size: 1.8rem;
line-height: 3.2rem;
border-radius: 9999px;
}
@media (min-width: 651px) {
.post__content .wp-element-button:hover {
padding: 1.3rem 2.6rem;
}
}
@media (max-width: 650px) {
.post__content .wp-element-button {
padding: 1rem 1.6rem;
border-radius: 1.2rem;
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.post__back-to-top {
bottom: 6.5rem;
right: 6.5rem;
position: fixed;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: #212121;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.2s ease;
}
@media (max-width: 991px) {
.post__back-to-top {
bottom: 1.7rem;
right: 1.7rem;
}
}
.post__back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.post__back-to-top .progress-circle {
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
transform: rotate(-90deg);
}
.post__back-to-top .progress-circle circle {
fill: none;
stroke-width: 2px;
}
.post__back-to-top .progress-circle-background {
stroke: #212121;
}
.post__back-to-top .progress-circle-fill {
stroke: #ffffff;
stroke-linecap: round;
stroke-dasharray: 165;
stroke-dashoffset: 165;
transition: stroke-dashoffset 0.1s linear;
}
.post__back-to-top img {
position: relative;
z-index: 1;
}
.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;
}
.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 {
background-color: white;
padding: 5.7rem 3.6rem 5.2rem;
border-radius: 2rem;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto;
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;
}
.popup__title {
font-size: 2.4rem;
line-height: 3.4rem;
font-weight: 600;
}
.popup__keypoints {
padding-top: 1.6rem;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto;
gap: 1.6rem;
}
.popup__keypoint {
gap: 0.8rem;
font-size: 1.6rem;
line-height: 2.4rem;
}
.popup__cta {
padding-top: 2rem;
}
.popup__reviews {
padding-top: 2.4rem;
gap: 0.4rem;
}
.popup__reviews-text {
font-size: 1.4rem;
line-height: 2.1rem;
color: #909090;
}
.popup__reviews-image {
max-height: 3.6rem;
width: auto;
height: 3.6rem;
}
.author {
margin-top: 4rem;
}
.author__image {
max-width: 5rem;
max-height: 5rem;
min-width: 5rem;
min-height: 5rem;
}
@media (min-width: 651px) {
.author__image-wrapper:hover ~ .author__top-data .author__top-name {
color: #f41c5d;
}
}
.author__top-name {
font-size: 1.6rem;
line-height: 2.4rem;
transition: color 0.2s ease-in-out;
}
@media (min-width: 651px) {
.author__top-name:hover {
color: #f41c5d;
}
}
.author__description {
font-size: 1.6rem;
line-height: 2.4rem;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.author__socials {
gap: 1rem;
}
.author__social {
transition: opacity 0.2s ease-in-out;
}
@media (min-width: 651px) {
.author__social:hover {
opacity: 0.7;
}
}
.author__social img {
max-width: 2rem;
max-height: 2rem;
min-width: 2rem;
min-height: 2rem;
}
.author__read-more {
max-width: -moz-fit-content;
max-width: fit-content;
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
gap: 0.6rem;
transition: color 0.2s ease-in-out, gap 0.2s ease-in-out;
}
@media (min-width: 651px) {
.author__read-more:hover {
color: #f41c5d;
gap: 1rem;
}
.author__read-more:hover .author__read-more-icon {
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-red-icon.svg) no-repeat center;
background-size: contain;
}
}
.author__read-more-icon {
min-width: 0.7rem;
min-height: 1rem;
max-width: 0.7rem;
max-height: 1rem;
transition: background-image 0.2s ease-in-out;
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-black-icon.svg) no-repeat center;
background-size: contain;
}
.faq {
padding-top: 4rem;
gap: 3rem;
}
.faq__title {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
.faq__item {
background-color: white;
}
.faq__item:not(:last-child) {
border-bottom: 1px solid #efefef;
}
.faq__item:first-child {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.faq__item:last-child {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.faq__q {
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
padding: 3rem 2rem;
cursor: pointer;
transition: color 0.2s ease-in-out, padding-bottom 0.2s ease-out;
}
@media (min-width: 651px) {
.faq__q:hover {
color: #f41c5d;
}
.faq__q:hover .faq__q-icon {
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/faq-dropdown-icon-hover.svg) no-repeat center;
background-size: contain;
}
}
.faq__q--active {
padding-bottom: 0;
}
.faq__q--active .faq__q-icon {
transform: rotate(180deg);
}
.faq__q-text {
padding-right: 2.4rem;
}
.faq__q-icon {
display: block;
min-width: 2rem;
min-height: 2rem;
background: url(//flirtist.ai/blog/wp-content/themes/wingmanx/icons/faq-dropdown-icon.svg) no-repeat center;
background-size: contain;
transition: all 0.2s ease-in-out;
}
.faq__a-wrapper {
height: 0;
overflow: hidden;
transition: height 0.2s ease-out, opacity 0.2s ease-out;
}
.faq__a-wrapper:not(.visible) {
opacity: 0;
}
.faq__a {
padding: 0.8rem 2rem 3rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.embla__slide img {
max-width: 100%;
min-width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
min-height: 100%;
}
.wingmanx-carousel-block .embla__slide {
border-radius: 1.2rem !important;
overflow: hidden;
}
.schema-faq.wp-block-yoast-faq-block {
display: none !important;
}
.post__toc--sticky {
position: fixed;
top: 1.2rem;
left: 0;
padding: 0 0.7rem;
width: 100%;
z-index: 100;
transition: all 0.2s ease-out;
}
@media (min-width: 651px) {
.post__toc--sticky {
display: none !important;
}
}
.post__toc--sticky--hidden {
transform: translateY(2rem);
opacity: 0;
z-index: -1;
visibility: hidden;
}
@media (max-width: 650px) {
.wp-block-wingmanx-banner {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
}
.post__toc--sticky .post__toc {
padding: 1.6rem !important;
gap: 0;
}
.post__toc--sticky .post__toc-title {
gap: 1rem;
}
.post__toc--sticky .post__toc-title img {
transform: rotate(90deg);
transition: transform 0.2s ease-in-out;
}
.post__toc--sticky .post__toc-items {
max-height: 12rem;
overflow: auto;
overscroll-behavior: contain;
}
.post__toc--sticky .post__toc-items a.active .toc-number {
color: white;
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
}
.post__toc--sticky .post__toc-items a.active .toc-text {
font-weight: 600;
}
.post__toc--sticky .post__toc-items-wrapper {
display: none;
padding-top: 1.6rem;
}
.post__toc--sticky--toggle .post__toc-title img {
transform: rotate(-90deg);
}
.post__toc--sticky .cta {
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
}
::-webkit-scrollbar {
width: 2px;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background: white;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 5px;
} * {
scrollbar-color: #c0c0c0 white;
}