@nadicodeai/design-system 0.1.0

package/dist/css/layout.css

@@ -0,0 +1,658 @@
+/* layout layer — page-system, 12-column field, grid guides, stage scaffolds (renamed from grid.css per D12).
+ *
+ * Structural-geometry foundation (kept through the Tailwind+shadcn migration; see
+ * index.css). This layer owns the kernel grid and the single-owner seam model:
+ * every visible border/seam at a given coordinate is drawn by exactly one rule
+ * here (the frame owns top+left, one `::after` closes right+bottom; each row owns
+ * its own top seam; the first row's top is suppressed so the frame's own top is
+ * not doubled). Column spans, row tracks, and seam placement are computed from
+ * explicit grid math — `grid-column`/`grid-row` line indices and the
+ * `--nc-grid-*` track counts — never hand-placed by eye. Every dimension, gap,
+ * and color references an emitted `--nc-*` token; no raw literal lives here. */
+
+/* Responsive token switching (policy per ADR 0005: breakpoints live in the
+   application layer, never in the generated token layer).
+   tokens.generated.css emits faithful per-breakpoint dimension tokens
+   (--nc-<name>-mobile/-tablet/-desktop, 1:1 with the export); these :root
+   aliases collapse each consumed name to the active breakpoint value, exactly
+   reproducing the previous diff-suppressed cascade. Aliases exist ONLY for the
+   10 collapsed names that have real src/css consumers (h-strip joined when
+   image's strip form became its first consumer). The two emitted-but-
+   unconsumed dimension families (h-visual, h-precision) get no alias —
+   an alias nothing reads is noise; their per-breakpoint tokens are still emitted
+   to satisfy the faithful-projection mandate, and a future consumer can add the
+   collapsed alias when it actually needs it. Custom-prop resolution is
+   cascade-global, so these layout-layer aliases resolve for foundation-layer
+   consumers (e.g. .nc-page max-width) regardless of import order. */
+:root {
+  --nc-page-max: var(--nc-page-max-mobile);
+  --nc-cross-size: var(--nc-cross-size-mobile);
+  --nc-h-cell-md: var(--nc-h-cell-md-mobile);
+  --nc-h-cell-lg: var(--nc-h-cell-lg-mobile);
+  --nc-h-hero: var(--nc-h-hero-mobile);
+  --nc-h-strip: var(--nc-h-strip-mobile);
+  --nc-h-action-strip: var(--nc-h-action-strip-mobile);
+  --nc-h-action-body: var(--nc-h-action-body-mobile);
+  --nc-h-feature: var(--nc-h-feature-mobile);
+  --nc-h-editorial-feature: var(--nc-h-editorial-feature-mobile);
+}
+
+@media (min-width: 600px) {
+  :root {
+    --nc-page-max: var(--nc-page-max-tablet);
+    --nc-cross-size: var(--nc-cross-size-tablet);
+    --nc-h-cell-md: var(--nc-h-cell-md-tablet);
+    --nc-h-strip: var(--nc-h-strip-tablet);
+    --nc-h-action-body: var(--nc-h-action-body-tablet);
+    --nc-h-feature: var(--nc-h-feature-tablet);
+    --nc-h-editorial-feature: var(--nc-h-editorial-feature-tablet);
+    /* h-cell-lg, h-hero, h-action-strip have no tablet token — omit, so they
+       inherit the mobile value until desktop (matching the previous cascade). */
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --nc-page-max: var(--nc-page-max-desktop);
+    --nc-cross-size: var(--nc-cross-size-desktop);
+    --nc-h-cell-md: var(--nc-h-cell-md-desktop);
+    --nc-h-cell-lg: var(--nc-h-cell-lg-desktop);
+    --nc-h-hero: var(--nc-h-hero-desktop);
+    --nc-h-strip: var(--nc-h-strip-desktop);
+    --nc-h-action-strip: var(--nc-h-action-strip-desktop);
+    --nc-h-feature: var(--nc-h-feature-desktop);
+    --nc-h-editorial-feature: var(--nc-h-editorial-feature-desktop);
+    /* h-action-body has no desktop token — omit, so it stays at the tablet
+       value (matching the previous cascade). */
+  }
+}
+
+.nc-page-system {
+  width: 100%;
+  padding-inline: var(--nc-page-pad);
+  /* The frame floats clear of the page chrome on both ends: a band of empty
+     canvas above (below the sticky nav) and below (above the footer) — the
+     reference container model, where the bordered module never touches a
+     chrome hairline. {spacing.4xl}, matching the nav's 64px bar. */
+  padding-block: var(--nc-4xl);
+}
+
+.nc-page-frame {
+  position: relative;
+  width: 100%;
+  max-width: var(--nc-frame-max);
+  margin-inline: auto;
+  border-top: var(--nc-guide) solid var(--nc-line);
+  border-left: var(--nc-guide) solid var(--nc-line);
+  background: var(--nc-canvas);
+}
+
+/* Single perimeter closer: the frame owns top+left; one ::after closes the
+   trailing right+bottom edges ONCE. This removes the old border-right (which
+   doubled the right edge) and supplies a single bottom owner for the whole
+   frame, so no coordinate is painted twice. */
+.nc-page-frame::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  /* Single owner of the right+bottom perimeter. It must paint ABOVE row content
+     (stage-stack z-index:1, index-card z-index:2) so the frame edge stays visible
+     where content reaches it — e.g. a terminal full-bleed row (bento as the last
+     row) whose bottom seam isn't supplied by a following row's border-top. */
+  z-index: 3;
+  border-right: var(--nc-guide) solid var(--nc-line);
+  border-bottom: var(--nc-guide) solid var(--nc-line);
+  pointer-events: none;
+}
+
+.nc-page-row {
+  --nc-row-min-height: var(--nc-h-cell-lg);
+  --nc-row-bleed-surface: var(--nc-canvas);
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-height: var(--nc-row-min-height);
+  border-top: var(--nc-guide) solid var(--nc-line);
+  background: var(--nc-canvas);
+}
+
+/* Each row owns its own top seam (one owner per inter-row line); the frame's
+   own border-top owns the very top, so suppress the first row's top to avoid
+   doubling it. The last row's bottom is owned by .nc-page-frame::after. */
+.nc-page-frame > .nc-page-row:first-child {
+  border-top: 0;
+}
+
+.nc-page-row[data-nc-bleed="surface"]::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset-block: 0;
+  left: 50%;
+  width: 100vw;
+  transform: translateX(-50%);
+  background: var(--nc-row-bleed-surface);
+  pointer-events: none;
+}
+
+.nc-page-row[data-nc-bleed="surface"] > * {
+  position: relative;
+  z-index: 1;
+}
+
+.nc-row-lane {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+}
+
+.nc-row-lane[data-lane="active"],
+.nc-row-lane[data-lane="full"] {
+  grid-column: 1 / -1;
+}
+
+.nc-grid-field {
+  --nc-grid-columns: 1;
+  --nc-grid-rows: 1;
+  --nc-grid-line: var(--nc-line);
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--nc-grid-columns), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--nc-grid-rows), minmax(0, 1fr));
+  min-width: 0;
+  /* visible so an edge crosshair (a .nc-marker grid child placed on a perimeter
+     track line) is never clipped. A variant that must clip its payload
+     re-asserts overflow:hidden in its recipe. */
+  overflow: visible;
+  background: var(--nc-canvas);
+}
+
+.nc-grid-field[data-grid-field="full-hero"] {
+  --nc-grid-columns: 1;
+  --nc-grid-rows: 2;
+  height: var(--nc-h-hero);
+}
+
+.nc-grid-guides {
+  display: contents;
+  pointer-events: none;
+}
+
+.nc-grid-guide-v,
+.nc-grid-guide-h {
+  position: relative;
+  z-index: 1;
+  display: none;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.nc-grid-guide-v {
+  grid-column: var(--line);
+  grid-row: 1 / -1;
+  border-left: var(--nc-guide) solid var(--nc-grid-line);
+}
+
+.nc-grid-guide-h {
+  grid-column: 1 / -1;
+  grid-row: var(--line);
+  border-top: var(--nc-guide) solid var(--nc-grid-line);
+}
+
+.nc-grid-slot {
+  position: relative;
+  z-index: 2;
+  min-width: 0;
+}
+
+.nc-side-fill {
+  display: none;
+  min-width: 0;
+  min-height: 0;
+  background:
+    repeating-linear-gradient(
+      125deg,
+      var(--nc-canvas) 0,
+      var(--nc-canvas) 6px,
+      var(--nc-line) 6px,
+      var(--nc-line) 7px
+    );
+}
+
+/* The fill owns its single inner boundary rail so the texture is bounded on
+   both sides — frame perimeter outside, this rail inside. One owner: the lane
+   paints nothing at this coordinate. (Hidden by default; see the quiet-gutter
+   doctrine at the desktop block.) */
+.nc-side-fill[data-side="start"] {
+  grid-column: 1;
+  border-inline-end: var(--nc-guide) solid var(--nc-line);
+}
+
+.nc-side-fill[data-side="end"] {
+  grid-column: 12;
+  border-inline-start: var(--nc-guide) solid var(--nc-line);
+}
+
+.nc-row-grid {
+  display: grid;
+  min-width: 0;
+  background: var(--nc-line);
+  column-gap: var(--nc-guide);
+  row-gap: var(--nc-guide);
+  padding-inline: var(--nc-guide);
+}
+
+/* Gap-only variant for nesting: a hairline grid sitting flush inside an edge
+   another owner already draws (an outer cell-grid's column-gap, or a framed
+   lane's side rail) must contribute internal seams only. Dropping its inline
+   padding removes the perimeter line that would otherwise stack onto the owner's
+   line and render 2px. The base grid already carries no padding-block, so the
+   horizontal edges already defer to the row seams; this closes the vertical pair. */
+.nc-row-grid[data-edges="inner"] {
+  padding-inline: 0;
+}
+
+.nc-row-grid[data-grid="2"],
+.nc-row-grid[data-grid="3"],
+.nc-row-grid[data-grid="4"],
+.nc-row-grid[data-grid="5"],
+.nc-row-grid[data-grid="6"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.nc-index-grid {
+  --nc-index-columns: 1;
+  --nc-index-rows: auto;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--nc-index-columns), minmax(0, 1fr));
+  min-width: 0;
+}
+
+.nc-index-guides {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: inherit;
+  pointer-events: none;
+}
+
+.nc-index-guide {
+  min-width: 0;
+  border-right: var(--nc-guide) solid var(--nc-line);
+}
+
+.nc-index-guide:last-child {
+  border-right: 0;
+}
+
+.nc-index-card {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  min-width: 0;
+  min-height: var(--nc-h-cell-lg);
+  padding: var(--nc-cell-padding);
+  align-content: start;
+  gap: 14px;
+  overflow: hidden;
+  background: var(--nc-canvas);
+  color: var(--nc-ink);
+  text-decoration: none;
+}
+
+.nc-index-card[data-featured="true"] {
+  min-height: var(--nc-h-editorial-feature);
+}
+
+.nc-article-shell {
+  display: grid;
+  min-width: 0;
+  background: var(--nc-line);
+  column-gap: var(--nc-guide);
+  row-gap: var(--nc-guide);
+  padding-inline: var(--nc-guide);
+}
+
+.nc-article-header,
+.nc-article-body,
+.nc-article-side,
+.nc-article-footer {
+  display: grid;
+  min-width: 0;
+  padding: var(--nc-cell-padding);
+  gap: 12px;
+  background: var(--nc-canvas);
+}
+
+.nc-article-header {
+  min-height: 280px;
+  align-content: center;
+}
+
+.nc-article-side {
+  color: var(--nc-muted);
+}
+
+.nc-article-footer {
+  background: var(--nc-ink);
+  color: var(--nc-canvas);
+}
+
+.nc-span-12,
+.nc-span-10 {
+  grid-column: 1 / -1;
+}
+
+.nc-stage-frame {
+  --nc-stage-active-column: 1 / -1;
+  --nc-stage-frame-gutter: 0px;
+  --nc-stage-surface: var(--nc-canvas);
+  --nc-stage-frame-color: var(--nc-line);
+  --nc-stage-filler-color: var(--nc-canvas-soft-2);
+  position: relative;
+  min-width: 0;
+  background: var(--nc-stage-surface);
+}
+
+.nc-stage-frame[data-frame-lines="true"]::before,
+.nc-stage-frame[data-frame-lines="true"]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: var(--nc-guide);
+  background: var(--nc-stage-frame-color);
+  pointer-events: none;
+}
+
+.nc-stage-frame[data-frame-lines="true"]::before {
+  left: 0;
+}
+
+.nc-stage-frame[data-frame-lines="true"]::after {
+  right: 0;
+}
+
+.nc-stage-fill {
+  position: absolute;
+  inset-inline: 0;
+  top: var(--nc-stage-fill-top, 0px);
+  bottom: var(--nc-stage-fill-bottom, 0px);
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  column-gap: var(--nc-stage-frame-gutter);
+  pointer-events: none;
+}
+
+.nc-stage-fill::before,
+.nc-stage-fill::after {
+  content: "";
+  min-width: 0;
+  background:
+    repeating-linear-gradient(
+      125deg,
+      transparent,
+      transparent 6px,
+      var(--nc-stage-filler-color) 6px,
+      var(--nc-stage-filler-color) 7px
+    ),
+    var(--nc-canvas);
+}
+
+.nc-stage-fill::before {
+  grid-column: 1;
+  margin-right: calc(var(--nc-stage-frame-gutter) * -1);
+}
+
+.nc-stage-fill::after {
+  grid-column: 12;
+  margin-left: calc(var(--nc-stage-frame-gutter) * -1);
+}
+
+.nc-stage-stack {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+}
+
+.nc-stage-grid,
+.nc-connector-strip {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--nc-stage-frame-gutter);
+  min-width: 0;
+}
+
+.nc-stage-active,
+.nc-connector-track {
+  grid-column: var(--nc-stage-active-column);
+}
+
+.nc-connector-strip {
+  height: calc(var(--nc-connector-height, var(--nc-h-action-strip)) + var(--nc-guide));
+}
+
+.nc-connector-strip[data-edge="start"] {
+  border-bottom: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
+}
+
+.nc-connector-strip[data-edge="end"] {
+  border-top: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
+}
+
+.nc-connector-track {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  height: var(--nc-connector-height, var(--nc-h-action-strip));
+  min-width: 0;
+  padding-inline: var(--nc-guide);
+  overflow: hidden;
+}
+
+.nc-connector-track > div {
+  min-width: 0;
+  height: var(--nc-connector-height, var(--nc-h-action-strip));
+}
+
+.nc-connector-track > div:nth-child(n + 2) {
+  display: none;
+}
+
+.nc-connector-strip svg {
+  color: var(--nc-connector-color, var(--nc-seam));
+  overflow: visible;
+}
+
+.nc-connector-strip line {
+  stroke: currentColor;
+  stroke-dasharray: var(--nc-connector-dash, 4 6);
+  stroke-linecap: round;
+}
+
+.nc-connector-track div svg {
+  display: block;
+  width: var(--nc-guide);
+  height: var(--nc-connector-height, var(--nc-h-action-strip));
+  margin-left: calc(var(--nc-guide) * -1);
+}
+
+.nc-connector-track > svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: var(--nc-guide);
+  height: var(--nc-connector-height, var(--nc-h-action-strip));
+}
+
+@media (min-width: 600px) {
+  .nc-grid-field[data-grid-field="full-hero"] {
+    --nc-grid-columns: 8;
+    --nc-grid-rows: 4;
+  }
+
+  .nc-grid-guide-v,
+  .nc-grid-guide-h {
+    display: block;
+  }
+
+  .nc-grid-guide-v[data-min="desktop"],
+  .nc-grid-guide-h[data-min="desktop"] {
+    display: none;
+  }
+
+  .nc-row-grid[data-grid="2"],
+  .nc-row-grid[data-grid="3"],
+  .nc-row-grid[data-grid="4"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .nc-row-grid[data-grid="5"],
+  .nc-row-grid[data-grid="6"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .nc-index-grid {
+    --nc-index-columns: 2;
+  }
+}
+
+@media (min-width: 960px) {
+  .nc-grid-field[data-grid-field="full-hero"] {
+    --nc-grid-columns: 12;
+    --nc-grid-rows: 8;
+  }
+
+  .nc-grid-guide-v,
+  .nc-grid-guide-h,
+  .nc-grid-guide-v[data-min="desktop"],
+  .nc-grid-guide-h[data-min="desktop"] {
+    display: block;
+  }
+
+  .nc-page-row {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--nc-frame-gap);
+  }
+
+  .nc-row-lane[data-lane="active"] {
+    grid-column: 2 / 12;
+  }
+
+  .nc-row-lane[data-lane="full"] {
+    grid-column: 1 / -1;
+  }
+
+  /* Framed active lane: a single owner for the lane's own left/right hairlines so
+     side framing is a deliberate choice, not a side effect of whichever block
+     sits inside. Scoped to desktop because the active lane is inset (2 / 12) only
+     here; below this breakpoint the lane fills the row and the frame border
+     already owns those edges, so rails would double against it. Framed-lane
+     content must not paint its own perimeter on the same edge — nest a cell-grid
+     as data-edges="inner" so the lane owns the sides and the grid owns the
+     interior seams. */
+  .nc-row-lane[data-lane="active"][data-frame-lines="true"] {
+    position: relative;
+  }
+
+  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::before,
+  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    width: var(--nc-guide);
+    background: var(--nc-line);
+    pointer-events: none;
+  }
+
+  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::before {
+    left: 0;
+  }
+
+  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::after {
+    right: 0;
+  }
+
+  .nc-stage-frame {
+    --nc-stage-active-column: 2 / 12;
+    --nc-stage-frame-gutter: var(--nc-frame-gap);
+  }
+
+  .nc-stage-grid,
+  .nc-connector-strip {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  /* Quiet-gutter doctrine: columns 1 and 12 are empty canvas by default — the
+     whitespace IS the margin (the reference container model: structure lives
+     inside bounded modules, never as page-length gutter texture). The diagonal
+     fill is a scarce structural accent a row opts into with
+     data-rails="hatch"; reserve it for the page's anchor rows (opening hero,
+     closing conversion), where its own inner rail and the frame perimeter
+     bound it on both sides. */
+  .nc-page-row[data-rails="hatch"] .nc-side-fill {
+    display: block;
+  }
+
+  .nc-side-fill[data-side="start"] {
+    margin-right: calc(var(--nc-frame-gap) * -1);
+  }
+
+  .nc-side-fill[data-side="end"] {
+    margin-left: calc(var(--nc-frame-gap) * -1);
+  }
+
+  .nc-row-grid[data-grid="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .nc-row-grid[data-grid="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .nc-row-grid[data-grid="5"] {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .nc-row-grid[data-grid="6"] {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .nc-index-grid {
+    --nc-index-columns: 3;
+  }
+
+  .nc-index-card[data-featured="true"] {
+    grid-column: span 2;
+  }
+
+  .nc-article-shell {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .nc-article-header,
+  .nc-article-footer {
+    grid-column: 1 / -1;
+  }
+
+  .nc-article-side {
+    grid-column: 1 / 3;
+    grid-row: 2;
+  }
+
+  .nc-article-body {
+    grid-column: 3 / -1;
+  }
+
+  .nc-span-10 {
+    grid-column: 2 / 12;
+  }
+}