@heyramzi/ui 2.24.0 → 3.0.0

package/src/editor/content.css

@@ -1,418 +1,422 @@
+@layer theme, base, components, utilities;
+
 /* Shared Tiptap node styles for editor and renderer.
    Applied via a `.tiptap-content` wrapper and :global() selectors in the
    consuming Svelte components. */
 
-.tiptap-content {
-  line-height: var(--content-leading, 1.75);
-  font-size: var(--content-size, 1rem);
-  color: var(--color-foreground);
-}
-
-/* WHY: anchor jumps must clear the fixed top navigation (h-16 → h-12 when scrolled). */
-.tiptap-content :is(h1, h2, h3, h4, h5, h6) {
-  scroll-margin-top: 6rem;
-}
-
-.tiptap-content h1 {
-  font-family: var(--font-heading);
-  font-size: 2.25rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  margin-top: 3rem;
-  margin-bottom: 0.75rem;
-  line-height: 1.15;
-  color: var(--color-foreground);
-}
-
-/* WHY: heading top-margin collapses through nothing when wrapped in a
-   padded container, leaving an extra gap at the top of the article. */
-.tiptap-content > :first-child {
-  margin-top: 0;
-}
+@layer components {
+  .tiptap-content {
+    line-height: var(--content-leading, 1.75);
+    font-size: var(--content-size, 1rem);
+    color: var(--color-foreground);
+  }
 
-.tiptap-content h2 {
-  font-family: var(--font-heading);
-  font-size: 1.75rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  margin-top: 2.5rem;
-  margin-bottom: 0.625rem;
-  line-height: 1.2;
-  color: var(--color-foreground);
-}
+  /* WHY: anchor jumps must clear the fixed top navigation (h-16 → h-12 when scrolled). */
+  .tiptap-content :is(h1, h2, h3, h4, h5, h6) {
+    scroll-margin-top: 6rem;
+  }
 
-.tiptap-content h3 {
-  font-family: var(--font-heading);
-  font-size: 1.375rem;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  margin-top: 2rem;
-  margin-bottom: 0.5rem;
-  line-height: 1.3;
-  color: var(--color-foreground);
-}
+  .tiptap-content h1 {
+    font-family: var(--font-heading);
+    font-size: 2.25rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    margin-top: 3rem;
+    margin-bottom: 0.75rem;
+    line-height: 1.15;
+    color: var(--color-foreground);
+  }
 
-.tiptap-content h4 {
-  font-family: var(--font-heading);
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.375rem;
-  line-height: 1.35;
-  color: var(--color-foreground);
-}
+  /* WHY: heading top-margin collapses through nothing when wrapped in a
+     padded container, leaving an extra gap at the top of the article. */
+  .tiptap-content > :first-child {
+    margin-top: 0;
+  }
 
-.tiptap-content p {
-  margin-bottom: var(--content-gap, 1rem);
-  text-wrap: pretty;
-  overflow-wrap: break-word;
-}
+  .tiptap-content h2 {
+    font-family: var(--font-heading);
+    font-size: 1.75rem;
+    font-weight: 700;
+    letter-spacing: -0.025em;
+    margin-top: 2.5rem;
+    margin-bottom: 0.625rem;
+    line-height: 1.2;
+    color: var(--color-foreground);
+  }
 
-.tiptap-content ul,
-.tiptap-content ol {
-  margin-bottom: 1rem;
-  padding-left: 1.75rem;
-}
+  .tiptap-content h3 {
+    font-family: var(--font-heading);
+    font-size: 1.375rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin-top: 2rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.3;
+    color: var(--color-foreground);
+  }
 
-.tiptap-content ul {
-  list-style-type: disc;
-}
+  .tiptap-content h4 {
+    font-family: var(--font-heading);
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.375rem;
+    line-height: 1.35;
+    color: var(--color-foreground);
+  }
 
-.tiptap-content ol {
-  list-style-type: decimal;
-}
+  .tiptap-content p {
+    margin-bottom: var(--content-gap, 1rem);
+    text-wrap: pretty;
+    overflow-wrap: break-word;
+  }
 
-.tiptap-content li {
-  margin-bottom: 0.25rem;
-}
+  .tiptap-content ul,
+  .tiptap-content ol {
+    margin-bottom: 1rem;
+    padding-left: 1.75rem;
+  }
 
-.tiptap-content li p {
-  margin-bottom: 0.25rem;
-}
+  .tiptap-content ul {
+    list-style-type: disc;
+  }
 
-.tiptap-content blockquote {
-  padding-left: 1.25rem;
-  margin: 1.5rem 0;
-  color: var(--color-muted-foreground);
-  font-style: italic;
-  position: relative;
-}
+  .tiptap-content ol {
+    list-style-type: decimal;
+  }
 
-.tiptap-content blockquote::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0.25rem;
-  bottom: 0.25rem;
-  width: 3px;
-  background: var(--color-border);
-  border-radius: 2px;
-}
+  .tiptap-content li {
+    margin-bottom: 0.25rem;
+  }
 
-.tiptap-content code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  padding: 0.15em 0.4em;
-  border-radius: 0.25rem;
-  background: var(--color-muted);
-}
+  .tiptap-content li p {
+    margin-bottom: 0.25rem;
+  }
 
-.tiptap-content pre {
-  background: var(--color-muted);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  overflow-x: auto;
-  margin: 1.25rem 0;
-}
+  .tiptap-content blockquote {
+    padding-left: 1.25rem;
+    margin: 1.5rem 0;
+    color: var(--color-muted-foreground);
+    font-style: italic;
+    position: relative;
+  }
 
-.tiptap-content pre code {
-  padding: 0;
-  background: none;
-  font-size: 0.875em;
-}
+  .tiptap-content blockquote::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.25rem;
+    bottom: 0.25rem;
+    width: 3px;
+    background: var(--color-border);
+    border-radius: 2px;
+  }
 
-.tiptap-content a {
-  color: var(--color-brand, var(--color-primary));
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
+  .tiptap-content code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: 0.15em 0.4em;
+    border-radius: 0.25rem;
+    background: var(--color-muted);
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .tiptap-content a:hover {
-    opacity: 0.85;
+  .tiptap-content pre {
+    background: var(--color-muted);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 1.25rem 0;
   }
-}
 
-.tiptap-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-  margin: 1.5rem auto;
-  display: block;
-}
+  .tiptap-content pre code {
+    padding: 0;
+    background: none;
+    font-size: 0.875em;
+  }
 
-.tiptap-content img[data-align="left"] {
-  float: left;
-  margin: 0.5rem 1.5rem 1rem 0;
-}
+  .tiptap-content a {
+    color: var(--color-brand, var(--color-primary));
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
 
-.tiptap-content img[data-align="right"] {
-  float: right;
-  margin: 0.5rem 0 1rem 1.5rem;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .tiptap-content a:hover {
+      opacity: 0.85;
+    }
+  }
 
-.tiptap-content img[data-align="center"] {
-  margin-left: auto;
-  margin-right: auto;
-}
+  .tiptap-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 1.5rem auto;
+    display: block;
+  }
 
-.tiptap-content .cms-block {
-  margin: 1.5rem 0;
-  padding: 1rem 1.1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background: var(--color-muted);
-  color: var(--color-muted-foreground);
-}
+  .tiptap-content img[data-align="left"] {
+    float: left;
+    margin: 0.5rem 1.5rem 1rem 0;
+  }
 
-.tiptap-content .cms-block p {
-  margin-bottom: 0;
-}
+  .tiptap-content img[data-align="right"] {
+    float: right;
+    margin: 0.5rem 0 1rem 1.5rem;
+  }
 
-.tiptap-content .cms-block-node {
-  margin: 1.25rem 0;
-  padding: 0.9rem 1rem;
-  border: 1px dashed var(--color-border);
-  border-radius: 0.75rem;
-  background: color-mix(in srgb, var(--color-muted) 75%, transparent);
-  color: var(--color-muted-foreground);
-}
+  .tiptap-content img[data-align="center"] {
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-.tiptap-content .cms-block strong {
-  display: inline-block;
-  margin-right: 0.35rem;
-  color: var(--color-foreground);
-}
+  .tiptap-content .cms-block {
+    margin: 1.5rem 0;
+    padding: 1rem 1.1rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.75rem;
+    background: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
 
-.tiptap-content hr {
-  border: none;
-  border-top: 1px solid var(--color-border);
-  margin: 2rem 0;
-}
+  .tiptap-content .cms-block p {
+    margin-bottom: 0;
+  }
 
-.tiptap-content strong {
-  font-weight: 600;
-}
+  .tiptap-content .cms-block-node {
+    margin: 1.25rem 0;
+    padding: 0.9rem 1rem;
+    border: 1px dashed var(--color-border);
+    border-radius: 0.75rem;
+    background: color-mix(in srgb, var(--color-muted) 75%, transparent);
+    color: var(--color-muted-foreground);
+  }
 
-/* WHY: <strong> inside a heading must inherit the heading's weight, not
-   downgrade it to 600 (which reads as a font change to the eye). */
-.tiptap-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
-  font-weight: inherit;
-}
+  .tiptap-content .cms-block strong {
+    display: inline-block;
+    margin-right: 0.35rem;
+    color: var(--color-foreground);
+  }
 
-/* Outer chrome: rounded container, mobile horizontal scroll. */
-.tiptap-content .tiptap-table-wrap {
-  margin: 1.75rem 0;
-  overflow-x: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background: var(--color-card);
-}
+  .tiptap-content hr {
+    border: none;
+    border-top: 1px solid var(--color-border);
+    margin: 2rem 0;
+  }
 
-.tiptap-content .tiptap-table-wrap > table {
-  margin: 0;
-}
+  .tiptap-content strong {
+    font-weight: 600;
+  }
 
-.tiptap-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.75rem 0;
-  font-size: 0.9375rem;
-}
+  /* WHY: <strong> inside a heading must inherit the heading's weight, not
+     downgrade it to 600 (which reads as a font change to the eye). */
+  .tiptap-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
+    font-weight: inherit;
+  }
 
-.tiptap-content th,
-.tiptap-content td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  vertical-align: top;
-  border: 0;
-  border-bottom: 1px solid var(--color-border);
-}
+  /* Outer chrome: rounded container, mobile horizontal scroll. */
+  .tiptap-content .tiptap-table-wrap {
+    margin: 1.75rem 0;
+    overflow-x: auto;
+    border: 1px solid var(--color-border);
+    border-radius: 0.75rem;
+    background: var(--color-card);
+  }
 
-.tiptap-content tr:last-child td,
-.tiptap-content tr:last-child th {
-  border-bottom: 0;
-}
+  .tiptap-content .tiptap-table-wrap > table {
+    margin: 0;
+  }
 
-/* Header row: explicit <th> or first row when all cells are <td>. */
-.tiptap-content th,
-.tiptap-content tr:first-child td {
-  background: color-mix(in srgb, var(--color-muted) 55%, transparent);
-  color: var(--color-foreground);
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
+  .tiptap-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.75rem 0;
+    font-size: 0.9375rem;
+  }
 
-/* First column emphasis on body rows. */
-.tiptap-content tr:not(:first-child) td:first-child {
-  font-weight: 600;
-  color: var(--color-foreground);
-}
+  .tiptap-content th,
+  .tiptap-content td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    vertical-align: top;
+    border: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .tiptap-content tr:not(:first-child):hover td {
-    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
+  .tiptap-content tr:last-child td,
+  .tiptap-content tr:last-child th {
+    border-bottom: 0;
   }
-}
 
-.tiptap-content td p,
-.tiptap-content th p {
-  margin-bottom: 0;
-}
+  /* Header row: explicit <th> or first row when all cells are <td>. */
+  .tiptap-content th,
+  .tiptap-content tr:first-child td {
+    background: color-mix(in srgb, var(--color-muted) 55%, transparent);
+    color: var(--color-foreground);
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
 
-/* Comparison table: winner column rendered as colored pills. */
-.tiptap-content table.comparison-table .winner-cell {
-  white-space: nowrap;
-  width: 1%;
-}
+  /* First column emphasis on body rows. */
+  .tiptap-content tr:not(:first-child) td:first-child {
+    font-weight: 600;
+    color: var(--color-foreground);
+  }
 
-.tiptap-content table.comparison-table .winner-cell p {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.2rem 0.7rem;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  font-weight: 600;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  letter-spacing: 0.01em;
-  /* Any winner reads as an indigo pill. A host colours one product with
-     [data-winner="name"], and tie and other below are the two states every
-     comparison has. */
-  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
-  color: var(--color-brand);
-  border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
-}
+  @media (hover: hover) and (pointer: fine) {
+    .tiptap-content tr:not(:first-child):hover td {
+      background: color-mix(in srgb, var(--color-muted) 25%, transparent);
+    }
+  }
 
-.tiptap-content table.comparison-table .winner-cell[data-winner="tie"] p {
-  background: transparent;
-  color: var(--color-muted-foreground);
-  border-color: var(--color-border);
-  border-style: dashed;
-}
+  .tiptap-content td p,
+  .tiptap-content th p {
+    margin-bottom: 0;
+  }
 
-.tiptap-content table.comparison-table .winner-cell[data-winner="other"] p {
-  background: color-mix(in srgb, var(--color-muted) 60%, transparent);
-  color: var(--color-foreground);
-  border-color: var(--color-border);
-}
+  /* Comparison table: winner column rendered as colored pills. */
+  .tiptap-content table.comparison-table .winner-cell {
+    white-space: nowrap;
+    width: 1%;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .tiptap-content table.comparison-table tr:hover .winner-cell p {
-    background: color-mix(in srgb, var(--color-brand) 18%, var(--color-card));
+  .tiptap-content table.comparison-table .winner-cell p {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.7rem;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+    /* Any winner reads as an indigo pill. A host colours one product with
+       [data-winner="name"], and tie and other below are the two states every
+       comparison has. */
+    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
+    color: var(--color-brand);
+    border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
   }
 
-  .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="tie"] p {
+  .tiptap-content table.comparison-table .winner-cell[data-winner="tie"] p {
     background: transparent;
+    color: var(--color-muted-foreground);
+    border-color: var(--color-border);
+    border-style: dashed;
   }
 
-  .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="other"] p {
-    background: color-mix(in srgb, var(--color-muted) 75%, transparent);
+  .tiptap-content table.comparison-table .winner-cell[data-winner="other"] p {
+    background: color-mix(in srgb, var(--color-muted) 60%, transparent);
+    color: var(--color-foreground);
+    border-color: var(--color-border);
   }
-}
 
-/* YouTube facade: aspect-ratio reserves the box so the click-to-load swap
-   (renderer.svelte) contributes zero CLS. Never render a bare <iframe> here. */
-.tiptap-content .tiptap-youtube {
-  position: relative;
-  aspect-ratio: 16 / 9;
-  margin: 1.75rem 0;
-  border-radius: 0.75rem;
-  overflow: hidden;
-  background: var(--color-muted);
-}
+  @media (hover: hover) and (pointer: fine) {
+    .tiptap-content table.comparison-table tr:hover .winner-cell p {
+      background: color-mix(in srgb, var(--color-brand) 18%, var(--color-card));
+    }
 
-.tiptap-content .tiptap-youtube-trigger {
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-}
+    .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="tie"] p {
+      background: transparent;
+    }
 
-.tiptap-content .tiptap-youtube-trigger:focus-visible {
-  outline: 3px solid var(--color-ring);
-  outline-offset: -3px;
-}
+    .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="other"] p {
+      background: color-mix(in srgb, var(--color-muted) 75%, transparent);
+    }
+  }
 
-.tiptap-content .tiptap-youtube-poster {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  margin: 0;
-  border-radius: 0;
-}
+  /* YouTube facade: aspect-ratio reserves the box so the click-to-load swap
+     (renderer.svelte) contributes zero CLS. Never render a bare <iframe> here. */
+  .tiptap-content .tiptap-youtube {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    margin: 1.75rem 0;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    background: var(--color-muted);
+  }
 
-.tiptap-content .tiptap-youtube-play {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 4rem;
-  height: 4rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, black 55%, transparent);
-  transition:
-    background-color 0.15s ease,
-    transform 0.15s ease;
-}
+  .tiptap-content .tiptap-youtube-trigger {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+  }
 
-.tiptap-content .tiptap-youtube-play::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 54%;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 0.7rem 0 0.7rem 1.15rem;
-  border-color: transparent transparent transparent white;
-  transform: translate(-50%, -50%);
-}
+  .tiptap-content .tiptap-youtube-trigger:focus-visible {
+    outline: 3px solid var(--color-ring);
+    outline-offset: -3px;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .tiptap-content .tiptap-youtube-trigger:hover .tiptap-youtube-play {
-    background: color-mix(in srgb, var(--color-brand) 85%, black);
-    transform: translate(-50%, -50%) scale(1.06);
+  .tiptap-content .tiptap-youtube-poster {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    margin: 0;
+    border-radius: 0;
   }
-}
 
-.tiptap-content .tiptap-youtube-title {
-  position: absolute;
-  inset: auto 0 0 0;
-  padding: 2rem 1rem 0.875rem;
-  background: linear-gradient(to top, color-mix(in srgb, black 70%, transparent), transparent);
-  color: white;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  text-align: left;
-}
+  .tiptap-content .tiptap-youtube-play {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4rem;
+    height: 4rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, black 55%, transparent);
+    transition:
+      background-color 0.15s ease,
+      transform 0.15s ease;
+  }
 
-.tiptap-content .tiptap-youtube iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
+  .tiptap-content .tiptap-youtube-play::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 54%;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0.7rem 0 0.7rem 1.15rem;
+    border-color: transparent transparent transparent white;
+    transform: translate(-50%, -50%);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .tiptap-content .tiptap-youtube-play {
-    transition: none;
+  @media (hover: hover) and (pointer: fine) {
+    .tiptap-content .tiptap-youtube-trigger:hover .tiptap-youtube-play {
+      background: color-mix(in srgb, var(--color-brand) 85%, black);
+      transform: translate(-50%, -50%) scale(1.06);
+    }
+  }
+
+  .tiptap-content .tiptap-youtube-title {
+    position: absolute;
+    inset: auto 0 0 0;
+    padding: 2rem 1rem 0.875rem;
+    background: linear-gradient(to top, color-mix(in srgb, black 70%, transparent), transparent);
+    color: white;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  .tiptap-content .tiptap-youtube iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tiptap-content .tiptap-youtube-play {
+      transition: none;
+    }
   }
 }