:root { --transition: all 0.3s; /*Color*/ --clr-blue-100: #211650; --clr-blue-80: #4D4573; --clr-blue-60: #7A7396; --clr-blue-30: #BCB9CA; --clr-blue-10: #E9E8ED; --clr-blue-03: #F8F8FA; --clr-blue-05: #F4F3F6; --clr-purple-50: #B2AFDF; --clr-neutral-05: #F5F5F5; --clr-neutral-10: #E5E5E5; --clr-neutral-15: #D9D9D9; --clr-neutral-60: #696969; --clr-purple-10: #F0EFF9; --clr-purple-30: #D1CFEC; /*Font-size*/ --fs-10: 10px; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-26: 26px; --fs-heading-large: 32px; --fs-heading-xlarge: 48px; --fs-heading-xxlarge: 84px; /*Letter Spacing*/ /*Line height*/ --lh-medium: 18.2px; --lh-14: 14px; --lh-168: 16.8px; --lh-21: 21px; --lh-252: 25.2px; --lh-26: 26px; --lh-35: 35px; --lh-435: 43.5px; --lh-55: 55px; --lh-84: 84px; /*CTA Padding*/ --cta-816: 8px 16px; /*Border Radius*/ --radius-large: 100px; /* Metropolis replaces Gotham (client request) — same var name kept so the 100+ var(--ff-gotham) usages keep working. Every rule that sets font-family: var(--ff-gotham) also sets letter-spacing: 0.5px (client request, Metropolis text only). */ --ff-gotham: 'Metropolis', 'Gotham', Arial, sans-serif; } * { font-family: 'NEXT Book', sans-serif !important; -webkit-tap-highlight-color: transparent !important; } i[class*="eicon"], [class*="eicon"]::before { font-family: "eicons" !important; } .postid-3886 .hkb-pe-more--internal, .postid-26225 .hkb-pe-more--internal, .postid-26224 .hkb-pe-more--internal, .postid-5387 .hkb-pe-more--internal, .postid-26523 .hkb-pe-more--internal, .postid-26522 .hkb-pe-more--internal, .postid-3642 .hkb-pe-more--internal, .postid-26506 .hkb-pe-more--internal, .postid-26507 .hkb-pe-more--internal { display: none !important; } .acknowledgement-categories ul { list-style-type: disc !important; list-style-position: inside !important; } button.gform_previous_button.gform-theme-button.gform-theme-button--secondary.button { color: #fff !important; } .gform-loader { display: none !important; } p:last-child { margin-bottom: 0 !important; } body a:where(:not(.wp-element-button)) { text-decoration: auto; } button:not([type="submit"], .hkb-sp__swatch, .hkb-cart-confirm__remove, .hkb-cart-confirm__keep, .hkb-season-banner__full-trailer) { background-color: transparent !important; } button.hkb-panel__apply { background-color: var(--clr-blue-100) !important; } textarea { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } .elementor-icon-box-wrapper { display: flex; align-items: center; } .parent-pageid-30741 p.hkb-logo-group__name em, .parent-pageid-30742 p.hkb-logo-group__name em { font-style: normal !important; } .elementor-widget-text-editor a:not(.cta-dark-radial-out) { color: var(--clr-blue-100) !important; text-decoration: underline !important; text-underline-offset: 4px !important; transition: var(--transition); } .elementor-widget-text-editor a:not(.cta-dark-radial-out):hover { color: var(--clr-blue-60) !important; } .single-academy .elementor-widget-text-editor p, .single-academy .elementor-widget-text-editor strong, .single-academy .elementor-widget-heading p.elementor-heading-title, .single-academy .elementor-widget-text-editor ul, .single-academy .elementor-widget-text-editor ol, .single-academy .elementor-widget-text-editor ul li, .single-academy .elementor-widget-text-editor ol li { font-family: var(--ff-gotham) !important; } .single-academy .elementor-widget-text-editor strong { font-weight: 500 !important; } .single-academy .elementor-widget-text-editor ol, .single-academy .elementor-widget-text-editor ul { padding-left: 15px !important; list-style: inherit !important; } .single-academy .elementor-widget-hkb_gallery .include-container:has(h2) { max-width: 1480px; margin: 0 auto; padding-left: 80px; padding-right: 80px; } .elementor-widget-text-editor p:not(:last-child) { margin-bottom: 20px !important; } .accordion-section .acc-body td { vertical-align: middle !important; } ul.sidebar-nav-list { display: flex; flex-direction: column; } li.sidebar-nav-item[data-key="snav-4"] { order: 1; /* display: none !important; */ } .cky-classic-bottom { background-color: #fff !important; } .cky-consent-container { z-index: 4; } .cky-consent-container.cky-classic-bottom p { color: #030303; font-size: 16px; font-weight: 300; } /* ===== CookieYes banner + preference modal ===== Bring the consent buttons into the site CTA language: .cta-have-bg for the shape and colour, .cta-dark-radial-out for the hover. Two things force !important here. CookieYes writes its own blue directly into a style="" attribute on each button, and the global `button:not([type="submit"], ...) { background-color: transparent !important }` rule further up this file would otherwise strip the background. The radial ::before sits at z-index -1 inside the button's own stacking context, so it paints over the button background but under its label — the same trick .cta-dark-radial-out uses. Reject / Customise are not enabled in the CookieYes settings today; they are styled as the light/secondary variant so they are already correct if someone turns them on later. */ button.cky-btn { font-size: var(--fs-14); line-height: var(--lh-medium); font-weight: 400; letter-spacing: normal; text-transform: none; padding: var(--cta-816); border: 0; border-radius: var(--radius-large); transition: var(--transition); position: relative; overflow: hidden; z-index: 0; cursor: pointer; } button.cky-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 200%; aspect-ratio: 1 / 1; border-radius: 50%; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: -1; } button.cky-btn:hover::before { transform: translate(-50%, -50%) scale(1); } /* CookieYes fades its buttons on hover (.cky-btn:hover{opacity:.8}); the site CTAs wipe instead, so cancel the fade. */ button.cky-btn:hover { opacity: 1; } /* Primary — Accept / Save My Preferences */ button.cky-btn.cky-btn-accept, button.cky-btn.cky-btn-preferences { color: #fff !important; background-color: var(--clr-blue-100) !important; } button.cky-btn.cky-btn-accept::before, button.cky-btn.cky-btn-preferences::before { background-color: var(--clr-blue-80); } /* Secondary — Reject / Customise. Inset shadow instead of a real border so the box stays exactly the same size as the primary button. */ button.cky-btn.cky-btn-reject, button.cky-btn.cky-btn-customize { color: var(--clr-blue-100) !important; background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--clr-blue-30); } button.cky-btn.cky-btn-reject::before, button.cky-btn.cky-btn-customize::before { background-color: var(--clr-blue-05); } button.cky-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--clr-purple-50); } button.cky-btn.cky-btn-reject:focus-visible, button.cky-btn.cky-btn-customize:focus-visible { box-shadow: inset 0 0 0 1px var(--clr-blue-30), 0 0 0 3px var(--clr-purple-50); } .cky-consent-container .cky-consent-bar { padding: 10.5px 24px; padding-left: 120px !important; box-shadow:none !important; } .cky-classic-bottom .cky-notice-group { justify-content: flex-start; } .cky-notice-des { display: flex; gap: 18PX; align-items: center; } .cky-notice-des img { width: 36px; height: 36px; } .about-hkb-listbox .elementor-widget-image { overflow: hidden; border-radius: 2px; } .about-hkb-listbox .elementor-widget-image img { object-fit: cover; aspect-ratio: 3/2; width: 100%; height: 100%; display: block; transition: all 0.5s; } .about-hkb-listbox a:hover .elementor-widget-image img { transform: scale(1.1); } .about-hkb-listbox .elementor-icon-box-title, .about-hkb-listbox .elementor-heading-title, .about-hkb-listbox .elementor-widget-text-editor p, .icon-box-hover .elementor-icon-box-title, .icon-box-hover .elementor-icon-box-icon svg path, .about-hkb-listbox .elementor-icon-box-icon svg path { transition: all 0.3s; } .about-hkb-listbox a:hover .elementor-icon-box-title, .about-hkb-listbox a:hover .elementor-heading-title, .about-hkb-listbox a:hover .elementor-widget-text-editor p, .icon-box-hover:hover .elementor-icon-box-title { color: var(--clr-blue-60) !important; } .about-hkb-listbox a:hover .elementor-icon-box-icon svg path, .icon-box-hover:hover .elementor-icon-box-icon svg path { fill: var(--clr-blue-60) !important; } .icon-box-hover .elementor-icon-box-content, .about-hkb-listbox .elementor-icon-box-content { display: flex; align-items: center; } .icon-box-hover .gotham-medium, .gotham-medium * { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-weight: 500 !important; } .gotham-regular, .gotham-regular * { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-weight: 400 !important; } /* Restore icon fonts */ .fa, .fas, .far, .fab, .fal, .fad, [class^="fa-"], [class*=" fa-"], .dashicons, .dashicons-before::before, .eicon, [class^="eicon-"], .woocommerce-icon, span.onsale { font-family: inherit !important; } ul { list-style: none !important; padding: 0 !important; } .hkb-inner { max-width: 100%; margin: 0 auto; width: 100%; } .hkb-filter__checkbox-label:focus-within .hkb-filter__checkbox-custom { border-color: var(--clr-blue-80); } .gform_wrapper div.cta-dark-radial-out { transition: var(--transition); } .gform_wrapper div.cta-dark-radial-out.is-focused { box-shadow: 0px 0px 0px 3px var(--clr-purple-50); border-color: var(--clr-blue-80); } .element-top-24 { margin-top: 18px; } .element-top-40 { margin-top: 40px; } .added_to_cart.wc-forward { display: none !important; } .stock { margin-bottom: 0 !important; margin-top: 12px !important; font-size: var(--fs-16) !important; font-weight: 300; line-height: var(--lh-26) !important; color: var(--clr-blue-100) !important; } .site-main { max-width: 100% !important; padding: 0 !important; } .hkb-container { padding: 0 40px !important; } .hkb-container section { padding: 80px 0; } .section-title { margin: 0 !important; } .site-layout { display: grid; grid-template-columns: 120px 1fr; } .main-area { min-width: 0; overflow: clip; } .post-type-archive-product .main-area, .tax-product_cat .main-area, .woocommerce-checkout .main-area { overflow: visible !important; } .woocommerce-checkout .site-footer { display: none !important; } .woocommerce-NoticeGroup-checkout, .woocommerce-error { display: none !important; } .hkb-field-error { font-size: var(--fs-12); line-height: var(--lh-168); color: #AE0C00; margin-top: 8px; display: block; } .sidebar-header { padding: 28px 20px; display: flex; justify-content: space-between; flex-direction: column; align-items: center; position: sticky; top: 0; background-color: white; height: 100vh; } .top-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 40px; overflow: hidden; background-color: white; position: sticky; top: 0; z-index: 999; } .top-header ul { display: flex; align-items: center; gap: 28px; white-space: nowrap; flex-wrap: nowrap; width: max-content; padding-right: 16px !important; } /* WP admin bar offset — đẩy header xuống dưới admin bar */ body.admin-bar .mobile-header, body.admin-bar .top-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .mobile-header, body.admin-bar .top-header { top: 46px; } } .top-header ul li { line-height: normal; } .top-header ul li a { font-size: var(--fs-14); color: var(--clr-blue-60); font-weight: 300; line-height: var(--lh-medium); white-space: nowrap; text-decoration: none; transition: color 0.2s ease, text-shadow 0.15s ease; } .top-header ul li a:hover, .top-header ul li.current-menu-item a { color: var(--clr-blue-100); /* Simulate bold bằng text-shadow — không shift layout */ text-shadow: 0 0 0.4px var(--clr-blue-100), 0 0 0.4px var(--clr-blue-100); } .top-header-cta { position: relative; flex-shrink: 0; display: flex; } .top-header-cta:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.98) 10%, rgba(255, 255, 255, 0) 100%); pointer-events: none; transform: translateX(-100%); } .cta-have-bg { padding: var(--cta-816); border-radius: var(--radius-large); background-color: var(--clr-blue-100); color: white !important; font-size: var(--fs-14); line-height: var(--lh-medium); transition: var(--transition); position: relative; } .btn-bg-effect { transition: var(--transition); } a.btn-contact, a.hkb-cart-btn { color: white !important; } a.hkb-cart-btn { min-height: 35px; } .btn-no-bg-effect { transition: var(--transition); } a.btn-no-bg-effect:hover { background-color: var(--clr-blue-05) !important; } /* ===== Custom Scrollbar for Shop Filter Nav ===== */ .top-nav-wrapper { position: relative; flex: 1; min-width: 0; overflow: hidden; margin-left: -3px; margin-right: -3px; } .nav-ellipsis { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; height: auto; display: flex; align-items: flex-end; background: white; padding-right: 5px; z-index: 10; } .top-nav { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 3px; cursor: grab; user-select: none; scrollbar-width: none; } .top-nav::-webkit-scrollbar { display: none; } .top-nav.is-dragging { cursor: grabbing; } .nav-arrow { position: absolute; top: 0; z-index: 10; align-items: center; justify-content: center; width: 40px; height: 100%; cursor: pointer; opacity: 1; transition: opacity 0.3s ease; display: none; } .nav-arrow--left { left: 0; justify-content: flex-start; background: linear-gradient(to right, #fff 60%, transparent); } .nav-arrow--right { right: 0; justify-content: flex-end; background: linear-gradient(to left, #fff 60%, transparent); padding-right: 10px; } .nav-arrow.is-visible { display: flex; opacity: 1; pointer-events: auto; } .nav-arrow.is-hidden { display: none; pointer-events: none; } .top-nav .menu-top-header-menu-container { display: block; } /*Sidebar Navigation*/ .sidebar-nav { position: fixed; top: 0; bottom: 0; right: 0; z-index: 9999; padding: 40px; opacity: 0; visibility: hidden; transition: all 0.2s; } .is-nav-open .sidebar-nav { opacity: 1; visibility: visible; background: rgba(0, 0, 0, 0.3); backdrop-filter: brightness(0.5); } .sidebar-toggle { width: 32px; height: 32px; align-items: center; justify-content: center; display: flex; flex-direction: column; gap: 6.5px; cursor: pointer; background: none; border: none; padding: 0; } /* ===== LEVEL 2 (data-depth="1") HOVER COLOR: #E1E1EC ===== */ .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-item:not(.has-children):hover, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-group-list li:hover, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-nav-item:not(.has-children):hover { background-color: #E1E1EC; } .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-item.has-children:has(> .sidebar-nav-link:hover) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-item.has-children:has(> .sidebar-nav-link:focus-visible) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-nav-item.has-children:has(> .sidebar-nav-link:hover) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-nav-item.has-children:has(> .sidebar-nav-link:focus-visible) > .sidebar-nav-link { background-color: #E1E1EC; } .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:hover) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:focus-visible) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:hover) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="1"] .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:focus-visible) > .sidebar-nav-chevron { background-color: #E1E1EC; } /* ===== LEVEL 3 (data-depth="2") HOVER COLOR: #C5C2E1 ===== */ .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-item:not(.has-children):hover, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-group-list li:hover, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-nav-item:not(.has-children):hover { background-color: #C5C2E1; } .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-item.has-children:has(> .sidebar-nav-link:hover) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-item.has-children:has(> .sidebar-nav-link:focus-visible) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-nav-item.has-children:has(> .sidebar-nav-link:hover) > .sidebar-nav-link, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-nav-item.has-children:has(> .sidebar-nav-link:focus-visible) > .sidebar-nav-link { background-color: #C5C2E1; } .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:hover) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:focus-visible) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:hover) > .sidebar-nav-chevron, .sidebar-nav .sidebar-nav-col[data-depth="2"] .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:focus-visible) > .sidebar-nav-chevron { background-color: #C5C2E1; } .sidebar-toggle span { width: 100%; height: 1px; background-color: var(--clr-blue-100); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; transform-origin: center; } .sidebar-header.is-open .sidebar-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .sidebar-header.is-open .sidebar-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } .sidebar-header.is-open .sidebar-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .mobile-header.is-open .mobile-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .mobile-header.is-open .mobile-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-header.is-open .mobile-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .sidebar-icons { display: flex; flex-direction: column; gap: 36px; } .sidebar-icon-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .single-event button.custom-button-btn { box-shadow: 0px 2px 12px 0px #2116501A !important; color: #211650; background-color: #FFFFFF99 !important; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 100%; } .single-event button.custom-button-btn:hover { background-color: #FFFFFF !important; } .sidebar-icon-item span { font-size: var(--fs-12); font-weight: 300; line-height: var(--lh-168); color: var(--clr-blue-100); text-decoration: none; } .sidebar-whats-on-icon, .sidebar-donate-icon { display: block; color: var(--clr-blue-100); transition: color 0.2s ease; } .sidebar-icon-item span { transition: color 0.2s ease; } .sidebar-icon-item:hover span, .sidebar-icon-item:hover .sidebar-whats-on-icon, .sidebar-icon-item:hover .sidebar-donate-icon { color: #7A7396; } .sidebar-lang { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 16px; background-color: var(--clr-neutral-05); border-radius: var(--radius-large); min-width: 65px; } .sidebar-nav-lang.mobile-only .sidebar-lang { width: fit-content; } .sidebar-lang span { font-size: var(--fs-12); line-height: var(--lh-168); color: var(--clr-blue-100); font-weight: 300; } input::placeholder { color: white; } .mobile-header { display: none; } .shop-home-banner .banner-portrait { display: none; } .shop-home-banner .banner-landscape { display: block; width: 100%; } .shop-home-section .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .shop-home-section .section-title { font-size: var(--fs-heading-large); line-height: var(--lh-435); letter-spacing: 0.5px; } .shop-home-section .product-name, .shop-home-section .product-price, .shop-home-section .collection-name { margin: 0 !important; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: var(--fs-16); line-height: var(--lh-26); color: var(--clr-blue-100); font-weight: 400 !important; display: block; transition: var(--transition); } .product-card:hover .product-name { color: var(--clr-blue-60); } .shop-home-section .collection-name { margin-top: 10px !important; transition: var(--transition); } .collection-card:hover .collection-name { color: var(--clr-blue-60); } .shop-home-section .product-price { font-weight: 500 !important; } .shop-home-section .product-price span { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } .shop-home-section .section-nav { display: flex; align-items: center; gap: 28px; } .shop-home-section .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .shop-home-section .product-name { margin: 10px 0 2px !important; } .swiper-btn { cursor: pointer; display: flex; padding: 0 !important; outline: 0 !important; border: 0 !important; border-radius: 2px; background-color: transparent !important; } .swiper-btn svg path { transition: var(--transition); } .swiper-btn:hover svg path { fill: var(--clr-blue-60); } .swiper-btn.is-disabled { pointer-events: none; } .swiper-btn.is-disabled svg path { fill: var(--clr-neutral-60); } .cta-no-bg { padding: var(--cta-816); border-radius: var(--radius-large); border: 1px solid var(--clr-blue-80); font-size: var(--fs-14); line-height: var(--lh-medium); text-transform: capitalize; color: var(--clr-blue-100); } .new-products-footer { display: flex; justify-content: center; margin-top: 40px; } .collection-image, .product-image { border-radius: 2px; border: 1px solid var(--clr-neutral-05); overflow: hidden; } .product-image img { aspect-ratio: 3/4; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .collection-image img { aspect-ratio: 1/1; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .product-card:hover .product-image img { transform: scale(1.2); } .collection-card:hover .collection-image img { transform: scale(1.2); } .shop-home-section.shop-home-enquiries { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; border-radius: 2px; padding: 100px 73.5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; min-width: 800px; } .footer-newsletter-bg:has(.shop-home-enquiries):before { content: ''; position: absolute; inset: 0; background: #00000033; z-index: 2; } .footer-newsletter-bg.no-photo { display: flex; justify-content: center; align-items: center; /* padding: 80px 0; */ background: #fff; } .footer-newsletter-bg.no-photo:before { display: none; } .footer-newsletter-bg.no-photo .shop-home-section.shop-home-enquiries { position: relative; top: auto; left: auto; transform: none; } .footer-newsletter-bg.no-photo .shop-home-section.shop-home-enquiries { position: relative; top: auto; left: auto; transform: none; width: 100%; margin: auto; display: block; max-width: 1400px; padding-right: 40px !important; padding-left: 40px !important; } .footer-newsletter-bg.no-photo .shop-home-section.shop-home-enquiries .hkb-inner { background-color: #F4F3F6; padding: 100px 73.5px; border-radius: 4px; } .enquiries-title { font-size: var(--fs-heading-xlarge); line-height: var(--lh-55); color: var(--clr-blue-100); margin: 0 0 20px 0 !important; text-align: center; } .enquiries-actions { display: flex; align-items: center; justify-content: center; color: var(--clr-blue-100); letter-spacing: 0.4px; gap: 20px; } .enquiries-desc { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: var(--fs-16); line-height: var(--lh-26); color: var(--clr-blue-100); margin: 0 auto 40px !important; text-align: center; /* max-width: 500px; */ } .enquiries-actions a { font-size: var(--fs-18); line-height: var(--lh-252); min-width: 200px; padding: 10px 28px !important; text-align: center; } /*Footer*/ .site-footer { max-width: 100% !important; padding: 0 !important; background-color: var(--clr-blue-100); } .footer-mobile { display: none; } .footer-newsletter-bg img { width: 100%; height: 100%; display: block; will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; } .footer-newsletter-inner.hkb-container { padding: 80px 80px 0 80px !important; background-color: var(--clr-blue-100); } .footer-desktop.hkb-container { padding: 0 !important; background-color: var(--clr-blue-100); } .footer-desktop.hkb-container>.hkb-padding-section { padding: 100px 80px 100px 80px !important; } .footer-desktop.hkb-container .hkb-inner { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 70px; } .footer-desktop.hkb-container .footer-bottom .hkb-inner { display: block; } .footer-newsletter-inner.hkb-container .hkb-inner { display: grid; grid-template-columns: 1.55fr 1fr; grid-gap: 80px; align-items: center; } .footer-bottom { padding: 40px 80px !important; background-color: white; } .footer-bottom-credits p { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: var(--fs-10); line-height: var(--lh-14); color: var(--clr-blue-100); } .footer-bottom-credits p:not(:last-child) { margin-bottom: 8px !important; } .footer-bottom-logos { display: flex; align-items: center; justify-content: space-between; gap: 28px; } .footer-bottom-end { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; } .footer-legal-menu { display: flex; align-items: center; gap: 24px; } .footer-legal-menu a { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; color: var(--clr-blue-100); font-size: var(--fs-10); line-height: var(--lh-14); } .footer-bottom-end .footer-bottom-copyright { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: var(--fs-10); line-height: var(--lh-14); color: var(--clr-blue-100); } .footer-bottom-end .footer-bottom-copyright p { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } .footer-bottom-inner.hkb-container { display: grid; grid-template-columns: 1.55fr auto; grid-gap: 40px; padding: 0 !important; } .footer-newsletter-inner .footer-newsletter-text { margin-bottom: 0 !important; font-size: var(--fs-heading-large); line-height: var(--lh-435); letter-spacing: 0.5px; color: white; } .footer-menu>li>.footer-menu-heading, .footer-menu>li>a { display: block; font-size: var(--fs-14); line-height: var(--lh-168); font-weight: 400; text-transform: uppercase; margin-bottom: 12px; color: white; } .footer-menu>li:first-child>.footer-menu-heading, .footer-menu>li:first-child>a, .footer-menu>li.menu-depth-0>a { display: block; font-size: var(--fs-14); line-height: var(--lh-168); font-weight: 400; text-transform: uppercase; margin-bottom: 24px; color: white; } .footer-menu .sub-menu>li.menu-item-has-children>span.footer-menu-heading { opacity: 0.7; } .footer-menu>li>a[href]:not([href=""]):not([href="#"]) { pointer-events: auto; } /* Sub-menu links */ .footer-menu .sub-menu { list-style: none; padding: 0; margin: 0 0 8px 0; } .footer-menu .sub-menu>li:not(:last-child) { margin-bottom: 6px; } .footer-menu .sub-menu>li>a, .footer-menu .sub-menu>li>span { display: block; font-size: var(--fs-12); line-height: var(--lh-168); font-weight: 300; margin-bottom: 6px; color: white; text-decoration: none; } .item-opacity .footer-menu-heading { opacity: 0.7; } .footer-menu li a:hover { text-decoration: underline; text-underline-offset: 2px; } .footer-menu .sub-menu>li:not(:last-child) a { margin-bottom: 0; } .footer-menu .sub-menu>li>a.footer-menu-heading, .footer-menu .sub-menu>li.menu-item-has-children>a, .footer-menu .sub-menu>li.menu-item-has-children>span { display: block; font-size: var(--fs-12); line-height: var(--lh-168); font-weight: 400; text-transform: uppercase; color: white; margin-top: 40px; margin-bottom: 12px; } .footer-menu .sub-menu .sub-menu>li>a { font-size: var(--fs-12); line-height: var(--lh-168); font-weight: 300; color: white !important; pointer-events: auto; } .footer-menu .sub-menu .sub-menu>li>a:hover { text-decoration: underline; text-underline-offset: 2px; } .footer-sub-heading>span { font-size: var(--fs-12); line-height: var(--lh-168); font-weight: 400; text-transform: uppercase; color: white !important; } .light-mode .footer-sub-heading>span { color: var(--clr-blue-60) !important; } .footer-menu .menu-item-has-children { margin-top: 40px; } .footer-menu .menu-item-has-children:first-child, .footer-menu .menu-item-has-children.item-no-margin, .footer-menu .menu-item-has-children.item-no-margin>a, .footer-menu .menu-item-has-children.item-no-margin>span { margin-top: 0 !important; } .footer-menu>li.menu-depth-0:not(:first-child):not(.menu-item-has-children)>a { margin-top: 24px; margin-bottom: 0; } .footer-mobile-header, .footer-mobile-title { display: block; font-size: var(--fs-14); line-height: var(--lh-168); text-transform: uppercase; color: white !important; } .light-mode .footer-mobile-header, .light-mode .footer-mobile-title { color: var(--clr-blue-80) !important; } .footer-accordion-icon-svg { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .footer-mobile-header { display: flex; align-items: center; justify-content: space-between; } .footer-mobile-item:not(:last-child) { margin-bottom: 40px; } .footer-accordion-body li a { display: block; font-size: var(--fs-12); line-height: var(--lh-168); margin-bottom: 6px; color: white; text-decoration: none; } .light-mode .footer-accordion-body li a { color: var(--clr-blue-80) !important; } .footer-accordion-body li:last-child a { margin-bottom: 0px; } .footer-accordion-body .footer-sub-menu { margin-top: 20px; } .footer-mobile-social { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; } .footer-mobile-social a { font-size: var(--fs-12); line-height: var(--lh-168); color: white; } .light-mode .footer-mobile-social a { color: var(--clr-blue-80); } .bg-mobile { display: none !important; } .footer-mobile-item .icon-minus { display: none; } .footer-mobile-item.is-open .icon-plus { display: none; } .footer-mobile-item.is-open .icon-minus { display: flex; align-items: center; } /*Gform*/ .gform_wrapper .gform_button { font-size: var(--fs-12) !important; line-height: var(--lh-168) !important; color: white !important; border-radius: var(--radius-large) !important; border: 1px solid white !important; background-color: transparent !important; padding: 6px 14px !important; transition: var(--transition); } input:not([type="submit"]) { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } .footer-newsletter-form .gform_wrapper input:not([type="submit"]) { background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--clr-neutral-10) !important; padding: 0 0 16px 0 !important; color: white !important; border-radius: 0 !important; font-size: var(--fs-14) !important; line-height: var(--lh-168) !important; } .light-mode .footer-newsletter-form .gform_wrapper.gform_validation_error input { border-color: #AE0C00 !important; } .light-mode .footer-newsletter-form .gform_wrapper.gform_validation_error .gfield_validation_message { color: #AE0C00 !important; } .site-footer:not(.light-mode) .footer-newsletter-form .gform_wrapper.gform_validation_error .gfield_validation_message { color: #E3AAA6 !important; } .site-footer:not(.light-mode) .footer-newsletter-form .gform_wrapper.gform_validation_error input { border-color: #E3AAA6 !important; } .gform_wrapper input { font-size: var(--fs-16) !important; outline: 0 !important; box-shadow: none !important; } .gform_validation_errors { display: none !important; } .gfield_validation_message { color: white !important; font-size: var(--fs-12) !important; line-height: var(--lh-168) !important; } #gform_fields_3 .gfield_validation_message { color: #AE0C00 !important; } .gform_footer { margin-top: 16px !important; } .gf-custom-select { position: relative; display: block; flex: 1; } .gf-custom-select .hkb-custom-select__trigger { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--clr-neutral-10); border-radius: 8px; cursor: pointer; background: white; user-select: none; font-size: 14px; line-height: normal; color: var(--clr-blue-100); transition: var(--transition); min-height: 40px; } .gf-custom-select .hkb-custom-select__text.is-placeholder { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; color: var(--clr-neutral-60); } .gf-custom-select .hkb-custom-select__arrow { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: var(--clr-blue-100); mask-image: url(../img/arrow-down.svg); -webkit-mask-image: url(../img/arrow-down.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .gf-custom-select.is-open .hkb-custom-select__arrow { transform: rotateX(-180deg); } .gf-custom-select .hkb-custom-select__list { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background-color: white; border: 1px solid var(--clr-neutral-15); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 200; padding: 8px; } .gf-custom-select.is-open .hkb-custom-select__list { display: flex; flex-direction: column; gap: 8px; } .gf-custom-select .hkb-custom-select__option { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; padding: 7.5px 8px; font-size: 14px; line-height: var(--lh-21); color: var(--clr-blue-100); cursor: pointer; border-radius: 8px; transition: var(--transition); display: flex; align-items: center; justify-content: space-between; } .gf-custom-select .hkb-custom-select__option:hover { background: var(--clr-blue-05); } .gf-custom-select .hkb-custom-select__option.is-selected { background: var(--clr-blue-05); } .gf-custom-select svg, .gf-custom-select svg path { all: revert-layer !important; display: inline-block !important; width: 12px !important; height: 9px !important; fill: #4D4573 !important; } #gform_2 input:not([type="submit"]), #gform_2 textarea { border-radius: 8px !important; border-color: var(--clr-neutral-10) !important; font-size: 14px !important; line-height: var(--lh-21) !important; transition: var(--transition); box-shadow: none !important; height: 40px; } #gform_2 input:not([type="submit"]) { min-height: 40px; } .gform-body.gform_body *:not(.gfield_validation_message) { font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } .gform_wrapper input::placeholder, .gform_wrapper textarea::placeholder { color: var(--clr-neutral-60) !important; opacity: 1 !important; } .gf-consent .gfield_required { display: none !important; } .gform_wrapper #gform_1 input::placeholder { color: var(--clr-blue-30) !important; } .light-mode .gform_wrapper #gform_1 input::placeholder { color: var(--clr-blue-80) !important; } .gform-theme--foundation .gform_fields { row-gap: 12px !important; } #gform_1 { position: relative; } .light-mode .gfield_validation_message { color: #AE0C00 !important; } .light-mode .footer-newsletter-form .gform_wrapper input:not([type="submit"]) { color: var(--clr-blue-100) !important; } .footer-newsletter #gform_1 .gform_footer { position: absolute !important; margin: 0 !important; top: -8px; right: 0; } .footer-newsletter #gform_1 .gform_footer .cta-dark-radial-out::before { display: none !important; } /* Default — white arrow */ .footer-newsletter .gform_footer::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; width: 16px; height: 16px; background-image: url('../img/submit-arrow-right-white.svg'); background-repeat: no-repeat; background-size: contain; } /* Light mode — blue arrow */ .site-footer.light-mode .footer-newsletter .gform_footer::after { background-image: url('../img/submit-arrow-right-blue.svg'); } .footer-newsletter #gform_1 .gform_footer :is(input, button)[type="submit"] { padding: 0 28px 0 0 !important; border: 0 !important; font-size: var(--fs-14) !important; line-height: var(--lh-168) !important; border-radius: 2px !important; } .footer-newsletter #gform_1 .gform_footer :is(input, button)[type="submit"]:focus-visible { box-shadow: 0px 0px 0px 3px var(--clr-purple-50) !important; } .footer-newsletter #gform_1 .gform_footer .cta-dark-radial-out { overflow: visible !important; background-color: transparent !important; } :is(input, button)[type="submit"] { box-shadow: none !important; } .light-mode .footer-newsletter #gform_1 .gform_footer :is(input, button)[type="submit"] { color: inherit !important; } #gform_2 :is(input, button)[type="submit"], #gform_15 :is(input, button)[type="submit"] { padding: 10px 20px !important; min-width: 200px; border-radius: var(--radius-large) !important; color: white !important; font-size: var(--fs-18) !important; line-height: var(--lh-252) !important; transition: var(--transition) !important; position: relative !important; font-weight: 400 !important; border: 0 !important; } #gform_2 .gform_footer { margin-top: 40px !important; } #gform_2 .gfield_validation_message { font-size: var(--fs-12) !important; line-height: var(--lh-168) !important; color: #AE0C00 !important; margin-top: 8px !important; display: block !important; } #gform_2 .gfield_error input { border-color: #D40700 !important; } .custom-select-dropdown select { display: none !important; } /* ===== RADIAL OUT BUTTON ===== */ .cta-dark-radial-out, .cta-light-radial-out { position: relative !important; overflow: hidden !important; border-radius: 100px !important; z-index: 0 !important; } .cta-dark-radial-out span, .cta-light-radial-out span { position: relative; z-index: 1; pointer-events: none; } .cta-dark-radial-out::before, .cta-light-radial-out::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 200%; aspect-ratio: 1 / 1; border-radius: 50%; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: -1; } .cta-dark-radial-out:hover::before, .cta-light-radial-out:hover::before { transform: translate(-50%, -50%) scale(1); } /* ===== DARK VARIANT ===== */ .cta-dark-radial-out { background-color: var(--clr-blue-100) !important; } .cta-dark-radial-out::before { background-color: var(--clr-blue-80); } /* ===== LIGHT VARIANT ===== */ .cta-light-radial-out { color: var(--clr-blue-100); } .cta-light-radial-out::before { background-color: var(--clr-blue-05); } .hkb-track-result__notice { margin: 40px 0 0 0 !important; } .hkb-transparent-header .sidebar-logo { transform: scale(2.2); transform-origin: top; padding-left: 20px; transition: all 0.3s; } .hkb-transparent-header .sidebar-header.is-open .sidebar-logo { transform: scale(1); padding-left: 0px; } .hkb-transparent-header .sidebar-logo.is-transform { transform: scale(1); padding-left: 0px; } .hkb-transparent-header .site-footer { padding-left: 120px !important; } /*Light mode Footer*/ .light-mode .footer-newsletter-inner.hkb-container { background-color: var(--clr-neutral-05); } .light-mode .footer-desktop.hkb-container { background-color: var(--clr-neutral-05); } .light-mode .footer-newsletter-inner .footer-newsletter-text { color: var(--clr-blue-100); } .light-mode .footer-menu>li:first-child>.footer-menu-heading, .light-mode .footer-menu>li:first-child>a { color: var(--clr-blue-80); } .light-mode .footer-menu .sub-menu>li>a, .light-mode .footer-menu .sub-menu>li>span { color: var(--clr-blue-80); } .light-mode .footer-menu .sub-menu>li>.footer-menu-heading, .light-mode .light-modefooter-menu .sub-menu>li.menu-item-has-children>a, .light-mode .footer-menu .sub-menu>li.menu-item-has-children>span { color: var(--clr-blue-60); opacity: 1; } .light-mode .footer-menu>li>.footer-menu-heading, .light-mode .footer-menu>li>a { color: var(--clr-blue-80); } .light-mode .footer-menu .sub-menu .sub-menu>li>a { color: var(--clr-blue-80) !important; } .light-mode .footer-mobile { background-color: var(--clr-neutral-05); } /* ===== Event Visual ===== */ .event-visual { position: relative; width: 100%; height: 100svh; overflow: hidden; display: flex; background-image: var(--bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; } /* HKB-549: make the homepage hero clickable while retaining its Explore button. */ .event-visual__whole-link { position: absolute; inset: 0; z-index: 9; } .event-visual__whole-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } .event-visual--linked .event-visual__bar { pointer-events: none; } .event-visual--linked .event-visual__explore { pointer-events: auto; } .event-visual__image { position: absolute; inset: 0; width: 100%; height: 100%; /* Flex aligns the within the layer when image_height < 100% */ display: flex; justify-content: var(--img-justify, center); align-items: var(--img-align, center); } .event-visual__image img { width: 100%; height: var(--img-height, 100%) !important; object-fit: var(--img-fit, cover); object-position: var(--img-position, center); display: block; max-width: 100vw; } .event-visual__titles { position: absolute; inset: 0; display: flex; /* Below the image layer (default z-index 2) and the bottom bar (z-index 10) */ z-index: 1; /* HKB-117: pixel-level nudge applied on top of the preset position */ transform: translate(var(--off-x, 0px), var(--off-y, 0px)); } .event-visual__title-text { margin: 0; color: white; font-weight: 300 !important; text-transform: uppercase; text-align: center; letter-spacing: 5px; /* Each line is a flex item — column stacks them, inline lays them on one row */ display: flex; flex-direction: column; align-items: center; justify-content: center; } /* HKB-113: inline layout — lines flow on a single row */ .event-visual__title-text.layout-d-inline { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 20px; } /* HKB-116: per-line font size; falls back to the previous default (140/1920) */ .event-visual__title-line { margin: 0; line-height: 100%; font-size: var(--fs-d, 7.29vw); } .event-visual.pos-d-center-center .event-visual__titles { align-items: center; justify-content: center; } .event-visual.pos-d-left-center .event-visual__titles { align-items: center; justify-content: flex-start; } .event-visual.pos-d-right-center .event-visual__titles { align-items: center; justify-content: flex-end; } .event-visual.pos-d-top-center .event-visual__titles { align-items: flex-start; justify-content: center; padding-top: var(--title-offset-top, 120px); } .event-visual.pos-d-bottom-center .event-visual__titles { align-items: flex-end; justify-content: center; } .event-visual__bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: space-between; padding: 60px 40px 28px 40px; font-size: var(--fs-16); line-height: var(--lh-168); color: white; padding-left: 160px; } .hide-mobile { display: block !important; } .hide-desktop { display: none !important; } .event-visual__bar-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); z-index: 0; } .event-visual__bar-left, .event-visual__bar-date { position: relative; z-index: 1; } .event-visual__bar-content { width: 100%; } .event-visual__bar-left { display: flex; flex-direction: column; gap: 8px; } .event-visual__bar-subtitle, .event-visual__bar-top-subtitle { font-size: var(--fs-20); line-height: var(--lh-26); color: white; text-shadow: 0 0 6px rgba(0, 0, 0, 0.75); } .event-visual__bar-top-subtitle, .event-visual__bar-date { font-size: var(--fs-26); line-height: 35px; text-shadow: 0 0 6px rgba(0, 0, 0, 0.75); } .event-visual__bar-name { font-size: var(--fs-heading-xlarge); line-height: var(--lh-55); text-shadow: 0 0 6px rgba(0, 0, 0, 0.75); /* Each name line is a flex item — column stacks them, inline = one row */ display: inline-flex; flex-direction: column; } /* HKB-113: inline layout — name parts flow on a single row */ .event-visual__bar-name.namelayout-d-inline { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px; } /* HKB-116: per-line font size; inherits the heading size when left empty */ .event-visual__bar-name-line { font-size: var(--bar-fs-d, inherit); line-height: 1.1; } .event-visual__bar-top-subtitle { margin-bottom: 8px; position: relative; } .event-visual__bar-subtitle { font-size: var(--fs-18); line-height: var(--lh-252); text-transform: inherit; } .event-visual__bar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .swiper-btn svg { width: 20px; height: 20px; } .hero-visual-wrap { width: 100%; height: 100svh; overflow: hidden; scroll-snap-type: none; } .hero-visual-wrap .swiper-wrapper { height: 100%; } .footer-newsletter { overflow: hidden; } .footer-newsletter-bg { position: relative; overflow: hidden; } /* ============================================================ GLOBAL PARALLAX HELPER (.hkb-parallax) Add this class to any image container (e.g. Elementor Image widget via Advanced → CSS Classes). JS in main.js drives the scroll-based translateY on every inside. ============================================================ */ .hkb-parallax { position: relative; overflow: hidden; max-height: 860px; } .hkb-parallax img { display: block; will-change: transform; backface-visibility: hidden; } /* ============================================================ TRANSPARENT HEADER LAYOUT ============================================================ */ .event-visual__bar-title-row { display: flex; align-items: center; gap: 20px; } .event-visual__explore { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 999px; color: #fff !important; font-size: 14px; line-height: 1; text-decoration: none; text-shadow: none; font-weight: 400; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; box-shadow: 0 0 4px rgba(0, 0, 0, 0.75) !important; } .gotham-regular strong,.gotham-regular b { font-weight: bold !important; } .event-visual__explore:hover, .event-visual__explore:focus-visible { background: #fff; border-color: #fff; color: var(--clr-blue-100) !important; } .event-visual__explore--mobile { display: none; } .event-visual__mobile-action-row { display: contents; } .hkb-transparent-header .site-layout { grid-template-columns: 1fr; } .hkb-transparent-header .sidebar-header { max-width: 120px; background-color: transparent; position: fixed !important; z-index: 99; } .hkb-transparent-header .sidebar-header .sidebar-logo a svg { width: 100%; } .hkb-transparent-header .sidebar-lang.is-white { background-color: transparent; outline: 1px solid white; } .hkb-transparent-header .sidebar-header .sidebar-lang.is-white span { color: white; } .hkb-transparent-header .sidebar-header .sidebar-icon-item.is-white span { color: white; } .hkb-transparent-header .mobile-header { position: fixed !important; width: 100% !important; background-color: transparent !important; } /* Offset the titles past the 120px desktop sidebar header so they stay centred in the visible area (reset below 1279px where the sidebar is gone) */ .hkb-transparent-header .event-visual__titles { padding-left: 80px; } /* Mặc định dark */ .sidebar-header .logo-white { display: none; } .sidebar-header .logo-dark { display: block; } .sidebar-header .icon-white { display: none; } .sidebar-header .icon-dark { display: block; } .sidebar-header .arrow-white { display: none; } .sidebar-header .arrow-dark { display: inline-block; } .sidebar-header .sidebar-icon-item span { color: var(--clr-blue-100); } .sidebar-header .sidebar-lang span { color: var(--clr-blue-100); } .sidebar-header .sidebar-toggle span { background-color: var(--clr-blue-100); } .sidebar-logo.is-white .logo-white { display: block; } .sidebar-icon-item.is-white .sidebar-whats-on-icon, .sidebar-icon-item.is-white .sidebar-donate-icon { color: #fff; } .sidebar-icon-item.is-white:hover span, .sidebar-icon-item.is-white:hover .sidebar-whats-on-icon, .sidebar-icon-item.is-white:hover .sidebar-donate-icon { color: #7A7396; } .sidebar-logo.is-white .logo-dark { display: none; } .hkb-transparent-header .sidebar-toggle:not(.mobile-toggle).is-white span { background-color: white; } .sidebar-icon-item.is-white .icon-white { display: block; } .sidebar-icon-item.is-white .icon-dark { display: none; } .sidebar-icon-item.is-white span { color: white; } .sidebar-header .sidebar-icon-item:hover span, .sidebar-icons-mobile .sidebar-icon-item:hover span, .hkb-transparent-header .sidebar-header .sidebar-icon-item.is-white:hover span, .sidebar-icon-item.is-white:hover span { color: #7A7396; } .sidebar-lang.is-white span { color: white; } .sidebar-lang.is-white .arrow-white { display: inline-block; } .sidebar-lang.is-white .arrow-dark { display: none; } .hkb-transparent-header .site-footer { background-color: white !important; } .gform_wrapper form#gform_2 .gform-body .gform_fields input:focus-visible, .gform_wrapper form#gform_2 .gform-body .gform_fields textarea:focus-visible, .gform_wrapper form .gform_footer :is(input, button)[type="submit"]:focus-visible { box-shadow: 0px 0px 0px 3px var(--clr-purple-50) !important; } body:not(.hkb-transparent-header) .logo-mobile-white, body:not(.hkb-transparent-header) .arrow-white { display: none; } .event-wrapper { padding-left: 120px; } *:focus-within { box-shadow: none !important; } *:focus-visible { box-shadow: 0px 0px 0px 3px var(--clr-purple-50) !important; outline: none !important; border-radius: 2px; } /* ========================================================================= Sidebar Nav (multi-level columns, arbitrary depth) ========================================================================= */ .sidebar-nav { padding: 0; width: auto; pointer-events: none; } .sidebar-nav .sidebar-nav-cols { display: flex; align-items: stretch; height: 100%; pointer-events: auto; } .sidebar-nav .sidebar-nav-panels { display: none; } .sidebar-nav .sidebar-nav-col { background: white; height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; min-width: 320px; width: 320px; padding: 80px 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 1; } .sidebar-nav .sidebar-nav-col[data-depth="0"] { background-color: var(--clr-blue-03); padding: 80px 0 0; } .sidebar-nav .sidebar-nav-col[data-depth="1"] { background-color: var(--clr-purple-10); justify-content: normal; } .sidebar-nav .sidebar-nav-col[data-depth="2"] { background-color: var(--clr-purple-30); justify-content: normal; } .sidebar-nav .sidebar-nav-col.is-entering { opacity: 0; } .sidebar-nav .sidebar-nav-list { list-style: none; padding: 0; margin: 0; } .sidebar-nav .sidebar-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 30px 20px 28px; transition: var(--transition); } .sidebar-nav .sidebar-nav-link { color: var(--clr-blue-100); font-size: var(--fs-18); line-height: var(--lh-252); text-decoration: none; } .sidebar-nav:has(.sidebar-nav-item.is-active) .sidebar-nav-item:not(.is-active), .sidebar-sub-list:has(.sidebar-sub-item.is-active) .sidebar-sub-item:not(.is-active) { opacity: 0.5; } .sidebar-nav .sidebar-nav-chevron { width: 10.8px; height: 10.8px; flex-shrink: 0; display: inline-block; background: url('../img/chevron-menu-right.svg') center/contain no-repeat; } .sidebar-nav .sidebar-nav-item.has-children, .sidebar-nav .sidebar-sub-item.has-children { cursor: pointer; } .sidebar-nav .sidebar-nav-item.has-children, .sidebar-nav .sidebar-sub-item.has-children { gap: 0; padding: 0; } .sidebar-nav .sidebar-nav-item.has-children>.sidebar-nav-link, .sidebar-nav .sidebar-sub-item.has-children>.sidebar-nav-link { flex: 1; display: flex; align-items: center; min-height: 65px; padding: 20px 28px; transition: background-color 0.2s ease; } .sidebar-nav .sidebar-nav-item.has-children>.sidebar-nav-chevron, .sidebar-nav .sidebar-sub-item.has-children>.sidebar-nav-chevron { width: 65px; height: 65px; background-size: 10.8px 10.8px; transition: background-color 0.2s ease; } .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-link:hover)>.sidebar-nav-link, .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-link:focus-visible)>.sidebar-nav-link, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-link:hover)>.sidebar-nav-link, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-link:focus-visible)>.sidebar-nav-link { background: rgba(33, 22, 80, 0.07); } .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-link:hover)>.sidebar-nav-chevron, .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-link:focus-visible)>.sidebar-nav-chevron, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-link:hover)>.sidebar-nav-chevron, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-link:focus-visible)>.sidebar-nav-chevron { background-color: rgba(33, 22, 80, 0.03); } .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:hover)>.sidebar-nav-link, .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:focus-visible)>.sidebar-nav-link, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:hover)>.sidebar-nav-link, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:focus-visible)>.sidebar-nav-link { background: rgba(33, 22, 80, 0.03); } .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:hover)>.sidebar-nav-chevron, .sidebar-nav .sidebar-nav-item.has-children:has(> .sidebar-nav-chevron:focus-visible)>.sidebar-nav-chevron, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:hover)>.sidebar-nav-chevron, .sidebar-nav .sidebar-sub-item.has-children:has(> .sidebar-nav-chevron:focus-visible)>.sidebar-nav-chevron { background-color: rgba(33, 22, 80, 0.07); } .sidebar-nav .sidebar-nav-search { margin-top: 40px; padding: 0 20px 28px 20px; order: 2; } .sidebar-nav .sidebar-nav-search form { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--clr-blue-60); } .sidebar-nav .sidebar-nav-search input[type="search"] { flex: 1; border: 0; background: transparent; font-size: var(--fs-14); line-height: var(--lh-252); border-radius: 0 !important; color: var(--clr-blue-100); padding: 12px 0 12px 8px; outline: none !important; box-shadow: none !important; } .sidebar-nav .sidebar-nav-search input[type="search"]::placeholder { color: var(--clr-blue-60); } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .sidebar-nav .sidebar-nav-search button { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--clr-blue-100); display: inline-flex; align-items: center; justify-content: center; } .sidebar-nav .sidebar-sub-list { list-style: none; padding: 0; margin: 0; } .sidebar-nav .sidebar-sub-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 30px 20px 28px; transition: background-color 0.2s ease; } .sidebar-nav .sidebar-sub-item>a, .sidebar-nav .sidebar-sub-group-list a { color: var(--clr-blue-100); font-size: var(--fs-18); line-height: var(--lh-252); text-decoration: none; } .sidebar-nav .sidebar-sub-group { padding: 40px 0 0px; } .sidebar-nav .sidebar-sub-group:first-child { padding-top: 0; } .sidebar-nav .sidebar-sub-heading { text-transform: uppercase; font-size: var(--fs-12); line-height: var(--lh-168); color: var(--clr-blue-60); padding: 20px 30px 20px 28px; } .sidebar-nav .sidebar-sub-heading .sidebar-nav-link { color: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; } .sidebar-nav .sidebar-sub-group-list { list-style: none; padding: 0; margin: 0; } .sidebar-nav .sidebar-sub-group-list li { padding: 20px 30px 20px 28px; transition: background-color 0.2s ease; } /* Make the label and its surrounding space one native navigation link. Parent items retain their separate chevron for opening the next column. */ .sidebar-nav .sidebar-nav-item:not(.has-children):has(> a.sidebar-nav-link), .sidebar-nav .sidebar-sub-item:not(.has-children):has(> a.sidebar-nav-link), .sidebar-nav .sidebar-sub-group-list li:not(.has-children):has(> a.sidebar-nav-link) { padding: 0; } .sidebar-nav .sidebar-nav-item:not(.has-children) > a.sidebar-nav-link, .sidebar-nav .sidebar-sub-item:not(.has-children) > a.sidebar-nav-link, .sidebar-nav .sidebar-sub-group-list li:not(.has-children) > a.sidebar-nav-link { display: block; flex: 1; padding: 20px 30px 20px 28px; } .sidebar-nav a.sidebar-nav-link { cursor: pointer; } .sidebar-nav .sidebar-nav-back { display: none; background: url('../img/back-arrow.svg') center/contain no-repeat; border: 0; padding: 0; width: 20px; height: 20px; cursor: pointer; position: relative; flex-shrink: 0; align-self: flex-start; background-size: 16px; transition: none !important; opacity: 1 !important; transform: none !important; } .sidebar-nav-close { position: relative; z-index: 99; background-color: var(--clr-purple-10); cursor: pointer; padding: 20px; display: none !important; } .sidebar-nav-close.background-lv-1 { background-color: var(--clr-purple-10); } .sidebar-nav-close.background-lv-2 { background-color: var(--clr-purple-30); } .sidebar-nav-close.background-lv-3 { background-color: var(--clr-purple-30); } .sidebar-nav-close-btn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .sidebar-nav-close-btn img { width: 100%; height: 100%; display: block; } .sidebar-nav-lang.mobile-only { display: none; } .sidebar-icons-mobile { display: none; } /* When the sidebar menu is open: sidebar-header gets a white background and every icon/text inside falls back to its DARK variant, regardless of any .is-white toggling that scroll/hero logic might have applied. */ .sidebar-header.is-open { background-color: white !important; } .sidebar-header.is-open .logo-dark, .sidebar-header.is-open .icon-dark { display: block !important; } .sidebar-header.is-open .logo-white, .sidebar-header.is-open .icon-white { display: none !important; } .sidebar-header.is-open .arrow-dark { display: inline-block !important; } .sidebar-header.is-open .arrow-white { display: none !important; } .sidebar-header.is-open .sidebar-icon-item span, .sidebar-header.is-open .sidebar-lang span { color: var(--clr-blue-100) !important; } .sidebar-header.is-open .sidebar-whats-on-icon, .sidebar-header.is-open .sidebar-donate-icon { color: var(--clr-blue-100) !important; } .sidebar-header.is-open .sidebar-icon-item:hover span, .sidebar-header.is-open .sidebar-icon-item:hover .sidebar-whats-on-icon, .sidebar-header.is-open .sidebar-icon-item:hover .sidebar-donate-icon { color: #7A7396 !important; } .sidebar-header.is-open .sidebar-toggle span { background-color: var(--clr-blue-100) !important; } /* ── Hide PayPal Smart Button ─────────────────────────*/ .ppc-button-wrapper, .ppcp-button-container, div[id^="ppc-button-"], div[id*="paypal-button"], .ppcp-messages, #ppc-button-ppcp-gateway, .paypal-buttons, .ppcp-smart-button, .wc-block-components-express-payment, .wc-block-cart__payment-options .wc-block-components-express-payment { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ GRAVITY FORMS — custom checkbox / radio / file upload Scoped to every GF form EXCEPT the newsletter (#gform_1) and contact (#gform_2), which already have their own bespoke styling. ════════════════════════════════════════════════════════════════════════════ */ /* ── Custom checkbox (matches checkout style) ─────────────────────────────── */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox .gchoice { position: relative; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox .gchoice:first-child { margin-top: 0; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 16px; height: 16px; margin: 0; cursor: pointer; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox .gchoice label { position: relative; display: inline-flex; align-items: center; min-height: 16px; padding-left: 26px; margin: 0 !important; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: 14px; line-height: var(--lh-21); color: var(--clr-blue-100); cursor: pointer; } /* box */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox .gchoice label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; min-width: 16px; border: 1px solid var(--clr-neutral-15); border-radius: 4px; background: white; transition: var(--transition); } /* checkmark */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox .gchoice label::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: white; -webkit-mask: url('../img/checked.svg') center / contain no-repeat; mask: url('../img/checked.svg') center / contain no-repeat; opacity: 0; transition: opacity var(--transition); } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox input[type="checkbox"]:checked+label::before { background-color: var(--clr-blue-100); border-color: var(--clr-blue-100); } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_checkbox input[type="checkbox"]:checked+label::after { opacity: 1; } /* ── Consent field — same custom checkbox look as .gfield_checkbox ────────── */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent { position: relative; } .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 16px; height: 16px; margin: 0; cursor: pointer; } .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent .gfield_consent_label { position: relative; display: block; min-height: 16px; padding-left: 26px; margin: 0 !important; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: 14px; line-height: var(--lh-21); color: var(--clr-blue-100); cursor: pointer; } /* box — anchored to the first text line so multi-line labels stay aligned */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent .gfield_consent_label::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; min-width: 16px; border: 1px solid var(--clr-neutral-15); border-radius: 4px; background: white; transition: var(--transition); } /* checkmark */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent .gfield_consent_label::after { content: ''; position: absolute; left: 3.5px; top: 5px; width: 10px; height: 10px; background-color: white; -webkit-mask: url('../img/checked.svg') center / contain no-repeat; mask: url('../img/checked.svg') center / contain no-repeat; opacity: 0; transition: opacity var(--transition); } .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent input[type="checkbox"]:checked+.gfield_consent_label::before { background-color: var(--clr-blue-100); border-color: var(--clr-blue-100); } .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_consent input[type="checkbox"]:checked+.gfield_consent_label::after { opacity: 1; } /* ── Custom radio (matches checkout style) ────────────────────────────────── */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio .gchoice { position: relative; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio .gchoice:first-child { margin-top: 0; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 16px; height: 16px; margin: 0; cursor: pointer; } .gform_wrapper .gf-group-title { font-size: var(--fs-14) !important; line-height: var(--lh-21) !important; font-weight: 500 !important; margin-bottom: 4px !important; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio .gchoice label { position: relative; display: inline-flex; align-items: center; min-height: 16px; padding-left: 26px; margin: 0 !important; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: 14px; line-height: var(--lh-21); color: var(--clr-blue-100); cursor: pointer; } /* circle */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio .gchoice label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; min-width: 16px; border: 1px solid var(--clr-blue-30); border-radius: 50%; background: white; transition: var(--transition); } /* inner dot */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio .gchoice label::after { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scale(0); width: 8px; height: 8px; border-radius: 50%; background-color: var(--clr-blue-100); transition: transform 0.2s ease; } .gform_wrapper form:not(#gform_1):not(#gform_2) .gfield_radio input[type="radio"]:checked+label::after { transform: translateY(-50%) scale(1); } /* ── File upload (matches design — bordered box, "Choose File" + label) ───── */ .hkb-file { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--clr-neutral-15); border-radius: 8px; background: white; cursor: pointer; transition: var(--transition); } .hkb-file:hover { border-color: var(--clr-blue-30); } .hkb-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; min-height: 40px; } .hkb-file input[type="file"]::file-selector-button, .hkb-file input[type="file"]::-webkit-file-upload-button { cursor: pointer; } .gf-upload-cv { margin-top: 20px; } .hkb-file__btn { position: relative; z-index: 1; pointer-events: none; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-weight: 600; font-size: 14px; line-height: var(--lh-21); color: var(--clr-blue-100); white-space: nowrap; } .hkb-file__label { position: relative; z-index: 1; pointer-events: none; flex: 1; min-width: 0; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; font-size: 14px; line-height: var(--lh-21); color: var(--clr-neutral-60); overflow: hidden; } .hkb-file.has-file .hkb-file__label { color: var(--clr-blue-100); } /* trash button — appears once a file is selected (same icon as the cart) */ .gform_fields .hkb-file__remove { position: relative; z-index: 3; display: none !important; align-items: center; justify-content: center; width: 14px !important; height: 14px !important; min-width: 14px; min-height: 14px !important; padding: 0 !important; border: none !important; border-radius: 50%; box-shadow: none !important; background-color: transparent !important; cursor: pointer; transition: var(--transition); } .hkb-file.has-file .hkb-file__remove { display: flex !important; } .hkb-file__remove img { display: block; pointer-events: none; } .elementor-widget-hkb_gallery .gallery-nav button img { width: 27px; height: 27px; } .elementor-widget-hkb_gallery .gallery-section { padding: 0; } .elementor-widget-hkb_locations .locations-section { padding: 0; } .elementor-widget-hkb_past_tour .hkb-past-tours::before { display: none; } .elementor-widget-hkb_review .review-section { padding: 0; } /* Hide GF's native label (moved into the box) and the default "Max. file size" note */ .gform_wrapper .gfield:has(.ginput_container_fileupload)>.gfield_label, .gform_wrapper .gform_fileupload_rules, .gform_wrapper .ginput_container_fileupload .gfield_description.gfield_fileupload_rules { display: none !important; } /* ── Text inputs / textarea / select — match contact form (#gform_2) look ──── */ .gform_wrapper form:not(#gform_1):not(#gform_2) input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .gform_wrapper form:not(#gform_1):not(#gform_2) textarea, .gform_wrapper form:not(#gform_1):not(#gform_2) select { border: 1px solid var(--clr-neutral-10) !important; border-radius: 8px !important; font-size: 14px !important; line-height: var(--lh-21) !important; color: var(--clr-blue-100) !important; background-color: white !important; box-shadow: none !important; outline: 0 !important; transition: var(--transition); } .gform_wrapper form:not(#gform_1):not(#gform_2) input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 40px; } /* placeholder colour to match contact form */ .gform_wrapper form:not(#gform_1):not(#gform_2) input::placeholder, .gform_wrapper form:not(#gform_1):not(#gform_2) textarea::placeholder { color: var(--clr-neutral-60) !important; opacity: 1 !important; } /* focus-visible glow — same lavender ring as the contact form */ .gform_wrapper form:not(#gform_1):not(#gform_2) .gform-body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, .gform_wrapper form:not(#gform_1):not(#gform_2) .gform-body textarea:focus-visible, .gform_wrapper form:not(#gform_1):not(#gform_2) .gf-custom-select .hkb-custom-select__trigger:focus-visible { box-shadow: 0px 0px 0px 3px var(--clr-purple-50) !important; } #gform_3 .hkb-custom-select__trigger { min-height: 40px !important; } #gform_3 .gf-group-title:not(:first-child) { margin-top: 28px !important; } .gfield_html .gf-group-title { margin-top: 28px !important; margin-bottom: 16px !important; } .gf-group-desc { margin-bottom: 0 !important; font-size: 10px !important; line-height: 14px !important; } .gf-group-desc.mt { margin-top: 28px !important; margin-bottom: 8px !important; } #gform_3 .ginput_container_consent { padding: 12px 0 !important; } #gform_3 .gform_footer { margin-top: 28px !important; } #gform_submit_button_3 { padding: 10px 28px !important; font-size: var(--fs-18) !important; line-height: var(--lh-252) !important; border: 0 !important; } #gform_3 .gfield_radio .gchoice, #gform_3 .gfield_checkbox .gchoice { padding: 12px !important; border-radius: 6px !important; border: 1px solid var(--clr-neutral-10) !important; } #gform_3 .gfield_consent_label a { color: var(--clr-blue-100) !important; text-decoration: underline !important; } /* ── Date of Birth — calendar icon before the input (dob.svg) ─────────────── */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date { position: relative; } .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date input { padding-left: 42px !important; background-image: url('../img/dob.svg'); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; } /* hide GF's default datepicker icon on the right (any flavour of trigger element) */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date>img, .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date>button, .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date .ui-datepicker-trigger, .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date [class*="datepicker-trigger"], .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date [class*="calendar"] { display: none !important; } /* native fallback — hide the right-hand indicator */ .gform_wrapper form:not(#gform_1):not(#gform_2) .ginput_container_date input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0 !important; display: none !important; } .gf-dob-field input.gform-datepicker { width: 100% !important; } .gf-dob-field .ginput_container_date:after { opacity: 0 !important; display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ jQuery UI DATEPICKER (GF date field) — site style #ui-datepicker-div is appended to ; styled globally (only the date fields use it). Width is matched to the parent input via JS (main.js). ════════════════════════════════════════════════════════════════════════════ */ #ui-datepicker-div.ui-datepicker { box-sizing: border-box; width: 17em; /* fallback — JS sets it to the input width */ margin-top: 4px; padding: 14px; background: #fff; border: 1px solid var(--clr-neutral-15); border-radius: 8px; box-shadow: 0 8px 24px rgba(33, 22, 80, .12); font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; z-index: 99999 !important; } /* ── Header (prev / title / next) ─────────────────────────────────────────── */ #ui-datepicker-div .ui-datepicker-header { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; background: transparent; font-weight: 400; } #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { position: static; top: auto; left: auto; right: auto; display: flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; margin: 0; border: 1px solid var(--clr-neutral-10); border-radius: 6px; background: #fff; cursor: pointer; } #ui-datepicker-div .ui-datepicker-prev { order: 0; } #ui-datepicker-div .ui-datepicker-next { order: 2; } #ui-datepicker-div .ui-datepicker-title { order: 1; flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; line-height: normal; } #ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover, #ui-datepicker-div .ui-datepicker-prev-hover, #ui-datepicker-div .ui-datepicker-next-hover { top: auto; left: auto; right: auto; border-color: var(--clr-blue-100); background: #fff; } #ui-datepicker-div .ui-datepicker-prev span.ui-icon, #ui-datepicker-div .ui-datepicker-next span.ui-icon { position: static; margin: 0; width: 7px; height: 12px; text-indent: 0; background: var(--clr-blue-100); -webkit-mask: url(../img/chevron-menu-right.svg) center / contain no-repeat; mask: url(../img/chevron-menu-right.svg) center / contain no-repeat; } #ui-datepicker-div .ui-datepicker-prev span.ui-icon { transform: rotate(180deg); } /* ── Month / Year selects — like the custom select dropdown ───────────────── */ #ui-datepicker-div select.ui-datepicker-month, #ui-datepicker-div select.ui-datepicker-year { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; padding: 7px 30px 7px 12px; border: 1px solid var(--clr-neutral-10); border-radius: 8px; font-size: 14px; line-height: normal; color: var(--clr-blue-100); background-color: #fff; background-image: url(../img/arrow-down.svg); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; cursor: pointer; } #ui-datepicker-div select.ui-datepicker-month:focus, #ui-datepicker-div select.ui-datepicker-year:focus { outline: 0; border-color: var(--clr-blue-30); } /* ── Calendar grid ────────────────────────────────────────────────────────── */ #ui-datepicker-div .ui-datepicker-calendar { width: 100%; margin: 4px 0 0; border-collapse: collapse; font-size: 14px; } #ui-datepicker-div .ui-datepicker-calendar tr { background: transparent !important; } #ui-datepicker-div .ui-datepicker-calendar th { padding: 8px 0; text-align: center; font-weight: 600; color: var(--clr-blue-100); border: 0; background: transparent; } #ui-datepicker-div .ui-datepicker-calendar td { padding: 2px; text-align: center; border: 0; background: transparent !important; } #ui-datepicker-div .ui-datepicker-calendar td a, #ui-datepicker-div .ui-datepicker-calendar td span { display: block; padding: 9px 0; border: 0 !important; border-radius: 6px; text-align: center; text-decoration: none; color: var(--clr-blue-100); background: transparent; transition: var(--transition); font-family: var(--ff-gotham) !important; letter-spacing: 0.5px; } /* hover + selected — site blue */ #ui-datepicker-div .ui-datepicker-calendar td a:hover, #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover, #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active, #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight { background: var(--clr-blue-100) !important; color: #fff !important; } /* today (not selected) — subtle tint */ #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a:not(.ui-state-active) { background: var(--clr-blue-05); color: var(--clr-blue-100); } /* disabled / other-month days */ #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span, #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span { opacity: .35; } .hkb-event-card__media, .ticket-popup__dialog, .ig-item, .backstory-image, .team-modal__dialog { border-radius: 2px; overflow: hidden; } .hkb-tabs .e-n-tab-title:last-child { margin-right: 20px; } .hkb-tabs .e-n-tabs-heading { position: sticky; top: 0; z-index: 6; background-color: white; } .hkb-tabs .e-n-tab-title .e-n-tab-title-text { font-weight: 300 !important; } .hkb-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { font-weight: 400 !important; } .hkb-tabs .e-n-tabs-heading.is-sticky { z-index: 10; } .hkb-sticky-nav { position: sticky !important; top: 0; z-index: 44 !important; /* cùng lớp với .hkb-dancer-nav */ } /* Active link */ .hkb-sticky-nav .elementor-heading-title a { transition: color 0.3s ease; } .hkb-sticky-nav .elementor-heading-title a.active { font-weight: 400 !important; color: var(--clr-blue-100) !important; } .hkb-management-staff .gotham-regular strong { font-size: var(--fs-16) !important; line-height: var(--lh-26) !important; font-weight: 500 !important; } .hkb-management-staff p:not(:last-child) { margin-bottom: 20px !important; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gform_button[type="submit"] { display: block; width: 100%; padding: 10px 28px !important; color: white; font-size: var(--fs-18) !important; line-height: var(--lh-252) !important; border: none !important; font-weight: 400 !important; border-radius: 100px !important; cursor: pointer; transition: var(--transition); width: auto !important; float: left !important; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gform_footer { margin-top: 40px !important; } .gf-heading { font-size: 16px; line-height: 26px; font-family: var(--ff-gotham) !important; font-weight: 500; color: var(--clr-blue-100); margin-bottom: 12px; } .gf-description { font-size: 14px; line-height: 21px; font-family: var(--ff-gotham) !important; color: var(--clr-blue-100); } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gfield:first-child .gf-heading { margin-bottom: 8px; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gfield:not(:first-child) .gf-heading { margin-top: 28px; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gfield_validation_message { font-size: var(--fs-12) !important; line-height: var(--lh-168) !important; color: #AE0C00 !important; margin-top: 8px !important; display: block !important; } .single-pr-press-release .elementor-widget-theme-post-content h2 *, .single-pr-press-release .elementor-widget-theme-post-content h2, .single-pr-press-release .elementor-widget-theme-post-content h3 *, .single-pr-press-release .elementor-widget-theme-post-content h3, .single-pr-press-release .elementor-widget-theme-post-content h4 *, .single-pr-press-release .elementor-widget-theme-post-content h4, .single-pr-press-release .elementor-widget-theme-post-content h5 *, .single-pr-press-release .elementor-widget-theme-post-content h5, .single-pr-press-release .elementor-widget-theme-post-content h6 *, .single-pr-press-release .elementor-widget-theme-post-content h6 { font-family: 'NEXT Book', sans-serif !important; font-size: 26px !important; line-height: 35px !important; margin: 0 !important; text-align: center !important; } .single-pr-press-release .elementor-widget-theme-post-content a { color: var(--clr-blue-100) !important; text-decoration: underline; text-underline-offset: 4px; } .single-pr-press-release .elementor-widget-theme-post-content p:first-of-type { margin-top: 40px; } .single-pr-press-release .elementor-widget-theme-post-content table p:first-of-type { margin-top: 0; } .hkb-pr-table td:empty { display: none !important; } .single-pr-press-release th, .single-pr-press-release td { border: 0 !important; padding: 10px !important; background: transparent !important; } .single-pr-press-release th:first-child, .single-pr-press-release td:first-child { padding-left: 0 !important; } @media (min-width: 768px) and (max-width: 1200px) { .event-visual__bar-date { right: 40px; font-size: var(--fs-26); position: absolute; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 1280px) { .sidebar-nav-close { display: none; } .sidebar-nav-col[data-depth]:not([data-depth="0"]) .sidebar-nav-search { display: none; } } @media (max-width: 1279px) { .cky-consent-container .cky-consent-bar { padding: 16.5px 20px !important; } .sidebar-nav .sidebar-sub-list { padding-bottom: 110px !important; } .single-academy .elementor-widget-hkb_gallery .include-container:has(h2) { padding-left: 40px; padding-right: 40px; } .back-wrap { min-height: 32.8px; } .sidebar-nav-lang.mobile-only .sidebar-lang { padding: 8px 16px; } .sidebar-nav-lang.mobile-only { display: block; order: -2; padding: 0 20px; } .sidebar-icons-mobile { display: flex; flex-direction: row; gap: 32px; padding: 20px 20px; border-top: 1px solid rgba(33, 22, 80, 0.12); position: sticky; bottom: 0; background-color: var(--clr-blue-03, #fff); z-index: 10; margin-top: auto; } .sidebar-icons-mobile.background-lv-1 { background-color: var(--clr-blue-03); } .sidebar-icons-mobile.background-lv-2 { background-color: var(--clr-purple-10); } .sidebar-icons-mobile.background-lv-3, .sidebar-icons-mobile[class*="background-lv-"]:not(.background-lv-1):not(.background-lv-2) { background-color: var(--clr-purple-30); } .sidebar-icons-mobile .sidebar-icon-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .sidebar-icons-mobile .sidebar-icon-item img { width: 24px; height: 24px; object-fit: contain; } .sidebar-icons-mobile .sidebar-icon-item span { font-size: var(--fs-12); font-weight: 300; color: var(--clr-blue-100); text-align: center; } .sidebar-icons-mobile .sidebar-icon-item:hover span, .sidebar-icons-mobile .sidebar-icon-item:hover .sidebar-whats-on-icon, .sidebar-icons-mobile .sidebar-icon-item:hover .sidebar-donate-icon { color: #7A7396; } .sidebar-nav-col[data-depth="0"] .sidebar-nav-search { order: -1; margin-top: 0; } .sidebar-nav-col:not([data-depth="0"]) .sidebar-nav-search { padding-top: 20px; } .sidebar-nav .sidebar-nav-col[data-depth="0"] { padding: 20px 0 0; position: relative; } .sidebar-nav .sidebar-nav-cols { position: relative; height: 100%; } .sidebar-nav .sidebar-nav-col { min-width: 0; width: 320px; padding: 20px 0 0; justify-content: normal; } .sidebar-nav .sidebar-nav-col:not([data-depth="0"]) { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 320px; } .sidebar-nav .sidebar-nav-col:not([data-depth="0"]) .sidebar-nav-back { display: flex; align-items: center; margin-left: 20px; background-size: 12px; } .sidebar-nav .sidebar-sub-item, .sidebar-nav .sidebar-nav-item { /* padding: 16px 20px; */ } .sidebar-nav .sidebar-nav-search { padding: 0 20px; margin: 0; order: 0; } .sidebar-nav-col .sidebar-nav-search { padding: 20px 20px 48px 20px; } .top-header { display: none; } .event-wrapper { padding-left: 0; } .mobile-header { display: flex; flex-direction: column; position: sticky; top: 0; background: white; z-index: 999; transition: background-color 0.3s ease; } .hkb-transparent-header .mobile-header { position: fixed; left: 0; right: 0; background: transparent; } .hkb-transparent-header .mobile-header.is-solid .mobile-header-top { background-color: white; } .hkb-transparent-header .mobile-header.is-solid .arrow-white { display: none; } .hkb-transparent-header .mobile-logo .logo-mobile-white { display: none; } .hkb-transparent-header .mobile-logo.is-white .logo-mobile-white { display: block; } .hkb-transparent-header .mobile-logo.is-white .logo-mobile-dark { display: none; } /* Homepage: full logo (with Chinese + Artistic Director) in mobile header */ .mobile-logo--full img { width: 70px; height: auto; } /* Scaled up over the hero (like the desktop sidebar); shrinks to normal once the user starts scrolling (.is-transform added at scrollY > 0). */ .hkb-transparent-header .mobile-logo--full { transform: scale(1.3); transform-origin: top left; transition: all 0.3s; } .hkb-transparent-header .mobile-logo--full.is-transform { transform: scale(1); } /* ===== Mobile lang swap ===== */ .hkb-transparent-header .mobile-header .sidebar-lang.is-white { background-color: transparent; outline: 1px solid white; } .hkb-transparent-header .mobile-header .sidebar-lang.is-white span { color: white; } /* ===== Mobile hamburger toggle swap ===== */ .hkb-transparent-header .mobile-toggle.is-white span { background-color: white; } .mobile-header-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 40px; } .mobile-header-actions { display: flex; align-items: center; gap: 20px; } .mobile-header .top-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .mobile-header .top-nav::-webkit-scrollbar { display: none; } .mobile-header .mobile-header-nav { display: flex; align-items: center; padding: 10.5px 40px; overflow: hidden; } .mobile-header-cta { flex-shrink: 0; } .sidebar-header { display: none; } .site-layout { grid-template-columns: 1fr; } .hkb-transparent-header .event-visual__titles { padding-left: 0; } .hkb-transparent-header .site-footer { padding-left: 0 !important; } .event-visual__bar { padding: 60px 40px 28px 40px; } } @media (max-width: 1024px) and (min-width: 768px) { .event-visual__image img { object-fit: var(--img-fit, cover); } .sidebar-nav .sidebar-nav-col { width: calc(100% - 60px) !important; } .sidebar-nav .sidebar-nav-col:not([data-depth="0"]) { right: 60px; width: calc(100% - 60px) !important; } } @media (max-width: 1024px) { .footer-sub-heading { line-height: 1; } .footer-sub-heading>span { display: block; margin-top: 20px; margin-bottom: 12px; opacity: 0.7; } .footer-sub-heading ul li:not(:last-child) a { margin-bottom: 6px; } .sidebar-header { display: none; } .top-nav::-webkit-scrollbar { display: none; } .sidebar-nav { left: 0; right: 0; } .main-area { min-width: 0; } .footer-newsletter-inner.hkb-container .hkb-inner { padding: 40px 40px 0 40px !important; grid-template-columns: 1fr; grid-gap: 40px; } .footer-newsletter-inner.hkb-container { padding: 0 !important; } .footer-newsletter-inner .footer-newsletter-text { --fs-heading-large: 20px; --lh-435: 26px; } .footer-desktop.hkb-container>.hkb-padding-section>.hkb-inner { display: none; } .footer-desktop.hkb-container>.hkb-padding-section { padding: 0 !important; } .footer-mobile-social { margin: 80px auto 0; max-width: 353px; } .footer-mobile { display: block; background-color: var(--clr-blue-100); padding: 80px 40px 28px; } .footer-bottom { padding: 20px 40px !important; } .footer-bottom-inner.hkb-container { grid-template-columns: 1fr; } .footer-bottom-credits p:not(:last-child) { margin-bottom: 16px !important; } .footer-bottom-end { flex-direction: column; } .footer-bottom-copyright { order: 1; } .footer-bottom-credits p { text-align: center; } .footer-bottom-logos { flex-wrap: wrap; justify-content: center; row-gap: 14px; } .footer-bottom-logos img { max-width: 99px; } .gform_wrapper .gform_button { padding: 8px 16px !important; } .shop-home-section.shop-home-enquiries { min-width: 80vw; min-width: calc(100% - 80px); } .footer-newsletter-bg.no-photo .shop-home-section.shop-home-enquiries { padding: 40px !important; } .sidebar-nav-close { display: block !important; } } @media (max-width: 767px) { :root { --fs-14: 12px; --cta-816: 6px 14px; } .acknowledgement-categories h3 { font-size: 16px !important; } .acknowledgement-categories span h3.e-n-accordion-item-title-text { font-weight: bold !important; } .event-visual__bar { padding: 60px 20px 28px 20px; } .single-pr-press-release .elementor-widget-theme-post-content h2 *, .single-pr-press-release .elementor-widget-theme-post-content h2, .single-pr-press-release .elementor-widget-theme-post-content h3 *, .single-pr-press-release .elementor-widget-theme-post-content h3, .single-pr-press-release .elementor-widget-theme-post-content h4 *, .single-pr-press-release .elementor-widget-theme-post-content h4, .single-pr-press-release .elementor-widget-theme-post-content h5 *, .single-pr-press-release .elementor-widget-theme-post-content h5, .single-pr-press-release .elementor-widget-theme-post-content h6 *, .single-pr-press-release .elementor-widget-theme-post-content h6 { font-size: 16px !important; line-height: 23px !important; text-align: left !important; } .single-pr-press-release .elementor-widget-theme-post-content p { font-size: 14px; line-height: 21px; } .single-pr-press-release .elementor-widget-theme-post-content p:first-of-type { margin-top: 20px; } .footer-newsletter-bg.no-photo .shop-home-section.shop-home-enquiries { padding: 20px !important; } .single-academy .elementor-widget-hkb_gallery .include-container:has(h2) { padding-left: 20px; padding-right: 20px; } .widget-gallery-text-center.elementor-widget-hkb_gallery .gallery-slide__text { max-width: 100vw !important; width: 100vw !important; } .single-hkb_artist .elementor-widget-hkb_review .review-pagination { margin-top: 40px; } .single-hkb_artist .elementor-widget-hkb_review .review-panel { padding: 104px 20px 40px; } .hkb-management-staff .gotham-regular strong { font-size: 14px !important; line-height: 21px !important; } .widget-gallery-text-center .gallery-slide__text, .single-hkb_artist .elementor-widget-hkb_gallery .gallery-slide__text { text-align: center; padding-left: 20px; padding-right: 20px; } .widget-gallery .gallery-lightbox__controls { width: 100% !important; } #gform_2 :is(input, button)[type="submit"] { width: 100%; } .bg-desktop { display: none !important; } .bg-mobile { display: block !important; } .nav-arrow { width: 36px; } .nav-arrow img { width: 16px; } .top-header { padding: 16.5px 20px; } .top-header ul { gap: 16px; } .shop-home-banner .banner-landscape { display: none; } .shop-home-banner .banner-portrait { display: block; width: 100%; } .shop-home-section .product-name, .shop-home-section .product-price, .shop-home-section .collection-name { --fs-16: 14px; --lh-26: 21px; } .shop-home-section .section-title { --fs-heading-large: 20px; --lh-435: 26px; letter-spacing: 0.25px; } .shop-home-section .section-nav { gap: 20px; } .shop-home-section .section-nav img { width: 20px; height: 20px; } .shop-home-section .section-header { margin-bottom: 20px; } .hkb-container section { padding: 40px 0; } .hkb-container .shop-home-collections { padding: 0; } .new-products-footer { margin-top: 28px; } .new-products-footer a { width: 100%; text-align: center; } .shop-home-section.shop-home-enquiries { padding: 80px 20px; min-width: calc(100% - 40px); } .enquiries-actions { flex-direction: column; width: 100%; } .enquiries-actions a { width: 100%; } .enquiries-title { --fs-heading-xlarge: 26px; --lh-55: 35px; } .enquiries-desc { --fs-16: 14px; --lh-26: 21px; } .gform_wrapper div.cta-dark-radial-out { width: 100%; } .hkb-track-result__notice { margin: 0 !important; } .hkb-container { padding: 0 20px !important; } .mobile-header-top { padding: 20px; } .mobile-header .mobile-header-nav { padding: 10.5px 20px; } .footer-newsletter-inner.hkb-container .hkb-inner { padding: 40px 20px 0 20px !important; } .footer-mobile { padding: 80px 20px 28px; } .footer-bottom { padding: 20px !important; } .sidebar-nav { right: 0; } .sidebar-nav .sidebar-nav-col { width: calc(100% - 60px) !important; } .sidebar-nav .sidebar-nav-col:not([data-depth="0"]) { right: 60px; } /* ===== Event Visual — Mobile ===== */ .event-visual { background-image: var(--bg-image-mobile, var(--bg-image, none)); /*height: calc(100svh - 78.6px);*/ } .swiper-btn svg { width: 16px; height: 16px; } .event-visual__image img { width: 100%; height: var(--img-height, 100%); object-fit: var(--img-fit, cover); object-position: var(--img-position, center); display: block; max-width: 100vw; } /* HKB-116: per-line mobile font size; falls back to the previous default (48/412) */ .event-visual__title-line { font-size: var(--fs-m, 11.65vw); } /* HKB-113: per-breakpoint layout — mobile can differ from desktop */ .event-visual__title-text.layout-m-column { flex-direction: column; align-items: center; } .event-visual__title-text.layout-m-inline { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 20px; } /* HKB-117: mobile nudge offsets */ .event-visual__titles { transform: translate(var(--off-x-m, 0px), var(--off-y-m, 0px)); } /* HKB-116/113: bottom-bar name — mobile per-line size + layout */ .event-visual__bar-name-line { font-size: var(--bar-fs-m, inherit); } .event-visual__bar-name.namelayout-m-column { flex-direction: column; } .event-visual__bar-name.namelayout-m-inline { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.3em; } /* Mobile Position */ .event-visual.pos-m-center-center .event-visual__titles { align-items: center; justify-content: center; } .event-visual.pos-m-left-center .event-visual__titles { align-items: center; justify-content: flex-start; } .event-visual.pos-m-right-center .event-visual__titles { align-items: center; justify-content: flex-end; } .event-visual.pos-m-top-center .event-visual__titles { align-items: flex-start; justify-content: center; padding-top: var(--title-offset-top-m, 120px); } .event-visual.pos-m-bottom-center .event-visual__titles { align-items: flex-end; justify-content: center; } .event-visual__title-text { letter-spacing: 2px; } .event-visual__bar-row { flex-direction: column; align-items: flex-start; gap: 8px; } .event-visual:has(.event-visual__explore) .event-visual__bar-row { align-items: flex-start; gap: 12px; width: 100%; } .event-visual:has(.event-visual__explore) .event-visual__bar-left { align-items: flex-start; width: 100%; } .event-visual__bar-top-subtitle { text-align: left; margin-bottom: 4px; } .event-visual:has(.event-visual__explore) .event-visual__bar-top-subtitle { text-align: left; } .event-visual__bar-subtitle { --fs-18: 14px; --lh-252: 18.2px; text-align: left; } .event-visual:has(.event-visual__explore) .event-visual__bar-subtitle { text-align: left; } .event-visual__bar-top-subtitle, .event-visual__bar-date { --fs-26: 14px; line-height: 14px; } .event-visual__bar-name { --fs-heading-xlarge: 32px; --lh-55: 40px; text-align: left; } .event-visual:has(.event-visual__explore) .event-visual__bar-date { text-align: left; text-transform: uppercase; } .event-visual:has(.event-visual__explore) .event-visual__mobile-action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .event-visual:has(.event-visual__explore) .event-visual__bar-name { text-align: left; } .event-visual__bar-title-row { justify-content: center; gap: 8px; } .event-visual:has(.event-visual__explore) .event-visual__bar-title-row { display: block; } .event-visual__explore--desktop { display: none; } .event-visual__explore--mobile { display: inline-flex; padding: 3px 8px; font-size: 9px; } .event-visual:has(.event-visual__explore) .event-visual__explore--mobile { flex: 0 0 auto; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75) !important; padding: 6px 14px; font-size: 12px; z-index: 3; } .gfield_html .gf-group-title, #gform_3 .gf-group-title:not(:first-child) { margin-top: 16px !important; } .gform_footer .cta-dark-radial-out { text-align: center; } .gf-group-desc.mt { margin-top: 16px !important; margin-bottom: 4px !important; } .gf-heading { font-size: 14px; line-height: 21px; margin-bottom: 8px; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gfield:first-child .gf-heading { margin-bottom: 0; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gfield:not(:first-child) .gf-heading { margin-top: 12px; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gform_fields { row-gap: 16px !important; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gform_button[type="submit"] { width: 100% !important; } .gform_wrapper.cbtp-form_wrapper .cbtp-form .gform_footer { margin-top: 32px !important; } } @media (max-width: 412px) { .hide-mobile { display: none !important; } .hide-desktop { display: block !important; } /* Mobile image-style controls override the desktop ones */ .event-visual__image { justify-content: var(--img-justify-m, var(--img-justify, center)); align-items: var(--img-align-m, var(--img-align, center)); padding: var(--img-pad-m, var(--img-pad, 0)); } .event-visual__image img { height: var(--img-height-m, var(--img-height, 100%)); object-fit: var(--img-fit-m, var(--img-fit, cover)); object-position: var(--img-position-m, var(--img-position, center)); } } @media screen and (max-width: 460px) { .form-donation_wrapper .dn-pills { display: flex !important; flex-wrap: wrap; } .form-donation_wrapper .dn-pill { flex: 1; } } @media (max-width: 393px) { .event-visual__bar { padding: 60px 20px 20px 20px !important; } .hkb-container { padding: 0 20px !important; } .mobile-header-top { padding: 20px; } .mobile-header .mobile-header-nav { padding: 10.5px 20px; } .footer-newsletter-inner.hkb-container .hkb-inner { padding: 40px 20px 0 20px !important; } .footer-mobile { padding: 80px 20px 28px; } .footer-bottom { padding: 20px !important; } .shop-home-section.shop-home-enquiries { padding: 80px 20px; min-width: calc(100% - 40px); } } /* HKB-583: Donate intro — justified block with a centred last line (desktop) */ @media (min-width: 1025px) { .elementor-widget-heading.hkb-justify-center .elementor-heading-title { text-align: justify; text-align-last: center; } } /* Nutcracker 2026 partner logo sizes from the live 2026/27 Acknowledgements page. */ :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo { max-width: none; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-"] { max-width: none; max-height: none; flex: none; object-fit: contain; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-wofoo"] { width: 114px; height: 136px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-ritz"] { width: 139px; height: 72px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-w-hotel"] { width: 89px; height: 53px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-perrier"] { width: 139px; height: 46px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-poad"] { width: 89px; height: 34px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-cr"] { width: 82px; height: 63px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-mac"] { width: 139px; height: 15px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-regent"] { width: 139px; height: 49px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-kimpton"] { width: 139px; height: 58px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-rosewood"] { width: 138px; height: 17px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-artus"] { width: 139px; height: 54px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-eaton"] { width: 114px; height: 66px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-bacha"] { width: 73px; height: 95px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-pure"] { width: 81px; height: 91px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-tatler"] { width: 89px; height: 50px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-physio"] { width: 89px; height: 34px; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partner-logo img[src*="hkb-nutcracker-2026-target-media"] { width: 114px; height: 41px; } /* Give the live-size logos enough room in the two-column mobile carousel. */ @media (max-width: 768px) { :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .include-container { padding-left: 0; padding-right: 0; } :is(body.postid-32069, body.postid-32593, body.postid-32609) #partners-section .partners-swiper .swiper-slide { column-gap: 20px; } } /* HKB-588: whole Spotlight slide is clickable (see main.js). */ .elementor-element-dbd6801 .swiper-slide { cursor: pointer; }