/* hosteasy/redesign-domain-transfer.css — PAGE CSS for the DETOUR redesign-domain-transfer.php (parent: domain-transfer-main-page.php). ========================================================================= Latest request (req_20260825_082416_e9346d): the redesign must use ONLY the LIVE HTML — no added content, tags or classes. The prior pass had wrapped the hero in an invented
to scope the light-blue band; that wrapper is now GONE. The top-portion markup is the live markup 1:1 (the raw

, the

lead and the live

> .login_register > .form form), and ALL the hero styling lives HERE, homed on the live selectors: - the light-blue full-bleed hero band → a .content::before pseudo-element (pure CSS, no markup) masked with a soft bottom fade so its edge is gentle and its exact height is forgiving; - the headline rules → .content > h1; - the lead rules → .specialParaStyl (its class). The layout is still a single stacked column: hero headline + left-aligned lead, then a centred form card, over the blue band. Everything below the hero (steps / benefits / FAQ / CTA) keeps the parent's design; those section selectors are position-based (nth-of-type) on .content's direct

children. CSS-ONLY: the class names mirror the LIVE page 1:1 (form / form_row / form_clmn / total / total_content(_row) / innercontent / login_register / helisttab / specialParaStyl) so the site's own transfer JS (domainTransfer / totalDomainTransRs) drives the real fields. ALL design lives here — never a raw hex, every value is a --ho-* token from brand-tokens.css. Loads the shared design system first (tokens + base + header/nav/footer). With the intro

back as a direct child of .content (no wrapper), the direct-

children of .content are, in order: 1 INTRO(specialParaStyl) · 2 (empty) · 3 STEPS · 4 (empty) · 5 (empty) · 6 FAQ · 7 CTA · 8 (empty) so nth-of-type(3)=steps, nth-of-type(6)=FAQ, nth-of-type(7)=CTA. The intro is styled by its class, never by position, so it is exempt from the card rules. */ @import "common.css"; /* rhythm — ONE slightly-smaller, EVEN vertical step for every band, ported from home-page.css (req: "common changes for spaces"). Scoping a smaller value HERE (this sheet loads only on this detour, so the global token is untouched elsewhere) makes the hero → form → steps → FAQ → CTA gaps read even and a touch tighter, matching the home hero. */ :root{--ho-s-section:clamp(34px,4.6vw,66px)} /* ── page wrapper ──────────────────────────────────────────────────────────── */ /* The hero's top step now lives on .content itself (the band is painted by .content::before, which starts at .content's top edge → right under the nav). Horizontal + zero bottom padding stay. position+z-index establish the stacking context so the ::before band can sit BEHIND the hero content at z-index:-1. */ .content{position:relative;z-index:0;max-width:var(--wrap);margin:0 auto; padding:calc(var(--ho-s-section) - 18px) var(--ho-s-5) 0} /* ── TOP PORTION: light-blue hero band → headline + lead, then the form card ─── The band is a full-bleed --ho-hero-grad blue painted by .content::before (pure CSS — NO wrapper element in the markup). It breaks out of the centred column to span the full viewport (the 50vw negative-left / 100vw-width trick) and sits at z-index:-1 behind the hero content. Its height is a generous clamp that covers the headline + lead + form card; a bottom mask fades the blue out softly so the exact height is forgiving and the band edge reads gentle (no hard rule). */ .content::before{content:"";position:absolute;z-index:-1;top:0;left:calc(50% - 50vw); width:100vw;height:clamp(560px,74vh,720px);background:var(--ho-hero-grad); -webkit-mask:linear-gradient(180deg,var(--ho-ink) 62%,transparent); mask:linear-gradient(180deg,var(--ho-ink) 62%,transparent)} /* headline — live selector .content > h1 (no wrapper) */ .content > h1{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight); letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink);font-weight:var(--ho-fw-black); text-align:center;max-width:960px;margin:0 auto var(--ho-s-4)} /* lead copy — homed on the live .specialParaStyl class; overrides the generic .content p prose rule. Mirrors home-page.css's hero lead: --ho-sky-800 ink + --ho-fs-md, LEFT-aligned (ragged right) like .banner_content > p. The h1 stays centred; only the paragraph reads left. */ .specialParaStyl{max-width:760px;margin: 0 auto var(--ho-s-6) !important;color: var(--ho-sky-800) !important;font-size: var(--ho-fs-md) !important;line-height: 1.7 !important;text-align:left} .specialParaStyl b{color: var(--ho-brand-text) !important;} /* ── transfer form card (live: .innercontent > .login_register > .form) ─────── */ /* a bottom margin gives the gap below the card before the white section (the band is a fixed-height pseudo now, so it can't supply that padding). */ .innercontent{max-width:600px;margin:0 auto var(--ho-s-section)} .login_register{min-width:0} .form{background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-xl); box-shadow:var(--ho-e-3);padding:var(--ho-s-6)} .form label{display:block;font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi); color:var(--ho-brand-text);letter-spacing:.01em;margin:0 0 var(--ho-s-2)} .form_row{margin:0 0 var(--ho-s-4)} .form_clmn{min-width:0} /* text inputs + the year value can't wrap, so a fixed 200px basis clipped the longer "combo" label — min-width:fit-content guarantees the column is never narrower than the full label (still flex-grows to share the row); if both labels can't fit the card width they wrap to stack rather than clip. */ #submithide > .form_clmn{flex:1 1 auto;min-width:fit-content} .form input[type="button"]{width:100%;cursor:pointer;font-weight:var(--ho-fw-bold);letter-spacing:.02em; font-size:var(--ho-fs-md);padding:13px var(--ho-s-5);border-radius:var(--ho-r); border:1px solid var(--ho-brand);background:var(--ho-brand-cta);color:var(--ho-white); transition:background var(--ho-dur) var(--ho-ease),filter var(--ho-dur) var(--ho-ease)} .form input[type="button"]:hover{background:var(--ho-sky-800)} /* the combo option reads as the secondary choice → outline */ #trasnfer-combo-div input[type="button"]{background:var(--ho-card);color:var(--ho-brand-text)} #trasnfer-combo-div input[type="button"]:hover{background:var(--ho-tile)} /* Amount / TAX / Net-Total display block */ .total{margin:var(--ho-s-4) 0} .total_content{background:var(--ho-tile);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg); padding:var(--ho-s-4);display:grid;gap:var(--ho-s-2)} .total_content_row{display:flex;align-items:center;justify-content:space-between;gap:var(--ho-s-3); color:var(--ho-body);font-size:var(--ho-fs-base)} .total_content_row span{font-weight:var(--ho-fw-semi);color:var(--ho-ink)} .total_content_row:last-child{border-top:1px solid var(--ho-line-2);padding-top:var(--ho-s-3); margin-top:var(--ho-s-1);font-weight:var(--ho-fw-bold);color:var(--ho-ink)} .total_content_row:last-child span{color:var(--ho-price);font-weight:var(--ho-fw-black);font-size:var(--ho-fs-lg)} /* the final Proceed submit → gold primary action */ .pakadge_submit{width:100%;border:1px solid var(--ho-gold-border);background:var(--ho-gold-grad); color:var(--ho-gold-ink);font-weight:var(--ho-fw-black);letter-spacing:.03em;font-size:var(--ho-fs-md); padding:14px var(--ho-s-6);border-radius:var(--ho-r);cursor:pointer; transition:filter var(--ho-dur) var(--ho-ease)} .pakadge_submit:hover{filter:brightness(1.04)} /* ── section headings + prose (standard 960px column) ──────────────────────── */ .content h3{font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-bold);color:var(--ho-ink); letter-spacing:var(--ho-tracking-tight);max-width:960px;margin:var(--ho-s-7) auto var(--ho-s-3)} .content p{max-width:960px;margin:0 auto var(--ho-s-4);color:var(--ho-body); font-size:var(--ho-fs-base);line-height:1.8} .content p b{color:var(--ho-ink)} .content p a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi)} .content p a:hover{color:var(--ho-sky-800)} /* ── live WYSIWYG cruft, neutralized (no markup change) ────────────────────── */ .content > p:empty{display:none;margin:0;padding:0} .content h3 + br{display:none} /* ── "How to transfer" steps + FAQ (live prose, styled by position) ────────── The intro

is again a direct

child of .content (no wrapper), so it is nth-of-type(1) and the below-hero numbering is: 1 INTRO · 2 (empty) · 3 STEPS · 4 (empty) · 5 (empty) · 6 FAQ · 7 CTA · 8 (empty), so nth-of-type(3)=steps, nth-of-type(6)=FAQ. Same card treatment as the parent. */ .content > p:nth-of-type(2), .content > p:nth-of-type(3){ max-width:960px;margin:var(--ho-s-3) auto var(--ho-s-6); background:var(--ho-card);border:1px solid var(--ho-line);border-left:3px solid var(--ho-brand); border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-1); padding:var(--ho-s-5) var(--ho-s-6);color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.9} .content > p:nth-of-type(2) b, .content > p:nth-of-type(3) b{color:var(--ho-brand-text);font-weight:var(--ho-fw-bold)} /* ── benefit list (ul.helisttab → marked cards) ────────────────────────────── */ .helisttab{display:grid;gap:var(--ho-s-3);max-width:960px;margin:var(--ho-s-4) auto var(--ho-s-2);padding:0;list-style:none} .helisttab li{position:relative;padding:var(--ho-s-4) var(--ho-s-5) var(--ho-s-4) calc(var(--ho-s-6) + var(--ho-s-2)); background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-1); color:var(--ho-body);font-size:var(--ho-fs-base);line-height:var(--ho-lh)} .helisttab li b{color:var(--ho-ink)} .helisttab li::before{content:"";position:absolute;left:var(--ho-s-4);top:var(--ho-s-4); width:22px;height:22px;border-radius:50%;background:var(--ho-success-soft); background-image:url("data:image/svg+xml;utf8,"); background-size:13px;background-position:center;background-repeat:no-repeat} /* ── closing call-to-action (live: a bare

, nth-of-type(7)) ─────────────── Per request "design its normal display": this paragraph carries NO position-specific rule, so it falls back to the generic .content p prose rule (960px centred column, left-aligned --ho-body text, line-height 1.8) plus .content p b (strong ink) and .content p a (brand link) — i.e. an ordinary body paragraph, matching the rest of the page copy. No card, no gradient band, no centring, no oversized lead . */ /* ── page responsive ───────────────────────────────────────────────────────── Single stacked column at every width now (no two-column hero). The form card is centred and capped at 600px; card + control padding step down on phones. */ @media (min-width:1024px){ /* h1 top step reduced (req: "common changes for h1") so the headline sits close to the nav like home-page.css's hero h1 (which carries no top margin). */ .form{padding:var(--ho-s-7)} /* the transfer-form card breathes on large screens (req: ".innercontent max width increase for larger screen"). Stays centred (margin:0 auto above); phone/tablet widths keep the 600px default. */ .innercontent{max-width:760px} } @media (max-width:640px){ .content{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)} .form{padding:var(--ho-s-4)} .content > p:nth-of-type(2), .content > p:nth-of-type(3){padding:var(--ho-s-4) var(--ho-s-4)} /* stack the two option buttons; reset the flex-basis so it doesn't become a tall VERTICAL size in the column layout (the mobile display bug) */ #submithide{flex-direction:column} #submithide > .form_clmn{flex:0 0 auto} .total_content_row{flex-wrap:wrap} } @media (max-width:400px){ .content{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)} .form input[type="text"],.form select{padding:11px var(--ho-s-3)} .total_content_row{font-size:var(--ho-fs-sm)} .total_content_row:last-child span{font-size:var(--ho-fs-base)} .pakadge_submit,.form input[type="button"]{font-size:var(--ho-fs-base); padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)} }