themes-noir/assets/style.css

/* ============================================================
   Noir Theme — Silver-on-black photography
   Custom utility CSS injected via CSSManifest.InputCSSAppend.
   ============================================================ */

/* --- Typography slots ---------------------------------------- */
/* Body & page typography flow through the theme font variables.
   Fallback stacks reflect the spec's intended faces (Tenor Sans,
   Inter, JetBrains Mono) without hardcoding the family name. */

.noir-page {
  font-family: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.noir-display {
  font-family: var(--font-heading, "Tenor Sans", Georgia, serif);
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* --- .tracked-mono ------------------------------------------- */
/* 10px JetBrains Mono, +60 tracking equivalent (0.18em), uppercase.
   Used for captions, frame numbers, and the caption strip. */

.tracked-mono {
  font-family: var(--font-mono, "JetBrains Mono", "Consolas", "SFMono-Regular", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.tracked-mono-sm {
  font-family: var(--font-mono, "JetBrains Mono", "Consolas", "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --- .bleed -------------------------------------------------- */
/* Edge-to-edge utility — breaks out of a max-width container. */

.bleed {
  width: 100vw;
  margin-left: calc((100vw - 100%) / 2 * -1);
  margin-right: calc((100vw - 100%) / 2 * -1);
}

/* --- .hairline ----------------------------------------------- */
/* 1px almost-invisible border using the border token at 40% alpha. */

.hairline {
  border: 1px solid hsl(var(--border) / 0.4);
}

.hairline-t { border-top: 1px solid hsl(var(--border) / 0.4); }
.hairline-b { border-bottom: 1px solid hsl(var(--border) / 0.4); }

/* --- Surface tokens used by overrides ------------------------ */

.noir-surface {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.noir-card {
  background-color: transparent;
  border: 1px solid hsl(var(--border) / 0.4);
}

/* Buttons render as hairline outlines that invert on hover.
   Override block uses these classes directly. */

.noir-btn {
  display: inline-block;
  background-color: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--foreground));
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono, "JetBrains Mono", "Consolas", "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

.noir-btn:hover,
.noir-btn:focus-visible {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.noir-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* --- Caption strip ------------------------------------------- */

.noir-caption-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1.5rem;
  border-top: 1px solid hsl(var(--border) / 0.4);
  border-bottom: 1px solid hsl(var(--border) / 0.4);
  background-color: hsl(var(--background));
  color: hsl(var(--mutedForeground));
}

/* --- Contact sheet sprocket motif ---------------------------- */

.noir-sprocket {
  position: relative;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.4);
  padding: 1.25rem 0.75rem 0.75rem;
}

.noir-sprocket::before,
.noir-sprocket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5rem;
  /* Sprocket holes drawn as repeating radial-gradient circles
     using the muted foreground token at low alpha. */
  background-image: radial-gradient(
    circle,
    hsl(var(--mutedForeground) / 0.85) 0,
    hsl(var(--mutedForeground) / 0.85) 25%,
    transparent 27%,
    transparent 100%
  );
  background-size: 1rem 0.5rem;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0.35;
}

.noir-sprocket::before { top: 0; }
.noir-sprocket::after { bottom: 0; }

.noir-frame-number {
  position: absolute;
  top: 0.4rem;
  left: 0.75rem;
}

/* --- Lightbox overlay ---------------------------------------- */

[data-noir-lightbox] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 9999;
  background-color: hsl(var(--background));
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  animation: noirFadeIn 180ms ease forwards;
}

[data-noir-lightbox][aria-hidden="false"] {
  display: flex;
}

[data-noir-lightbox] img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

[data-noir-lightbox] .noir-lightbox-caption {
  margin-top: 1rem;
  color: hsl(var(--mutedForeground));
}

[data-noir-lightbox] .noir-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

@keyframes noirFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Sticky case-study meta rail ----------------------------- */

.noir-meta-rail {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  color: hsl(var(--mutedForeground));
}

/* --- Image full-bleed override ------------------------------- */

.noir-figure {
  margin: 0;
  display: block;
}

.noir-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.noir-figure figcaption {
  margin-top: 0.5rem;
  color: hsl(var(--mutedForeground));
}

/* --- Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  [data-noir-lightbox] { animation: none; }
}