Custom CSS reference

Your CSS is scoped to this one page. It cannot affect other pages or the rest of the app. We do not check the CSS you paste, so only use CSS you trust.

CSS variables

Every landing page block reads from a set of CSS custom properties. Override any of them in your custom CSS and that style propagates to every block of that kind on the page.

/* Bigger, tighter headings */
:root {
  --hp-lp-h1-weight: 800;
  --hp-lp-h1-color: #0f172a;
}

/* Sharp-corner buttons */
:root {
  --hp-lp-button-radius: 0;
}

/* Subtle inputs */
:root {
  --hp-lp-input-bg: #fafaf9;
  --hp-lp-input-border: rgba(0,0,0,0.06);
}

All variables

• --hp-lp-bg-color — page background
• --hp-lp-text-color — default text color
• --hp-lp-primary-color — primary brand color
• --hp-lp-h1-color / -weight — h1 styling
• --hp-lp-h2-color / -weight — h2 styling
• --hp-lp-h3-color / -weight — h3 styling
• --hp-lp-body-color / -line-height — body text
• --hp-lp-link-color — link color
• --hp-lp-button-bg / -text / -radius / -weight — buttons
• --hp-lp-input-bg / -border / -radius — form inputs
• --hp-lp-divider-color / -thickness — divider lines
• --hp-lp-image-radius — image and video corner radius

Block class names

Every block renders with stable class names you can target directly.

/* Underline every h1 */
.hp-lp-h1 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Soft shadow on every image */
.hp-lp-block-image img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

All block classes

• .hp-lp-block-header — any heading block
• .hp-lp-block-text — text blocks
• .hp-lp-block-button — button blocks
• .hp-lp-block-image — image blocks
• .hp-lp-block-divider — dividers
• .hp-lp-block-social — social icon rows
• .hp-lp-block-email-capture — email capture forms
• .hp-lp-block-video — video embeds
• .hp-lp-h1 / .hp-lp-h2 / .hp-lp-h3 — heading text by level
• .hp-lp-button — any button-like element
• .hp-lp-input — form inputs