/* ========================================================================= Skillz Barbershop — subtle enhancements (additive only) Everything here layers on top of the original design without altering it. Namespaced with .enh- to avoid clashing with theme styles. ========================================================================= */ /* Smooth in-page scrolling for anchor jumps */ html { scroll-behavior: smooth; } /* Gentle easing on interactive elements — no color/layout change, just polish */ a, button, .elementor-button, input[type="submit"] { transition: color .2s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease, opacity .2s ease; } /* Visible keyboard focus for accessibility (mouse users unaffected) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #d30000; outline-offset: 2px; border-radius: 2px; } /* ---- Scroll reveal ---------------------------------------------------- The hidden starting state is applied ONLY after JS adds `.enh-reveal-ready` to . With JS disabled, nothing is hidden. */ .enh-reveal-ready .enh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .enh-reveal-ready .enh-reveal.enh-in { opacity: 1; transform: none; } /* ---- Back-to-top button ---------------------------------------------- */ .enh-top { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #141414; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .25s ease; } .enh-top.enh-show { opacity: 1; visibility: visible; transform: none; } .enh-top:hover, .enh-top:focus-visible { background: #d30000; color: #fff; } /* ---- Respect reduced-motion preference ------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .enh-reveal-ready .enh-reveal { opacity: 1 !important; transform: none !important; transition: none; } .enh-top { transition: none; } } /* ---- Small mobile niceties ------------------------------------------- */ @media (max-width: 600px) { .enh-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } /* Prevent accidental horizontal overflow on small screens */ html, body { max-width: 100%; overflow-x: hidden; } } /* ---- Full-screen mobile navigation ---------------------------------- */ @media (max-width: 921.99px) { html.enh-mobile-menu-open, html.enh-mobile-menu-open body { overflow: hidden !important; overscroll-behavior: none; } #ast-mobile-header { position: relative; z-index: 10000; } #ast-mobile-header .ast-mobile-header-content { position: fixed !important; inset: 0; z-index: 9998; display: flex !important; width: 100%; height: 100vh; height: 100dvh; padding: calc(106px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; overflow-x: hidden; overflow-y: auto; background: radial-gradient(circle at 88% 12%, rgba(213, 0, 0, .18), transparent 34rem), linear-gradient(145deg, #090909 0%, #151515 100%) !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity .28s ease, visibility .28s ease, transform .28s ease; } body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } body.ast-main-header-nav-open #ast-mobile-header .ast-primary-header-bar { position: fixed !important; inset: 0 0 auto; z-index: 10001; width: 100%; padding-top: env(safe-area-inset-top); background: rgba(9, 9, 9, .92) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #ast-mobile-header .main-header-menu-toggle { position: relative; z-index: 10002; display: inline-flex !important; width: 46px !important; height: 46px !important; min-width: 46px; padding: 0 !important; align-items: center; justify-content: center; color: #fff !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 50% !important; box-shadow: none !important; } #ast-mobile-header .main-header-menu-toggle:hover, #ast-mobile-header .main-header-menu-toggle:focus-visible, #ast-mobile-header .main-header-menu-toggle.toggled { color: #fff !important; background: #d50000 !important; border-color: #d50000 !important; } #ast-mobile-header .main-header-menu-toggle svg { width: 25px; height: 25px; } #ast-mobile-header .ast-mobile-header-content > *, #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile, #ast-mobile-header .ast-mobile-header-content .main-header-bar-navigation, #ast-mobile-header .ast-mobile-header-content .main-navigation { width: min(100%, 620px) !important; margin: 0 auto !important; padding: 0 !important; } #ast-mobile-header .ast-mobile-header-content .main-navigation { display: block !important; height: auto !important; } #ast-mobile-header .ast-mobile-header-content .main-navigation::before { content: "NAVIGATION"; display: block; margin-bottom: 18px; color: #d50000; font: 700 .72rem/1 'Bai Jamjuree', sans-serif; letter-spacing: .28em; } #ast-mobile-header #ast-hf-mobile-menu { display: flex !important; flex-direction: column; width: 100%; margin: 0; padding: 0; background: transparent !important; counter-reset: mobile-menu-item; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item { counter-increment: mobile-menu-item; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); opacity: 0; transform: translateY(14px); transition: opacity .32s ease, transform .32s ease; } body.ast-main-header-nav-open #ast-hf-mobile-menu > .menu-item { opacity: 1; transform: none; } body.ast-main-header-nav-open #ast-hf-mobile-menu > .menu-item:nth-child(1) { transition-delay: .08s; } body.ast-main-header-nav-open #ast-hf-mobile-menu > .menu-item:nth-child(2) { transition-delay: .13s; } body.ast-main-header-nav-open #ast-hf-mobile-menu > .menu-item:nth-child(3) { transition-delay: .18s; } body.ast-main-header-nav-open #ast-hf-mobile-menu > .menu-item:nth-child(4) { transition-delay: .23s; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 12px; width: 100%; padding: clamp(18px, 3vh, 27px) 0 !important; align-items: center; color: #fff !important; background: transparent !important; border: 0 !important; font-family: 'Bai Jamjuree', sans-serif; font-size: clamp(1.85rem, 8vw, 3.65rem); font-weight: 700; line-height: 1 !important; letter-spacing: -.025em; text-transform: uppercase; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link::before { content: "0" counter(mobile-menu-item); color: #d50000; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .12em; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link::after { content: ""; width: 10px; height: 10px; justify-self: end; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link:hover, #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link:focus-visible, #ast-mobile-header #ast-hf-mobile-menu > .current-menu-item > .menu-link, #ast-mobile-header #ast-hf-mobile-menu > .current_page_item > .menu-link { color: #d50000 !important; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link:hover::after, #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link:focus-visible::after { transform: translateX(4px) rotate(45deg); } } @media (max-width: 380px) { #ast-mobile-header .ast-mobile-header-content { padding-right: 20px; padding-left: 20px; } #ast-mobile-header #ast-hf-mobile-menu > .menu-item > .menu-link { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 9px; font-size: 1.7rem; } } @media (prefers-reduced-motion: reduce) { #ast-mobile-header .ast-mobile-header-content, #ast-mobile-header #ast-hf-mobile-menu > .menu-item { transition: none !important; } } /* ---- Desktop-style navigation on phones ----------------------------- */ @media (max-width: 921.99px) { #ast-mobile-header { display: none !important; } #ast-desktop-header { display: block !important; } #ast-desktop-header .site-primary-header-wrap { width: 100%; max-width: none; padding-right: clamp(10px, 3vw, 18px) !important; padding-left: clamp(10px, 3vw, 18px) !important; } #ast-desktop-header .ast-builder-grid-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; min-height: 68px; column-gap: 8px; align-items: center; } #ast-desktop-header .site-header-primary-section-left, #ast-desktop-header .site-header-primary-section-right { min-width: 0; } #ast-desktop-header .site-header-primary-section-right, #ast-desktop-header .ast-builder-menu-1, #ast-desktop-header .ast-main-header-bar-alignment, #ast-desktop-header .main-header-bar-navigation, #ast-desktop-header .main-navigation { display: flex !important; width: auto !important; height: auto !important; align-items: center; justify-content: flex-end; } #ast-desktop-header .main-header-menu { display: flex !important; flex-flow: row nowrap !important; width: auto !important; margin: 0 !important; align-items: center; justify-content: flex-end; background: transparent !important; } #ast-desktop-header .main-header-menu > .menu-item { display: flex !important; flex-direction: row !important; width: auto !important; } #ast-desktop-header .main-header-menu > .menu-item > .menu-link { display: flex !important; width: auto !important; height: auto !important; padding: 12px clamp(7px, 2.3vw, 14px) !important; background: transparent !important; border: 0 !important; font-size: clamp(12px, 3.3vw, 15px); line-height: 1.2 !important; white-space: nowrap; transform: none !important; } #ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover, #ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus, #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link, #ast-desktop-header .main-header-menu > .current_page_item > .menu-link { background: transparent !important; } #ast-desktop-header .custom-logo { width: clamp(64px, 20vw, 86px) !important; max-width: 86px !important; height: auto !important; } } @media (max-width: 350px) { #ast-desktop-header .site-primary-header-wrap { padding-right: 8px !important; padding-left: 8px !important; } #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-right: 6px !important; padding-left: 6px !important; font-size: 11.5px; } #ast-desktop-header .custom-logo { width: 60px !important; } } /* ---- About photo gallery --------------------------------------------- Render the exported gallery without relying on Elementor's JavaScript. */ .skz-static-gallery { opacity: 1 !important; visibility: visible !important; animation: none !important; } .skz-static-gallery .skz-gallery-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; height: auto !important; padding-bottom: 0 !important; } .skz-static-gallery .e-gallery-item { position: relative !important; inset: auto !important; display: block; width: auto !important; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 19px; } .skz-static-gallery .skz-gallery__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .skz-static-gallery .elementor-gallery-item__overlay { position: absolute; inset: 0; background: transparent; pointer-events: none; transition: background-color .25s ease; } .skz-static-gallery .e-gallery-item:hover .elementor-gallery-item__overlay, .skz-static-gallery .e-gallery-item:focus-visible .elementor-gallery-item__overlay { background: rgba(0, 0, 0, .18); } .skz-static-gallery .e-gallery-item:hover .skz-gallery__image, .skz-static-gallery .e-gallery-item:focus-visible .skz-gallery__image { transform: scale(1.025); } @media (max-width: 1024px) { .skz-static-gallery .skz-gallery-grid { gap: 10px; } } @media (max-width: 767px) { .skz-static-gallery .skz-gallery-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .skz-static-gallery .skz-gallery__image { transition: none; } }