styles.css

/* Clips Studio website — the desktop app's own design tokens.
   Kept byte-identical to ui/src/renderer/src/theme.css so the site and the
   app are recognisably the same product. Update both together. */

:root {
  --base: #0a1628;
  --surface: #13243d;
  --raised: #1c3354;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --success: #34d399;
  --warn: #fbbf24;

  --wrap: 1080px;
  --radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Same accessibility floor as the app: a visible focus ring on everything
   interactive, and motion honoured as a preference rather than a default. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- header */
header.site {
  border-bottom: 1px solid rgb(28 51 84 / 0.6);
  background: rgb(10 22 40 / 0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  flex-wrap: wrap;
}
/* Matches the app's sidebar: name on top, "local-first AI clipping" under
   it in muted small type. Someone arriving from the site should see the same
   lockup when they open the app. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 34px;
  height: 34px;
}
.brand .name {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  display: block;
}
.brand .name span {
  color: var(--accent);
}
.brand .tagline {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 1px;
}
nav.site {
  display: flex;
  gap: 18px;
  margin-left: auto;
  font-size: 0.92rem;
  flex-wrap: wrap;
}
nav.site a {
  color: var(--muted);
}
nav.site a:hover,
nav.site a[aria-current='page'] {
  color: var(--ink);
  text-decoration: none;
}
/* Donate sits in the sticky header so it is reachable from anywhere on the
   page, not only by someone who scrolled to the end. Styled as an outlined
   pill rather than a solid button so it never competes with the download. */
nav.site a.donate {
  color: var(--accent);
  border: 1px solid rgb(56 189 248 / 0.45);
  background: rgb(56 189 248 / 0.1);
  border-radius: 999px;
  padding: 3px 13px;
  font-weight: 600;
}
nav.site a.donate:hover {
  color: var(--base);
  background: var(--accent);
  text-decoration: none;
}

/* ---------------------------------------------------------------- hero */
.hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid rgb(28 51 84 / 0.5);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 62ch;
}
.hero img.mascot {
  width: 210px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgb(56 189 248 / 0.12);
  border: 1px solid rgb(56 189 248 / 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  align-items: center;
}
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  transition: background-color 0.15s;
}
.btn:hover {
  text-decoration: none;
}
.btn-accent {
  background: var(--accent);
  color: var(--base);
}
.btn-accent:hover {
  background: var(--accent-strong);
}
.btn-ghost {
  background: var(--raised);
  color: var(--ink);
}
.btn-ghost:hover {
  background: rgb(28 51 84 / 0.7);
}
.cta-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The star ask. Deliberately a line of text under the buttons rather than a
   third button: starring is a favour, not a thing someone came here to do,
   and a button competing with Download would cost more than it gained. */
.star-note {
  margin: 16px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 56ch;
}
.star-note a {
  font-weight: 600;
}

/* ---------------------------------------------------------------- sections */
section {
  padding: 56px 0;
  border-bottom: 1px solid rgb(28 51 84 / 0.35);
}
section:last-of-type {
  border-bottom: 0;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.section-lead {
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 68ch;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid rgb(28 51 84 / 0.6);
  border-radius: var(--radius);
  padding: 20px;
}
.card p {
  color: var(--muted);
  margin: 0;
  font-size: 0.94rem;
}

/* Pipeline: a real list, styled as a flow. Screen readers get the steps in
   order; everyone else gets the diagram. */
ol.pipeline {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
ol.pipeline li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid rgb(28 51 84 / 0.6);
  border-radius: var(--radius);
  padding: 14px 18px 14px 56px;
  position: relative;
}
ol.pipeline li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(56 189 248 / 0.15);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
ol.pipeline strong {
  display: block;
}
ol.pipeline span {
  color: var(--muted);
  font-size: 0.92rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.table-scroll {
  overflow-x: auto;
}
th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgb(28 51 84 / 0.5);
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
td code {
  color: var(--accent);
}

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.88em;
  background: rgb(28 51 84 / 0.5);
  padding: 2px 6px;
  border-radius: 5px;
}
pre {
  background: var(--surface);
  border: 1px solid rgb(28 51 84 / 0.6);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
  color: var(--ink);
}

.note {
  background: rgb(56 189 248 / 0.08);
  border: 1px solid rgb(56 189 248 / 0.25);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--muted);
  font-size: 0.94rem;
}
.note strong {
  color: var(--ink);
}

ul.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
ul.ticks li {
  padding-left: 26px;
  position: relative;
  color: var(--muted);
}
ul.ticks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
ul.ticks strong {
  color: var(--ink);
}
/* Honest-fit markers. A limitation must never wear a green checkmark — on the
   "what it's built for" list that would read as a feature and cause exactly
   the surprise the section exists to prevent. */
ul.ticks li.partial::before {
  content: '~';
  color: var(--warn);
}
ul.ticks li.weak::before {
  content: '!';
  color: var(--muted);
}

/* ---------------------------------------------------------------- support
   Deliberately the same card as the one pinned to the bottom of the app's
   Dashboard: accent gradient, accent border, headline and a large button on
   the right. Someone who has used the app should recognise it. */
.support {
  background: linear-gradient(
    to right,
    rgb(56 189 248 / 0.15),
    rgb(56 189 248 / 0.25)
  );
  border: 1px solid rgb(56 189 248 / 0.4);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.support .body {
  flex: 1 1 340px;
}
.support .title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0;
}
.support p {
  margin: 6px 0 0;
  color: rgb(241 245 249 / 0.8);
  font-size: 1rem;
}
.support .btn {
  flex-shrink: 0;
  font-size: 1.05rem;
  padding: 13px 32px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer */
footer.site {
  border-top: 1px solid rgb(28 51 84 / 0.6);
  padding: 32px 0 44px;
  color: var(--muted);
  font-size: 0.9rem;
}
footer.site .cols {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
footer.site nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}

@media (max-width: 720px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero img.mascot {
    width: 130px;
  }
  nav.site {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
}