# 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.

```css
[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.

```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:

| Variable | For |
| --- | --- |
| `--siteBackgroundColor` | section background |
| `--headingExtraLargeColor`, `--headingLargeColor`, `--headingMediumColor`, `--headingSmallColor` | headings |
| `--paragraphMediumColor`, `--paragraphLinkColor` | text, links, accents |
| `--primaryButtonBackgroundColor` | primary button fill |

**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)`.