stagecraft 0.1.0

package/themes/phosphor/base.css

@@ -0,0 +1,511 @@
+/* Stagecraft — Phosphor theme: engine + base styles. */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--body);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+body.idle { cursor: none; }
+
+/* subtle ambient gradient */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(ellipse at center, rgba(255,255,255,0.025) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* film grain */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
+  pointer-events: none;
+  z-index: 1000;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+}
+
+#stage {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+.slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(2rem, 6vw, 6rem);
+  opacity: 0;
+  pointer-events: none;
+}
+.slide.current { opacity: 1; pointer-events: auto; }
+
+/* ---------- Typography ---------- */
+.hero {
+  font-size: clamp(2.5rem, 7vw, 6.5rem);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  max-width: 22ch;
+  text-align: center;
+}
+.hero-xl {
+  font-size: clamp(3rem, 9vw, 8rem);
+  font-weight: 500;
+  line-height: 1.0;
+  letter-spacing: -0.03em;
+  max-width: 18ch;
+  text-align: center;
+}
+.pre-label {
+  font-size: 0.85rem;
+  font-weight: 400;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-bottom: 2.5rem;
+}
+.pre-label .dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  background: var(--accent);
+  margin-right: 0.7rem;
+  vertical-align: middle;
+  animation: pulse 2s ease-in-out infinite;
+}
+.pre-label.blue .dot { background: var(--blue); }
+
+.sub {
+  margin-top: 2.5rem;
+  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  text-align: center;
+}
+.sub strong { color: var(--fg); font-weight: 500; }
+
+.accent { color: var(--accent); }
+.accent-blue { color: var(--blue); }
+.dim { color: var(--dim); }
+
+/* Caret */
+.caret {
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  background: var(--accent);
+  margin-left: 0.15em;
+  vertical-align: -0.12em;
+  animation: blink 1.1s steps(2, end) infinite;
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+@keyframes blink { 50% { opacity: 0; } }
+@keyframes pulse { 50% { opacity: 0.4; } }
+
+/* ---------- Chrome ---------- */
+.ui {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 100;
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-family: var(--mono);
+}
+.ui-brand { position: absolute; top: 1.8rem; left: 2.2rem; }
+.ui-brand .br-accent { color: var(--fg); font-weight: 500; }
+.ui-title {
+  position: absolute;
+  top: 1.8rem; right: 2.2rem;
+  text-align: right;
+  max-width: 40ch;
+}
+.ui-counter {
+  position: absolute;
+  bottom: 1.8rem; left: 2.2rem;
+  color: var(--fg);
+  font-weight: 500;
+}
+.ui-counter .slash { color: var(--dim); margin: 0 0.4em; }
+.ui-counter .total { color: var(--dim); }
+.ui-dots {
+  position: absolute;
+  bottom: 1.8rem; right: 2.2rem;
+  display: flex;
+  gap: 0.7rem;
+  align-items: center;
+}
+.ui-dots .dot {
+  width: 6px; height: 6px;
+  background: var(--dim-2);
+  transition: background 300ms, box-shadow 300ms, transform 300ms;
+}
+.ui-dots .dot.active {
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent-glow);
+  transform: scale(1.15);
+}
+.ui-dots .dot.past { background: var(--dim); }
+
+.ui-hint {
+  position: absolute;
+  bottom: 1.8rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.68rem;
+  letter-spacing: 0.25em;
+  color: var(--dim-2);
+  opacity: 0;
+  transition: opacity 300ms;
+}
+.ui-hint.visible { opacity: 1; }
+
+.ui-brand, .ui-title, .ui-counter, .ui-dots {
+  opacity: 0;
+  transition: opacity 700ms ease-out;
+}
+body.armed .ui-brand,
+body.armed .ui-title,
+body.armed .ui-counter,
+body.armed .ui-dots { opacity: 1; }
+
+/* ---------- Welcome ---------- */
+.welcome {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 500ms ease-out;
+}
+.welcome.hidden { opacity: 0; pointer-events: none; }
+.welcome .key-prompt {
+  font-size: 0.85rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-bottom: 1rem;
+}
+.welcome .key-prompt .accent { color: var(--accent); }
+.welcome h1 {
+  font-size: clamp(1.2rem, 2vw, 1.6rem);
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  color: var(--fg);
+  margin-bottom: 0.4rem;
+}
+.welcome .by {
+  font-size: 0.85rem;
+  color: var(--dim);
+  letter-spacing: 0.15em;
+}
+
+/* ---------- Stagger ---------- */
+.stagger > * {
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.stagger > *.in { opacity: 1; transform: translateY(0); }
+
+/* ---------- Storyboard ---------- */
+.overview {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 300;
+  overflow-y: auto;
+  overflow-x: hidden;
+  opacity: 0;
+  transition: opacity 250ms ease-out;
+  padding: 5rem 2rem 2rem;
+}
+.overview.in { opacity: 1; }
+.overview-header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  padding: 1.3rem 2rem;
+  background: rgba(10,10,10,0.88);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--dim-2);
+  z-index: 310;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.72rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-family: var(--mono);
+}
+.overview-header .left strong { color: var(--fg); font-weight: 500; }
+.overview-header .accent { color: var(--accent); }
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.2rem;
+  max-width: 1700px;
+  margin: 0 auto;
+}
+.tile {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--dim-2);
+  cursor: pointer;
+  transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
+}
+.tile:hover { border-color: var(--accent); transform: translateY(-3px); }
+.tile.current {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent), 0 0 28px var(--accent-glow);
+}
+.tile-scaler {
+  position: absolute;
+  top: 0; left: 0;
+  transform-origin: top left;
+  pointer-events: none;
+}
+.tile-scaler > .slide {
+  position: absolute !important;
+  inset: 0 !important;
+  opacity: 1 !important;
+  transform: none !important;
+  transition: none !important;
+}
+.tile-num {
+  position: absolute;
+  top: 0.5rem; left: 0.7rem;
+  font-size: 0.65rem;
+  color: var(--dim);
+  letter-spacing: 0.25em;
+  z-index: 4;
+  font-weight: 500;
+  background: rgba(10,10,10,0.7);
+  padding: 0.2rem 0.5rem;
+  font-family: var(--mono);
+}
+.tile.current .tile-num { color: var(--accent); }
+.tile-label {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  background: linear-gradient(to top, rgba(10,10,10,0.95) 40%, rgba(10,10,10,0));
+  color: var(--fg);
+  font-size: 0.68rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 1.6rem 0.8rem 0.6rem;
+  z-index: 4;
+  pointer-events: none;
+  font-family: var(--mono);
+}
+
+/* responsive */
+@media (max-width: 700px) {
+  .ui-hint { display: none; }
+}
+
+/* a11y */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
+/* Material Symbols Outlined — for components that want icons */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
+}
+
+/* Edit-mode body marker (subtle ring) */
+body.edit-mode #stage::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  border: 2px solid var(--accent);
+  pointer-events: none;
+  z-index: 99;
+  box-shadow: inset 0 0 30px var(--accent-soft);
+  opacity: 0.3;
+}
+
+/* ----------------------------------------------------------------------------
+ * Presenter view (multi-monitor / second window)
+ *
+ * Activated via ?mode=presenter on the URL. The engine builds a different
+ * chrome and renders the current slide into a half-screen pane plus a
+ * thumbnail of the next slide, a notes panel, and a timer. This window
+ * is intended to live on the laptop while the main window goes on the beamer.
+ * -------------------------------------------------------------------------- */
+body.presenter-mode {
+  overflow: auto;
+  background: var(--bg);
+}
+body.presenter-mode::before,
+body.presenter-mode::after { display: none; }    /* no film grain / ambient gradient */
+
+.presenter-shell {
+  display: grid;
+  grid-template-rows: 1fr auto auto;
+  height: 100vh;
+  gap: 0.5rem;
+  padding: 0.7rem;
+}
+.presenter-top {
+  display: grid;
+  grid-template-columns: 1.55fr 1fr;
+  gap: 0.7rem;
+  min-height: 0;        /* allow children to overflow:hidden */
+}
+.presenter-pane {
+  position: relative;
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  overflow: hidden;
+}
+.presenter-pane-label {
+  position: absolute;
+  top: 0.5rem; left: 0.6rem;
+  z-index: 10;
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-family: var(--mono);
+  background: rgba(10, 10, 10, 0.75);
+  padding: 0.15rem 0.45rem;
+}
+.presenter-current .presenter-pane-label {
+  color: var(--accent);
+}
+.presenter-pane-stage {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+/* Slides rendered into a presenter pane need to be size-constrained to the
+ * pane (not viewport). They retain their original layout via flex centering
+ * and clamp() typography. */
+.presenter-pane .slide {
+  position: absolute !important;
+  inset: 0 !important;
+  opacity: 1 !important;
+  transform: none !important;
+  transition: none !important;
+  pointer-events: none;
+}
+.presenter-end {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dim);
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+}
+
+/* Meta strip: timer + clock + reset */
+.presenter-meta {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 0.6rem 1rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  font-family: var(--mono);
+}
+.presenter-timer {
+  font-size: clamp(1.4rem, 2.5vw, 2rem);
+  font-weight: 500;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.04em;
+}
+.presenter-clock {
+  font-size: 0.9rem;
+  color: var(--dim);
+  letter-spacing: 0.15em;
+  text-align: right;
+}
+.presenter-timer-reset {
+  background: transparent;
+  color: var(--dim);
+  border: 1px solid var(--dim-2);
+  font-family: inherit;
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 0.35rem 0.7rem;
+  cursor: pointer;
+}
+.presenter-timer-reset:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* Notes panel */
+.presenter-notes {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  padding: 0.8rem 1rem;
+  max-height: 30vh;
+  overflow-y: auto;
+}
+.presenter-notes-label {
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-family: var(--mono);
+  margin-bottom: 0.5rem;
+}
+.presenter-notes-body {
+  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
+  line-height: 1.5;
+  color: var(--fg);
+  white-space: pre-wrap;
+}
+.presenter-notes-body.empty {
+  color: var(--dim);
+  font-style: italic;
+}