/* ==========================================================
   ECKSELLENT CUSTOMS
   ENGINEERING BACKGROUND MODULE

   Version : 2.0.0
   Updated : 2026-08-05

   Purpose:
   Uses the custom EXC engineering drawing as one continuous
   site-wide background across all public pages.
   ========================================================== */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {
    --exc-eng-bg: #050505;

    --exc-eng-image:
    url("../../images/exc-engineered-background.png");

    --exc-eng-image-opacity:
        .4;
}


/* ==========================================================
   SITE CANVAS
   ========================================================== */

html,
body {
    background-color:
        var(--exc-eng-bg);
}

body {
    position: relative;
    min-height: 100vh;
}


/* ==========================================================
   ONE CONTINUOUS ENGINEERING DRAWING
   ========================================================== */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        var(--exc-eng-image);

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    opacity:
        var(--exc-eng-image-opacity);
}


/* ==========================================================
   CONTENT STACKING
   ========================================================== */

header,
main,
footer,
.exc-site-main,
.exc-page,
.exc-about,
.exc-work,
.woocommerce,
.woocommerce-page {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   ROOT TRANSPARENCY
   ========================================================== */

.exc-site-main,
.exc-page,
.exc-about,
.exc-work,
.woocommerce-page main {
    background-color:
        transparent !important;
}


/* ==========================================================
   HOME
   ========================================================== */

.exc-hero {
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(0, 255, 26, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(255, 29, 132, 0.07),
            transparent 32%
        ),
        rgba(8, 8, 8, 0.18) !important;
}

.exc-section,
.exc-section-dark,
.exc-shop-section,
.exc-weird {
    background:
        rgba(8, 8, 8, 0.18) !important;
}


/* ==========================================================
   SHOP
   ========================================================== */

.exc-shop-hero {
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255, 29, 132, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0, 255, 26, 0.065),
            transparent 32%
        ),
        rgba(8, 8, 8, 0.18) !important;
}

.exc-shop-catalog {
    background:
        rgba(9, 9, 9, 0.18) !important;
}


/* ==========================================================
   CUSTOM ORDERS
   ========================================================== */

.exc-custom-hero {
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255, 29, 132, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0, 255, 26, 0.06),
            transparent 32%
        ),
        rgba(8, 8, 8, 0.18) !important;
}

.exc-custom-process,
.exc-custom-form-section,
.exc-custom-expectations {
    background:
        rgba(8, 8, 8, 0.18) !important;
}


/* ==========================================================
   ABOUT + OUR WORK
   ========================================================== */

.exc-about-hero,
.exc-work-hero {
    background:
        rgba(5, 5, 5, 0.18) !important;
}

.exc-about-section,
.exc-about-welcome,
.exc-about-closing,
.exc-work-gallery,
.exc-work-closing {
    background:
        rgba(5, 5, 5, 0.18) !important;
}


/* ==========================================================
   STANDARD PAGES + WOOCOMMERCE
   ========================================================== */

.exc-page,
.woocommerce-page main,
.woocommerce-account main,
.woocommerce-checkout main {
    background:
        rgba(5, 5, 5, 0.18) !important;
}


/* ==========================================================
   PANELS AND CARDS
   ========================================================== */

.exc-card,
.exc-work-card,
.exc-custom-step,
.exc-custom-form-panel,
.exc-custom-expectation-panel,
.exc-shop-custom-panel,
.woocommerce ul.products li.product,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color:
        rgba(12, 12, 12, 0.18) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 820px) {

    :root {
        --exc-eng-image-opacity:
            0.62;
    }

    body::before {
        background-position:
            60% center;

        background-size:
            auto 100vh;
    }

    .exc-hero,
    .exc-shop-hero,
    .exc-custom-hero,
    .exc-about-hero,
    .exc-work-hero {
        background-color:
            rgba(5, 5, 5, 0.18) !important;
    }

    .exc-section,
    .exc-shop-catalog,
    .exc-custom-process,
    .exc-custom-form-section,
    .exc-custom-expectations,
    .exc-about-section,
    .exc-work-gallery,
    .exc-page {
        background-color:
            rgba(5, 5, 5, 0.18) !important;
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 520px) {

    :root {
        --exc-eng-image-opacity:
            0.54;
    }

    body::before {
        background-position:
            64% center;
    }
}