/* Zipify Pages — the product page's own layout, transcribed from the `ZipifyPages.dc.html` artboard. Registered as `zp-pages`; enqueued by page-pages.php alone, so it never loads on another page. Requires tokens.css, theme.css and home.css. home.css is a declared dependency (see inc/pages/assets.php) because it carries the shared section vocabulary from design spec §6 — `.zp-section`, `.zp-wrap`, `.zp-eyebrow`, `.zp-h2`/`.zp-h3`, `.zp-lede`, `.zp-card`, `.zp-cta`, `.zp-grid--*`, `.zp-points`, `.zp-on-dark`. Nothing here restates any of them. EVERY class in this file is `.zpp-`-prefixed, and that is load-bearing rather than stylistic: home.css already defines `.zp-pages` for Home's own Zipify Pages *section*, along with `.zp-hero`, `.zp-trust`, `.zp-ocu`, `.zp-postprofit`, `.zp-shoprank`, `.zp-ai`, `.zp-plus`, `.zp-founder`, `.zp-academy`, `.zp-pricing`, `.zp-ladder`, `.zp-scale`, `.zp-faq-section` and `.zp-closing-cta`. A `.zp-`-prefixed name here would collide with one of them on a page that loads both stylesheets. Colours resolve to tokens.css custom properties. Two permitted exceptions, both carried over from home.css's contrast corrections rather than taken from the artboard: * #6b6e7a replaces the artboard's --ink-500 (#7a7d88) wherever --ink-500 was used for small copy on white. --ink-500 measures ~4.0:1 on --surface and so fails WCAG AA's 4.5:1 floor; #6b6e7a is the same grey darkened just far enough, at 5.08:1 on --surface and 4.82:1 on --ink-050. home.css documents the same value for the same reason, and a test there rejects the artboard original by literal — do not restore #7a7d88 for text. * the interactive-state greys below follow --ink-600/--ink-700, not the artboard's lighter inactive greys, for the same floor. Alpha-over-ground whites and the navy-tinted shadow literals have no token form; theme.css and home.css use the same values. */ /* --- Grounds ---------------------------------------------------------------- */ /* The builder band's own vertical gradient (artboard §9). Not --grad-zipify: that is the 135deg masthead diagonal, and this band runs top-to-bottom through a third stop. No existing token matches, so it is declared here rather than pushed into tokens.css for one page's one band. */ .zpp-builder { --zp-section-bg:linear-gradient(180deg,#0a3a79 0%,#061a3a 55%,#050a18 100%); } /* --- Element resets --------------------------------------------------------- */ /* The sections use real list, figure and quote elements for their semantics, which brings the UA's own margins and list markers with them. Cleared here in one place rather than per section. theme.css sets box-sizing globally. */ .zpp-stats__list, .zpp-stats dt, .zpp-stats dd, .zpp-integrations, .zpp-plan__features { margin:0; padding:0; } .zpp-integrations, .zpp-plan__features { list-style:none; } /* reset.css italicises `
`; §12's caption is a plain eyebrow and heading, so the slant is cleared along with the UA margin. */ .zpp-proof__item, .zpp-quote { margin:0; } .zpp-proof__item figcaption { font-style:normal; } .zpp-quote__text { margin:0; } .zpp-hero__badge { margin:0 0 26px; } .zpp-plan__price { margin:0; } /* `` defaults to italic; the brand here is plain, and the quote body supplies its own italic. */ .zpp-quote__brand { font-style:normal; } /* --- Shared wrapper --------------------------------------------------------- */ /* The artboard's own content column: 1240px at 96px/24px, wider and shorter than `.zp-wrap`'s 1180px at 112px/48px. Bands that do match `.zp-wrap` exactly — the hero and the builder — use `.zp-wrap` and are not restated. */ .zpp-wrap { max-width:1240px; margin:0 auto; padding-inline:24px; } /* Bands that continue the white ground above them and so open with no top padding: the three steps, the guarantee card, the FAQ. */ .zpp-wrap--continue { padding-top:0; } /* Overrides the marginless shared `.zp-eyebrow`, the way `.zpp-wrap` does `.zp-wrap`. */ .zpp-eyebrow { margin-bottom:18px; } /* The standard eyebrow + heading block above a section's body. */ .zpp-head { max-width:760px; margin:0 0 44px; } .zpp-head .zp-h2 { margin:0; } .zpp-head--lede .zp-h2 { margin:0 0 16px; } .zpp-lede-wide { margin:0 0 36px; max-width:700px; font-size:18px; line-height:1.6; color:var(--ink-700); } /* --- Section 1: hero -------------------------------------------------------- */ .zpp-hero { --zp-section-bg:var(--grad-zipify); position:relative; overflow:hidden; } /* The two decorative overlays: a fine diagonal hatch and a soft blue bloom in the top right. Pseudo-elements rather than markup — they carry no meaning. */ .zpp-hero::before, .zpp-hero::after { content:""; position:absolute; inset:0; pointer-events:none; } .zpp-hero::before { background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px); } .zpp-hero::after { background:radial-gradient(880px 440px at 80% 6%,rgba(45,107,228,.3),transparent 70%); } .zpp-hero .zp-wrap { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; align-items:center; } .zpp-hero__badge { display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; padding:7px 16px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--zip-yellow); } .zpp-hero__title { margin:0 0 22px; font-size:clamp(34px,3.9vw,60px); font-weight:900; letter-spacing:-.028em; line-height:1.02; color:var(--fg-on-dark); } .zpp-hero__lede { margin:0 0 30px; max-width:520px; font-size:20px; line-height:1.6; color:rgba(255,255,255,.76); } /* `.zp-points` (home.css) carries the check, the gap and the on-dark copy colour. Only the bottom margin differs from its 32px default here. */ .zpp-hero__points { margin-bottom:34px; } .zpp-hero__ctas { display:flex; flex-wrap:wrap; gap:12px; } /* The hero's primary button is a touch larger than `.zp-cta`'s 16px/30px. */ .zpp-hero__ctas .zp-cta { padding:17px 32px; } .zpp-hero__ctas .zp-cta--ghost { padding:17px 28px; } /* The screenshot deliberately overhangs its column on both sides, as drawn. */ .zpp-hero__shot { position:relative; margin:0 -14% 0 -4%; animation:zppRise 700ms var(--ease-out) both; } .zpp-hero__shot img { display:block; width:118%; max-width:none; height:auto; } /* --- Section 2: stats ------------------------------------------------------- */ /* Shares the hero's ground: no seam, no border, and the figures read as the hero's own footnote rather than as a white band cutting between the hero and the brand marquee below. */ .zpp-stats { position:relative; overflow:hidden; } .zpp-stats::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px); } .zpp-stats__list { position:relative; max-width:1180px; margin:0 auto; padding:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px 24px; } .zpp-stat__value { font-size:32px; font-weight:900; letter-spacing:-.024em; line-height:1; color:var(--zip-yellow); } .zpp-stat__label { margin-top:7px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); } /* --- Section 3: brand marquee ----------------------------------------------- */ .zpp-marquee { --zp-section-bg:var(--ground-trust); position:relative; overflow:hidden; } .zpp-marquee__inner { position:relative; z-index:2; padding:40px 0 60px; overflow:hidden; } .zpp-marquee__eyebrow { margin:0 0 24px; text-align:center; text-wrap:balance; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--zip-yellow); opacity:.9; } .zpp-marquee__viewport { width:100%; overflow:hidden; } .zpp-marquee__track { display:flex; align-items:stretch; gap:16px; width:max-content; padding-bottom:32px; animation:zppRail 34s linear infinite; } .zpp-brand { display:flex; flex-direction:column; flex-shrink:0; width:220px; overflow:hidden; border:1px solid var(--ink-200); border-radius:14px; background:var(--surface); box-shadow:0 8px 24px rgba(13,31,78,.1); } .zpp-brand img { display:block; width:100%; height:180px; object-fit:cover; } .zpp-brand__name { padding:12px 16px; text-align:center; font-size:16px; font-weight:700; letter-spacing:.03em; color:var(--ink-900); background:var(--surface); } /* --- Section 4: explore features -------------------------------------------- */ .zpp-features__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:40px; align-items:start; } .zpp-features__list { display:flex; flex-direction:column; gap:12px; } /* Each row is a real