/* * Our layer on top of the captured WordPress templates: * 1. a restyled hamburger menu (Elementor popup 29965) * 2. small responsive fixes inherited from the original design * Everything else is left exactly as WordPress rendered it. */ :root { --pxb-red: #df281d; --pxb-amber: #ffb32c; --pxb-ink: #0d0503; } /* ---------- scrollbars ---------- */ /* Firefox */ html { scrollbar-color: var(--pxb-red) rgba(0, 0, 0, .08); scrollbar-width: thin; } /* Chrome, Edge, Safari — every scrollable area of the site. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .07); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pxb-amber) 0%, var(--pxb-red) 55%, #a4180f 100%); border-radius: 999px; /* Padding around the thumb, so it reads as a slim pill. */ border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffc251 0%, #e4332a 55%, #b81a10 100%); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Horizontal scrollers inside the page (carousels, the fair's map) keep the same pill on a darker track. */ .swiper::-webkit-scrollbar-track, .map-viewport::-webkit-scrollbar-track { background: rgba(255, 255, 255, .12); } /* ---------- responsive fixes ---------- */ /* A few decorative containers are wider than their section on large screens * and made the page scroll sideways (they did on WordPress too). Clip them * inside the article layout — never on /, where iOS Safari can * end up with a page that won't scroll at all. */ [data-elementor-type="single-post"], [data-elementor-type="wp-page"] { overflow-x: clip; } /* Media inside article bodies never pushes the column wider than the screen. */ .elementor-widget-theme-post-content img, .elementor-widget-theme-post-content video, .elementor-widget-theme-post-content iframe, .elementor-widget-theme-post-content table { max-width: 100%; height: auto; } .elementor-widget-theme-post-content figure { max-width: 100%; } /* ---------- newsletter popup: a close button you can actually hit ---------- */ #elementor-popup-modal-29320 .dialog-close-button { top: 10px !important; right: 10px !important; width: 42px; height: 42px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .45); opacity: 1 !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; } #elementor-popup-modal-29320 .dialog-close-button svg, #elementor-popup-modal-29320 .dialog-close-button i { width: 16px; height: 16px; font-size: 16px; } #elementor-popup-modal-29320 .dialog-close-button:hover, #elementor-popup-modal-29320 .dialog-close-button:focus-visible { transform: rotate(90deg) scale(1.06); background: var(--pxb-amber); border-color: var(--pxb-amber); color: var(--pxb-ink); box-shadow: 0 0 26px rgba(255, 179, 44, .6); } #elementor-popup-modal-29320 .dialog-close-button:focus-visible, #elementor-popup-modal-29965 .dialog-close-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Comfortable tap target on phones without making the icon bigger. */ @media (max-width: 767px) { #elementor-popup-modal-29320 .dialog-close-button { width: 46px; height: 46px; top: 6px !important; right: 6px !important; } } /* ---------- hover: cards and images ---------- */ /* The lift happens on the card's inner container: carousel slides are * positioned by Swiper and must keep their own transform. */ .e-loop-item > .e-con, .page-content article.post { transition: transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s ease; } .e-loop-item:hover > .e-con, .e-loop-item:focus-within > .e-con, .page-content article.post:hover { transform: translateY(-6px); box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .55); } /* The photo zooms inside its frame. */ .e-loop-item .elementor-widget-theme-post-featured-image, .page-content article.post > a { display: block; overflow: hidden; } .e-loop-item .elementor-widget-theme-post-featured-image img, .page-content article.post img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; } .e-loop-item:hover .elementor-widget-theme-post-featured-image img, .e-loop-item:focus-within .elementor-widget-theme-post-featured-image img, .page-content article.post:hover img { transform: scale(1.06); } /* Titles and buttons follow along. */ .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title, .page-content article.post .entry-title a { transition: color .3s ease; } .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title, .page-content article.post:hover .entry-title a { color: var(--pxb-red); } .elementor-button { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, letter-spacing .3s ease; } .e-loop-item:hover .elementor-button, .elementor-button:hover { transform: translateY(-2px); letter-spacing: .03em; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7); } /* Photos inside an article breathe a little when pointed at. */ .elementor-widget-theme-post-content figure img { transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease; } .elementor-widget-theme-post-content figure:hover img { transform: scale(1.02); filter: saturate(1.06); } @media (hover: none) { /* Touch screens: no hover states, no accidental sticky effects. */ .e-loop-item > .e-con, .page-content article.post, .e-loop-item .elementor-widget-theme-post-featured-image img, .page-content article.post img, .elementor-button { transition: none; transform: none !important; box-shadow: none; } } /* ---------- panel ---------- */ #elementor-popup-modal-29965 .dialog-message { background: transparent !important; box-shadow: none !important; } #elementor-popup-modal-29965 .elementor-29965 > .e-con { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #e4332a 0%, var(--pxb-red) 42%, #a4180f 78%, #5d0d08 100%) !important; box-shadow: 18px 0 60px rgba(0, 0, 0, .55); } /* Soft moving glow + fine grid, for depth behind the links. */ #elementor-popup-modal-29965 .elementor-29965 > .e-con::before, #elementor-popup-modal-29965 .elementor-29965 > .e-con::after { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none; } /* Static gradients: a blurred, endlessly animating layer this size costs far * too much on phones. The depth comes from the gradients themselves. */ #elementor-popup-modal-29965 .elementor-29965 > .e-con::before { background: radial-gradient(38% 30% at 18% 12%, rgba(255, 179, 44, .34), transparent 70%), radial-gradient(45% 34% at 88% 82%, rgba(255, 92, 60, .32), transparent 72%); } #elementor-popup-modal-29965 .elementor-29965 > .e-con::after { background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(70% 60% at 30% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000 30%, transparent 100%); opacity: .5; } /* Right edge: a thin light seam that separates panel from page. */ #elementor-popup-modal-29965 .elementor-29965 > .e-con > .e-con-inner::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--pxb-amber), transparent); opacity: .85; } #elementor-popup-modal-29965 .elementor-29965 .elementor-widget-image img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); } /* ---------- links ---------- */ #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-item, #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-sub-item { position: relative; padding-left: 34px !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .28); transition: transform .28s cubic-bezier(.22, 1, .36, 1), color .28s ease, letter-spacing .28s ease, text-shadow .28s ease; } /* Elementor's own dropdown arrow: replaced by .pxb-caret. */ #elementor-popup-modal-29965 .elementor-nav-menu .sub-arrow { display: none !important; } /* Accent bar that grows on hover, and marks the current page. */ #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-item::before, #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-sub-item::before { content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 0; transform: translateY(-50%); border-radius: 3px; background: var(--pxb-amber); box-shadow: 0 0 14px rgba(255, 179, 44, .9); transition: height .3s cubic-bezier(.22, 1, .36, 1); } #elementor-popup-modal-29965 .elementor-nav-menu a:hover::before, #elementor-popup-modal-29965 .elementor-nav-menu a:focus-visible::before, #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-item-active::before { height: 62%; } #elementor-popup-modal-29965 .elementor-nav-menu a:hover, #elementor-popup-modal-29965 .elementor-nav-menu a:focus-visible { transform: translateX(10px); letter-spacing: .04em; color: var(--pxb-amber) !important; text-shadow: 0 0 22px rgba(255, 179, 44, .45); } #elementor-popup-modal-29965 .elementor-nav-menu a:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 4px; border-radius: 4px; } #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-item-active { color: var(--pxb-amber) !important; } /* ---------- entrance: links appear one after another ---------- */ /* Items only animate while the panel is opening. Once the entrance is over * (or if the browser never ran it) menu.js adds .pxb-settled, which drops * the animation, so the menu can never be left blank. */ #elementor-popup-modal-29965.pxb-settled .elementor-nav-menu > li, #elementor-popup-modal-29965.pxb-settled .elementor-widget-image { animation: none !important; opacity: 1; transform: none; } #elementor-popup-modal-29965.pxb-open:not(.pxb-settled) .elementor-nav-menu > li { animation: pxb-item-in .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--pxb-i, 0) * 55ms + 120ms); } @keyframes pxb-item-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } } #elementor-popup-modal-29965.pxb-open:not(.pxb-settled) .elementor-widget-image { animation: pxb-logo-in .55s cubic-bezier(.22, 1, .36, 1) backwards; } @keyframes pxb-logo-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } /* ---------- submenus ---------- */ #elementor-popup-modal-29965 .menu-item-has-children > a { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; } #elementor-popup-modal-29965 .pxb-caret { flex: 0 0 auto; width: 22px; height: 22px; margin-right: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease; } #elementor-popup-modal-29965 .pxb-caret::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } #elementor-popup-modal-29965 .pxb-expanded > a .pxb-caret { transform: rotate(180deg); background: rgba(255, 179, 44, .22); border-color: var(--pxb-amber); } #elementor-popup-modal-29965 .elementor-nav-menu .sub-menu { display: block !important; overflow: hidden; max-height: 0; opacity: 0; margin-left: 18px; border-left: 1px solid rgba(255, 255, 255, .22); transition: max-height .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } #elementor-popup-modal-29965 .pxb-expanded > .sub-menu { max-height: 60vh; opacity: 1; } /* ---------- close button ---------- */ #elementor-popup-modal-29965 .dialog-close-button { top: 22px !important; right: 22px !important; width: 44px; height: 44px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .35); transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; } #elementor-popup-modal-29965 .dialog-close-button:hover { transform: rotate(90deg); background: var(--pxb-amber); border-color: var(--pxb-amber); color: var(--pxb-ink); box-shadow: 0 0 24px rgba(255, 179, 44, .55); } /* ---------- small screens ---------- */ @media (max-width: 767px) { #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-item, #elementor-popup-modal-29965 .elementor-nav-menu a.elementor-sub-item { padding-left: 26px !important; } #elementor-popup-modal-29965 .elementor-nav-menu a:hover, #elementor-popup-modal-29965 .elementor-nav-menu a:focus-visible { transform: translateX(6px); } #elementor-popup-modal-29965 .dialog-close-button { top: 14px !important; right: 14px !important; } } @media (prefers-reduced-motion: reduce) { #elementor-popup-modal-29965 *, #elementor-popup-modal-29965 *::before, #elementor-popup-modal-29965 *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } #elementor-popup-modal-29965 .elementor-nav-menu > li, #elementor-popup-modal-29965 .elementor-widget-image { animation: none !important; opacity: 1; transform: none; } }