Offer block CSS variables

Every color, radius, size and weight in a Hype Bundles offer block is a --hype-* custom property. Set any of them on the block, on its offer class, or on any ancestor — custom properties inherit through the shadow boundary.

body {  --hype-card-radius: 4px;  --hype-font-heading: 'Fraunces', Georgia, serif;}

Defaults below are the built-in look. A default written as a percentage is a color-mix() of the text or accent color toward the card background, so it stays legible on a dark card; browsers without color-mix() get fixed greys instead.

Do not set --hype-ac by hand. The tint steps --hype-ac-04, -05, -06, -07, -10, -12, -30, -35, --hype-ac-glow and --hype-ac-soft are computed in JavaScript from the accent, and a manual --hype-ac leaves them stale.

Paper and ink

Variable	Default	Controls
`--hype-card-bg`	`transparent`	Card background. Neutrals and tints mix toward it, so on the default transparent card they are translucent ink
`--hype-text`	`#161616`	Primary text
`--hype-heading`	`var(--hype-text)`	Block title, tile totals, category names
`--hype-text-2`	text 90%	Secondary copy: row prices, notes, the "was" price beside a "now"
`--hype-muted`	text 80%	Labels, hints, sub-copy, the sum line's label
`--hype-faint`	text 66%	Struck-through prices, unavailable options
`--hype-card-border`	`transparent`	The card frame only
`--hype-border`	text 14%	Row hairlines, thumbnail frames, the base for tile borders
`--hype-tile-border`	`var(--hype-border)`	Option tiles, category and step frames
`--hype-border-strong`	text 24%	Selects, radios and checks at rest, secondary buttons
`--hype-surface-2`	text 5%	Neutral badges, secondary buttons, image placeholders
`--hype-surface-3`	text 9%	Disabled CTAs
`--hype-control-bg`	`var(--hype-card-bg)`	Tiles, selects, radios, checks, outline pills
`--hype-error`	`#b42318`	The CTA failure line
`--hype-divider`	`1px solid var(--hype-border)`	The rule between rows and above the sum line

Accent-driven

Variable	Default	Controls
`--hype-on-accent`	`#ffffff`	Text and icons drawn on a solid accent (checks, solid badges)
`--hype-tint`	accent 7% over card	Selected tile background
`--hype-tint-strong`	accent 14% over card	Tinted pills
`--hype-badge-bg`	accent 12% over card	Accent badges (Save $X, count pills)
`--hype-accent-text`	accent 72% toward text	The accent wherever it is used as text, kept readable on dark cards
`--hype-badge-color`	`var(--hype-accent-text)`	Text on accent badges
`--hype-savings`	`var(--hype-accent-text)`	"You save" copy, the selected tier's note
`--hype-focus`	`var(--hype-ac)`	Keyboard focus outlines
`--hype-selection`	accent 30% over card	Text selection highlight
`--hype-strip-bg`	`transparent`	Background of the sum line. Pair with `::part(strip)` padding and radius to make it a panel again

Buttons

Variable	Default	Controls
`--hype-cta-bg`	`var(--hype-ac)`	CTA background, solid pills, outline pill border and text
`--hype-cta-color`	`#ffffff`	CTA text
`--hype-cta-height`	`52px`	CTA height
`--hype-cta-radius`	`12px`	CTA and code-input radius
`--hype-cta-font-size`	`1em`	CTA text size
`--hype-cta-weight`	`600`	CTA font weight
`--hype-cta-transform`	`none`	CTA `text-transform`
`--hype-cta-tracking`	`0`	CTA letter-spacing
`--hype-cta-shadow`	`0 12px 24px -14px var(--hype-ac-glow)`	CTA shadow at rest; set `none` for flat buttons
`--hype-cta-shadow-hover`	`0 16px 30px -14px var(--hype-ac-glow)`	CTA shadow on hover
`--hype-cta-disabled-bg`	`var(--hype-surface-3)`	Locked CTAs
`--hype-cta-disabled-color`	`var(--hype-faint)`	Locked CTA text
`--hype-secondary-bg`	`var(--hype-surface-2)`	Quiet buttons (Back in the options modal)
`--hype-secondary-color`	`var(--hype-text)`	Quiet button text
`--hype-secondary-border`	`var(--hype-border-strong)`	Quiet button border
`--hype-pill-radius`	`999px`	Pills and step chips

Geometry

Variable	Default	Controls
`--hype-card-radius`	`18px`	Card corners (visible once the card has a background or border)
`--hype-card-padding`	`0px`	Card inner padding
`--hype-card-shadow`	`none`	Card drop shadow
`--hype-tile-radius`	`14px`	Option tiles, category and step frames, code rows
`--hype-control-radius`	`8px`	Selects, checkboxes, secondary buttons
`--hype-badge-radius`	`999px`	Badges
`--hype-thumb-radius`	`10px`	Product thumbnails and builder picture tiles
`--hype-thumb-fit`	`contain`	`object-fit` for thumbnails; use `cover` for edge-to-edge photography
`--hype-thumb-padding`	`3px`	Inset between a thumbnail's frame and its image
`--hype-thumb-bg`	`var(--hype-control-bg)`	Thumbnail frame background
`--hype-thumb-border`	`var(--hype-border)`	Thumbnail frame border
`--hype-row-thumb-size`	`48px`	Thumbnails in list rows (lineup, bought-together, add-ons)
`--hype-lineup-thumb-size`	`72px`	The showcase's "A + B + C" lineup thumbnails
`--hype-row-gap`	`12px`	Vertical padding of a list row
`--hype-block-max-width`	`100%`	Widest the block renders
`--hype-block-spacing`	`16px`	Space above and below the block, and between two stacked blocks

Type

Variable	Default	Controls
`--hype-font`	`inherit`	Font family inside the block
`--hype-font-heading`	`inherit`	Font family of the block title
`--hype-title-size`	`1.35em`	Block title size (the customizer writes px)
`--hype-title-weight`	`600`	Block title weight
`--hype-title-transform`	`none`	Block title `text-transform`
`--hype-title-tracking`	`-0.015em`	Block title letter-spacing
`--hype-eyebrow-size`	`var(--hype-label-size)`	Eyebrow size
`--hype-eyebrow-weight`	`600`	Eyebrow weight
`--hype-eyebrow-transform`	`uppercase`	Eyebrow `text-transform`
`--hype-eyebrow-tracking`	`0.08em`	Eyebrow letter-spacing
`--hype-eyebrow-color`	`var(--hype-muted)`	Eyebrow and section labels
`--hype-body-size`	`1em`	Base text size. `1em` inherits the theme
`--hype-small-size`	`var(--hype-body-size)`	Kept for compatibility; subdued text is body-sized
`--hype-strong-size`	`1.125em`	Every "now" amount
`--hype-label-size`	`0.75em`	Micro-caps labels, eyebrows, badges
`--hype-label-tracking`	`0.06em`	Micro-caps letter-spacing
`--hype-price-weight`	`600`	Weight of every "now" price
`--hype-total-size`	`1.35em`	The sum line's total
`--hype-numerals`	`"tnum" 1, "lnum" 1`	OpenType features applied to every amount (tabular, lining)

Modals

The options modal and the discount-code modal read all of the variables above — the same card colors, radii and CTA tokens — plus these:

Variable	Default	Controls
`--hype-modal-width`	`360px`; the options modal `560px`	Panel width on desktop
`--hype-modal-bg`	`var(--hype-card-bg, #ffffff)`	Panel background (white when the card is transparent)
`--hype-modal-radius`	`var(--hype-card-radius)`	Panel corners, and the top corners of the phone sheet
`--hype-modal-padding`	`22px`	Panel padding
`--hype-modal-shadow`	`0 24px 60px -12px rgba(0, 0, 0, 0.45)`	Panel shadow
`--hype-backdrop`	`rgba(24, 23, 22, 0.55)`	Backdrop color

Modals are appended to the document rather than nested in the block, so set modal variables on body or on the modal element itself — setting them on the block that opens the modal has no effect.