mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
bd9e9ab859
Adds Carnival, Lumen, Hum, and Cobalt to the catalogue (now 20 themes), each with its own tokens block, hero archetype, landing copy, and spec doc. Introduces Custom as a first-class route: when a brief carries real creative intent, Hallmark designs the whole page from first principles — palette, type, and structure — rather than recolouring a catalogue theme. Ships five worked custom examples and a README section. Rewrites the per-theme landing copy and reconciles every catalogue count across the site and the skill (20 themes · 21 macrostructures · 50 component archetypes · 70 slop-test gates). Drops the last competitor references from the CSS comments, fixes the genre rosters, and ignores the local example explorations so only the featured builds ship.
990 lines
29 KiB
CSS
990 lines
29 KiB
CSS
/* Hallmark · genre: modern-minimal · macrostructure: saas-product · theme: cobalt · enrichment: B · nav: bordered bar + ⌘K · footer: Ft1 */
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Modern reset
|
|
─────────────────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
* { margin: 0; }
|
|
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
|
|
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
img, picture, svg { display: block; max-width: 100%; }
|
|
ul, ol { list-style: none; padding: 0; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
|
|
:where(h1, h2, h3, h4) { font-weight: inherit; }
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Base
|
|
─────────────────────────────────────────────────────────── */
|
|
html {
|
|
font-family: var(--font-body);
|
|
background: var(--color-paper);
|
|
color: var(--color-ink-2);
|
|
scroll-behavior: smooth;
|
|
font-synthesis-weight: none;
|
|
/* clean cool paper + hairlines — no background pattern */
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
}
|
|
|
|
body {
|
|
font-size: var(--step-body);
|
|
line-height: var(--leading-body);
|
|
font-weight: var(--weight-body);
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
code, kbd, pre { font-family: var(--font-mono); }
|
|
|
|
/* shared frame — content sits in a centred max-width, full-bleed bands */
|
|
.nav__inner,
|
|
.hero,
|
|
.strip,
|
|
.features,
|
|
.pricing,
|
|
.foot {
|
|
width: 100%;
|
|
max-width: var(--maxw);
|
|
margin-inline: auto;
|
|
padding-inline: var(--gutter);
|
|
}
|
|
|
|
/* ─── Skip link ─── */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: var(--gutter);
|
|
top: -3.5em;
|
|
z-index: 100;
|
|
padding: 0.55rem 0.9rem;
|
|
background: var(--color-ink);
|
|
color: var(--color-accent-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-small);
|
|
letter-spacing: var(--tracking-label);
|
|
border-radius: var(--radius-btn);
|
|
transition: top 160ms var(--ease-out);
|
|
}
|
|
.skip-link:focus { top: 0.6rem; }
|
|
|
|
/* ─── Focus ─── */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ─── Shared atoms ─────────────────────────────────────────── */
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55em;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-small);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
.eyebrow__dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
font-family: var(--font-body);
|
|
font-weight: var(--weight-medium);
|
|
font-size: 0.9375rem;
|
|
line-height: 1;
|
|
padding: 0.7em 1.1em;
|
|
border-radius: var(--radius-btn);
|
|
border: var(--rule) solid transparent;
|
|
transition: background var(--t-quiet), border-color var(--t-quiet), color var(--t-quiet);
|
|
white-space: nowrap;
|
|
}
|
|
.btn--accent {
|
|
background: var(--color-accent);
|
|
color: var(--color-accent-ink);
|
|
}
|
|
.btn--accent:hover { background: oklch(53% 0.21 256); }
|
|
.btn--ghost {
|
|
border-color: var(--color-rule-2);
|
|
color: var(--color-ink);
|
|
background: var(--color-paper);
|
|
}
|
|
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
|
|
.btn--lg { padding: 0.85em 1.35em; font-size: 1rem; }
|
|
.btn--block { width: 100%; }
|
|
|
|
/* understated typographic link with cobalt underline-grow */
|
|
.link-arrow {
|
|
font-weight: var(--weight-medium);
|
|
color: var(--color-ink);
|
|
position: relative;
|
|
padding-bottom: 2px;
|
|
}
|
|
.link-arrow span { transition: transform var(--t-quiet); display: inline-block; }
|
|
.link-arrow::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; bottom: 0;
|
|
width: 100%; height: 1.5px;
|
|
background: var(--color-accent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--t-quiet);
|
|
}
|
|
.link-arrow:hover::after { transform: scaleX(1); }
|
|
.link-arrow:hover span { transform: translateX(3px); }
|
|
|
|
code:not(.code code):not(.strip__cmd):not(.foot__ver) {
|
|
font-size: 0.875em;
|
|
background: var(--color-paper-3);
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: 4px;
|
|
padding: 0.08em 0.36em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Nav · cool dev-tool bar, single hairline under, blur backdrop
|
|
─────────────────────────────────────────────────────────── */
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
border-bottom: var(--rule) solid var(--color-rule);
|
|
background: oklch(98.5% 0.004 250 / 0.78);
|
|
-webkit-backdrop-filter: saturate(180%) blur(12px);
|
|
backdrop-filter: saturate(180%) blur(12px);
|
|
transition: border-color var(--t-quiet), background var(--t-quiet);
|
|
}
|
|
.nav.is-scrolled { border-bottom-color: var(--color-rule-2); }
|
|
.nav__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
height: 60px;
|
|
}
|
|
.nav__brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55em;
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: 1.15rem;
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
}
|
|
.nav__mark {
|
|
width: 18px; height: 18px;
|
|
border-radius: 5px;
|
|
background: var(--color-accent);
|
|
position: relative;
|
|
flex: none;
|
|
}
|
|
.nav__mark::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 5px 5px auto auto;
|
|
width: 6px; height: 6px;
|
|
border-radius: 1px;
|
|
background: var(--color-accent-ink);
|
|
}
|
|
.nav__links {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-right: auto;
|
|
font-size: 0.9375rem;
|
|
}
|
|
.nav__links a {
|
|
color: var(--color-ink-2);
|
|
position: relative;
|
|
padding: 0.3em 0;
|
|
transition: color var(--t-quiet);
|
|
}
|
|
.nav__links a::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; bottom: -2px;
|
|
width: 100%; height: 1.5px;
|
|
background: var(--color-accent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--t-quiet);
|
|
}
|
|
.nav__links a:hover { color: var(--color-ink); }
|
|
.nav__links a:hover::after { transform: scaleX(1); }
|
|
.nav__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* ⌘K affordance — bordered, mono label, NOT a pill */
|
|
.cmdk {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
border: var(--rule) solid var(--color-rule-2);
|
|
border-radius: var(--radius-btn);
|
|
padding: 0.45rem 0.55rem 0.45rem 0.75rem;
|
|
color: var(--color-muted);
|
|
transition: border-color var(--t-quiet), color var(--t-quiet);
|
|
}
|
|
.cmdk:hover { border-color: var(--color-accent); color: var(--color-ink); }
|
|
.cmdk__label { font-size: 0.875rem; }
|
|
.cmdk__keys {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ink-2);
|
|
background: var(--color-paper-3);
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: 4px;
|
|
padding: 0.1rem 0.35rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Hero · asymmetric — copy left, live demo right
|
|
─────────────────────────────────────────────────────────── */
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.08fr);
|
|
gap: clamp(2rem, 5vw, 4.5rem);
|
|
align-items: center;
|
|
padding-top: clamp(3.5rem, 7vw, 6rem);
|
|
padding-bottom: var(--section-y);
|
|
}
|
|
.hero__title {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: var(--step-hero);
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
margin-top: 1.1rem;
|
|
text-wrap: balance;
|
|
}
|
|
.hero__lede {
|
|
font-size: var(--step-lede);
|
|
line-height: 1.55;
|
|
color: var(--color-ink-2);
|
|
max-width: 46ch;
|
|
margin-top: 1.35rem;
|
|
}
|
|
.hero__cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero__meta {
|
|
margin-top: 1.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--color-muted);
|
|
}
|
|
.hero__meta code, .hero__lede code { font-weight: var(--weight-medium); }
|
|
|
|
/* ─── The demo stack ─── */
|
|
.demo {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
/* ─── Code cards on graphite ─── */
|
|
.code-card {
|
|
background: var(--color-graphite);
|
|
border: var(--rule) solid var(--color-graphite-3);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
}
|
|
.code-card__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
padding: 0.6rem 0.9rem;
|
|
background: var(--color-graphite-2);
|
|
border-bottom: var(--rule) solid var(--color-graphite-3);
|
|
}
|
|
.code-card__dots { display: inline-flex; gap: 0.4rem; }
|
|
.code-card__dots i {
|
|
width: 9px; height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--color-graphite-3);
|
|
}
|
|
.code-card__file {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--code-dim);
|
|
}
|
|
.code-card__file--res { margin-right: auto; }
|
|
|
|
.status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45em;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--code-accent);
|
|
background: oklch(58% 0.20 256 / 0.16);
|
|
border: var(--rule) solid oklch(58% 0.20 256 / 0.3);
|
|
border-radius: 4px;
|
|
padding: 0.18rem 0.5rem;
|
|
line-height: 1;
|
|
}
|
|
.status-chip__dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--code-accent);
|
|
}
|
|
|
|
.code {
|
|
margin: 0;
|
|
padding: 1.1rem 1.15rem;
|
|
font-size: var(--step-code);
|
|
line-height: 1.7;
|
|
color: var(--code-text);
|
|
overflow-x: auto;
|
|
tab-size: 2;
|
|
}
|
|
.code code { font-family: var(--font-mono); white-space: pre; }
|
|
|
|
/* syntax tokens */
|
|
.c-method, .c-key, .c-kw, .c-accent { color: var(--code-accent); }
|
|
.c-fn { color: oklch(82% 0.09 200); }
|
|
.c-str { color: var(--code-string); }
|
|
.c-num, .c-bool { color: oklch(80% 0.08 70); }
|
|
.c-punc, .c-flag { color: var(--code-dim); }
|
|
.c-dim { color: var(--code-dim); }
|
|
.c-comment { color: var(--code-dim); font-style: italic; }
|
|
|
|
/* typed-in line + cursor */
|
|
.type { color: var(--code-string); }
|
|
.c-cursor {
|
|
display: inline-block;
|
|
width: 0.55em; height: 1.05em;
|
|
vertical-align: -0.18em;
|
|
background: var(--code-accent);
|
|
margin-left: 1px;
|
|
opacity: 0;
|
|
}
|
|
.c-cursor.is-blinking { animation: blink 1s steps(2, start) 3; opacity: 1; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Quick-start strip · thin hairline band
|
|
─────────────────────────────────────────────────────────── */
|
|
.strip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 2rem clamp(1.5rem, 5vw, 4rem);
|
|
flex-wrap: wrap;
|
|
padding-block: 1.6rem;
|
|
border-top: var(--rule) solid var(--color-rule);
|
|
border-bottom: var(--rule) solid var(--color-rule);
|
|
}
|
|
.strip__install {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
}
|
|
.strip__label {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-small);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
.strip__cmd {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
border: var(--rule) solid var(--color-rule-2);
|
|
border-radius: var(--radius-btn);
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--color-paper-2);
|
|
}
|
|
.strip__cmd .c-dim { color: var(--color-muted); }
|
|
.strip__cmd .c-accent { color: var(--color-accent); font-weight: var(--weight-medium); }
|
|
.strip__copy {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-muted);
|
|
border: var(--rule) solid transparent;
|
|
border-radius: var(--radius-btn);
|
|
padding: 0.35rem 0.55rem;
|
|
transition: color var(--t-quiet), border-color var(--t-quiet);
|
|
}
|
|
.strip__copy:hover { color: var(--color-accent); border-color: var(--color-rule-2); }
|
|
.strip__copy.is-copied { color: var(--color-accent); }
|
|
|
|
.strip__trust {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.trust {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.trust li {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-medium);
|
|
font-size: 0.9375rem;
|
|
letter-spacing: var(--tracking-snug);
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Features · asymmetric — one wide code block + two narrow points
|
|
─────────────────────────────────────────────────────────── */
|
|
.features { padding-block: var(--section-y); }
|
|
.features__head { max-width: 60ch; }
|
|
.features__title {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: var(--step-section);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
margin-top: 0.9rem;
|
|
text-wrap: balance;
|
|
}
|
|
.features__lede {
|
|
font-size: var(--step-lede);
|
|
color: var(--color-ink-2);
|
|
margin-top: 1.1rem;
|
|
max-width: 54ch;
|
|
}
|
|
|
|
.features__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--rule);
|
|
margin-top: clamp(2.5rem, 5vw, 4rem);
|
|
background: var(--color-rule); /* hairline gridlines between cells */
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: var(--radius-card);
|
|
overflow: hidden;
|
|
}
|
|
.feature {
|
|
background: var(--color-paper);
|
|
padding: clamp(1.5rem, 3vw, 2.25rem);
|
|
}
|
|
/* wide cell spans both columns */
|
|
.feature--wide {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
|
|
gap: clamp(1.5rem, 4vw, 3rem);
|
|
align-items: center;
|
|
}
|
|
.feature__kicker {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-small);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.feature__num {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--color-rule-2);
|
|
margin-bottom: 0.9rem;
|
|
}
|
|
.feature__title {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-medium);
|
|
font-size: 1.375rem;
|
|
line-height: 1.2;
|
|
letter-spacing: var(--tracking-snug);
|
|
color: var(--color-ink);
|
|
}
|
|
.feature__body {
|
|
margin-top: 0.7rem;
|
|
color: var(--color-ink-2);
|
|
font-size: 1rem;
|
|
max-width: 42ch;
|
|
}
|
|
.feature__list {
|
|
margin-top: 1.1rem;
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
}
|
|
.feature__list li {
|
|
position: relative;
|
|
padding-left: 1.3rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink-2);
|
|
}
|
|
.feature__list li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0.62em;
|
|
width: 7px; height: 7px;
|
|
border: 1.5px solid var(--color-accent);
|
|
border-bottom: 0; border-left: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
.feature__list code { font-size: 0.85em; }
|
|
|
|
.code-card--inline { box-shadow: var(--shadow-card); }
|
|
.code-card--inline .code { font-size: 0.8125rem; }
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Quickstart · FULL-BLEED DARK graphite band — Cobalt's signature
|
|
Light text, lighter cool hairlines, cobalt pops. Light → dark → light.
|
|
─────────────────────────────────────────────────────────── */
|
|
.quickstart {
|
|
/* a hair darker than the code-card ground for depth */
|
|
background: oklch(20% 0.016 260);
|
|
color: var(--color-quick-ink);
|
|
border-top: var(--rule) solid var(--color-graphite-3);
|
|
border-bottom: var(--rule) solid var(--color-graphite-3);
|
|
padding-block: var(--section-y);
|
|
}
|
|
.quickstart__inner {
|
|
width: 100%;
|
|
max-width: var(--maxw);
|
|
margin-inline: auto;
|
|
padding-inline: var(--gutter);
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr);
|
|
gap: clamp(2rem, 5vw, 4.5rem);
|
|
align-items: center;
|
|
}
|
|
.eyebrow--dark { color: var(--color-quick-muted); }
|
|
.quickstart__title {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: var(--step-section);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-quick-ink);
|
|
margin-top: 0.9rem;
|
|
text-wrap: balance;
|
|
}
|
|
.quickstart__lede {
|
|
font-size: var(--step-lede);
|
|
line-height: 1.55;
|
|
color: var(--color-quick-ink-2);
|
|
margin-top: 1.1rem;
|
|
max-width: 42ch;
|
|
}
|
|
.quickstart__lede code {
|
|
font-size: 0.875em;
|
|
background: oklch(27% 0.018 260);
|
|
border: var(--rule) solid var(--color-graphite-3);
|
|
border-radius: 4px;
|
|
padding: 0.08em 0.36em;
|
|
color: var(--code-accent);
|
|
}
|
|
.quickstart__meta { margin-top: 1.6rem; }
|
|
.quickstart__link {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--code-accent);
|
|
position: relative;
|
|
padding-bottom: 2px;
|
|
}
|
|
.quickstart__link span { transition: transform var(--t-quiet); display: inline-block; }
|
|
.quickstart__link::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; bottom: 0;
|
|
width: 100%; height: 1.5px;
|
|
background: var(--code-accent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--t-quiet);
|
|
}
|
|
.quickstart__link:hover::after { transform: scaleX(1); }
|
|
.quickstart__link:hover span { transform: translateX(3px); }
|
|
|
|
/* the code card on the dark band reads as a slightly raised inset */
|
|
.code-card--quick {
|
|
background: var(--color-graphite);
|
|
border-color: var(--color-graphite-3);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Pricing · hairline-framed plans, one cobalt CTA
|
|
─────────────────────────────────────────────────────────── */
|
|
.pricing {
|
|
padding-block: var(--section-y);
|
|
border-top: var(--rule) solid var(--color-rule);
|
|
}
|
|
.pricing__head { max-width: 50ch; }
|
|
.pricing__title {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: var(--step-section);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
margin-top: 0.9rem;
|
|
}
|
|
.pricing__lede {
|
|
font-size: var(--step-lede);
|
|
color: var(--color-ink-2);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.plans {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
margin-top: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
.plan {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.6rem;
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: var(--radius-card);
|
|
background: var(--color-paper);
|
|
position: relative;
|
|
transition: border-color var(--t-quiet);
|
|
}
|
|
.plan:hover { border-color: var(--color-rule-2); }
|
|
.plan--feature {
|
|
border-color: var(--color-accent);
|
|
background: var(--color-paper-2);
|
|
}
|
|
.plan--feature:hover { border-color: var(--color-accent); }
|
|
.plan__badge {
|
|
position: absolute;
|
|
top: -0.7rem; left: 1.6rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-accent-ink);
|
|
background: var(--color-accent);
|
|
border-radius: 4px;
|
|
padding: 0.25rem 0.5rem;
|
|
line-height: 1;
|
|
}
|
|
.plan__name {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-medium);
|
|
font-size: 1.0625rem;
|
|
letter-spacing: var(--tracking-snug);
|
|
color: var(--color-ink);
|
|
}
|
|
.plan__price { margin-top: 1rem; }
|
|
.plan__num {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: clamp(1.9rem, 3vw, 2.4rem);
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
}
|
|
.plan__unit {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-muted);
|
|
margin-top: 0.3rem;
|
|
}
|
|
.plan__list {
|
|
display: grid;
|
|
gap: 0.6rem;
|
|
margin: 1.4rem 0;
|
|
padding-top: 1.4rem;
|
|
border-top: var(--rule) solid var(--color-rule);
|
|
}
|
|
.plan__list li {
|
|
position: relative;
|
|
padding-left: 1.3rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink-2);
|
|
}
|
|
.plan__list li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0.62em;
|
|
width: 7px; height: 7px;
|
|
border: 1.5px solid var(--color-accent);
|
|
border-bottom: 0; border-left: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
.plan .btn { margin-top: auto; }
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Footer · Ft1 mast-headed
|
|
─────────────────────────────────────────────────────────── */
|
|
.foot {
|
|
padding-top: clamp(3rem, 6vw, 5rem);
|
|
padding-bottom: 2rem;
|
|
border-top: var(--rule) solid var(--color-rule-2);
|
|
}
|
|
.foot__top {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
|
|
gap: clamp(2rem, 5vw, 4rem);
|
|
padding-bottom: clamp(2.5rem, 5vw, 4rem);
|
|
}
|
|
.foot__brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55em;
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semi);
|
|
font-size: 1.2rem;
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
}
|
|
.foot__tagline {
|
|
margin-top: 0.9rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-muted);
|
|
max-width: 28ch;
|
|
}
|
|
.foot__cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
.foot__heading {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-small);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-ink);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.foot__col a {
|
|
display: block;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink-2);
|
|
padding: 0.28rem 0;
|
|
width: fit-content;
|
|
transition: color var(--t-quiet);
|
|
}
|
|
.foot__col a:hover { color: var(--color-accent); }
|
|
.foot__bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding-top: 1.5rem;
|
|
border-top: var(--rule) solid var(--color-rule);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-muted);
|
|
}
|
|
.foot__set { margin-right: auto; margin-left: 1.5rem; }
|
|
.foot__ver {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-muted);
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: 4px;
|
|
padding: 0.15rem 0.45rem;
|
|
background: var(--color-paper-2);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Command palette · ⌘K — cool near-white panel, hairline, one soft shadow
|
|
─────────────────────────────────────────────────────────── */
|
|
.palette[hidden] { display: none; }
|
|
.palette {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 200;
|
|
display: grid;
|
|
/* sit a little above centre — classic command-palette placement */
|
|
grid-template-rows: 12vh auto 1fr;
|
|
justify-items: center;
|
|
padding-inline: 1rem;
|
|
}
|
|
.palette__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: oklch(22% 0.016 260 / 0.42);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
animation: palette-fade var(--t-quiet);
|
|
}
|
|
.palette__panel {
|
|
grid-row: 2;
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
background: var(--color-paper);
|
|
border: var(--rule) solid var(--color-rule-2);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: 0 18px 48px oklch(22% 0.016 260 / 0.18);
|
|
overflow: hidden;
|
|
animation: palette-rise 220ms var(--ease-out);
|
|
}
|
|
.palette__label {
|
|
position: absolute;
|
|
width: 1px; height: 1px;
|
|
padding: 0; margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.palette__field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.95rem 1.1rem;
|
|
border-bottom: var(--rule) solid var(--color-rule);
|
|
}
|
|
.palette__prompt {
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
}
|
|
.palette__input {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
/* blinking cobalt caret */
|
|
caret-color: var(--color-accent);
|
|
}
|
|
.palette__input::placeholder { color: var(--color-muted); }
|
|
.palette__list {
|
|
max-height: 46vh;
|
|
overflow-y: auto;
|
|
padding: 0.4rem;
|
|
}
|
|
.palette__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.6rem 0.7rem 0.6rem 0.85rem;
|
|
border-radius: var(--radius-btn);
|
|
border-left: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: background var(--t-quiet), border-color var(--t-quiet), color var(--t-quiet);
|
|
}
|
|
.palette__row[hidden] { display: none; }
|
|
/* selected/hovered row gets a cobalt left-edge + cobalt label */
|
|
.palette__row[aria-selected="true"] {
|
|
background: var(--color-accent-dim);
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
.palette__row[aria-selected="true"] .palette__row-label { color: var(--color-accent); }
|
|
.palette__row-label {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
transition: color var(--t-quiet);
|
|
}
|
|
.palette__row-hint {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--color-muted);
|
|
}
|
|
.palette__empty {
|
|
padding: 1rem 0.85rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-muted);
|
|
}
|
|
.palette__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
padding: 0.7rem 1.1rem;
|
|
border-top: var(--rule) solid var(--color-rule);
|
|
font-size: 0.75rem;
|
|
color: var(--color-muted);
|
|
background: var(--color-paper-2);
|
|
}
|
|
.palette__foot kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--color-ink-2);
|
|
background: var(--color-paper-3);
|
|
border: var(--rule) solid var(--color-rule);
|
|
border-radius: 4px;
|
|
padding: 0.08rem 0.32rem;
|
|
line-height: 1;
|
|
margin-right: 1px;
|
|
}
|
|
@keyframes palette-fade { from { opacity: 0; } }
|
|
@keyframes palette-rise { from { opacity: 0; transform: translateY(8px); } }
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Motion · IntersectionObserver reveals (fade + ~10px rise)
|
|
─────────────────────────────────────────────────────────── */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(var(--reveal-dist));
|
|
transition:
|
|
opacity var(--reveal-dur) var(--ease-out),
|
|
transform var(--reveal-dur) var(--ease-out);
|
|
transition-delay: calc(var(--i, 0) * 70ms);
|
|
}
|
|
.reveal.is-inview {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.reveal { opacity: 1; transform: none; transition: none; }
|
|
.c-cursor, .c-cursor.is-blinking { animation: none; opacity: 1; }
|
|
.palette__panel, .palette__backdrop { animation: none; }
|
|
.palette__row, .palette__row-label { transition: none; }
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────────────
|
|
Responsive
|
|
─────────────────────────────────────────────────────────── */
|
|
@media (max-width: 920px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
gap: 2.5rem;
|
|
padding-top: 3rem;
|
|
}
|
|
.hero__lede { max-width: 56ch; }
|
|
.feature--wide { grid-template-columns: 1fr; }
|
|
.quickstart__inner { grid-template-columns: 1fr; gap: 2.25rem; }
|
|
.foot__top { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.nav__links { display: none; }
|
|
.cmdk__label { display: none; }
|
|
.features__grid { grid-template-columns: 1fr; }
|
|
.plans { grid-template-columns: 1fr; }
|
|
.plan--feature { order: -1; }
|
|
.strip { gap: 1.5rem; }
|
|
}
|
|
|
|
@media (max-width: 460px) {
|
|
.hero__cta { gap: 1rem; }
|
|
.strip__install { width: 100%; }
|
|
.strip__cmd { flex: 1; }
|
|
}
|