/** * Shared vocabulary for the four remaining Products pages — ShopRank AI, * PerfectMatch, PostProfit and Zipify Plus. * * Ported from the Claude Design artboards `ShopRank.dc.html`, * `PerfectMatch.dc.html`, `PostProfit v3.dc.html` and `ZipifyPlus.dc.html`, * which the canvas `Zipify.com Current Site.dc.html` imports for the `#shoprank`, * `#perfectmatch`, `#postprofit` and `#plus` routes. * * All four are written in inline styles rather than in a class vocabulary, so * there was nothing to inherit from either Home's `.zp-*` or the design * system's `.t-*`. What they share is each other: the same hero shell, band * head, button pair, grounds, card and accordion, band after band. That * shared half lives here behind the `.zpx-` prefix; each page's stylesheet * carries only what is genuinely its own. `inc/product/render.php` has the * long form of the argument. * * `.zpx-`, not `.zp-`: half these names are already taken in `home.css` with * different measurements (`.zp-card`, `.zp-hero`, `.zp-faq`, `.zp-eyebrow`). * The prefix is load-bearing, not decorative. * * NOT PORTED, deliberately: * * - The artboards' resets (`*{box-sizing}`, `body`, `a`, `img`). The theme * ships `assets/css/reset.css` sitewide and a second, differently-opinionated * copy on four pages is how grounds and margins drift apart between * templates. * - Their `@font-face` blocks. `tokens.css` already declares Galano Grotesque * at every weight these pages use. * - Their fixed masthead. `header.php` renders `.zp-header`, which is already * sticky and already overlays the hero by `-72px` — the same -72px the * artboards' own nav used — so the hero's literal top padding lands its top * edge exactly where the artboard put it. Nothing here needs to know about * the header beyond that. * * Nothing is scoped to a wrapper: the `zp-product` handle is registered * unenqueued and only the four `page-*.php` templates enqueue it, so no other * page ever loads these rules. */ /* ========================================================================== BANDS Five grounds, and the two washes that go over them. ========================================================================== */ .zpx-band { position:relative; } /* `overflow:clip` rather than `hidden`: the glow and texture layers bleed past the section's edges by design, and `hidden` on an ancestor would make that ancestor the nearest scroll container — which is exactly what breaks the two `position:sticky` bands on PostProfit. `clip` crops without scrolling. */ .zpx-band--texture, .zpx-band--glow { overflow:clip; } .zpx-band--light { background:var(--surface); } .zpx-band--subtle { background:var(--ink-050); } .zpx-band--gradient { background:var(--grad-zipify); color:var(--fg-on-dark); } .zpx-band--fade { background:linear-gradient(180deg,#0a3a79 0%,#061a3a 55%,#050a18 100%); color:var(--fg-on-dark); } .zpx-band--ink { background:var(--ground-dark); color:var(--fg-on-dark); } /* The artboards close `#f8f9fb` bands with a hairline rather than letting them run into the next ground. `seam` is the same rule on the top edge, for the bands that open one. */ .zpx-band--subtle { border-bottom:1px solid var(--ink-200); } .zpx-band--seam { border-top:1px solid var(--ink-200); } .zpx-band--ink.zpx-band--seam, .zpx-band--fade.zpx-band--seam, .zpx-band--gradient.zpx-band--seam { border-top-color:rgba(255,255,255,.14); } .zpx-band--texture::before, .zpx-band--glow::after { content:""; position:absolute; inset:0; pointer-events:none; } .zpx-band--texture::before { background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px); } .zpx-band--glow::after { background:radial-gradient(880px 440px at var(--zpx-glow-at,80% 6%),rgba(45,107,228,.3),transparent 70%); } /* A light band's texture and glow have to invert or they paint white on white. */ .zpx-band--light.zpx-band--texture::before, .zpx-band--subtle.zpx-band--texture::before { background:repeating-linear-gradient(135deg,rgba(13,31,78,.02) 0 2px,transparent 2px 80px); } .zpx-band--light.zpx-band--glow::after, .zpx-band--subtle.zpx-band--glow::after { background:radial-gradient(820px 420px at var(--zpx-glow-at,50% 0%),rgba(45,107,228,.06),transparent 70%); } .zpx-wrap { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:104px 48px; } .zpx-wrap--narrow { max-width:900px; } .zpx-wrap--mid { max-width:1000px; } /* ========================================================================== TYPE ========================================================================== */ .zpx-head { max-width:var(--zpx-head-measure,760px); margin:0 0 48px; } .zpx-head--center { margin-left:auto; margin-right:auto; text-align:center; } .zpx-head > :last-child { margin-bottom:0; } .zpx-eyebrow { margin:0 0 18px; font-size:12px; font-weight:800; line-height:1.35; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--blue-500); } .zpx-eyebrow--blue { color:var(--blue-500); } .zpx-eyebrow--pink { color:var(--pink-500); } .zpx-eyebrow--yellow { color:var(--zip-yellow); } .zpx-h1 { margin:0 0 22px; font-family:var(--font-display); font-size:clamp(34px,3.9vw,60px); font-weight:900; letter-spacing:-0.028em; line-height:1.02; text-wrap:pretty; } .zpx-h2 { margin:0 0 18px; font-family:var(--font-display); font-size:clamp(30px,3.4vw,50px); font-weight:900; letter-spacing:-0.024em; line-height:1.04; text-wrap:pretty; } .zpx-h3 { margin:0 0 12px; font-family:var(--font-display); font-size:21px; font-weight:900; letter-spacing:-0.015em; line-height:1.2; } .zpx-h2:last-child, .zpx-h3:last-child { margin-bottom:0; } .zpx-lede { margin:0; font-size:19px; line-height:1.6; color:var(--ink-700); } .zpx-on-dark .zpx-h1, .zpx-on-dark .zpx-h2, .zpx-on-dark .zpx-h3 { color:#fff; } .zpx-on-dark .zpx-lede { color:rgba(255,255,255,.74); } .zpx-accent { color:var(--zip-yellow); } .zpx-band--light .zpx-accent, .zpx-band--subtle .zpx-accent { color:var(--blue-700); } /* The one gradient-filled phrase the artboards use, on PostProfit's zero-risk headline. `color:transparent` is the fallback-visible risk here, so the colour is only dropped once the clip is known to apply. */ .zpx-grad-text { background:var(--grad-blue-text-accent); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .zpx-grad-text { -webkit-background-clip:text; background-clip:text; color:transparent; } } .zpx-body { margin:0; font-size:16px; line-height:1.6; color:var(--ink-600); } .zpx-on-dark .zpx-body { color:rgba(255,255,255,.7); } .zpx-fine { margin:0; font-size:12px; line-height:1.5; color:var(--ink-400); } .zpx-on-dark .zpx-fine { color:rgba(255,255,255,.45); } /* ========================================================================== HERO Shared by all four pages, to the padding. ========================================================================== */ /* 104px top clears the 72px header that overlays this band and leaves the artboards' own 32px gap under it. Pages that opened wider say so themselves. */ .zpx-hero .zpx-wrap { padding-top:104px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center; } .zpx-hero__lede { margin:0 0 34px; max-width:520px; font-size:20px; line-height:1.6; color:rgba(255,255,255,.76); } .zpx-hero__lede strong { color:#fff; font-weight:800; } .zpx-hero__cta { display:flex; flex-wrap:wrap; gap:12px; } .zpx-hero__note { margin:14px 0 0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.75); } /* The trust line under ShopRank's CTA pair: a pulsing dot over a hairline rule. */ .zpx-hero__trust { display:flex; align-items:center; gap:11px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); font-size:15px; color:rgba(255,255,255,.7); } .zpx-hero__trust::before { content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--zip-yellow); box-shadow:0 0 12px rgba(255,215,72,.8); animation:zpx-pulse 2.4s var(--ease-out) infinite; } @keyframes zpx-pulse { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.15); } } /* Eyebrow pill — the bordered lockup carrying the product mark and its name. */ .zpx-pill { display:inline-flex; align-items:center; gap:10px; margin:0 0 26px; padding:7px 14px 7px 8px; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); background:rgba(255,255,255,.05); } .zpx-pill__mark { display:flex; flex:0 0 auto; width:22px; height:22px; border-radius:7px; background-color:rgba(255,255,255,.1); background-size:13px auto; background-repeat:no-repeat; background-position:center; } .zpx-pill__label { font-size:12px; font-weight:700; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); } .zpx-band--light .zpx-pill, .zpx-band--subtle .zpx-pill { border-color:var(--ink-200); background:var(--ink-050); } .zpx-band--light .zpx-pill__label, .zpx-band--subtle .zpx-pill__label { color:var(--ink-600); } /* ========================================================================== BUTTONS ========================================================================== */ .zpx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:17px 32px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:800; line-height:1.15; letter-spacing:var(--ls-button); text-transform:uppercase; text-align:center; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .zpx-btn--primary { background:var(--grad-ocu); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(240,48,90,.28); } .zpx-btn--plus { background:var(--grad-plus); color:var(--ink-900); box-shadow:0 12px 28px rgba(253,62,93,.26); } .zpx-btn--primary:hover, .zpx-btn--primary:focus { color:#fff; filter:brightness(1.07); transform:translateY(-1px); } .zpx-btn--plus:hover, .zpx-btn--plus:focus { color:var(--ink-900); filter:brightness(1.07); transform:translateY(-1px); } .zpx-btn--ghost { padding:17px 28px; border:1.5px solid rgba(255,255,255,.24); color:rgba(255,255,255,.9); } .zpx-btn--ghost:hover, .zpx-btn--ghost:focus { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); } .zpx-btn--outline { padding:16px 30px; border:2px solid var(--blue-900); background:var(--surface); color:var(--blue-900); box-shadow:0 6px 16px rgba(13,31,78,.1); } .zpx-btn--outline:hover, .zpx-btn--outline:focus { background:var(--blue-900); color:#fff; transform:translateY(-1px); } .zpx-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45); } .zpx-band--light .zpx-btn:focus-visible, .zpx-band--subtle .zpx-btn:focus-visible { box-shadow:0 0 0 3px rgba(28,65,156,.35); } /* ========================================================================== CARDS AND POINT LISTS ========================================================================== */ .zpx-card { display:flex; flex-direction:column; gap:14px; padding:32px 30px; border-radius:20px; border:1px solid var(--ink-200); background:var(--surface); box-shadow:var(--sh-1); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .zpx-card:hover { box-shadow:var(--sh-3); transform:translateY(-2px); } .zpx-card--subtle { background:var(--ink-050); } .zpx-card > :last-child { margin-bottom:0; } .zpx-on-dark .zpx-card { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); box-shadow:none; } .zpx-on-dark .zpx-card:hover { background:rgba(255,255,255,.09); box-shadow:none; } /* The numbered chip on a step card. Navy on light grounds, gradient on dark. */ .zpx-num { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--blue-900); color:var(--zip-yellow); font-size:14px; font-weight:900; letter-spacing:.04em; } .zpx-num--grad { background:var(--grad-zipify); } /* The ringed check the dark bands put above a short feature title. */ .zpx-ring { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-pill); background:rgba(255,215,72,.14); border:1px solid rgba(255,215,72,.34); color:var(--zip-yellow); } .zpx-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .zpx-points li { display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.55; color:var(--ink-700); } .zpx-on-dark .zpx-points li { color:rgba(255,255,255,.84); } .zpx-check { flex:0 0 auto; margin-top:4px; color:var(--blue-700); } .zpx-on-dark .zpx-check { color:var(--zip-yellow); } .zpx-grid { display:grid; gap:20px; } .zpx-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .zpx-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .zpx-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } /* `auto-fit` where the artboard used it, so a three-up band reflows to two and then one without a breakpoint of its own. */ .zpx-grid--fit { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; } /* `display:grid` on the modifier as well as on `.zpx-grid`: every caller of this one passes it to `zpx_wrap_open()` on its own, where the base class would have to be spelled out beside it, and a split that silently stacks is the one failure this vocabulary should not allow. */ .zpx-grid--split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center; } /* ========================================================================== SLOTS An image box whose geometry holds whether or not the file has arrived. See zpx_slot() in inc/product/render.php for which files are missing and why. ========================================================================== */ .zpx-slot { position:relative; overflow:hidden; border-radius:24px; aspect-ratio:var(--zpx-slot-ratio,4/3); } .zpx-slot__img { width:100%; height:100%; object-fit:cover; display:block; } /* A slot with no file is a quiet hatched panel, not a broken-image icon or a visible TODO. It reserves exactly the space the picture will take. */ .zpx-slot--empty { border:1px solid var(--ink-200); background:var(--ink-050); background-image:repeating-linear-gradient(135deg,rgba(13,31,78,.035) 0 2px,transparent 2px 9px); } .zpx-on-dark .zpx-slot--empty { border-color:rgba(255,255,255,.14); background-color:rgba(255,255,255,.05); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px); } /* The hero render is the LCP candidate and is not cropped — it is a rendered composition, not a photograph, so it keeps its own height. */ .zpx-slot--bare { border-radius:0; aspect-ratio:auto; overflow:visible; } .zpx-slot--bare .zpx-slot__img { height:auto; object-fit:contain; } .zpx-slot--bare.zpx-slot--empty { border-radius:24px; aspect-ratio:var(--zpx-slot-ratio,4/3); } /* A screenshot in a framed panel — ShopRank's dashboard, on a light ground. */ .zpx-shot { border-radius:24px; overflow:hidden; border:1px solid var(--ink-200); background:var(--surface); box-shadow:var(--sh-4); } .zpx-shot img { width:100%; height:auto; display:block; } /* ========================================================================== BRAND RAIL PostProfit and Zipify Plus both open on it. Same band as OCU section 2. ========================================================================== */ /* The band the rail sits in. Shared rather than restated per page: PostProfit and Zipify Plus render this band identically, and when each page owned its own copy of this rule PostProfit's was simply missing — the rail rendered flush against the band's edges with no vertical padding at all. One rule, both pages, no way to forget it. */ .zpx-rail-band { position:relative; z-index:2; padding:44px 0 clamp(28px,3vh,44px); overflow:hidden; } .zpx-rail { overflow:hidden; width:100%; } .zpx-rail__lede { margin:0 0 24px; text-align:center; text-wrap:balance; font-size:12px; font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zip-yellow); opacity:.9; } .zpx-rail__track { display:flex; align-items:stretch; gap:16px; width:max-content; animation:zpx-rail 34s linear infinite; } .zpx-rail__card { flex-shrink:0; width:220px; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--ink-200); border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(13,31,78,.1); } .zpx-rail__img { width:100%; height:180px; object-fit:cover; display:block; } .zpx-rail__name { padding:12px 16px; background:#fff; font-size:16px; font-weight:700; letter-spacing:.03em; text-align:center; color:#202122; } @keyframes zpx-rail { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* Hover-pause is a courtesy on an endless loop; `product.js` adds the same class on focus-within so a keyboard user gets it too. */ .zpx-rail:hover .zpx-rail__track, .zpx-rail.is-paused .zpx-rail__track { animation-play-state:paused; } /* ========================================================================== FAQ
gives exclusive open with no script. See zpx_faq(). ========================================================================== */ .zpx-faq { display:flex; flex-direction:column; } .zpx-faq__item { border-top:1px solid var(--ink-200); } .zpx-faq__item:last-child { border-bottom:1px solid var(--ink-200); } /* Ruled rows like home's `.zp-faq`: no card, no marker, hover blue. */ .zpx-faq__q { display:block; padding:24px 0; cursor:pointer; list-style:none; font-size:19px; font-weight:800; letter-spacing:-0.01em; color:var(--ink-900); transition:color var(--dur-fast) var(--ease-out); } .zpx-faq__q::-webkit-details-marker { display:none; } .zpx-faq__q:hover { color:var(--blue-500); } .zpx-faq__q:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); } .zpx-faq__a { padding:0 0 24px; max-width:720px; font-size:16px; line-height:1.65; color:var(--ink-600); } .zpx-faq__a > :first-child { margin-top:0; } .zpx-faq__a > :last-child { margin-bottom:0; } .zpx-faq__more { margin:34px 0 0; font-size:16px; line-height:1.6; color:var(--ink-600); } /* ========================================================================== TABS ========================================================================== */ .zpx-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; } button.zpx-tab { padding:11px 20px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); font-family:inherit; font-size:14px; font-weight:800; letter-spacing:-0.01em; color:rgba(255,255,255,.8); cursor:pointer; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } button.zpx-tab[aria-selected="true"] { border-color:transparent; background:var(--zip-yellow); color:var(--ink-900); } button.zpx-tab:hover { color:#fff; } button.zpx-tab[aria-selected="true"]:hover { color:var(--ink-900); } button.zpx-tab:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45); } .zpx-panel:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); border-radius:var(--r-lg); } /* A page that gives its panels a `display` — PerfectMatch's industry panel is a grid — would otherwise beat `reset.css`'s `[hidden]` on equal specificity and show all of them at once, which is exactly what the `hidden` attribute is there to prevent before `product.js` runs. */ .zpx-panel[hidden] { display:none; } /* ========================================================================== SCROLL-PINNED BANDS PostProfit pins two. The track is taller than the viewport; the panel inside it is exactly 100vh and sticks. `product.js` writes the progress back as --zpx-progress and a `data-zpx-step` index. ========================================================================== */ /* No `overflow` on this element or any ancestor inside the band: an ancestor with `overflow` becomes the nearest scroll container and `position:sticky` silently stops working. This is the same constraint Home's pinned sections carry — see `tests/theme/test-home-pinned-sections-set-no-overflow.php`. */ .zpx-pin { position:relative; } .zpx-pin__panel { position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; } @media (prefers-reduced-motion:reduce) { /* Unpin rather than freeze: a reader who has asked for no motion still has to be able to reach the whole band, and a frozen sticky panel would show one step of three. */ .zpx-pin { height:auto !important; } .zpx-pin__panel { position:static; height:auto; padding:96px 0; } .zpx-rail__track { animation:none; } .zpx-hero__trust::before { animation:none; } .zpx-btn { transition:none; } } /* ========================================================================== FORM FIELDS One label-over-control pair, drawn identically by the Contact form, the Agency Partners application and (unlabelled, inverted) the About newsletter row. It lives here rather than in the first page that needed it because three pages is where a private copy starts to drift. Every field is a real `