Integrations

Load Thin-Sky’s Foundation, Themes, Layouts, Components, and Marketing styles with these rules. Adapt the media, links, and form actions to your site.

@layer thin-patterns {
  .marketing-specimen {
    container: marketing-specimen / inline-size;
    color: var(--thin-color-text);
    background: var(--thin-color-surface);
  }

  .marketing-specimen[data-tone="sky"] { --thin-color-surface: oklch(96% .022 231); }
  .marketing-specimen[data-tone="mint"] { --thin-color-surface: oklch(96% .035 155); }
  .marketing-specimen[data-tone="rose"] { --thin-color-surface: oklch(96% .035 18); }
  .marketing-specimen[data-tone="amber"] { --thin-color-surface: oklch(96% .06 91); }
  .marketing-specimen[data-tone="blue"] { --thin-color-surface: oklch(39% .15 257); }
  .marketing-specimen[data-tone="violet"] { --thin-color-surface: oklch(35% .16 290); }
  .marketing-specimen[data-tone="gradient"] { background: linear-gradient(125deg, oklch(33% .13 272), oklch(37% .125 326)); }

  .marketing-specimen[data-treatment~="accent"]:not([data-tone="gradient"]) {
    background: radial-gradient(ellipse at 92% 88%, color-mix(in oklch, var(--thin-color-accent) 19%, transparent), transparent 60%), var(--thin-color-surface);
  }

  .marketing-section {
    --marketing-inset: clamp(var(--thin-space-m), 5cqi, 4rem);
    --marketing-gap: clamp(var(--thin-space-m), 4cqi, 3rem);
    display: grid;
    gap: var(--marketing-gap);
    padding-block: clamp(var(--thin-space-l), 5cqi, 4rem);
    padding-inline: var(--marketing-inset);
    overflow-wrap: anywhere;
  }

  .marketing-section > *,
  .marketing-composition > *,
  .marketing-nav > *,
  .marketing-card,
  .marketing-board,
  .marketing-section .thin-price-card {
    min-inline-size: 0;
  }

  .marketing-specimen[data-category="navigations"] .marketing-section,
  .marketing-specimen[data-treatment~="compact"]:not([data-category="headers"], [data-category="blog"]) .marketing-section {
    padding-block: var(--thin-space-m);
  }

  .marketing-section :where(ul[role="list"], dl) { margin-block: 0; }
  .marketing-section :where(a.thin-button, button) { max-inline-size: 100%; }

  .marketing-composition {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-composition:is([data-composition="split"], [data-composition="media-first"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    align-items: center;
  }

  .marketing-composition[data-composition="band"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .marketing-composition[data-composition="band"] > .marketing-intro {
    flex: 1 1 17rem;
  }

  .marketing-composition[data-composition="center"] > .marketing-intro,
  .marketing-composition[data-composition="showcase"] > .marketing-intro {
    align-items: center;
    justify-self: center;
    text-align: center;
  }

  .marketing-composition:is([data-composition="center"], [data-composition="showcase"]) > .marketing-intro .marketing-actions {
    justify-content: center;
  }

  .marketing-composition[data-composition="editorial"] > .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-display {
    max-inline-size: 23ch;
    font-size: clamp(1.55rem, 1.05rem + 3.4cqi, 4rem);
    line-height: 1.07;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  .marketing-display em {
    color: var(--thin-color-accent);
    font-style: normal;
  }

  .marketing-specimen[data-treatment~="light"] .marketing-display { font-weight: 430; }
  .marketing-specimen[data-treatment~="uppercase"] :is(.marketing-display, .marketing-nav nav) { text-transform: uppercase; }
  .marketing-specimen[data-treatment~="pill"] .thin-button { border-radius: 2em; }

  .marketing-intro > p:not(.marketing-kicker) { max-inline-size: 54ch; }
  .marketing-kicker { color: var(--thin-color-accent); font-size: .9em; font-weight: 700; }
  .marketing-specimen[data-treatment~="pill"] .marketing-kicker { padding: .25em .8em; border: 1px solid currentColor; border-radius: 2em; inline-size: fit-content; }

  .marketing-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--thin-space-xs) var(--thin-space-m);
  }

  .marketing-nav[data-nav="start"] > nav { flex: 1 1 auto; }
  .marketing-nav[data-nav="band"] > nav { margin-inline-start: auto; }
  .marketing-nav[data-nav="wordmark"] { justify-content: center; }

  .marketing-nav > nav a,
  .marketing-nav-actions > a:not(.thin-button) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--thin-density-control);
  }

  .marketing-brand {
    color: var(--thin-color-text);
    font-size: 1.25em;
    font-weight: 780;
    text-decoration: none;
  }

  .marketing-stage,
  .marketing-launch,
  .marketing-cta,
  .marketing-foot {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-stage {
    position: relative;
    isolation: isolate;
  }

  .marketing-stage .marketing-nav {
    padding-block-end: var(--thin-space-s);
    border-block-end: 1px solid var(--thin-color-border);
  }

  .marketing-stage:has(.marketing-backdrop) {
    border-radius: var(--thin-radius-m);
    padding: var(--marketing-inset);
    overflow: clip;
  }

  .marketing-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    background: oklch(24% .04 258);
  }

  .marketing-backdrop img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: .23;
  }

  .marketing-panel {
    padding: var(--marketing-inset);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice {
    justify-content: center;
    padding: var(--thin-space-xs) var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice a { padding-block: var(--thin-space-2xs); }
  .marketing-notice-inset { max-inline-size: 62ch; margin-inline: auto; }

  .marketing-travel { display: grid; gap: var(--marketing-gap); align-items: center; }

  @container marketing-specimen (inline-size >= 52rem) {
    .marketing-travel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .marketing-travel > figure { grid-column: 1 / 5; grid-row: 1; }
    .marketing-travel > .marketing-panel { grid-column: 4 / -1; grid-row: 1; }
  }

  .marketing-image :is(img, video) {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--thin-radius-m);
  }

  .marketing-image:only-child { inline-size: min(100%, 55rem); }
  .marketing-composition[data-composition="showcase"] > .marketing-image { inline-size: min(100%, 56rem); justify-self: center; }

  .marketing-collage {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--thin-space-xs);
  }

  .marketing-collage img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-collage img:first-child { grid-row: span 2; }

  .marketing-art {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 6%;
    min-block-size: clamp(6rem, 25cqi, 16rem);
    padding: 10%;
    border-radius: var(--thin-radius-m);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
  }

  .marketing-art i {
    inline-size: 100%;
    aspect-ratio: 1;
    border: .2rem solid currentColor;
    border-radius: 50% 50% 12% 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, currentColor 18%, transparent);
  }

  .marketing-art i:nth-child(2) { border-radius: 16%; translate: 0 -18%; }
  .marketing-art i:nth-child(3) { border-radius: 50%; translate: 0 18%; }

  .marketing-board {
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-block-start-width: .75rem;
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-device { border-width: .65rem; }
  .marketing-board figcaption { margin: 0; font-weight: 700; }
  .marketing-board .thin-box { background: var(--thin-color-surface); }
  .marketing-code > figcaption { margin-block-end: var(--thin-space-xs); }
  .marketing-code pre { margin-block: 0; }

  .marketing-marks {
    align-items: stretch;
    text-align: center;
  }

  .marketing-marks > li {
    display: grid;
    place-items: center;
    min-block-size: 3rem;
    padding: var(--thin-space-xs);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    font-family: var(--thin-font-display);
  }

  [data-treatment~="plain"] .marketing-marks > li { border-color: transparent; }
  [data-treatment~="tiles"] .marketing-marks > li { background: var(--thin-color-surface-raised); }
  .marketing-service-mark { font-weight: 750; }

  .marketing-metrics dd { margin: 0; color: var(--thin-color-accent); font-size: var(--thin-text-1); font-weight: 720; }

  .marketing-form {
    inline-size: min(100%, 36rem);
    text-align: start;
  }

  .marketing-form p { font-size: .9em; }
  .marketing-form-fields {
    display: grid;
    gap: var(--thin-space-xs);
    align-items: end;
  }

  .marketing-form-fields > * { min-inline-size: 0; }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields {
    display: flex;
    flex-wrap: wrap;
  }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields > :is(.thin-field, input) {
    flex: 1 1 12rem;
    inline-size: auto;
  }

  .marketing-search { inline-size: min(100%, 40rem); text-align: start; }

  .marketing-collection > * { min-inline-size: 0; }
  .marketing-card {
    block-size: 100%;
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  [data-treatment~="plain"] .marketing-card {
    border-color: transparent;
    background: transparent;
  }

  [data-treatment~="accent"] .marketing-card { border-block-start: .25rem solid var(--thin-color-accent); }

  .marketing-card > img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-mark,
  .marketing-person-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
    font-weight: 750;
  }

  .marketing-member { display: grid; align-content: start; gap: var(--thin-space-s); }
  .marketing-member > img { aspect-ratio: 1; }
  [data-treatment~="compact"] .marketing-member { grid-template-columns: auto minmax(0, 1fr); }

  .marketing-quotation { max-inline-size: 62ch; }
  [data-composition="center"] > .marketing-quotation { text-align: center; justify-self: center; }
  [data-composition="center"] > .marketing-quotation .marketing-attribution { justify-content: center; }
  .marketing-quotation blockquote { border: 0; padding: 0; color: var(--thin-color-text); font-size: var(--thin-text-1); }
  .marketing-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--thin-space-xs); }

  .marketing-questions { inline-size: 100%; text-align: start; }
  .marketing-questions[data-questions="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
  }

  .marketing-answers { display: grid; gap: var(--thin-space-s); }
  .marketing-questions details > p { margin-block-start: var(--thin-space-xs); }
  [data-treatment~="plain"] .marketing-questions details { background: transparent; }
  [data-treatment~="accent"] .marketing-questions details { border-inline: 0; border-block-start: 0; border-radius: 0; }

  .marketing-offers { min-inline-size: 0; }
  .marketing-offers fieldset { justify-self: start; }
  .marketing-yearly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-monthly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-yearly { display: inline; }
  .marketing-offers .thin-price small { font-size: .55em; }
  .marketing-plan-title small { color: var(--thin-color-accent); font-weight: 700; }
  .marketing-offers [data-composition="stack"] .thin-pricing { grid-template-columns: minmax(0, 1fr); }
  [data-treatment~="accent"] .marketing-offers .thin-price-card { border-block-start: .3rem solid var(--thin-color-accent); }

  .marketing-foot [data-composition="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .marketing-foot [data-composition="center"] {
    justify-items: center;
    text-align: center;
  }

  .marketing-foot nav > ul { margin-block-start: var(--thin-space-xs); }
  .marketing-foot [data-composition="grid"] nav > ul { display: grid; }
  .marketing-foot > small { border-block-start: 1px solid var(--thin-color-border); padding-block-start: var(--thin-space-s); }

  @container marketing-specimen (inline-size >= 46rem) {
    .marketing-stories > [data-lead] { grid-column: span 2; }
    .marketing-nav[data-nav="brand-middle"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .marketing-nav[data-nav="brand-middle"] .marketing-nav-actions { justify-self: end; }
  }

  @media (forced-colors: active) {
    .marketing-backdrop { display: none; }
    .marketing-specimen, .marketing-card, .marketing-panel { background: Canvas; color: CanvasText; }
    .marketing-kicker, .marketing-display em { color: CanvasText; }
  }
}