is a direct child of , NOT of .wp-site-blocks, so it already spans edge-to-edge: there is no parent gutter to escape and the inner .ds-container owns the centred, capped content column (and its own padding-inline). position:relative here is LOAD-BEARING, not decoration: it is the containing block for the closer band's absolutely-positioned photo (.pti-cta__bg) and dark scrim (.pti-cta::after). Without it both resolve against the initial containing block and paint a viewport-sized dark overlay across the top of the document — i.e. over the hero. */ .pti-page > section { position: relative; } /* ── Accent-as-text alias ────────────────────────────────────── --accent-600 (#32A2C1) is the brand primary, but as TEXT it only reaches 2.77:1 on --surface / --surface-2 — below WCAG AA. --accent-700 clears 4.9:1 on light surfaces but drops to 3.2:1 on dark ones, so the pairing flips with the theme. Every accent-coloured text run on the page reads this one alias instead of picking a ramp step directly. */ .pti-page { --pti-accent-text: var(--accent-700); } [data-theme="dark"] .pti-page { --pti-accent-text: var(--accent-300); } /* ── Shared section furniture ──────────────────────────────── */ .pti-section-head { max-width: 60ch; margin-bottom: var(--space-5); } .pti-section-head--center { margin-inline: auto; text-align: center; } .pti-eyebrow { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--pti-accent-text); margin-bottom: var(--space-2); } .pti-eyebrow--light { color: var(--accent-300); } .pti-h2 { font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-1); text-wrap: balance; } .pti-lede { margin-top: var(--space-3); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-2); } .pti-lede--wide { max-width: 68ch; margin-inline: auto; font-size: var(--text-base); } /* ── Image placeholder (pti_img fallback) ──────────────────── */ .pti-ph { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-100), var(--accent-50) 45%, var(--base-100)); border: 1px solid var(--line-subtle); overflow: hidden; } [data-theme="dark"] .pti-ph { background: linear-gradient(135deg, rgba(50,162,193,.18), rgba(10,36,52,.4)); border-color: var(--base-700); } .pti-ph__slug { font-family: var(--font-mono, monospace); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--accent-700); opacity: .55; padding: var(--space-2); text-align: center; } [data-theme="dark"] .pti-ph__slug { color: var(--accent-200); } /* ── 1. HERO ───────────────────────────────────────────────── */ .pti-hero { position: relative; /* never rely on the shared band rule alone */ isolation: isolate; /* keep any child z-index local to the hero */ padding-block: clamp(var(--space-5), 4vw + 1rem, var(--space-6)); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(50,162,193,.16), transparent 60%), var(--base-950); } .pti-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .pti-hero__title { max-width: 22ch; margin-inline: auto; font-size: clamp(var(--text-3xl), 4vw + 1rem, var(--text-display)); } .pti-hero__gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-3); width: 100%; margin-block: var(--space-3); } @media (min-width: 720px) { .pti-hero__gallery { grid-template-columns: repeat(3, 1fr); align-items: center; } } /* height:auto is required, not cosmetic: wp_get_attachment_image() prints width/height HTML attributes, and a presentational height hint makes the box definite in both axes — which makes the CSS aspect-ratio inert. */ .pti-hero__img, .pti-hero__gallery .pti-ph { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4 / 3; } .pti-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .pti-hero__sub { max-width: 46ch; color: var(--base-300); font-size: var(--text-md); line-height: var(--leading-relaxed); } .pti-hero__sub strong { color: #fff; } /* ── 2. LETTER ─────────────────────────────────────────────── */ .pti-letter { max-width: 72ch; margin-inline: auto; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--text-1); } .pti-letter h3 { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-snug); color: var(--text-1); margin-top: var(--space-4); } .pti-letter h4 { font-size: var(--text-lg); font-weight: 700; color: var(--accent-700); margin-top: var(--space-3); } [data-theme="dark"] .pti-letter h4 { color: var(--accent-300); } .pti-letter strong { color: var(--text-1); font-weight: 700; } .pti-letter__sign { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); } .pti-letter__signature { max-width: 12rem; opacity: .9; } .pti-letter__author { display: flex; align-items: center; gap: var(--space-3); } .pti-letter__avatar { width: 3rem; height: 3rem; border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; display: block; } .pti-letter__avatar img, .pti-letter__avatar .pti-ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .pti-letter__id { display: flex; flex-direction: column; } .pti-letter__name { font-weight: 700; color: var(--text-1); } .pti-letter__title { font-size: var(--text-sm); color: var(--pti-accent-text); font-weight: 600; } /* ── 3. PROOF BAND (dog-foods PTI) ─────────────────────────── */ .pti-proof { padding-block: var(--space-5); background: radial-gradient(ellipse at 50% 100%, rgba(50,162,193,.14), transparent 65%), var(--base-900); text-align: center; } .pti-proof__kicker { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-300); margin-bottom: var(--space-4); } .pti-proof__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 640px) { .pti-proof__grid { grid-template-columns: repeat(3, 1fr); } } .pti-proof__cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); background: rgba(255,255,255,.05); border: 1px solid var(--base-700); border-radius: var(--radius-lg); } .pti-proof__nums { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 800; } .pti-proof__before { color: var(--base-400); font-size: var(--text-lg); text-decoration: line-through; text-decoration-color: var(--base-500); } .pti-proof__arrow { color: var(--accent-400); font-weight: 700; } .pti-proof__after { color: #fff; font-size: var(--text-2xl); } .pti-proof__delta { font-size: var(--text-md); font-weight: 800; color: var(--accent-300); } .pti-proof__label { font-size: var(--text-sm); color: var(--base-300); } .pti-proof__foot { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--base-400); } /* ── 4. FEATURES ───────────────────────────────────────────── */ .pti-features__list { display: flex; flex-direction: column; gap: var(--space-6); } .pti-feature__text { display: flex; flex-direction: column; gap: var(--space-3); } .pti-feature__text h2 { font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-1); } .pti-feature__text .pti-eyebrow { margin-bottom: 0; } .pti-feature__cta { margin: 0; } /* Media: strip the parent visual frame, let the image fill with a radius */ .pti-feature__visual { padding: 0; background: transparent; border: 0; min-height: 0; display: block; } .pti-feature__visual img, .pti-feature__visual .pti-ph { width: 100%; height: auto; /* see .pti-hero__img — beats the HTML hint */ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; aspect-ratio: 4 / 3; } /* ── 5. TESTIMONIALS ───────────────────────────────────────── */ .pti-testimonial-grid { margin-top: var(--space-5); } /* Photos intentionally blank per copy — keep the avatar as a soft token chip */ .pti-testimonial__avatar { background: var(--accent-100); } [data-theme="dark"] .pti-testimonial__avatar { background: rgba(50,162,193,.2); } .iw-testimonial__name { display: block; } .iw-testimonial__role { display: block; } /* ── 6. GUARANTEE ──────────────────────────────────────────── */ .pti-guarantee__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } @media (min-width: 900px) { .pti-guarantee__grid { grid-template-columns: 1.6fr 1fr; } } .pti-guarantee { align-items: flex-start; } .pti-guarantee .iw-guarantee__body p { margin-bottom: var(--space-3); } .pti-guarantee__media { margin: 0; } .pti-guarantee__media img, .pti-guarantee__media .pti-ph { width: 100%; height: auto; /* see .pti-hero__img — beats the HTML hint */ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; aspect-ratio: 4 / 5; } /* ── 7. FAQ ────────────────────────────────────────────────── */ .pti-faq__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .pti-faq__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .pti-faq__grid { grid-template-columns: 1fr 1fr; } } .pti-faq__item { padding: var(--space-4); background: var(--surface); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); } .pti-faq__q { font-size: var(--text-base); font-weight: 700; color: var(--text-1); margin-bottom: var(--space-2); } .pti-faq__a { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-relaxed); } /* ── 8. PRICING ────────────────────────────────────────────── */ .pti-price-h { color: var(--pti-accent-text); } .pti-pricing-grid { margin-top: var(--space-5); max-width: 60rem; margin-inline: auto; } .pti-price-card { display: flex; flex-direction: column; gap: var(--space-4); } .pti-price-card--featured { border: 2px solid var(--accent-600); } .pti-price-card__name { font-size: var(--text-lg); font-weight: 800; color: var(--text-1); letter-spacing: var(--tracking-snug); } .pti-price-card__price { display: flex; align-items: baseline; gap: var(--space-1); margin-top: var(--space-2); } .pti-price-card__currency { font-size: var(--text-lg); font-weight: 700; color: var(--text-2); } .pti-price-card__amount { font-size: clamp(var(--text-3xl), 6vw, var(--text-display)); font-weight: 800; line-height: 1; color: var(--text-1); } .pti-price-card__period { font-size: var(--text-sm); color: var(--text-2); } .pti-price-card__desc { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-relaxed); } .pti-price-card__features { margin: 0; } .pti-price-card__foot { margin-top: auto; } .pti-price-card__note { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-relaxed); padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-md); text-align: center; } .pti-btn-block { width: 100%; } /* ── 9. CLOSER / CTA ───────────────────────────────────────── */ .pti-cta { position: relative; /* containing block for __bg + ::after */ isolation: isolate; /* z-index 0/1/2 stack stays inside the band */ padding-block: clamp(var(--space-5), 4vw + 1rem, var(--space-6)); background: var(--base-950); overflow: hidden; text-align: center; } .pti-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; border-radius: 0; z-index: 0; } /* Scrim sits BETWEEN the photo (z 0) and the copy (z 2) — design intent kept, just correctly stacked. Tokenized via color-mix on --base-950 with a literal fallback for engines without color-mix(). */ .pti-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,22,32,.72), rgba(6,22,32,.92)); background: linear-gradient( 180deg, color-mix(in srgb, var(--base-950) 72%, transparent), color-mix(in srgb, var(--base-950) 92%, transparent) ); z-index: 1; pointer-events: none; } .pti-cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .pti-cta__title { font-size: clamp(var(--text-2xl), 4vw + 1rem, var(--text-4xl)); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: #fff; } .pti-cta__lede { max-width: 52ch; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--base-300); } .pti-cta__lede strong { color: var(--accent-300); } .pti-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); } .pti-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; } .pti-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; } /* ── Layout: feature row media order on desktop is handled by the parent's .iw-feature-row / --reverse rules already loaded. ── */