@supersoniks/concorde 5.0.5 → 5.1.1

package/src/docs/tailwind/css/home/sections.css

@@ -0,0 +1,416 @@
+/* Home sections below the hero, each with its own composition */
+
+/* MANIFESTO — one long statement, run wide across the page */
+/* a dark band glued under the hero: the orange half meets it edge to edge */
+.manifesto {
+  margin-inline: calc(-1 * var(--page-margin));
+  padding: clamp(3rem, 1.5rem + 4vw, 6rem) var(--page-margin);
+  background: var(--docs-night);
+  color: var(--docs-night-ink);
+}
+.manifesto-text {
+  max-width: 64rem;
+  margin: 0;
+  font-family: var(--sc-headings-font-family);
+  font-size: clamp(1.2rem, 0.85rem + 1.75vw, 2.25rem);
+  font-weight: 600;
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+
+/* INDEX — the components as a wall of names; filters set like [x] checkboxes */
+.index {
+  padding-top: var(--section-gap);
+}
+.index-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1.5rem 2rem;
+}
+.index-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.5rem;
+}
+.index-filter {
+  font-weight: 600;
+}
+.index-filter[aria-pressed="false"] {
+  opacity: 0.55;
+}
+/* the cross is always set, only hidden, so toggling never shifts the label */
+.index-filter[aria-pressed="false"] .index-filter-mark {
+  opacity: 0;
+}
+.index-wall {
+  margin: 3rem 0 0;
+  font-family: var(--sc-headings-font-family);
+  font-size: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+}
+/* no separators: each name is followed by a wide blank */
+.wall-item {
+  display: inline-block;
+  margin-right: 0.85em;
+  white-space: nowrap;
+}
+.wall-name {
+  transition: color 0.2s ease;
+}
+.wall-name:hover,
+.wall-name.is-focus {
+  color: var(--docs-red);
+}
+/* stays in view while the eye runs along the wall */
+.index-caption {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem 1.25rem;
+  margin-top: 2.5rem;
+  padding: 1rem 0;
+  background: var(--sc-base);
+}
+.index-caption-tag {
+  color: var(--docs-green-ink);
+  font-weight: 600;
+}
+.index-caption-all {
+  margin-left: auto;
+}
+
+/* INSTRUMENTS — a fixed output on a black field, operated by the controls beside it */
+.instruments {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  margin: var(--section-gap) calc(-1 * var(--page-margin)) 0;
+}
+.instr-title {
+  padding: 0 var(--page-margin) 2rem;
+}
+.instr-field {
+  display: grid;
+  place-items: center;
+  padding: 2rem var(--page-margin);
+  background: var(--docs-green-deep);
+}
+/* graph paper on the green field, like the orange one: fine cells, every fourth line heavier */
+.instr-field {
+  isolation: isolate;
+}
+.instr-field::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: var(--docs-night-ink);
+  opacity: 0.16;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='%23000'%3E%3Crect width='128' height='2'/%3E%3Crect width='2' height='128'/%3E%3Cg opacity='.45'%3E%3Crect y='32' width='128' height='1'/%3E%3Crect y='64' width='128' height='1'/%3E%3Crect y='96' width='128' height='1'/%3E%3Crect x='32' width='1' height='128'/%3E%3Crect x='64' width='1' height='128'/%3E%3Crect x='96' width='1' height='128'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 7.5rem 7.5rem repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='%23000'%3E%3Crect width='128' height='2'/%3E%3Crect width='2' height='128'/%3E%3Cg opacity='.45'%3E%3Crect y='32' width='128' height='1'/%3E%3Crect y='64' width='128' height='1'/%3E%3Crect y='96' width='128' height='1'/%3E%3Crect x='32' width='1' height='128'/%3E%3Crect x='64' width='1' height='128'/%3E%3Crect x='96' width='1' height='128'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 7.5rem 7.5rem repeat;
+  pointer-events: none;
+}
+@media (max-width: 1023px) {
+  .instr-field {
+    position: relative;
+  }
+}
+/* the output: a retro departures board built from sonic-table, badges and a button */
+.instr-output {
+  display: grid;
+  gap: 1.25rem;
+  width: min(34rem, 100%);
+  padding: 1.75rem;
+  background: var(--sc-base);
+  color: var(--sc-base-content);
+  font-family: var(--sc-font-family-base);
+  transition:
+    background-color 0.35s ease,
+    color 0.35s ease;
+}
+.board-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+}
+.board-title {
+  font-family: var(--sc-headings-font-family);
+  font-size: var(--step-lead);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.board-airport,
+.board-label,
+.board-note {
+  font-size: var(--step-small);
+}
+.board-passenger {
+  display: grid;
+  gap: 0.15rem;
+  padding: 1rem 1.25rem;
+  background: var(--sc-base-100);
+}
+.board-name {
+  font-family: var(--sc-headings-font-family);
+  font-size: var(--step-head);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  overflow-wrap: anywhere;
+}
+.board-table {
+  font-variant-numeric: tabular-nums;
+}
+.board-mine {
+  background: var(--sc-base-50);
+  font-weight: 600;
+}
+@media (max-width: 639px) {
+  .instr-output {
+    padding: 1.25rem;
+  }
+  .board-name {
+    font-size: var(--step-lead);
+  }
+  .board-table {
+    font-size: var(--step-small);
+  }
+  /* time column dropped on phones: flight, destination, gate and status still fit */
+  .board-table sonic-tr > :first-child {
+    display: none;
+  }
+}
+.board-table sonic-td,
+.board-table sonic-th {
+  white-space: nowrap;
+}
+.board-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+}
+.instr-blocks {
+  padding: 1rem var(--page-margin) 0;
+}
+.instr-block {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+  max-width: 34rem;
+  padding-block: 2rem;
+}
+/* segmented controls scroll sideways rather than run past the margin on phones */
+.instr-block sonic-group {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.instr-claim {
+  margin: 0;
+  font-size: var(--step-lead);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+.instr-text {
+  margin: 0;
+}
+.instr-code {
+  margin: 0 !important;
+}
+.host-snippets {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+.host-snippet {
+  grid-area: 1 / 1;
+  min-width: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s ease,
+    visibility 0s 0.3s;
+}
+.host-snippet.is-active {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.3s ease;
+}
+@media (min-width: 1024px) {
+  .instruments {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+  /* glued under the header's black bar while the controls scroll beside it */
+  .instr-field {
+    position: sticky;
+    top: var(--docs-header-h, 4.4rem);
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    height: calc(100svh - var(--docs-header-h, 4.4rem));
+    align-self: start;
+  }
+  .instr-title {
+    grid-column: 2;
+    grid-row: 1;
+    padding: 4.5rem var(--page-margin) 0 clamp(2rem, 5vw, 5rem);
+  }
+  .instr-blocks {
+    grid-column: 2;
+    grid-row: 2;
+    padding: 0 var(--page-margin) 4.5rem clamp(2rem, 5vw, 5rem);
+  }
+  .instr-block {
+    padding-block: 14vh;
+  }
+}
+
+/* STORY — the 1969 archive photograph, then the letter */
+.story {
+  display: grid;
+  gap: clamp(3rem, 6vw, 6rem);
+  padding-top: var(--section-gap);
+}
+.story-figure {
+  margin: 0;
+}
+.story-figure {
+  margin-inline: calc(-1 * var(--page-margin));
+}
+/* kept in colour: the slide's yellow 2CV and red cheatline are the point */
+.story img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  object-position: 50% 62%;
+}
+.story-figure img {
+  height: clamp(20rem, 48vw, 46rem);
+}
+.letter {
+  display: grid;
+  gap: 2rem;
+}
+.letter-body p {
+  max-width: 38rem;
+  margin: 0 0 1.1em;
+  line-height: 1.55;
+}
+.letter-body .letter-sign {
+  margin-top: 1.75rem;
+  font-size: var(--step-lead);
+  font-weight: 600;
+}
+@media (min-width: 1024px) {
+  .letter {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 4rem;
+  }
+}
+
+/* TAKEOFF — a plain two-column close: words and command left, the flypast right,
+   touching the photograph above and running off the right edge */
+.takeoff {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+.takeoff-copy {
+  padding-top: var(--section-gap);
+}
+.takeoff-title {
+  margin: 0;
+  font-family: var(--sc-headings-font-family);
+  /* sized to keep "Take your project" on one line in its 7/12 column */
+  font-size: clamp(2.5rem, 0.5rem + 4.3vw, 5.25rem);
+  font-weight: 800;
+  line-height: 0.88;
+  letter-spacing: -0.05em;
+}
+.takeoff-lead {
+  max-width: 34rem;
+  margin: 1.75rem 0 0;
+}
+.takeoff-code {
+  max-width: 34rem;
+  margin-top: 1.25rem;
+}
+.takeoff-command {
+  margin: 0 !important;
+}
+/* portrait footage pillarboxed in 16:9: a centred 3:4 crop, zoomed past the frame edges,
+   darkened into the page so the white sky becomes paper and only the aircraft remain */
+.takeoff-figure {
+  margin: 3rem calc(-1 * var(--page-margin)) 0;
+  overflow: hidden;
+  /* blend against the page's own paper, not against a transparent ancestor */
+  isolation: isolate;
+  background: var(--sc-base);
+}
+.takeoff-figure video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  transform: scale(1.18);
+  filter: grayscale(1) brightness(1.45) contrast(1.5);
+  mix-blend-mode: darken;
+}
+/* dark theme: the footage as it is, no filter and no blend */
+[data-concorde-theme="dark"] .takeoff-figure video {
+  filter: none;
+  mix-blend-mode: normal;
+}
+@media (min-width: 1024px) {
+  .takeoff {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    gap: clamp(2rem, 5vw, 5rem);
+    align-items: start;
+  }
+  .takeoff-figure {
+    position: sticky;
+    top: var(--docs-header-h, 4.4rem);
+    margin: 0 calc(-1 * var(--page-margin)) 0 0;
+  }
+}
+
+/* FOOTER — one quiet line, then the picture credits */
+.home-footer {
+  padding: var(--section-gap) 0 2rem;
+  font-size: var(--step-small);
+}
+.footer-line {
+  display: grid;
+  gap: 0.5rem;
+}
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  font-weight: 600;
+}
+.credits {
+  max-width: 72rem;
+  margin: 2rem 0 0;
+}
+.credits a {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+@media (min-width: 768px) {
+  .footer-line {
+    grid-template-columns: 1fr auto 1fr;
+    align-items: baseline;
+    gap: 1.5rem;
+  }
+  .footer-end {
+    justify-self: end;
+  }
+}

package/src/docs/tailwind/css/tailwind.css

@@ -1,188 +1,10 @@
+/*
+ * Shared sheet: the page imports it (via docs.css) and every docs component
+ * injects it in its own scope (`tailwind/index.ts`). Keep it to Tailwind and
+ * rules that make sense inside a component.
+ */
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-
-@font-face {
-  font-family: "ClashGrotesk-Variable";
-  src:
-    url("/fonts/ClashGrotesk-Variable.woff2") format("woff2"),
-    url("/fonts/ClashGrotesk-Variable.woff") format("woff"),
-    url("/fonts/ClashGrotesk-Variable.ttf") format("truetype");
-  font-weight: 200 700;
-  font-display: swap;
-  font-style: normal;
-}
-
-:root {
-  --sc-headings-font-family: "ClashGrotesk-Variable", sans-serif;
-  --sc-font-family-base: "ClashGrotesk-Variable", sans-serif;
-  --sc-headings-font-weight: 400;
-  --sc-rounded: 0.5rem;
-  --sc-border-width: max(2px, 0.18rem);
-}
-
-/*duotone*/
-/* :root{
-  --sc-base: yellow;
-  --sc-base-content: red;
-  --sc-primary: blue;
-  --sc-primary-content: white;
-} */
-
-[data-concorde-theme="light"] {
-  --sc-base: #fffcf0;
-  --sc-base-content: #111111;
-  --sc-primary: #111111;
-  --sc-primary-content: #fffcf0;
-  --sc-base-50: #f4f1e6;
-  --sc-base-100: #e9e6dc;
-  --sc-base-200: #ceccc3;
-  --sc-base-300: #bcbab1;
-  --sc-base-400: #96948e;
-  --sc-base-500: #7d7c77;
-  --sc-base-600: #5a5956;
-  --sc-base-700: #393937;
-  --sc-base-800: #252524;
-  --sc-base-900: #111111;
-  --sc-info: #3b82f6;
-  --sc-info-content: #ffffff;
-  --sc-success: #10b981;
-  --sc-success-content: #ffffff;
-  --sc-warning: #fb923c;
-  --sc-warning-content: #111827;
-  --sc-danger: #dc2626;
-  --sc-danger-content: #ffffff;
-}
-
-[data-concorde-theme="dark"] {
-  --sc-base: #0a0a0a;
-  --sc-base-content: #dadad9;
-  --sc-primary: #ffef8a;
-  --sc-primary-content: #111827;
-  --sc-base-50: #141414;
-  --sc-base-100: #1c1c1c;
-  --sc-base-200: #2f2f2f;
-  --sc-base-300: #3e3e3e;
-  --sc-base-400: #5f5f5f;
-  --sc-base-500: #767676;
-  --sc-base-600: #9a9a9a;
-  --sc-base-700: #c0c0bf;
-  --sc-base-800: #dadad9;
-  --sc-base-900: #f5f5f4;
-  --sc-info: #3a85f7;
-  --sc-info-content: #ffffff;
-  --sc-success: #0fba7f;
-  --sc-success-content: #ffffff;
-  --sc-warning: #fc8f3b;
-  --sc-warning-content: #111827;
-  --sc-danger: #dd2528;
-  --sc-danger-content: #ffffff;
-}
-[data-concorde-theme="light"],
-[data-concorde-theme="dark"] {
-  --sc-input-bg: var(--sc-base-100);
-  --sc-input-border-color: var(--sc-base-100);
-}
-
-html {
-  font-family: var(--sc-font-family-base, sans-serif);
-}
-
-p,
-ul,
-ol {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-body {
-  background: var(--sc-base);
-  color: var(--sc-base-content);
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-/* HOME PAGE */
-
-.animated-text {
-  display: block;
-  position: relative;
-  overflow: hidden;
-}
-
-.animated-text span {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  transform: translateY(108%);
-  animation: slideUp 4.5s cubic-bezier(0.17, 0.67, 0.61, 1.13) infinite;
-}
-
-.animated-text span:nth-child(2) {
-  animation-delay: 1.5s;
-}
-
-.animated-text span:nth-child(3) {
-  animation-delay: 3s;
-}
-
-@keyframes slideUp {
-  0% {
-    transform: translateY(108%);
-  }
-  7% {
-    transform: translateY(0);
-  }
-  33% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-108%);
-  }
-  100% {
-    transform: translateY(-108%);
-  }
-}
-
-/* CUSTOM SCROLL */
-.custom-scroll {
-  overflow: auto !important;
-}
-
-.custom-scroll:hover::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 2rem 2rem var(--sc-base-900);
-}
-
-.custom-scroll::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-  border: solid 0.15rem transparent;
-  border-radius: var(--sc-rounded);
-  background: transparent;
-}
-
-.custom-scroll::-webkit-scrollbar-thumb {
-  opacity: 0;
-  transition: box-shadow 0.2s;
-  border: solid 0.15rem transparent;
-}
-
-p {
-  text-wrap: pretty;
-}
-
-/* Markdown inline code in docs (shadcn-style pills; theme tokens follow light/dark) */
-.prose :where(code):not(:where(pre *)) {
-  box-decoration-break: clone;
-  white-space: nowrap;
-  display: inline-block;
-  padding: 0 0.25rem;
-  font-size: 0.75em;
-  margin-inline: 2px;
-  font-weight: normal !important;
-  -webkit-box-decoration-break: clone;
-}
+@import "./base/typography.css";
+@import "./base/scrollbar.css";