@invisibleloop/pulse 0.20.11 → 0.20.20

package/docs/public/suzukibento.css

@@ -1,517 +0,0 @@
-/*
- * suzukibento.css — Susuki Bento artist portfolio example
- *
- * Brutalist gallery palette: near-black ground, bone-white text, vermilion accent.
- * Dark by default — palette set as bare token overrides on :root so they
- * cascade into --ui-bg, --ui-text, --ui-accent etc. via pulse-ui.css.
- * Zero border-radius throughout (--radius: 0px).
- * Typography: Inter → system-ui (no external font requests).
- *
- * Token responsibility:
- *   :root             — dark palette + zero-radius + font stack
- *   Component styles  — layout only, var() references throughout
- */
-
-/* ==========================================================================
-   1. Token overrides (hex values live here)
-   ========================================================================== */
-
-/*
- * Override the bare cascade tokens that --ui-* variables reference.
- * See pulse-ui.css :root: --ui-bg: var(--bg, ...) etc.
- * Setting --bg, --surface, --text, --accent etc. on :root is enough to
- * retheme the entire UI without touching --ui-* directly.
- */
-:root {
-  --bg:           #0a0a0a;
-  --surface:      #131313;
-  --surface-2:    #1c1c1c;
-  --border:       #2a2a2a;
-  --text:         #f5f3ef;
-  --muted:        #8a8780;
-  --accent:       #ff4a2a;          /* vermilion — 4.5:1 on #0a0a0a */
-  --accent-hover: #ff6b4f;
-  --accent-dim:   rgba(255, 74, 42, 0.14);
-  --accent-text:  #0a0a0a;
-
-  /* Zero-radius brutalist design language */
-  --radius:    0px;
-  --radius-sm: 0px;
-
-  /* Font stack — system Inter, no HTTP request */
-  --font:         'Inter', system-ui, sans-serif;
-  --font-display: 'Inter', system-ui, sans-serif;
-}
-
-/* ==========================================================================
-   2. Component styles (var() only — no hex values below this line)
-   ========================================================================== */
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  font-family: var(--ui-font, system-ui, sans-serif);
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* --------------------------------------------------------------------------
-   Skip link
-   -------------------------------------------------------------------------- */
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  background: var(--ui-accent);
-  color: var(--ui-accent-text);
-  padding: var(--ui-space-2) var(--ui-space-4);
-  z-index: 100;
-}
-
-.skip-link:focus { left: var(--ui-space-2); }
-
-/* --------------------------------------------------------------------------
-   Sticky top nav (hand-rolled — no nav() component)
-   -------------------------------------------------------------------------- */
-.sb-nav {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--ui-space-5) var(--ui-space-8);
-  background: var(--ui-bg);
-  border-bottom: 1px solid var(--ui-border);
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.sb-nav__brand {
-  font-weight: 700;
-  color: var(--ui-text);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3em;
-}
-
-.sb-nav__dot {
-  display: inline-block;
-  width: 0.45em;
-  height: 0.45em;
-  border-radius: 50%;
-  background: var(--ui-accent);
-  flex-shrink: 0;
-}
-
-.sb-nav__links {
-  display: flex;
-  gap: var(--ui-space-6);
-  list-style: none;
-}
-
-.sb-nav__links a {
-  color: var(--ui-muted);
-  text-decoration: none;
-}
-
-.sb-nav__links a:hover,
-.sb-nav__links a:focus { color: var(--ui-accent); }
-
-/* Burger — hidden on desktop */
-.sb-nav__toggle-input { display: none; }
-.sb-nav__burger       { display: none; }
-
-@media (max-width: 600px) {
-  .sb-nav {
-    flex-wrap: wrap;
-    padding: var(--ui-space-4) var(--ui-space-5);
-  }
-
-  /* Show burger button */
-  .sb-nav__burger {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 22px;
-    height: 16px;
-    cursor: pointer;
-  }
-
-  .sb-nav__burger span {
-    display: block;
-    height: 2px;
-    background: var(--ui-text);
-    transition: transform 0.2s, opacity 0.2s;
-  }
-
-  /* Animate to × when checked */
-  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(1) {
-    transform: translateY(7px) rotate(45deg);
-  }
-  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(2) {
-    opacity: 0;
-  }
-  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(3) {
-    transform: translateY(-7px) rotate(-45deg);
-  }
-
-  /* Nav hidden by default on mobile */
-  .sb-nav nav {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--ui-bg);
-    border-bottom: 1px solid var(--ui-border);
-    z-index: 49;
-  }
-
-  /* Show nav when checked */
-  .sb-nav__toggle-input:checked ~ nav {
-    display: block;
-  }
-
-  .sb-nav__links {
-    flex-direction: column;
-    gap: 0;
-    padding: var(--ui-space-4) var(--ui-space-5);
-  }
-
-  .sb-nav__links li { border-bottom: 1px solid var(--ui-border); }
-
-  .sb-nav__links a {
-    display: block;
-    padding: var(--ui-space-3) 0;
-    color: var(--ui-text);
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Hero
-   -------------------------------------------------------------------------- */
-.sb-hero {
-  padding: var(--ui-space-24) var(--ui-space-8) var(--ui-space-16);
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.sb-hero__eyebrow {
-  display: inline-block;
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--ui-accent);
-  margin-bottom: var(--ui-space-6);
-}
-
-.sb-hero__title {
-  font-size: clamp(3.5rem, 12vw, 11rem);
-  font-weight: 800;
-  line-height: 0.9;
-  letter-spacing: -0.05em;
-  color: var(--ui-text);
-}
-
-.sb-hero__title em {
-  font-style: normal;
-  color: var(--ui-accent);
-}
-
-.sb-hero__meta {
-  margin-top: var(--ui-space-10);
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-8);
-}
-
-.sb-hero__meta-label {
-  display: block;
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--ui-muted);
-}
-
-.sb-hero__meta strong {
-  display: block;
-  color: var(--ui-text);
-  font-weight: 600;
-  margin-top: var(--ui-space-1);
-  letter-spacing: 0.04em;
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-}
-
-/* --------------------------------------------------------------------------
-   Section scaffolding
-   -------------------------------------------------------------------------- */
-.sb-section {
-  padding: var(--ui-space-20) var(--ui-space-8);
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.sb-section__head {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: var(--ui-space-12);
-  gap: var(--ui-space-6);
-  flex-wrap: wrap;
-}
-
-.sb-section__label {
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--ui-accent);
-}
-
-.sb-section__title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--ui-text);
-}
-
-/* --------------------------------------------------------------------------
-   Works grid (12-col asymmetric layout)
-   -------------------------------------------------------------------------- */
-.sb-works {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-auto-rows: 120px;
-  gap: var(--ui-space-4);
-}
-
-.sb-work {
-  position: relative;
-  overflow: hidden;
-  background: var(--ui-surface);
-}
-
-.sb-work img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  filter: grayscale(15%) contrast(1.05);
-  transition: filter 0.4s ease, transform 0.6s ease;
-}
-
-.sb-work:hover img {
-  filter: none;
-  transform: scale(1.02);
-}
-
-.sb-work__caption {
-  position: absolute;
-  left: var(--ui-space-3);
-  bottom: var(--ui-space-3);
-  background: var(--ui-bg);
-  color: var(--ui-text);
-  padding: var(--ui-space-1) var(--ui-space-3);
-  font-size: var(--ui-text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.sb-work__caption span {
-  color: var(--ui-muted);
-  margin-left: var(--ui-space-2);
-}
-
-/* Explicit positions — gap-free brickwork layout */
-.sb-work--a { grid-column: 1 / 8;  grid-row: 1 / 5; }
-.sb-work--b { grid-column: 8 / 13; grid-row: 1 / 4; }
-.sb-work--c { grid-column: 8 / 13; grid-row: 4 / 8; }
-.sb-work--d { grid-column: 1 / 5;  grid-row: 5 / 8; }
-.sb-work--e { grid-column: 5 / 8;  grid-row: 5 / 8; }
-.sb-work--f { grid-column: 1 / 13; grid-row: 8 / 12; }
-
-@media (max-width: 720px) {
-  .sb-works { grid-auto-rows: 80px; }
-  .sb-work--a, .sb-work--b, .sb-work--c,
-  .sb-work--d, .sb-work--e, .sb-work--f {
-    grid-column: span 12;
-    grid-row: span 3;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Artist statement
-   -------------------------------------------------------------------------- */
-.sb-statement {
-  max-width: 56rem;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: var(--ui-space-12);
-}
-
-.sb-statement p {
-  font-size: var(--ui-text-xl);
-  line-height: 1.6;
-  color: var(--ui-text);
-  margin-bottom: var(--ui-space-5);
-}
-
-.sb-statement p + p {
-  color: var(--ui-muted);
-  font-size: var(--ui-text-lg);
-}
-
-.sb-statement__bio {
-  font-size: var(--ui-text-sm);
-  color: var(--ui-muted);
-  line-height: 1.7;
-}
-
-.sb-statement__bio dt {
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--ui-accent);
-  font-size: var(--ui-text-xs);
-  margin-top: var(--ui-space-4);
-}
-
-.sb-statement__bio dd { color: var(--ui-text); }
-
-@media (max-width: 720px) {
-  .sb-statement { grid-template-columns: 1fr; }
-}
-
-/* --------------------------------------------------------------------------
-   Exhibition table
-   -------------------------------------------------------------------------- */
-.sb-exhibitions {
-  list-style: none;
-  border-top: 1px solid var(--ui-border);
-}
-
-.sb-exhibition {
-  display: grid;
-  grid-template-columns: 80px 1fr 1fr 120px;
-  gap: var(--ui-space-6);
-  padding: var(--ui-space-5) 0;
-  border-bottom: 1px solid var(--ui-border);
-  align-items: baseline;
-}
-
-.sb-exhibition__year {
-  font-weight: 700;
-  color: var(--ui-accent);
-  font-variant-numeric: tabular-nums;
-}
-
-.sb-exhibition__title { color: var(--ui-text); font-weight: 500; }
-.sb-exhibition__venue { color: var(--ui-muted); }
-
-.sb-exhibition__tag {
-  font-size: var(--ui-text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--ui-muted);
-  text-align: right;
-}
-
-.sb-exhibition__tag--solo { color: var(--ui-accent); }
-
-@media (max-width: 720px) {
-  .sb-exhibition { grid-template-columns: 60px 1fr; }
-  .sb-exhibition__venue,
-  .sb-exhibition__tag { grid-column: 2; text-align: left; }
-}
-
-/* --------------------------------------------------------------------------
-   Press list with dot separator
-   -------------------------------------------------------------------------- */
-.sb-press {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-8);
-  font-size: var(--ui-text-lg);
-  font-weight: 500;
-  color: var(--ui-muted);
-}
-
-.sb-press span { white-space: nowrap; }
-
-.sb-press span + span::before {
-  content: "\00b7";
-  margin-right: var(--ui-space-8);
-  color: var(--ui-accent);
-}
-
-@media (max-width: 600px) {
-  .sb-press {
-    flex-direction: column;
-    gap: var(--ui-space-3);
-    font-size: var(--ui-text-base);
-  }
-
-  .sb-press span + span::before { display: none; }
-}
-
-/* --------------------------------------------------------------------------
-   Contact
-   -------------------------------------------------------------------------- */
-.sb-contact {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ui-space-12);
-  align-items: start;
-}
-
-.sb-contact h3 {
-  font-size: var(--ui-text-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--ui-accent);
-  margin-bottom: var(--ui-space-4);
-}
-
-.sb-contact p,
-.sb-contact a {
-  font-size: var(--ui-text-lg);
-  color: var(--ui-text);
-  line-height: 1.6;
-  text-decoration: none;
-  display: block;
-}
-
-.sb-contact a:hover { color: var(--ui-accent); }
-
-@media (max-width: 720px) {
-  .sb-contact { grid-template-columns: 1fr; gap: var(--ui-space-8); }
-}
-
-/* --------------------------------------------------------------------------
-   Footer
-   -------------------------------------------------------------------------- */
-.sb-foot {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--ui-space-6) var(--ui-space-8);
-  font-size: var(--ui-text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--ui-muted);
-  border-top: 1px solid var(--ui-border);
-}
-
-@media (max-width: 600px) {
-  .sb-foot {
-    flex-direction: column;
-    gap: var(--ui-space-2);
-    padding: var(--ui-space-5);
-  }
-}
-
-.sb-foot__link {
-  color: var(--ui-muted);
-  text-decoration: none;
-}
-
-.sb-foot__link:hover { color: var(--ui-text); }