@import "../partials/slider-navigation.css";



:root {
    /*--title-gradient: linear-gradient(90deg, #adadff 2.12%, #3C199E 45.68%, #0D0D51 91.85%);*/
    --title-gradient:  #3C199E;

    --bg-fade: linear-gradient(
            to left,
            rgba(251, 251, 251, 1) 0%,
            rgba(251, 251, 251, 0) 10%,
            rgba(251, 251, 251, 0) 90%,
            rgba(251, 251, 251, 1) 100%
    );

    --bg-fade-2: linear-gradient(
            to bottom,
            rgba(251, 251, 251, 1) 0%,
            rgba(251, 251, 251, 0) 10%,
            rgba(251, 251, 251, 0) 90%,
            rgba(251, 251, 251, 1) 100%
    );
}

html.starknet-ui-dark {
    /*--title-gradient: linear-gradient(90deg, #C0CFFF 0%, #EAD3F0 50%, #ffffff 90%);*/
    --title-gradient: #adadff;

    --bg-fade: linear-gradient(
            to left,
            rgba(11, 11, 11, 1) 0%,
            rgba(11, 11, 11, 0) 10%,
            rgba(11, 11, 11, 0) 90%,
            rgba(11, 11, 11, 1) 100%
    );

    --bg-fade-2: linear-gradient(
            to bottom,
            rgba(11, 11, 11, 1) 0%,
            rgba(11, 11, 11, 0) 10%,
            rgba(11, 11, 11, 0) 90%,
            rgba(11, 11, 11, 1) 100%
    );
}

body.page.separate-containers .site-main {
    max-width: 2100px;
    padding-top: 0;
}

.page-section {
    margin-bottom: var(--page-gap-large);
}

section .section-container {
    max-width: 1280px;

}

.hp-section-title {
    margin-bottom: var(--page-gap-small);
}

section.page-section.hp-hero-section {
    background: var(--bg-fade), var(--bg-fade-2), var(--surface-hp-hero-section);
    position: relative;
}

.hp-hero-container {
    position: relative;
    overflow: hidden;
    /*background: var(--surface-hp-hero-section);*/
    border-radius: var(--radius-lg);
}

.hp-hero-container.playing {
    width: 900px;
    aspect-ratio: 2;
    margin: 0 auto;
}

.hero-video {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
}

.hp-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closeBtn {
    position: absolute;
    right: 25px;
    top: 20px;
    z-index: 999999;
    cursor: pointer;
}

.closeBtn svg {
    width: 25px;
    height: 25px;
}

.closeBtn svg path {
    fill: #fff;
}

.hp-hero-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    mix-blend-mode: overlay !important;
}

.hp-hero-bg-pattern img {
    position: relative;
    z-index: 0;
    object-fit: cover;
}

.hp-hero-bg-curves {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    mix-blend-mode: color-dodge !important;
}

.hp-hero-bg-curves img {
    object-fit: cover;
}

.hp-hero-content {
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: var(--padding-2-xl);
    padding: 48px 16px;
}

.hp-hero-content .hp-hero-col-left {
    align-self: center;
    order: 1;
    width: 100%;
    max-width: 100%;
}

.hp-hero-content .hp-hero-col-right {
    position: relative;
    right: 0;
    margin-right: 0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
}

.hp-hero-content .hp-hero-col-right img {
    /*height: auto;*/
    width: 100%;
    object-fit: cover;
}

/*.hp-hero-content .hp-hero-col-right svg {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    width: 90px;*/
/*    height: 90px;*/
/*    cursor: pointer;*/
/*}*/

.hp-hero-content .hp-hero-col-right svg {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.hp-hero-content .hp-hero-col-right .closeBtn svg {
    width: 20px;
    height: 20px;
}


body.page.separate-containers h1.hp-hero-title-animation {
    font: 700 56px/1.1 var(--font-Inter);
}

.hp-hero-title {
    font: 700 40px/1.2 var(--font-Inter);
    margin-bottom: var(--padding-lg);
    /*background: var(--title-gradient);*/
    background: linear-gradient(to right, #41a0f1 , #2d51c7);
    /*font-style: italic;*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*max-width: max-content;*/
}

.hp-hero-description {
    margin-bottom: 48px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
}

.hp-hero-buttons {
    flex-direction: column;
    gap: var(--padding-lg);
}

.hp-features-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--padding-2-xl);
}

.hp-feature-card {
    flex-direction: column;
    align-items: center;
    gap: var(--padding-2-xl);
    padding: var(--padding-xl);
    overflow-wrap: break-word;
    overflow: hidden;
    word-wrap: break-word;
    border-radius: var(--radius-lg);
}

.hp-feature-card .hp-feature-img {
    height: 380px;
}

/*.hp-feature-card .hp-feature-img img {*/
/*    display: block;*/
/*    height: auto;*/
/*    max-height: 400px;*/
/*}*/

.hp-feature-card .hp-feature-text h2 {
    margin-bottom: var(--padding-lg);
}

.hp-feature-card .hp-feature-text p {
    margin-bottom: var(--padding-xl);
}

.hp-newsletter-banner {
    border-radius: 24px;
    overflow: hidden;
}

.hp-newsletter-banner-inner {
    flex-direction: column;
    gap: var(--padding-md);
    padding: var(--padding-xl);
    border-radius: var(--radius-lg);

    position: relative;
    background: linear-gradient(180.2deg, rgba(37, 37, 37, 0.6) 0.2%, rgba(0, 0, 0, 0.6) 100%);
    overflow: hidden;
}

.hp-newsletter-banner .hp-newsletter-icon {
    align-self: center;
}

.hp-newsletter-banner .hp-newsletter-icon img {
    display: block;
    width: 60px;
}

.hp-newsletter-text {
    text-align: center;
}

.newsletter-col {
    flex-direction: column;
    z-index: 2;
}

.hp-newsletter-banner .hp-newsletter-title {
    font: 700 32px / 1.4 var(--font-Inter);
    max-width: 260px;
    margin: 12px auto;
}

.lines-bg-pattern {
    background: url('/wp-content/themes/Starknet/assets/img/newsletter-lines.svg') no-repeat left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    mix-blend-mode: overlay;
    z-index: 0;
}

.hp-events-section .events-list .event-tax-list {
    flex-wrap: wrap;
}

.newsletter-form form {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 425px;
    gap: 8px;
    margin: 0;
}

.hp-events-section .hp-section-title {
    margin-bottom: 64px;
    text-align: center;
}

.hp-events-section .events-list {
    margin-bottom: 96px;
}

.hp-events-section .event-block {
    position: relative;
    padding: var(--padding-2-xl) var(--padding-xl);
    border-radius: var(--radius-md);
}

.hp-events-section .event-block:not(:last-child) {
    margin-bottom: var(--padding-md);
}

.hp-events-section .event-block > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hp-events-section .event-block .post-block-inner {
    flex-direction: column;
    gap: var(--padding-xl);
}

.hp-events-section .event-block-img {
    align-self: center;
    overflow: hidden;
    border-radius: var(--radius-xs);
}

.hp-events-section .event-block-img img {
    display: block;
    width: 80px;
    height: 80px;
}

.hp-events-section .event-block .event-taxonomies li {
    margin: var(--padding-base);
    font-weight: 500;
    color: var(--text-badge-general);
    background: var(--surface-badge-general);
    border-radius: var(--radius-round);
    z-index: 0;
}

.hp-events-section .event-block .event-taxonomies li .event-tag {
    position: relative;
    z-index: 1;
    padding: 2px var(--padding-sm);
    color: inherit;
    font-size: 14px;
}

.hp-events-section .event-block-title {
    gap: var(--padding-xs);
    padding: var(--padding-base) 0;
    align-items: center;
}

.hp-events-section .event-block-description p {
    font: inherit;
}

.hp-events-section .event-block-title svg {
    color: var(--text-link);
}

.hp-events-section .event-block-description * {
    font-size: inherit;
}

.hp-events-section .hp-events-btn-wrapper {
    align-items: center;
    gap: var(--padding-xs);
}

.hp-events-section .hp-events-divider {
    width: 50%;
    background: var(--border-divider);
}

.hp-events-section .hp-events-btn {
    flex-shrink: 0;
    height: 50px;
    padding: var(--padding-md) var(--padding-3-xl);
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-button-show-more);
    background: transparent;
    border: 1px solid var(--border-button-show-more);
    border-radius: var(--radius-base);
}

.hp-events-section .hp-events-btn:hover  {
    color: var(--text-button-show-more-hover);
    background: transparent;
    border-color: var(--border-button-show-more-hover);
}

.hp-events-section .hp-events-btn:active,
.hp-events-section .hp-events-btn:focus {
    color: var(--text-button-show-more-focused);
    background: var(--surface-button-show-more-focused);
    border-color: var(--border-button-show-more-focused);
}

.hp-faq-section .faqs-list {
    display: grid;
    gap: var(--padding-2-xl);
}

.hp-faq-section .hp-faq-card {
    position: relative;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.hp-faq-section .hp-faq-card-inner {
    padding: var(--padding-5-xl) var(--padding-2-xl) 48px var(--padding-2-xl);
}

.hp-faq-section .hp-faq-card h3 {
    margin-bottom: var(--padding-md);
}

.hp-faq-section .hp-faq-card a {
    color: var(--text-link);
}

.hp-faq-section .hp-faq-card a:hover {
    text-decoration: underline;
}

.hp-faq-section .hp-faq-card a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


.newsletter-form form input[type="submit"] {
    width: 100%;
}


.hp-newsletter-btn {
    margin-top: 12px;
    font: 600 16px / 1.5 var(--font-Inter);
}

@media (min-width: 768px) {
    /*.hp-hero-content {*/
    /*    padding-right: 48px;*/
    /*    padding-left: 48px;*/
    /*}*/

    .hp-hero-content .hp-hero-col-left {
        align-self: flex-start;
        max-width: 480px;
    }

    /*.hp-hero-content .hp-hero-col-right {*/
    /*    right: -48px;*/
    /*    margin-right: -10px;*/
    /*}*/

    body.page.separate-containers h1.hp-hero-title-animation {
        font: 700 48px / 1.1 var(--font-Inter);
    }

    .hp-hero-title {
        font-size: 35px;
        letter-spacing: -0.2px;
    }

    .hp-hero-buttons {
        flex-direction: row;
    }

    .hp-hero-buttons .build-btn {
        min-width: 210px;
    }

    .hp-features-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-feature-card {
        padding: 48px;
    }

    .hp-feature-card:first-child,
    .hp-feature-card:last-child {
        grid-column-start: 1;
        grid-column-end: 3;
        justify-content: center;
        flex-direction: row;
        gap: var(--padding-4-xl);
        padding: var(--padding-3-xl);
        border-radius: var(--radius-lg);
    }

    .hp-feature-card:first-child .hp-feature-text,
    .hp-feature-card:last-child .hp-feature-text {
        max-width: 460px;
    }

    .hp-feature-card:not(:first-child):not(:last-child) .hp-feature-text {
        padding: 0 var(--padding-2-xl) var(--padding-3-xl);
        max-width: 524px;
    }

    .hp-newsletter-banner-inner {
        align-items: center;
        height: 305px;
        justify-content: center;
    }

    .newsletter-form form {
        flex-direction: row;
        margin: 20px auto 0;
    }

    .hp-newsletter-text {
        text-align: left;
    }

    .newsletter-col {
        flex-direction: row;
    }

    .hp-newsletter-banner .hp-newsletter-title {
        max-width: unset;
    }

    .hp-newsletter-banner .hp-newsletter-text {
        margin-left: 30px;
    }

    .hp-newsletter-banner .hp-newsletter-title {
        font: 600 40px / 1.25 var(--font-Inter);
    }

    .hp-newsletter-banner .hp-newsletter-subtitle {
        line-height: 1.5;
    }

    .hp-events-section .event-block .post-block-inner {
        flex-direction: row;
    }

    .hp-events-section .event-block-img {
        flex-shrink: 0;
    }

    .hp-faq-section .faqs-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    /*.separate-containers .site-main {*/
    /*    padding-top: 48px;*/
    /*}*/

    section.page-section.hp-hero-section .section-container {
        padding: 16px var(--padding-2-xl);
    }

    .hp-hero-content {
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;
        align-content: flex-end;
        /*padding-right: var(--padding-3-xl);*/
        /*padding-left: var(--padding-3-xl);*/
    }

    .hp-hero-content .hp-hero-col-left {
        position: relative;
        flex: 1 1 0;
        align-self: center;
        order: unset;
        max-width: 530px;
    }

    .hp-hero-content .hp-hero-col-right {
        right: auto;
        flex-shrink: 0;
        width: 560px;
        margin-right: 0;
    }

    .hp-hero-content .hp-hero-col-right svg {
        width: 80px;
        height: 80px;
    }

    /*body.page.separate-containers h1.hp-hero-title-animation {*/
    /*    font: 700 70px/1 var(--font-Inter);*/
    /*}*/

    .hp-feature-card:first-child,
    .hp-feature-card:last-child {
        align-items: center;
    }

    .newsletter-form form {
        margin: 30px auto 0;
    }

    .hp-newsletter-banner {
        gap: 44px;
    }

    .hp-newsletter-banner-inner {
        flex-direction: row;
        gap: var(--padding-3-xl);
        padding: var(--padding-md) 80px;

        align-items: center;
        height: 248px;
        justify-content: space-between;
    }

    .hp-events-section .section-container {
        max-width: 1062px;
    }

    .hp-faq-section .faqs-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    body.page.separate-containers h1.hp-hero-title-animation {
        font-size: 56px;
    }

    section.page-section.hp-hero-section .section-container {
        padding: 24px var(--padding-2-xl);
    }

    .hp-hero-title {
        font-size: 41px;
    }
}

/***** News and Updates *****/

.hp-news-slider {
    box-shadow: 0 0 15px -3px #00000033;
    border-radius: var(--radius-xs);
    max-width: 1120px;
    margin: 0 auto;
    overflow: auto;
}

.news-slide {
    background: var(--surface-card);
}

.news-slide-text-box {
    padding: var(--padding-2-xl) var(--padding-md);
    min-height: 320px;
}

.news-slide-text-box h3 {
    font: 600 20px/1.4 var(--font-Inter);
    color: var(--text-primary);

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news-slide-text-box .body-small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: var(--padding-md) 0 var(--padding-xl);
}

.news-slide-text-box p {
    font: 400 16px/1.5 var(--font-Inter);
    color: var(--text-secondary);
}

.news-slide-text-box p a {
    font: 400 16px/1.5 var(--font-Inter);
    color: var(--text-secondary);
    text-decoration: underline;
}

.news-slide-text-box .btn {
    margin-top: auto;
    max-width: max-content;
}

.news-slide-image.d-flex {
    position: relative;
    border-radius: var(--radius-xs);
    overflow: auto;
}

.news-slide-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 250px;
    max-height: 250px;
}

.news-slide-image .credits {
    font: 400 8px/1.2 var(--font-Inter);
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: var(--colors-white);
}


@media (min-width: 768px) {
    .news-slide-text-box {
        padding: var(--padding-2-xl);
    }

    .news-slide-image img {
        object-position: top;
        height: 350px;
        max-height: 350px;
    }

    .news-slide-text-box h3 {
        font: 600 26px/1.4 var(--font-Inter);

        /*-webkit-line-clamp: 2;*/
        /*line-clamp: 2;*/
    }
}

@media (min-width: 991px) {

    .news-slide {
        display: grid;
        grid-template-columns: 48% 52%;
    }

    .news-slide-image img {
        object-position: center;
        object-fit: cover;
        height: 405px;
        /*height: 380px;*/
        /*max-height: 380px;*/
        max-height: 405px;
    }

    .news-slide-text-box {
        padding: 62px;
        height: 405px !important;
        max-height: 405px !important;
    }

    .hp-news-slider .slick-slide {
        height: 405px !important;
        max-height: 405px !important;
    }
}