/*
Theme Name: XIOSK Shop
Theme URI: https://xiosk.ch
Author: XIOSK
Description: Custom WordPress & WooCommerce Theme for XIOSK.
Version: 1.0
Text Domain: xioskshop
*/


:root {

    --xiosk-background: #0c0f0e;

    --xiosk-surface: #111413;

    --xiosk-surface-light: #1d201f;

    --xiosk-green: #2ce58b;

    --xiosk-green-light: #77ffad;

    --xiosk-cream: #f5f3eb;

    --xiosk-text: #e1e3e1;

    --xiosk-text-muted: #bacbbc;

    --xiosk-wood-light: #d6b383;

    --xiosk-wood-middle: #b98654;

    --xiosk-wood-dark: #7b4d2e;

}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background:

        radial-gradient(
            circle at 20% 0%,
            rgba(44, 229, 139, 0.08),
            transparent 35%
        ),

        var(--xiosk-background);

    color: var(--xiosk-text);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

}


a {

    color: inherit;

    text-decoration: none;

}


.xiosk-container {

    width: calc(100% - 48px);

    max-width: 1360px;

    margin: 0 auto;

}


/* HEADER */

.xiosk-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(12, 15, 14, 0.88);

    backdrop-filter:
        blur(22px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

}


.xiosk-topbar {

    padding: 7px 0;

    background:
        rgba(25, 28, 27, 0.8);

    font-family:
        "Space Grotesk";

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--xiosk-text-muted);

}


.xiosk-status-dot {

    width: 7px;

    height: 7px;

    display: inline-block;

    margin-right: 8px;

    border-radius: 50%;

    background:
        var(--xiosk-green);

    box-shadow:
        0 0 12px
        rgba(44, 229, 139, 0.8);

}


.xiosk-navigation {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.xiosk-brand {

    display: flex;

    flex-direction: column;

}


.xiosk-brand-name {

    font-family:
        "Space Grotesk";

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -0.03em;

}


.xiosk-brand-location {

    font-size: 9px;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--xiosk-text-muted);

}


.xiosk-menu ul {

    display: flex;

    list-style: none;

    padding: 0;

    margin: 0;

    gap: 24px;

}


.xiosk-menu a {

    font-family:
        "Space Grotesk";

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color:
        var(--xiosk-text-muted);

    transition:
        0.25s ease;

}


.xiosk-menu a:hover {

    color:
        var(--xiosk-green);

}


/* HERO */

.xiosk-hero {

    padding:
        110px 0
        90px;

}


.xiosk-hero-grid {

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 60px;

    align-items: center;

}


.xiosk-eyebrow {

    color:
        var(--xiosk-green);

    font-family:
        "Space Grotesk";

    font-size: 11px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 25px;

}


.xiosk-hero h1 {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(48px, 6vw, 78px);

    line-height: 0.98;

    letter-spacing: -0.04em;

    margin:
        0 0 30px;

}


.xiosk-hero h1 span {

    display: block;

    color:
        var(--xiosk-green);

}


.xiosk-hero p {

    max-width: 650px;

    font-size: 18px;

    line-height: 1.7;

    color:
        var(--xiosk-text-muted);

}


.xiosk-hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 35px;

}


.xiosk-button-primary,
.xiosk-button-secondary {

    display: inline-flex;

    padding:
        15px 25px;

    border-radius:
        7px;

    font-family:
        "Space Grotesk";

    font-size:
        12px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        0.25s ease;

}


.xiosk-button-primary {

    background:
        var(--xiosk-green);

    color:
        #062015;

    box-shadow:
        0 0 25px
        rgba(44, 229, 139, 0.22);

}


.xiosk-button-primary:hover {

    box-shadow:
        0 0 35px
        rgba(44, 229, 139, 0.48);

    transform:
        translateY(-2px);

}


.xiosk-button-secondary {

    background:
        #1d201f;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

}


/* HERO MATERIAL CARD */

.xiosk-hero-card {

    min-height:
        430px;

    border-radius:
        16px;

    padding:
        1px;

    background:
        linear-gradient(
            135deg,
            rgba(44,229,139,.5),
            rgba(214,179,131,.25),
            transparent
        );

}


.xiosk-hero-card-inner {

    height:
        100%;

    min-height:
        428px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        38px;

    border-radius:
        15px;

    background:

        radial-gradient(
            circle at 70% 20%,
            rgba(44,229,139,.14),
            transparent 35%
        ),

        linear-gradient(
            140deg,
            rgba(13,16,15,.7),
            rgba(13,16,15,.92)
        );

    position:
        relative;

    overflow:
        hidden;

}


/* HOLZ REVEAL */

.xiosk-hero-card-inner::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        repeating-linear-gradient(
            7deg,
            transparent 0 12px,
            rgba(80,45,22,.13)
            12px 14px
        ),

        linear-gradient(
            110deg,
            var(--xiosk-wood-light),
            var(--xiosk-wood-middle),
            var(--xiosk-wood-light)
        );

    opacity:
        0;

    transform:
        scale(1.05);

    transition:
        opacity .55s ease,
        transform .7s ease;

}


.xiosk-hero-card:hover
.xiosk-hero-card-inner::before {

    opacity:
        .32;

    transform:
        scale(1);

}


.xiosk-hero-card-inner span,
.xiosk-hero-card-inner strong,
.xiosk-hero-card-inner small {

    position:
        relative;

    z-index:
        2;

}


.xiosk-hero-card-inner strong {

    font-family:
        "Space Grotesk";

    font-size:
        34px;

}


/* SECTION */

.xiosk-section {

    padding:
        80px 0;

}


.xiosk-sourcing {

    max-width:
        850px;

    padding:
        45px;

    background:
        #191c1b;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        14px;

}


.xiosk-small-label {

    color:
        var(--xiosk-green);

    font-family:
        "Space Grotesk";

    font-size:
        10px;

    letter-spacing:
        .15em;

}


.xiosk-sourcing h2 {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

}


/* FOOTER */

.xiosk-footer {

    margin-top:
        80px;

    padding:
        70px 0 30px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        #0a0d0c;

}


.xiosk-footer-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:
        50px;

}


.xiosk-footer-logo {

    font-family:
        "Space Grotesk";

    font-size:
        25px;

    font-weight:
        700;

}


.xiosk-footer-bottom {

    margin-top:
        60px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.05);

    color:
        var(--xiosk-text-muted);

    font-size:
        11px;

}


/* MOBILE */

@media
(max-width: 800px) {

    .xiosk-container {

        width:
            calc(100% - 28px);

    }

    .xiosk-menu {

        display:
            none;

    }

    .xiosk-hero {

        padding-top:
            65px;

    }

    .xiosk-hero-grid {

        grid-template-columns:
            1fr;

    }

    .xiosk-footer-grid {

        grid-template-columns:
            1fr;

    }

}

.xiosk-footer {
    margin-top: 100px;
    background: #090c0b;
    border-top: 1px solid rgba(255,255,255,.06);
}

.xiosk-footer-material {
    height: 8px;

    background:
        linear-gradient(
            90deg,
            #d9b98b,
            #a9784e,
            #d8b584,
            #7a5033,
            #c99b68
        );

    opacity: .85;
}

.xiosk-footer-brand {
    padding: 75px 0 55px;

    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 70px;
    align-items: end;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.xiosk-footer-logo {
    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(65px, 10vw, 145px);

    font-weight: 700;
    letter-spacing: -.07em;
    line-height: .8;
}

.xiosk-footer-eyebrow {
    display: block;

    margin-bottom: 24px;

    color: #77ffad;

    font-family: "Space Grotesk";
    font-size: 10px;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.xiosk-footer-brand p {
    max-width: 520px;

    margin: 0;

    color: #bacbbc;

    font-size: 17px;
    line-height: 1.7;
}

.xiosk-footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;

    gap: 70px;

    padding: 55px 0;
}

.xiosk-footer-content h4 {
    font-family: "Space Grotesk";
    font-size: 11px;

    letter-spacing: .14em;
    text-transform: uppercase;

    color: #77ffad;

    margin-bottom: 22px;
}

.xiosk-footer-content a {
    display: block;

    margin: 9px 0;

    color: #bacbbc;

    transition: .25s ease;
}

.xiosk-footer-content a:hover {
    color: #f5f3eb;

    transform: translateX(4px);
}

.xiosk-footer-bottom {
    padding: 22px 0 30px;

    display: flex;
    justify-content: space-between;
    gap: 30px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color: #859587;

    font-size: 11px;
}

.xiosk-footer-bottom div {
    display: flex;
    gap: 25px;
}

@media (max-width: 800px) {

    .xiosk-footer-brand,
    .xiosk-footer-content {
        grid-template-columns: 1fr;
    }

    .xiosk-footer-bottom {
        flex-direction: column;
    }

}