Untitled
unknown
plain_text
a year ago
36 kB
2
Indexable
Never
/*
Based on TailwindCSS recommendations,
consider using classes instead of the `@apply` directive
@see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/
@font-face {
font-family: "Grold-Light";
src: url("~assets/fonts/Grold-Light.eot");
src: url("~assets/fonts/Grold-Light.eot?#iefix") format("embedded-opentype"),
url("~assets/fonts/Grold-Light.woff2") format("woff2"),
url("~assets/fonts/Grold-Light.woff") format("woff"),
url("~assets/fonts/Grold-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-SemiLight";
src: url("~assets/fonts/Grold-SemiLight.eot");
src: url("~assets/fonts/Grold-SemiLight.eot?#iefix")
format("embedded-opentype"),
url("~assets/fonts/Grold-SemiLight.woff2") format("woff2"),
url("~assets/fonts/Grold-SemiLight.woff") format("woff"),
url("~assets/fonts/Grold-SemiLight.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-Regular";
src: url("~assets/fonts/Grold-Regular.eot");
src: url("~assets/fonts/Grold-Regular.eot?#iefix") format("embedded-opentype"),
url("~assets/fonts/Grold-Regular.woff2") format("woff2"),
url("~assets/fonts/Grold-Regular.woff") format("woff"),
url("~assets/fonts/Grold-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-Medium";
src: url("~assets/fonts/Grold-Medium.eot");
src: url("~assets/fonts/Grold-Medium.eot?#iefix") format("embedded-opentype"),
url("~assets/fonts/Grold-Medium.woff2") format("woff2"),
url("~assets/fonts/Grold-Medium.woff") format("woff"),
url("~assets/fonts/Grold-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-Bold";
src: url("~assets/fonts/Grold-Bold.eot");
src: url("~assets/fonts/Grold-Bold.eot?#iefix") format("embedded-opentype"),
url("~assets/fonts/Grold-Bold.woff2") format("woff2"),
url("~assets/fonts/Grold-Bold.woff") format("woff"),
url("~assets/fonts/Grold-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-Black";
src: url("~assets/fonts/Grold-Black.eot");
src: url("~assets/fonts/Grold-Black.eot?#iefix") format("embedded-opentype"),
url("~assets/fonts/Grold-Black.woff2") format("woff2"),
url("~assets/fonts/Grold-Black.woff") format("woff"),
url("~assets/fonts/Grold-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grold-ExtraBlack";
src: url("~assets/fonts/Grold-ExtraBlack.eot");
src: url("~assets/fonts/Grold-ExtraBlack.eot?#iefix")
format("embedded-opentype"),
url("~assets/fonts/Grold-ExtraBlack.woff2") format("woff2"),
url("~assets/fonts/Grold-ExtraBlack.woff") format("woff"),
url("~assets/fonts/Grold-ExtraBlack.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend-Regular";
src: url(~assets/fonts/Lexend-Regular.ttf);
font-weight: 400;
font-style: normal;
font-display: swap;
}
/** Convert PX to REM based on global font size. | v1.0 | 2016 */
.pb-80 {
@apply pb-20;
}
.pb-120 {
@apply pb-[120px];
}
@media screen and (min-width: 1441px) {
.container {
@apply min-w-[1440px] p-0;
}
}
@media screen and (max-width: 768px) {
.container {
@apply px-[25px] py-0;
}
}
.section-banner {
@apply px-0 py-[120px];
}
@media screen and (max-width: 1279px) {
.section-banner {
@apply px-0 py-20;
}
}
@media screen and (max-width: 768px) {
.section-banner {
@apply px-0 py-14;
}
}
.section-banner .fake-banner {
@apply bg-[#ececec] w-[728px] h-[90px] text-[#666] text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-8 mx-auto my-0 rounded-lg;
}
@media screen and (max-width: 768px) {
.section-banner .fake-banner {
@apply w-[300px] h-[250px];
}
}
.section-banner .fake-banner p {
@apply m-0;
}
.section-tools {
@apply pb-[120px];
}
@media screen and (max-width: 1279px) {
.section-tools {
@apply pb-20;
}
}
@media screen and (max-width: 768px) {
.section-tools {
@apply pb-0;
}
}
.section-tools .section-tools-wrapper .description {
@apply text-[#0e0e0e] text-[21px] leading-[34px] text-center mb-4;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-tools .section-tools-wrapper .description {
@apply text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-[23px] mb-[11px];
}
}
.section-tools .section-tools-wrapper .title {
@apply text-black text-[46px] leading-[55px] text-center max-w-[589px] mt-0 mb-20 mx-auto;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 1279px) {
.section-tools .section-tools-wrapper .title {
@apply text-[38px];
}
}
@media screen and (max-width: 768px) {
.section-tools .section-tools-wrapper .title {
@apply text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-8 w-80 mb-14;
font-family: "Grold-Bold", Arial, sans-serif;
}
}
.section-tools .section-tools-wrapper .tools-card-wrapper {
@apply overflow-hidden rounded-3xl;
}
@media screen and (max-width: 991px) {
.section-tools .section-tools-wrapper .tools-card-wrapper {
@apply gap-4 flex-col pb-14 rounded-none;
overflow: initial;
}
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card.card-bordered {
@apply border rounded-lg border-solid border-[#dee2e6];
}
}
.section-tools .section-tools-wrapper .tools-card-wrapper .card {
@apply p-[50px] rounded-none border-l-transparent first:rounded-[24px_0_0_24px] first:border-l-[#dee2e6] last:rounded-[0_24px_24px_0] last:border-r-[#dee2e6];
}
@media screen and (max-width: 1279px) {
.section-tools .section-tools-wrapper .tools-card-wrapper .card {
@apply p-[30px];
}
}
@media screen and (max-width: 768px) {
.section-tools .section-tools-wrapper .tools-card-wrapper .card {
@apply flex flex-row items-center gap-5 h-[88px] px-[18px] py-[22px] rounded-lg first:rounded-lg last:rounded-lg;
}
}
.section-tools .section-tools-wrapper .tools-card-wrapper .card img {
@apply mb-[35px];
}
@media screen and (max-width: 768px) {
.section-tools .section-tools-wrapper .tools-card-wrapper .card img {
@apply mb-0;
}
}
.section-tools .section-tools-wrapper .tools-card-wrapper .card .card-title {
@apply text-black text-[27px] leading-8 text-left mb-[25px];
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-tools .section-tools-wrapper .tools-card-wrapper .card .card-title {
@apply text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-5 mb-0;
}
}
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card
.card-description {
@apply text-[#666] text-[17px] leading-8 w-full max-w-[238px] text-left mb-[37px];
font-family: "Grold-Regular", Arial, sans-serif;
}
@media screen and (max-width: 1279px) {
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card
.card-description {
@apply min-h-[128px];
}
}
@media screen and (max-width: 768px) {
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card
.card-description {
@apply hidden;
}
}
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card
.blog-read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline flex h-full;
font-family: "Grold-Regular", Arial, sans-serif;
align-items: end;
}
@media screen and (max-width: 768px) {
.section-tools
.section-tools-wrapper
.tools-card-wrapper
.card
.blog-read-more
span {
@apply hidden;
}
}
.section-editors-picks .section-editors-picks-wrapper {
@apply pt-0 pb-[120px] px-0;
}
@media screen and (max-width: 1279px) {
.section-editors-picks .section-editors-picks-wrapper {
@apply pt-0 pb-20 px-0;
}
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper {
@apply pt-0 pb-14 px-0;
}
}
.section-editors-picks .section-editors-picks-wrapper .swiper-btns {
@apply w-[90px];
}
.section-editors-picks
.section-editors-picks-wrapper
.swiper-btns
.swiper-button-prev {
@apply flex items-center justify-center border w-10 h-10 rounded-[50%] border-solid border-[#dedede] left-0 right-auto after:text-base after:text-[black] after:font-black;
}
.section-editors-picks
.section-editors-picks-wrapper
.swiper-btns
.swiper-button-next {
@apply flex items-center justify-center border w-10 h-10 rounded-[50%] border-solid border-[#dedede] left-auto right-0 after:text-base after:text-[black] after:font-black;
}
.section-editors-picks
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply relative text-black text-[46px] leading-[55px] text-left mb-10;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 1279px) {
.section-editors-picks
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply mb-[30px];
}
}
@media screen and (max-width: 768px) {
.section-editors-picks
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-[41px] flex justify-between;
}
}
.section-editors-picks .section-editors-picks-wrapper .card-wrapper {
@apply grid grid-cols-[1fr_1fr_1fr] grid-rows-[1fr] gap-[80px_37px];
grid-template-areas: ". . .";
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper .card-wrapper {
@apply grid-cols-[1fr] gap-[40px_0];
grid-template-areas: ".";
}
}
.section-editors-picks .section-editors-picks-wrapper .card {
@apply border-[none];
}
.section-editors-picks .section-editors-picks-wrapper .card .img-wrapper {
@apply h-[341px] w-full bg-cover mb-10 rounded-3xl;
background: url("~assets/img/hero-image.jpg") center center no-repeat;
}
@media screen and (max-width: 1279px) {
.section-editors-picks .section-editors-picks-wrapper .card .img-wrapper {
@apply h-[291px] mb-[30px];
}
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper .card .img-wrapper {
@apply h-[227px] mb-5;
}
}
.section-editors-picks .section-editors-picks-wrapper .card .category-label {
@apply text-[#00cba8] text-[17px] leading-5 text-left z-[99] mb-4;
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper .card .category-label {
@apply mb-2.5;
}
}
.section-editors-picks .section-editors-picks-wrapper .card .category-label a {
@apply text-[#00cba8] no-underline;
}
.section-editors-picks .section-editors-picks-wrapper .card .blog-title {
@apply text-black text-[31px] leading-[37px] text-left min-h-[74px] text-ellipsis overflow-hidden mb-10 pr-5;
font-family: "Grold-Medium", Arial, sans-serif;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
@media screen and (max-width: 1279px) {
.section-editors-picks .section-editors-picks-wrapper .card .blog-title {
@apply text-ellipsis overflow-hidden min-h-[30px] text-[28px] mb-2.5;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper .card .blog-title {
@apply text-[26px] leading-[31px] mb-5;
}
}
.section-editors-picks .section-editors-picks-wrapper .card .blog-excerpt {
@apply text-[#666] text-[17px] leading-8 text-left min-h-[128px] text-ellipsis overflow-hidden mb-10;
font-family: "Grold-SemiLight", Arial, sans-serif;
-webkit-line-clamp: 4;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
@media screen and (max-width: 1279px) {
.section-editors-picks .section-editors-picks-wrapper .card .blog-excerpt {
@apply text-ellipsis overflow-hidden min-h-[96px] mb-[30px];
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
}
@media screen and (max-width: 768px) {
.section-editors-picks .section-editors-picks-wrapper .card .blog-excerpt {
@apply mb-5;
}
}
.section-editors-picks .section-editors-picks-wrapper .card .blog-read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline flex w-[90px] bottom-0;
font-family: "Grold-Regular", Arial, sans-serif;
position: initial;
}
.section-editors-picks
.section-editors-picks-wrapper
.card
.blog-read-more
> span {
@apply absolute bottom-0 after:content-[''] after:w-[95px] after:h-px after:absolute after:left-0 after:bottom-0;
}
.section-editors-picks
.section-editors-picks-wrapper
.card
.blog-read-more
> span::after {
background: #000;
}
.section-pagination {
@apply pt-20;
}
.section-pagination .section-pagination-wrapper .pagination {
@apply flex max-w-[350px] justify-between mx-auto my-0;
}
.section-pagination .section-pagination-wrapper .pagination .ellipsis {
@apply flex justify-center text-[17px] border w-12 h-12 rounded-lg border-solid border-[#dedede];
align-items: end;
font-family: "Grold-Regular", Arial, sans-serif;
}
.section-pagination .section-pagination-wrapper .pagination a {
@apply flex items-center justify-center border w-12 h-12 text-[#666] no-underline text-[17px] rounded-lg border-solid border-[#dedede];
font-family: "Grold-Regular", Arial, sans-serif;
}
.section-pagination .section-pagination-wrapper .pagination a.active {
@apply border border-solid border-black;
}
.section-hero .container {
@apply w-full max-w-[1440px] p-0;
}
@media screen and (max-width: 1279px) {
.section-hero .container .section-hero-wrapper {
@apply py-20;
}
}
.section-hero .container .section-hero-wrapper .label {
@apply text-black text-[22px] leading-10 text-center mb-6;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.section-hero .container .section-hero-wrapper .description {
@apply text-[#666] text-2xl leading-10 w-full max-w-[800px] text-center mx-auto my-0;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.section-hero .container .section-hero-wrapper .title {
@apply text-black text-[76px] leading-[90px] normal-case w-full max-w-[940px] text-center mt-0 mb-7 mx-auto;
font-family: "Grold-ExtraBlack", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-hero .container .section-hero-wrapper .title {
@apply text-4xl leading-8;
}
}
.article-wrapper .container {
@apply max-w-[1190px] w-full p-0;
}
@media screen and (max-width: 768px) {
.article-wrapper .container {
@apply px-[25px] py-0;
}
}
.article-wrapper .container .article-featured-image-section {
@apply h-[671px] max-w-[1190px] w-full bg-cover mb-[34px] mx-auto my-0 p-0 rounded-3xl;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-featured-image-section {
@apply h-52 rounded-2xl;
}
}
.article-wrapper .container .article-actions {
@apply max-w-[1190px] mx-auto my-0 pb-[120px];
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-actions {
@apply pb-14;
}
}
.article-wrapper .container .article-actions .meta-author {
@apply gap-[25px];
}
.article-wrapper .container .article-actions .meta-author .avatar {
@apply w-16 h-16 rounded-[100%];
background: #dedede;
}
.article-wrapper .container .article-actions .meta-author .author-name p {
@apply text-black text-[19px] leading-[23px] text-left mb-0;
font-family: "Grold-Medium", Arial, sans-serif;
}
.article-wrapper .container .article-actions .meta-author .author-name p a {
@apply text-black no-underline;
}
.article-wrapper .container .article-actions .meta-author .author-name p span {
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper
.container
.article-actions
.meta-author
.author-name
p.article-updated {
@apply text-[#666] text-[17px] leading-5 text-center mt-2.5;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper .container .article-actions .article-actions-buttons {
@apply gap-3;
}
.article-wrapper
.container
.article-actions
.article-actions-buttons
.btn-primary {
@apply bg-white w-[164px] h-10 text-black text-[17px] leading-4 gap-3.5 rounded-xl border-2 border-solid border-[#dedede];
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-actions
.article-actions-buttons
.btn-primary {
@apply w-12 h-12;
}
}
.article-wrapper .container .article-content {
@apply w-full max-w-[730px] mx-auto my-0;
}
.article-wrapper .container .article-content :deep(img) {
@apply w-full h-auto rounded-2xl;
}
.article-wrapper .container .article-content .article-headline {
@apply pb-14 border-b-[#dedede] border-b border-solid;
}
.article-wrapper .container .article-content .article-headline :deep(h2) {
@apply text-black text-[34px] leading-10 w-full max-w-[692px] text-left mb-4;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .article-headline :deep(h2) {
@apply text-[28px] leading-[34px];
}
}
.article-wrapper .container .article-content .article-headline :deep(h3) {
@apply text-black text-[28px] leading-10 text-left mb-4;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .article-headline :deep(h3) {
@apply text-2xl leading-[34px];
}
}
.article-wrapper .container .article-content .article-headline :deep(h4) {
@apply text-black text-[23px] leading-10 text-left mb-4;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .article-headline :deep(h4) {
@apply text-[21px] leading-[34px];
}
}
.article-wrapper .container .article-content .article-headline :deep(p) {
@apply text-[#666] text-lg leading-[29px] text-left mb-8;
font-family: "Lexend-Regular", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .article-headline :deep(p) {
@apply text-base;
}
}
.article-wrapper .container .article-content .article-headline :deep(p) a {
@apply relative underline-offset-[6px] text-[#666] mr-5 after:content-[''] after:absolute after:w-4 after:h-4 after:bg-cover after:ml-[5px] after:bottom-[5px];
text-decoration: underline #666 solid 1px;
}
.article-wrapper
.container
.article-content
.article-headline
:deep(p)
a:after {
background: url("~assets/img/ico-external-link.svg") center center no-repeat;
}
.article-wrapper .container .article-content .article-headline :deep(p) a[href^="https://www.expatica.com"]:after {
@apply hidden;
}
.article-wrapper .container .article-content .article-headline :deep(p) a[href^="https://www.expatica.com"] {
@apply mr-0;
}
.article-wrapper .container .article-content .article-headline :deep(ul) {
@apply mb-4;
}
.article-wrapper .container .article-content .article-headline :deep(ul) li {
@apply text-[#666] text-lg leading-[29px] w-full max-w-2xl text-left marker:text-[150%] marker:text-[#00cba8];
font-family: "Lexend-Regular", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .article-headline :deep(ul) li {
@apply text-base;
}
}
.article-wrapper .container .article-content .article-headline :deep(ul) li a {
@apply relative no-underline text-[#666] mr-[5px] before:absolute before:content-[''] before:w-full before:h-px before:left-0 before:bottom-0 after:content-[''] after:relative after:inline-block after:w-4 after:h-4 after:bg-cover after:-right-1 after:top-0;
}
.article-wrapper
.container
.article-content
.article-headline
:deep(ul)
li
a:before {
background: #dedede;
}
.article-wrapper
.container
.article-content
.article-headline
:deep(ul)
li
a:after {
background: url("~assets/img/ico-external-link.svg") center center no-repeat;
}
.article-wrapper .container .article-content .article-headline :deep(ul) li a[href^="https://www.expatica.com"]:after {
@apply hidden;
}
.article-wrapper .container .article-content .article-headline :deep(ul) li a[href^="https://www.expatica.com"] {
@apply mr-0;
}
.article-wrapper
.container
.article-content
.article-headline
.img-placeholder
img {
@apply w-full rounded-2xl;
}
.article-wrapper
.container
.article-content
.article-headline
.img-placeholder
.img-caption {
@apply text-[#666] text-sm leading-8 text-left relative mt-4 pl-[30px] before:content-[''] before:w-6 before:h-6 before:bg-[#d8d8d8] before:absolute before:rounded-[50%] before:left-0 before:top-0;
font-family: "Lexend-Regular", Arial, sans-serif;
}
.article-wrapper .container .article-content .article-table-of-contents {
@apply pt-[45px] pb-[50px] border-b-[#dedede] border-b border-solid;
}
.article-wrapper .container .article-content .article-table-of-contents p {
@apply text-black text-lg leading-8 text-left;
font-family: "Lexend-Regular", Arial, sans-serif;
}
.article-wrapper .container .article-content .article-table-of-contents ul li {
@apply text-[#666] text-lg leading-[35px] w-full max-w-2xl text-left marker:text-[150%] marker:text-[#00cba8];
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper .container .article-content .presentation-card {
@apply bg-[#f8f8f8] mt-14 p-[55px] rounded-2xl;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content {
@apply max-w-[400px];
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.label {
@apply text-[#00cba8] text-[17px] leading-5 text-left mb-[5px];
font-family: "Grold-Medium", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.title {
@apply text-black text-[23px] leading-10 text-left mb-5;
font-family: "Grold-Bold", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.description {
@apply text-[#666] text-[21px] leading-8 text-left mb-[30px];
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline relative after:absolute after:content-[''] after:w-full after:bottom-[-5px] after:h-px after:left-0;
font-family: "Grold-Regular", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.read-more:after {
background: #000;
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-content
.read-more
img {
@apply ml-[7px];
}
.article-wrapper
.container
.article-content
.presentation-card
.presentation-card-logo {
@apply w-[150px] h-[150px] bg-no-repeat bg-contain bg-center rounded-lg;
}
.article-wrapper .container .article-content .posts-section .grid-post {
@apply flex gap-10;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.img-left {
@apply w-full max-w-[115px] h-[86px] rounded-2xl;
}
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post:nth-child(1) {
@apply px-0 py-[55px] border-b-[#dedede] border-b border-solid;
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post:nth-child(2) {
@apply px-0 py-[55px] border-b-[#dedede] border-b border-solid;
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.img-left {
@apply w-[204px] h-[153px];
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right {
@apply flex justify-start flex-col items-start;
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right
.category-label {
@apply text-[#00cba8] text-[17px] leading-5 text-left z-[99] mb-2;
font-family: "Grold-Medium", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right
.post-title {
@apply text-black text-[26px] leading-[31px] text-left mb-8;
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right
.post-title {
@apply text-xl leading-6 mb-0;
}
}
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right
.read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline inline-block;
font-family: "Grold-Regular", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.posts-section
.grid-post
.content-right
.read-more
> span {
@apply hidden;
}
}
.article-wrapper .container .article-content .section-banner {
@apply px-0 py-[55px];
}
.article-wrapper .container .article-content .section-banner .fake-banner {
@apply bg-[#ececec] w-full max-w-[728px] h-[90px] text-[#666] text-[19px] leading-8 mx-auto my-0 rounded-lg;
}
.article-wrapper .container .article-content .section-banner .fake-banner p {
@apply m-0;
}
.article-wrapper .container .article-content .faq-section {
@apply pb-[120px];
}
.article-wrapper .container .article-content .faq-section h2 {
@apply text-black text-[34px] leading-10 text-left mb-8;
font-family: "Grold-Bold", Arial, sans-serif;
}
.article-wrapper .container .article-content .faq-section .accordion {
@apply w-full transition-[height] duration-[0.3s] ease-[ease-in-out] max-w-[700px] mx-auto my-0 pl-0 pr-2.5 py-5 border-t-[#dedede] border-t border-solid last:border-b-[#dedede] last:border-b last:border-solid;
}
.article-wrapper
.container
.article-content
.faq-section
.accordion
.accordion-title {
@apply text-[#666] text-[21px] leading-8 text-left flex justify-between items-center cursor-pointer m-0;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.faq-section
.accordion
.accordion-title
img {
@apply transition-all duration-[0.3s] ease-[ease-in-out];
}
.article-wrapper
.container
.article-content
.faq-section
.accordion
.accordion-body {
@apply text-[#666] text-[17px] leading-8 text-left h-0 transition-[height] duration-[0.3s] ease-[ease-in-out];
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.faq-section
.accordion.active
.accordion-body {
@apply h-full;
}
.article-wrapper
.container
.article-content
.faq-section
.accordion.active
.accordion-title
img {
transform: rotateZ(180deg);
}
.article-wrapper .container .article-content .related-articles h2 {
@apply text-black text-[34px] leading-10 text-left mb-10;
font-family: "Grold-Bold", Arial, sans-serif;
}
.article-wrapper .container .article-content .related-articles .grid-post {
@apply flex gap-10;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(2) {
@apply pt-0 pb-[30px] px-0 border-b-[#dedede] border-b border-solid;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(2)
.img-left {
@apply bg-cover max-w-[204px] w-full rounded-3xl;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(2)
.img-left {
@apply max-w-[115px] w-full max-h-[86px];
}
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(3) {
@apply px-0 py-[30px] border-b-[#dedede] border-b border-solid;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(3)
.img-left {
@apply bg-cover max-w-[204px] w-full rounded-3xl;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(3)
.img-left {
@apply max-w-[115px] w-full;
}
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(4) {
@apply px-0 py-[30px] border-b-[#dedede] border-b border-solid;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(4)
.img-left {
@apply bg-cover max-w-[204px] w-full rounded-3xl;
}
@media screen and (max-width: 768px) {
.article-wrapper
.container
.article-content
.related-articles
.grid-post:nth-child(4)
.img-left {
@apply max-w-[115px] w-full;
}
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post
.img-left {
@apply w-[204px] h-[153px] bg-[gray];
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post
.content-right {
@apply flex justify-start flex-col items-start;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post
.content-right
.category-label {
@apply text-[#00cba8] text-[17px] leading-5 text-left z-[99] mb-2;
font-family: "Grold-Medium", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post
.content-right
.post-title {
@apply text-black text-[26px] leading-[31px] text-left mb-8;
font-family: "Grold-Medium", Arial, sans-serif;
}
.article-wrapper
.container
.article-content
.related-articles
.grid-post
.content-right
.read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline inline-block;
font-family: "Grold-Regular", Arial, sans-serif;
}
.article-wrapper .container .article-content .parent-category {
@apply border h-[374px] mt-[120px] mb-[65px] mx-0 rounded-3xl border-solid border-[#dedede];
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .parent-category {
@apply rounded-2xl;
}
}
.article-wrapper .container .article-content .parent-category .label {
@apply text-black text-[22px] leading-10 mb-2.5;
font-family: "Grold-SemiLight", Arial, sans-serif;
}
.article-wrapper .container .article-content .parent-category .title {
@apply text-black text-[39px] leading-10 w-full max-w-[453px] text-center mb-8;
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.article-wrapper .container .article-content .parent-category .title {
@apply px-2.5 py-0;
}
}
.article-wrapper .container .article-content .parent-category .view-more {
@apply no-underline text-white text-[17px] leading-4 text-center bg-[#00cba8] w-[182px] px-0 py-3 rounded-xl;
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-editors-picks .container {
@apply px-[25px] py-0;
}
}
.section-editors-picks .container .section-editors-picks-wrapper {
@apply pt-0 pb-[120px] px-0;
}
@media screen and (max-width: 1279px) {
.section-editors-picks .container .section-editors-picks-wrapper {
@apply pt-0 pb-20 px-0;
}
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply text-black text-[46px] leading-[55px] text-left mb-10;
font-family: "Grold-Bold", Arial, sans-serif;
}
@media screen and (max-width: 1279px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply mb-[30px];
}
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.section-editors-picks-title {
@apply text-[calc($num_/_($num_*_0_+_1))_*_1rem] leading-[41px] flex justify-between;
}
}
.section-editors-picks .container .section-editors-picks-wrapper .card-wrapper {
@apply grid grid-cols-[1fr_1fr_1fr] grid-rows-[1fr] gap-[80px_37px];
grid-template-areas: ". . .";
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.card-wrapper {
@apply grid-cols-[1fr] gap-[40px_0];
grid-template-areas: ".";
}
}
.section-editors-picks .container .section-editors-picks-wrapper .card {
@apply border-[none];
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.img-wrapper {
@apply h-[341px] w-full bg-cover mb-10 rounded-3xl;
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.img-wrapper {
@apply h-[227px] mb-5;
}
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.category-label {
@apply text-[#00cba8] text-[17px] leading-5 text-left z-[99] mb-4;
font-family: "Grold-Medium", Arial, sans-serif;
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.category-label {
@apply mb-2.5;
}
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.category-label
a {
@apply text-[#00cba8] no-underline;
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-title {
@apply text-black text-[31px] leading-[37px] text-left min-h-[74px] text-ellipsis overflow-hidden mb-10 pr-5;
font-family: "Grold-Medium", Arial, sans-serif;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-title {
@apply text-[26px] leading-[31px] mb-5;
}
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-excerpt {
@apply text-[#666] text-[17px] leading-8 text-left min-h-[128px] text-ellipsis overflow-hidden mb-10;
font-family: "Grold-SemiLight", Arial, sans-serif;
-webkit-line-clamp: 4;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
@media screen and (max-width: 768px) {
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-excerpt {
@apply mb-5;
}
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-read-more {
@apply text-black text-[19px] leading-[23px] text-left no-underline flex w-[90px];
font-family: "Grold-Regular", Arial, sans-serif;
position: initial;
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-read-more
> span {
@apply relative after:content-[''] after:w-[95px] after:h-px after:absolute after:left-0 after:bottom-0;
}
.section-editors-picks
.container
.section-editors-picks-wrapper
.card
.blog-read-more
> span::after {
background: #000;
}
/* Custom styling for the dropdown */
.dropdown {
@apply relative inline-block;
}
.dropdown-toggle {
@apply bg-[#007bff] text-white cursor-pointer px-4 py-2 rounded-xl;
}
.dropdown-menu {
@apply absolute z-[1000] block min-w-[164px] bg-white bg-clip-padding border m-0 px-0 py-2 rounded-xl border-solid border-[rgba(0,0,0,0.15)] left-0 top-11;
list-style: none;
}
.dropdown-toggle:hover + .dropdown-menu {
@apply block;
}
.dropdown-item {
@apply block w-full clear-both font-normal text-[#212529] whitespace-nowrap bg-transparent px-6 py-1 border-0 hover:bg-[#f8f9fa];
text-align: inherit;
}