Styling

Scope every selector

Warning global-css: a selector starts with html, body, :root, * or an element name without the mount. The CSS loads on the whole page, so it would restyle the site.

[data-seamble-id="__ID__"] h3 { margin: 0; }
[data-seamble-id="__ID__"].sb-tabs { display: flex; }   /* a class your JS put on the mount */
[data-seamble-id="__ID__"], [data-seamble-id="__ID__"] * { box-sizing: border-box; }

Prefix your classes sb-. Never style Squarespace's classes; adding one to your own element to borrow its style (see Buttons) is fine. Elements outside the mount that you take over: mark them in JS (section.dataset.sbPanelOf = ID) and style only the marked ones. For a page-wide effect only where the component is: body:has([data-seamble-id="__ID__"]) { … }.

Tokens

Restylable values are --sb-* variables with the default in the fallback, chained to the Squarespace variable, ending in a hard default (some pages lack the variables). No defaults block on the mount: it would beat the site's Custom CSS.

[data-seamble-id="__ID__"] .sb-tab.is-active {
  background: var(--sb-accent, var(--primaryButtonBackgroundColor, #111));
  color: var(--sb-on-accent, var(--siteBackgroundColor, #fff));
}

Type

Text in the mount inherits the body font; form controls need font: inherit; color: inherit;. Size in em.

• h2–h4 get the site's heading styles. Resize by re-pointing the multiplier: [data-seamble-id="__ID__"] h2 { --heading-2-size-value: var(--heading-4-size-value); }. Body: --normal-text-size-value, --large-text-size-value, --small-text-size-value.
• Heading look on other elements: --heading-font-font-family, and -font-weight, -font-style, -letter-spacing, -line-height, -text-transform. Body: --body-font-*.

Color

Squarespace redefines these per section theme, so they match any section:

A fixed color fails on some section: dark text vanishes on a dark theme. Borders, dividers and icons: currentColor. Tints: color-mix(in srgb, currentColor 15%, transparent).

Buttons

sqs-button-element--primary (or --secondary, --tertiary) on your <button> or <a> gives the site's button colors, padding, hover and font, as long as it's inside #siteWrapper. Outside it (a node appended to body) the font goes missing.

Layout

• Don't pad or margin the mount; the block and section already do.
• Reserve height (min-height, aspect-ratio) so the page doesn't jump when JS fills the mount.
• Variables: --sqs-site-gutter, --header-height, --sqs-site-max-width.

Responsive

• Mobile starts at max-width: 767px (Squarespace's type sizes switch only in portrait).
• Fluid Engine keeps a separate mobile layout: the Code Block may sit and size differently.
• The block can be any width: give the mount container-type: inline-size and use @container.
• No fixed pixel widths and no 100vw (horizontal scrollbar).

Gotchas

• hidden loses to any display rule, and .page-section is display: flex. Pair it with [data-seamble-id="__ID__"] [hidden], [data-sb-panel-of="__ID__"][hidden] { display: none !important; }.
• A Squarespace rule wins on a heading or link in the mount: out-specify it within your scope; !important last.
• Animate only inside @media (prefers-reduced-motion: no-preference).