/* ===================================================================== HourDeal header, category menu, location pill/picker and phone menu. Loaded in so the header is styled on first paint (no flash). ===================================================================== */ /* ---------- From the header component ---------- */ /* ---------- Category button: outline on hover, filled when open ---------- */ .hd-cat-menu .hd-cat-btn { border: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } @media (min-width: 1200px) { .hd-header .rbt-header-wrapper .container { position: relative; } .hd-header .hd-cat-menu { position: static; } .hd-cat-menu .hd-cat-btn:hover, .hd-cat-menu .hd-cat-btn:focus-visible { border-color: var(--color-primary); outline: none; } .hd-cat-menu.open .hd-cat-btn { border-color: var(--color-primary); background: rgba(99, 91, 255, .08); color: var(--color-primary); } } /* ---------- Mega panel ---------- */ .hd-cat-panel { position: absolute; top: 100%; left: 15px; right: 15px; z-index: 99; background: #fff; border-radius: 0 0 16px 16px; border-top: 1px solid var(--color-border); box-shadow: 0 24px 48px -12px rgba(25, 35, 53, .15); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .hd-cat-menu.open .hd-cat-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; } .hd-cat-panel-inner { display: flex; padding: 24px; min-height: 280px; } .hd-cat-list { list-style: none; margin: 0; padding: 0 16px 0 0; width: 260px; flex-shrink: 0; border-right: 1px solid var(--color-border); } .hd-cat-list li { margin: 0 0 4px; padding: 0; } .hd-cat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--color-heading); font-size: 15px; font-weight: 500; transition: background-color .15s ease; } .hd-cat-item:hover, .hd-cat-item.active { background: rgba(99, 91, 255, .09); color: var(--color-heading); } .hd-cat-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .hd-cat-icon img { width: 18px; height: 18px; object-fit: contain; } .hd-tint-teal { background: #e3f4f1; color: #1f8a78; } .hd-tint-purple { background: #efeaff; color: #6b4eff; } .hd-tint-rose { background: #fde8ec; color: #d6456a; } .hd-tint-green { background: #e6f5e9; color: #3c9a52; } .hd-tint-amber { background: #fdf0e0; color: #c27a1a; } .hd-tint-blue { background: #e5f0fd; color: #2f73d0; } .hd-cat-name { flex: 1; } .hd-cat-chevron { color: var(--color-body); font-size: 14px; } .hd-soon { font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; background: rgba(99, 91, 255, .1); color: var(--color-primary); } .hd-cat-content { flex: 1; padding: 4px 0 0 28px; } .hd-cat-pane { display: none; } .hd-cat-pane.active { display: block; } .hd-cat-all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; } .hd-cat-all i { transition: transform .15s ease; } .hd-cat-all:hover i { transform: translateX(3px); } .hd-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; } .hd-sub-item { display: block; padding: 10px 12px; border-radius: 10px; transition: background-color .15s ease; } .hd-sub-item:hover { background: #f6f5fb; } .hd-sub-name { display: block; font-size: 15px; font-weight: 600; color: var(--color-heading); line-height: 1.4; } .hd-sub-desc { display: block; font-size: 13px; color: var(--color-body); line-height: 1.5; margin-top: 2px; } .hd-sub-empty, .hd-cat-empty { font-size: 14px; color: var(--color-body); margin: 0; } /* ================= Header bar ================= */ .hd-header .rbt-header-wrapper { border-bottom: 1px solid #eef0f4; } .hd-header .mainbar-row { display: flex; align-items: center; gap: 16px; } /* The theme splits the bar 40% / 60%; size the groups by their content instead. */ .hd-header .header-left { flex: 0 1 auto !important; min-width: 0; } .hd-header .header-left > .header-info:last-child { min-width: 0; } .hd-header .header-left .hd-area-pill { max-width: 100%; } .hd-header .header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto !important; } /* Search */ .hd-search { position: relative; flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; height: 44px; padding: 0 10px 0 14px; border: 1px solid #e4e7ec; border-radius: 12px; background: #f9fafb; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .hd-search:focus-within { background: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(99, 91, 255, .12); } .hd-search > i { color: #98a2b3; font-size: 16px; } .hd-search input { flex: 1; min-width: 0; height: 100%; margin: 0 8px; padding: 0; border: 0; background: transparent; font-size: 15px; color: var(--color-heading); box-shadow: none; } .hd-search input:focus { outline: none; } .hd-search input::-webkit-search-cancel-button { display: none; } .hd-search-kbd { min-width: 22px; padding: 1px 6px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fff; font-family: inherit; font-size: 12px; color: #98a2b3; text-align: center; } .hd-search:focus-within .hd-search-kbd { display: none; } .hd-search-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid #eaecf0; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -18px rgba(16, 24, 40, .3); } .hd-search-list li { margin: 0; } .hd-search-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--color-heading); } .hd-search-list a i { color: #98a2b3; } .hd-search-list a small { margin-left: auto; font-size: 12px; color: #98a2b3; } .hd-search-list a mark { padding: 0; background: none; color: var(--color-primary); font-weight: 600; } .hd-search-list a:hover, .hd-search-list a.is-active { background: #f5f4ff; } /* Nav links */ .hd-nav { display: flex; align-items: center; gap: 2px; } .hd-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #344054; transition: background-color .15s ease, color .15s ease; } .hd-nav a:hover { background: #f5f4ff; color: var(--color-primary); } .hd-nav a.is-active { color: var(--color-primary); } .hd-icon-btn { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; color: #344054; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; } .hd-icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .hd-search-toggle { display: none; } .hd-signin { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--color-heading); } .hd-signin:hover { background: #f5f4ff; color: var(--color-primary); } .hd-join { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 12px; background: var(--color-primary); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(99, 91, 255, .7); } .hd-join:hover { background: #4f46e5; color: #fff; } /* Account menu */ .hd-account { position: relative; } .hd-account-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 4px; border: 1px solid #e4e7ec; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--color-heading); } .hd-account-btn:hover, .hd-account.open .hd-account-btn { border-color: var(--color-primary); } .hd-account-btn > i { color: #98a2b3; font-size: 14px; } .hd-account-name { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hd-avatar { position: relative; width: 34px; height: 34px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: #efeaff; display: inline-flex; align-items: center; justify-content: center; } .hd-avatar::before { content: attr(data-initials); font-size: 14px; font-weight: 700; color: var(--color-primary); } .hd-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hd-account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 240px; padding: 6px; border: 1px solid #eaecf0; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -18px rgba(16, 24, 40, .3); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .hd-account.open .hd-account-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; } .hd-account-head { padding: 10px 12px 12px; border-bottom: 1px solid #f2f4f7; margin-bottom: 6px; } .hd-account-head strong { display: block; font-size: 15px; color: var(--color-heading); } .hd-account-head span { display: block; font-size: 13px; color: #667085; overflow: hidden; text-overflow: ellipsis; } .hd-account-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: #344054; } .hd-account-menu a i { color: #98a2b3; } .hd-account-menu a:hover { background: #f5f4ff; color: var(--color-primary); } .hd-account-menu a:hover i { color: var(--color-primary); } .hd-account-menu a.is-danger:hover { background: #fef3f2; color: #b42318; } .hd-account-menu a.is-danger:hover i { color: #b42318; } /* Location prompt (replaces the red "location disabled" banner) */ .hd-locbar { background: #f5f4ff; border-bottom: 1px solid #e0ddff; } .hd-locbar .container { display: flex; align-items: center; gap: 10px; min-height: 42px; font-size: 14px; color: #344054; } .hd-locbar .container > i { color: var(--color-primary); } .hd-locbar strong { color: var(--color-heading); } .hd-locbar-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; } .hd-locbar-close { margin-left: auto; border: 0; background: none; color: #667085; font-size: 16px; } .hd-locbar-off .hd-locbar { display: none !important; } /* ================= Responsive ================= */ @media (max-width: 1299px) { .hd-account-name { display: none; } .hd-search { max-width: 300px; } } @media (max-width: 1199px) { .hd-nav { display: none; } .hd-search-toggle { display: inline-flex; } .hd-header .mainbar-row { position: relative; } /* Search opens as a full-width panel under the header. */ .hd-search { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 130; max-width: none; background: #fff; box-shadow: 0 20px 40px -18px rgba(16, 24, 40, .3); } .hd-search.is-open { display: flex; } .hd-search-kbd { display: none; } .hd-signin span { display: none; } .hd-signin { width: 42px; padding: 0; justify-content: center; border: 1px solid #e4e7ec; } } @media (max-width: 767px) { .hd-join { display: none; } .hd-header .mobile-menu-bar { margin: 0; } .hd-header .header-left { gap: 6px; } .hd-header .header-right { gap: 6px; } .hd-icon-btn, .hd-signin { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; } .hd-account-btn { height: 38px; padding: 0 4px; } .hd-account-btn > i { display: none; } .hd-avatar { width: 30px; height: 30px; } .hd-locbar .container { font-size: 13px; } } @media (max-width: 575px) { .hd-signin { display: none; } .hd-header .header-left > .header-info { padding-right: 0; margin-right: 0; } } /* ================= Phone menu ================= */ .hd-mmenu .inner-wrapper { display: flex; flex-direction: column; gap: 16px; padding: 20px !important; } .hd-mmenu-top { display: flex; align-items: center; justify-content: space-between; } .hd-mmenu-logo img { height: 28px; width: auto; } .hd-mmenu-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #f8f9fb; } .hd-mmenu-user .hd-avatar { width: 44px; height: 44px; } .hd-mmenu-user strong { display: block; font-size: 16px; color: var(--color-heading); } .hd-mmenu-user span:not(.hd-avatar) { font-size: 13px; color: #667085; } .hd-mmenu-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hd-mmenu-auth .hd-btn { height: 44px; } .hd-mmenu-cta { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(120deg, #4338ca, #635bff); color: #fff; } .hd-mmenu-cta i { font-size: 24px; } .hd-mmenu-cta strong { display: block; font-size: 15px; color: #fff; } .hd-mmenu-cta small { display: block; font-size: 13px; color: rgba(255, 255, 255, .8); } .hd-mmenu-cta:hover { color: #fff; } .hd-mmenu-links { display: grid; gap: 2px; } .hd-mmenu-links a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500; color: #344054; } .hd-mmenu-links a i { width: 20px; color: #98a2b3; font-size: 18px; } .hd-mmenu-links a:hover { background: #f5f4ff; color: var(--color-primary); } .hd-mmenu-links a.is-danger { color: #b42318; } .hd-mmenu-links a.is-danger i { color: #b42318; } .hd-mmenu-bottom { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid #eaecf0; font-size: 14px; } .hd-mmenu-bottom > a { display: inline-flex; align-items: center; gap: 10px; color: #344054; } .hd-mmenu-bottom > a i { color: var(--color-primary); } .hd-mmenu-social { display: flex; gap: 10px; } .hd-mmenu-social a { width: 38px; height: 38px; border: 1px solid #eaecf0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #475467; } /* ---------- From the location picker component ---------- */ .hd-loc .modal-dialog { max-width: 460px; } .hd-loc .modal-content { position: relative; padding: 32px 28px 28px; border: 0; border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .35); text-align: center; } .hd-loc-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f4f7; color: #344054; display: inline-flex; align-items: center; justify-content: center; } .hd-loc-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: rgba(99, 91, 255, .1); color: var(--color-primary); font-size: 22px; display: flex; align-items: center; justify-content: center; } .hd-loc h4 { margin: 0 0 6px; font-size: 22px; color: var(--color-heading); } .hd-loc-sub { margin: 0 0 22px; font-size: 15px; color: #667085; } .hd-loc form { text-align: left; } .hd-loc-field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .hd-loc-field:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(99, 91, 255, .1); } .hd-loc-field i { color: #667085; font-size: 17px; } .hd-loc-field input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font-size: 16px; color: var(--color-heading); box-shadow: none; } .hd-loc-field input:focus { outline: none; } .hd-loc-gps { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 10px; border: 1px dashed #c7c3ff; border-radius: 14px; background: rgba(99, 91, 255, .05); color: var(--color-primary); font-size: 15px; font-weight: 600; } .hd-loc-gps:hover { background: rgba(99, 91, 255, .1); } .hd-loc-gps.is-busy i { animation: hd-loc-spin 1s linear infinite; } @keyframes hd-loc-spin { to { transform: rotate(360deg); } } .hd-loc-current { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #f8f9fb; font-size: 14px; color: #667085; } .hd-loc-current i { color: var(--color-primary); } .hd-loc-current strong { color: var(--color-heading); font-weight: 600; } .hd-loc-radius { margin: 20px 0 0; padding: 0; border: 0; } .hd-loc-radius legend { float: none; width: auto; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--color-heading); } .hd-loc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .hd-loc-chips label { margin: 0; cursor: pointer; } .hd-loc-chips input { position: absolute; opacity: 0; pointer-events: none; } .hd-loc-chips span { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid #eaecf0; border-radius: 10px; font-size: 14px; font-weight: 500; color: #344054; transition: all .15s ease; } /* Undo the theme's custom radio styling for these chips. */ .hd-loc-chips input + span::before, .hd-loc-chips input + span::after { display: none !important; } .hd-loc-chips input + span { padding-left: 0 !important; } .hd-loc-chips input:checked + span { border-color: var(--color-primary); background: rgba(99, 91, 255, .08); color: var(--color-primary); font-weight: 600; } .hd-loc-chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(99, 91, 255, .25); } .hd-loc-error { margin: 12px 0 0; font-size: 14px; color: #b42318; } .hd-loc-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 22px; border: 0; border-radius: 14px; background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; } .hd-loc-submit:hover { background: #4f46e5; } .hd-loc-submit:disabled { opacity: .6; } /* Header pill that opens the picker */ .hd-area-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: var(--black-opacity, #f5f5f7); color: var(--color-heading); font-size: 14px; font-weight: 500; transition: border-color .15s ease; } .hd-area-pill:hover { border-color: var(--color-primary); color: var(--color-heading); } .hd-area-pill i { color: var(--color-primary); flex-shrink: 0; } .hd-area-pill span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hd-area-pill .chev { color: #98a2b3; font-size: 13px; } /* Keep the logo from being squeezed out of the header on small screens. */ .hd-header .header-left .logo { flex-shrink: 0; } .hd-header .header-left .logo img { min-width: 110px; } @media (max-width: 767px) { /* "Services" and "Browse tasks" live in the ☰ menu on phones. */ .hd-header .quick-access > li.position-static { display: none; } } @media (max-width: 575px) { .hd-area-pill { max-width: 150px; height: 38px; padding: 0 10px; font-size: 13px; } .hd-area-pill .chev { display: none; } } @media (max-width: 399px) { .hd-area-pill { max-width: 118px; } .hd-header .header-left .logo img { min-width: 96px; } } .pac-container { z-index: 1070 !important; } /* ---------- Location prompt: decided in (see head-area), so it never pops in later ---------- */ .hd-header .hd-locbar { display: none !important; } html.hd-show-locbar .hd-header .hd-locbar { display: block !important; } html.hd-locbar-off .hd-header .hd-locbar { display: none !important; } /* ---------- Sticky header: quick, subtle entrance instead of the theme's 0.65s slide ---------- */ .hd-header .rbt-header-wrapper { background: #fff; } .hd-header .rbt-header-wrapper.rbt-sticky { animation: hdStickyIn .18s ease-out both; box-shadow: 0 6px 20px -12px rgba(16, 24, 40, .25); } @keyframes hdStickyIn { from { opacity: .6; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hd-header .rbt-header-wrapper.rbt-sticky { animation: none; } } /* ---------- Page-to-page navigation: header stays put, content cross-fades (supporting browsers) ---------- */ @view-transition { navigation: auto; } .hd-header .rbt-header-wrapper:not(.rbt-sticky) { view-transition-name: hd-header; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }