/* ========================================================================= SKP DESIGN SYSTEM — SHELL AND SHARED PRIMITIVES v1 (2026-08-25) Loaded by skp-components.php at priority 30. Depends on: skp-theme-tokens (5) -> skp-design-system (20) -> skp-product-tiers (25) WHY THIS FILE EXISTS docs/design-system/02-COMPONENTS.md opens with a "Shared anatomy" contract: every section is .skp-section > .skp-inner, carrying .skp-eyebrow, .skp-section-title and .skp-section-lede. A consistency audit on 2026-08-25 found that THREE OF THOSE FOUR PARTS WERE DECLARED NOWHERE: .skp-section declared only inside `.skp-mbm .skp-section` — one page .skp-eyebrow ZERO declarations in any stylesheet .skp-section-title ZERO declarations .skp-section-lede ZERO declarations .skp-inner the only one that existed (skp-design-system.css) So every component's markup reasoned from a shell that did not exist: eyebrows rendered at body size, ledes ran unmeasured to the container edge, and full-bleed sections were not full-bleed. Fifteen components then each worked around it privately, which produced five card implementations, seven grid mechanisms and seven different section-rhythm escalations. This file is the hoist. Components are reduced to what these do not cover. LOADING AFTER BOTH LEGACY SHEETS IS DELIBERATE. skp-design-system.css sets `.skp-product-page .skp-section { padding-block: clamp(48px,6vw,88px) }` at (0,2,0), and skp-product-tiers.css owns the legacy accent bar. Source order is what resolves those ties without an !important arms race. ========================================================================= */ /* ========================================================================= REGION 1 — SHELL Must come first: everything below assumes the cap and the full bleed exist. ========================================================================= */ .skp-section { position: relative; width: 100vw; max-width: 100vw; /* full-bleed out of any capped ancestor without depending on the page wrapper having already broken out. margin-inline is safe here because the element is a block in normal flow. */ margin-inline: calc(50% - 50vw); padding-inline: 0; padding-block: var(--skp-section-rhythm); box-sizing: border-box; } /* (0,2,0) beats skp-design-system.css's `.skp-product-page .skp-section` at the same specificity on source order, which is why this file loads at 30. This single rule replaces the seven different escalation shapes the components had each invented. */ .skp-product-page .skp-section, .skp-resource-page .skp-section { padding-block: var(--skp-section-rhythm); } /* A hero and a tight band are not a standard section. */ .skp-section.skp-hero { padding-block: var(--skp-hero-rhythm); } /* Astra's transparent header is position:absolute and ~204px tall, so it sits OVER the hero rather than above it. Without extra top padding the eyebrow and the first line of the H1 render underneath the nav. Measured 2026-08-26: header 204px, hero padding-top 115px, eyebrow top 172px — obscured. */ body.ast-theme-transparent-header .skp-section.skp-hero { padding-top: calc(var(--skp-hero-rhythm) + 210px); } @media (max-width: 900px) { body.ast-theme-transparent-header .skp-section.skp-hero { padding-top: calc(var(--skp-hero-rhythm) + 120px); } } .skp-section.skp-stats, .skp-section.skp-lineage { padding-block: var(--skp-band-rhythm); } /* The one cap, on every section, without exception. skp-design-system.css already declares this with !important at higher specificity; this is the fallback for sections outside .skp-product-page. */ .skp-section > .skp-inner { width: 100%; max-width: var(--skp-inner-cap); margin-inline: auto; box-sizing: border-box; } /* The mobile gutter. skp-design-system.css sets `width: 100% !important` on .skp-inner at (0,3,1), so a plain rule here loses and the gutter collapses to ~11px a side — measured 367px at a 390 viewport where the contract in 01-FOUNDATIONS §6.1 says ~354px. Matching the !important is the only way to win without reordering the sheets. */ @media (max-width: 900px) { body .skp-section > .skp-inner, body .skp-product-page .skp-section > .skp-inner { width: calc(100% - 36px) !important; max-width: calc(100% - 36px) !important; margin-inline: auto !important; } } /* ========================================================================= REGION 2 — SHARED ANATOMY The three parts 02-COMPONENTS defines and no sheet implemented. ========================================================================= */ /* The element selector is not decoration. skp-design-system.css:110 ships `.skp-product-page p, .skp-resource-page p { font-size: var(--skp-body) }` at (0,2,0); a bare `.skp-eyebrow` is (0,1,0) and LOSES, so every eyebrow rendered at body size. `p.skp-eyebrow` reaches (0,1,1) and, loading at priority 30 against 20, wins the tie on source order. */ p.skp-eyebrow, .skp-eyebrow { display: block; margin: 0 0 var(--skp-space-md); font: 700 var(--skp-label-small)/1.2 var(--skp-font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--skp-accent); } /* On a hub the accent is #FFCD57, which is 1.36:1 on surface-container — an eyebrow is small text and must clear 4.5:1, so on LIGHT surfaces the hub eyebrow takes the container ink instead of the raw accent. */ body.skp-tier-material :is(.skp-surface, .skp-surface-container, .skp-surface-high) .skp-eyebrow { color: var(--skp-on-tertiary-container); } .skp-section-title { position: relative; margin: 0 0 var(--skp-space-md); padding-inline-start: calc(var(--skp-accent-bar) + var(--skp-space-md)); font: 600 var(--skp-headline-medium)/1.10 var(--skp-font); letter-spacing: -0.015em; color: inherit; max-width: 32ch; } /* The mandatory left accent bar. Previously existed only in skp-product-tiers.css, hardcoded twice at 4px and 3px. */ .skp-section-title::before { content: ""; position: absolute; inset-block: 0.12em 0.12em; inset-inline-start: 0; width: var(--skp-accent-bar); border-radius: var(--skp-shape-extra-small); background: var(--skp-accent); } /* A centred section (CTA) has no bar and no indent. */ .skp-section--centred .skp-section-title { padding-inline-start: 0; max-width: none; } .skp-section--centred .skp-section-title::before { content: none; } /* The legacy accent bar in skp-product-tiers.css:102 and :241 is `.skp-tier-material .skp-section:not(.skp-hero) > .skp-inner > h2` — (0,4,2), which outranks everything above and hardcodes 16px/4px against --skp-signal. Until those two blocks are deleted, this neutralises them at (0,5,2) so the token-driven bar is the one that renders. Delete this block the day skp-product-tiers.css loses its heading rules. */ :is(.skp-tier-material, .skp-tier-application) .skp-section:not(.skp-hero) > .skp-inner > h2.skp-section-title { padding-left: calc(var(--skp-accent-bar) + var(--skp-space-md)); border-left: 0; } /* Same specificity problem as the eyebrow — see above. */ p.skp-section-lede, .skp-section-lede { margin: 0 0 var(--skp-space-xl); /* shares the title's left edge, bar included — never indented past it */ padding-inline-start: calc(var(--skp-accent-bar) + var(--skp-space-md)); font: 400 var(--skp-body-large)/1.6 var(--skp-font); max-width: var(--skp-measure-lede); color: var(--skp-on-surface-variant); } .skp-section--centred .skp-section-lede { padding-inline-start: 0; margin-inline: auto; } /* ---- head → body rhythm -------------------------------------------------- The gap between a section's head block and its body resolved to SEVEN different values across the fifteen components, because nothing owned it. It is one value. Put .skp-section__body on the body wrapper. */ .skp-section__body { margin-block-start: var(--skp-space-2xl); } /* ========================================================================= REGION 3 — PRIMITIVES .skp-lift and .skp-cue precede .skp-panel so a panel-scoped override wins. ========================================================================= */ /* ---- inline prose link --------------------------------------------------- :where() keeps specificity at (0,1,0) so a component can override without an arms race. The !important on text-decoration is not stylistic: Astra's `a:not(...)` rules outrank any component selector (07 §3.3), which is how card copy shipped underlined. */ .skp-prose a:not(.skp-btn):not(.skp-panel__link), :where(.skp-section-lede, .skp-definition__body, .skp-faq__answer, .skp-proof__caption) a:not(.skp-btn) { color: var(--skp-link-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .skp-prose a:focus-visible, :where(.skp-section-lede, .skp-definition__body, .skp-faq__answer, .skp-proof__caption) a:focus-visible { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); } /* ---- grid ---------------------------------------------------------------- ONE pinned-column grid, replacing five separate auto-fit mechanisms. auto-fit orphans the last tile whenever the count is not divisible by the computed column count — 5 cards render 4+1. Columns are PINNED. */ /* The descendant form is required, not stylistic: Astra styles `.entry-content ul` at (0,2,0), so a bare `.skp-grid` at (0,1,0) keeps the theme's bullets and indent. Three components had each written their own private escalation for this. It is decided once, here. */ .skp-grid, .skp-section .skp-grid, .skp-section .skp-duo__list { display: grid; gap: var(--skp-grid-gap); margin: 0; padding: 0; list-style: none; } .skp-section .skp-duo__list { display: block; } /* a list, not a grid */ .skp-grid > * { min-width: 0; } /* or a long word forces overflow */ @media (min-width: 901px) { .skp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .skp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .skp-grid--2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 901px) { .skp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1400px) { .skp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 5 items must land 3+2, never 4+1. */ @media (min-width: 1100px) { .skp-grid--5up > :nth-child(4), .skp-grid--5up > :nth-child(5) { grid-column: span 1; } .skp-grid--5up { grid-template-columns: repeat(6, minmax(0, 1fr)); } .skp-grid--5up > :nth-child(-n+3) { grid-column: span 2; } .skp-grid--5up > :nth-child(n+4) { grid-column: span 3; } } /* ---- lift ---------------------------------------------------------------- Motion and its reduced-motion guard in ONE place. Elevation means "you can click this" — .skp-lift is applied only to interactive surfaces. */ .skp-lift { box-shadow: var(--skp-elevation-card); transition: transform var(--skp-motion-standard), box-shadow var(--skp-motion-standard); } .skp-lift:hover { transform: translateY(-3px); box-shadow: var(--skp-elevation-card-hover); } .skp-lift:active { transform: translateY(0); } /* ---- cue ----------------------------------------------------------------- The arrow affordance, one implementation, replacing four. */ .skp-cue::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-start: 0.5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-0.1em); transition: transform var(--skp-motion-fast); } .skp-cue:hover::after { transform: rotate(45deg) translate(0.12em, -0.12em); } /* ---- panel --------------------------------------------------------------- THE card, replacing five near-identical implementations. NOT named .skp-card: skp-design-system.css:149 forces `border-radius: var(--skp-radius-card) !important` on that name. */ .skp-panel { position: relative; display: flex; flex-direction: column; gap: var(--skp-space-sm); padding: var(--skp-card-pad); border-top: var(--skp-accent-bar) solid var(--skp-accent); border-radius: var(--skp-shape-card); background: var(--skp-surface); color: var(--skp-on-surface); box-sizing: border-box; } /* A panel on an already-white section flips to the container tint, so a card is always distinguishable from the surface behind it. Both components that hardcoded their card surface got this wrong on one of the two tiers. */ .skp-surface .skp-panel { background: var(--skp-surface-container); } :is(.skp-inverse, .skp-secondary) .skp-panel { background: rgba(255, 255, 255, 0.06); color: var(--skp-inverse-on-surface); } .skp-panel > :last-child { margin-bottom: 0; } /* Card heading and body type, owned once. Five components had byte-identical copies of this, and a sixth relied on the `.skp-title-large` utility at (0,1,0) — which loses to the theme's own heading rules, so its cards rendered at the wrong leading. (0,1,1) here wins and covers all six. */ .skp-panel > h3, .skp-panel > h4 { margin: 0; font: 600 var(--skp-title-large)/1.25 var(--skp-font); letter-spacing: -0.01em; color: inherit; } .skp-panel > p { margin: 0; font: 400 var(--skp-body-medium)/1.68 var(--skp-font); color: var(--skp-on-surface-variant); } /* Card media. A fixed ratio is not cosmetic: card images arrive at whatever dimensions they were shot at — the blog cards mix 1024x1024 squares with a 1152x1536 portrait — and 02 §12 requires every tile in a row to share one ratio. object-fit does the normalising so no image needs re-cropping. */ .skp-panel__media { margin: calc(var(--skp-card-pad) * -1) calc(var(--skp-card-pad) * -1) var(--skp-space-md); border-radius: var(--skp-shape-card) var(--skp-shape-card) 0 0; overflow: hidden; } .skp-panel__media img { display: block; width: 100%; height: auto; /* 3/2 on a 660px card renders a 441px image that owns the card and pushes the copy below the fold. A card image is a BAND that supports the claim, not the subject. 16/9 plus a hard cap keeps it subordinate at every card width. */ aspect-ratio: 16 / 9; max-height: clamp(170px, 19vw, 260px); object-fit: cover; } /* ---- figures -------------------------------------------------------------- NEVER UPSCALE. An image rendered above its intrinsic size is blurry, and the failure mode is not subtle: a 74x13 decorative rule inherited `width: 100%` and rendered at 1354x846 — an 18x upscale that added 800px of blur to the page. A 300x200 logo rendered at 772x515 the same way. The fix is to stop treating "image" as one thing. A PHOTOGRAPH fills its frame and crops; a MARK sits at its own size and never crops; a DECORATIVE rule renders exactly as drawn. */ .skp-figure { margin: 0; } .skp-figure__link { display: block; text-decoration: none !important; border-radius: var(--skp-shape-media); overflow: hidden; } .skp-figure__link:focus-visible { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); } /* default: behave, do not stretch */ .skp-figure img { display: block; max-width: 100%; height: auto; } /* a photograph fills its tile and crops to a shared ratio (02 §12) */ .skp-figure--photo img, .skp-figure__link img { width: 100%; aspect-ratio: 16 / 9; max-height: clamp(180px, 20vw, 300px); object-fit: cover; border-radius: var(--skp-shape-media); } /* a decorative rule renders exactly as drawn — 74x13 stays 74x13 */ /* Specificity is deliberate. A component's own media rule — e.g. `.skp-definition .skp-definition__media img` at (0,2,1) — correctly forces width:100% and a crop ratio for a PHOTOGRAPH, and would destroy a decorative rule. This must outrank any component media rule, so it reaches (0,3,1) and is scoped by the marker class rather than by the component. */ .skp-figure--rule img, .skp-section .skp-figure--rule img, .skp-definition .skp-definition__media.skp-figure--rule img, .skp-section .skp-figure--logo img { width: auto; max-width: 100%; height: auto; aspect-ratio: auto; max-height: none; object-fit: none; opacity: 0.9; } .skp-figure--rule { display: flex; justify-content: flex-start; margin-block: var(--skp-space-lg); } /* a mark sits at its own scale, never cropped, never enlarged */ .skp-figure--logo { display: flex; align-items: center; justify-content: center; min-height: 96px; } .skp-figure--logo img, .skp-section .skp-figure--logo img { width: auto !important; max-height: 56px; max-width: min(100%, 220px); aspect-ratio: auto; object-fit: contain; border-radius: 0; } /* The WHOLE panel is the hit area when it links. The stretched ::after is what makes that true; the text-decoration reset must carry !important because Astra's link rules outrank component selectors. */ .skp-panel__link { text-decoration: none !important; color: inherit; } .skp-panel__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .skp-panel :is(h2, h3, h4, span) { text-decoration: none !important; } /* An inline link inside card prose competes with the card's own affordance when it is full-strength blue and underlined mid-sentence. It stays a link — it inherits the ink and carries a faint rule that resolves on hover. Deference: the copy reads first, the link is available second. */ .skp-panel p a:not(.skp-btn):not(.skp-panel__link) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--skp-motion-fast), color var(--skp-motion-fast); } .skp-panel p a:not(.skp-btn):not(.skp-panel__link):hover { color: var(--skp-link-ink); text-decoration-color: currentColor; } /* Elevation and hover are granted ONLY to a panel that actually links. A static card carries no shadow and no hover — elevation is a claim that the thing responds. */ .skp-panel:has(.skp-panel__link) { box-shadow: var(--skp-elevation-card); transition: transform var(--skp-motion-standard), box-shadow var(--skp-motion-standard); } .skp-panel:has(.skp-panel__link):hover { transform: translateY(-3px); box-shadow: var(--skp-elevation-card-hover); } .skp-panel:has(.skp-panel__link:focus-visible) { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); } .skp-panel__link:focus-visible { outline: none; } /* the panel carries the ring */ /* ---- duo ----------------------------------------------------------------- The two-column list panel that Guidance and Comparison share ~85% of. Guidance qualifies a buyer in or out; Comparison sets this product against the alternative. Same shape, different job. */ /* NOTE the paired on-colour. The first revision of this rule set `background` with no `color` — the exact defect the whole role system exists to prevent, and the one that shipped white text on a white live CTA. A background without its pair is a defect no matter who writes it. */ .skp-duo { display: grid; gap: var(--skp-grid-gap); padding: var(--skp-card-pad); border-radius: var(--skp-shape-card); background: var(--skp-surface-container); color: var(--skp-on-surface); } /* On an already-tinted section the panel steps up one rung, so it stays distinguishable from the surface behind it. */ .skp-surface-container .skp-duo, .skp-surface-high .skp-duo { background: var(--skp-surface-container-high); color: var(--skp-on-surface); } :is(.skp-inverse, .skp-secondary) .skp-duo { background: rgba(255, 255, 255, 0.06); color: var(--skp-inverse-on-surface); } @media (min-width: 901px) { .skp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the divider IS the separation — no boxes around the columns */ .skp-duo > :last-child { padding-inline-start: var(--skp-card-pad); border-inline-start: var(--skp-hairline); } } .skp-duo__heading { margin: 0 0 var(--skp-space-md); font: 600 var(--skp-title-large)/1.25 var(--skp-font); } .skp-duo__list { margin: 0; padding: 0; list-style: none; } .skp-duo__list li { position: relative; padding-inline-start: 1.75em; margin-bottom: var(--skp-space-md); font: 400 var(--skp-body-medium)/1.68 var(--skp-font); color: var(--skp-on-surface-variant); } /* Check and cross, in accent and muted — never green and red. Colour is catalogue navigation here, not a value judgement. */ .skp-duo__list--yes li::before, .skp-duo__list--no li::before { position: absolute; inset-inline-start: 0; font-weight: 700; } .skp-duo__list--yes li::before { content: "\2713"; color: var(--skp-primary); } .skp-duo__list--no li::before { content: "\2715"; color: var(--skp-on-surface-variant); } /* ---- hairline ------------------------------------------------------------ */ .skp-hairline-top { border-top: var(--skp-hairline); } .skp-hairline-bottom { border-bottom: var(--skp-hairline); } /* ---- perforation motif --------------------------------------------------- 00-PRINCIPLES §4.4: a dot matrix at roughly the pitch of PVC mesh, on dark bands only, sparingly. The product explaining itself at zero cost to the reader's attention. The mask is the whole trick. An unmasked field of dots is wallpaper and would sit behind the copy, which the principle forbids. Fading it in diagonally from the right means it reads as material catching light at the edge of the frame, and the text column never touches it. */ :is(.skp-inverse, .skp-secondary).skp-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.11) 1px, transparent 0); background-size: 13px 13px; -webkit-mask-image: linear-gradient(102deg, transparent 46%, #000 88%); mask-image: linear-gradient(102deg, transparent 46%, #000 88%); } /* the hero already layers a photograph and a scrim; the motif rides above both but still under the copy */ .skp-hero.skp-inverse::after { z-index: 0; } .skp-hero .skp-inner { position: relative; z-index: 1; } @media (max-width: 900px) { /* at one column the copy spans the full width, so there is nowhere for the motif to sit without falling behind text */ :is(.skp-inverse, .skp-secondary).skp-section::after { content: none; } } /* ---- split: copy beside media ------------------------------------------- 04 §8: media takes the larger share, copy is always the LEFT column, and at <=900px the media moves after the copy. */ .skp-split { display: grid; gap: var(--skp-grid-gap); align-items: center; } @media (min-width: 901px) { .skp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } .skp-split__copy > :last-child { margin-bottom: 0; } .skp-split__media { margin: 0; } /* a map is a GRAPHIC, not a brand mark — it carries information and needs to be read. Classifying it as a logo rendered it at 94x56 in a field of whitespace. */ .skp-figure--map img, .skp-section .skp-figure--map img { display: block; width: 100%; max-width: 620px; height: auto; aspect-ratio: auto; max-height: none; object-fit: contain; margin-inline: auto; } /* A marketplace route, not a credit. 03 §0.3: the Alibaba store is a real buying channel for this business, so the mark is sized to be recognised and clicked. It was first shipped at 34px, which reads as a footnote. It is a target, so it also carries the 48px floor. */ .skp-proof__actions { display: flex; align-items: center; gap: var(--skp-space-xl); flex-wrap: wrap; margin-top: var(--skp-space-xl); } .skp-proof__mark { display: inline-flex; align-items: center; gap: var(--skp-space-sm); min-height: var(--skp-target-min); padding: var(--skp-space-sm) var(--skp-space-md); border: var(--skp-hairline); border-radius: var(--skp-shape-button); background: var(--skp-surface); text-decoration: none !important; transition: border-color var(--skp-motion-fast), box-shadow var(--skp-motion-fast), transform var(--skp-motion-fast); } .skp-proof__mark img { width: auto; height: auto; max-height: 30px; max-width: 132px; aspect-ratio: auto; object-fit: contain; } .skp-proof__mark::after { /* Labelled, not a bare badge. Deliberately does NOT claim Trade Assurance or escrow terms — those are Tier-B claims about a third party and unconfirmed for this store. The platform's presence carries the trust signal on its own. */ content: "Order via our Alibaba store"; font: 600 var(--skp-label-medium)/1.3 var(--skp-font); color: var(--skp-on-surface); white-space: nowrap; } .skp-proof__mark:hover { border-color: var(--skp-primary); box-shadow: var(--skp-elevation-1); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .skp-proof__mark { transition: none; } .skp-proof__mark:hover { transform: none; } } .skp-proof__mark:focus-visible { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); } /* ---- capability evidence strip ------------------------------------------ 03 §0.0.4: "we do the job well" needs execution evidence, not adjectives. These four claims — vertically integrated, global reach, R&D, customisation — sat as 627px of text with nothing to show. The strip puts the lamination line and the finished stock directly under the claim they evidence. */ .skp-capability__evidence { margin-top: var(--skp-space-2xl); } /* ---- actions ------------------------------------------------------------ 01 §2.4: an action needs more air above it than prose does, because it is a change of mode — the reader stops reading and decides. Flush against the block above, a button reads as that block's last row rather than as a choice. Measured live 2026-08-27: `Get a Quote` sat at 0px under a card grid, and the Definition CTA at -143px, overlapping the paragraph above it. */ .skp-hero__actions, .skp-selector__actions, .skp-proof__actions, .skp-actions { display: flex; align-items: center; gap: var(--skp-space-md); flex-wrap: wrap; margin-top: var(--skp-space-xl); /* body -> action */ } /* after a heavier block the separation grows, same reasoning as section rhythm */ :is(ul, ol, table, figure, .skp-grid, .skp-duo) + :is(.skp-selector__actions, .skp-proof__actions, .skp-actions) { margin-top: var(--skp-space-2xl); /* block -> action */ } /* a lone button in its own paragraph — the Definition CTA pattern */ .skp-section p > .skp-btn:only-child { margin-top: var(--skp-space-sm); } .skp-section p:has(> .skp-btn:only-child) { margin-top: var(--skp-space-xl); } @media (max-width: 900px) { .skp-hero__actions, .skp-selector__actions, .skp-proof__actions, .skp-actions { gap: var(--skp-space-stack); } /* 12px stacked · 04 §1.7 */ } /* ---- range · the directory sweep ---------------------------------------- 03 §7.0: the homepage is a directory and routing coverage is its metric. Deliberately LOW visual weight — this is a index, not a pitch. Rules between groups, no cards, no elevation: it should read as a contents page. */ .skp-range__groups { display: grid; gap: var(--skp-grid-gap); } @media (min-width: 901px) { .skp-range__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .skp-range__group { border-top: var(--skp-accent-bar) solid var(--skp-accent); padding-top: var(--skp-space-lg); } .skp-range__family { margin: 0 0 var(--skp-space-md); font: 600 var(--skp-title-large)/1.25 var(--skp-font); } .skp-range__family a { color: inherit; text-decoration: none !important; } .skp-range__family a:hover { color: var(--skp-link-ink); } .skp-range__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .skp-range__list li + li { border-top: var(--skp-hairline); } .skp-range__list a { display: flex; align-items: center; min-height: var(--skp-target-min); padding: var(--skp-space-sm) 0; font: 400 var(--skp-body-medium)/1.4 var(--skp-font); color: var(--skp-on-surface); text-decoration: none !important; transition: color var(--skp-motion-fast), padding-left var(--skp-motion-fast); } .skp-range__list a:hover { color: var(--skp-link-ink); padding-left: var(--skp-space-sm); } .skp-range__list a:focus-visible { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); } @media (prefers-reduced-motion: reduce) { .skp-range__list a { transition: none; } } /* ---- inline CTA ---------------------------------------------------------- 03-PAGE-COMPOSITION §2.0 permits ONE mid-page CTA, and only when it preserves a live conversion block. Three pages need it — 500gsm, rolls and oem all carry a conversion block before their FAQ. It is deliberately quieter than the closing band: a contained panel rather than a full-bleed band, no perforation motif, and it never carries the page's primary action. If this looks as loud as the closing CTA, it is wrong. */ .skp-cta--inline { padding-block: var(--skp-band-rhythm); } .skp-cta--inline > .skp-inner { padding: var(--skp-card-pad); border-radius: var(--skp-shape-card); border-left: var(--skp-accent-bar) solid var(--skp-accent); background: var(--skp-surface-container); color: var(--skp-on-surface); text-align: start; /* the closing band centres; this does not */ } .skp-cta--inline .skp-section-title, .skp-cta--inline h3 { margin: 0 0 var(--skp-space-sm); font: 600 var(--skp-title-large)/1.25 var(--skp-font); } .skp-cta--inline p { margin: 0 0 var(--skp-space-md); } /* ========================================================================= REGION 4 — REDUCED MOTION 04-INTERACTION §7 specifies a global fence. The token layer covers only its own classes, so the fence lives here where it can reach the primitives. The focus ring is not motion and is deliberately untouched. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .skp-lift, .skp-cue::after, .skp-panel:has(.skp-panel__link) { transition: none; } .skp-lift:hover, .skp-panel:has(.skp-panel__link):hover { transform: none; } .skp-cue:hover::after { transform: rotate(45deg) translateY(-0.1em); } } /* ===== BEGIN GENERATED COMPONENTS — build_component_library.mjs ===== */ /* Component blocks. Each is reduced against the primitives above: it contains ONLY what those do not already provide. Regenerate with node tools/build_component_library.mjs Editing between these markers by hand will be overwritten. */ /* ---- Hero -------------------------------------------------------------- */ /* ========================================================================= HERO Spec: 02-COMPONENTS §1 · 03-PAGE-COMPOSITION §1,§5 · 04-INTERACTION §1,§8, §9,§10 · 07-BUILD-STANDARDS §2.3,§3.2 · 11-CONTENT-SPEC §1 REDUCED AGAINST skp-components.css. What is NOT here any more: .skp-section full bleed, width, margin-inline, position:relative and padding-block: var(--skp-hero-rhythm) — the shell ships `.skp-section.skp-hero` itself, so the component declares no rhythm and no escalation for it. .skp-inner the cap and the mobile gutter. .skp-eyebrow label-small, 0.2em tracking, uppercase, bottom margin, and --skp-accent ink. .skp-section-lede body-large, --skp-measure-lede, the muted ink role (which .skp-inverse rebinds for the dark band) and the prose-link colour/underline/focus ring inside a lede. --skp-hairline the chip border and the material eyebrow border, both of which rebind to --skp-outline-inverse on the dark band. Deletes --skp-hero-chip-border and its override. .skp-btn / focus the token layer, in full. ink custom properties --skp-hero-ink and --skp-hero-ink-muted are gone: the surface utility supplies the H1's ink and the anatomy supplies the lede's, on BOTH surfaces. The base is the LIGHT, two-column use-case hero, because a resource page and a tool page both use Hero(application-plain) and carry no tier body class at all. Everything else is a delta. There is deliberately no `body.skp-tier-application .skp-hero` block: the base IS that tier. DEPLOY GATE — NOT AN OVERRIDE. skp-product-tiers.css lines 32-99 and 184-238 still ship `.skp-tier-* .skp-section.skp-hero` background / ::before / h1 / p / .skp-kicker / a.skp-btn-* rules at (0,3,0)-(0,3,1), several with !important. They are RETIRED by this component and DELETED in the same deploy. The v3 build fought them with four (0,3,2)! escalation selectors; those are removed here, because an escalation that duplicates a deletion gate is the arms race 07-BUILD-STANDARDS §3.2 forbids. The ONE escalation kept is the H1 font-size, and only because the rule it beats lives in skp-design-system.css, which is not being deleted. ========================================================================= */ /* --- Base (light, two-column, use-case density) -------------------------- */ .skp-hero { /* Component-local structural values no token covers. */ --skp-hero-min-height: auto; --skp-hero-title-size: var(--skp-headline-large); --skp-hero-title-lh: 1.08; --skp-hero-title-measure: 24ch; --skp-hero-rule-width: 52%; /* perforation motif — 00-PRINCIPLES §4.4, dark bands only. Motif geometry, not a radius, a type size or a width cap; no token covers a mesh pitch. */ --skp-hero-perf-pitch: 15px; /* the aperture pitch of 1000D mesh */ --skp-hero-perf-dot: 1.5px; /* the media's top edge lines up with the H1's FIRST line, not with the eyebrow above it — resolved by the :has() rule below */ --skp-hero-lead-offset: 0px; /* position:relative comes from .skp-section in the shell. isolation keeps the backdrop's negative z-index inside this section; overflow clips the full-bleed backdrop HERE, never on (04-INTERACTION §10). */ isolation: isolate; overflow: hidden; min-height: var(--skp-hero-min-height); } /* Top rule. Colour, ink and thickness all come from the alias layer: use-case --skp-accent = primary, --skp-accent-bar = 3px hub --skp-accent = tertiary, --skp-accent-bar = 4px .skp-inverse rebinds --skp-accent to --skp-inverse-primary on the section itself, which is what makes the material hero's rule yellow even on the /products/ directory where no tier body class exists. The fade is a MASK, not a colour stop — no transparent-black fringe, and no literal colour anywhere. */ .skp-hero::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; width: var(--skp-hero-rule-width); height: var(--skp-accent-bar); background: var(--skp-accent); color: var(--skp-on-accent); /* the mandatory paired on-colour, and the mask's currentColor */ -webkit-mask-image: linear-gradient(90deg, currentColor 0%, transparent 100%); mask-image: linear-gradient(90deg, currentColor 0%, transparent 100%); pointer-events: none; } /* Gradient wash, painted BEHIND the content but ABOVE the surface utility's flat background, so .skp-surface keeps ownership of the background/ink pair. */ .skp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(135deg, color-mix(in srgb, var(--skp-primary) 10%, transparent) 0%, color-mix(in srgb, var(--skp-secondary) 6%, transparent) 100%); pointer-events: none; } /* --- Parts --------------------------------------------------------------- */ /* Cap and gutter belong to the shell — only the split grid here. The column gap is --skp-space-2xl, not --skp-grid-gap: the alias is the CARD grid gap, and 01-FOUNDATIONS §5 names 44px as the space between major groups inside a section, which is what a hero split is. Not .skp-grid: that primitive is the pinned CARD grid, and the hero is a 1fr / 1.15fr editorial split. */ .skp-hero > .skp-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; /* 04-INTERACTION §8 */ column-gap: var(--skp-space-2xl); row-gap: var(--skp-space-xl); } .skp-hero__copy { order: 1; min-width: 0; } .skp-hero__media { order: 2; min-width: 0; margin: var(--skp-hero-lead-offset) 0 0; } .skp-hero .skp-hero__media > .skp-hero__img { display: block; width: 100%; max-width: 100%; /* 04-INTERACTION §10 overflow guard */ height: auto; aspect-ratio: 3 / 2; /* 04-INTERACTION §9 — hero is 3/2 */ object-fit: cover; border-radius: var(--skp-shape-media); box-shadow: var(--skp-elevation-media); /* the one sanctioned non-interactive elevation */ } .skp-hero .skp-hero__caption { margin: var(--skp-space-md) 0 0; font: 400 var(--skp-body-small)/1.5 var(--skp-font); color: var(--skp-on-surface-variant); } /* Baseline share: the eyebrow pill pushes the H1 down by its own line box, plus its block padding, plus its bottom margin. Push the media down by exactly the same amount so the H1's first line and the image's top edge meet within the 2px gate. Every term reads the token the pill and .skp-eyebrow actually use, so the offset self-corrects. The light pill has NO border, so there is no border term — the material variant's outlined pill has one, and that variant has no media column. Scoped to --application: it is the only variant with a media column. Browsers without :has() get 0 — the pre-system behaviour, not a break. */ .skp-hero--application > .skp-inner:has(.skp-eyebrow) { --skp-hero-lead-offset: calc( (var(--skp-label-small) * 1.2) /* eyebrow line box, from .skp-eyebrow */ + (var(--skp-space-sm) * 2) /* eyebrow padding-block, from the pill */ + var(--skp-space-md) /* eyebrow margin-bottom, .skp-eyebrow */ ); } /* Eyebrow: PILL CHROME ONLY. Type, tracking, uppercase and bottom margin all come from .skp-eyebrow. shape-chip, NOT shape-full — 01-FOUNDATIONS §3.1, a pill that is not clickable is a bug; 02-COMPONENTS §1 means the shape language of a small label, not the 999px action radius. Background and ink are set in the SAME rule, always (07-BUILD-STANDARDS §3.4). */ .skp-hero .skp-hero__eyebrow { display: inline-flex; align-items: center; padding-block: var(--skp-space-sm); /* 0.2em of .skp-eyebrow tracking hangs off the last letter; trim it back so the pill looks optically symmetrical */ padding-inline: var(--skp-space-md) calc(var(--skp-space-md) - 0.2em); border-radius: var(--skp-shape-chip); background: var(--skp-primary-container); color: var(--skp-on-primary-container); /* 7.05:1 measured */ } /* H1. No colour is declared: .skp-surface sets --skp-on-surface and .skp-inverse sets --skp-inverse-on-surface plus its `:is(h1,…)` descendant rule, so the ink is correct on both surfaces without a component property. The type ROLE is tier-resolved through --skp-hero-title-size rather than taken from a .skp-display-large / .skp-headline-large utility, because the role differs by TIER and no single class on the markup can express that. */ .skp-hero .skp-hero__title { margin: 0 0 0.5em; /* 01-FOUNDATIONS §2.4 heading -> body */ max-width: var(--skp-hero-title-measure); font-family: var(--skp-font); font-weight: 700; line-height: var(--skp-hero-title-lh); letter-spacing: -0.015em; text-wrap: balance; } /* THE ONE SURVIVING ESCALATION, and the arithmetic is counted, not guessed (07-BUILD-STANDARDS §3.2). skp-design-system.css:105 ships `body .skp-hero h1 { font-size: var(--skp-h1) !important }` at (0,1,2)!, and that sheet is the legacy h1/h2/h3 ramp owner — it is NOT being deleted. This selector is (0,3,2) — html + body + three classes — so the tokenised scale wins the important-vs-important contest on every tier. Revisit when skp-design-system.css drops its blanket h1 ramp. */ html body .skp-section.skp-hero .skp-hero__title { font-size: var(--skp-hero-title-size) !important; } /* Lede. .skp-section-lede supplies body-large, the 62ch measure, the muted ink role and the prose-link treatment. Two declarations are genuinely the hero's: the anatomy lede is indented to share a section TITLE's accent-bar edge, and the hero has no section title, so the indent would hang the lede 17px right of its own H1; and 11-CONTENT-SPEC §1 requires TWO lede paragraphs, which need a paragraph gap rather than the anatomy's section gap. */ .skp-hero .skp-hero__lede { padding-inline-start: 0; margin-block-end: var(--skp-space-md); } .skp-hero .skp-hero__lede:last-of-type { margin-block-end: 0; } /* Spec chips. Static, so shape-chip, --skp-hairline and no elevation — a shadow on something you cannot click is noise. Use-case heroes only; 02-COMPONENTS §1 gives the hub no chip row. Type is the .skp-label-medium utility on the
  • ; the one override is tracking — a chip carrying "3.2 m (126 in) roll width" is a compact data token, not a section kicker, so 0.02em not 0.08em. */ .skp-hero .skp-hero__chips { display: flex; flex-wrap: wrap; gap: var(--skp-space-sm); margin: var(--skp-space-lg) 0 0; padding: 0; list-style: none; } .skp-hero .skp-hero__chip { display: inline-flex; align-items: center; margin: 0; padding: var(--skp-space-sm) var(--skp-space-md); border: var(--skp-hairline); border-radius: var(--skp-shape-chip); letter-spacing: 0.02em; background: var(--skp-surface); color: var(--skp-on-surface); /* the paired ink, same rule, always */ } /* Actions. 1 primary + 1 secondary maximum — 04-INTERACTION §1.5. This rule is the WHOLE of the hero's button CSS. Geometry, palette, hover, active, disabled, focus ring and mobile full-width all live in skp-theme-tokens.css and resolve correctly from the section's surface utility. */ .skp-hero .skp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--skp-space-md); /* 14px, 04-INTERACTION §1.3 */ margin-block-start: var(--skp-space-xl); } /* Full-bleed photographic backdrop (material only). Guarded so a stray backdrop on a light hero can never put a photograph behind dark text. */ .skp-hero:not(.skp-hero--material) .skp-hero__backdrop { display: none; } .skp-hero__backdrop { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .skp-hero__backdrop-img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; } /* --- Variant: material (dark, scrimmed photography, single column) -------- */ /* Surface only. The top rule's colour and thickness are not restated: .skp-inverse on the same element rebinds --skp-accent to --skp-inverse-primary and --skp-on-accent to --skp-on-tertiary, and --skp-accent-bar comes from the tier. Buttons, focus ring, H1 ink and lede ink are likewise rebound by .skp-inverse in the token layer, so none of them appears in this block. */ .skp-hero--material { --skp-hero-min-height: min(72vh, 720px); display: flex; align-items: center; /* the copy sits centred in the 720px band */ } .skp-hero--material > .skp-inner { grid-template-columns: minmax(0, 1fr); } /* The backdrop carries the surface, so the light wash is switched off. */ .skp-hero--material::after { content: none; } /* Outlined pill instead of filled. --skp-accent is already --skp-inverse-primary here and --skp-hairline is already --skp-outline-inverse — both rebound by .skp-inverse, so neither value is written twice. */ .skp-hero--material .skp-hero__eyebrow { background: transparent; color: var(--skp-accent); border: var(--skp-hairline); } /* Scrim + radial primary wash, weighted LEFT where the copy is, so the copy column sits on near-solid secondary regardless of what the photograph does. Measured worst case (a blown-out white sky under the copy): white 11.1:1, inverse-primary 7.4:1 — both clear 4.5:1. */ .skp-hero--material .skp-hero__backdrop::before { content: ""; position: absolute; inset: 0; background-color: var(--skp-scrim); background-image: linear-gradient(90deg, color-mix(in srgb, var(--skp-secondary) 88%, transparent) 0%, color-mix(in srgb, var(--skp-secondary) 46%, transparent) 46%, transparent 82%), radial-gradient(90% 120% at 8% 0%, color-mix(in srgb, var(--skp-primary) 46%, transparent) 0%, transparent 64%); color: var(--skp-inverse-on-surface); /* the scrim's paired ink */ pointer-events: none; } /* Perforation motif — a radial-gradient dot tiled by background-size, masked so it only ever appears to the RIGHT of the copy column. 00-PRINCIPLES §4.4: dark bands only, very low opacity, never behind text that must be read. Gated on @supports so a browser without mask-image gets no dots at all rather than dots across the headline. */ @supports (mask-image: linear-gradient(currentColor, transparent)) { .skp-hero--material .skp-hero__backdrop::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, var(--skp-inverse-primary) var(--skp-hero-perf-dot), transparent calc(var(--skp-hero-perf-dot) + 0.5px)); background-size: var(--skp-hero-perf-pitch) var(--skp-hero-perf-pitch); color: var(--skp-inverse-on-surface); opacity: 0.10; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, currentColor 86%); mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, currentColor 86%); pointer-events: none; } } /* --- Variant: application (light, two column) ---------------------------- */ /* The base IS this variant — declaring the same grid under the modifier would be duplication, not an override. The class exists so the markup names its variant and so the :has() baseline rule has a hook. */ /* --- Variant: application-plain (light, one column, no photograph) -------- */ .skp-hero--application-plain > .skp-inner { grid-template-columns: minmax(0, 1fr); } /* With no photograph the wash has to carry the band on its own. */ .skp-hero--application-plain::after { background-image: radial-gradient(80% 130% at 88% 0%, color-mix(in srgb, var(--skp-primary) 16%, transparent) 0%, transparent 62%), linear-gradient(135deg, color-mix(in srgb, var(--skp-primary) 12%, transparent) 0%, color-mix(in srgb, var(--skp-secondary) 8%, transparent) 100%); } /* --- Tier delta (type and measure only) ---------------------------------- */ /* Four declarations. Section rhythm, accent colour, accent-bar thickness, card padding and grid gap are all resolved by the alias layer and are NOT here. What is left is the H1 type role (which differs by tier per 01-FOUNDATIONS §2.2 and has no alias), its leading and measure, and the top rule's fade length (52% / 62%, stated per tier in 02-COMPONENTS §1, likewise unaliased). Split this way, a --material hero on a page with no tier class (the /products/ directory, 03-PAGE-COMPOSITION §7) still renders correctly on surface: dark ink, yellow rule, yellow buttons, yellow focus ring — all from .skp-inverse. Only the type ramp and the 4px bar degrade to use-case values. */ body.skp-tier-material .skp-hero { --skp-hero-title-size: var(--skp-display-large); --skp-hero-title-lh: 1.04; --skp-hero-title-measure: 19ch; --skp-hero-rule-width: 62%; } /* --- Responsive (<=900px — the breakpoint that matters) ------------------ */ @media (max-width: 900px) { .skp-hero > .skp-inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--skp-space-xl); } /* media after copy: read what it is, then see it */ .skp-hero__copy { order: 1; } .skp-hero__media { order: 2; margin-block-start: 0; } /* the baseline offset only means anything in two columns */ .skp-hero--application > .skp-inner:has(.skp-eyebrow) { --skp-hero-lead-offset: 0px; } /* height goes auto; the flex centring is pointless at one column */ .skp-hero--material { display: block; --skp-hero-min-height: auto; } /* the copy now spans the full width, so the left-weighted scrim ramp would leave the right-hand words on bare photograph — go flat instead */ .skp-hero--material .skp-hero__backdrop::before { background-image: linear-gradient(180deg, color-mix(in srgb, var(--skp-secondary) 78%, transparent) 0%, color-mix(in srgb, var(--skp-secondary) 86%, transparent) 100%); } /* and the motif has nowhere left to sit that is not behind text */ .skp-hero--material .skp-hero__backdrop::after { display: none; } /* Stacking and spacing only. The 100% width of each button comes from the token layer's `@media (max-width:900px) { .skp-btn { width: 100% } }`; align-items:stretch is belt-and-braces so the stack still fills if that rule is ever RUCSS-stripped. */ .skp-hero .skp-hero__actions { flex-direction: column; align-items: stretch; gap: calc(var(--skp-space-sm) + var(--skp-space-xs)); /* 12px, 04-INTERACTION §1.7 */ } .skp-hero .skp-hero__title { max-width: 100%; } } /* --- Reduced motion ------------------------------------------------------ */ /* None needed. This component declares no transition and no transform anywhere; the token layer carries the guard for .skp-btn and .skp-state, and skp-components.css REGION 4 carries the fence for the primitives. A guard here would be a rule with nothing to disable. */ /* ---- Lineage ----------------------------------------------------------- */ /* ========================================================================= LINEAGE Spec: 02-COMPONENTS §2 · 03-PAGE-COMPOSITION §1 (navigation signature) · 04-INTERACTION §2,§5,§5.1,§6 · 11-CONTENT-SPEC §2 WRITTEN AGAINST THE MARKUP THAT ACTUALLY SHIPS. skp-product-tiers.php lines 115-122 emit a bare