mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
78167667a2
REMOVED (per user direction — imagery is on hold for now): - site/img/generated/ (18 watercolor PNGs + contact sheet + URL cache) - scripts/generate-marketing.mjs - skill/_assets/scripts/generate.mjs (user-recipe drop-in) - skill/references/generated-imagery.md - All imagery markup in site/index.html (transitions, foundation panel plates, harness plates, footer mark) - The .wc / .transition / .slot--hero::before / #study::before / .found-panel__plate / .harness__plate / .foot-mark CSS block from sections.css - Tier C "peer of Tier B" rewrite reverted — back to "last resort, only when characters demand it" - Anti-pattern "Raw generated stills" entry reverted - assets.md Tier C catalog reverted to Nanobanana 2 / Gemini 2.5 Flash baseline - README v0.9.0 release note rewritten without imagery mentions KEPT: - Editorial theme (#23) — open-design-inspired premium · warm cream + coral + Inter Tight × Playfair italic - Open-design steal utilities — Roman-numeral section heads (.num--roman), corner-bracket image annotation (.fig-corners), dark-slab section reversal (.section--invert), pulse animation (.pulse), .tnum tabular-numerals utility, smart-hide banner stub (.banner--smart) - 22 → 23 theme catalog refresh across SKILL.md, custom-theme.md, structure.md, README, site - Version 0.8.0 → 0.9.0 NEW: Spacing pass — normalized internal rhythm across all 23 themes - --section-gap normalized: was 4.5–12rem (huge variance), now 5.5–6.5rem (uniform feel) · Atelier 12 → 6.5 (biggest cut) · Quiet 10 → 6.5 · Linen 10 → 6.5 · Aurora 10 → 6.5 · Garden 9 → 6.5 · Salon 9 → 6.5 · Bloom 9 → 6.5 · Specimen 8 → 6.5 · Almanac 4.5 → 5.5 (slight bump) - --section-head-gap normalized: was 1–3.5rem, now 1.25–1.75rem (smaller spread) - .section { gap: var(--space-2xl) } → var(--space-xl) — content sits closer to its head; less air inside each section - Editorial theme block gains explicit --section-gap + --section-head-gap (was inheriting from :root) Visual: every theme now has the same vertical rhythm (~6rem between sections, ~1.5rem under heads). The page reads as one document instead of 23 different ones.
375 lines
12 KiB
HTML
375 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Nexus — the AI-powered platform for modern teams</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" />
|
||
<style>
|
||
/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=feature-card, steps=3
|
||
* theme: Plain · accent: deep-ink-blue ~2% · enrichment: none (typography only)
|
||
* studied: no · context: redesign — copy & IA preserved, structure & visual rebuilt
|
||
*/
|
||
:root {
|
||
--color-paper: oklch(100% 0 0);
|
||
--color-paper-2: oklch(98% 0.005 240);
|
||
--color-paper-3: oklch(95% 0.006 240);
|
||
--color-rule: oklch(86% 0.008 240);
|
||
--color-ink: oklch(18% 0.014 245);
|
||
--color-ink-soft: oklch(46% 0.014 245);
|
||
--color-ink-muted: oklch(66% 0.014 245);
|
||
--color-accent: oklch(36% 0.18 248);
|
||
|
||
--font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
|
||
|
||
--space-2xs: 0.5rem;
|
||
--space-xs: 0.75rem;
|
||
--space-sm: 1rem;
|
||
--space-md: 1.5rem;
|
||
--space-lg: 2rem;
|
||
--space-xl: 3rem;
|
||
--space-2xl: 4.5rem;
|
||
--space-3xl: 6.5rem;
|
||
|
||
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
--dur-micro: 120ms;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { overflow-x: clip; }
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--color-paper);
|
||
color: var(--color-ink);
|
||
line-height: 1.55;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.page { max-width: 76rem; margin: 0 auto; padding: 0 var(--space-lg); }
|
||
|
||
/* Masthead */
|
||
.masthead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-md) 0;
|
||
border-block-end: 1px solid var(--color-rule);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--color-ink-soft);
|
||
}
|
||
.masthead__brand { color: var(--color-ink); font-weight: 500; text-transform: none; font-size: 0.9375rem; font-family: var(--font-display); letter-spacing: 0; }
|
||
.masthead__brand .dot { color: var(--color-accent); }
|
||
|
||
/* Hero — left-bias, no centering, no gradient */
|
||
.hero {
|
||
padding: var(--space-3xl) 0 var(--space-2xl);
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||
gap: var(--space-2xl);
|
||
align-items: end;
|
||
border-block-end: 1px solid var(--color-rule);
|
||
}
|
||
|
||
.hero__copy { max-width: 32rem; }
|
||
|
||
.hero__eyebrow {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-accent);
|
||
margin-block-end: var(--space-sm);
|
||
}
|
||
|
||
.hero__head {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
margin-block-end: var(--space-md);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.hero__head em {
|
||
font-style: italic;
|
||
color: var(--color-accent);
|
||
font-weight: 400;
|
||
}
|
||
|
||
.hero__sub {
|
||
font-size: 1.125rem;
|
||
line-height: 1.55;
|
||
color: var(--color-ink-soft);
|
||
max-width: 50ch;
|
||
margin-block-end: var(--space-lg);
|
||
}
|
||
|
||
.hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5ch;
|
||
padding: var(--space-sm) var(--space-md);
|
||
font-family: var(--font-display);
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
border: 1px solid var(--color-rule);
|
||
background: transparent;
|
||
color: var(--color-ink);
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
border-radius: 2px;
|
||
transition: background var(--dur-micro) var(--ease-out),
|
||
border-color var(--dur-micro) var(--ease-out),
|
||
color var(--dur-micro) var(--ease-out);
|
||
}
|
||
|
||
.btn--primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
|
||
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-ink); border-color: var(--color-ink); }
|
||
.btn:hover, .btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
|
||
.btn--primary:hover, .btn--primary:focus-visible { color: var(--color-paper); }
|
||
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
|
||
|
||
.hero__pull {
|
||
border-inline-start: 3px solid var(--color-accent);
|
||
padding-inline-start: var(--space-md);
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.hero__pull-attr {
|
||
display: block;
|
||
font-style: normal;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.06em;
|
||
color: var(--color-ink-soft);
|
||
margin-block-start: var(--space-sm);
|
||
}
|
||
|
||
/* Workbench */
|
||
.workbench {
|
||
padding: var(--space-3xl) 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--space-2xl);
|
||
border-block-end: 1px solid var(--color-rule);
|
||
}
|
||
|
||
.steps { display: grid; gap: var(--space-3xl); }
|
||
|
||
.step {
|
||
border-inline-start: 2px solid var(--color-rule);
|
||
padding-inline-start: var(--space-lg);
|
||
transition: border-color var(--dur-micro) var(--ease-out);
|
||
}
|
||
.step:hover, .step:focus-within { border-inline-start-color: var(--color-accent); }
|
||
|
||
.step__num {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.12em;
|
||
color: var(--color-accent);
|
||
text-transform: uppercase;
|
||
margin-block-end: var(--space-sm);
|
||
}
|
||
|
||
.step__head {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||
font-weight: 500;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin-block-end: var(--space-md);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.step__body {
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
color: var(--color-ink-soft);
|
||
max-width: 48ch;
|
||
}
|
||
|
||
.pinned {
|
||
position: sticky;
|
||
top: var(--space-xl);
|
||
align-self: start;
|
||
background: var(--color-paper-2);
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 4px;
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.pinned__label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.6875rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-ink-soft);
|
||
margin-block-end: var(--space-sm);
|
||
}
|
||
|
||
.pinned__head {
|
||
font-family: var(--font-display);
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
margin-block-end: var(--space-md);
|
||
}
|
||
|
||
.pinned__body {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.6;
|
||
color: var(--color-ink);
|
||
background: var(--color-paper);
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 2px;
|
||
padding: var(--space-md);
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.pinned__body .k { color: var(--color-accent); }
|
||
.pinned__body .c { color: var(--color-ink-muted); }
|
||
|
||
/* CTA strip — single line */
|
||
.cta-strip {
|
||
padding: var(--space-2xl) 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: var(--space-lg);
|
||
align-items: center;
|
||
border-block-end: 1px solid var(--color-rule);
|
||
}
|
||
|
||
.cta-strip__head {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||
font-weight: 500;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.15;
|
||
margin: 0;
|
||
}
|
||
|
||
.cta-strip__head em { font-style: italic; color: var(--color-accent); font-weight: 400; }
|
||
|
||
.cta-strip__sub {
|
||
font-family: var(--font-body);
|
||
font-size: 1rem;
|
||
color: var(--color-ink-soft);
|
||
margin-block-start: var(--space-2xs);
|
||
}
|
||
|
||
/* Colophon */
|
||
.colophon {
|
||
padding: var(--space-md) 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--color-ink-soft);
|
||
}
|
||
|
||
@media (max-width: 56rem) {
|
||
.hero { grid-template-columns: 1fr; }
|
||
.workbench { grid-template-columns: 1fr; }
|
||
.pinned { position: static; }
|
||
.cta-strip { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.step, .btn { transition: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<header class="masthead">
|
||
<span class="masthead__brand">Nexus<span class="dot">.</span></span>
|
||
<span>est. 2026 · for product teams of 5–500</span>
|
||
</header>
|
||
|
||
<!-- Hero — same words as input, different shape -->
|
||
<section class="hero">
|
||
<div class="hero__copy">
|
||
<p class="hero__eyebrow">v0.4 · for product teams</p>
|
||
<h1 class="hero__head">The AI-powered platform <em>for modern teams.</em></h1>
|
||
<p class="hero__sub">
|
||
Nexus helps you ship faster, collaborate smarter, and scale seamlessly with AI-native
|
||
workflows built for the way teams work today.
|
||
</p>
|
||
<div class="hero__cta">
|
||
<a class="btn btn--primary" href="#">Get started free</a>
|
||
<a class="btn" href="#">Read the docs</a>
|
||
</div>
|
||
</div>
|
||
<aside class="hero__pull">
|
||
Join 50,000+ teams already building with Nexus.
|
||
<span class="hero__pull-attr">— count as of Q1 · the only stat we'll cite this page</span>
|
||
</aside>
|
||
</section>
|
||
|
||
<!-- Workbench — same three feature copy blocks, walked through, pinned-panel -->
|
||
<section class="workbench">
|
||
<div class="steps">
|
||
<article class="step">
|
||
<p class="step__num">step 01 · onboard</p>
|
||
<h2 class="step__head">Lightning fast.</h2>
|
||
<p class="step__body">Get up and running in seconds with our AI-native onboarding flow.</p>
|
||
</article>
|
||
|
||
<article class="step">
|
||
<p class="step__num">step 02 · scale</p>
|
||
<h2 class="step__head">Built to scale.</h2>
|
||
<p class="step__body">From startup to enterprise — Nexus grows with you, every step of the way.</p>
|
||
</article>
|
||
|
||
<article class="step">
|
||
<p class="step__num">step 03 · ship</p>
|
||
<h2 class="step__head">Built for the modern team.</h2>
|
||
<p class="step__body">Tools that get out of your way and let your team do their best work.</p>
|
||
</article>
|
||
</div>
|
||
|
||
<aside class="pinned" aria-label="Pinned demo">
|
||
<p class="pinned__label">Try it in your terminal</p>
|
||
<h3 class="pinned__head">A 4-line getting-started.</h3>
|
||
<pre class="pinned__body"><span class="c"># install</span>
|
||
<span class="k">$</span> npx nexus init my-team
|
||
|
||
<span class="c"># open the dashboard</span>
|
||
<span class="k">$</span> nexus open</pre>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="cta-strip">
|
||
<div>
|
||
<h2 class="cta-strip__head">Ready to <em>ship faster?</em></h2>
|
||
<p class="cta-strip__sub">Open a free workspace; no credit card; cancel from the email.</p>
|
||
</div>
|
||
<div class="hero__cta">
|
||
<a class="btn btn--primary" href="#">Start your free trial →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="colophon">
|
||
© 2026 Nexus, Inc. · All rights reserved.
|
||
</footer>
|
||
</main>
|
||
</body>
|
||
</html>
|