website/sass/main.scss

// hyperhive marketing landing — theme (#502).
//
// Matches the dashboard / agent terminals visually so the website
// reads as part of the same family: Catppuccin Mocha palette + amber
// accent (matching the hex mark), banner-thin block-glyph headings,
// dashed dividers, glow text-shadow on titles.
//
// Single-file SCSS — landing is small enough that splitting into
// partials would be premature. Re-evaluate if /docs or /blog land.

// ─── palette ───────────────────────────────────────────────────────
// Catppuccin Mocha + the hyperhive amber from branding/hyperhive.svg.
// Copying them in (not importing) so this file stays self-contained.

$base:      #1e1e2e;
$mantle:    #181825;
$crust:     #11111b;

$text:      #cdd6f4;
$subtext1:  #bac2de;
$subtext0:  #a6adc8;
$overlay2:  #9399b2;
$overlay1:  #7f849c;
$overlay0:  #6c7086;
$surface2:  #585b70;
$surface1:  #45475a;
$surface0:  #313244;

$rosewater: #f5e0dc;
$flamingo:  #f2cdcd;
$pink:      #f5c2e7;
$mauve:     #cba6f7;
$red:       #f38ba8;
$maroon:    #eba0ac;
$peach:     #fab387;
$yellow:    #f9e2af;
$green:     #a6e3a1;
$teal:      #94e2d5;
$sky:       #89dceb;
$sapphire:  #74c7ec;
$blue:      #89b4fa;
$lavender:  #b4befe;

// The hex-mark amber. Pure swarm identity colour.
$amber:        #ffb300;
$amber-deep:   #ff8f00;
$amber-glow:   rgba(255, 179, 0, 0.45);

// ─── globals ───────────────────────────────────────────────────────

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: $base;
  color: $text;
  // Same font stack as the dashboard's @hive/shared base.css —
  // monospace identity reads as "this is the terminal swarm" instead
  // of "this is a marketing site". Body copy stays readable at this
  // weight because the lines are short.
  font-family: ui-monospace, "JetBrains Mono", "Fira Code",
               Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.55;
  // Subtle background grid — same idea as the hex-mark's faint
  // horizontal lines, but at body scope. Cheaper than a full SVG
  // background.
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      rgba(255, 179, 0, 0.025) 23px,
      rgba(255, 179, 0, 0.025) 24px
    );
}

a {
  color: $sky;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
}
a:hover { color: $sapphire; border-bottom-color: $sapphire; }

::selection { background: $amber-glow; color: $crust; }

// ─── layout ────────────────────────────────────────────────────────

.shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
}

// ─── hero ──────────────────────────────────────────────────────────

.hero {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 2rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px dashed $surface1;
}

@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-art { max-width: 220px; margin: 0 auto; }
}

.hero-art svg {
  width: 100%;
  height: auto;
  // Subtle pulse — only the outer ring + dashed orbit rotate. Quiet
  // enough to read as "active" instead of "noisy".
  animation: hex-orbit 24s linear infinite;
}
.hero-art:hover svg {
  // Speed up on hover for a tiny "you got noticed" cue. No JS needed.
  animation-duration: 8s;
}

@keyframes hex-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-text h1 {
  margin: 0 0 0.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: $amber;
  text-shadow:
    0 0 4px $amber-glow,
    0 0 12px rgba(255, 143, 0, 0.25);
}

.banner-glyph {
  color: $amber-deep;
  opacity: 0.65;
  font-weight: 400;
  letter-spacing: 0;
}

.hero-tagline {
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  color: $subtext1;
}

.hero-cta { margin: 0; }

.cta-primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid $amber;
  color: $amber;
  border-bottom-color: $amber;
  text-shadow: 0 0 6px $amber-glow;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: box-shadow 0.15s ease, color 0.15s, border-color 0.15s;
}
.cta-primary:hover {
  color: $base;
  background: $amber;
  border-color: $amber;
  border-bottom-style: solid;
  box-shadow: 0 0 14px -2px $amber-glow;
  text-shadow: none;
}

// ─── prose ─────────────────────────────────────────────────────────

.prose {
  padding: 2rem 0;
  color: $text;
  max-width: 64ch;
  font-size: 1.02rem;
}
.prose p { margin: 0 0 1rem; }

// ─── three-column grid ────────────────────────────────────────────

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px dashed $surface1;
}

@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.card {
  padding: 1rem 1.2rem;
  background: $mantle;
  border: 1px solid $surface0;
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover {
  border-color: $amber;
  box-shadow: 0 0 14px -6px $amber-glow;
}
.card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: $mauve;
}
.card-glyph { color: $amber; margin-right: 0.4em; }
.card p {
  margin: 0;
  font-size: 0.92rem;
  color: $subtext1;
  line-height: 1.5;
}

// ─── footer ────────────────────────────────────────────────────────

.site-footer {
  max-width: 920px;
  margin: 3rem auto 1.5rem;
  padding: 1.5rem 1.5rem 0;
  text-align: center;
  border-top: 1px dashed $surface1;
}

.banner-thin {
  margin: 1.5rem 0 0.5rem;
  color: $amber-deep;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

.footer-links {
  margin: 0;
  font-size: 0.88rem;
  color: $subtext0;
}
.footer-links .sep { margin: 0 0.4em; opacity: 0.5; }