/* ============================================================ HireJuno — homepage (index.html) ONLY. Loaded last, after brand.css → redesign.css → megamenu.css. Everything here is namespaced `.hh-*` (hirejuno-home) so it can never collide with the shared `.rx-*` (redesign.css) or `.mm-*` (megamenu.css) systems that the other 90k pages depend on. Design contract — design-system/hirejuno/MASTER.md: · Marketplace / Directory pattern: search-led hero → categories → featured listings → trust/safety → become-a-pro CTA. · Flat design. Transitions 150–300ms. No layout-shifting hovers. · SVG icons only, cursor:pointer on everything clickable, visible focus, AA contrast, prefers-reduced-motion respected. TOKENS — this file consumes, it does not define. Load order (css/tokens.css §LOAD ORDER): brand.css -> redesign.css -> [home.css] -> tokens.css -> motion.css tokens.css is the shared foundation and loads AFTER this file so its dark-mode re-valuing of the legacy brand tokens wins. index.html ships ``, which is the switch tokens.css reads. Consequently this file NEVER re-values --paper/--ink/--line/etc. It only defines `--hh-*` locals, and expresses its handful of genuinely page-specific dark-mode needs (glass chips over photos, the hero wash) as `--hh-*` switches flipped on exactly the same selectors tokens.css uses, so the two files can never disagree. ============================================================ */ :root { /* Motion — transform/opacity only, 150–300ms per MASTER.md */ --hh-ease: cubic-bezier(.22, .61, .36, 1); --hh-ease-out: cubic-bezier(.16, 1, .3, 1); --hh-fast: 150ms; --hh-base: 220ms; --hh-slow: 300ms; /* Layout */ --hh-gutter: clamp(16px, 4vw, 24px); --hh-radius: 18px; --hh-radius-lg: 26px; /* Theme switches (light values). Flipped in §15 for dark. */ --hh-glass: rgba(255, 255, 255, .94); /* pill sitting on a photo */ --hh-navbar: rgba(250, 248, 243, .97); /* scrolled navbar */ --hh-sticky-bg: rgba(255, 255, 255, .96); --hh-hero-wash-1: rgba(52, 199, 89, .16); --hh-hero-wash-2: rgba(46, 139, 68, .09); --hh-pro-grad: linear-gradient(135deg, var(--juno-green-deep), var(--juno-green) 62%, #3AA357); --hh-btn-white-bg: #fff; --hh-btn-white-fg: #14532D; --hh-skel-a: #E7E4DC; --hh-skel-b: #F3EFE6; --hh-phone-body: linear-gradient(160deg, #253449, #131E2C); --hh-phone-map: linear-gradient(135deg, #DFF0E2, #C8E6CE 55%, #EAF6ED); } /* ============================================================ 1. Motion primitives — scroll reveal, skeletons, press feedback ============================================================ */ /* Reveal: hidden only once JS confirms it can un-hide (`.hh-js` on ). No-JS and reduced-motion users always see fully-rendered content. */ .hh-js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); } .hh-js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .hh-js [data-reveal] { transition: opacity var(--hh-slow) var(--hh-ease-out), transform var(--hh-slow) var(--hh-ease-out); transition-delay: calc(var(--i, 0) * 60ms); } } @media (prefers-reduced-motion: reduce) { .hh-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Skeleton placeholders for async (reviews) blocks */ .hh-skel { background: linear-gradient(90deg, var(--hh-skel-a) 25%, var(--hh-skel-b) 37%, var(--hh-skel-a) 63%); background-size: 400% 100%; border-radius: 8px; color: transparent !important; user-select: none; } @media (prefers-reduced-motion: no-preference) { .hh-skel { animation: hh-shimmer 1.4s ease-in-out infinite; } @keyframes hh-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } } .hh-skel--line { height: 12px; margin: 0 0 10px; } .hh-skel--line:last-child { width: 62%; margin-bottom: 0; } .hh-skel--pill { height: 26px; width: 120px; border-radius: 999px; } /* Shared press feedback (transform only — never shifts layout) */ .hh-press { transition: transform var(--hh-fast) var(--hh-ease); } .hh-press:active { transform: scale(.975); } @media (prefers-reduced-motion: reduce) { .hh-press:active { transform: none; } } /* ============================================================ 2. Header — condense + elevate on scroll ============================================================ */ .navbar { transition: box-shadow var(--hh-base) var(--hh-ease), background var(--hh-base) var(--hh-ease); } .navbar.is-stuck { box-shadow: 0 6px 24px -14px rgba(15, 27, 45, .45); background: var(--hh-navbar); } @media (prefers-reduced-motion: reduce) { .navbar { transition: none; } } /* Skip link — keyboard users land on content, not the 60-link mega menu */ .hh-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--juno-green); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: var(--r-pill); transition: top var(--hh-fast) var(--hh-ease); text-decoration: none !important; } .hh-skip:focus { top: 12px; } /* ============================================================ 3. HERO — search-led (the pattern's core conversion device) ============================================================ */ .hh-hero { position: relative; overflow: hidden; /* decorative blobs never cause h-scroll */ padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 5vw, 72px); background: radial-gradient(1100px 520px at 78% -10%, var(--hh-hero-wash-1), transparent 60%), radial-gradient(760px 420px at 4% 8%, var(--hh-hero-wash-2), transparent 62%), var(--cream); } .hh-hero__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .hh-hero__copy { min-width: 0; } .hh-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: var(--r-pill); padding: 7px 15px; font-family: var(--font-display); font-weight: 600; font-size: .84rem; } .hh-eyebrow svg { width: 15px; height: 15px; color: var(--juno-green); flex: none; } .hh-eyebrow > span { min-width: 0; } .hh-eyebrow b { color: var(--ink); font-weight: 700; } .hh-hero h1 { font-size: clamp(2.15rem, 5.4vw, 3.7rem); line-height: 1.02; letter-spacing: -.035em; margin: 18px 0 0; text-wrap: balance; } .hh-hero h1 .g { color: var(--juno-green); } .hh-hero__sub { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--ink-soft); max-width: 46ch; margin: 14px 0 0; } /* ---- the search bar itself ---- */ .hh-search { margin: clamp(20px, 3vw, 28px) 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius-lg); box-shadow: 0 18px 44px -26px rgba(15, 27, 45, .40); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) auto; align-items: stretch; gap: 0; transition: box-shadow var(--hh-base) var(--hh-ease), border-color var(--hh-base) var(--hh-ease); } .hh-search:focus-within { border-color: color-mix(in srgb, var(--juno-green) 45%, var(--line)); box-shadow: 0 20px 48px -24px rgba(46, 139, 68, .45); } .hh-search__field { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; border-radius: 20px; transition: background var(--hh-fast) var(--hh-ease); } .hh-search__field:hover { background: var(--sand); } .hh-search__field:focus-within { background: var(--sand); } .hh-search__field > label { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } .hh-search__field select, .hh-search__field input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.4; } .hh-search__field select { padding-right: 22px; cursor: pointer; } .hh-search__field input::placeholder { color: var(--ink-faint); font-weight: 500; } .hh-search__field select:focus, .hh-search__field input:focus { outline: none; } /* focus ring lives on the field wrapper so it never clips inside the pill */ .hh-search__field:focus-within { box-shadow: inset 0 0 0 2px var(--juno-green); } .hh-search__caret { position: absolute; right: 14px; bottom: 14px; width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; } .hh-search__sep { width: 1px; background: var(--line); margin: 10px 0; } .hh-search__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 20px; cursor: pointer; background: var(--juno-green); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 0 26px; min-height: 58px; white-space: nowrap; box-shadow: var(--shadow-green); transition: background var(--hh-fast) var(--hh-ease), transform var(--hh-fast) var(--hh-ease); } .hh-search__go svg { width: 19px; height: 19px; flex: none; } .hh-search__go:hover { background: var(--juno-green-dark); } .hh-search__go:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .hh-search__go:active { transform: none; } } /* suburb typeahead listbox */ .hh-ac { position: absolute; z-index: 40; left: 6px; right: 6px; top: calc(100% + 6px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: 6px; max-height: 268px; overflow-y: auto; } .hh-ac:empty, .hh-ac[hidden] { display: none; } .hh-ac li { margin: 0; } .hh-ac button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; font-family: var(--font-body); font-size: .93rem; color: var(--ink); transition: background var(--hh-fast) var(--hh-ease); } .hh-ac button span { color: var(--ink-faint); font-size: .8rem; } .hh-ac button:hover, .hh-ac [aria-selected="true"] button { background: var(--juno-green-tint); } /* popular searches */ .hh-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .hh-pop__lab { font-size: .84rem; color: var(--ink-faint); font-weight: 600; } .hh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line-strong); font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-decoration: none !important; transition: color var(--hh-fast) var(--hh-ease), border-color var(--hh-fast) var(--hh-ease), background var(--hh-fast) var(--hh-ease), transform var(--hh-fast) var(--hh-ease); } .hh-chip:hover { color: var(--juno-green-dark); border-color: var(--juno-green); background: var(--juno-green-tint); } .hh-chip:active { transform: scale(.96); } .hh-chip b { color: var(--ink-faint); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .hh-chip:active { transform: none; } } /* honest trust line under the search bar */ .hh-heroproof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .hh-heroproof__it { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); } .hh-heroproof__it svg { width: 17px; height: 17px; color: var(--juno-green); flex: none; } .hh-rating { display: inline-flex; align-items: center; gap: 8px; } .hh-rating__stars { display: inline-flex; gap: 1px; color: #F5A623; } .hh-rating__stars svg { width: 15px; height: 15px; } .hh-rating__txt { font-size: .88rem; color: var(--ink-soft); } .hh-rating__txt b { color: var(--ink); font-family: var(--font-display); } .hh-rating[hidden] { display: none; } /* ---- hero photo stack (real job photos) ---- */ .hh-shots { position: relative; min-width: 0; } .hh-shots__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; } /*
carries margin: 1em 40px from the UA stylesheet. Unreset it ate 80px of every column and 32px of every row, so the authored 14px gap rendered as a 94px horizontal gutter, the photos were 80px narrower than their cells, the two columns ended 55px apart, and the guarantee float covered the hero caption completely. Same bug class as .ds-quote. */ .hh-shot { margin: 0; position: relative; overflow: hidden; border-radius: var(--hh-radius); background: var(--sand); box-shadow: 0 22px 50px -30px rgba(15, 27, 45, .6); } .hh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.03); } .hh-shot img.is-loaded { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .hh-shot img { transition: opacity 420ms var(--hh-ease-out), transform 620ms var(--hh-ease-out); } } @media (prefers-reduced-motion: reduce) { .hh-shot img { opacity: 1; transform: none; transition: none; } } .hh-shot--tall { grid-row: span 2; aspect-ratio: 3 / 4.35; } .hh-shot--wide { aspect-ratio: 4 / 3; } .hh-shot__cap { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--hh-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: 5px 11px; font-family: var(--font-display); font-weight: 700; font-size: .74rem; color: var(--ink); } .hh-shot__cap svg { width: 13px; height: 13px; color: var(--juno-green); flex: none; } .hh-float { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 11px 15px; box-shadow: var(--shadow-lg); z-index: 3; max-width: 78%; } .hh-float__ic { width: 36px; height: 36px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--juno-green-tint); color: var(--juno-green); } .hh-float__ic svg { width: 19px; height: 19px; } .hh-float b { display: block; font-family: var(--font-display); font-size: .95rem; line-height: 1.15; color: var(--ink); } .hh-float span { font-size: .74rem; color: var(--ink-faint); } .hh-float--guarantee { left: -14px; bottom: 44px; } .hh-float--live { right: -10px; top: -14px; } .hh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--juno-green-bright); flex: none; } @media (prefers-reduced-motion: no-preference) { .hh-dot { animation: hh-ping 2.2s var(--hh-ease) infinite; } @keyframes hh-ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 60% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); } } .hh-float--guarantee { animation: hh-bob 7s ease-in-out infinite; } .hh-float--live { animation: hh-bob 7s ease-in-out infinite reverse; } @keyframes hh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } } /* ============================================================ 4. Trust strip ============================================================ */ .hh-strip { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hh-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; padding: 15px 0; } .hh-strip__it { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); } .hh-strip__it svg { width: 19px; height: 19px; color: var(--juno-green); flex: none; } /* ============================================================ 5. Section furniture ============================================================ */ .hh-sec { padding: clamp(44px, 6vw, 76px) 0; } .hh-sec--sand { background: var(--sand); } .hh-sec--tight { padding: clamp(32px, 4vw, 56px) 0; } .hh-head { max-width: 660px; margin: 0 auto clamp(26px, 3vw, 40px); text-align: center; } .hh-head--left { margin-left: 0; text-align: left; } .hh-head h2 { font-size: clamp(1.6rem, 3.3vw, 2.35rem); letter-spacing: -.028em; margin: 0; text-wrap: balance; } .hh-head p { font-size: clamp(.97rem, 1.4vw, 1.06rem); color: var(--ink-soft); margin: 10px 0 0; } .hh-kicker { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--juno-green); margin-bottom: 10px; } /* ============================================================ 6. Categories (14 live services) ============================================================ */ .hh-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .hh-cat { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none !important; cursor: pointer; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); padding: 18px 10px 15px; transition: transform var(--hh-base) var(--hh-ease), box-shadow var(--hh-base) var(--hh-ease), border-color var(--hh-base) var(--hh-ease); } .hh-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .hh-cat:active { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .hh-cat:hover, .hh-cat:active { transform: none; } } .hh-cat__ic { width: 50px; height: 50px; border-radius: 16px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--juno-green-tint); color: var(--juno-green); transition: transform var(--hh-base) var(--hh-ease); } .hh-cat:hover .hh-cat__ic { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .hh-cat:hover .hh-cat__ic { transform: none; } } .hh-cat__ic svg { width: 24px; height: 24px; } .hh-cat__n { font-family: var(--font-display); font-weight: 600; font-size: .85rem; line-height: 1.2; color: var(--ink); } .hh-cat__p { font-size: .76rem; font-weight: 700; color: var(--juno-green-dark); } .hh-cat--all .hh-cat__ic { background: var(--sand); color: var(--ink-soft); } .hh-soon { margin-top: clamp(24px, 3vw, 34px); text-align: center; } .hh-soon p { font-size: .9rem; color: var(--ink-faint); margin: 0 0 12px; } .hh-soon__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .hh-soon__it { padding: 6px 13px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); background: transparent; font-size: .82rem; font-weight: 600; color: var(--ink-faint); } /* ============================================================ 7. Featured listings — real photos, real prices ============================================================ */ .hh-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); } .hh-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); text-decoration: none !important; cursor: pointer; transition: transform var(--hh-base) var(--hh-ease), box-shadow var(--hh-base) var(--hh-ease); } .hh-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .hh-card:active { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .hh-card:hover, .hh-card:active { transform: none; } } .hh-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); } .hh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; } .hh-card__media img.is-loaded { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hh-card__media img { transition: opacity 400ms var(--hh-ease-out), transform 520ms var(--hh-ease-out); } .hh-card:hover .hh-card__media img.is-loaded { transform: scale(1.055); } } @media (prefers-reduced-motion: reduce) { .hh-card__media img { opacity: 1; transition: none; } } .hh-card__tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--hh-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: 5px 11px; font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--ink); } .hh-card__tag svg { width: 13px; height: 13px; color: var(--juno-green); flex: none; } .hh-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 15px 17px 17px; } .hh-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: var(--ink); } .hh-card__desc { font-size: .88rem; color: var(--ink-soft); flex: 1; margin: 0; } .hh-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; } .hh-card__price { font-size: .76rem; color: var(--ink-faint); line-height: 1.2; } .hh-card__price b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); line-height: 1.1; } .hh-card__go { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: .87rem; color: var(--juno-green); } .hh-card__go svg { width: 15px; height: 15px; transition: transform var(--hh-base) var(--hh-ease); } .hh-card:hover .hh-card__go svg { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .hh-card:hover .hh-card__go svg { transform: none; } } .hh-more { text-align: center; margin-top: clamp(22px, 3vw, 32px); } /* ============================================================ 8. How it works ============================================================ */ .hh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); } .hh-step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); padding: 24px 22px; transition: transform var(--hh-base) var(--hh-ease), box-shadow var(--hh-base) var(--hh-ease); } .hh-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } @media (prefers-reduced-motion: reduce) { .hh-step:hover { transform: none; } } .hh-step__n { position: absolute; top: 16px; right: 20px; line-height: 1; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--juno-green-tint); } .hh-step__ic { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; background: var(--juno-green-tint); color: var(--juno-green); } .hh-step__ic svg { width: 23px; height: 23px; } .hh-step h3 { font-size: 1.1rem; margin: 0 0 6px; } .hh-step p { font-size: .92rem; color: var(--ink-soft); margin: 0; } /* ============================================================ 9. Real social proof ============================================================ */ .hh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 720px; margin: 0 auto clamp(26px, 3vw, 38px); } .hh-stat { text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); padding: 20px 14px; } .hh-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--juno-green); line-height: 1.05; font-variant-numeric: tabular-nums; } .hh-stat span { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 4px; } .hh-stats[hidden], .hh-reviews[hidden] { display: none; } .hh-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); } .hh-rev { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); padding: 22px; } .hh-rev__stars { display: flex; gap: 2px; color: #F5A623; margin-bottom: 12px; } .hh-rev__stars svg { width: 16px; height: 16px; } .hh-rev blockquote { margin: 0 0 16px; flex: 1; font-size: .93rem; line-height: 1.65; color: var(--ink); } .hh-rev__who { display: flex; align-items: center; gap: 11px; } .hh-rev__ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--juno-green-tint); color: var(--juno-green-dark); font-family: var(--font-display); font-weight: 700; font-size: .9rem; } .hh-rev__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink); line-height: 1.25; } .hh-rev__meta { display: block; } .hh-rev__meta { font-size: .76rem; color: var(--ink-faint); } .hh-proof-foot { text-align: center; margin-top: clamp(20px, 2.5vw, 28px); } .hh-proof-foot a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; } /* ============================================================ 10. Trust & safety ============================================================ */ .hh-safety { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); } .hh-safe { background: var(--paper); border: 1px solid var(--line); border-radius: var(--hh-radius); padding: 22px; transition: transform var(--hh-base) var(--hh-ease), box-shadow var(--hh-base) var(--hh-ease); } .hh-safe:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } @media (prefers-reduced-motion: reduce) { .hh-safe:hover { transform: none; } } .hh-safe__ic { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 13px; display: flex; align-items: center; justify-content: center; background: var(--juno-green-tint); color: var(--juno-green); } .hh-safe__ic svg { width: 22px; height: 22px; } .hh-safe h3 { font-size: 1.02rem; margin: 0 0 6px; } .hh-safe p { font-size: .89rem; color: var(--ink-soft); margin: 0; } /* ============================================================ 11. Become a Pro ============================================================ */ .hh-pro { position: relative; overflow: hidden; border-radius: var(--hh-radius-lg); background: var(--hh-pro-grad); color: #fff; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(22px, 3vw, 44px); align-items: center; } .hh-pro::after { content: ''; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; } .hh-pro__copy { position: relative; z-index: 1; min-width: 0; } .hh-pro h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0; letter-spacing: -.025em; } .hh-pro p { color: rgba(255, 255, 255, .9); margin: 12px 0 0; max-width: 46ch; } .hh-pro__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; } .hh-pro__list li { display: flex; align-items: flex-start; gap: 9px; font-size: .95rem; color: rgba(255, 255, 255, .93); } .hh-pro__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #C9F5D4; } .hh-pro__actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .hh-btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--hh-btn-white-bg); color: var(--hh-btn-white-fg); font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 15px 28px; border-radius: var(--r-pill); border: 2px solid var(--hh-btn-white-bg); text-decoration: none !important; cursor: pointer; transition: transform var(--hh-fast) var(--hh-ease), background var(--hh-fast) var(--hh-ease); } .hh-btn-white:hover { background: #F1FBF3; transform: translateY(-2px); } .hh-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 15px 28px; border-radius: var(--r-pill); text-decoration: none !important; cursor: pointer; transition: transform var(--hh-fast) var(--hh-ease), border-color var(--hh-fast) var(--hh-ease), background var(--hh-fast) var(--hh-ease); } .hh-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .12); transform: translateY(-2px); } .hh-btn-white:active, .hh-btn-outline:active { transform: translateY(0) scale(.98); } @media (prefers-reduced-motion: reduce) { .hh-btn-white:hover, .hh-btn-outline:hover, .hh-btn-white:active, .hh-btn-outline:active { transform: none; } } /* ============================================================ 12. App band ============================================================ */ .hh-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; } .hh-app__copy { min-width: 0; } .hh-app__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--juno-green-tint); color: var(--juno-green-dark); border-radius: var(--r-pill); padding: 6px 14px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; margin-bottom: 14px; } .hh-app__badge svg { width: 15px; height: 15px; } .hh-app__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .hh-app__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--ink-soft); } .hh-app__list svg { width: 18px; height: 18px; color: var(--juno-green); flex: none; margin-top: 3px; } .hh-app__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .hh-phone { width: 236px; flex: none; border-radius: 34px; padding: 9px; background: var(--hh-phone-body); box-shadow: 0 34px 60px -30px rgba(15, 27, 45, .7); } /* The screen is a real screenshot now, so the frame just holds it. Ratio comes from the file itself (368x793) rather than a guessed 9/17.5, so nothing is letterboxed or cropped. Keep this in step with the file: the ratio must match the asset exactly, or object-fit: cover silently crops an edge off. */ .hh-phone__scr { display: block; width: 100%; height: auto; border-radius: 26px; overflow: hidden; background: #0E141C; aspect-ratio: 368 / 793; object-fit: cover; } /* ============================================================ 13. Sticky mobile book bar ============================================================ */ .hh-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); background: var(--hh-sticky-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); } .hh-sticky.is-up { transform: none; } @media (prefers-reduced-motion: no-preference) { .hh-sticky { transition: transform var(--hh-slow) var(--hh-ease-out); } } @media (prefers-reduced-motion: reduce) { .hh-sticky { transition: none; transform: none; } } .hh-sticky__p { min-width: 0; } .hh-sticky__p b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); line-height: 1.15; } .hh-sticky__p span { font-size: .74rem; color: var(--ink-faint); } @media (max-width: 880px) { .hh-sticky { display: flex; } body { padding-bottom: 66px; } } /* ============================================================ 14. Responsive ============================================================ */ @media (max-width: 1180px) { .hh-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1024px) { .hh-hero__inner { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); } /* Copy + search bar lead on small screens: the marketplace pattern wants the search field in the first fold, not a photo. */ .hh-shots { max-width: 620px; margin: 0 auto; width: 100%; } .hh-shot--tall { aspect-ratio: 3 / 3.6; } .hh-float--live { right: 4px; } .hh-float--guarantee { left: 4px; } .hh-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* .hh-app deliberately NOT collapsed here — see the 820px rule below. */ .hh-app__copy { text-align: left; max-width: 560px; } .hh-app__actions { justify-content: flex-start; } } @media (max-width: 900px) { .hh-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hh-reviews { grid-template-columns: 1fr; } .hh-steps { grid-template-columns: 1fr; } .hh-pro { grid-template-columns: 1fr; } .hh-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 780px) { /* search bar stacks — the button becomes a full-width primary action */ .hh-search { grid-template-columns: 1fr; border-radius: var(--hh-radius); padding: 6px; } .hh-search__sep { width: auto; height: 1px; margin: 0 14px; } .hh-search__go { min-height: 54px; margin-top: 6px; } .hh-stats { grid-template-columns: 1fr; max-width: 420px; } } @media (max-width: 620px) { .hh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hh-cat { padding: 15px 7px 13px; } .hh-cat__ic { width: 44px; height: 44px; border-radius: 14px; } .hh-cat__ic svg { width: 21px; height: 21px; } .hh-cat__n { font-size: .78rem; } .hh-feat { grid-template-columns: 1fr; } .hh-safety { grid-template-columns: 1fr; } /* The floating cards fight the photos at this width and clip their captions. Both claims already appear verbatim in .hh-heroproof and .hh-strip, so nothing is lost by dropping them here. */ .hh-float { display: none; } .hh-shots__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .hh-shot--tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } .hh-shot--wide { aspect-ratio: 1 / 1; } /* The caption pill is wider than a half-width thumbnail at this size and wraps to two lines inside it — keep it only on the lead photo. */ .hh-shot__cap { left: 8px; bottom: 8px; padding: 4px 9px; font-size: .68rem; } .hh-shot--wide .hh-shot__cap { display: none; } .hh-heroproof { gap: 8px 14px; } } @media (max-width: 340px) { .hh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 15. Dark mode — flip the `--hh-*` switches ONLY. The token layer (paper/ink/line/juno-green/shadows) is owned by css/tokens.css, which loads after this file. These selectors are the exact pair tokens.css uses, so light/dark can never desynchronise: /* The unscrolled navbar background is hard-coded light in brand.css. */ /* Mega-menu panel elevation needs more contrast on a dark surface. */ /* ============================================================ App phone — one 3D settle on first scroll into view ------------------------------------------------------------ The frame starts turned away on the Y axis and rotates flat as it enters. It runs ONCE per page load, not on every scroll past: .is-settled is added by the observer and never removed. Kept deliberately small. A large rotation on a tall element reads as a flip and drags the eye off the copy beside it, so this is 18deg of yaw with a touch of X tilt, which is enough to register as depth without becoming the subject. ============================================================ */ .hh-app { perspective: 1400px; } .hh-phone { transform-style: preserve-3d; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .hh-phone { transform: perspective(1400px) rotateY(18deg) rotateX(6deg) translateZ(-40px); opacity: .85; } .hh-phone.is-settled { transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateZ(0); opacity: 1; /* Long and heavily eased-out so it decelerates into place rather than arriving and stopping. cubic-bezier(.16,1,.3,1) is the same curve the rest of the design system uses, so it feels like one system. */ transition: transform 1400ms cubic-bezier(.16, 1, .3, 1), opacity 900ms cubic-bezier(.16, 1, .3, 1); } } /* No transform at all when reduced motion is requested: a 3D rotation is exactly the kind of movement that preference exists to stop. */ @media (prefers-reduced-motion: reduce) { .hh-phone, .hh-phone.is-settled { transform: none; opacity: 1; transition: none; } } /* ============================================================ App section — hold the two-column layout The generic 1024px breakpoint collapsed this to one column and dropped the phone under the copy on ordinary laptop widths. The phone is only 236px wide, so the pair fits comfortably far below that; it stacks at 820px, where the copy genuinely runs out of room. ============================================================ */ @media (min-width: 821px) { .hh-app { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; text-align: left; } } @media (max-width: 820px) { .hh-app { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hh-app__copy { text-align: left; max-width: 560px; } .hh-app__actions, .hh-app .ds-stores { justify-content: flex-start; } }