@getvitops/generator 0.1.0

package/assets/css/layout.css

@@ -0,0 +1,723 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. TYPOGRAPHY — moved to schema-driven .font-* roles.
+   The named text roles (.font-display/.font-title/.font-heading/.font-body/
+   .font-quote/.font-caption/.font-eyebrow/.font-lead/.font-footnote/.font-code/
+   .font-tag) are now generated from design-system.json into
+   ./generated/typography.css. Edit the `typography` key there, not here.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Responsive variant naming (Tailwind-aligned)
+   Utilities follow Tailwind's left-to-right prefix order with `-` for `:`:
+     [<query>-][<pseudo>-]<utility>   e.g. md-split-1-2, md-items-center
+   Query prefixes are bare container breakpoints (sm 30rem · md 48rem · lg 64rem
+   · xl 80rem), resolved against the nearest container-type ancestor. Base utility
+   names mirror Tailwind (items-*, justify-*, text-*, flex*), so the same vocabulary
+   works in the CSS/Bricks framework and, via Tailwind's own @md:/hover: variants,
+   in the generated tailwind.css.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. RHYTHM — automatic vertical rhythm between sibling elements
+   Put .rhythm on a container. Adjacent siblings get margin-top based on the
+   relationship between the two elements. Gaps are multiples of --rhythm-base
+   (1rlh × dial). :where() keeps selectors at 0 specificity so .m-* overrides win.
+   ═══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --rhythm-scale: 1; /* global dial */
+  --rhythm-base: calc(1rlh * var(--rhythm-scale)); /* one root line-height × dial */
+
+  --rhythm-h-p: 0.4;
+  --rhythm-p-p: 0.9;
+  --rhythm-p-h: 1.6;
+  --rhythm-h-h: 0.6;
+  --rhythm-p-list: 0.5;
+  --rhythm-list-p: 0.9;
+  --rhythm-li-li: 0.3;
+  --rhythm-text-media: 1.2;
+  --rhythm-media-text: 1.2;
+}
+
+/* .rhythm establishes a flow-root: contains child top-margins (no collapse-out)
+   and gives the parser a non-empty bare rule to register. */
+.rhythm {
+  display: flow-root;
+}
+.rhythm > * + * {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-p));
+}
+.rhythm > :where(h1, h2, h3, h4, h5, h6) + p {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-h-p));
+}
+.rhythm > p + :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-h));
+}
+.rhythm > :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-h-h));
+}
+.rhythm > p + :where(ul, ol) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-list));
+}
+.rhythm > :where(ul, ol) + p {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-list-p));
+}
+.rhythm :where(ul, ol) > li + li {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-li-li));
+}
+.rhythm > :where(p, h1, h2, h3, h4, h5, h6, ul, ol) + :where(figure, img, picture, video) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-text-media));
+}
+.rhythm > :where(figure, img, picture, video) + :where(p, h1, h2, h3, h4, h5, h6, ul, ol) {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-media-text));
+}
+
+/* Manual rhythm overrides (apply to the second element of a pair) */
+.m-h-p {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-h-p));
+}
+.m-p-p {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-p));
+}
+.m-p-h {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-h));
+}
+.m-h-h {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-h-h));
+}
+.m-p-list {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-p-list));
+}
+.m-list-p {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-list-p));
+}
+.m-li-li {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-li-li));
+}
+.m-text-media {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-text-media));
+}
+.m-media-text {
+  margin-top: calc(var(--rhythm-base) * var(--rhythm-media-text));
+}
+
+.m-0 {
+  margin-top: 0;
+}
+.m-xs {
+  margin-top: calc(var(--rhythm-base) * 0.25);
+}
+.m-s {
+  margin-top: calc(var(--rhythm-base) * 0.5);
+}
+.m-m {
+  margin-top: calc(var(--rhythm-base) * 1);
+}
+.m-l {
+  margin-top: calc(var(--rhythm-base) * 1.5);
+}
+.m-xl {
+  margin-top: calc(var(--rhythm-base) * 2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. CENTERED SECTIONS — named-track grid
+   Put .centered on a Div. Children default to the measure (reading) track;
+   add .breakout / .spotlight / .fullbleed to widen. Track widths in ch so the
+   reading measure is character-based and the subtraction math stays consistent.
+   ═══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --width-measure: 65ch;
+  --width-breakout: 90ch;
+  --width-spotlight: 120ch;
+  --gutter: clamp(1rem, 4cqi, 3rem);
+}
+
+body {
+  container-type: inline-size;
+  /* Named so scroll.css's `@container body (…)` queries (toc-layout/-sidebar/
+     -inline) resolve. Unnamed utility variant queries still match the nearest
+     container regardless of the name. */
+  container-name: body;
+}
+
+.centered {
+  --_measure: min(var(--width-measure), 100% - var(--gutter) * 2);
+  --_breakout: minmax(0, calc((var(--width-breakout) - var(--width-measure)) / 2));
+  --_spotlight: minmax(0, calc((var(--width-spotlight) - var(--width-breakout)) / 2));
+  position: relative;
+  display: grid;
+  grid-template-columns:
+    [fullbleed-start] minmax(var(--gutter), 1fr)
+    [spotlight-start] var(--_spotlight)
+    [breakout-start] var(--_breakout)
+    [measure-start] var(--_measure) [measure-end]
+    var(--_breakout) [breakout-end]
+    var(--_spotlight) [spotlight-end]
+    minmax(var(--gutter), 1fr) [fullbleed-end];
+}
+
+.centered > * {
+  grid-column: measure;
+}
+
+/* Bare placement. .measure restates the default (redundant but parser-visible). */
+.measure {
+  grid-column: measure;
+}
+.breakout {
+  grid-column: breakout;
+}
+.spotlight {
+  grid-column: spotlight;
+}
+.fullbleed {
+  grid-column: fullbleed;
+}
+
+/* Promotion variants (base = measure; widen past each container breakpoint) */
+@container (min-width: 30rem) {
+  .sm-measure {
+    grid-column: measure;
+  }
+  .sm-breakout {
+    grid-column: breakout;
+  }
+  .sm-spotlight {
+    grid-column: spotlight;
+  }
+  .sm-fullbleed {
+    grid-column: fullbleed;
+  }
+}
+@container (min-width: 48rem) {
+  .md-measure {
+    grid-column: measure;
+  }
+  .md-breakout {
+    grid-column: breakout;
+  }
+  .md-spotlight {
+    grid-column: spotlight;
+  }
+  .md-fullbleed {
+    grid-column: fullbleed;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-measure {
+    grid-column: measure;
+  }
+  .lg-breakout {
+    grid-column: breakout;
+  }
+  .lg-spotlight {
+    grid-column: spotlight;
+  }
+  .lg-fullbleed {
+    grid-column: fullbleed;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-measure {
+    grid-column: measure;
+  }
+  .xl-breakout {
+    grid-column: breakout;
+  }
+  .xl-spotlight {
+    grid-column: spotlight;
+  }
+  .xl-fullbleed {
+    grid-column: fullbleed;
+  }
+}
+
+/* Vertical rhythm region (usually on the Section) */
+.region {
+  padding-block: clamp(
+    var(--region-space-min, 3rem),
+    var(--region-space, 8vh),
+    var(--region-space-max, 8rem)
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. LAYOUT UTILITIES — flex direction, splits, alignment, text-align
+   Container-gated (unnamed @container): resolve against the nearest
+   container-type ancestor. Bare = base/mobile; sm- md- lg- xl- widen up.
+   Breakpoints: sm 30rem · md 48rem · lg 64rem · xl 80rem.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Flex direction (display + direction; tiered classes set both) ── */
+.flex {
+  display: flex;
+  /* Set direction explicitly (not just `display:flex`): hosts like Bricks' block
+     element default `flex-direction: column`, which would otherwise win. `.flex-col`
+     still overrides. */
+  flex-direction: row;
+  --_flex-direction: row;
+}
+/* Each direction class also publishes --_flex-direction so descendants (e.g. .group)
+   can read the container's axis via a style query and adapt when it flips responsively. */
+.flex-row {
+  flex-direction: row;
+  --_flex-direction: row;
+}
+.flex-col {
+  flex-direction: column;
+  --_flex-direction: column;
+}
+
+@container (min-width: 30rem) {
+  .sm-flex {
+    display: flex;
+  }
+  .sm-flex-row {
+    display: flex;
+    flex-direction: row;
+    --_flex-direction: row;
+  }
+  .sm-flex-col {
+    display: flex;
+    flex-direction: column;
+    --_flex-direction: column;
+  }
+}
+@container (min-width: 48rem) {
+  .md-flex {
+    display: flex;
+  }
+  .md-flex-row {
+    display: flex;
+    flex-direction: row;
+    --_flex-direction: row;
+  }
+  .md-flex-col {
+    display: flex;
+    flex-direction: column;
+    --_flex-direction: column;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-flex {
+    display: flex;
+  }
+  .lg-flex-row {
+    display: flex;
+    flex-direction: row;
+    --_flex-direction: row;
+  }
+  .lg-flex-col {
+    display: flex;
+    flex-direction: column;
+    --_flex-direction: column;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-flex {
+    display: flex;
+  }
+  .xl-flex-row {
+    display: flex;
+    flex-direction: row;
+    --_flex-direction: row;
+  }
+  .xl-flex-col {
+    display: flex;
+    flex-direction: column;
+    --_flex-direction: column;
+  }
+}
+
+/* ── Splits (internal fractions). .split sets its own flex context so it works
+   standalone AND is registered by Bricks' parser (a non-empty bare rule). ── */
+.split {
+  display: flex;
+}
+/* Equal by default. A ratio class sets two flex vars on the container (any a:b
+   in one line); the first/last child read them. Responsive prefixes engage the
+   ratio from a container breakpoint (equal below it). */
+.split > * {
+  flex: 1;
+}
+.split > :first-child {
+  flex: var(--_split-a, 1);
+}
+.split > :last-child {
+  flex: var(--_split-b, 1);
+}
+
+/* ── Auto-fit grid: cards wrap into as many equal columns as fit, each at least
+   --grid-min wide. Unlike .split (explicit fractions) the column count is
+   content-driven. ── */
+.grid-auto {
+  display: grid;
+  gap: var(--grid-gap, 1rem);
+  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 13rem), 1fr));
+}
+
+.split-1-2 {
+  --_split-a: 1;
+  --_split-b: 2;
+}
+.split-2-1 {
+  --_split-a: 2;
+  --_split-b: 1;
+}
+.split-1-3 {
+  --_split-a: 1;
+  --_split-b: 3;
+}
+.split-3-1 {
+  --_split-a: 3;
+  --_split-b: 1;
+}
+.split-1-4 {
+  --_split-a: 1;
+  --_split-b: 4;
+}
+.split-4-1 {
+  --_split-a: 4;
+  --_split-b: 1;
+}
+.split-2-3 {
+  --_split-a: 2;
+  --_split-b: 3;
+}
+.split-3-2 {
+  --_split-a: 3;
+  --_split-b: 2;
+}
+
+@container (min-width: 30rem) {
+  .sm-split {
+    --_split-a: 1;
+    --_split-b: 1;
+  }
+  .sm-split-1-2 {
+    --_split-a: 1;
+    --_split-b: 2;
+  }
+  .sm-split-2-1 {
+    --_split-a: 2;
+    --_split-b: 1;
+  }
+  .sm-split-1-3 {
+    --_split-a: 1;
+    --_split-b: 3;
+  }
+  .sm-split-3-1 {
+    --_split-a: 3;
+    --_split-b: 1;
+  }
+  .sm-split-1-4 {
+    --_split-a: 1;
+    --_split-b: 4;
+  }
+  .sm-split-4-1 {
+    --_split-a: 4;
+    --_split-b: 1;
+  }
+  .sm-split-2-3 {
+    --_split-a: 2;
+    --_split-b: 3;
+  }
+  .sm-split-3-2 {
+    --_split-a: 3;
+    --_split-b: 2;
+  }
+}
+@container (min-width: 48rem) {
+  .md-split {
+    --_split-a: 1;
+    --_split-b: 1;
+  }
+  .md-split-1-2 {
+    --_split-a: 1;
+    --_split-b: 2;
+  }
+  .md-split-2-1 {
+    --_split-a: 2;
+    --_split-b: 1;
+  }
+  .md-split-1-3 {
+    --_split-a: 1;
+    --_split-b: 3;
+  }
+  .md-split-3-1 {
+    --_split-a: 3;
+    --_split-b: 1;
+  }
+  .md-split-1-4 {
+    --_split-a: 1;
+    --_split-b: 4;
+  }
+  .md-split-4-1 {
+    --_split-a: 4;
+    --_split-b: 1;
+  }
+  .md-split-2-3 {
+    --_split-a: 2;
+    --_split-b: 3;
+  }
+  .md-split-3-2 {
+    --_split-a: 3;
+    --_split-b: 2;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-split {
+    --_split-a: 1;
+    --_split-b: 1;
+  }
+  .lg-split-1-2 {
+    --_split-a: 1;
+    --_split-b: 2;
+  }
+  .lg-split-2-1 {
+    --_split-a: 2;
+    --_split-b: 1;
+  }
+  .lg-split-1-3 {
+    --_split-a: 1;
+    --_split-b: 3;
+  }
+  .lg-split-3-1 {
+    --_split-a: 3;
+    --_split-b: 1;
+  }
+  .lg-split-1-4 {
+    --_split-a: 1;
+    --_split-b: 4;
+  }
+  .lg-split-4-1 {
+    --_split-a: 4;
+    --_split-b: 1;
+  }
+  .lg-split-2-3 {
+    --_split-a: 2;
+    --_split-b: 3;
+  }
+  .lg-split-3-2 {
+    --_split-a: 3;
+    --_split-b: 2;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-split {
+    --_split-a: 1;
+    --_split-b: 1;
+  }
+  .xl-split-1-2 {
+    --_split-a: 1;
+    --_split-b: 2;
+  }
+  .xl-split-2-1 {
+    --_split-a: 2;
+    --_split-b: 1;
+  }
+  .xl-split-1-3 {
+    --_split-a: 1;
+    --_split-b: 3;
+  }
+  .xl-split-3-1 {
+    --_split-a: 3;
+    --_split-b: 1;
+  }
+  .xl-split-1-4 {
+    --_split-a: 1;
+    --_split-b: 4;
+  }
+  .xl-split-4-1 {
+    --_split-a: 4;
+    --_split-b: 1;
+  }
+  .xl-split-2-3 {
+    --_split-a: 2;
+    --_split-b: 3;
+  }
+  .xl-split-3-2 {
+    --_split-a: 3;
+    --_split-b: 2;
+  }
+}
+
+/* ── Alignment (flex parents) + text-align. Bare classes, then shared tiers.
+   Names mirror Tailwind: items-* (align-items), justify-* (justify-content),
+   text-* (text-align). ── */
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-start {
+  text-align: start;
+}
+.text-center {
+  text-align: center;
+}
+.text-end {
+  text-align: end;
+}
+
+@container (min-width: 30rem) {
+  .sm-items-start {
+    align-items: flex-start;
+  }
+  .sm-items-center {
+    align-items: center;
+  }
+  .sm-items-end {
+    align-items: flex-end;
+  }
+  .sm-items-stretch {
+    align-items: stretch;
+  }
+  .sm-justify-start {
+    justify-content: flex-start;
+  }
+  .sm-justify-center {
+    justify-content: center;
+  }
+  .sm-justify-end {
+    justify-content: flex-end;
+  }
+  .sm-justify-between {
+    justify-content: space-between;
+  }
+  .sm-text-start {
+    text-align: start;
+  }
+  .sm-text-center {
+    text-align: center;
+  }
+  .sm-text-end {
+    text-align: end;
+  }
+}
+@container (min-width: 48rem) {
+  .md-items-start {
+    align-items: flex-start;
+  }
+  .md-items-center {
+    align-items: center;
+  }
+  .md-items-end {
+    align-items: flex-end;
+  }
+  .md-items-stretch {
+    align-items: stretch;
+  }
+  .md-justify-start {
+    justify-content: flex-start;
+  }
+  .md-justify-center {
+    justify-content: center;
+  }
+  .md-justify-end {
+    justify-content: flex-end;
+  }
+  .md-justify-between {
+    justify-content: space-between;
+  }
+  .md-text-start {
+    text-align: start;
+  }
+  .md-text-center {
+    text-align: center;
+  }
+  .md-text-end {
+    text-align: end;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-items-start {
+    align-items: flex-start;
+  }
+  .lg-items-center {
+    align-items: center;
+  }
+  .lg-items-end {
+    align-items: flex-end;
+  }
+  .lg-items-stretch {
+    align-items: stretch;
+  }
+  .lg-justify-start {
+    justify-content: flex-start;
+  }
+  .lg-justify-center {
+    justify-content: center;
+  }
+  .lg-justify-end {
+    justify-content: flex-end;
+  }
+  .lg-justify-between {
+    justify-content: space-between;
+  }
+  .lg-text-start {
+    text-align: start;
+  }
+  .lg-text-center {
+    text-align: center;
+  }
+  .lg-text-end {
+    text-align: end;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-items-start {
+    align-items: flex-start;
+  }
+  .xl-items-center {
+    align-items: center;
+  }
+  .xl-items-end {
+    align-items: flex-end;
+  }
+  .xl-items-stretch {
+    align-items: stretch;
+  }
+  .xl-justify-start {
+    justify-content: flex-start;
+  }
+  .xl-justify-center {
+    justify-content: center;
+  }
+  .xl-justify-end {
+    justify-content: flex-end;
+  }
+  .xl-justify-between {
+    justify-content: space-between;
+  }
+  .xl-text-start {
+    text-align: start;
+  }
+  .xl-text-center {
+    text-align: center;
+  }
+  .xl-text-end {
+    text-align: end;
+  }
+}