@master/internal-site 0.0.0-stage → 0.1.0

package/src/home/hero.css

@@ -0,0 +1,547 @@
+@layer components {
+  .home-hero {
+    --hero-gold-shadow: light-dark(oklch(0.79 0.105 76), oklch(0.19 0.035 65));
+    --hero-gold-body: light-dark(oklch(0.9 0.1 84), oklch(0.57 0.115 77));
+    --hero-gold-sheen: light-dark(oklch(0.985 0.035 92), oklch(0.91 0.115 86));
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    min-height: max(43rem, 100svh);
+    padding-block: clamp(8rem, 6rem + 5vw, 10.5rem) clamp(8rem, 5rem + 7vw, 12rem);
+    text-align: center;
+    background-color: var(--home-ground);
+    /* The hero is a scene, not prose: only the install command can be selected and copied. */
+    user-select: none;
+
+    & .home-command code {
+      user-select: text;
+    }
+
+    /* A quiet static field survives unavailable WebGL, fonts or script. */
+    &::before {
+      position: absolute;
+      inset: 0;
+      z-index: -3;
+      background-image:
+        radial-gradient(ellipse at 10% 20%, color-mix(in oklab, var(--hero-gold-body) 85%, transparent), transparent 65%),
+        radial-gradient(ellipse at 95% 55%, color-mix(in oklab, var(--hero-gold-body) 60%, transparent), transparent 50%);
+      pointer-events: none;
+      content: '';
+    }
+
+    /* Once the canvas draws, its silk fades in over this gold; the gold leaves only after the silk has arrived.
+       Losing the canvas brings it back at once, since the transition belongs to this state alone. */
+    &[data-lens-ready]::before {
+      opacity: 0;
+      transition: opacity 1.2s var(--home-ease) 0.9s;
+    }
+
+    @media (width >= 48rem) and (height < 50rem) {
+      min-height: max(38rem, 100svh);
+      padding-block: 6rem 3.5rem;
+
+      & .home-display {
+        margin-top: var(--spacing-lg);
+      }
+
+      & .home-hero-actions {
+        margin-top: var(--spacing-xl);
+      }
+    }
+  }
+
+  .home-hero-field {
+    position: absolute;
+    inset: 0;
+    z-index: -2;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    /* The renderer resolves the theme's shadow, body and sheen without duplicating its palette. */
+    color: var(--hero-gold-shadow);
+    caret-color: var(--hero-gold-body);
+    outline-color: var(--hero-gold-sheen);
+  }
+
+  .home-hero-body {
+    container: hero-content / inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: center;
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* The canvas lamp reaches native controls as these properties; the defaults hang it above the title. */
+  .home-hero :is(.home-hero-pill, .home-hero-actions .home-action-primary, .home-hero-actions .home-command) {
+    --lit-x: 30%;
+    --lit-y: -160%;
+    --lit-angle: -20deg;
+    --cast-x: 1px;
+    --cast-y: 4px;
+    --lit-near: 0;
+    --cast-tone: light-dark(oklch(0.42 0.07 72 / 0.2), oklch(0.04 0.01 60 / 0.5));
+  }
+
+  /* Liquid glass: nearly clear, it lets the silk's color through a little brighter, and its rims catch the lamp. */
+  .home-hero :is(.home-hero-pill, .home-hero-actions .home-command) {
+    /* Dark glass is smoked, so a bright fold passing beneath never drops white text below 4.5:1. */
+    --glass-fill: light-dark(rgb(255 255 255 / 0.08), oklch(0.12 0.012 70 / 0.28));
+    --glass-top: light-dark(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.07));
+    --glass-lip: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.16));
+    --glass-pool: light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.09));
+    --glass-rim: light-dark(rgb(255 255 255 / 1), rgb(255 255 255 / 0.55));
+    --glass-rim-far: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.16));
+    --glass-glint: light-dark(oklch(0.84 0.13 82 / 0.55), oklch(0.82 0.13 82 / 0.32));
+    --glass-glare: light-dark(oklch(0.995 0.02 90 / 0.95), rgb(255 255 255 / 0.4));
+    position: relative;
+    isolation: isolate;
+    border: 1px solid transparent;
+    background-color: var(--glass-fill);
+    /* The curved top catches the lamp as a short, bright streak that slides along it as the lamp passes. */
+    background-image:
+      radial-gradient(ellipse 18% 30% at clamp(10%, var(--lit-x), 90%) 8%, color-mix(in oklab, var(--glass-glare) calc(var(--lit-near) * 100%), transparent), transparent),
+      linear-gradient(180deg, var(--glass-top), transparent 50%);
+    box-shadow:
+      inset 0 1px 1px var(--glass-lip),
+      inset 0 -10px 16px -12px var(--glass-pool),
+      0 1px 2px light-dark(oklch(0.4 0.06 70 / 0.1), rgb(0 0 0 / 0.3)),
+      /* Glass passes most of the light, so it casts a faint shadow; the canvas adds its caustic. */
+      var(--cast-x) var(--cast-y) 16px -6px color-mix(in oklab, var(--cast-tone) 50%, transparent);
+    backdrop-filter: blur(6px) saturate(1.35) brightness(1.06);
+    transition: background-color var(--home-quick) var(--home-ease);
+
+    /* Both rims are lit: the near one by the lamp, the far one by light bent through the glass. */
+    &::before {
+      position: absolute;
+      inset: -1px;
+      z-index: -1;
+      padding: 1px;
+      border-radius: inherit;
+      background-image: linear-gradient(var(--lit-angle), var(--glass-rim-far), transparent 32%, transparent 62%, var(--glass-rim));
+      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+      pointer-events: none;
+      content: '';
+    }
+  }
+
+  /* Once the canvas refracts the silk beneath the glass, a light blur keeps that bending visible. */
+  .home-hero[data-lens-ready] :is(.home-hero-pill, .home-hero-actions .home-command) {
+    backdrop-filter: blur(1px) saturate(1.2);
+  }
+
+  /* Copying answers with one light that crosses the glass, the same glint the stone uses. */
+  .home-hero .home-hero-actions .home-command::after {
+    position: absolute;
+    inset: -1px;
+    z-index: -1;
+    border-radius: inherit;
+    background-image: linear-gradient(105deg, transparent 40%, var(--glass-glint) 50%, transparent 60%);
+    background-size: 300% 100%;
+    background-position: 100% 0;
+    background-repeat: no-repeat;
+    opacity: 0;
+    pointer-events: none;
+    content: '';
+  }
+
+  .home-hero .home-hero-actions .home-command[data-status='copied']::after {
+    animation-name: home-hero-glass-glint;
+    animation-duration: 1000ms;
+    animation-timing-function: var(--home-ease-inout);
+  }
+
+  .home-hero .home-hero-pill:is(:hover, :focus-visible),
+  .home-hero .home-command:focus-within {
+    --glass-fill: light-dark(rgb(255 255 255 / 0.2), oklch(0.16 0.012 70 / 0.36));
+  }
+
+  .home-hero-pill {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    max-width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem var(--spacing-sm) 0.25rem 0.25rem;
+    border-radius: calc(infinity * 1px);
+    font-size: var(--home-caption);
+    line-height: 1.5;
+    color: var(--home-text);
+    text-wrap: balance;
+    overflow-wrap: anywhere;
+    transition: color var(--home-quick) var(--home-ease);
+
+    & > svg {
+      flex: none;
+    }
+
+    &:hover {
+      color: var(--home-text);
+    }
+
+    /* Both hero links point onward: their arrows lead a step ahead, as the closing invitation's does. */
+    &:is(:hover, :focus-visible) > svg {
+      translate: 3px 0;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 4px;
+    }
+  }
+
+  .home-hero-pill-badge {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.125rem var(--spacing-xs);
+    border-radius: calc(infinity * 1px);
+    font-family: var(--home-mono);
+    font-size: var(--home-label);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--home-text);
+    background-color: light-dark(rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.07));
+    box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.1));
+
+    /* A polished amber bead: lit on the lamp's side, its color glowing through to the far side. */
+    &::before {
+      width: 0.4375rem;
+      height: 0.4375rem;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--home-signal);
+      background-image: radial-gradient(circle at clamp(25%, var(--lit-x), 75%) 28%, rgb(255 255 255 / 0.85), transparent 42%),
+        radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--home-signal), white 25%), transparent 60%);
+      box-shadow:
+        inset 0 -1px 1px oklch(0.45 0.11 60 / 0.55),
+        0 0 0 3px color-mix(in oklab, var(--home-signal-glow) calc(70% + var(--lit-near) * 30%), transparent),
+        0 0 calc(3px + var(--lit-near) * 5px) color-mix(in oklab, var(--home-signal) calc(15% + var(--lit-near) * 35%), transparent);
+      content: '';
+    }
+  }
+
+  .home-hero-pill-label {
+    min-width: 0;
+  }
+
+  .home-display {
+    min-width: 0;
+    max-width: min(15em, 100%);
+    margin: var(--spacing-xl) 0 0;
+    /* The narrowest phones step down so "developers and", joined by a no-break space, never splits inside a word. */
+    font-size: min(var(--home-display), 5.25rem, max(10.5svh, 3.25rem), max(12.5vw, 2.5rem));
+    font-weight: var(--font-weight-medium);
+    line-height: 1.04;
+    letter-spacing: -0.045em;
+    color: var(--home-text);
+    text-wrap: balance;
+    overflow-wrap: anywhere;
+  }
+
+  .home-display-line {
+    display: block;
+
+    @media (width < 64rem) {
+      display: inline;
+    }
+  }
+
+  /* Only a successfully painted mask replaces the heading's native ink. */
+  .home-hero[data-glass-ready] .home-display {
+    -webkit-text-fill-color: transparent;
+  }
+
+  .home-hero :is(.home-hero-pill, .home-action-primary) > svg {
+    transition: translate var(--home-base) var(--home-ease);
+  }
+
+  .home-hero .home-action-primary:is(:hover, :focus-visible) > svg {
+    translate: 3px 0;
+  }
+
+  /* Get started is cut from the title's stone: polished obsidian in light mode, milky quartz in dark mode. */
+  .home-hero .home-action-primary {
+    --stone-top: light-dark(oklch(0.29 0.004 270), oklch(0.965 0.006 88));
+    --stone-mid: light-dark(oklch(0.16 0.003 270), oklch(0.91 0.012 85));
+    --stone-bottom: light-dark(oklch(0.075 0.002 270), oklch(0.81 0.022 80));
+    --stone-text: light-dark(oklch(0.97 0.008 85), oklch(0.2 0.012 70));
+    --stone-lip: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.95));
+    --stone-rim: light-dark(rgb(255 255 255 / 0.42), rgb(255 255 255 / 1));
+    --stone-mirror: light-dark(oklch(0.84 0.06 82 / 0.3), oklch(0.74 0.1 78 / 0.45));
+    --stone-sheen: light-dark(rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.9));
+    --stone-glare: light-dark(rgb(255 255 255 / 0.36), rgb(255 255 255 / 1));
+    /* Moonstone's cool sheen floats low in the pill, across from the lamp; obsidian has none. */
+    --stone-adularescence: light-dark(transparent, oklch(0.92 0.025 240 / 0.22));
+    --stone-glint: light-dark(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.85));
+    --stone-contact: light-dark(oklch(0.3 0.05 65 / 0.3), rgb(0 0 0 / 0.5));
+    --stone-cast: light-dark(oklch(0.42 0.08 70 / 0.32), oklch(0.03 0.01 60 / 0.7));
+    --stone-press: light-dark(rgb(0 0 0 / 0.7), oklch(0.55 0.05 80 / 0.5));
+  }
+
+  .home-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    max-width: 100%;
+    margin-top: var(--spacing-2xl);
+
+    & .home-action-primary,
+    & .home-command {
+      box-sizing: border-box;
+      height: auto;
+      min-width: 0;
+      min-height: 3.25rem;
+      border-radius: 1.625rem;
+      color: var(--home-text);
+    }
+
+    & .home-action-primary {
+      position: relative;
+      isolation: isolate;
+      overflow: hidden;
+      padding: var(--spacing-sm) 1.5rem;
+      font-weight: var(--font-weight-medium);
+      color: var(--stone-text);
+      text-shadow: 0 -1px 0 light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.7));
+      border: 0;
+      background-color: var(--stone-mid);
+      /* The curved top reflects the lamp as a sheen that follows it, and as a hot spot when it comes close. */
+      background-image:
+        radial-gradient(ellipse 13% 18% at clamp(14%, var(--lit-x), 86%) 24%, color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 100%), transparent), color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 30%), transparent) 45%, transparent),
+        radial-gradient(ellipse 80% 70% at var(--lit-x) -10%, var(--stone-sheen), transparent 70%),
+        radial-gradient(ellipse 34% 70% at clamp(30%, calc(100% - var(--lit-x) * 0.5), 70%) 75%, var(--stone-adularescence), transparent),
+        linear-gradient(180deg, var(--stone-top), var(--stone-mid) 52%, var(--stone-bottom));
+      box-shadow:
+        inset 0 1px 0 var(--stone-lip),
+        inset 0 -1px 0 var(--stone-mirror),
+        inset 0 -10px 16px -12px var(--stone-mirror),
+        0 1px 1px var(--stone-contact),
+        var(--cast-x) var(--cast-y) 10px -3px var(--stone-cast),
+        calc(var(--cast-x) * 2.5) calc(var(--cast-y) * 2.5) 28px -10px var(--stone-cast);
+      backdrop-filter: none;
+      /* No shadow transition: the lamp moves these shadows continuously, so easing them would restyle every frame. */
+      transition: background-color var(--home-quick) var(--home-ease);
+
+      /* The rim catches the lamp on its near side and the gold silk on its far side. */
+      &::before {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        padding: 1px;
+        border-radius: inherit;
+        background-image: linear-gradient(var(--lit-angle), var(--stone-mirror), transparent 40%, transparent 58%, var(--stone-rim));
+        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+        pointer-events: none;
+        content: '';
+      }
+
+      /* A single glint crosses the polished face as the pointer arrives. */
+      &::after {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background-image: linear-gradient(105deg, transparent 38%, var(--stone-glint) 50%, transparent 62%);
+        background-size: 250% 100%;
+        background-position: 100% 0;
+        background-repeat: no-repeat;
+        pointer-events: none;
+        content: '';
+      }
+
+      &:is(:hover, :focus-visible) {
+        /* Moonstone answers the lamp with its sheen rather than a white glare, which a pale stone would swallow. */
+        --stone-adularescence: light-dark(transparent, oklch(0.9 0.035 240 / 0.45));
+        border-color: transparent;
+        box-shadow:
+          inset 0 1px 0 var(--stone-lip),
+          inset 0 -1px 0 var(--stone-mirror),
+          inset 0 -14px 20px -12px var(--stone-mirror),
+          0 1px 1px var(--stone-contact),
+          var(--cast-x) var(--cast-y) 12px -3px var(--stone-cast),
+          calc(var(--cast-x) * 3) calc(var(--cast-y) * 3) 34px -10px var(--stone-cast);
+
+        &::after {
+          background-position: 0 0;
+          transition: background-position 900ms var(--home-ease);
+        }
+      }
+
+      &:active {
+        box-shadow:
+          inset 0 2px 6px var(--stone-press),
+          inset 0 -1px 0 var(--stone-mirror),
+          0 1px 1px var(--stone-contact),
+          calc(var(--cast-x) * 0.4) calc(var(--cast-y) * 0.4) 6px -3px var(--stone-cast);
+      }
+    }
+
+    & .home-command {
+      flex: auto;
+      padding: 0.1875rem 0.1875rem 0.1875rem 1.125rem;
+      font-size: 0.875rem;
+    }
+
+    & .home-command-copy {
+      width: 2.75rem;
+      height: 2.75rem;
+      border-radius: calc(infinity * 1px);
+      color: var(--home-text);
+
+      &:hover {
+        color: var(--home-text);
+        background-color: light-dark(rgb(0 0 0 / 0.035), rgb(255 255 255 / 0.07));
+      }
+
+      &:focus-visible {
+        outline-offset: -2px;
+      }
+    }
+
+    & .home-action-primary:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 4px;
+    }
+
+    @media (width < 40rem) {
+      flex-direction: column;
+      width: min(100%, 21rem);
+
+      & .home-command {
+        width: 100%;
+      }
+    }
+  }
+
+  /* Use the space available to enlarged text, rather than squeezing its reading column. */
+  @container hero-content (width < 14em) {
+    .home-hero-pill {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 0.25rem 0.5rem;
+      padding: 0.5rem 0.75rem;
+      border-radius: 1rem;
+      text-align: left;
+    }
+
+    .home-hero-pill-badge {
+      justify-self: start;
+    }
+
+    .home-hero-pill-label {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    .home-hero-pill > svg {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .home-hero-actions .home-action-primary {
+      padding-inline: 0.75rem;
+    }
+
+    .home-hero-actions .home-command {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 0.125rem 0.5rem;
+      padding: 0.5rem 0.75rem 0.25rem;
+      border-radius: 1rem;
+    }
+
+    .home-hero-actions .home-command > [aria-hidden] {
+      align-self: start;
+    }
+
+    .home-hero-actions .home-command-copy {
+      grid-column: 2;
+      justify-self: end;
+      margin-right: -0.5rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .home-hero :is(.home-hero-pill, .home-action-primary, .home-command, .home-command-copy) {
+      transition-duration: 0s;
+    }
+
+    .home-hero .home-action-primary::after,
+    .home-hero .home-hero-actions .home-command::after {
+      display: none;
+    }
+
+    .home-hero[data-lens-ready]::before {
+      transition: none;
+    }
+
+    .home-hero :is(.home-hero-pill, .home-action-primary) > svg {
+      translate: none !important;
+      transition: none;
+    }
+  }
+
+  /* People who ask for less transparency or more contrast get a solid sheet; the canvas stops refracting beneath it. */
+  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+    .home-hero :is(.home-hero-pill, .home-hero-actions .home-command),
+    .home-hero[data-lens-ready] :is(.home-hero-pill, .home-hero-actions .home-command) {
+      --glass-fill: light-dark(oklch(0.985 0.012 85), oklch(0.2 0.01 70));
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active), print {
+    .home-hero-field,
+    .home-hero::before {
+      display: none;
+    }
+
+    .home-hero .home-display,
+    .home-hero[data-glass-ready] .home-display {
+      color: var(--home-text);
+      -webkit-text-fill-color: currentColor;
+    }
+
+    .home-hero :is(.home-hero-pill, .home-hero-actions .home-action-primary, .home-hero-actions .home-command) {
+      border: 1px solid currentColor;
+      color: CanvasText;
+      background-color: Canvas;
+      background-image: none;
+      box-shadow: none;
+      text-shadow: none;
+      backdrop-filter: none;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  @media print {
+    .home-hero {
+      --home-text: CanvasText;
+      --home-text-body: CanvasText;
+      --color-text-muted: CanvasText;
+      color-scheme: light;
+      background-color: Canvas;
+    }
+  }
+}
+
+@keyframes home-hero-glass-glint {
+  from {
+    background-position: 100% 0;
+    opacity: 1;
+  }
+
+  to {
+    background-position: 0 0;
+    opacity: 1;
+  }
+}

package/src/home/home-illustration.ts

@@ -0,0 +1,5 @@
+import type { homeIconArtwork } from '@master/internal-site/home/icons/artwork.ts'
+
+export type HomeIllustrationId = keyof typeof homeIconArtwork
+
+export type HomeCompactIconId = Extract<HomeIllustrationId, `lint-${string}` | `mcp-${string}` | 'agent-edit-file'>