/* hosteasy/redesign-price-list-page.css — PAGE sheet for the DETOUR redesign of the Host Easy Domain Price List page (redesign-price-list-page.php). ========================================================================= `full`-mode redesign VARIANT off domain-price-list-page.php, but — per req_20260825_053756_2a149c ("redesign wht i gave the live html — do not add new tags, classes and some content") — the redesign lives ENTIRELY in this sheet. The page DOM is the EXACT live markup, so every selector below keys to a REAL live class; NO page classes are invented (the old pl-* vocabulary is gone). How this variant differs from the parent (domain-price-list-page.css) is purely a CSS treatment choice: the price table reads as right-aligned, tabular-figure money columns on hairline rows (no zebra) under a sticky column-header, instead of the parent's centred + zebra table. Everything else follows the same Host Easy design system. Three-layer CSS: common.css (→ brand-tokens.css) first, then only this page's sections. Never a raw hex — every value is a --ho-* token. Live selectors styled here: .content → the single page wrapper (h1 hero + search + table + SEO) .content > h1 → the "Top Website Domain TLD Price List" page heading .specialParaStyl → the lead intro paragraph .search_form → the domain-lookup band (form + quick TLD chips) .search_domain_txt/slct/btn → the search pill fields + gold SEARCH action .search_domain_list → the one-tap TLD radio chips .table / .table table → the 23-TLD price table as a rounded price card .domain_price → the promo (offer) price chip .prompriceoffstrike → the struck was-price next to a promo chip .content h3 / p → the SEO section headings + prose .helisttab → the SEO reason lists (rendered as check-marked cards) */ @import "common.css?v=2"; /* even vertical rhythm for every band on this page, matching the sibling pages */ :root{--ho-s-section:clamp(34px,4.6vw,66px)} /* ── page wrapper (the live .content holds the h1/lead + search + table + SEO) ── (req_00f902 "top portion design like hosteasy/redesign-domain-transfer.php … this portion not look — not used para content full width"): the hero is rebuilt to the SAME recipe the transfer detour ships. The old pass painted TWO per-element full-bleed bands — one on `.content > h1` and one on `.specialParaStyl` (each via margin:0 calc(50% - 50vw) + padding tricks) — which is what made the lead read as a full-width WALL of text. Both bands are gone. Now ONE full-bleed blue band is painted by .content::before (pure CSS, no markup), and the h1 + lead sit centred over it as an ordinary capped column. position+z-index establish the stacking context so the ::before band can sit BEHIND the hero content at z-index:-1; the hero's top step now lives on .content's padding-top so the band starts flush under the nav. */ .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: one light-blue hero band → centred headline + capped lead, then the search widget over it — ported 1:1 from redesign-domain-transfer.css. The band is a full-bleed --ho-hero-grad blue painted by .content::before (NO wrapper element): 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 + the top of the floating search widget; a bottom mask fades the blue out softly so the exact height is forgiving and the band edge reads gentle (no hard rule — the search widget supplies its own wash below the fade). */ .content::before{content:"";position:absolute;z-index:-1;top:0;left:calc(50% - 50vw); width:100vw;height:clamp(500px,66vh,660px);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, centred over the band (no per-element band) */ .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-wrap:balance;text-align:center;max-width:960px;margin:0 auto var(--ho-s-4)} /* lead copy — homed on the live .specialParaStyl class. Per the follow-up ("do not use full width in the paragraph … like hosteasy/redesign-domain-transfer.php"): the lead is NOT full-bleed across the --wrap column any more. It reads on a capped reading measure (760px, centred column) exactly like domain-transfer's .specialParaStyl, still left-aligned ragged right — --ho-sky-800 ink on --ho-fs-md. */ .content > p.specialParaStyl{max-width:760px;margin:0 auto var(--ho-s-6); color:var(--ho-sky-800);font-size:var(--ho-fs-md);line-height:1.7; text-indent:0;text-wrap:pretty;text-align:left} .content > p.specialParaStyl b{color:var(--ho-brand-text)} /* ── domain search band (.search_form) — the live domain-lookup widget ───────── A soft cyan hero-wash panel wrapping a floating white search pill and the quick TLD chips, sitting over the single ::before hero band and reading as the primary action above the neutral price table. One gold SEARCH action. (The band is now a fixed-height pseudo behind everything, so the old large negative overlap — sized to the removed per-element paragraph band — is trimmed to a small step that keeps the widget snug under the lead while still floating on the blue.) */ .search_form{max-width:960px;margin:calc(-1 * var(--ho-s-3)) auto var(--ho-s-7);position:relative;z-index:10; background:var(--ho-hero-grad);border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-xl); box-shadow:var(--ho-e-2);padding:var(--ho-s-6)} #message-domain:not(:empty){margin:0 0 var(--ho-s-3);padding:10px 14px;border-radius:var(--ho-r-sm); background:var(--ho-price-soft);color:var(--ho-price);font-size:var(--ho-fs-sm)} /* the search pill floats on the band — white card, softer elevation than the band */ .search_form > form{margin:0;background:var(--ho-card);border:1px solid var(--ho-line); border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-2);padding:var(--ho-s-3);display:flex;gap:var(--ho-s-2);align-items:stretch} .search_form > form > div:first-child{flex:1 1 auto} .search_domain_txt{width:100%;height:100%;border:0;padding:14px var(--ho-s-4);font-size:var(--ho-fs-md); color:var(--ho-ink);background:transparent;border-radius:var(--ho-r);outline:none} .search_domain_txt::placeholder{color:var(--ho-muted)} .search_domain_slct{height:100%;border:1px solid var(--ho-line-2);background:var(--ho-tile);color:var(--ho-brand-text); font-weight:var(--ho-fw-semi);padding:0 var(--ho-s-3);border-radius:var(--ho-r);font-size:var(--ho-fs-sm)} .search_domain_btn{height: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;padding:0 var(--ho-s-6);border-radius:var(--ho-r);cursor:pointer; transition:filter var(--ho-dur) var(--ho-ease)} .search_domain_btn:hover{filter:brightness(1.04)} /* ── quick TLD chips (.search_domain_list) — a wrap-around flex row of one-tap extension pills; the price (margin-left:auto) right-aligns inside each pill. */ .search_domain_list{margin:var(--ho-s-4) 0 0} .search_domain_list ul{display:flex;flex-wrap:wrap;gap:var(--ho-s-2);margin:0;padding:0;list-style:none} .search_domain_list li{display:flex;align-items:center;gap:6px;white-space:nowrap;background:var(--ho-card); border:1px solid var(--ho-line);border-radius:var(--ho-r-pill);padding:8px 12px;font-size:var(--ho-fs-sm); color:var(--ho-body);cursor:pointer; transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)} .search_domain_list li:hover{border-color:var(--ho-sky-300);color:var(--ho-brand-text);box-shadow:var(--ho-e-1);transform:translateY(-1px)} .search_domain_list li b{margin-left:auto;padding-left:8px;white-space:nowrap;color:var(--ho-price);font-weight:var(--ho-fw-bold)} .search_domain_list input[type=radio]{accent-color:var(--ho-brand);margin:0;flex:0 0 auto} /* ── the TLD price table — one elegant, rounded price card ───────────────────── The .table wrapper is the card (border + soft elevation + clipped corners); the fills it edge to edge. This variant's signature: right-aligned, tabular money columns on hairline rows (no zebra) under a sticky column header. */ .table{max-width:960px;margin:0 auto var(--ho-s-7);background:var(--ho-card); border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-2); overflow:hidden} .table table{width:100%;border-collapse:collapse;font-size:var(--ho-fs-sm)} /* title row — the live "Domain Prices Overview" header row (a real and this stylesheet. If the platform ever renames a column, THIS BLOCK MUST FOLLOW or the mobile view will lie about what the numbers mean. That is the price of not having data-labels, and it is why the original decision went the other way. The thead stays in the DOM, only hidden, so header/cell association survives for assistive tech. */ @media (max-width:640px){ .table{overflow-x:visible;background:none;border:0;box-shadow:none} .table table{min-width:0;display:block} .table table thead tr:last-child{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .table table thead tr th[colspan]{display:block;border-radius:var(--ho-r-lg) var(--ho-r-lg) 0 0} .table table tbody{display:block} .table table tbody tr{display:block;margin-bottom:var(--ho-s-4); background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg); box-shadow:var(--ho-e-1);overflow:hidden} .table table tbody tr:hover{background:var(--ho-card)} .table table td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ho-s-4); padding:var(--ho-s-3) var(--ho-s-4);text-align:right;border-top:1px solid var(--ho-line)} /* the TLD is the card's heading, not a labelled row */ .table table tbody td:first-child{display:block;text-align:left;border-top:0; padding:var(--ho-s-3) var(--ho-s-4);background:var(--ho-tile); font-size:var(--ho-fs-md);font-weight:var(--ho-fw-bold);color:var(--ho-ink)} /* the labels live here because the markup has none — keep in step with the thead */ .table table tbody td:not(:first-child)::before{content:attr(data-label); flex:0 0 auto;text-align:left; font-size:var(--ho-fs-xs);font-weight:var(--ho-fw-semi);color:var(--ho-muted); text-transform:uppercase;letter-spacing:.04em} .table table tbody td:nth-child(2)::before{content:"Registration / Year"} .table table tbody td:nth-child(3)::before{content:"Renewal / Year"} .table table tbody td:nth-child(4)::before{content:"Transfer / Year"} .table table tbody td:nth-child(5)::before{content:"Restoration / Year"} } @media (prefers-reduced-motion: reduce){ .table table tbody tr:hover{background:inherit} .search_domain_list li:hover{transform:none} }
as the first thead row) styled as a full-width header BAR crowning the card: brand hero-wash, bold brand ink, centred, a hairline dividing it from the column labels below. Sits flush inside the card's clipped rounded top. */ .table table thead tr th[colspan]{background:var(--ho-hero-grad);color:var(--ho-hero-ink); font-weight:var(--ho-fw-black);font-size:var(--ho-fs-lg);letter-spacing:var(--ho-tracking-tight); text-transform:none;text-align:center;padding:var(--ho-s-4) var(--ho-s-5);border-bottom:1px solid var(--ho-sky-200)} /* column header row — brand-tint band, uppercase small caps, cyan ink; sticks to the top while the 23 rows scroll. Money columns right-align to match the cells. */ .table table thead tr:last-child th{position:sticky;top:0;z-index:1; background:var(--ho-tint-sky);color:var(--ho-brand-text); font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-xs);letter-spacing:.05em;text-transform:uppercase; text-align:right;padding:var(--ho-s-4) var(--ho-s-4);border-bottom:1px solid var(--ho-line-2);white-space:nowrap} .table table thead tr:last-child th:first-child{text-align:left;padding-left:var(--ho-s-5)} /* body cells — hairline row dividers (no zebra), right-aligned tabular numerics */ .table table td{padding:var(--ho-s-3) var(--ho-s-4);text-align:right;color:var(--ho-body); border-top:1px solid var(--ho-line);vertical-align:middle;white-space:nowrap; font-variant-numeric:tabular-nums} .table table tbody tr:first-child td{border-top:0} .table table tbody tr:hover{background:var(--ho-sky-50)} /* first column = the extension: bold brand ink, left-aligned anchor for the row */ .table table tbody td:first-child{text-align:left;padding-left:var(--ho-s-5); font-weight:var(--ho-fw-bold);color:var(--ho-brand-text);font-size:var(--ho-fs-base); letter-spacing:var(--ho-tracking-tight)} /* promo price chip + struck original (real site classes .domain_price / .prompriceoffstrike): the chip is a soft-cyan brand offer marker, the strike is the warm amber was-price. */ .domain_price{display:inline-block;background:var(--ho-brand-soft);color:var(--ho-brand-text); font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-sm);padding:2px 9px;border-radius:var(--ho-r-pill); line-height:var(--ho-lh-snug);white-space:nowrap;font-variant-numeric:tabular-nums} .prompriceoffstrike{color:var(--ho-warn);text-decoration:line-through;font-size:var(--ho-fs-xs); margin-left:2px;white-space:nowrap;font-weight:var(--ho-fw-semi);font-variant-numeric:tabular-nums} /* ── SEO section headings + prose — headings and body prose share the same 960px reading column (per the follow-up "do not use full width in the paragraph … like redesign-domain-transfer.php"): the SEO paragraphs are capped + centred to match domain-transfer's `.content p`, aligned with the h3/table/list column, no longer stretching the whole --wrap width. */ .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.7} .content > p b{color:var(--ho-ink)} /* ── SEO reason lists (ul.helisttab → check-marked cards) ──────────────────── */ .helisttab{display:grid;gap:var(--ho-s-3);max-width:960px;margin:var(--ho-s-4) auto var(--ho-s-2); list-style:none;padding:0} .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} /* ── page responsive ──────────────────────────────────────────────────────── */ @media (max-width:768px){ /* let the price table scroll sideways inside its card rather than crushing five money columns (the live DOM has no per-cell labels, so no card transform). */ .table{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .table table{min-width:560px} .table table thead th,.table table td{padding:var(--ho-s-3) var(--ho-s-2)} .table table thead tr:last-child th:first-child,.table table tbody td:first-child{padding-left:var(--ho-s-4)} } @media (max-width:640px){ /* softer overlap on mobile — the stacked band is shorter */ .search_form{margin-top:calc(-1 * var(--ho-s-4));padding:var(--ho-s-4)} .search_form > form{flex-direction:column;gap:var(--ho-s-3)} .search_form > form > div{width:100%} .search_domain_txt{border:1px solid var(--ho-line-2);border-radius:var(--ho-r);padding:13px var(--ho-s-4)} .search_domain_slct{width:100%;height:auto;padding:13px var(--ho-s-3)} .search_domain_btn{width:100%;height:auto;padding:14px;border-radius:var(--ho-r)} /* CONTENT-SIZED, TWO PER ROW, NOTHING STRETCHES (req 7cc201, refining be9656). grow:0 IS the "do not extend to the right" — a short chip never fills the space a long neighbour leaves. Measured at 500: [123,142] [154,148] [134,147] rather than one 403px chip per row. KNOWN CONSEQUENCE, chosen deliberately: with the chip sized to its content there is no slack inside it, so `b{margin-left:auto}` has nothing to push against and the price sits beside the TLD rather than flush right. The two are mutually exclusive — pushing the price to the far edge REQUIRES the spare width that content-sizing removes. Do not "fix" one by reintroducing the other. */ .search_domain_list li{flex:0 1 auto} .domain_price{padding:2px 8px} .prompriceoffstrike{display:block;margin-left:0;margin-top:2px} } /* page-specific reduced-motion (site-wide guard lives in common.css) */ /* ── the price table as CARDS on mobile (req be9656) ────────────────────────── This replaces the sideways scroll that used to live in the 768px block. The comment there said a card transform was impossible because "the live DOM has no per-cell labels" — true, there are no data-label attributes, but the COLUMN ORDER is fixed and known, so the labels can come from nth-child instead. ⚠THE COST, KNOWINGLY TAKEN: these five column names now live in TWO places — live's