/* hosteasy/domain-individual-page.css — PAGE-specific CSS for the Host Easy ".in Domain Name Registration" page (the live in-domain-price.php). ========================================================================= STYLE-ONLY. This file themes the user's PASTED live HTML unchanged — no class or tag is invented, the design is pure CSS (per req_20260813_110344_f65bff: "i posted original live html content … strictly i asked you dont add any tags or class names — exist html rework and give best design output"). It keys strictly to the classes that ship in that markup: .content_area → outer page band (centres the column) .content → the content column (hero + form + table + prose) .content > h1 → the ".in Domain Name Registration" hero heading .content > p → the lead intro (first) + closing prose (last) .search_domain → the real domain-search form (input + TLD select + Submit), themed as one elegant search bar .search_domain_txt / _slct / _btn / .error_alert → its fields, CTA + error line .table → the price section (its h2 heading + the table card) .table table / th / td → the 1–4 year price table as a rounded price card The user's own inline-styled promo (#1fa8d2) / struck-was (#fbb147) price s are their HTML and are left exactly as pasted — this file does not fight them. Loads the shared design system first (tokens + base + header/nav/footer + shared responsive), then adds ONLY this page's sections. Every value is a --ho-* token from brand-tokens.css; this file writes no raw hex of its own. */ @import "common.css"; /* page rhythm — adopt the home page's ONE slightly-smaller, EVEN vertical step so the hero → search → price table → closing prose bands read even and a touch tighter, matching home-page.php. Scoped HERE (this sheet loads only on this page), so the global token is untouched elsewhere (mirrors home-page.css). */ :root{--ho-s-section:clamp(34px,4.6vw,66px)} /* ── a11y skip-link (page chrome; matches the sibling redesigned pages) ─────── */ .skip-link{position:absolute;left:var(--ho-s-3);top:-48px;z-index:100;background:var(--ho-card); color:var(--ho-brand-text);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-sm); padding:8px var(--ho-s-4);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi); transition:top var(--ho-dur) var(--ho-ease)} .skip-link:focus{top:var(--ho-s-3)} /* ── header — no page override: the shared white header (common.css) is used as-is (req_20260825_104055: "i did not mention the header background (revert back old)"). An earlier pass had painted the whole top bar blue; that was never asked for, so the override is removed and the site's standard header returns. ──────────────── */ /* ── page band + content column ─────────────────────────────────────────────── */ .content_area{background:var(--ho-surface)} .content{max-width:1040px;margin:0 auto;padding:var(--ho-s-section) var(--ho-s-5)} /* ── hero heading — CENTERED, mirroring home's .banner_content h1 (which inherits text-align:center from .banner_content) per req "top h1 should be center alignment". Sits on the full-bleed blue hero band defined below; width is left auto so that band's full-bleed recipe can span it edge-to-edge. Same hero size/weight/tracking tokens. ─────────────────────────────────────────────────── */ .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;text-wrap:balance; margin:0 0 var(--ho-s-4)} /* ── paragraphs — left-aligned and full-measure, mirroring home's .banner_content > p (centred cap + 74ch measure dropped per this "common changes" pass): the lead intro (first) and closing prose (last) read flush-left, filling the full content column. Both are plain

in the paste. ─────────────────────────────── */ .content > p{width:100%;max-width:none;text-align:left;color:var(--ho-body); font-size:var(--ho-fs-md);line-height:var(--ho-lh);text-wrap:pretty;margin:0 0 var(--ho-s-6)} .content > p:first-of-type{color:var(--ho-muted)} .content > p:last-of-type{margin:var(--ho-s-7) 0 var(--ho-s-2)} /* ── hero band — FULL-WIDTH blue band, matching home-page.php's `.banner` (req: "background: var(--ho-hero-grad); full width blue background — refer the home page"). Home paints --ho-hero-grad edge-to-edge across the WHOLE viewport (`.banner{background:var(--ho-hero-grad);border-bottom:1px solid var(--ho-sky-100)}`); the earlier pass only bled the wash to .content's 1040px column edge. This page has no hero wrapper (the live DOM is pinned — no added tag/class), so the same wash is applied to the two real top elements (.content > h1 + the intro

) with the standard full-bleed recipe used on the sibling domain-price-list-page.css: `margin-inline:calc(50% - 50vw)` + auto width makes each element span the full 100vw, and `padding-inline:max(s5, 50vw - 520px)` re-insets the text to the 1040px content column (520 = 1040/2). The two share the wash with the inter-element gap collapsed (H1 margin-bottom:0, intro margin-top:0) so they read as ONE continuous blue band; the H1 still pulls up under the nav (negative top margin) and the intro closes the band with the +20px bottom room + a sky-100 hairline. Dark home inks (--ho-hero-ink / --ho-sky-800) stay AA-safe on the pale cyan wash, and the search card still laps up over the band's lower edge (see .search_domain). ─────────────── */ .content > h1, .content > p:first-of-type{background:var(--ho-hero-grad);width:auto; margin-inline:calc(50% - 50vw); padding-inline:max(var(--ho-s-5),calc(50vw - 520px))} .content > h1{color:var(--ho-hero-ink); margin-top:calc(-1 * var(--ho-s-section));padding-top:var(--ho-s-section); padding-bottom:var(--ho-s-4);margin-bottom:0} .content > p:first-of-type{color:var(--ho-sky-800); margin-top:0;padding-bottom:calc(var(--ho-s-section) + 20px);margin-bottom:0; border-bottom:1px solid var(--ho-sky-100)} /* ── the domain search form (.search_domain) — one elegant search bar ───────── Retuned to speak home-page.css's `.search_form` language (per this edit: "design need look like hosteasy/home-page.php") so the two pages' search bars read as ONE component: a wider (920px) white card at the stronger --ho-e-3 elevation, --ho-s-3 padding, a full-height input at 14px, the TLD