Spaces:
Running
Running
| /* 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 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| 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; | |
| } | |
| } | |