/* * Ultimate Glass Etching — Header v4 * File: uge-header-v4.css * * Paste into Elementor → Site Settings → Custom CSS * — OR — * Enqueue via child theme functions.php * * Design tokens * Charcoal #1C1C1A * Bone White #FAF8F4 * Body Gray #8C8A84 * Gold #A98E5A * Hairline #E4E0D8 * Fonts DM Sans (body/nav) | Playfair Display (headings) * Radius 0px everywhere */ /* ══════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES ══════════════════════════════════════════════════════════ */ .uge-header { --uge-charcoal: #1C1C1A; --uge-bone: #FAF8F4; --uge-gray: #8C8A84; --uge-gold: #A98E5A; --uge-hairline: #E4E0D8; transition: background-color 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; will-change: background-color; z-index: 9990; position: relative; } /* ══════════════════════════════════════════════════════════ 2. SINGLE-ROW ENFORCEMENT Elementor can insert extra padding / flex wrappers. These rules ensure nothing ever wraps. ══════════════════════════════════════════════════════════ */ .uge-header, .uge-header > .elementor-container, .uge-header > .e-con, .uge-header .e-con, .uge-header .elementor-container { flex-wrap: nowrap !important; } /* Inner row: fixed 82px, single line */ .uge-header .e-con-inner, .uge-header .elementor-row { flex-wrap: nowrap !important; align-items: center !important; min-height: 82px; } /* Compact height when scrolled */ .uge-header.uge-scrolled .e-con-inner, .uge-header.uge-scrolled .elementor-row { min-height: 64px !important; transition: min-height 0.22s ease; } /* Logo: fixed width, never shrink */ .uge-header .elementor-widget-theme-site-logo { flex: 0 0 auto !important; width: 150px !important; min-width: 150px !important; } .uge-header .elementor-widget-theme-site-logo img { width: 150px !important; max-width: 150px !important; height: auto; display: block; transition: width 0.22s ease, max-width 0.22s ease; } .uge-header.uge-scrolled .elementor-widget-theme-site-logo img { width: 130px !important; max-width: 130px !important; } /* Nav: fill remaining space, never shrink, never wrap */ .uge-header .elementor-widget-nav-menu { flex: 1 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .uge-header .elementor-nav-menu--main { display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } .uge-header .elementor-nav-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; list-style: none; margin: 0; padding: 0; } .uge-header .elementor-nav-menu > li { flex-shrink: 0 !important; } .uge-header .elementor-nav-menu > li > a { white-space: nowrap !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 8px !important; display: block; line-height: 82px; /* vertically center in 82px row */ text-decoration: none; color: var(--uge-charcoal) !important; transition: color 0.18s ease; } .uge-header.uge-scrolled .elementor-nav-menu > li > a { line-height: 64px; } .uge-header .elementor-nav-menu > li > a:hover, .uge-header .elementor-nav-menu > li.current-menu-item > a { color: var(--uge-gold) !important; } /* Actions container: fixed right, never shrink/grow */ .uge-header .elementor-widget-nav-menu + .e-con { flex: 0 0 auto !important; flex-wrap: nowrap !important; display: flex !important; align-items: center !important; } /* ══════════════════════════════════════════════════════════ 3. BACKGROUND STATES ══════════════════════════════════════════════════════════ */ /* Transparent (homepage hero) */ .uge-header { background-color: rgba(0, 0, 0, 0) !important; border-bottom-color: rgba(255, 255, 255, 0.15) !important; } /* Non-homepage: always solid */ body.uge-not-home .uge-header { background-color: #FFFFFF !important; border-bottom-color: var(--uge-hairline) !important; } /* Scrolled: solid */ .uge-header.uge-scrolled { background-color: #FFFFFF !important; border-bottom-color: var(--uge-hairline) !important; box-shadow: 0 2px 16px rgba(28, 28, 26, 0.07) !important; } /* ══════════════════════════════════════════════════════════ 4. ICON + TEXT COLOUR BY STATE ══════════════════════════════════════════════════════════ */ /* Transparent state — white */ .uge-header:not(.uge-scrolled) .elementor-nav-menu > li > a, .uge-header:not(.uge-scrolled) .elementor-widget-search-button .elementor-search-button__toggle, .uge-header:not(.uge-scrolled) .elementor-menu-cart__toggle .elementor-button, .uge-header:not(.uge-scrolled) .elementor-menu-toggle i, .uge-header:not(.uge-scrolled) .elementor-menu-toggle svg { color: #FFFFFF !important; fill: #FFFFFF !important; } /* Solid state (scrolled or non-home) — charcoal */ .uge-header.uge-scrolled .elementor-nav-menu > li > a, body.uge-not-home .uge-header .elementor-nav-menu > li > a, .uge-header.uge-scrolled .elementor-widget-search-button .elementor-search-button__toggle, body.uge-not-home .uge-header .elementor-widget-search-button .elementor-search-button__toggle, .uge-header.uge-scrolled .elementor-menu-cart__toggle .elementor-button, body.uge-not-home .uge-header .elementor-menu-cart__toggle .elementor-button, .uge-header.uge-scrolled .elementor-menu-toggle i, body.uge-not-home .uge-header .elementor-menu-toggle i, .uge-header.uge-scrolled .elementor-menu-toggle svg, body.uge-not-home .uge-header .elementor-menu-toggle svg { color: var(--uge-charcoal) !important; fill: var(--uge-charcoal) !important; } /* Hover always gold */ .uge-header .elementor-widget-search-button .elementor-search-button__toggle:hover, .uge-header .elementor-menu-cart__toggle .elementor-button:hover, .uge-header .elementor-menu-toggle:hover i { color: var(--uge-gold) !important; } /* ══════════════════════════════════════════════════════════ 5. CTA BUTTON ══════════════════════════════════════════════════════════ */ /* Transparent state — outlined ghost */ .uge-header:not(.uge-scrolled):not(.uge-header ~ body.uge-not-home) .elementor-widget-button .elementor-button { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.75) !important; color: #FFFFFF !important; } /* Solid state */ .uge-header.uge-scrolled .elementor-widget-button .elementor-button, body.uge-not-home .uge-header .elementor-widget-button .elementor-button { background-color: var(--uge-charcoal) !important; border-color: var(--uge-charcoal) !important; color: #FFFFFF !important; } /* Hover (all states) */ .uge-header .elementor-widget-button .elementor-button:hover { background-color: var(--uge-gold) !important; border-color: var(--uge-gold) !important; color: #FFFFFF !important; } /* CTA size */ .uge-header .elementor-widget-button .elementor-button { font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 12px 20px !important; border-radius: 0 !important; white-space: nowrap !important; transition: background-color 0.2s ease, border-color 0.2s ease; } /* ══════════════════════════════════════════════════════════ 6. CART BADGE — hide when empty ══════════════════════════════════════════════════════════ */ .uge-header .elementor-menu-cart__product-count[data-count="0"] { display: none !important; } /* ══════════════════════════════════════════════════════════ 7. DROPDOWN — 0 radius, no blur ══════════════════════════════════════════════════════════ */ .uge-header .elementor-nav-menu--dropdown, .uge-header .elementor-nav-menu--dropdown ul { border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; white-space: nowrap; } .uge-header .elementor-nav-menu--dropdown li a { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; color: var(--uge-charcoal); transition: color 0.16s ease, background-color 0.16s ease; border-radius: 0 !important; } .uge-header .elementor-nav-menu--dropdown li a:hover { color: var(--uge-gold) !important; background-color: rgba(169, 142, 90, 0.04) !important; } /* ══════════════════════════════════════════════════════════ 8. SEARCH EXPAND — 0 radius ══════════════════════════════════════════════════════════ */ .uge-header .elementor-search-form, .uge-header .elementor-search-form__container, .uge-header .elementor-search-form__input, .uge-header .elementor-search-form__submit { border-radius: 0 !important; } /* ══════════════════════════════════════════════════════════ 9. DARK OVERLAY (mobile panel) ══════════════════════════════════════════════════════════ */ #uge-mob-overlay { display: none; position: fixed; inset: 0; background: rgba(28, 28, 26, 0.50); z-index: 99990; opacity: 0; transition: opacity 0.26s ease; } #uge-mob-overlay.uge-overlay-visible { display: block; opacity: 1; } /* ══════════════════════════════════════════════════════════ 10. MOBILE SLIDE-IN PANEL ══════════════════════════════════════════════════════════ */ #uge-mobile-panel { position: fixed; top: 0; right: 0; width: min(340px, 90vw); height: 100dvh; overflow-y: auto; background: #FFFFFF; z-index: 99999; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border-left: 1px solid var(--uge-hairline); border-radius: 0 !important; } #uge-mobile-panel.uge-panel-open { transform: translateX(0); } /* Close button */ #uge-mob-close { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 18px 20px 14px; border: none; border-bottom: 1px solid var(--uge-hairline); background: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--uge-charcoal); width: 100%; } #uge-mob-close:hover { color: var(--uge-gold); } /* Nav list */ #uge-mobile-panel .uge-mob-nav { list-style: none; margin: 0; padding: 6px 0; flex: 1; } #uge-mobile-panel .uge-mob-nav li { border-bottom: 1px solid rgba(228, 224, 216, 0.45); } #uge-mobile-panel .uge-mob-nav li:last-child { border-bottom: none; } #uge-mobile-panel .uge-mob-nav > li > a { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--uge-charcoal); text-decoration: none; transition: color 0.16s ease; } #uge-mobile-panel .uge-mob-nav > li > a:hover { color: var(--uge-gold); } /* Expand arrow */ #uge-mobile-panel .uge-mob-nav li.has-children > a::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.18s ease; flex-shrink: 0; } #uge-mobile-panel .uge-mob-nav li.has-children.open > a::after { transform: rotate(225deg); } /* Sub-menu */ #uge-mobile-panel .uge-mob-nav .uge-sub-menu { display: none; list-style: none; margin: 0; padding: 0; background: #F8F6F2; } #uge-mobile-panel .uge-mob-nav li.has-children.open > .uge-sub-menu { display: block; } #uge-mobile-panel .uge-mob-nav .uge-sub-menu li a { display: block; padding: 11px 22px 11px 34px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; color: var(--uge-charcoal); text-decoration: none; transition: color 0.16s ease; } #uge-mobile-panel .uge-mob-nav .uge-sub-menu li a:hover { color: var(--uge-gold); } /* Utility section */ #uge-mobile-panel .uge-mob-utility { padding: 20px 22px 36px; border-top: 1px solid var(--uge-hairline); display: flex; flex-direction: column; gap: 14px; } .uge-mob-search form { display: flex; align-items: center; border: 1px solid var(--uge-hairline); border-radius: 0; } .uge-mob-search input[type="search"] { flex: 1; border: none; outline: none; padding: 10px 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--uge-charcoal); background: transparent; border-radius: 0; } .uge-mob-search input[type="search"]::placeholder { color: var(--uge-gray); } .uge-mob-search button[type="submit"] { border: none; background: none; padding: 10px 11px; cursor: pointer; color: var(--uge-charcoal); display: flex; align-items: center; border-radius: 0; } .uge-mob-search button[type="submit"]:hover { color: var(--uge-gold); } .uge-mob-account { display: flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--uge-charcoal); text-decoration: none; transition: color 0.16s ease; } .uge-mob-account:hover { color: var(--uge-gold); } .uge-mob-cta { display: block; text-align: center; padding: 12px 20px; background: var(--uge-charcoal); color: #FFFFFF !important; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--uge-charcoal); border-radius: 0; transition: background-color 0.2s ease, border-color 0.2s ease; } .uge-mob-cta:hover { background: var(--uge-gold) !important; border-color: var(--uge-gold) !important; } /* ══════════════════════════════════════════════════════════ 11. BODY LOCK ══════════════════════════════════════════════════════════ */ body.uge-panel-active { overflow: hidden; } /* ══════════════════════════════════════════════════════════ 12. MOBILE BREAKPOINT ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .uge-header .hidden-phone { display: none !important; } /* Keep cart visible */ .uge-header .elementor-widget-woocommerce-menu-cart { display: flex !important; } }
Contact us

About Us

More Than 30+
Years Experience

At Ultimate Glass Etching, we combine traditional craftsmanship with modern technology. Based in Las Vegas, we offer a comprehensive suite of custom glass etching and sandblasting services for both residential and commercial clients. We transform plain glass, stone, and wood into bespoke works of art.

0 +
Years
Experience

TOP

Luxury Brands
Trusted
+ 2
Bespoke
Designs Created

USA

Nationwide
Reach
IMG 7563
IMG 7294
Architectural & Decorative Glass

From elegant etched glass doors that balance privacy and light, to decorative custom calligraphy mirrors for luxury spaces like spas and hotel lobbies. We specialize in both subtle frosted glass patterns and bold, multi-dimensional deep-carved motifs.

IMG 7531
Personalized Art & Digital Designs

We craft personalized engraved gifts and pet memorials capturing heartfelt moments on premium stone and glass. For DIY artists, we also offer our exclusive vector files and SVG designs to bring our patterns to your own projects.

IMG 7540
TRUSTED BY LUXURY BRANDS

Our premium work adorns top Las Vegas hotels such as The Cosmopolitan and Bellagio. We use high-quality glass, crystal, marble, granite, and wood to guarantee lasting luxury. From design to fabrication, your project is in expert hands.

IMG 7566

OUR ARTISAN PROCESS

designs etched on glass, mirrors, metal, wood & more.
Consultation

Discussing the project scale, materials, and your unique vision.

gifts, weddings, and special occasions.
Design Sketches

Creating custom vector files, typography, and conceptual sketches.

designs etched on glass, mirrors
Proof Approvals

Reviewing mock-ups together to ensure every detail is perfectly aligned.

mirror engraving Las Vegas
Precise Sandblasting

Applying deep carving and surface etching to bring the concept to life.

IMG 7540
IMG 7539
Frosted Commercial Entry Glass
ETCHED MIRROR
IMG 7575
/** * Ultimate Glass Etching — Header v4 * File: uge-header-v4.js * * Enqueue via child theme functions.php (load in footer): * * wp_enqueue_script( * 'uge-header-v4', * get_stylesheet_directory_uri() . '/js/uge-header-v4.js', * [], '4.0.0', true * ); * * What this does * ────────────── * A. Marks non-homepage with .uge-not-home → CSS keeps header solid. * B. Toggles .uge-scrolled on .uge-header after scroll threshold. * C. Builds a slide-in mobile panel with: * – Close button + dark overlay * – Nav items (live DOM clone → hardcoded fallback) * – Expandable Services + Shop sub-menus * – Search, My Account (/my-account/), Request a Quote (/contact/) * – Closes on: X button, overlay, Escape key, normal link click * D. Intercepts the Elementor hamburger click to open the custom panel. * * Duplicate-listener guard: dataset flag on + event delegation. * No inline event attributes, no per-element re-attachment. */ (function () { 'use strict'; /* ── Single-init guard ─────────────────────────────────── */ if (document.documentElement.dataset.ugeV4) return; document.documentElement.dataset.ugeV4 = '1'; var SCROLL_PX = 70; var MOBILE_PX = 1024; /* ══════════════════════════════════════════════════════ A. NON-HOME BODY CLASS ══════════════════════════════════════════════════════ */ if (!document.body.classList.contains('home')) { document.body.classList.add('uge-not-home'); } /* ══════════════════════════════════════════════════════ B. SCROLL → SOLID ══════════════════════════════════════════════════════ */ var header = document.querySelector('.uge-header'); function syncScroll() { if (!header) return; header.classList.toggle('uge-scrolled', window.scrollY > SCROLL_PX); } if (header) { window.addEventListener('scroll', syncScroll, { passive: true }); syncScroll(); } /* ══════════════════════════════════════════════════════ C. BUILD MOBILE PANEL ══════════════════════════════════════════════════════ */ /* Nav data: try to clone from rendered Elementor menu, else use spec */ function getNavItems() { var menuEl = document.querySelector( '.uge-header .elementor-nav-menu--main .elementor-nav-menu' ); if (menuEl) { var items = []; menuEl.querySelectorAll(':scope > li').forEach(function (li) { var a = li.querySelector(':scope > a'); var sub = li.querySelector(':scope > ul.sub-menu'); var children = []; if (sub) { sub.querySelectorAll(':scope > li > a').forEach(function (ca) { children.push({ label: ca.textContent.trim(), href: ca.getAttribute('href') }); }); } if (a) items.push({ label: a.textContent.trim(), href: a.getAttribute('href'), children: children }); }); if (items.length) return items; } /* Hard-coded fallback matching the approved nav spec */ return [ { label: 'Home', href: '/', children: [] }, { label: 'Services', href: '#', children: [ { label: 'Deep Glass Etching', href: '/services/deep-glass-etching/' }, { label: 'Glass Sandblasting', href: '/services/glass-sandblasting/' }, { label: 'Architectural Glass', href: '/services/architectural-glass/' }, { label: 'Mirror Etching', href: '/services/mirror-etching/' }, { label: 'Gold Leaf', href: '/services/gold-leaf/' }, { label: 'Trade & White Label Fabrication', href: '/services/trade-fabrication/' }, ]}, { label: 'Shop', href: '#', children: [ { label: 'Shop All', href: '/shop/' }, { label: 'Zodiac Glass Art', href: '/shop/zodiac/' }, { label: 'Memorial Glass', href: '/shop/memorial/' }, { label: 'Etched Drinkware', href: '/shop/drinkware/' }, { label: 'Persian & Calligraphy Art', href: '/shop/persian-calligraphy/' }, { label: 'Custom Glass Gifts', href: '/shop/custom-gifts/' }, ]}, { label: 'Portfolio', href: '/portfolio/', children: [] }, { label: 'About', href: '/about/', children: [] }, { label: 'Resources', href: '/resources/', children: [] }, { label: 'Contact', href: '/contact/', children: [] }, ]; } function buildPanel() { /* overlay */ var overlay = document.createElement('div'); overlay.id = 'uge-mob-overlay'; overlay.setAttribute('aria-hidden', 'true'); /* panel */ var panel = document.createElement('nav'); panel.id = 'uge-mobile-panel'; panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-modal', 'true'); panel.setAttribute('aria-label', 'Mobile navigation'); panel.setAttribute('aria-hidden', 'true'); /* close button */ var closeBtn = document.createElement('button'); closeBtn.id = 'uge-mob-close'; closeBtn.setAttribute('aria-label', 'Close menu'); closeBtn.innerHTML = 'Close ' + ''; panel.appendChild(closeBtn); /* nav list */ var ul = document.createElement('ul'); ul.className = 'uge-mob-nav'; getNavItems().forEach(function (item) { var li = document.createElement('li'); var hasKids = item.children && item.children.length > 0; if (hasKids) li.classList.add('has-children'); var a = document.createElement('a'); a.href = item.href; a.textContent = item.label; li.appendChild(a); if (hasKids) { var subUl = document.createElement('ul'); subUl.className = 'uge-sub-menu'; item.children.forEach(function (c) { var sli = document.createElement('li'); var sa = document.createElement('a'); sa.href = c.href; sa.textContent = c.label; sli.appendChild(sa); subUl.appendChild(sli); }); li.appendChild(subUl); } ul.appendChild(li); }); panel.appendChild(ul); /* utility section: search + account + CTA */ var util = document.createElement('div'); util.className = 'uge-mob-utility'; /* Try to clone from the hidden HTML widget seed in the header */ var seed = document.getElementById('uge-mobile-extras'); if (seed) { var clone = seed.cloneNode(true); clone.removeAttribute('id'); clone.removeAttribute('aria-hidden'); clone.style.display = ''; clone.className = 'uge-mob-utility'; panel.appendChild(clone); } else { util.innerHTML = '
' + '
' + '' + '' + '
' + '
' + '' + '' + '' + ' My Account' + '' + 'Request a Quote'; panel.appendChild(util); } document.body.appendChild(overlay); document.body.appendChild(panel); return { panel: panel, overlay: overlay, closeBtn: closeBtn, ul: ul }; } /* ── Open / close ── */ var refs = null; function openPanel() { if (!refs) return; refs.panel.classList.add('uge-panel-open'); refs.panel.setAttribute('aria-hidden', 'false'); refs.overlay.classList.add('uge-overlay-visible'); document.body.classList.add('uge-panel-active'); setTimeout(function () { refs.closeBtn.focus(); }, 40); } function closePanel() { if (!refs) return; refs.panel.classList.remove('uge-panel-open'); refs.panel.setAttribute('aria-hidden', 'true'); refs.overlay.classList.remove('uge-overlay-visible'); document.body.classList.remove('uge-panel-active'); var tog = document.querySelector('.uge-header .elementor-menu-toggle'); if (tog) tog.focus(); } /* ══════════════════════════════════════════════════════ D. WIRE UP (event delegation — no per-element listeners) ══════════════════════════════════════════════════════ */ function init() { if (!header) return; refs = buildPanel(); /* close button */ refs.closeBtn.addEventListener('click', closePanel); /* overlay */ refs.overlay.addEventListener('click', closePanel); /* Escape */ document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && refs.panel.classList.contains('uge-panel-open')) { closePanel(); } }); /* Link clicks inside panel — close on real nav, expand on parents */ refs.panel.addEventListener('click', function (e) { /* Expand toggle for parent items */ var parentLink = e.target.closest('li.has-children > a'); if (parentLink) { e.preventDefault(); var li = parentLink.parentElement; var wasOpen = li.classList.contains('open'); refs.ul.querySelectorAll('li.has-children.open').forEach(function (s) { if (s !== li) s.classList.remove('open'); }); li.classList.toggle('open', !wasOpen); return; } /* Close panel on normal link */ var link = e.target.closest('a'); if (link) { var href = link.getAttribute('href'); if (href && href !== '#') closePanel(); } }); /* Hamburger intercept — open our panel on mobile */ header.addEventListener('click', function (e) { if (window.innerWidth > MOBILE_PX) return; if (e.target.closest('.elementor-menu-toggle')) { setTimeout(openPanel, 0); } }); } /* ── DOM ready ── */ if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } /* ── Re-init only if panel was removed (SPA transitions) ── */ window.addEventListener('elementor/frontend/init', function () { if (!document.getElementById('uge-mobile-panel')) { refs = null; init(); } }); })();