/*
Theme Name: GelSight Theme
Theme URI: https://www.gelsight.com
Description: Custom child theme for GelSight - high-resolution tactile sensing & 3-D surface analysis.
Author: SiteIgniters
Author URI: https://siteigniters.com
Template: hello-elementor
Version: 1.0.0
Text Domain: gelsight-theme
*/

/*
 * Brand Colors
 * --------------------------------------------------
 * Light Blue:  #6590B3
 * Med Blue:    #236192
 * Dark Blue:   #0E325B
 * Green:       #00B176
 * Orange:      #FF8F1C
 * Brand Black: #222222
 * BG Black:    #000000
 *
 * Font: Plus Jakarta Sans (headlines + body)
 */


/* ==========================================================================
   1. GLOBAL / BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

::selection {
    background: #FF8F1C;
    color: #FFF;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #FF8F1C; }

hr { border-color: #333; }

img {
    max-width: 100%;
    height: auto;
}

a,
.elementor-button {
    transition: all 0.3s ease;
}

body.elementor-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   2. HEADER
   ========================================================================== */

.elementor-location-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Demo button — tab shape (flat top, rounded bottom) */
li.gs-demo-btn > a.elementor-item,
.gs-demo-btn > a {
    background-color: #FF8F1C !important;
    color: #FFFFFF !important;
    padding: 2px 12px 5px 12px !important;
    border-radius: 0 0 4px 4px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

li.gs-demo-btn > a.elementor-item:hover,
.gs-demo-btn > a:hover {
    background-color: #FFAA4D !important;
}

/* Dropdown menus */
.elementor-nav-menu--dropdown {
    background-color: #111111 !important;
    border: 1px solid #333 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.elementor-nav-menu--dropdown li a {
    border-bottom: 1px solid #222 !important;
}

.elementor-nav-menu--dropdown li:last-child a {
    border-bottom: none !important;
}

/* Dropdown section headers */
.menu-section-header > a {
    color: #FF8F1C !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    pointer-events: none;
    padding-top: 12px !important;
}

/* Sticky header */
.elementor-sticky--effects {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.97) 0%, rgba(0, 0, 0, 0.97) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}



/* ==========================================================================
   2b. HEADER RESPONSIVE
   ========================================================================== */

/* Desktop: show desktop nav, hide mobile nav */
.gs-mobile-nav {
    display: none !important;
}

/* Tablet + Mobile: hide desktop nav, show mobile hamburger */
@media (max-width: 1024px) {
    .gs-desktop-nav {
        display: none !important;
    }

    .gs-mobile-nav {
        display: flex !important;
    }

    /* Demo button: square on mobile */
    li.gs-demo-btn > a.elementor-item,
    .gs-demo-btn > a {
        border-radius: 0 !important;
    }

    /* Mobile dropdown panel */
    .elementor-nav-menu--dropdown {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ==========================================================================
   3. FOOTER
   ========================================================================== */

/* 3a. Footer heading items (light blue) */
.elementor-location-footer .gs-ft-heading > a.elementor-item,
.elementor-location-footer li.gs-ft-heading > a {
    color: #6590B3 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* 3b. Footer subheading items (light blue) */
.elementor-location-footer .gs-ft-subheading > a.elementor-item,
.elementor-location-footer li.gs-ft-subheading > a {
    color: #6590B3 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    pointer-events: none;
}

/* 3c. Indentation */
.elementor-location-footer .gs-ft-indent1 > a.elementor-item,
.elementor-location-footer li.gs-ft-indent1 > a {
    padding-left: 10px !important;
}

.elementor-location-footer .gs-ft-indent2 > a.elementor-item,
.elementor-location-footer li.gs-ft-indent2 > a {
    padding-left: 20px !important;
}

/* 3d. Gap above Privacy Policy */
.elementor-location-footer .gs-ft-gap-above {
    margin-top: 20px !important;
}

/* 3e. Footer links — white, hover to gray */
.elementor-location-footer .elementor-nav-menu a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.elementor-location-footer .elementor-nav-menu a:hover {
    color: #999999 !important;
}

.elementor-location-footer .gs-ft-heading > a:hover {
    color: #236192 !important;
}

/* 3f. Pre-footer CTA bar */
.elementor-location-footer .elementor-heading-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.elementor-location-footer .elementor-heading-title a:hover {
    color: #FF8F1C !important;
}

/* 3g. Social icons */
.elementor-location-footer .elementor-social-icon {
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.elementor-location-footer .elementor-social-icon i {
    color: #FFFFFF !important;
    font-size: 18px !important;
}

.elementor-location-footer .elementor-social-icon:hover i {
    color: #FF8F1C !important;
}

/* ==========================================================================
   4. HOME PAGE — HERO
   ========================================================================== */

/* 4a. Hero button arrow rotation */
.elementor-button-icon i.fa-arrow-right {
    transform: rotate(-45deg);
}

/* 4b. Hero magnify reveal effect — add class `gs-hero-reveal` to the hero container.
   Layered approach: ::before is the always-visible top layer (dark moon),
   ::after is the reveal layer (bright moon) clipped to a circle around the cursor. */
.gs-hero-reveal {
    position: relative;
    overflow: hidden;
}

.gs-hero-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/wp-content/uploads/2026/05/Moon-surface2.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.gs-hero-reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/wp-content/uploads/2026/05/Moon-surface2-zoom.webp);
    background-size: 200%;
    background-position: var(--reveal-x, 50%) var(--reveal-y, 50%);
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    clip-path: circle(0px at var(--mx, -999px) var(--my, -999px));
    transition: clip-path 0.1s ease;
}

.gs-hero-reveal.is-revealing::after {
    clip-path: circle(140px at var(--mx, 50%) var(--my, 50%));
}

/* Keep content above both layers */
.gs-hero-reveal > .e-con-inner {
    position: relative;
    z-index: 2;
}


/* 4c. Intro section — blend product image into dark bg */
.elementor-element-cf3b5fa img {
    mix-blend-mode: lighten;
}