/*
Theme Name: Wux Theme
Author: Wux
Author URI: https://wux.nl/
Description: Wux is het custom wordpress thema van Wux - Digital Agency
Version: 2.0
Requires PHP: 8.3.0
Text Domain: wuxnl-theme
*/

:root {
    /* Font variables */
    --fs            : 1.6rem;
    --lh            : 1.3;
    --fs-h1         : clamp(3.2rem, 4vw, 6.7rem);
    --fs-h2         : clamp(2.8rem, 4vw, 6.4rem);
    --fs-h3         : clamp(2rem, 3vw, 2.4rem);
        
    /* Color variables */
    --clr-primary-120   : #C20157;
    --clr-primary       : #E5005B;
    --clr-primary-rgb   : 229, 0, 91;

    --clr-secondary-140 : #271F32;
    --clr-secondary-125 : #2E1028;
    --clr-secondary-120 : #2A2136;
    --clr-secondary     : #372D46;
    --clr-secondary-rgb : 55, 45, 70;
    --clr-secondary-80  : #360749;
    --clr-secondary-60  : #725D91;
    --clr-secondary-10  : #EBE4F4;

    --clr-heading       : #fff;
    --clr-text          : #fff;

    --clr-dark          : #18131E;
    --clr-dark-rgb      : 24, 19, 30;
    --clr-dark-60       : #18131E99;

    --clr-light         : #DDC8FF;

    --clr-border        : #2D2438; 

    --clr-danger        : var(--clr-primary);
    --clr-info          : #3d9cd2;
    --clr-success       : #1CB435;

    /* Font variables */
    --font-primary      : "HPsimplified", sans-serif;
    --font-secondary    : "NexaRustSans", sans-serif;

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 540px;
    --container-width--md   : 720px;
    --container-width--lg   : 960px;
    --container-width--xl   : 1140px;
    --container-width--xxl  : 1320px;
    --container-width--xxxl : 1435px;

    /* Trransition variables */
    --ts-duration            : var(--ts-25);
    --ts-function            : ease;

    --nav-height             : 9.8rem;
}

@media (min-width: 768px) {
    :root {
        --fs: 1.6rem;
    }
}

@media (min-width: 992px) {
    :root {
        --fs: 1.8rem;
        --nav-height        : 14rem;
    }
}

body { background-color: var(--clr-dark); }

/* .wpb-main-content { opacity: 0; pointer-events: none; }   */

.wpb-pagewrapper { position: relative; 
    .wpb-pagewrapper__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; z-index: -1;
    
        .radial-gradient { --w: 93.4rem; z-index: 2; top: 60rem; transform: rotate(35deg) translateX(-50%); width: var(--w); height: calc(var(--w) * 1.2); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #1F0044 0%, rgba(31, 0, 68, 0) 100%); opacity: .5; 
            &.radial-gradient--secondary { background: radial-gradient(50% 50% at 50% 50%, rgba(229, 0, 91, 0.5) 0%, rgba(229, 0, 91, 0) 100%); }
            &.radial-gradient--tertiary { background: radial-gradient(50% 50% at 50% 50%, #1F0044 0%, rgba(31, 0, 68, 0) 100%); }

            &.radial-gradient--2 { top: 220rem; right: 0; transform: rotate(35deg) translateX(50%); }
            &.radial-gradient--3 { top: 320rem; right: 0; transform: rotate(35deg) translateX(50%); }
            &.radial-gradient--4 { top: 370rem; right: 0; transform: rotate(35deg) translateX(50%); }
        }

        > .radial-gradient { position: absolute; }

        > .radial-gradient-group { position: absolute; right: 0; width: 150rem; height: 160rem; opacity: .5;
            .radial-gradient--secondary { --w: 77rem; position: absolute; top: 60rem; right: 0; transform: rotate(-23deg) translateX(40%); }
            .radial-gradient--tertiary { position: absolute; top: 15%; right: 0; transform: rotate(35deg) translateX(40%); }

            &.radial-gradient-group--1 {  }
            &.radial-gradient-group--2 { top: 220rem; }
            &.radial-gradient-group--3 { top: 370rem; }
        }
    }
    
    .circle-outline { --w: 33.8rem; z-index: 1; position: absolute; top: 150rem; left: -2rem; width: var(--w); height: var(--w); border: .3rem solid var(--clr-primary); border-radius: 50%; box-shadow: 0 .4rem 1.2rem 0 var(--clr-primary); }
} 

/*** ---------- Whitespace ---------- ***/
[class*="wpb-wst"] { --pt: 0px; padding-top: var(--pt); }
[class*="wpb-wsb"] { --pb: 0px; padding-bottom: var(--pb); }

*:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 4.8rem; --p-y-medium: 4.8rem; --p-y-large: 7.4rem;
    /* -- Top -- */
    &.wpb-wst--small { --pt: var(--p-y-small); }
    &.wpb-wst--medium { --pt: var(--p-y-medium); }
    &.wpb-wst--large { --pt: var(--p-y-large); }

    /* -- Bottom -- */
    &.wpb-wsb--small { --pb: var(--p-y-small); }
    &.wpb-wsb--medium { --pb: var(--p-y-medium); }
    &.wpb-wsb--large { --pb: var(--p-y-large); }
}

@media (min-width: 992px) {
    *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 6.4rem; --p-y-medium: 9rem; --p-y-large: 10rem; }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background: var(--block-bg); 
    &.wpb-bg-clr--transparent { --block-bg: transparent; }
    &.wpb-bg-clr--secondary { --block-bg: var(--clr-secondary); }
    &.wpb-bg-clr--gradient { --block-bg: linear-gradient(200deg, transparent 66.98%, rgba(var(--clr-secondary-rgb), 0.2) 78.73%); }
}

.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none;
    span { font-size: 1.6rem; line-height: 1; }
    img { width: 4.4rem; height: 1.3rem; }
}