in a card's text 3.3rem under it, which was pushing the chat's bubbles apart */ .hm-chat .hm-chat__b { margin: 0; } @media only screen and (max-width: 767px) { .mxd-testimonials-card, .mxd-testimonials-card__content { gap: 2.4rem; } .mxd-testimonials-card__photo { width: 6.4rem; height: 6.4rem; } } @media only screen and (min-width: 768px) { .mxd-testimonials-card { height: 100%; min-height: 600px; } .mxd-testimonials-card__content { gap: 2.6rem; } .mxd-testimonials-card__photo { width: 8.4rem; height: 8.4rem; } } @media only screen and (min-width: 1400px) { .mxd-testimonials-card { min-height: 640px; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-card { min-height: 700px; } } @media only screen and (min-width:1440px){ .hero-01-title__item.title-item-transparent{width:520px} .mxd-hero-01__marquee{width:520px} .mxd-hero-01__marquee .marquee__item.item-regular p{font-size:12rem} } @media only screen and (min-width:1600px){ .hero-01-title__item.title-item-transparent{width:600px} .mxd-hero-01__marquee{width:600px} .mxd-hero-01__marquee .marquee__item.item-regular p{font-size:14rem} } /* The pill's step: rest on a centred word, slide one item on, and loop (the next word is the same, so the loop is seamless). Reduced motion: the word rests centred. */ .hm-step-marquee .marquee__toright { display: flex; flex-wrap: nowrap; width: max-content; } .hm-step-marquee .marquee__toright.hm-stepping { transform: translateX(var(--hm-x0)); } @media (prefers-reduced-motion: no-preference) { .hm-step-marquee .marquee__toright.hm-stepping { animation: hm-pill-step 3.4s cubic-bezier(0.76, 0, 0.24, 1) infinite; } } @keyframes hm-pill-step { 0%, 64% { transform: translateX(var(--hm-x0)); } 100% { transform: translateX(calc(var(--hm-x0) - var(--hm-step))); } } /* The closing call to action: from 1200 the theme puts its picture in the right half and lets the heading run 60-70% wide, over it. Ours is a light animation, so the heading keeps to the black half (50% of the content box, less a gap) and breaks after "care" (the founder: "lets break the lets take care of your home properly so it all sits on black area"). */ /* Below 1200 the heading is the card's full width, and on a phone "Let's take care" with the mascot (about 7.9 font-sizes) was wider than the card, so "care" fell to a line of its own above the break (the founder, 2026-10-11: "I hate how this brs with care being on one line alone. Fix this for all similar cards on all pages"). The size now comes from the card's width the same way it does from 1200, so the first line always fits, capped at the theme's 4.4rem / 8rem; a heading with no break of its own (the pros page's) balances its lines. */ .mxd-promo__inner { container-type: inline-size; } .mxd-promo__caption { text-wrap: balance; } @media only screen and (max-width: 767px) { .mxd-promo__caption { font-size: min(4.4rem, calc(100cqi / 8.4)); } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .mxd-promo__caption { font-size: min(8rem, calc(100cqi / 8.4)); } } @media only screen and (min-width: 1200px) { /* "Let's take care" with the mascot measures about 7.9 font-sizes; the black half is 50% of the card's content box, so the heading scales from that (container units) and the first line always fits, capped at 10rem */ .mxd-promo__inner { container-type: inline-size; } .mxd-promo__title { width: calc(50% - 3rem); } .mxd-promo__caption { font-size: min(10rem, calc((50cqi - 3rem) / 8.2)); } } /* ── The handled pill on a phone (<768). The pill is the column's full width there, wider than its word, so with the theme's 1rem gaps a resting pill also showed the star and part of the next word, and each loop's restart popped the left-hand ones away (measured in the pill at rest: 390 → star + 7px of the next word, 600 → 96px, 767 → 179px). Each gap opens to half the pill, so at rest only the centred word shows at any phone width and the restart has nothing to pop; handyman.js measures the longer step from the layout. ──────────────────────────── */ @media only screen and (max-width:767px){ .hm-step-marquee .marquee-flex, .hm-step-marquee .marquee__item.item-regular{gap:calc((100vw - 6rem) / 2)} } /* Header: the Handyman wordmark, one file for both modes (its letters carry their own white outline). The mascot takes a third of its width, so it sits taller than a text-only mark would. */ .hm-wordmark { display: block; height: 6rem; width: auto; } @media only screen and (min-width: 768px) { .hm-wordmark { height: 7.6rem; } } @media only screen and (min-width: 1200px) { .hm-wordmark { height: 8.8rem; } } .hm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The crew of four animated agents: in a row over the loader's count, around the home headline, and one in a corner of a few sections per page. Always behind the content and never in the way of a tap. */ .hm-loader-crew { position: absolute; inset: 0; pointer-events: none; } .hm-loader-crew img { position: absolute; height: auto; transform: rotate(var(--r)); animation: hm-crew-in .7s cubic-bezier(.34,1.56,.64,1) both; } .hm-loader-crew .hm-loader-mark { --r: 0deg; top: 5.6rem; left: 50%; width: 17rem; margin-left: -8.5rem; } .hm-loader-crew__1 { --r: -9deg; width: 12rem; top: 18%; left: 6%; } .hm-loader-crew__2 { --r: 7deg; width: 9rem; top: 25%; right: 8%; animation-delay: .12s !important; } .hm-loader-crew__3 { --r: 6deg; width: 10rem; bottom: 15%; left: 12%; animation-delay: .24s !important; } .hm-loader-crew__4 { --r: -6deg; width: 12.5rem; bottom: 8%; right: 7%; animation-delay: .36s !important; } @media only screen and (min-width: 768px) { .hm-loader-crew .hm-loader-mark { top: 6rem; width: 26rem; margin-left: -13rem; } .hm-loader-crew__1 { width: 17rem; top: 12%; left: 12%; } .hm-loader-crew__2 { width: 13rem; top: 14%; right: 15%; } .hm-loader-crew__3 { width: 14rem; bottom: 14%; left: 20%; } .hm-loader-crew__4 { width: 18rem; bottom: 10%; right: 12%; } } @keyframes hm-crew-in { from { transform: scale(.3) rotate(var(--r)); } to { transform: scale(1) rotate(var(--r)); } } @media (prefers-reduced-motion: reduce) { .hm-loader-crew img { animation: none; } } .hm-crew-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mxd-hero-01 > .mxd-hero-01__wrap { position: relative; z-index: 1; } .hm-crew-hero { position: absolute; width: 7rem; height: auto; } .hm-crew-hero--1 { left: 3%; top: 58%; } .hm-crew-hero--2 { right: 4%; top: 16%; } .hm-crew-hero--3 { left: 24%; top: 6%; } .hm-crew-hero--4 { right: 9%; top: 64%; } @media only screen and (min-width: 768px) { .hm-crew-hero { width: 10rem; } } @media only screen and (min-width: 1600px) { .hm-crew-hero { width: 13rem; } } .mxd-section:has(> .hm-crew-pop) { position: relative; } .mxd-section:has(> .hm-crew-pop) > :not(.hm-crew-pop) { position: relative; z-index: 1; } .hm-crew-pop { position: absolute; z-index: 0; pointer-events: none; width: 6rem; height: auto; } .hm-crew-pop--tr { top: 1.6rem; right: 2%; } .hm-crew-pop--tl { top: 1.6rem; left: 2%; } .hm-crew-pop--br { bottom: 1.6rem; right: 2%; } .hm-crew-pop--bl { bottom: 1.6rem; left: 2%; } @media only screen and (min-width: 768px) { .hm-crew-pop { width: 9rem; } } @media only screen and (min-width: 1600px) { .hm-crew-pop { width: 11rem; } } /* The example cards' channel names at one height and their own width: the theme capped the box at 18rem, which cut "WhatsApp" off ("make whatsapp not overflow and get cut off"). */ .mxd-testimonials-card__company { max-width: none; flex: none; } .mxd-testimonials-card__company img { height: 3rem; width: auto; max-width: none; display: block; } @media only screen and (min-width: 768px) { .mxd-testimonials-card__company img { height: 3.6rem; } } /* The built-by pill over the hero's headline, centred: /join's pill (the founder: "use a pill similar to the one on /join"), a dark capsule with a red-to-amber rim, WeReno's wordmark, two lines and the way out. Phones drop the wordmark and the arrow and shorten the chip, so it stays one pill on a 390 px screen. */ /* Above the hero's floating images (the founder, 2026-10-15: "handyman is built by wereno pill is unclickable on smaller screens i think the text div covers it"). .mxd-hero-01__images is absolutely positioned across the whole title area, so it painted over this static pill at every width and took its clicks. Its videos are decoration only. */ .hm-built { position: relative; z-index: 2; display: flex; justify-content: center; margin-bottom: 2.4rem; } @media only screen and (min-width: 1200px) { .hm-built { margin-bottom: 3.2rem; } } .hm-backed { display: inline-flex; align-items: center; gap: 1.4rem; max-width: 100%; padding: .9rem .9rem .9rem 1.8rem; border: 1.5px solid transparent; border-radius: 999px; color: #fff; text-decoration: none; text-align: left; background: linear-gradient(135deg, #221a1d, #121012) padding-box, linear-gradient(115deg, #ff2e63, #ffb86b 55%, rgba(255,255,255,.25)) border-box; box-shadow: 0 14px 30px rgba(22,18,20,.22); transition: transform .2s ease, box-shadow .2s ease; } .hm-backed:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(22,18,20,.3); } .hm-backed__we { display: block; flex: none; height: 2.1rem; width: auto; } .hm-backed__t { display: grid; gap: .3rem; padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.14); } .hm-backed__l1 { display: flex; align-items: center; gap: .8rem; } .hm-backed__l1 b { font-size: 1.45rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; color: #fff; white-space: nowrap; } .hm-backed__yc { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .8rem .2rem .3rem; border-radius: 999px; background: rgba(251,101,30,.18); color: #ffb089; font-style: normal; font-weight: 600; font-size: 1.2rem; line-height: 1.3; white-space: nowrap; } .hm-backed__yc img { display: block; width: 1.4rem; height: 1.4rem; border-radius: .3rem; } .hm-backed__yc-short { display: none; } .hm-backed__l2 { font-size: 1.25rem; line-height: 1.3; color: rgba(255,255,255,.72); white-space: nowrap; text-align: center; } .hm-backed__go { display: grid; place-items: center; flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255,255,255,.1); transition: transform .2s ease, background .2s ease; } .hm-backed__go svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hm-backed:hover .hm-backed__go { transform: translate(2px, -2px); background: linear-gradient(135deg, #ff2e63, #ff003f); } @media only screen and (max-width: 1199px) { .hm-backed { padding: .8rem 1.6rem; border-radius: 2.2rem; text-align: center; } .hm-backed__we, .hm-backed__go { display: none; } .hm-backed__t { padding-left: 0; border-left: 0; justify-items: center; } .hm-backed__l1 { flex-wrap: wrap; justify-content: center; row-gap: .4rem; gap: .6rem; } } @media only screen and (max-width: 767px) { .hm-backed__l1 b { font-size: 1.35rem; } .hm-backed__yc-long { display: none; } .hm-backed__yc-short { display: inline; } .hm-backed__l2 { font-size: 1.2rem; } /* A phone gets three pills instead of one card (the founder, 2026-10-11: "show 3 pills instead of 1 larger card pill ... handyman is built by wereno yc part as one long pill then the two facts in individual pills under it"): the link itself goes bare, the first line becomes the dark rimmed capsule, and each fact gets its own. */ .hm-backed { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .hm-backed:hover { transform: none; box-shadow: none; } .hm-backed__t { display: flex; flex-direction: column; align-items: center; gap: .8rem; } .hm-backed__l1 { flex-wrap: nowrap; max-width: 100%; padding: .8rem .8rem .8rem 1.6rem; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(135deg, #221a1d, #121012) padding-box, linear-gradient(115deg, #ff2e63, #ffb86b 55%, rgba(255,255,255,.25)) border-box; box-shadow: 0 14px 30px rgba(22,18,20,.22); } .hm-backed__l2 { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; font-size: 1.25rem; color: #fff; } .hm-backed__sep { display: none; } .hm-backed__stat { display: inline-flex; align-items: center; padding: .65rem 1.3rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: linear-gradient(135deg, #221a1d, #121012); box-shadow: 0 10px 22px rgba(22,18,20,.18); font-weight: 600; color: rgba(255,255,255,.88); } .hm-backed:active .hm-backed__l1 { transform: translateY(1px); } } /* Rayo's hero is exactly one window tall from 1200, its headline centred in what is left: on a short laptop (1280 x 800) the pill and the headline outgrow it and ride up under the header. The hero now grows with its content instead (at least one window tall, so tall screens look as before), and its headline block starts clear of the header. */ @media only screen and (min-width: 1200px) { .mxd-hero-fullheight { display: flex; flex-direction: column; height: auto; min-height: 100vh; } .mxd-hero-fullheight > .mxd-hero-01 { display: flex; flex-direction: column; flex: 1 0 auto; height: auto; } .mxd-hero-01 > .mxd-hero-01__wrap { display: flex; flex-direction: column; flex: 1 0 auto; height: auto; } .mxd-hero-01__top { flex: 1 0 auto; height: auto; padding-top: 4.4rem; } .mxd-hero-01__bottom { flex: none; } } /* Below 1200 the label sits where the third mascot stood, so it perches centred just above the label instead. (The hero's two top cards are placed by handyman.js: placeHeroCards.) */ @media only screen and (max-width: 1199px) { .hm-crew-hero--3 { left: 50%; margin-left: -3.5rem; top: 2.6rem; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .hm-crew-hero--3 { margin-left: -5rem; top: 1rem; } } /* Get started, centred under the headline, with the spinning keys just left of it (placeHeroCards in handyman.js; the founder first moved them off "remembered", then beside the button). The gap above and the room below hold the part of the circle that is taller than the button. */ .hm-hero-cta { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 3.2rem; } @media only screen and (min-width: 768px) { .hm-hero-cta { margin-top: 4rem; } .mxd-hero-01__title-wrap { padding-bottom: 3.2rem; } } @media only screen and (min-width: 1200px) { .hm-hero-cta { margin-top: 5.6rem; } .mxd-hero-01__title-wrap { padding-bottom: 4.4rem; } } @media only screen and (min-width: 1600px) { .hm-hero-cta { margin-top: 7.2rem; } .mxd-hero-01__title-wrap { padding-bottom: 6.4rem; } } /* Very soft colour orbs behind every page, both modes (the founder: "add very subtle gradient orbs to the bg on light and dark mode theyre too plain"): violet, lime and a warm peach, fixed to the window so they never scroll away. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42vmax 42vmax at 6% 10%, rgba(159,139,231,.16), transparent 62%), radial-gradient(38vmax 38vmax at 96% 34%, rgba(196,226,80,.13), transparent 62%), radial-gradient(46vmax 46vmax at 64% 102%, rgba(255,184,107,.12), transparent 62%); } [color-scheme="dark"] body::before { background: radial-gradient(42vmax 42vmax at 6% 10%, rgba(159,139,231,.11), transparent 62%), radial-gradient(38vmax 38vmax at 96% 34%, rgba(221,241,96,.06), transparent 62%), radial-gradient(46vmax 46vmax at 64% 102%, rgba(255,140,90,.06), transparent 62%); } /* The Follow WeReno card's built-by card: the hero pill's dark capsule colours with a warm glow, WeReno and its YC batch, a line on what WeReno is, the two numbers in gradient type, and the way out; pushed to the foot of the card, just above the copyright line. */ .footer-blocks__card.fullheight-card:has(.hm-footer-built) { display: flex; flex-direction: column; } /* Rayo's footer columns are exactly 650 px tall from 1200; the card made the Follow column taller than that, so the columns grow with their content now (at least 650 px, and the row keeps them equal). */ @media only screen and (min-width: 1200px) { .footer-blocks__column { height: auto; min-height: 650px; } } .hm-footer-built { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.6rem; margin: auto 0 2.4rem; padding: 2.6rem 2.6rem 2.4rem; border: 1.5px solid transparent; border-radius: 2.8rem; color: #fff; text-decoration: none; background: linear-gradient(150deg, #241b1f 0%, #141113 55%, #0e0c0d 100%) padding-box, linear-gradient(115deg, #ff2e63, #ffb86b 50%, rgba(255,255,255,.18) 80%) border-box; box-shadow: 0 24px 48px -20px rgba(22,18,20,.45); transition: transform .25s ease, box-shadow .25s ease; } .hm-footer-built::before, .hm-footer-built::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transition: opacity .3s ease, transform .6s ease; } .hm-footer-built::before { width: 26rem; height: 26rem; top: -12rem; right: -8rem; background: radial-gradient(closest-side, rgba(255,46,99,.34), rgba(255,46,99,0)); } .hm-footer-built::after { width: 22rem; height: 22rem; bottom: -12rem; left: -6rem; background: radial-gradient(closest-side, rgba(255,184,107,.2), rgba(255,184,107,0)); } .hm-footer-built:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -18px rgba(255,46,99,.35); } .hm-footer-built:hover::before { transform: scale(1.15); } .hm-footer-built__top { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .hm-footer-built__we { display: block; height: 3rem; width: auto; } .hm-footer-built .hm-backed__yc { font-size: 1.3rem; padding: .35rem 1rem .35rem .4rem; } .hm-footer-built .hm-backed__yc img { width: 1.6rem; height: 1.6rem; } .hm-footer-built__eyebrow { margin-top: .4rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffb089; } .hm-footer-built__text { margin-top: -.6rem; font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.8); } .hm-footer-built__stats { display: grid; grid-template-columns: 1fr 1fr; border-radius: 2rem; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04); } .hm-footer-built__stat { display: flex; flex-direction: column; gap: .3rem; padding: 1.4rem 1.6rem 1.5rem; } .hm-footer-built__stat + .hm-footer-built__stat { border-left: 1px solid rgba(255,255,255,.09); } .hm-footer-built__stat b { font: normal 700 3.6rem/1 var(--_font-accent); letter-spacing: -.02em; background: linear-gradient(115deg, #ff5a7e, #ffb86b); -webkit-background-clip: text; background-clip: text; color: transparent; } .hm-footer-built__stat small { font-size: 1.3rem; line-height: 1.3; color: rgba(255,255,255,.66); } .hm-footer-built__go { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.4rem; font-weight: 600; color: #fff; } .hm-footer-built__go i { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255,255,255,.1); transition: transform .2s ease, background .2s ease; } .hm-footer-built__go svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hm-footer-built:hover .hm-footer-built__go i { transform: translate(2px, -2px); background: linear-gradient(135deg, #ff2e63, #ff003f); } @media only screen and (max-width: 767px) { .hm-footer-built { padding: 2.2rem 2rem 2rem; gap: 1.4rem; } .hm-footer-built__stat { padding: 1.2rem 1.3rem 1.3rem; } .hm-footer-built__stat b { font-size: 3rem; } } /* ── The footer's three columns fit the window (lane 128, 2026-10-17). From 1200 px Rayo sets the columns in a row, each flex: 1 but never narrower than its content, and ours is wider than a third of a 1200-1385 px window (the four policy links in one unbreakable row, the address, the built-by card's numbers). So the Follow column ran past the right edge and every page with the footer scrolled sideways: 94 px in the founder's 1232 px window, 126 px at 1200. The reveal never caused it: the page was as wide before, during and after the cards rise. The columns now share the row whatever is in them, the policy links sit two by two, and from 1200 to 1439 the cards' padding and the type step down with the window so nothing is cut or crowded; 1440 and up keep the theme's sizes. ── */ @media only screen and (min-width: 1200px) { .mxd-footer__footer-blocks > .footer-blocks__column { min-width: 0; } .footer-blocks__nav ~ .footer-blocks__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: space-between; gap: .6rem 1.6rem; } .footer-nav__link .btn-caption { white-space: nowrap; } /* a word too long now spills, never hides under the clip */ } @media only screen and (min-width: 1200px) and (max-width: 1439.98px) { .footer-blocks__card { padding: clamp(3rem, calc(8.3333vw - 7rem), 5rem); } /* 3rem at 1200, the theme's 5rem at 1440 */ .footer-nav__link { font-size: clamp(3.4rem, calc(4.1667vw - 1.6rem), 4.4rem); } /* 3.4rem at 1200, 4.4rem at 1440 */ .footer-nav__link .btn-caption { height: 1.2em; } .footer-blocks__card .mxd-point-subtitle { font-size: clamp(2rem, calc(.8333vw + 1rem), 2.2rem); } .hm-footer-built { padding: 2.2rem 2rem 2rem; gap: 1.4rem; } .hm-footer-built__stat { padding: 1.2rem 1.3rem 1.3rem; } .hm-footer-built__stat b { font-size: 3rem; } } /* The featured post on Insights: Rayo writes its words in white for a dark photo, and our animations are light, so they could not be read (the founder: "font on the card on insights is hard to read fix that"). Ink in both modes, since the animation stays light in both, over a soft wash from the side the words sit on. */ .post-featured { --pt-t-light-bright: #161616; --pt-st-light-bright: rgba(22,22,22,.32); position: relative; } .post-featured__thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250,247,246,.94) 0%, rgba(250,247,246,.82) 38%, rgba(250,247,246,0) 72%); } .post-featured__meta svg { fill: #161616; color: #161616; } @media only screen and (max-width: 767px) { .post-featured__thumb::after { background: linear-gradient(0deg, rgba(250,247,246,.95) 0%, rgba(250,247,246,.8) 55%, rgba(250,247,246,.35) 100%); } } /* Everyday moments: on a desktop the pinned column follows the card in view (handyman.js picks the slide). Slides share one grid cell; each line sits in a mask and rolls up out of it as the next rolls in, the other way when scrolling back. Below 1200 only the section's own title shows, as Rayo had it. */ .hm-moments__head, .hm-moments__rail, .hm-moments__slide:not(:first-child) { display: none; } .hm-moments__slide { display: flex; flex-direction: column; gap: 2.4rem; } @media only screen and (min-width: 1200px) { .hm-moments__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); } .hm-moments__count { font-variant-numeric: tabular-nums; } .hm-moments__count b { color: var(--t-bright); font-weight: 700; } .hm-moments[data-active="0"] .hm-moments__head { visibility: hidden; } .hm-moments__rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: 3.6rem; } .hm-moments__rail i { height: .3rem; border-radius: .3rem; background: var(--st-muted); transition: background-color .45s ease; } .hm-moments__rail i.is-on { background: var(--accent); } .hm-moments__stage { display: grid; } .hm-moments__slide, .hm-moments__slide:not(:first-child) { display: flex; grid-area: 1 / 1; } .hm-mask { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .hm-moments .hm-mask > .mxd-section-title__title, .hm-moments .hm-mask > .mxd-section-title__descr { margin: 0; padding: 0; } .hm-mask > * { transform: translateY(112%); transition: transform .7s cubic-bezier(.2,.8,.2,1); } .hm-moments__slide.is-past .hm-mask > * { transform: translateY(-112%); } .hm-moments__slide.is-active .hm-mask > * { transform: none; transition-delay: .1s; } .hm-moments__slide.is-active .hm-mask + .hm-mask > * { transition-delay: .18s; } .hm-moments__title { margin: 0; font: normal 600 7rem/1.1 var(--_font-accent); letter-spacing: -.06rem; color: var(--t-bright); } .mxd-pinned-projects__static .mxd-section-title__controls { margin-top: 4rem; } } @media (prefers-reduced-motion: reduce) { .hm-mask > * { transition: none !important; } } /* Trades it coordinates: each card is its trade's animation, flush to the card, with the name in a paper chip over the top-left corner the scenes keep clear. The theme's hover lift moves to the animation. */ .hm-trade-card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--_radius-m); background: var(--base-tint); } .hm-trade-card :is(video, img) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-partners-cards__inner:hover .hm-trade-card :is(video, img) { transform: scale(1.04); } .hm-trade-card__name { position: absolute; top: 1.4rem; left: 1.4rem; display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.4rem .8rem 1.1rem; border-radius: 99rem; background: rgba(255,255,255,.94); color: #161616; box-shadow: 0 0 0 1px rgba(22,22,22,.06), 0 8px 20px -10px rgba(22,22,22,.35); font: 600 1.6rem/1 var(--_font-accent); } .hm-trade-card__name i { font-size: 1.8rem; color: #4f8a2b; } /* Pricing's trade cards (the partners marquee): each plays its trade's loop (motion/src/scenes/wordmarks) at the card's own size and radius, so nothing moves when a video starts; the theme's 170 px logo width, which hm-anim.css mirrors onto videos, is not for these. Until its poster arrives a card shows its own ground, as it did behind the wordmark. */ .marquee__item.item-partners video.hm-trade-loop { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Article and legal page titles are the page's h1 (Rayo's article template used an h2, so those pages had none): the theme's h2 look, 6rem and 9rem from 768. */ .mxd-article__title h1 { margin: 0; font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent); letter-spacing: -.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-article__title h1 { font-size: 9rem; } } /* An agent the crew placer (handyman.js) has set in a clear spot sits in front: nothing is under it by then. */ .hm-crew-pop.is-placed { z-index: 2; } /* The built-by pill below 1200 names WeReno with its logo (the founder: "make the built by wereno banner on mobile show the wereno logo in place of the word wereno"); from 1200 the logo leads the pill and the word stays. */ .hm-backed__inline-we { display: none; } @media only screen and (max-width: 1199px) { .hm-backed__name { display: none; } .hm-backed__inline-we { display: inline-block; height: 1.55rem; width: auto; margin-left: .15rem; vertical-align: -.22rem; } } /* The CTA card below 1200: Rayo lays its animation over the right of the card, under the white headline, which could not be read where the two met (the founder, on a phone: "fix the font on this card on mobile its hard to see"). Below 1200 the animation is a band across the foot of the card, under the button, and the words stay on the dark ground. */ @media only screen and (max-width: 1199px) { .mxd-promo__bg { position: relative; top: auto; right: auto; order: 2; flex: none; width: calc(100% + 6rem); height: 24rem; margin: 0 -3rem; background-position: center; } .mxd-promo__content { margin-bottom: 5.6rem; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .mxd-promo__bg { width: calc(100% + 10rem); margin: 0 -5rem; height: 34rem; } } /* Get started: the address suggestions (Google Places), a list under the field in the question's own type. */ .hm-tf__suggest { width: 100%; margin: -.8rem 0 0; padding: .6rem; list-style: none; border: 1px solid var(--st-muted); border-radius: 1.8rem; background: var(--base-tint); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); } .hm-tf__suggest li { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.4rem; border-radius: 1.2rem; cursor: pointer; } .hm-tf__suggest li b { font: 600 1.8rem/1.25 var(--_font-accent); color: var(--t-bright); } .hm-tf__suggest li span { font-size: 1.4rem; line-height: 1.35; color: var(--t-muted); } .hm-tf__suggest li:hover, .hm-tf__suggest li.is-active { background: rgba(var(--accent-rgb), .14); } @media only screen and (max-width: 767px) { .hm-tf__suggest li { padding: 1rem 1.2rem; } .hm-tf__suggest li b { font-size: 1.6rem; } } /* Article and legal titles are h1s now: the phone rule that let a long word ("maintenance") wrap moves with them. */ @media (max-width: 767px) { .mxd-article__title h1 { font-size: 4.4rem; hyphens: auto; overflow-wrap: break-word; } } /* A phone's hero: the four agents a little smaller, in one staggered row under Get started (placed by handyman.js), with room made for the row; the pill moves up into the space the top pair used to take, and since 2026-10-11 a little higher still, closer to the header (the founder: "move the handyman is built by wereno up a bit and remove the 1b in renovations and 50k trades network labels"): the two fact pills are gone from a phone. */ @media only screen and (max-width: 767px) { .hm-crew-hero { width: 5.8rem; } .hm-hero-cta { margin-bottom: 10.4rem; } .mxd-hero-01__top { padding-top: 3.2rem; } .hm-backed__l2 { display: none; } } /* The headline's "and" between a home and a toolbox on a phone (build.py HERO_AND: Fluent Emoji images, the same on every phone), its own line, centred, the emoji a little under the cap height and sitting on the words' middle; a computer hides them and keeps "and remembered" on one line, spaces and all. */ .hm-emoji { display: none; } @media only screen and (max-width: 767px) { .hero-01-title__item.hm-and-row { display: block; } .hm-and { display: flex; align-items: center; justify-content: center; gap: .2em; } .hm-emoji { display: block; flex: none; width: .84em; height: .84em; margin-top: -.04em; } } @media only screen and (min-width: 768px) { .hero-01-title__item.hm-and-row { display: inline-block; } } /* A phone's floater: the trades network on its own paper pill under the agents' row (build.py HERO_FLOAT), tilted and bobbing a little like the computer's floating cards, clear of the headline, the button and the agents. */ .hm-trades-float { display: none; } @media only screen and (max-width: 767px) { .hm-trades-float { position: absolute; top: calc(100% + 11.6rem); right: .8rem; display: inline-flex; align-items: center; gap: .8rem; padding: .6rem 1.5rem .6rem .6rem; border-radius: 99rem; background: #fff; color: #161616; white-space: nowrap; box-shadow: 0 0 0 1px rgba(22,22,22,.07), 0 16px 30px -14px rgba(22,22,22,.38); font: 600 1.45rem/1 var(--_font-accent); transform: rotate(-4deg); pointer-events: none; } .hm-trades-float i { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(76,175,80,.14); color: #3f9a44; font-size: 1.6rem; } .hm-trades-float b { font-weight: 800; } [color-scheme="dark"] .hm-trades-float { background: #232323; color: #f2f2f2; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 30px -14px rgba(0,0,0,.7); } [color-scheme="dark"] .hm-trades-float i { background: rgba(221,241,96,.14); color: #ddf160; } } @media only screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) { .hm-trades-float { animation: hm-float-bob 5.6s ease-in-out infinite; } } @keyframes hm-float-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-.5rem) rotate(-3deg); } } /* The up button: Rayo draws it with mix-blend-mode: difference over a blurred backdrop, which iOS Safari composites to a black disc with a black arrow (the founder: "up button arrows on bottom right up button are broken and invisible"). It takes the menu button's colours instead: ink with a light arrow, the reverse in dark mode. */ .btn-to-top { mix-blend-mode: normal; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--base-opp); border-color: var(--base-opp); color: var(--t-opp-bright); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); } .btn-to-top i { color: var(--t-opp-bright); } /* The SMS terms page's opt-in box: a card at the top of the terms, the number, the consent and Continue. */ /* The privacy policy's cookie table and its "Change your cookie settings" button (section 5, the cookie popup plan, 2026-10-17; tools/legal.py renders the table, tools/consent.js opens the settings). A phone shows each row as a small card with its labels, so nothing scrolls sideways. */ .hm-legal-table { margin: 2.4rem 0; } .hm-legal-table table { width: 100%; border-collapse: collapse; font: 400 1.5rem/1.45 var(--_font-default); color: var(--t-medium); } .hm-legal-table th, .hm-legal-table td { padding: 1.1rem 1.2rem 1.1rem 0; border-bottom: 1px solid var(--st-muted); text-align: left; vertical-align: top; } .hm-legal-table th { font-weight: 600; color: var(--t-bright); } .hm-legal-table td:first-child { color: var(--t-bright); } .hm-legal-table code { font: 500 1.35rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--t-bright); overflow-wrap: anywhere; } @media (max-width: 767px) { .hm-legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hm-legal-table table, .hm-legal-table tbody, .hm-legal-table tr, .hm-legal-table td { display: block; width: 100%; } .hm-legal-table tr { padding: 1.2rem 0; border-bottom: 1px solid var(--st-muted); } .hm-legal-table td { padding: .2rem 0; border: 0; } .hm-legal-table td + td::before { content: attr(data-l) " "; font-weight: 600; color: var(--t-bright); } } .hm-legal-cookies { display: inline-flex; align-items: center; justify-content: center; min-height: 4.8rem; margin: .8rem 0 0; padding: 0 2.4rem; border: 0; border-radius: 99rem; background: var(--base-opp); color: var(--base); font: 600 1.6rem/1 var(--_font-default); cursor: pointer; transition: transform .15s ease; } .hm-legal-cookies:active { transform: scale(.97); } .hm-legal-cookies:focus-visible { outline: .3rem solid var(--accent); outline-offset: .3rem; } .hm-optin { display: flex; flex-direction: column; gap: 1.2rem; margin: 0 0 6rem; padding: 3.2rem; border: 1px solid var(--st-muted); border-radius: 2.4rem; background: var(--base-tint); } .hm-optin__eyebrow { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-accent-ink); } .hm-optin__title { margin: 0; font: normal 600 3.6rem/1.15 var(--_font-accent); color: var(--t-bright); } .hm-optin__form { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: .8rem; } .hm-optin__label { font-size: 1.4rem; font-weight: 600; color: var(--t-medium); } .hm-optin__input { width: 100%; max-width: 42rem; padding: 1rem 0 1.2rem !important; border: 0 !important; border-bottom: 2px solid var(--st-muted) !important; border-radius: 0 !important; background: transparent !important; font: 400 2.6rem/1.25 var(--_font-accent) !important; color: var(--t-bright); outline: none; } .hm-optin__input:focus { border-bottom-color: var(--accent) !important; } .hm-optin .hm-consent { max-width: 64rem; } .hm-optin__note { margin: 0; font-size: 1.4rem; color: var(--t-muted); } @media only screen and (max-width: 767px) { .hm-optin { padding: 2.4rem 2rem; } .hm-optin__title { font-size: 2.8rem; } } /* Small words in the accent colour: Rayo's light-mode violet (#9F8BE7) is 2.9:1 on the page, too faint for a 13 px label, so they take a deeper violet in light mode (5.3:1); dark mode's lime already reads. */ :root { --hm-accent-ink: #6b55cf; } [color-scheme="dark"] { --hm-accent-ink: var(--accent); } /* ── Get started, the whole page (the founder's plan, section 1: no footer, one screen on a computer, "tasteful Remotion-powered animations, floating elements, and our Handyman mascot"). On a computer the questions sit on the left and a showcase on the right: a square stage playing the animation for the question at hand (each wipes up as its question slides in), three of the app's cards floating at its edges, and the mascot under it saying what happens next. An upright tablet puts the showcase under the questions; a phone keeps the questions alone, with the mascot and its line above them. The stage draws only where its column has room (the container query). ── */ .hm-gs { position: relative; } .hm-gs-show__stage, .hm-gs-show__chip, .hm-gs-show__note { display: none; } /* The founder, 2026-10-11: the mascot on the right of the message ("thatll be cleaner"); the tail points at him. */ .hm-gs-show__guide { display: flex; flex-direction: row-reverse; align-items: center; gap: 1.2rem; margin: 0 0 1.6rem; } .hm-gs-show__mascot { flex: none; width: 5.6rem; height: 5.6rem; object-fit: contain; animation: hm-gs-bob 5.5s ease-in-out infinite; } .hm-gs-show__say { position: relative; margin: 0; padding: 1rem 1.4rem; border-radius: 1.8rem 1.8rem .6rem 1.8rem; background: rgba(159, 139, 231, .16); color: var(--t-bright); font: 500 1.45rem/1.4 var(--_font-accent); text-wrap: pretty; } [color-scheme="dark"] .hm-gs-show__say { background: rgba(159, 139, 231, .22); } .hm-gs-show__say.is-new { animation: hm-gs-say .45s cubic-bezier(.2, .8, .2, 1) both; } @keyframes hm-gs-say { from { transform: scale(.94) translateY(.6rem); } to { transform: none; } } @keyframes hm-gs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6rem); } } @keyframes hm-gs-wipe { from { clip-path: inset(100% 0 0 0 round var(--_radius-l)); } to { clip-path: inset(0 round var(--_radius-l)); } } .hm-gs .hm-tf__note { margin: 0; padding: 1.2rem 1.6rem; max-width: 62rem; border-radius: 1.6rem; background: rgba(230, 160, 50, .14); color: var(--t-bright); font-size: 1.5rem; line-height: 1.45; } .hm-gs .hm-tf__note[hidden] { display: none; } /* what came along from app.handyman.ai or a text (?email=, ?phone=): said plainly, not as a warning */ .hm-gs .hm-tf__carried { background: color-mix(in srgb, var(--hm-accent-ink) 10%, transparent); overflow-wrap: anywhere; } /* The back and forward arrows sit up top, clear of the line under the questions, and clear of every question's title in any language (2026-10-12: a French title ran under them at 1024 x 768, and on a phone a long title's first line did in English too): on a phone they share the question number's row; from 768 they sit at the end of the progress bar, which stops short for them (below). */ .hm-gs .hm-tf__nav { top: 2.4rem; bottom: auto; } .hm-gs .hm-tf__step { padding-bottom: 4rem; } .hm-gs-show { order: -1; } /* One screen, always (the founder, 2026-10-11: "Get-started shouldnt scroll at all"): the section is the window less the header (7.6rem on a phone, 9.6rem from 768) and its own padding, the questions' window takes whatever the mascot row and the line under it leave, and a question taller than that (the phone one on a short phone) scrolls inside itself. The page never does. */ .hm-tf-section:has(.hm-gs) { padding: 2rem 0 1.2rem; } .hm-gs { display: flex; flex-direction: column; height: calc(100svh - 10.8rem - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 10.8rem - env(safe-area-inset-bottom, 0px)); } /* While the cookie popup shows on a phone, the frame keeps its height and the first screen keeps the card's room at its foot, so the spaces above and between its words give way first and Start rides above the card; it settles back after an answer. Shrinking the frame instead, as the plan first measured it, hid Start: the first screen is taller than the window that would be left (362 px in 233 on an iPhone SE in Safari), and it scrolls inside itself. The page still never scrolls (no room is added under it). */ @media only screen and (max-width: 767px) { /* The questions' stage reaches 12 px past the right edge on a 360-375 px phone (the Start glow's room, 2026-10-12), which widened the whole page to 387-388 px: the menu button's edge and the cookie card's foot then sat outside the screen on a browser that doesn't shrink the page to fit (Chrome at 360). Clipped at the section, the page is the screen. */ .hm-tf-section:has(.hm-gs) { overflow-x: clip; } html.hm-consent-open .hm-gs .hm-tf__step[data-step="intro"] { padding-bottom: max(.4rem, calc(var(--hm-consent-h, 0px) - 1.2rem)); } } html.hm-consent-open body:has(.hm-gs) { padding-bottom: 0; } /* Get started never scrolls, card or no card */ @media only screen and (max-width: 767px) and (max-height: 600px) { html.hm-consent-open .hm-gs .hm-tf__step[data-step="intro"] { gap: .8rem; } /* an iPhone SE in Safari: Start keeps a margin over the card */ } .hm-gs .hm-tf { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; } .hm-gs .hm-tf__stage { flex: 1 1 auto; min-height: 0; } .hm-gs .hm-tf__step { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; justify-content: safe center; } .hm-gs .hm-tf__step::-webkit-scrollbar { display: none; } /* The first screen on a phone, not top-heavy (the founder, 2026-10-13: "start button sit closer to bottom of page it all looks too top heavy rn"): the mascot's line and the heading at the top, the promises, Start and "Sign in here" low, Start where a thumb is, the line about texting under it. What room there is goes a third above the heading and two thirds between its words and the promises, never all under the button. */ .hm-tf__room { display: none; } @media only screen and (max-width: 767px) { .hm-gs .hm-tf__step[data-step="intro"]::before { content: ""; flex: 1 1 0; min-height: 0; margin-bottom: -1rem; } .hm-gs .hm-tf__room { display: block; flex: 2 1 0; min-height: 0; margin-top: -1rem; } .hm-gs .hm-tf__step[data-step="intro"] { padding-bottom: .4rem; } } @media only screen and (max-width: 767px) { .hm-gs .hm-tf__step { justify-content: flex-start; gap: 1.2rem; padding: 1.6rem 0 1.2rem; } .hm-gs .hm-tf__title { font-size: 2.8rem; } .hm-gs .hm-tf__title--xl { font-size: 4.4rem; } .hm-gs .hm-tf__hint { font-size: 1.5rem; line-height: 1.45; } .hm-gs .hm-tf__input { margin-top: .4rem; font-size: 2.4rem !important; } .hm-gs .hm-tf__fine { gap: .4rem; font-size: 1.2rem; line-height: 1.4; } .hm-gs .hm-via { margin-top: 0; } .hm-gs .hm-via__label { font-size: 1.35rem; } .hm-gs .hm-via__opt span { padding: 0 1.4rem; font-size: 1.4rem; } .hm-gs .hm-tf__small { font-size: 1.3rem; } .hm-gs .hm-tf__alt { font-size: 1.25rem; line-height: 1.4; padding-top: .8rem; } /* level with the bar, which stops short of them, beside the question's number; the title starts under them */ .hm-gs .hm-tf__bar { margin-right: 10.2rem; transition: margin-right .5s cubic-bezier(.2, .8, .2, 1); } .hm-gs .hm-tf[data-current="intro"] .hm-tf__bar, .hm-gs .hm-tf[data-current="handoff"] .hm-tf__bar { margin-right: 0; } .hm-gs .hm-tf__nav { top: 0; } .hm-gs .hm-tf__nav button { width: 4.4rem; height: 4.4rem; } .hm-gs-show__guide { gap: 1rem; margin-bottom: 1.2rem; } .hm-gs-show__mascot { width: 4.4rem; height: 4.4rem; } .hm-gs-show__say { padding: .8rem 1.2rem; font-size: 1.35rem; } } /* A short window (a phone whose browser bars take a third of it, a laptop or a tablet on its side up to 860 px tall) keeps every question on screen: tighter type, and the "Rather text?" line only on the first screen, where it is an alternative to starting. (Measured 2026-10-12: at 1024 x 768 the email question scrolled 90 px in English and 206 in Spanish, French and German, and the first screen 29 in English, under the old 760 px line.) */ @media only screen and (max-height: 760px), only screen and (min-width: 768px) and (max-height: 860px) { .hm-gs .hm-tf:not([data-current="intro"]) .hm-tf__alt { display: none; } /* the phone question carries the calls line too (lane 26): its one-line hint gives way, and the Terms sentence runs on from the texts disclosure, so Send my code stays on screen (measured: 36 to 81 px under a 375 x 667 or 1024 x 768 window with the line and without these) */ .hm-gs .hm-tf__step[data-step="phone"] .hm-tf__hint { display: none; } .hm-gs .hm-tf__fine { display: block; } .hm-gs .hm-tf__fine > [data-consent]:not([hidden]), .hm-gs .hm-tf__fine > [data-via-show]:not([hidden]), .hm-gs .hm-tf__fine > .hm-tf__terms { display: inline; } .hm-gs .hm-tf__fine > .hm-tf__en:not([hidden]) { display: inline; } .hm-gs .hm-tf__fine > .hm-tf__terms { margin-top: 0; } .hm-gs .hm-tf__fine > .hm-tf__calls { margin-top: .6rem; } } @media only screen and (max-width: 767px) and (max-height: 760px) { .hm-gs .hm-tf__step { gap: 1rem; padding-top: 1.2rem; } .hm-gs .hm-tf__q { gap: 1rem; } .hm-gs .hm-tf__title { font-size: 2.6rem; } .hm-gs .hm-tf__hint { font-size: 1.4rem; } .hm-gs-show__guide { margin-bottom: .8rem; } .hm-gs-show__say { padding: .6rem 1rem; font-size: 1.3rem; } } /* a very short phone gives the questions the mascot's row as well */ @media only screen and (max-width: 767px) and (max-height: 600px) { .hm-gs-show__guide { display: none; } } /* and a short one gives it to the phone question, which carries two disclosures since the calls line (lane 26) */ @media only screen and (max-width: 767px) and (max-height: 700px) { .hm-gs[data-step="phone"] .hm-gs-show__guide { display: none; } } /* in another language, where both disclosures run longer: the phone question's hint gives way up to 920 px tall, and on a short tablet or laptop its rows sit closer (measured with the calls line: French 29 px under 1024 x 768, 8 under 1440 x 900) */ @media only screen and (min-width: 768px) and (max-height: 920px) { html:not([lang="en"]) .hm-gs .hm-tf__step[data-step="phone"] .hm-tf__hint { display: none; } } @media only screen and (min-width: 768px) and (max-height: 860px) { html:not([lang="en"]) .hm-gs .hm-tf__step[data-step="phone"] { gap: 1rem; } } @media only screen and (min-width: 768px) { .hm-gs { height: calc(100svh - 12.8rem); height: calc(100dvh - 12.8rem); } /* the arrows centred on the bar's line (.4rem), which ends short of them; the first screen and the last have none */ .hm-gs .hm-tf__bar { margin-right: 11rem; transition: margin-right .5s cubic-bezier(.2, .8, .2, 1); } .hm-gs .hm-tf[data-current="intro"] .hm-tf__bar, .hm-gs .hm-tf[data-current="handoff"] .hm-tf__bar { margin-right: 0; } .hm-gs .hm-tf__nav { top: -2.1rem; } /* where the mascot sits above the questions (under 992 on its side), it keeps clear of them */ .hm-gs-show__guide { margin-bottom: 2.8rem; } /* a question's content is centred in its window, so less padding moves nothing that fits and gives a long one room */ .hm-gs .hm-tf__step { padding-top: 2.4rem; padding-bottom: 2.4rem; } .hm-gs-show__mascot { width: 6.4rem; height: 6.4rem; } .hm-gs-show__say { font-size: 1.6rem; } } @media only screen and (min-width: 768px) and (max-height: 860px) { /* the arrows end 2.1rem under the bar: a question that fills its window starts below them */ .hm-gs .hm-tf__step { gap: 1.4rem; padding: 2.4rem 0 .8rem; } .hm-gs .hm-tf__title { font-size: 4rem; } .hm-gs .hm-tf__title--xl { font-size: 6.4rem; } .hm-gs .hm-tf__hint { font-size: 1.7rem; } .hm-gs .hm-tf__input { font-size: 2.8rem !important; } } /* ── Another language (?lang=, 2026-10-12): Spanish, French and the stored languages run longer than English, so the same window holds them with a little less. English keeps its look; these apply only when the page reads in another language. Measured before: the first screen scrolled 55 px at 1440 x 900 and 181 at 1024 x 768, the email question 206 at 1024 x 768, the kind question up to 111 on a phone. ── */ /* The opening line keeps to two lines (French, German and Tamil took three at English's size) */ @media only screen and (min-width: 1200px) { html:not([lang="en"]) .hm-gs .hm-tf__title--xl { font-size: 8.4rem; } } @media only screen and (min-width: 768px) and (max-height: 860px) { html:not([lang="en"]) .hm-gs .hm-tf__title--xl { font-size: 6rem; } /* the disclosure's translation is half as long again as the English */ html:not([lang="en"]) .hm-gs .hm-tf__fine { font-size: 1.2rem; line-height: 1.45; } } /* The kind question where the window is short: tighter tiles, a smaller drawing on a narrow tile, and a 44 px OK */ @media only screen and (min-width: 768px) and (max-height: 860px) { html:not([lang="en"]) .hm-gs .hm-kind { gap: .5rem; } html:not([lang="en"]) .hm-gs [data-step="type"] .hm-tf__ok { height: 4.4rem; } @container (max-width: 239.98px) { html:not([lang="en"]) .hm-gs .hm-kind__opt span { padding: .6rem 1rem; } html:not([lang="en"]) .hm-gs .hm-kind__opt input:checked + span { padding: .5rem .9rem; } html:not([lang="en"]) .hm-gs .hm-kind__opt b { font-size: 1.5rem; } html:not([lang="en"]) .hm-gs .hm-kind__art { width: 2.8rem; height: 2.8rem; } } } /* …on a phone (up to 860 px tall: a 360 x 800 one scrolled 13 px in German without) the same for its tiles… */ @media only screen and (max-width: 767px) and (max-height: 860px) { html:not([lang="en"]) .hm-gs .hm-tf__step[data-step="type"] { gap: .8rem; } html:not([lang="en"]) .hm-gs [data-step="type"] .hm-tf__ok { height: 4.4rem; } html:not([lang="en"]) .hm-gs .hm-kind { gap: .4rem; } html:not([lang="en"]) .hm-gs .hm-kind__opt span { padding: .5rem .8rem; } html:not([lang="en"]) .hm-gs .hm-kind__opt input:checked + span { padding: .4rem .7rem; } html:not([lang="en"]) .hm-gs .hm-kind__opt b { font-size: 1.4rem; } html:not([lang="en"]) .hm-gs .hm-kind__art { width: 2.4rem; height: 2.4rem; border-radius: .7rem; } } /* …and on a short phone every question a little tighter: its gaps, the line under its answer, a 44 px OK */ @media only screen and (max-width: 767px) and (max-height: 760px) { html:not([lang="en"]) .hm-gs .hm-tf__step { gap: .8rem; } html:not([lang="en"]) .hm-gs .hm-tf__actions { margin-top: .4rem; } html:not([lang="en"]) .hm-gs .hm-tf__ok { height: 4.4rem; } html:not([lang="en"]) .hm-gs .hm-tf__input { padding: .6rem 0 1rem !important; } } /* "Read this in English" ends the disclosure's paragraph instead of taking a line of its own */ html:not([lang="en"]) .hm-tf__fine { display: block; } html:not([lang="en"]) .hm-tf__fine > [data-consent]:not([hidden]), html:not([lang="en"]) .hm-tf__fine > .hm-tf__en:not([hidden]) { display: inline; } html:not([lang="en"]) .hm-tf__fine > .hm-tf__en::before { content: " \00b7 "; } html:not([lang="en"]) .hm-tf__fine > .hm-tf__terms { margin-top: .6rem; } html:not([lang="en"]) .hm-tf__fine > .hm-tf__calls { margin-top: .6rem; } @media only screen and (max-width: 767px) { html:not([lang="en"]) .hm-tf__fine > .hm-tf__terms { margin-top: .4rem; } } /* on a phone the line under the questions runs a line longer: only on the first screen, as on a short one */ @media only screen and (max-width: 767px) and (max-height: 860px) { html:not([lang="en"]) .hm-gs .hm-tf:not([data-current="intro"]) .hm-tf__alt { display: none; } } /* A computer or a tablet on its side: two columns, one screen tall. The header takes 9.6rem; this section's padding is 4.8rem above (clear of the logo) and 3.2rem below, so the columns get the rest of the window. */ @media only screen and (min-width: 992px) and (min-aspect-ratio: 4/5) and (min-height: 600px) { .hm-tf-section:has(.hm-gs) { padding: 4.8rem 0 3.2rem; } /* The showcase gets the wider column (it was .88fr): its stage is 16:10 now and wants the room. */ .hm-gs { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(3.2rem, 4vw, 7.2rem); height: calc(100svh - 17.6rem); height: calc(100dvh - 17.6rem); } .hm-gs .hm-tf { display: flex; flex-direction: column; max-width: none; min-height: 0; margin: 0; } .hm-gs .hm-tf__stage { flex: 1 1 auto; min-height: 0; } .hm-gs-show { order: 0; } } /* While the cookie popup shows in its bottom-left corner, the first screen keeps the card's room at its foot (inside the questions' window, which keeps its size: a smaller window clipped Start, as on a phone), so its words rise clear of it; the showcase keeps its height. */ @media only screen and (min-width: 992px) and (min-aspect-ratio: 4/5) and (min-height: 600px) { html.hm-consent-open .hm-gs .hm-tf__step[data-step="intro"] { padding-bottom: max(4rem, calc(var(--hm-consent-h, 0px) - 3.2rem)); } } @media only screen and (min-width: 992px) and (min-aspect-ratio: 4/5) and (min-height: 600px) and (max-height: 820px) { /* a short window (the founder's 1232×744): the first screen's lines sit closer, so "Sign in here" rises clear too */ html.hm-consent-open .hm-gs .hm-tf__step[data-step="intro"] { gap: 1.1rem; } html.hm-consent-open .hm-gs .hm-tf__step[data-step="intro"] .hm-tf__actions { margin-top: 0; } } /* An upright tablet: the questions on top, the showcase in the room under them. */ @media only screen and (min-width: 768px) and (max-aspect-ratio: 4/5) and (min-height: 900px) { .hm-tf-section:has(.hm-gs) { padding: 4.8rem 0 3.2rem; } .hm-gs { gap: 2.4rem; height: calc(100svh - 17.6rem); height: calc(100dvh - 17.6rem); } .hm-gs .hm-tf { flex: none; max-width: none; width: 100%; } .hm-gs .hm-tf__stage { flex: none; height: 56rem; } .hm-gs-show { order: 0; flex: 1 1 auto; } } @media only screen and (min-width: 992px) and (min-aspect-ratio: 4/5) and (min-height: 600px), only screen and (min-width: 768px) and (max-aspect-ratio: 4/5) and (min-height: 900px) { .hm-gs-show { container: hm-show / size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; min-height: 0; } .hm-gs-show__guide { margin: 0; } } @container hm-show (min-height: 36rem) { /* The stage takes the shape of the video in it: square for the square ones, 16:10 for the two wide street scenes (1920×1200), which a square stage cut to their middle (the founder, 2026-10-12: "make the ... golden-hour-porch ... sit a bit wider so it doesnt get cut off"). The guide's bubble below follows. */ .hm-gs-show__stage { --hm-gs-h: min(100cqw - 4rem, 100cqh - 13.6rem); --hm-gs-w: var(--hm-gs-h); position: relative; display: block; flex: none; width: var(--hm-gs-w); height: var(--hm-gs-h); border-radius: var(--_radius-l); background: #fafafa; box-shadow: 0 0 0 1px var(--st-muted), 0 3rem 6rem -3rem rgba(22, 22, 22, .25); transition: width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1); } .hm-gs-show__stage:has(> .hm-gs-show__vid.is-on[width="1920"]) { --hm-gs-h: min((100cqw - 4rem) / 1.6, 100cqh - 13.6rem); --hm-gs-w: calc(var(--hm-gs-h) * 1.6); } .hm-gs-show__vid { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; border-radius: var(--_radius-l); } .hm-gs-show__vid[data-step="name"] { object-fit: contain; } .hm-gs-show__vid.is-on { display: block; animation: hm-gs-wipe .8s cubic-bezier(.2, .8, .2, 1) both; } /* The street scene's note in the page's language (pages2.py _showcase): another language only, over the video's own English one and the path it drops in by (x 37-61 %, y 67-96 % of the frame at any stage size), there from the first frame, as the video's is, once its words read in that language (handyman.js). The pills on the stage's bottom edge step aside for it on that question. */ html:not([lang="en"]) .hm-gs-show__stage:has(> .hm-gs-show__vid.is-on[data-step="type"]) > .hm-gs-show__note:not([hidden]) { position: absolute; z-index: 1; left: 50.5%; top: 67%; display: flex; align-items: center; gap: 1rem; width: max(35%, 18rem); min-height: 29%; margin: 0; padding: .9rem 1.2rem; transform: translateX(-50%); border-radius: 1.6rem; background: #fff; box-shadow: 0 0 0 1px rgba(22, 22, 22, .06), 0 1.2rem 2.4rem -1.2rem rgba(22, 22, 22, .25); } .hm-gs-show__note > i { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(76, 175, 80, .14); color: #3f9a44; font-size: 1.6rem; } .hm-gs-show__note > span { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .hm-gs-show__note b { font: 600 clamp(1.25rem, 2.4cqw, 1.5rem)/1.25 var(--_font-accent); color: #161616; } .hm-gs-show__note small { font: 400 clamp(1.15rem, 2.1cqw, 1.35rem)/1.3 var(--_font-default); color: #5b5f66; } html:not([lang="en"]) .hm-gs-show__stage:has(> .hm-gs-show__vid.is-on[data-step="type"]):has(> .hm-gs-show__note:not([hidden])) > :is(.hm-gs-show__chip--2, .hm-gs-show__chip--5) { opacity: 0; } .hm-gs-show__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.6rem 1rem 1rem; border-radius: 99rem; background: #fff; color: #161616; font: 600 1.5rem/1 var(--_font-accent); white-space: nowrap; box-shadow: 0 0 0 1px rgba(22, 22, 22, .06), 0 1.6rem 3.2rem -1.2rem rgba(22, 22, 22, .28); animation: hm-gs-bob 6s ease-in-out infinite; transition: opacity .3s ease; } .hm-gs-show__chip i { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.6rem; } .hm-gs-show__chip i.tone-go { background: rgba(76, 175, 80, .14); color: #3f9a44; } .hm-gs-show__chip i.tone-you { background: rgba(230, 160, 50, .18); color: #b97716; } .hm-gs-show__chip i.tone-ai { background: rgba(159, 139, 231, .2); color: #7a62d6; } /* They hang over the stage's edges, clear of the cards inside the animations: two on the top edge, two on the bottom, two up each side. Each bobs on its own beat. */ .hm-gs-show__chip--1 { top: -1.8rem; left: 8%; } .hm-gs-show__chip--2 { bottom: -1.8rem; right: 8%; animation-delay: -2s; } .hm-gs-show__chip--3 { top: 22%; right: -4.8rem; animation-delay: -4s; } .hm-gs-show__chip--4 { top: 64%; left: -5.2rem; animation-delay: -1s; } .hm-gs-show__chip--5 { bottom: -1.8rem; left: 12%; animation-delay: -3s; } .hm-gs-show__chip--6 { top: -1.8rem; right: 10%; animation-delay: -5s; } .hm-gs-show__chip--7 { bottom: 26%; right: -4.4rem; animation-delay: -2.5s; } .hm-gs-show__chip--8 { top: 16%; left: -4rem; animation-delay: -4.5s; } .hm-gs-show__guide { flex: none; width: min(100cqw - 4rem, 100cqh - 13.6rem); gap: 1.4rem; transition: width .5s cubic-bezier(.2, .8, .2, 1); } .hm-gs-show__stage:has(> .hm-gs-show__vid.is-on[width="1920"]) + .hm-gs-show__guide { width: calc(min((100cqw - 4rem) / 1.6, 100cqh - 13.6rem) * 1.6); } .hm-gs-show__mascot { width: 8.8rem; height: 8.8rem; } .hm-gs-show__say { padding: 1.4rem 1.8rem; font-size: 1.7rem; border-radius: 2.2rem 2.2rem 2.2rem .8rem; } } /* A narrow showcase (a tablet on its side) keeps six pills: eight crowd a stage under 50rem. */ @container hm-show (max-width: 56rem) { .hm-gs-show__chip--7, .hm-gs-show__chip--8 { display: none; } } /* In another language the pills run longer and met on the stage's top and bottom edges (French "Filtre de fournaise à changer" under "Reçu classé" at 1024 x 768, 1180 x 820 and 1280 x 800): under 66rem one pill to an edge, so six (four under 56rem). The lower pill on each side rides higher, clear of the street's note. */ @container hm-show (max-width: 66rem) { html:not([lang="en"]) .hm-gs-show__chip--5, html:not([lang="en"]) .hm-gs-show__chip--6 { display: none; } } @container hm-show (min-height: 36rem) { html:not([lang="en"]) .hm-gs-show__chip--4 { top: 40%; } html:not([lang="en"]) .hm-gs-show__chip--7 { bottom: 42%; } } @media (prefers-reduced-motion: reduce) { .hm-gs-show__mascot, .hm-gs-show__chip, .hm-gs-show__say.is-new, .hm-gs-show__vid.is-on { animation: none !important; } } /* ── The legal words over the set-up (never in place of it): a dialog with the page's article in it. ── */ .hm-legal { width: min(76rem, calc(100vw - 3.2rem)); max-width: none; max-height: min(86svh, 84rem); margin: auto; padding: 0; border: 0; border-radius: var(--_radius-l); background: var(--base); color: var(--t-bright); box-shadow: 0 4rem 10rem -2rem rgba(0, 0, 0, .4); overflow: hidden; } .hm-legal[open] { display: flex; flex-direction: column; } .hm-legal::backdrop { background: rgba(22, 22, 22, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hm-legal__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 2.2rem 2.4rem 1.8rem 3.2rem; border-bottom: 1px solid var(--st-muted); } .hm-legal__title { margin: 0; font: 600 2.4rem/1.2 var(--_font-accent); color: var(--t-bright); } .hm-legal__close, .hm-textme__close { display: grid; place-items: center; flex: none; width: 4.4rem; height: 4.4rem; border: 1px solid var(--st-muted); border-radius: 50%; background: var(--base-tint); color: var(--t-bright); font-size: 1.8rem; cursor: pointer; } .hm-legal__close:hover, .hm-textme__close:hover { border-color: var(--t-bright); } .hm-legal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2.8rem 3.2rem; font-size: 1.6rem; line-height: 1.6; color: var(--t-medium); } .hm-legal__body .mxd-article__content { gap: 2.8rem; max-width: none; margin: 0; } .hm-legal__body .mxd-article__block { gap: 1.2rem; } .hm-legal__body h2, .hm-legal__body h3, .hm-legal__body h4 { margin: 0; font: 600 2rem/1.25 var(--_font-accent); color: var(--t-bright); } .hm-legal__body h3, .hm-legal__body h4 { font-size: 1.7rem; } .hm-legal__body p, .hm-legal__body li { font-size: 1.6rem; line-height: 1.6; } /* the theme sets the article's list items bigger than its paragraphs (.mxd-article__content ul li): here they match */ .hm-legal__body .mxd-article__content li { font-size: 1.6rem; line-height: 1.6; } .hm-legal__body a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } .hm-legal__wait { margin: 0; color: var(--t-muted); } .hm-legal__foot { display: flex; justify-content: flex-end; padding: 1.6rem 2.4rem 2rem; border-top: 1px solid var(--st-muted); } .hm-legal__foot .hm-tf__ok { height: 4.8rem; font-size: 1.7rem; } @media only screen and (max-width: 767px) { .hm-legal { width: 100vw; max-height: 92svh; margin: auto 0 0; border-radius: 2.4rem 2.4rem 0 0; } .hm-legal__head { padding: 1.6rem 1.6rem 1.4rem 2rem; } .hm-legal__title { font-size: 2rem; } .hm-legal__body { padding: 2rem; } .hm-legal__foot { padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom)); } .hm-legal__foot .hm-tf__ok { width: 100%; justify-content: center; } } /* ── "Message Handyman" (lane 14: the 866 is for calls). One card (build_lib.talk_card) in two places: the /text page, and a window a computer opens from any Message Handyman link (handyman.js). A phone sees Open Messages; a computer (a mouse or a trackpad) sees the code to scan and the hello to copy. Decided by the pointer, never by the width. ── */ .hm-talk { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; color: var(--t-bright); } .hm-talk__head { display: flex; align-items: center; gap: 1.4rem; min-width: 0; } .hm-talk__face { flex: none; width: 6.4rem; height: 6.4rem; border-radius: 1.8rem; background: color-mix(in srgb, var(--hm-accent-ink) 12%, transparent); object-fit: contain; padding: .4rem; } .hm-talk__heading { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .hm-talk__eyebrow { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-accent-ink); } .hm-talk__title { margin: 0; font: 600 3.4rem/1.05 var(--_font-accent); letter-spacing: -.02em; color: var(--t-bright); } .hm-talk__sub { margin: 0; font-size: 1.6rem; line-height: 1.5; color: var(--t-medium); } .hm-talk__tap { display: flex; flex-direction: column; gap: .8rem; } .hm-talk__open { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 5.6rem; padding: 0 2rem; border-radius: 1.6rem; background: #0a84ff; color: #fff !important; font: 600 1.8rem/1 var(--_font-accent); text-decoration: none; box-shadow: 0 1.2rem 2.8rem -1.4rem rgba(10, 132, 255, .7); } .hm-talk__open i { font-size: 2.2rem; } .hm-talk__open:active { transform: translateY(1px); } .hm-talk__fine { margin: 0; font-size: 1.4rem; line-height: 1.45; color: var(--t-muted); text-align: center; } .hm-talk__scan { display: none; grid-template-columns: 17.2rem minmax(0, 1fr); gap: 2rem; align-items: center; } .hm-talk__qr { display: grid; place-items: center; width: 17.2rem; height: 17.2rem; padding: 1.2rem; border-radius: 2rem; background: #fff; box-shadow: 0 0 0 1px rgba(22, 22, 22, .1); } .hm-talk__qr svg { display: block; width: 100%; height: 100%; } .hm-talk__qr:empty::before { content: ""; width: 2.4rem; height: 2.4rem; border: 2px solid rgba(22, 22, 22, .15); border-top-color: rgba(22, 22, 22, .55); border-radius: 50%; animation: hm-talk-spin .9s linear infinite; } @keyframes hm-talk-spin { to { transform: rotate(360deg); } } .hm-talk__scan-copy { display: flex; flex-direction: column; gap: .6rem; min-width: 0; } .hm-talk__scan-copy .hm-talk__fine { text-align: left; } .hm-talk__scan-t { margin: 0; font: 600 2rem/1.2 var(--_font-accent); color: var(--t-bright); } .hm-talk__mac { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; align-self: flex-start; margin-top: .6rem; min-height: 4.4rem; padding: 0 1.8rem; border-radius: 99rem; background: #0a84ff; color: #fff !important; font: 600 1.5rem/1 var(--_font-accent); text-decoration: none; } .hm-talk__mac[hidden] { display: none; } .hm-talk__row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem 1.2rem 1.2rem 1.6rem; border-radius: 1.6rem; background: var(--base-tint); box-shadow: inset 0 0 0 1px var(--st-muted); } .hm-talk__row > span { display: flex; flex-direction: column; gap: .2rem; min-width: 0; font-size: 1.5rem; line-height: 1.35; color: var(--t-medium); } .hm-talk__row small { font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); } .hm-talk__row b { font: 600 2rem/1.2 var(--_font-accent); color: var(--t-bright); white-space: nowrap; } .hm-talk__row q { quotes: "\201C" "\201D"; overflow-wrap: anywhere; } .hm-talk__row button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; flex: none; min-height: 4.4rem; padding: 0 1.6rem; border: 1px solid var(--st-muted); border-radius: 99rem; background: var(--base); color: var(--t-bright); font: 600 1.4rem/1 var(--_font-accent); cursor: pointer; } .hm-talk__row button:hover { border-color: var(--t-bright); } .hm-talk__row button.is-done { border-color: #3f9a44; color: #3f9a44; } .hm-talk__row--hello { display: none; } .hm-talk__alt { margin: 0; font-size: 1.4rem; line-height: 1.5; color: var(--t-muted); } .hm-talk__alt a { color: var(--t-bright); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: .18em; } /* A computer: the code and the hello; no Open Messages (a Mac gets its own button beside the code). */ @media (hover: hover) and (pointer: fine) { .hm-talk__tap { display: none; } .hm-talk__scan { display: grid; } .hm-talk__row--hello { display: flex; } } /* The window over any page (a computer's Message Handyman click). */ .hm-textme { position: fixed; width: min(58rem, calc(100vw - 3.2rem)); max-width: none; max-height: calc(100svh - 3.2rem); margin: auto; padding: 3.2rem; border: 0; border-radius: var(--_radius-l); background: var(--base); color: var(--t-bright); box-shadow: 0 4rem 10rem -2rem rgba(0, 0, 0, .4); overflow-y: auto; overscroll-behavior: contain; } .hm-textme::backdrop { background: rgba(22, 22, 22, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hm-textme__close { position: absolute; top: 1.6rem; right: 1.6rem; z-index: 1; } .hm-textme .hm-talk__head { padding-right: 5.2rem; } /* The /text page: the card in the middle of the window. A phone stacks under the header and scrolls; from a tablet up the page is the window, and only the card scrolls if the window is short. */ .hm-talk-main { min-height: 100svh; } .hm-talk-page { display: flex; min-height: 100svh; padding: 10.4rem 0 3.2rem; } .hm-talk-page__wrap { display: flex; flex-direction: column; justify-content: center; } .hm-talk-page__stage { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; } .hm-talk--page { width: min(56rem, 100%); padding: 2.4rem; border-radius: var(--_radius-l); background: var(--base); box-shadow: 0 0 0 1px var(--st-muted), 0 3rem 8rem -3.6rem rgba(22, 22, 22, .35); } .hm-talk--page .hm-talk__title { font-size: 4.4rem; } .hm-talk-page__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0; padding: 0; list-style: none; } .hm-talk-page__chips li { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.6rem; padding: 0 1.4rem; border-radius: 99rem; background: var(--base-tint); box-shadow: inset 0 0 0 1px var(--st-muted); font-size: 1.4rem; font-weight: 600; color: var(--t-medium); } .hm-talk-page__chips i { color: var(--hm-accent-ink); font-size: 1.6rem; } @media only screen and (min-width: 768px) { .hm-talk-main { height: 100svh; min-height: 0; overflow: hidden; } .hm-talk-page { height: 100svh; min-height: 0; padding: 12.8rem 0 3.2rem; } .hm-talk-page__wrap { min-height: 0; height: 100%; } .hm-talk-page__stage { min-height: 0; max-height: 100%; } .hm-talk--page { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3.2rem; } } @media only screen and (max-width: 767px) { .hm-talk--page { padding: 2rem; border-radius: 2.8rem; } .hm-talk--page .hm-talk__title { font-size: 3.6rem; } .hm-talk__row b { font-size: 1.8rem; } } /* The footer and Contact: "Message Handyman", and under it, smaller, "Call 1-866-6-FIXNOW" (build_lib.NUMBER_LINK). Each link dims on its own hover (the theme dimmed every link in the line at once). */ .hm-number a { color: var(--t-bright); } .no-touch .mxd-point-subtitle:hover .hm-number a { color: var(--t-bright); } .no-touch .hm-number a:hover { color: var(--t-medium); } a.hm-vanity { display: inline-block; white-space: nowrap; padding: 1rem 0; margin: -.65rem 0 -1rem; } /* a bigger tap, the same look */ .hm-nowrap { white-space: nowrap; } .hm-talk__alt a { padding: 1rem 0; } /* The menu's "Message me … Or call 1-866-6-FIXNOW": the menu is drawn in the opposite scheme, so its links take the opposite colours (the theme's own link colour was the menu's background in both). */ .menu-promo__caption a { color: var(--t-opp-bright); text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; } .no-touch .menu-promo__caption a:hover { color: var(--t-opp-medium); } /* ── No word left alone on a line (the founder, 2026-10-11, at the closing card's "care": "I hate how this brs with care being on one line alone. Fix this for all similar cards on all pages"). Headings and card titles balance their lines; running text avoids ending on one word. Both inherit, so a title's spans and the theme's split words follow. Browsers without them wrap as before. ── */ body { text-wrap: pretty; } /* A page's headline on a phone was 6rem, so "Free / for every / home. / Really." gave three of its four lines one word each. At 4rem the lines hold two words or more; these keep the browser's own wrapping (balancing a line that starts with the picture pill pushed the pill's line down to one word). */ @media only screen and (max-width: 767px) { .inner-headline__title { font-size: 4rem; line-height: 1.08; } } .inner-headline__title[data-hm-pill] { text-wrap: wrap; } /* one with no pill (Contact's "Let's talk about your home!") balances at 3.6rem: two lines, no "home!" alone */ @media only screen and (max-width: 767px) { .inner-headline__title:not([data-hm-pill]) { font-size: 3.6rem; } } :is(h1, h2, h3, h4, h5, .mxd-promo__caption, .mxd-testimonials-card__name, .mxd-awards-list__item p, .hm-optin__title, .mxd-section-title__title, .mxd-pinned__title, .mxd-manifest, .post-simple__title, .post-featured__title, .mxd-blog-preview__data a, .pricing-header__title, .quote__text, .hm-tf__title) { text-wrap: balance; } /* An article's opening picture is a 3:2 animation, and the theme's frame below 1200 is a fixed 460 / 600 px tall, so on a phone (330 px wide) "cover" cut away both sides of it (the founder: "Fix the videos on the articles on mobile theyre too zoomed in cant see shit"). Below 1200 the frame takes the picture's own shape, so all of it shows. */ @media only screen and (max-width: 1199px) { .mxd-article__thumb { height: auto; aspect-ratio: 3 / 2; } } /* The legal pages' other language (Law 25 follow-ups, 2026-10-12): "Version française" / "English version", beside the date, in the meta row's own type. */ .mxd-article__data .hm-lang-switch { text-decoration: underline; text-underline-offset: 0.2em; color: inherit; } .mxd-article__data .hm-lang-switch:hover { text-decoration-thickness: 2px; } /* The Start's ring and glow reach past its edge, and the stage and each step clip (a step scrolls inside on a short window, which clips sideways too): the founder, 2026-10-12, "glow around start button gets cut off on the left". The stage starts further left and the steps pad it back, so nothing moves and the glow has room; a phone's full-width Start keeps a tighter ring inside its gutters. */ .hm-gs .hm-tf__stage { margin-left: -2rem; } .hm-gs .hm-tf__stage > .hm-tf__step { padding-left: 2rem; } @keyframes hm-start-ring-tight { 0% { transform: scale(.98); opacity: .9; } 70%, 100% { transform: scale(1.02); opacity: 0; } } @media only screen and (max-width: 767px) { .hm-gs .hm-tf__stage { margin-left: -1.2rem; margin-right: -1.2rem; } .hm-gs .hm-tf__stage > .hm-tf__step { padding-left: 1.2rem; padding-right: 1.2rem; } .hm-tf__ok[data-start]::after { inset: -.4rem; animation-name: hm-start-ring-tight; } } /* For pros: Join and Pro sign in under the hero's lede (the founder, 2026-10-12: "add a proper cta for pros to join theres nothing anywhere lol"). Join is Get started's Start: Handyman green, big, with a glow. */ .hm-pro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 3.6rem; } .hm-pro-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 6.4rem; padding: 0 3.6rem; border-radius: 99rem; font: 700 2.1rem/1 var(--_font-accent); text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .hm-pro-cta a:hover { transform: translateY(-2px); } .hm-pro-cta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .hm-pro-cta__join { background: #2f9e44; color: #fff !important; box-shadow: 0 1.4rem 3.2rem -1.2rem rgba(47, 158, 68, .6); } .hm-pro-cta__join:hover { background: #2b8a3e; } .hm-pro-cta__join i { transition: transform .2s ease; } .hm-pro-cta__join:hover i { transform: translateX(.4rem); } .hm-pro-cta__in { border: 1px solid var(--st-muted); color: var(--t-bright) !important; font-weight: 600 !important; } .hm-pro-cta__in:hover { border-color: var(--t-bright); } [color-scheme="dark"] .hm-pro-cta__join { background: #51cf66; color: #0b2410 !important; box-shadow: 0 1.4rem 3.2rem -1.2rem rgba(81, 207, 102, .5); } [color-scheme="dark"] .hm-pro-cta__join:hover { background: #69db7c; } @media only screen and (max-width: 767px) { .hm-pro-cta { flex-direction: column; align-items: stretch; gap: 1.2rem; margin-top: 2.8rem; } .hm-pro-cta a { height: 5.6rem; font-size: 1.9rem; } } /* The menu fits the window a phone shows, not the tallest it could be (the founder: "Make sure on chrome mobile the bottom of sidebar doesnt get cut off on scrolling down"). Rayo sized it 100vh, which Chrome and Safari on a phone read with their toolbars hidden, so the panel's foot sat under the bottom bar and could not be scrolled to. */ .mxd-menu__wrapper { height: 100vh; height: 100dvh; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } @media only screen and (min-width: 768px) { .mxd-menu__wrapper { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); } } @media only screen and (max-width: 1199px) { .mxd-menu__inner { padding-bottom: 2.4rem; } } /* The menu's top row: its line on the left, Sign in on the right, under the close button. */ .hm-menu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; margin-bottom: 4.4rem; } .hm-menu-top .mxd-menu__caption { margin-bottom: 0; } .hm-menu-signin { flex: none; display: inline-flex; align-items: center; gap: .6rem; height: 4.4rem; padding: 0 1.8rem; border: 1.5px solid currentColor; border-radius: 10rem; color: var(--t-opp-bright); font-size: 1.6rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background .2s, color .2s; } .hm-menu-signin:hover { background: var(--t-opp-bright); color: var(--base); } .hm-menu-signin i { font-size: 1.4rem; } .hm-menu-signin:focus-visible { outline: .3rem solid var(--accent); outline-offset: .3rem; } /* Get started's first screen: a way back in for anyone who already has an account. */ .hm-tf__signin { margin: 1.8rem 0 0; font-size: 1.5rem; color: var(--t-medium); } .hm-tf__signin a { color: var(--t-bright); font-weight: 600; text-decoration: underline; text-underline-offset: .3rem; } @media only screen and (max-width: 767px) { .hm-menu-signin { height: 3.8rem; padding: 0 1.3rem; gap: .4rem; font-size: 1.45rem; } .hm-menu-top { gap: 1rem; } } .hm-menu-top .mxd-menu__caption { flex: 1 1 auto; min-width: 0; } /* THE THEME SWITCH (approved 2026-10-13). For the two frames a switch takes (app.js loadTheme adds .hm-theme-swap): no colour fades, so no layer is left half-faded, and a paint-only change on every element, so Safari on some iPhones repaints each layer in the new theme instead of keeping its old picture (the headline vanished until a scroll). Outline at 0 width draws nothing and moves nothing. */ .hm-theme-swap *, .hm-theme-swap *::before, .hm-theme-swap *::after { transition: none !important; outline: 0 solid transparent !important; }