@codenhub/styles 0.3.0 → 0.5.0

package/dist/tw/box.css

@@ -1,5 +1,3 @@
-@reference "tailwindcss";
-
 /* How a box is painted, in one place: intent supplies the colour, presentation
    how much of it, the aesthetic the material, and this composes the three. It
    composes here, not on a container, because a custom property resolves its
@@ -16,14 +14,15 @@
 
      `--_fill-cap` is the matching slot for a component that reinterprets what a
      presentation means for itself rather than merely bounding it -- `.card.soft`
-     uses it to rest at 0% regardless of what `.soft` asks for. It has to be a
-     separate term rather than a rewrite of `--ui-fill`: `presentation.css`'s
-     `.soft` is unlayered CSS and `@utility card`'s own rule compiles into
-     Tailwind's `utilities` layer, and an unlayered declaration always wins over
-     a layered one for the same property, at any specificity -- so `.card.soft`
-     writing `--ui-fill: 0%` directly was silently losing to `.soft`'s `12%`
-     every time. `--_fill-cap` is a token `.soft` never touches, so nothing
-     contests it.
+     uses it to rest at 0% regardless of what `.soft` asks for. It is a
+     separate term rather than a write of `--ui-fill`, for two reasons. A
+     component writing `--ui-fill` from `utilities` would beat a consumer's own
+     `[--ui-fill:...]` utility, which the layer map reserves for state
+     (docs/internal/model.md#cascade-layers); a private competes with nothing a
+     consumer writes. And `--ui-fill` cascades by design, so a neutral panel
+     writing `0%` would turn every badge and button inside it ghost, where a
+     cap bounds the component and stops there (below). A state that means the
+     fill it names -- `:checked` -- writes `--ui-fill` itself.
 
      Restated here at `100%` -- a no-op -- for the same reason `--_d-ground`
      is restated `transparent` below rather than left to its `var()` fallback:
@@ -68,14 +67,20 @@
      a capped intent -- rather than being bent so neutral's contrast is the ink,
      which rendered a checked neutral checkbox black-on-black. */
   --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
-  /* P3: the line blends toward the fill by the fill amount, so a filled box has
-     a seamless edge. Blend first, amount after (`--_edge-amount` below) -- the
-     other order lands `.edgeless` on the fill colour, which the border box then
-     paints as a second translucent coat: a ring around an element that asked for
-     no edge. The blend runs toward `--_bg`, not raw `--intent-color`, so under
-     an aesthetic that thins the fill a translucent box does not keep an opaque
-     ring. */
-  --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  /* P3: the line fades out as the fill fills in, so a filled box has a seamless
+     edge. It fades toward `transparent`, not toward the plate: the plate already
+     runs under the border (nothing here clips the background to the padding
+     box), so a line blended toward `--_bg` painted the plate a second time over
+     itself. On an opaque plate that is invisible; on a translucent one -- a
+     neutral fill, capped at 20%, or any fill `--ui-bg-alpha` thins -- it drew a
+     ring around the box, 1.54:1 against its own plate in light. Faded toward
+     nothing, the border shows the one coat beneath it.
+
+     Blend first, amount after (`--_edge-amount` below) -- the other order lands
+     `.edgeless` on the fill colour, which the border box then paints as a second
+     coat: a ring around an element that asked for no edge. See
+     docs/internal/model.md#presentation. */
+  --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
   /* How much line there is, as an input rather than a result. A component that
      must keep its line whatever the edge class says raises `--_edge-floor`
      instead of rewriting `--_edge`, and the composition above still runs.
@@ -95,14 +100,30 @@
      draws. Zero lengths are written `0px` because `calc(0 * 1)` yields a number
      and a shadow position needs a length. */
   --_elevation: var(--ui-elevation, var(--_d-elevation, 1));
-  --_sx: calc(var(--ui-shadow-x, var(--_d-shadow-x, 0px)) * var(--_elevation));
+
+  /* The size step, a unitless multiplier the size and padding modifiers publish
+     as two privates -- `.sm`/`.p-sm` 0.75, `.p-xs` 0.5, `.lg`/`.p-lg` 1.25 --
+     so that when both sit on one element the tighter wins: `.lg.p-xs` is
+     small. An unset step takes the other's value, so a lone `.lg` still grows.
+     Restated `initial` here, before any modifier, because a custom property
+     inherits and a `.card.p-xs` would otherwise shrink every button inside it;
+     the modifier rules outrank this one on specificity. `--ui-scale` is the
+     public override, undeclared by the package. See docs/internal/model.md#material-tokens. */
+  --_scale-size: initial;
+  --_scale-pad: initial;
+  --_scale: var(--ui-scale, min(var(--_scale-size, var(--_scale-pad, 1)), var(--_scale-pad, var(--_scale-size, 1))));
+  /* Depth follows the step down and not up: a 4px slab under a 20px button
+     swallows it, while a press that travels the aesthetic's whole depth has to
+     land flat on a `.lg` button too. */
+  --_depth: calc(var(--_elevation) * min(1, var(--_scale)));
+  --_sx: calc(var(--ui-shadow-x, var(--_d-shadow-x, 0px)) * var(--_depth));
   /* Three slots, most specific first: the aesthetic, then a component that draws
      its own depth, then the plain step `.raised`/`.floating` supply on a page
      with no aesthetic. The order lets a raised card under `.neobrutalism` keep
      the slab. Nothing declares the last slot until something asks for depth, so
      a plain unmodified page has no shadow anywhere. */
-  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_elevation));
-  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_elevation));
+  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_depth));
+  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_depth));
   /* Spread is deliberately not scaled. An aesthetic that draws its edge as an
      inset ring spends spread on it, and scaling that by elevation would erase
      the edge of every component the registry rests at zero. Elevation is depth:
@@ -130,13 +151,23 @@
   --_edge-shadow-color: var(--ui-shadow-edge) var(--_edge);
   --_shadow-color: var(--_edge-shadow-color, var(--_depth-color));
   --_shadow-parts: var(--ui-shadow-inset,) var(--_sx) var(--_sy) var(--_sb) var(--_ss) var(--_shadow-color);
+  /* A shadow that is not depth: light in the element's own intent colour, with
+     no offset. Outside the depth layer, and not scaled by elevation, so `.flat`
+     leaves it alone and a field resting at zero still takes it. Present only
+     when `--ui-halo-ink` is declared: undeclared, the whole layer, leading
+     comma included, is invalid at computed-value time and `var()` drops it, so
+     no empty layer sits in every box's shadow. */
+  --_halo-layer:
+    ,
+    0 0 var(--ui-halo-blur, 0px) var(--ui-halo-spread, 0px)
+      color-mix(in oklab, var(--intent-border) var(--ui-halo-ink), transparent);
   /* Indirection so a component can substitute a complete value of its own
      without restating the parts -- `surface` does, for the multi-layer case.
      There is deliberately no `--ui-shadow` wrapper: a complete value has nothing
      for the elevation multiplier to reach, so `.flat` would silently stop working
      on anything that set one. `--ui-surface-shadow` is that escape hatch narrowed
      to the single case that needs it. */
-  --_shadow: var(--_shadow-parts);
+  --_shadow: var(--_shadow-parts) var(--_halo-layer,);
   --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
 
   /* Every box sizes itself as `min-height`/`min-width: var(--control-height)`
@@ -151,17 +182,44 @@
   box-sizing: border-box;
   background-color: var(--_bg);
   color: var(--_fg);
-  border: var(--_width) solid var(--_edge);
-  border-radius: var(--ui-radius, var(--radius-control));
+  /* The line's style is material: `solid`, `dashed`, `dotted`, or `double`,
+     which needs a width of 3px or more to draw two lines. It keeps the line's
+     colour, so its contrast, whatever it draws. */
+  border: var(--_width) var(--ui-line-style, solid) var(--_edge);
+  /* The corner is the aesthetic's length at scale 1 times the size step, so a
+     small button takes a small corner and a cut stays a true 45 degrees. Each
+     corner then multiplies by its own `--ui-corner-tl`/`-tr`/`-br`/`-bl`, 0 or
+     1, which is how `.cut-diagonal` and a bevelling aesthetic's diagonal draw
+     two corners and leave two square. An explicit `--ui-radius` still wins,
+     taken as written. */
+  --_corner: calc(var(--ui-corner, var(--radius-control)) * var(--_scale));
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
+  );
+  /* What the radius draws: a round arc by default, a straight cut under an
+     aesthetic that bevels (`.cyber`). `round` is the property's initial value,
+     so with no aesthetic in scope this is a no-op, and an engine without
+     `corner-shape` drops the line at parse time. A component that overrides the
+     radius after `@apply box` keeps this, so it bevels by the same amount it
+     rounds. See model.md#material-tokens. */
+  corner-shape: var(--ui-corner-shape, round);
   box-shadow: var(--_shadow);
   clip-path: var(--ui-clip, none);
+  /* The press travel `box-active` writes; `none` at rest, because any other
+     `translate` makes the box a stacking context and a containing block.
+     Restated here so a pressed card does not carry the boxes inside it. */
+  --_press: none;
+  translate: var(--_press);
   transition:
     background-color var(--motion-duration-normal) var(--motion-ease),
     border-color var(--motion-duration-normal) var(--motion-ease),
     box-shadow var(--motion-duration-normal) var(--motion-ease),
     color var(--motion-duration-normal) var(--motion-ease),
     opacity var(--motion-duration-normal) var(--motion-ease),
-    transform var(--motion-duration-normal) var(--motion-ease);
+    transform var(--motion-duration-normal) var(--motion-ease),
+    translate var(--motion-duration-normal) var(--motion-ease);
 
   /* An aesthetic that clips cannot show the global focus outline, so it declares
      `--ui-focus-inset` and gets an inset layer instead. With no such aesthetic
@@ -197,14 +255,13 @@
 @utility box-hover {
   &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
     --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_d-ground, transparent));
-    /* P3 again, against the hover tone. Only the ink end has to move: the fill
-       end is `--_bg`, which the line above already redefined, so the resting
-       formula follows the hover on its own. Without this the edge blends toward
-       the resting ink -- a ring of the colour the box just left. */
-    --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-hover));
-    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
+    /* P3 again, against the hover tone: the line still fades as the fill fills
+       in, but toward the hover ink. Without this the edge keeps the resting ink
+       -- a ring of the colour the box just left. */
+    --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
     --_sy: calc(
-      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_elevation)
+      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_depth)
     );
 
     transform: var(--ui-hover-transform, none);
@@ -217,11 +274,26 @@
    aesthetic's -- neobrutalism travels into its offset shadow, chunky-tile drops
    onto its bar -- and with no aesthetic it is the base `scale(0.97)` from
    `theme.css`, dropped under reduced motion. The `--ui-active-shadow-*` slots
-   stay no-ops until an aesthetic sets them. */
+   stay no-ops until an aesthetic sets them.
+
+   A press that travels into the element's own depth is a translation, given as
+   `--ui-active-translate-x`/`-y` and scaled by `--_depth` like the shadow it
+   travels into, so a `.p-xs` button that sits on half the slab moves half as
+   far, a `.floating` one twice as far, and a `.flat` one, with no slab to land
+   on, not at all. It is the independent `translate` property, so it composes
+   with `--ui-active-transform` rather than replacing it.
+
+   The press writes only `--_press`, and `box` declares `translate` from it.
+   A `translate` declaration here sorts this rule ahead of `box-hover`'s -- the
+   property ranks before `transform` in Tailwind's order -- and the hovered
+   `transform: none` then beats every press. */
 @utility box-active {
   &:active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
-    --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
-    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_elevation));
+    --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
+    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_depth));
+
+    --_press: calc(var(--ui-active-translate-x, 0px) * var(--_depth))
+      calc(var(--ui-active-translate-y, 0px) * var(--_depth));
 
     transform: var(--ui-active-transform, none);
   }

package/dist/tw/components/button.css

@@ -14,16 +14,34 @@
   --_d-border: 0%;
   --_d-elevation: 1;
 
-  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 font-semibold whitespace-nowrap no-underline select-none;
+  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 whitespace-nowrap no-underline select-none;
 
   min-height: var(--control-height);
+  /* The label is material, shared with `.badge`: weight, tracking, case, and a
+     text shadow, set by an aesthetic as tokens (`.chunky-tile`'s heavier,
+     tracked label), and a consumer's own `font-*`, `tracking-*`, `uppercase`, or
+     text-shadow utility still beats the aesthetic. Tracking has no fallback on
+     purpose: undefined, the declaration is invalid at computed-value time and
+     `letter-spacing` inherits, which is what it did before the slot existed.
+     Case and shadow fall back to `none`, which is what a button already does:
+     the user agent stops both inheriting into one. The shadow is written
+     without a colour, so it takes the label's own and cannot lower its
+     contrast. See docs/internal/model.md#cascade-layers. */
+  font-weight: var(--ui-label-weight, var(--font-weight-semibold));
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: var(--ui-label-case, none);
+  text-shadow: var(--ui-label-shadow, none);
 
   &.sm {
     @apply min-h-8 px-3 py-1 text-sm;
+
+    --_scale-size: 0.75;
   }
 
   &.lg {
     @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
+
+    --_scale-size: 1.25;
   }
 
   &.icon {
@@ -32,27 +50,25 @@
     min-width: var(--control-height);
   }
 
-  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names, matching the `sm`/`md`/`lg`
-     vocabulary the elevation modifier uses; `.dense`/`.compact`/`.spacious` are
-     first-class aliases, not a deprecation shim -- the same pattern
-     `.destructive`/`.danger`/`.error` uses on the intent axis. Bare `sm`/`lg`
-     are already the size modifier's class names, so `p-` prefixes here to
-     avoid colliding with a button's own size. `.p-xs` is the tightest step,
-     below `.compact`: a chip-sized button in a toolbar or a table cell.
+  /* Bare `sm`/`lg` are already the size modifier's class names, so `p-`
+     prefixes here to avoid colliding with a button's own size. `.p-xs` is the
+     tightest step, below `.p-sm`: a chip-sized button in a toolbar or a table
+     cell.
 
      `.icon` drops both floors -- `min-width` from its own base rule below and
      `min-height` from `--control-height` -- at every padding tier, labeled
-     buttons keep the height floor everywhere but `.p-xs`/`.dense`. `.icon`
+     buttons keep the height floor everywhere but `.p-xs`. `.icon`
      already asks to be square: `aspect-square` ties its width to whatever
      height it lands on, so a height floor that survives keeps the button
      bigger than its own glyph regardless of how tight the padding asked to be
-     -- the one combination `.p-xs`/`.dense` used to get right and the other two
-     tiers did not, leaving a `.icon.compact` floating in a box far bigger than
-     it needed and a `.icon.spacious` doing the same one step further out. */
-  &.p-xs,
-  &.dense {
+     -- the one combination `.p-xs` used to get right and the other two tiers
+     did not, leaving a `.icon.p-sm` floating in a box far bigger than it
+     needed and a `.icon.p-lg` doing the same one step further out. */
+  &.p-xs {
     @apply px-2 py-0.5;
 
+    --_scale-pad: 0.5;
+
     /* The one padding step that also drops the size floor for a labeled
        button. At this tier the button is a chip in a toolbar or a table
        cell, where `--control-height` is taller than the row it sits in;
@@ -67,10 +83,11 @@
     }
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     @apply px-2.5 py-1;
 
+    --_scale-pad: 0.75;
+
     &.icon {
       @apply p-1;
 
@@ -79,10 +96,11 @@
     }
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     @apply px-6 py-3;
 
+    --_scale-pad: 1.25;
+
     &.icon {
       @apply p-3;
 
@@ -91,7 +109,10 @@
     }
   }
 
+  /* A pill normally takes the round material ahead of the box radius. Sketch
+     gives this token the button's own box outline; a bevel still cuts the full
+     radius to points under cyber. */
   &.pill {
-    @apply rounded-full;
+    border-radius: var(--ui-radius-pill, calc(infinity * 1px));
   }
 }

package/dist/tw/components/feedback.css

@@ -1,7 +1,7 @@
 @reference "tailwindcss";
 @import "../theme.css";
 @reference "../box.css";
-@reference "./surface.css";
+@reference "../surface.css";
 
 @keyframes anim-skeleton {
   0% {
@@ -49,16 +49,17 @@
      plus `.solid`/`.ghost` so an explicit presentation on the element is
      never clamped to a cap it did not ask for.
 
-     Grounds on `--color-foreground` through the public `--ui-surface-ground`
-     escape hatch, exactly like `.panel` and a resting `.card.soft` -- an
+     Grounds on `--color-foreground` through `--_d-surface-ground`, exactly
+     like `.panel` and a resting `.card.soft`, so glass's ground and a
+     consumer's `--ui-surface-ground` still win over it -- an
      alert has no hover state to reveal a tint into either, so this is
      permanent rather than revealed. Unlike a neutral panel or badge, an
      alert cannot lose its visual identity from this: `--_d-border: 100%`
      above holds regardless of fill, so a neutral alert still reads as a
      framed box, just a quiet one instead of a grey slab. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
     --_fill-cap: 0%;
-    --ui-surface-ground: var(--color-foreground);
+    --_d-surface-ground: var(--color-foreground);
   }
 }
 
@@ -91,11 +92,20 @@
   --_d-border: 0%;
   --_d-elevation: 0;
 
-  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs font-bold;
+  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs;
+
+  /* The label material `.btn` reads. Unset, tracking, case, and shadow inherit,
+     as a badge's text always has. */
+  font-weight: var(--ui-label-weight, var(--font-weight-bold));
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: var(--ui-label-case);
+  text-shadow: var(--ui-label-shadow);
 
   /* Pill by default, but an aesthetic that declares no radius has to mean it, so
-     the round corner is this component's fallback rather than a hardcoded value. */
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+     the round corner is this component's fallback rather than a hardcoded value.
+     An aesthetic that keeps pills distinct from its control corner says so
+     through `--ui-radius-pill` first. */
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 }
 
@@ -114,7 +124,15 @@
   animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
   background: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-sheen), var(--skeleton-base));
   background-size: 200% 100%;
-  border-radius: var(--ui-radius, var(--radius-control));
+  /* Not a box, so it draws the control corner and its pattern itself, the way
+     `box` does at scale 1, and reads the corner shape beside it. */
+  --_corner: var(--ui-corner, var(--radius-control));
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
+  );
+  corner-shape: var(--ui-corner-shape, round);
 }
 
 /* The track is a box, the fill is not: `box.css`'s formula composes the frame,
@@ -122,8 +140,8 @@
    same contract as `.loader`/`.skeleton`. `.progress` cannot `@apply box`
    (the fill is a `::after`, not the element's own background), so it hand-
    reimplements the formula the way `.quote` does -- see
-   docs/internal/progress-presentation-axes.md for the decision and why the
-   other three indicators do not get the same treatment. */
+   docs/internal/model.md#components-that-do-not-take-the-whole-of-box for the
+   decision and why the other three indicators do not get the same treatment. */
 @utility progress {
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
@@ -158,16 +176,21 @@
 
   @apply relative h-2.5 w-full overflow-hidden;
   background-color: var(--progress-surface, var(--_progress-surface));
-  border: var(--ui-border-width, var(--border-width)) solid var(--progress-edge, var(--_progress-edge));
+  border: var(--ui-border-width, var(--border-width)) var(--ui-line-style, solid)
+    var(--progress-edge, var(--_progress-edge));
   /* Round by default; an aesthetic that declares no radius squares the track and
-     its fill together. */
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+     its fill together, and a pill corner reaches both first. */
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
+  /* Not a box either, and the fill below restates it, so a bevelled track
+     carries a bevelled fill rather than a pill inside a cut frame. */
+  corner-shape: var(--ui-corner-shape, round);
 
   &::after {
     content: "";
     @apply absolute start-0 top-0 bottom-0 block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
 
-    border-radius: var(--ui-radius, calc(infinity * 1px));
+    border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
+    corner-shape: var(--ui-corner-shape, round);
     background-color: var(--progress-color, var(--intent-color));
     width: var(--progress-value, 0%);
     z-index: 2;