:root { --accent: #a6dd12; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1); } 50% { box-shadow: -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 }/* ========================================================= HKArtsNetUK — complete header CSS replacement ========================================================= */ /* Header colours */ .header, .header.header-scroll, .header .header-top { background-color: #A6DD12 !important; border: 0 !important; box-shadow: none !important; } /* Main header row */ .header .header-container { min-height: 92px !important; padding-left: 48px !important; padding-right: 48px !important; align-items: center !important; } /* Left group: logo and search */ .header .header-left { flex: 0 0 330px !important; width: 330px !important; max-width: 330px !important; display: flex !important; align-items: center !important; margin-left: 50px; } /* Show the correct logo only once */ .header .logo .static-logo { display: block !important; } .header .logo .scroll-logo { display: none !important; } .header.header-scroll .logo .static-logo { display: block !important; } .header.header-scroll .logo .scroll-logo { display: none !important; } /* Logo size */ .header .logo, .header .logo a { display: flex !important; align-items: center !important; margin: 0 !important; } .header .logo img { display: block !important; width: auto !important; height: 60px !important; max-height: 60px !important; max-width: 185px !important; margin: 0 !important; object-fit: contain !important; } /* Compact working search beside the logo */ .header #c27-header-search-form { flex: 0 0 110px !important; width: 110px !important; min-width: 110px !important; max-width: 110px !important; margin-left: 20px !important; } .header #c27-header-search-form .header-search { width: 110px !important; min-width: 110px !important; max-width: 110px !important; } .header #c27-header-search-form input[name="search_keywords"] { display: block !important; width: 110px !important; min-width: 0 !important; max-width: 110px !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; font-family: "Familjen Grotesk", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #14140D !important; } /* Search results may open below without widening the header */ .header #c27-header-search-form .instant-results { width: 300px !important; max-width: 300px !important; } /* Centre navigation */ .header .header-center { flex: 1 1 auto !important; min-width: 0 !important; } .header .i-nav { max-width: none !important; } .header .i-nav > ul.main-menu { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .header .i-nav > ul.main-menu > li { margin-left: 18px !important; margin-right: 18px !important; padding: 0 !important; } .header .i-nav > ul.main-menu > li > a { font-family: "Familjen Grotesk", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: #14140D !important; background: transparent !important; padding: 14px 0 !important; } .header .i-nav > ul.main-menu > li > a:hover, .header .i-nav > ul.main-menu > li.current-menu-item > a, .header .i-nav > ul.main-menu > li.current-menu-ancestor > a { color: #14140D !important; background: transparent !important; opacity: 0.65 !important; } /* Right account area */ .header .header-right { flex: 0 0 210px !important; width: 210px !important; max-width: 210px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin-right: 50px; } .header .user-area.signin-area { display: flex !important; align-items: center !important; margin: 0 !important; white-space: nowrap !important; color: #14140D !important; } .header .user-area.signin-area > i { color: #14140D !important; font-size: 18px !important; margin-right: 8px !important; } .header .user-area.signin-area a, .header .user-area.signin-area span { font-family: "Familjen Grotesk", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #14140D !important; } /* All header icons */ .header i, .header svg { color: #14140D !important; } /* Tablet */ @media screen and (max-width: 1200px) { .header .header-container { min-height: 86px !important; padding-left: 20px !important; padding-right: 20px !important; } .header .header-left { flex-basis: 275px !important; width: 275px !important; max-width: 275px !important; } .header .logo img { height: 54px !important; max-height: 54px !important; max-width: 155px !important; } .header #c27-header-search-form, .header #c27-header-search-form .header-search, .header #c27-header-search-form input[name="search_keywords"] { width: 90px !important; min-width: 0 !important; max-width: 90px !important; } .header #c27-header-search-form { flex-basis: 90px !important; margin-left: 14px !important; } .header .i-nav > ul.main-menu > li { margin-left: 10px !important; margin-right: 10px !important; } .header .i-nav > ul.main-menu > li > a { font-size: 14px !important; } .header .header-right { flex-basis: 180px !important; width: 180px !important; max-width: 180px !important; margin-right: 50px; } .header .user-area.signin-area a, .header .user-area.signin-area span { font-size: 14px !important; } } /* Mobile: return control to MyListing mobile header */ @media screen and (max-width: 768px) { .header .header-container { min-height: 70px !important; padding-left: 16px !important; padding-right: 16px !important; } .header .header-left { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .header .logo img { height: 40px !important; max-height: 40px !important; max-width: 140px !important; } .header #c27-header-search-form, .header .header-center, .header .user-area.signin-area { display: none !important; } .header .header-right { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-right: 50px; } } /* Mobile add-listing form: keep editable sections fully visible */ @media only screen and (max-width: 768px) { body.add-listing-form #submit-job-form .form-section { opacity: 1 !important; transform: none !important; } body.add-listing-form #submit-job-form .field > input:focus, body.add-listing-form #submit-job-form .field > textarea:focus { border-bottom: 2px solid #a6dd12 !important; outline: none !important; box-shadow: none !important; } } /* Reset-password form: match the MyListing account design. */ .woocommerce-ResetPassword { font-family: var(--e-global-typography-text-font-family), "Familjen Grotesk", sans-serif !important; } .woocommerce-ResetPassword p, .woocommerce-ResetPassword label, .woocommerce-ResetPassword input, .woocommerce-ResetPassword button { font-family: inherit !important; } /* Labels */ .woocommerce-ResetPassword .form-row label { display: block !important; margin: 0 !important; color: #242429 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* Replace input boxes with underline fields. */ .woocommerce-ResetPassword input.input-text { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 14px 38px 14px 0 !important; border: 0 !important; border-bottom: 1.5px solid rgba(0, 0, 0, 0.2) !important; border-radius: 0 !important; background: transparent !important; color: #242429 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 18px !important; outline: 0 !important; box-shadow: none !important; appearance: none !important; } /* Lime underline while typing. */ .woocommerce-ResetPassword input.input-text:focus { border-bottom-color: #a6dd12 !important; box-shadow: 0 1px 0 0 #a6dd12 !important; } /* Password wrapper */ .woocommerce-ResetPassword .password-input { position: relative !important; display: block !important; width: 100% !important; } /* Eye position */ .woocommerce-ResetPassword .show-password-input { position: absolute !important; top: 50% !important; right: 0.7em !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: none !important; border: 0 !important; cursor: pointer !important; z-index: 2 !important; font-size: 0 !important; } .woocommerce-ResetPassword .show-password-input::before { display: none !important; content: none !important; } /* Same eye glyph used by MyListing. */ .woocommerce-ResetPassword .show-password-input::after { content: "\e010" !important; display: inline-block !important; margin: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; color: #242429 !important; font-family: WooCommerce !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; font-variant: normal !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; -webkit-font-smoothing: antialiased !important; } .woocommerce-ResetPassword .show-password-input.display-password::after { opacity: 0.7 !important; } /* Match the spacing used on the account form. */ .woocommerce-ResetPassword .form-row { margin: 0 0 25px !important; padding: 0 !important; }