malkuthro-ComfyUI-Koolook/web/guide/guide.css

/* SPDX-FileCopyrightText: 2025-2026 Kforge Labs <https://github.com/malkuthro/ComfyUI-Koolook> */
/* SPDX-License-Identifier: GPL-3.0-only */

:root {
  color-scheme: dark;
  /* ForgeFlow-inspired static guide skin.
     Source reference: ../ForgeFlow/docs/UI_DESIGN_SYSTEM.md */
  --bg: #0e0e0e;
  --panel: #151515;
  --panel-2: #1a1a1f;
  --titlebar: #24242c;
  --text: #f9fafb;
  --muted: #707982;
  --muted-deep: #4d535d;
  --line: #302f2f;
  --blue: #4268ba;
  --sky: #052f4a;
  --sky-hover: #1a6d94;
  --green: #4a8058;
  --amber: #461901;
  --purple: #452e83;
  --pink: #77234d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(rgba(150, 150, 150, 0.08) 1px, transparent 1px),
    var(--bg);
  background-size: 13px 13px;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hero,
main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  padding: 48px 0 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 14px;
  font-size: clamp(34px, 7vw, 68px);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 18px;
  letter-spacing: 0;
}

.lead {
  max-width: 700px;
  color: var(--muted);
  font-size: 19px;
}

.section {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  gap: 28px;
  align-items: center;
  padding: 34px 0;
}

.section-copy {
  max-width: 440px;
  padding-left: 16px;
  border-left: 4px solid var(--blue);
}

.section-copy.wide {
  max-width: 720px;
  grid-column: 1 / -1;
}

.section-copy p,
.band > p,
.cards p,
figcaption {
  color: var(--muted);
}

.visual {
  margin: 0;
}

.visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
}

.overview-map {
  display: grid;
  /* Slightly wider screenshot column + tighter gap so the sidebar shot's
     natural portrait height grows to roughly match the callouts column
     height (image aspect 728:1206 → ~1.656x width). Markers scale with the
     image since they use percentage positioning. */
  grid-template-columns: minmax(240px, 0.84fr) minmax(220px, 0.66fr);
  gap: 24px;
  align-items: center;
  padding: 22px 28px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101010;
}

.overview-shot {
  position: relative;
  width: min(100%, 450px);
  margin: 0 auto;
  overflow: visible;
}

.overview-shot img {
  border-color: #3c3c3c;
  background: #151515;
}

.overview-box {
  position: absolute;
  right: -4px;
  width: 4px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  pointer-events: none;
}

.overview-box::after {
  content: none;
}

/* Marker percentages tuned to the redesigned 666×1202 sidebar-overview.png.
   Section dividers measured at y = 76 / 152 / 262 / 342 / 418 / 1202
   (= 6.32% / 12.65% / 21.80% / 28.45% / 34.78% / 100%). Each bar is inset
   ~0.4% from its dividers so the marker sits cleanly inside the row band
   instead of straddling the divider line. */
.overview-snapshot {
  top: 0.5%;
  height: 5.3%;
  color: #4a8058;
}

.overview-tools {
  top: 6.8%;
  height: 5.3%;
  color: #4268ba;
}

.overview-search {
  top: 13.2%;
  height: 8.2%;
  color: #d59b3d;
}

.overview-nodes {
  top: 22.3%;
  height: 5.7%;
  color: #b64747;
}

.overview-workflows {
  top: 28.9%;
  height: 5.4%;
  color: #452e83;
}

.overview-saved {
  top: 35.3%;
  height: 63.7%;
  color: #4a8058;
}

.overview-callouts {
  display: grid;
  gap: 22px;
}

.overview-callout {
  position: relative;
  padding-left: 18px;
  color: var(--blue);
}

.overview-callout::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.82;
}

.overview-callout::after {
  content: none;
}

.overview-callout h3 {
  margin: 0 0 2px;
  color: currentColor;
  font-size: 20px;
}

.overview-callout p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.overview-callout.snapshot::before,
.overview-callout.saved::before,
.overview-callout.snapshot,
.overview-callout.saved {
  color: var(--green);
}

.overview-callout.tools {
  color: var(--blue);
}

.overview-callout.search {
  color: #d59b3d;
}

.overview-callout.nodes {
  color: #b64747;
}

.overview-callout.workflows {
  color: var(--purple);
}

figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.band {
  margin: 28px 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}

.band > div {
  position: relative;
  padding: 16px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.band > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--green);
}

.band > p {
  padding: 18px 22px 0;
  font-size: 17px;
}

/* Text-only band (no figure to provide bottom padding) — its trailing
   paragraph needs explicit bottom space so the body text doesn't sit
   flush against the panel's bottom edge. */
.band-text > p:last-child {
  padding-bottom: 22px;
}

/* Inline code spans — used for filename / path fragments inside body
   prose like <snapshot>_autosave/. Slight tinted bg + monospace stack
   so they read as code without dominating the line. */
.band p code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgb(255 255 255 / 6%);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.92em;
}

.save-kind {
  display: inline-block;
  padding: 1px 8px 2px;
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  vertical-align: 0.08em;
}

.save-kind-periodic {
  color: #6db4ff;
}

.save-kind-preload {
  color: #d59b3d;
}

.full {
  margin: 18px 22px 22px;
}

.steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.steps li {
  margin-bottom: 9px;
}

.steps strong {
  color: var(--text);
  font-weight: 650;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 30px 0;
}

.cards article {
  position: relative;
  min-height: 142px;
  padding: 18px 16px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}

.cards article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--blue);
}

.cards article:nth-child(2)::before {
  background: var(--sky-hover);
}

.cards article:nth-child(3)::before {
  background: var(--purple);
}

.cards article:nth-child(4)::before {
  background: var(--green);
}

.cards article:nth-child(5)::before {
  background: var(--pink);
}

.function-list {
  margin: 14px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.function-list li {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.showcases {
  display: grid;
  gap: 0;
  padding: 34px 0 70px;
}

.showcase {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 44px;
  align-items: center;
  padding: 42px 0;
  border-top: 1px solid var(--line);
}

.showcase:last-child {
  border-bottom: 1px solid var(--line);
}

.showcase-reverse {
  grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
}

.showcase-reverse .showcase-copy {
  grid-column: 2;
}

.showcase-reverse .showcase-media {
  grid-column: 1;
  grid-row: 1;
}

.showcase-copy {
  max-width: 500px;
}

.showcase-copy .eyebrow {
  color: #9ca3af;
}

.showcase-copy h3 {
  max-width: 540px;
  margin-bottom: 18px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
}

.showcase-copy p:not(.eyebrow) {
  margin: 0;
  color: #9ca3af;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.48;
}

.showcase-copy strong {
  color: var(--text);
  font-weight: 700;
}

.workflow-update-callout {
  color: #6db4ff;
}

.section-ref-note {
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  white-space: nowrap;
  text-transform: uppercase;
}

.section-ref {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
}

.section-ref:hover {
  text-decoration: none;
}

.showcase-copy code {
  padding: 1px 7px;
  border-radius: 5px;
  background: rgb(255 255 255 / 7%);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

.showcase-media {
  position: relative;
  margin: 0;
  padding: 0;
}

.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 18px 46px rgb(0 0 0 / 24%);
}

.portrait-shot img {
  width: min(100%, 680px);
  margin: 0 auto;
}

.tags-shot {
  display: grid;
  gap: 18px;
  align-content: center;
}

.tags-shot img {
  width: min(100%, 620px);
  margin: 0 auto;
}

.focus-dot {
  display: none;
}

.module-shot .focus-module {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22%;
  height: 15.6%;
  border-radius: 6px;
  background: rgb(255 210 74 / 30%);
  pointer-events: none;
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .section,
  .showcase,
  .showcase-reverse {
    grid-template-columns: 1fr;
  }

  .showcase {
    gap: 22px;
    padding: 34px 0;
  }

  .showcase-reverse .showcase-copy,
  .showcase-reverse .showcase-media {
    grid-column: auto;
    grid-row: auto;
  }

  .overview-map {
    grid-template-columns: 1fr;
  }

  .cards article {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .hero,
  main {
    width: min(100% - 20px, 1180px);
  }

  .hero {
    padding-top: 34px;
  }

  .band {
    padding: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .showcase-copy h3 {
    font-size: 30px;
  }

  .showcase-copy p:not(.eyebrow) {
    font-size: 17px;
  }
}