/* * pm-button — the Poortman button (WO-09, corrected by WO-74 on frame * 21:137 — docs/design/frames/09-buttons.json; label case and weight * corrected by WO-81 to the page frames' uppercase Regular, same extract's * contradictions[-1]). * * Compiled to assets/css/components/button.css by src/build-tokens.mjs, * which substitutes the breakpoint markers (a comment holding `@bp `) * with the pixel value from tokens/tokens.json. Custom properties cannot * resolve inside @media conditions and a bare integer is invalid CSS, so the * build appends the unit. Never type a breakpoint width here. * * Every colour is a --pm-color-* token; radius and motion are tokens too. * No hex value and no literal breakpoint width may appear in this file. */ .pm-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 100%; /* WO-09 AC 5 — 48px is the reference height; the 49/50/56 instances in the Figma are inconsistencies (MISTAKES.md §C5), not sizes. min-height, never a fixed height, so a long Dutch label wraps instead of clipping. */ min-height: 48px; /* WO-74 AC 5 — the frame measures padding 16px 32px (09-buttons.json#measured.padding). Space tokens only. */ padding: var(--pm-space-4) var(--pm-space-8); /* The border box is shared by every variant so they keep one geometry; variants recolour it, never resize it. */ border: 1px solid transparent; /* WO-74 AC 5 — the frame measures radius 4, "slightly softened" (09-buttons.json#measured.radius); the token is the confirmed string. */ border-radius: var(--pm-radius-sm); font-family: var(--pm-font-family-base); /* WO-81 — the label is Roboto Regular 14px uppercase: the treatment every primary/secondary instance in the nine extracted page frames uses (09-buttons.json#contradictions[-1]); the design-system frame 21:137's SemiBold sentence-case label is superseded, its geometry stands. No font-size token exists, so the 14px is typed here like the header's 80px bar height. */ font-size: 0.875rem; font-weight: var(--pm-font-weight-400); text-transform: uppercase; /* WO-77 AC 2 — one 14px line at line-height 1: the frame's button is 16 + 16 padding + one 14px line + 2px border = 48 (09-buttons.json#measured.height_implied, 16-header.json#measured.right_cluster.cta.padding). Inheriting the body's 1.6 overshot every one-line button to 56. min-height above stays: a wrapped long label still grows (WO-09 AC 5). */ line-height: 1; text-align: center; text-decoration: none; cursor: pointer; /* WO-09 AC 4 / WO-74 — hover changes colour only: no movement, no shadow. The frame confirms colour-only and records no duration. */ transition-property: color, background-color, border-color; transition-duration: var(--pm-motion-duration-fast); transition-timing-function: var(--pm-motion-ease-standard); } /* * Variants (WO-74 AC 2–4, 09-buttons.json#measured). Primary: Volcanic Ink * fill, White text. Secondary: Volcanic Ink outline on transparent, Volcanic * Ink text. Tertiary: no box — Volcanic Ink text with a 1px Volcanic Ink * bottom border, padding 16px 0. Not Terra Sienna anywhere. */ .pm-button--primary { background-color: var(--pm-color-ink); border-color: var(--pm-color-ink); color: var(--pm-color-on-accent); } .pm-button--secondary { background-color: transparent; border-color: var(--pm-color-ink); color: var(--pm-color-ink); } .pm-button--tertiary { background-color: transparent; border-color: transparent; /* WO-74 AC 4 — the tertiary's only box is a 1px bottom border. */ border-bottom-color: var(--pm-color-ink); color: var(--pm-color-ink); /* WO-74 AC 4 — the frame's tertiary padding, 16px 0: no side padding on a borderless text button. Overrides the shared geometry above. */ padding: var(--pm-space-4) 0; /* WO-81 AC 1 — the section "View more" links are SemiBold sentence case (29-gallery-rows.json, 30-products.json): the tertiary opts out of the shared uppercase Regular. The hero's family tabs are tertiaries too but draw Regular uppercase — hero.css re-states it at a higher specificity. */ text-transform: none; font-weight: var(--pm-font-weight-600); } /* * WO-27 — the on-dark context modifier, designed for the hero's family * links: a tertiary button sitting on the hero's ink overlay takes White * text and a 1px White bottom border (27-hero.json#measured.family_links), * the light variant's ink swapped for the White role (--pm-color-on-accent). * Recolour only, like every variant — geometry is untouched. Hover stays * the system's Ochre (WO-74's uniform hover); this modifier adds no hover * of its own. */ .pm-button--on-dark { color: var(--pm-color-on-accent); border-bottom-color: var(--pm-color-on-accent); } /* * WO-26 — the on-dark compounds for the CTA band's buttons * (26-cta-band.json#measured.buttons). The primary inverts: White fill, * White border, Volcanic Ink text — the same inversion as the hero CTA. * The secondary on-dark takes a White border and White text on transparent. * Recolour only, like every variant — geometry is untouched. These compound * rules are declared BEFORE the :hover rules below on purpose: at equal * specificity (0,2,0) source order decides, and the hover must win. */ .pm-button--primary.pm-button--on-dark { background-color: var(--pm-color-on-accent); border-color: var(--pm-color-on-accent); color: var(--pm-color-ink); } .pm-button--secondary.pm-button--on-dark { border-color: var(--pm-color-on-accent); color: var(--pm-color-on-accent); } /* * WO-74 AC 2–4 — hover is designed by the frame: every variant turns Ochre * (--pm-color-accent-hover, 09-buttons.json#measured.*.hover), the button * system's own accent. Colour-only over --pm-motion-duration-fast. */ .pm-button--primary:hover { background-color: var(--pm-color-accent-hover); border-color: var(--pm-color-accent-hover); color: var(--pm-color-on-accent); } .pm-button--secondary:hover { background-color: transparent; border-color: var(--pm-color-accent-hover); color: var(--pm-color-accent-hover); } .pm-button--tertiary:hover { color: var(--pm-color-accent-hover); border-bottom-color: var(--pm-color-accent-hover); } /* * WO-38 — the frame's FIFTH button treatment * (38-contact.json#measured.right_panel.buttons.call_me_back): Powder Blush * fill (--pm-color-surface-alt), Volcanic Ink text, the shared geometry * untouched. Its first consumer is the contact form's "Call me back" submit * (ticket 43's control, rendered here until WO-42 wires it). The frame * records no hover for it; the system's uniform Ochre hover (WO-74 AC 2–4) * applies, like every variant. */ .pm-button--soft { background-color: var(--pm-color-surface-alt); border-color: var(--pm-color-surface-alt); color: var(--pm-color-ink); } .pm-button--soft:hover { background-color: var(--pm-color-accent-hover); border-color: var(--pm-color-accent-hover); color: var(--pm-color-on-accent); } /* * WO-09 AC 4 — the focus ring is the ClickUp card's own assumption, not a * Figma measurement: 2px Terra Sienna outline with a 2px offset. */ .pm-button:focus-visible { outline: 2px solid var(--pm-color-accent); outline-offset: 2px; } /* * WO-09 AC 4 — disabled is --pm-color-disabled and inert. The disabled ink * recolours text and border on a transparent fill, uniformly across the * three variants. For