@hraness/design-kit 0.31.1

package/src/product-marketing-preset.css

@@ -0,0 +1,261 @@
+/* Opt-in marketing contract 1, Quiet direction. Asset URLs stay relative in
+   packages and snapshots. Instrument Serif stays vendored for products that
+   opt in explicitly; no preset uses it by default, so it is never downloaded
+   unless a product sets it as its display face. */
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("./fonts/instrument-serif/instrument-serif-latin-400.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@layer components.hraness-design-kit.legacy {
+  :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+    /* Quiet display role: the body sans at a semibold weight with tight
+       tracking, not a serif. */
+    --hraness-marketing-display-font: var(--font-text, "Nebula Sans", ui-sans-serif, system-ui, sans-serif);
+    --hraness-marketing-display-weight: 550;
+    --hraness-marketing-h1-size: clamp(2.375rem, 1.55rem + 3.6vw, 4.5rem);
+    --hraness-marketing-h1-leading: 1.04;
+    --hraness-marketing-h1-tracking: -.035em;
+    --hraness-marketing-h2-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
+    --hraness-marketing-h2-leading: 1.1;
+    --hraness-marketing-h2-tracking: -.028em;
+    --hraness-marketing-h3-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
+    --hraness-marketing-h3-leading: 1.2;
+    --hraness-marketing-content-measure: 70rem;
+    --hraness-marketing-header-measure: 76rem;
+    --hraness-marketing-header-height: 3.25rem;
+    --hraness-sticky-offset: calc(var(--hraness-marketing-header-height) + 1px);
+    --hraness-marketing-gutter: 2rem;
+    --hraness-marketing-hero-space: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
+    --hraness-marketing-story-space: 5rem;
+    --hraness-marketing-summary-leading: 1.6;
+    --hraness-marketing-header-action-height: 2.25rem;
+    --hraness-marketing-field-ink: var(--foreground, var(--ui-foreground, CanvasText));
+    --hraness-marketing-field-muted: color-mix(in oklch, var(--foreground, var(--ui-foreground, CanvasText)) 12%, var(--muted, var(--ui-muted-foreground, CanvasText)));
+    --hraness-marketing-link: var(--primary, var(--ui-primary, LinkText));
+    /* Retired textures: the field paints the flat palette background. */
+    --hraness-marketing-field-images: none;
+    --hraness-marketing-field-size: auto;
+    --hraness-marketing-terminal-background: var(--surface, var(--ui-card, Canvas));
+    --hraness-marketing-terminal-ink: var(--foreground, var(--ui-foreground, CanvasText));
+    --hraness-marketing-terminal-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
+    --hraness-marketing-terminal-command: var(--primary, var(--ui-primary, LinkText));
+    --hraness-marketing-terminal-chrome: var(--surface, var(--ui-card, Canvas));
+    --hraness-marketing-terminal-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground, var(--ui-foreground, CanvasText)) 12%, transparent);
+  }
+
+  [data-hraness-marketing-preset="minimal"] {
+    --hraness-marketing-display-font: var(--font-text, "Nebula Sans", ui-sans-serif, system-ui, sans-serif);
+    --hraness-marketing-display-weight: 500;
+    --hraness-marketing-h1-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
+    --hraness-marketing-h1-leading: 1.08;
+    --hraness-marketing-h1-tracking: -.035em;
+    --hraness-marketing-h2-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
+    --hraness-marketing-h2-leading: 1.15;
+    --hraness-marketing-h2-tracking: -.02em;
+    --hraness-marketing-h3-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
+    --hraness-marketing-h3-leading: 1.2;
+    --hraness-marketing-header-height: 2.5rem;
+    --hraness-marketing-hero-space: 2rem 3rem;
+    --hraness-marketing-story-space: 3rem;
+    --hraness-marketing-field-images: none;
+  }
+
+  /* Patterns are retired. The attribute values stay valid for compatibility,
+     and every one paints the uninterrupted palette background. */
+  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
+    --hraness-pattern-image: none;
+    --hraness-pattern-decoration: none;
+    --hraness-marketing-field-images: none;
+    --hraness-material-wall-images: none;
+  }
+
+  /* Role-local bindings override the legacy role defaults as well as serving
+     compiled recipes. Application headings outside these hooks stay untouched. */
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]),
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(
+    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
+    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
+    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
+    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
+    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related,
+    .hraness-marketing-cta,
+    .hraness-marketing-proof-frame
+  ) {
+    --hraness-marketing-heading-font: var(--hraness-marketing-display-font);
+    --hraness-marketing-heading-weight: var(--hraness-marketing-display-weight);
+    --hraness-marketing-heading-tracking: var(--hraness-marketing-h1-tracking);
+    --hraness-paper-heading-size: var(--hraness-marketing-h1-size);
+    --hraness-paper-section-heading-size: var(--hraness-marketing-h2-size);
+    --hraness-paper-summary-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
+    --hraness-marketing-measure: var(--hraness-marketing-content-measure);
+    --hraness-marketing-copy-measure: 52ch;
+    --hraness-marketing-radius: .75rem;
+    --hraness-marketing-frame-radius: 1.125rem;
+    --hraness-marketing-section-space: var(--hraness-marketing-story-space);
+    --hraness-marketing-action-height: 2.625rem;
+    --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-ink) 12%, transparent);
+    --hraness-marketing-chrome-rule: 1px solid var(--hraness-marketing-line);
+    --hraness-marketing-chrome-shadow: none;
+    --hraness-marketing-surface-shadow: 0 0 0 1px var(--hraness-marketing-line);
+    --hraness-marketing-shadow: var(--hraness-marketing-terminal-shadow);
+    --hraness-marketing-frame-chrome: var(--hraness-marketing-terminal-chrome);
+  }
+
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(
+    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
+    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
+    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
+    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
+    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related,
+    .hraness-marketing-cta,
+    .hraness-marketing-proof-frame
+  ):not([data-hraness-marketing-preset]) {
+    --hraness-marketing-gutter: inherit;
+  }
+
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header {
+    --hraness-marketing-measure: var(--hraness-marketing-header-measure);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header__inner {
+    min-block-size: var(--hraness-marketing-header-height);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero {
+    padding-block: var(--hraness-marketing-hero-space);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero__heading {
+    font-family: var(--hraness-marketing-display-font);
+    font-size: var(--hraness-marketing-h1-size);
+    font-weight: var(--hraness-marketing-display-weight);
+    letter-spacing: var(--hraness-marketing-h1-tracking);
+    line-height: var(--hraness-marketing-h1-leading);
+    text-wrap: balance;
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-section__heading, .hraness-marketing-install__heading, .hraness-marketing-primitives__heading, .hraness-marketing-interfaces__heading, .hraness-marketing-trust__heading, .hraness-marketing-quotes__heading, .hraness-marketing-pricing__heading, .hraness-marketing-questions__heading, .hraness-marketing-maker__heading, .hraness-marketing-related__heading, .hraness-marketing-cta__heading) {
+    font-family: var(--hraness-marketing-display-font);
+    font-size: var(--hraness-marketing-h2-size);
+    font-weight: var(--hraness-marketing-display-weight);
+    line-height: var(--hraness-marketing-h2-leading);
+    letter-spacing: var(--hraness-marketing-h2-tracking);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero__summary {
+    line-height: var(--hraness-marketing-summary-leading, 1.65);
+    text-wrap: pretty;
+  }
+
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-action {
+    min-block-size: var(--hraness-marketing-action-height);
+    border-radius: var(--hraness-marketing-radius);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header .hraness-marketing-action {
+    min-block-size: var(--hraness-marketing-header-action-height);
+  }
+  /* Phone headers keep 44px targets on both rows. */
+  @media (max-width: 48rem) {
+    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+      --hraness-marketing-header-action-height: 2.75rem;
+    }
+  }
+  @media (pointer: coarse) {
+    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+      --hraness-marketing-header-action-height: 3rem;
+    }
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-action {
+      min-block-size: 3rem;
+    }
+  }
+
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field > :where(.hraness-marketing-hero, .hraness-marketing-section, .hraness-marketing-pillars, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta) {
+    padding-inline: var(--hraness-marketing-gutter);
+  }
+
+  /* The field is a flow container on the flat palette background. The retired
+     grain, cell, and pattern textures never paint, whatever tokens say. */
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
+    background-image: none;
+    color: var(--hraness-marketing-field-ink);
+    position: relative;
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field:not([data-tone="accent"]),
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field:where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta, .hraness-marketing-proof-frame):not([data-tone="accent"]),
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field :where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta, .hraness-marketing-proof-frame):not([data-tone="accent"]) {
+    --hraness-marketing-ink: var(--hraness-marketing-field-ink);
+    --hraness-marketing-muted: var(--hraness-marketing-field-muted);
+  }
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-brand-mark {
+    object-fit: contain;
+    flex: 0 0 auto;
+    filter: none;
+    mask-image: none;
+    background-image: none;
+  }
+
+  /* Legacy releases require string labels. Empty labels may omit the slot;
+     nonempty product facts remain visible and are never hidden by a preset. */
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-hero__name, .hraness-marketing-hero__eyebrow, .hraness-marketing-section__label, .hraness-marketing-install__eyebrow, .hraness-marketing-questions__label, .hraness-marketing-primitives__label, .hraness-marketing-interfaces__label, .hraness-marketing-trust__label, .hraness-marketing-quotes__label, .hraness-marketing-pricing__label, .hraness-marketing-maker__label, .hraness-marketing-related__label):empty {
+    display: none;
+  }
+
+  /* Paint-only hook: no header position, dimensions, or navigation layout. */
+  .hraness-marketing-header-surface,
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
+    --hraness-marketing-header-background: var(--background, Canvas);
+    --hraness-marketing-header-backdrop: none;
+    background-color: var(--hraness-marketing-header-background);
+  }
+  @supports (-webkit-backdrop-filter: blur(1px)) {
+    .hraness-marketing-header-surface,
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
+      --hraness-marketing-header-background: color-mix(in srgb, var(--background, Canvas) 82%, transparent);
+      --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+      -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
+    }
+  }
+  @supports (backdrop-filter: blur(1px)) {
+    .hraness-marketing-header-surface,
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
+      --hraness-marketing-header-background: color-mix(in srgb, var(--background, Canvas) 82%, transparent);
+      --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+      backdrop-filter: var(--hraness-marketing-header-backdrop);
+    }
+  }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    .hraness-marketing-header-surface,
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
+      --hraness-marketing-header-background: var(--background, Canvas);
+      --hraness-marketing-header-backdrop: none;
+    }
+  }
+  @media (max-width: 760px) {
+    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+      --hraness-marketing-gutter: 1.25rem;
+      --hraness-marketing-hero-space: 2.75rem 3rem;
+      --hraness-marketing-story-space: 3.5rem;
+      --hraness-material-module: 4.5rem;
+    }
+    [data-hraness-marketing-preset="minimal"] {
+      --hraness-marketing-hero-space: 2rem 3rem;
+      --hraness-marketing-story-space: 3rem;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+      --hraness-marketing-field-images: none;
+      --hraness-marketing-field-ink: CanvasText;
+      --hraness-marketing-field-muted: CanvasText;
+      --hraness-marketing-link: LinkText;
+    }
+    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
+  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
+      background: Canvas;
+    }
+  }
+}