/* --------------------------------------------------------------- Adeia — Quickstart page Layout for quickstart.html only. Every selector below is scoped under .quickstart, the class on this page's , so nothing here can reach the landing page or any partial. Colour, type, spacing and easing come from tokens.css. .display, .h1, .h2, .h3, .lead, .body, .label, .mono, .quiet, .plus-link, .container, .section and the four .ground--* classes come from base.css and are used, never redefined. The masthead comes from hero.css and the footer from closing.css, both linked as-is so this page carries the same bar and the same footer as the landing page rather than a second copy of them. Contrast, measured against each ground: on --ink (#222222) --mist 12.42:1 body and code --orchid 6.21:1 display, eyebrow --on-ink-quiet 6.03:1 terminal output on --bone (#ede8da) --on-bone 13.35:1 headings --on-bone-quiet 6.04:1 body copy on --paper (#ffffff) --on-paper 15.91:1 headings, code --on-paper-quiet 6.69:1 body copy on --forest (#1f2d1d) --on-forest 11.96:1 body --orchid 5.61:1 display, eyebrow --on-forest-quiet 6.94:1 All clear WCAG AA at the sizes used. Nothing on this page carries meaning by colour alone: every state that has a colour also has a word. --------------------------------------------------------------- */ /* --------------------------------------------------------------- The masthead sits above the menu panel. menu.css puts the panel at z-index 95 and its comment says the masthead is at 100; hero.css sets 20. Left alone the open panel covers its own close button. Raising it here — scoped to this page, on the value menu.css already assumes — is what makes the toggle clickable while the panel is open. --------------------------------------------------------------- */ .quickstart .masthead { z-index: 100; } /* Anchor targets sit under the fixed masthead otherwise. */ .quickstart main > section { scroll-margin-top: 5.5rem; } /* =============================================================== Hero — --ink Not 100vh. This page is a set of instructions, so the first thing below the fold should be step one, not more hero. =============================================================== */ .quickstart .qs-hero { display: grid; align-items: end; min-height: min(74svh, 42rem); padding-block: clamp(8rem, 20vh, 12rem) clamp(3rem, 7vh, 5rem); } .quickstart .qs-hero__inner { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); } .quickstart .qs-hero__eyebrow { color: var(--orchid); } .quickstart .qs-hero__title { max-inline-size: 12ch; } .quickstart .qs-hero__lead { max-inline-size: 56ch; color: var(--mist); } .quickstart .qs-hero__go { margin: 0; margin-block-start: clamp(0.5rem, 1.5vw, 1.25rem); } /* =============================================================== Setup — --bone The numbered path. Same device as the landing page's approach section — mono ordinal, title, copy, hairline between — turned vertical, because each step here carries a command block and a check that would not survive being squeezed into a column. =============================================================== */ .quickstart .qs-setup__head { display: grid; gap: 0.9rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); } .quickstart .qs-setup__title { max-inline-size: 16ch; } .quickstart .qs-setup__intro { max-inline-size: 62ch; } .quickstart .qs-steps { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule); } .quickstart .qs-step { display: grid; grid-template-columns: 5rem 1fr; gap: 0 clamp(1rem, 2.5vw, 2.5rem); padding-block: clamp(2.25rem, 4vw, 3.25rem); border-block-end: 1px solid var(--rule); } .quickstart .qs-step__ordinal { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; /* Optically aligned with the cap height of the h3 beside it. */ padding-block-start: 0.6em; color: var(--quiet); } .quickstart .qs-step__body { min-width: 0; /* lets the

 children scroll instead of stretching the grid */
}

.quickstart .qs-step__title {
  margin: 0 0 0.75rem;
}

.quickstart .qs-step__copy {
  max-inline-size: 62ch;
  margin: 0;
}

/* ---------- the terminal block ----------
   A dark panel on the cream ground. It sets its own inks rather than
   inheriting the section's, so the contrast figures at the top of
   this file are the ones that apply inside it. */
.quickstart .qs-term {
  --rule: var(--rule-on-ink);

  margin-block-start: clamp(1.25rem, 2.2vw, 1.75rem);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--ink);
  border: 1px solid var(--rule-on-bone);
}

.quickstart .qs-term__label {
  color: var(--on-ink-quiet);
  margin: 0 0 0.75rem;
}

.quickstart .qs-term__label--second {
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
}

.quickstart .qs-term__code,
.quickstart .qs-term__out,
.quickstart .qs-card__out {
  margin: 0;
  font-family: var(--mono);
  /* Linear in viewport width, like the rest of the scale: 12.4px at
     600, 14.1px at 1440. Small enough to read as a transcript, large
     enough to read on a projector. */
  font-size: calc(0.7rem + 0.2vw);
  line-height: 1.65;
  overflow-x: auto;
  /* A long curl line scrolls on its own rather than widening the page. */
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.quickstart .qs-term__code {
  color: var(--mist);
}

/* Output is quieter than input, so the two read apart without either
   dropping below AA. */
.quickstart .qs-term__out {
  color: var(--on-ink-quiet);
}

/* Keyboard users can reach a scrolling transcript; :focus-visible in
   base.css draws the ring. */
.quickstart .qs-term__code:focus-visible,
.quickstart .qs-term__out:focus-visible,
.quickstart .qs-card__out:focus-visible {
  outline-offset: 2px;
}

/* ---------- the check line ---------- */
.quickstart .qs-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 0.875rem;
  max-inline-size: 68ch;
  margin: clamp(1rem, 1.8vw, 1.375rem) 0 0;
}

.quickstart .qs-check__tag {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--quiet);
  /* .label is display:block; this one sits in a grid cell of its own. */
  align-self: start;
}

.quickstart .qs-check__text {
  color: var(--quiet);
}

/* Inline code, on whatever ground it lands. It always takes the
   ground's full-contrast ink rather than inheriting the quiet one from
   the sentence around it — a command name that has to be typed exactly
   should not be the palest thing in the paragraph. */
.quickstart .qs-code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 0.1em 0.3em;
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.quickstart .ground--ink .qs-code {
  color: var(--mist);
}

.quickstart .ground--bone .qs-code {
  color: var(--on-bone);
}

.quickstart .ground--paper .qs-code {
  color: var(--on-paper);
}

.quickstart .ground--forest .qs-code {
  color: var(--on-forest);
}

/* ---------- stacked ---------- */
@media (max-width: 46rem) {
  .quickstart .qs-step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .quickstart .qs-step__ordinal {
    padding-block-start: 0;
  }

  .quickstart .qs-check {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }

  .quickstart .qs-check__tag {
    justify-self: start;
  }
}

/* ===============================================================
   Environment — --paper
   =============================================================== */
.quickstart .qs-env__head {
  display: grid;
  gap: 0.9rem;
  margin-block-end: clamp(2.5rem, 4.5vw, 3.75rem);
}

.quickstart .qs-env__title {
  max-inline-size: 20ch;
}

.quickstart .qs-env__intro {
  max-inline-size: 62ch;
}

.quickstart .qs-env__group + .qs-env__group {
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.quickstart .qs-env__grouptitle {
  margin: 0 0 0.75rem;
  max-inline-size: 24ch;
}

.quickstart .qs-env__groupnote {
  max-inline-size: 62ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.quickstart .qs-env__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rule);
}

.quickstart .qs-env__row {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(7rem, 10rem) 1fr;
  align-items: baseline;
  gap: 0.5rem clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
  border-block-end: 1px solid var(--rule);
}

.quickstart .qs-env__name {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The default value, and — for the required ones — the word "required"
   in its place. A word, not a colour: the distinction has to survive
   greyscale and a screen reader alike. */
.quickstart .qs-env__default {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--quiet);
  overflow-wrap: anywhere;
}

.quickstart .qs-env__default--none {
  color: var(--on-paper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.quickstart .qs-env__what {
  margin: 0;
  max-inline-size: 62ch;
  color: var(--quiet);
}

@media (max-width: 56rem) {
  .quickstart .qs-env__row {
    grid-template-columns: 1fr auto;
  }

  .quickstart .qs-env__what {
    grid-column: 1 / -1;
  }

  .quickstart .qs-env__default {
    justify-self: end;
    text-align: right;
  }
}

/* ===============================================================
   Outcomes — --paper

   Sits on the same ground as the environment section, so it opens
   with a rule rather than a colour change.
   =============================================================== */
.quickstart .qs-outcomes {
  padding-block-start: 0;
}

.quickstart .qs-outcomes__head {
  display: grid;
  gap: 0.9rem;
  padding-block-start: clamp(3rem, 6vw, 5rem);
  border-block-start: 1px solid var(--rule);
  margin-block-end: clamp(2.5rem, 4.5vw, 3.75rem);
}

.quickstart .qs-outcomes__title {
  max-inline-size: 20ch;
}

/* The seeded policy, restated where the outcomes are read. */
.quickstart .qs-fence {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.quickstart .qs-fence__item {
  display: grid;
  gap: 0.5rem;
}

.quickstart .qs-fence__val {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1;
}

.quickstart .qs-cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.quickstart .qs-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--rule);
}

/* The status the outcome produces, spelled out. The number and the word
   together, so neither has to be inferred. */
.quickstart .qs-card__chip {
  align-self: start;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rule);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.quickstart .qs-card__title {
  margin: 0;
}

.quickstart .qs-card__copy {
  margin: 0;
}

.quickstart .qs-card__out {
  padding: clamp(0.875rem, 1.5vw, 1.25rem);
  background: var(--ink);
  color: var(--mist);
  border: 1px solid var(--rule);
}

/* ===============================================================
   Closing — --forest
   =============================================================== */
.quickstart .qs-close {
  display: grid;
  align-items: center;
  padding-block: calc(var(--sec-y) * 1.15);
}

.quickstart .qs-close__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

.quickstart .qs-close__eyebrow {
  color: var(--orchid);
}

.quickstart .qs-close__title {
  max-inline-size: 16ch;
}

.quickstart .qs-close__body {
  max-inline-size: 56ch;
  color: var(--mist);
}

.quickstart .qs-close__cta {
  margin: 0;
  margin-block-start: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* ===============================================================
   Reduced motion

   This page animates nothing of its own — there is no canvas, no
   scroll reveal and no script beyond the menu. The global block in
   motion.css already neutralises transitions; this is here so the
   two hover transitions this page inherits (the plus box, the footer
   link) are named rather than left to a wildcard.
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .quickstart .plus-link__box,
  .quickstart .site-footer__link,
  .quickstart .menu__link {
    transition: none;
  }
}