Upload src/pages/gate.css with huggingface_hub

src/pages/gate.css

@@ -0,0 +1,420 @@
+/*
+ * BRIDGE Modul E — gate, "Moss & Ember Press" system
+ * Scoped strictly under .gate; global app tokens untouched.
+ *
+ * Token source (user-specified palette):
+ *   moss ramp  #394319 #637330 #8CA14A #ABBB77 #C7D0A9 #D6DCC1 #E4E8D9
+ *   forest ink #13301E
+ *   ember      #C66306 (vibrant accent)
+ * Text-contrast notes (verified):
+ *   #13301E on #E4E8D9 ≈ 11.5:1 (AAA) · #394319 on #E4E8D9 ≈ 8.5:1 (AAA)
+ *   #9C4A03 on #E4E8D9 ≈ 5.0:1 (AA small text) · #C66306 reserved for
+ *   fills / focus / large marks · white on #B45A05 ≈ 4.8:1 (AA)
+ */
+
+.gate {
+  --g-paper: #e4e8d9;
+  --g-mist: #d6dcc1;
+  --g-sage: #c7d0a9;
+  --g-moss-l: #abbb77;
+  --g-moss: #8ca14a;
+  --g-olive: #637330;
+  --g-olive-d: #394319;
+  --g-ink: #13301e;
+  --g-ember: #c66306;
+  --g-ember-press: #b45a05;
+  --g-ember-text: #9c4a03;
+  --g-card: color-mix(in srgb, #e4e8d9 52%, #ffffff 48%);
+
+  --g-pad: 30px;
+
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 24px;
+  background:
+    radial-gradient(52rem 30rem at 86% -10%, color-mix(in srgb, var(--g-ember) 13%, transparent), transparent 62%),
+    radial-gradient(46rem 32rem at -10% 108%, color-mix(in srgb, var(--g-moss) 20%, transparent), transparent 58%),
+    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--g-sage) 40%, transparent) 31px 32px),
+    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--g-sage) 40%, transparent) 31px 32px),
+    linear-gradient(170deg, var(--g-paper) 0%, var(--g-mist) 100%);
+  color: var(--g-ink);
+  font-family: var(--font-sans);
+}
+
+.gate ::selection {
+  background: var(--g-moss);
+  color: var(--g-paper);
+}
+
+/* ---------------------------------- screen-reader-only h1 ---------------------------------- */
+
+.gate-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------------------------------- desk trim ---------------------------------- */
+
+.gate-cropmark {
+  position: fixed;
+  width: 18px;
+  height: 18px;
+  pointer-events: none;
+  opacity: 0.55;
+}
+
+.gate-cropmark.tl {
+  top: 16px;
+  left: 16px;
+  border-top: 1.5px solid var(--g-olive);
+  border-left: 1.5px solid var(--g-olive);
+}
+
+.gate-cropmark.tr {
+  top: 16px;
+  right: 16px;
+  border-top: 1.5px solid var(--g-olive);
+  border-right: 1.5px solid var(--g-olive);
+}
+
+.gate-cropmark.bl {
+  bottom: 16px;
+  left: 16px;
+  border-bottom: 1.5px solid var(--g-olive);
+  border-left: 1.5px solid var(--g-olive);
+}
+
+.gate-cropmark.br {
+  bottom: 16px;
+  right: 16px;
+  border-bottom: 1.5px solid var(--g-olive);
+  border-right: 1.5px solid var(--g-olive);
+}
+
+/* ---------------------------------- the slip ---------------------------------- */
+
+.gate-formwrap {
+  position: relative;
+  width: min(430px, 100%);
+}
+
+.gate-card {
+  position: relative;
+  background: var(--g-card);
+  border: 1px solid color-mix(in srgb, var(--g-sage) 80%, transparent);
+  border-radius: 10px;
+  padding: var(--g-pad);
+  box-shadow:
+    0 1px 0 rgba(19, 48, 30, 0.04),
+    0 24px 48px -28px rgba(19, 48, 30, 0.35);
+}
+
+/* ---------------------------------- fields ---------------------------------- */
+
+.gate-field {
+  margin-bottom: 20px;
+}
+
+.gate-field label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--g-olive);
+  margin-bottom: 4px;
+}
+
+.gate-field input,
+.gate-field select {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-bottom: 1.5px solid color-mix(in srgb, var(--g-olive) 55%, transparent);
+  border-radius: 0;
+  padding: 8px 1px;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  color: var(--g-ink);
+  caret-color: var(--g-ink);
+}
+
+.gate-field select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2313301e' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 2px center;
+  padding-right: 24px;
+  cursor: pointer;
+}
+
+.gate-field input.gate-key-input {
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+}
+
+.gate-field input::placeholder {
+  color: color-mix(in srgb, var(--g-olive) 75%, transparent);
+}
+
+.gate-field input:focus,
+.gate-field select:focus {
+  outline: none;
+  border-bottom-color: var(--g-ember);
+  box-shadow: 0 1.5px 0 var(--g-ember);
+}
+
+.gate-field input:disabled,
+.gate-field select:disabled {
+  opacity: 0.55;
+}
+
+.gate-key-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gate-key-row input {
+  flex: 1;
+  min-width: 0;
+}
+
+.gate-peek {
+  flex: none;
+  border: 0;
+  background: none;
+  padding: 2px 0;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  color: var(--g-olive);
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+}
+
+.gate-peek:hover:not(:disabled) {
+  color: var(--g-ink);
+  border-bottom-color: color-mix(in srgb, var(--g-olive) 70%, transparent);
+}
+
+/* ---------------------------------- actions ---------------------------------- */
+
+.gate-cta {
+  width: 100%;
+  border: 0;
+  border-radius: 7px;
+  padding: 13px 16px;
+  background: var(--g-ink);
+  color: var(--g-paper);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
+}
+
+.gate-cta:hover:not(:disabled) {
+  background: var(--g-olive-d);
+  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--g-ink) 70%, transparent);
+}
+
+.gate-cta:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.gate-cta:disabled {
+  cursor: default;
+  opacity: 0.75;
+}
+
+.gate-cta[data-phase="cleared"] {
+  background: var(--g-ember-press);
+}
+
+.gate-demo {
+  width: 100%;
+  border: 1.5px solid var(--g-ember);
+  border-radius: 7px;
+  padding: 12px 16px;
+  background: transparent;
+  color: var(--g-ember-text);
+  font-family: var(--font-sans);
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease;
+}
+
+.gate-demo:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--g-ember) 9%, transparent);
+  border-color: var(--g-ember-press);
+}
+
+.gate-demo:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.gate-or {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 18px 0;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: var(--g-olive);
+}
+
+.gate-or span {
+  flex: 1;
+  height: 1px;
+  background: color-mix(in srgb, var(--g-olive) 28%, transparent);
+}
+
+.gate-switch {
+  display: block;
+  margin: 16px auto 0;
+  border: 0;
+  background: none;
+  padding: 2px 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  color: var(--g-olive);
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  transition: color 140ms ease;
+}
+
+.gate-switch:hover:not(:disabled) {
+  color: var(--g-ember-text);
+  border-bottom-color: color-mix(in srgb, var(--g-ember-text) 60%, transparent);
+}
+
+.gate-switch:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* ---------------------------------- error ---------------------------------- */
+
+.gate-error {
+  margin: 0 0 18px;
+  padding-left: 10px;
+  border-left: 2.5px solid var(--g-ember);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.6;
+  color: var(--g-ember-text);
+}
+
+/* ---------------------------------- clearance stamp ---------------------------------- */
+
+.gate-stamp {
+  position: absolute;
+  top: -30px;
+  right: -20px;
+  width: 130px;
+  height: 130px;
+  pointer-events: none;
+  color: var(--g-ember);
+  transform: rotate(-12deg);
+  mix-blend-mode: multiply;
+  z-index: 2;
+}
+
+/* ---------------------------------- focus + motion ---------------------------------- */
+
+.gate button:focus-visible {
+  outline: 2px solid var(--g-ember);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .gate-card {
+    animation: gate-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .gate-cropmark {
+    animation: gate-fade 900ms ease 200ms both;
+  }
+
+  .gate-stamp {
+    animation: gate-stamp-in 560ms cubic-bezier(0.16, 1.3, 0.3, 1) both;
+  }
+}
+
+@keyframes gate-rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gate-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.55;
+  }
+}
+
+@keyframes gate-stamp-in {
+  0% {
+    opacity: 0;
+    transform: scale(2.1) rotate(-22deg);
+  }
+  55% {
+    opacity: 1;
+    transform: scale(0.95) rotate(-10deg);
+  }
+  75% {
+    transform: scale(1.04) rotate(-13deg);
+  }
+  100% {
+    transform: scale(1) rotate(-12deg);
+  }
+}
+
+/* ---------------------------------- responsive ---------------------------------- */
+
+@media (max-width: 560px) {
+  .gate {
+    padding: 20px 16px;
+  }
+
+  .gate-card {
+    --g-pad: 22px;
+  }
+
+  .gate-stamp {
+    width: 102px;
+    height: 102px;
+    top: -22px;
+    right: -10px;
+  }
+
+  .gate-cropmark {
+    display: none;
+  }
+}