/* ========================================================================== v2-kits-v20260508d.css — Deskrune /kits/ updates infrastructure -------------------------------------------------------------------------- Page-scoped layer for the public kit-updates hub at /kits/ and the seven per-kit changelog pages at /kits/{slug}/. Why this stylesheet exists at all: The /kits/ pages have one job — be a calm, bookmark-friendly URL where buyers (and direct-Stripe buyers without Gumroad accounts) come back to grab the latest version of any kit they own. No login, no portal, no email gate. The visual design has to telegraph that immediately: - thin, calm grid - cover thumbnails that feel like a real shelf, not marketing - changelog typography that reads like a real engineer's notes - no urgency, no "limited time", no marketing buttons Scope: every rule below is scoped under .v2-kits-page on so it cannot leak into any other surface even when stacked into the cascade alongside style-v20260508a.css and the v2-* layers. Loaded LAST (after the blocks/elements/parity layers) so its rules win when there's a conflict on a kit page specifically. ========================================================================== */ /* -------------------------------------------------------------------------- Local design tokens — re-aliased from the global theme so changes here don't drift the rest of the site. -------------------------------------------------------------------------- */ .v2-kits-page { --kits-fg: var(--text-primary, #1a1a1a); --kits-fg-muted: var(--text-secondary, #5a5a55); --kits-bg: var(--bg-primary, #fafaf7); --kits-bg-warm: var(--bg-warm, #f4f1ea); --kits-bg-card: var(--bg-card, #ffffff); --kits-rule: var(--border-subtle, #e8e6dc); --kits-rule-strong: var(--border-default, #d4d1c5); --kits-accent: var(--accent, #1a1a1a); /* Spacing — 8px grid. Kept local so the rhythm stays predictable across the index hub and the per-kit subpages. */ --kits-gap-1: 0.5rem; /* 8px — within-card spacing */ --kits-gap-2: 1rem; /* 16px — between meta lines */ --kits-gap-3: 1.5rem; /* 24px — between sections within a card */ --kits-gap-4: 2rem; /* 32px — between cards in the grid */ --kits-gap-5: 3rem; /* 48px — between page sections */ --kits-gap-6: 4.5rem; /* 72px — top/bottom of
*/ } /* -------------------------------------------------------------------------- Layout shell — 60ch reading column for prose, 1100px max for the grid. -------------------------------------------------------------------------- */ .v2-kits-page main { padding: var(--kits-gap-6) 0; } .kits-shell { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .kits-shell--narrow { max-width: 720px; } /* -------------------------------------------------------------------------- Hub hero — /kits/ index only. Quiet header, no marketing badge. The point is "you're in the right place, here's what this page is for." Two sentences max above the grid. -------------------------------------------------------------------------- */ .kits-hero { padding-bottom: var(--kits-gap-5); border-bottom: 1px solid var(--kits-rule); margin-bottom: var(--kits-gap-5); } .kits-hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kits-fg-muted); margin: 0 0 var(--kits-gap-2); } .kits-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--kits-gap-3); color: var(--kits-fg); } .kits-hero__lede { font-size: 1.125rem; line-height: 1.55; color: var(--kits-fg); max-width: 60ch; margin: 0; } .kits-hero__lede + .kits-hero__lede { margin-top: var(--kits-gap-2); color: var(--kits-fg-muted); } /* -------------------------------------------------------------------------- Kit grid — 2 columns at md, 3 at lg. Bundles span 2 columns at lg so they read as "the bigger thing". -------------------------------------------------------------------------- */ .kits-grid { display: grid; grid-template-columns: 1fr; gap: var(--kits-gap-4); list-style: none; padding: 0; margin: 0 0 var(--kits-gap-5); } @media (min-width: 600px) { .kits-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 920px) { .kits-grid { grid-template-columns: repeat(3, 1fr); } .kits-grid > .kit-card--bundle { grid-column: span 1; } } /* -------------------------------------------------------------------------- Kit card — cover thumbnail + meta + actions. Card is wrapped in
for landmark semantics; the entire card is NOT a single link because we want two distinct CTAs (download vs view changelog). The card-title is the link to the per-kit page. -------------------------------------------------------------------------- */ .kit-card { display: flex; flex-direction: column; gap: var(--kits-gap-3); padding: var(--kits-gap-3); background: var(--kits-bg-card); border: 1px solid var(--kits-rule); border-radius: 8px; transition: border-color 120ms ease; } .kit-card:hover, .kit-card:focus-within { border-color: var(--kits-rule-strong); } /* Cover thumbnail — 2:3 ratio (matches the 1000×1500 SVGs in /assets/covers/). object-fit:contain keeps the full cover visible inside the frame; loading=lazy on the tag handles perf. */ .kit-card__cover { display: block; width: 100%; aspect-ratio: 2 / 3; background: var(--kits-bg-warm); border: 1px solid var(--kits-rule); border-radius: 4px; overflow: hidden; } .kit-card__cover img { width: 100%; height: 100%; object-fit: contain; display: block; } .kit-card__title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.25rem; line-height: 1.25; margin: 0; letter-spacing: -0.005em; } .kit-card__title a { color: var(--kits-fg); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; } .kit-card__title a:hover, .kit-card__title a:focus-visible { border-bottom-color: var(--kits-fg); } .kit-card__title a:focus-visible { outline: 2px solid var(--kits-accent); outline-offset: 4px; border-radius: 2px; } .kit-card__desc { font-size: 0.95rem; line-height: 1.5; color: var(--kits-fg-muted); margin: 0; } .kit-card__meta { display: flex; align-items: center; gap: var(--kits-gap-2); font-size: 0.8125rem; color: var(--kits-fg-muted); letter-spacing: 0.01em; } .kit-card__version { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; background: var(--kits-bg-warm); border: 1px solid var(--kits-rule); border-radius: 3px; padding: 0.125rem 0.5rem; } /* Action row at the bottom of each card — pin to the bottom so cards in a row align even when titles wrap to different heights. */ .kit-card__actions { display: flex; flex-wrap: wrap; gap: var(--kits-gap-2); margin-top: auto; padding-top: var(--kits-gap-2); border-top: 1px solid var(--kits-rule); } .kit-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; border-radius: 4px; transition: background-color 120ms ease, border-color 120ms ease; min-height: 44px; /* WCAG 2.5.5 target size */ } .kit-card__btn--primary { background: var(--kits-fg); color: var(--kits-bg); border: 1px solid var(--kits-fg); } .kit-card__btn--primary:hover, .kit-card__btn--primary:focus-visible { background: var(--kits-fg-muted); border-color: var(--kits-fg-muted); } .kit-card__btn--secondary { background: transparent; color: var(--kits-fg); border: 1px solid var(--kits-rule-strong); } .kit-card__btn--secondary:hover, .kit-card__btn--secondary:focus-visible { border-color: var(--kits-fg); } .kit-card__btn:focus-visible { outline: 2px solid var(--kits-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- "How updates work" section on the hub — a calm prose block with three numbered points. Numbers are display-only; the structure is a plain
    for screen readers. -------------------------------------------------------------------------- */ .kits-how { background: var(--kits-bg-warm); border: 1px solid var(--kits-rule); border-radius: 8px; padding: var(--kits-gap-4); margin-bottom: var(--kits-gap-5); } .kits-how h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.5rem; margin: 0 0 var(--kits-gap-3); } .kits-how__steps { list-style: none; counter-reset: kits-step; padding: 0; margin: 0; display: grid; gap: var(--kits-gap-3); } .kits-how__steps > li { counter-increment: kits-step; position: relative; padding-left: 2.25rem; } .kits-how__steps > li::before { content: counter(kits-step); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--kits-fg); color: var(--kits-bg); font-size: 0.8125rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .kits-how__steps p { margin: 0 0 0.25rem; line-height: 1.55; } .kits-how__steps p + p { color: var(--kits-fg-muted); font-size: 0.95rem; } /* -------------------------------------------------------------------------- Subscribe nudge — single line, links back to homepage signup. -------------------------------------------------------------------------- */ .kits-subscribe { text-align: left; padding: var(--kits-gap-3) 0; border-top: 1px solid var(--kits-rule); border-bottom: 1px solid var(--kits-rule); margin-bottom: var(--kits-gap-5); font-size: 0.95rem; color: var(--kits-fg-muted); } .kits-subscribe a { color: var(--kits-fg); border-bottom: 1px solid var(--kits-rule-strong); } /* ========================================================================== PER-KIT PAGES — /kits/{slug}/ The single-kit pages share the .v2-kits-page body class but use a different inner layout: full-width cover at top, then changelog, then "what's coming", then meta. ========================================================================== */ /* Single-kit hero: cover on left at desktop, meta on right. At mobile it stacks: cover then meta. */ .kit-detail-hero { display: grid; grid-template-columns: 1fr; gap: var(--kits-gap-4); padding-bottom: var(--kits-gap-5); border-bottom: 1px solid var(--kits-rule); margin-bottom: var(--kits-gap-5); } @media (min-width: 760px) { .kit-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } } .kit-detail-hero__cover { width: 100%; max-width: 360px; aspect-ratio: 2 / 3; border: 1px solid var(--kits-rule); border-radius: 6px; overflow: hidden; background: var(--kits-bg-warm); } .kit-detail-hero__cover img { width: 100%; height: 100%; object-fit: contain; display: block; } .kit-detail-hero__meta { display: flex; flex-direction: column; gap: var(--kits-gap-3); } .kit-detail-hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kits-fg-muted); margin: 0; } .kit-detail-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; margin: 0; } .kit-detail-hero__sub { font-size: 1.05rem; line-height: 1.55; color: var(--kits-fg-muted); margin: 0; max-width: 60ch; } .kit-detail-hero__version-row { display: flex; flex-wrap: wrap; gap: var(--kits-gap-2); align-items: center; } .kit-detail-hero__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: var(--kits-fg); color: var(--kits-bg); text-decoration: none; border-radius: 4px; font-weight: 500; align-self: flex-start; min-height: 48px; transition: background-color 120ms ease; } .kit-detail-hero__cta:hover, .kit-detail-hero__cta:focus-visible { background: var(--kits-fg-muted); } .kit-detail-hero__cta:focus-visible { outline: 2px solid var(--kits-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Section blocks on the per-kit page (changelog, coming-up, when-update, how-you-know, refunds). Same rhythm as the hub. -------------------------------------------------------------------------- */ .kit-section { margin-bottom: var(--kits-gap-5); } .kit-section__eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kits-fg-muted); margin: 0 0 var(--kits-gap-2); display: flex; align-items: center; gap: 0.5rem; } .kit-section h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--kits-gap-3); } .kit-section p { line-height: 1.6; margin: 0 0 var(--kits-gap-2); max-width: 65ch; } .kit-section p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Changelog typography — looks like real engineer notes, not a marketing blog. Monospace version labels, dated entries, plain bullet lists. -------------------------------------------------------------------------- */ .changelog { border-left: 3px solid var(--kits-rule); padding-left: var(--kits-gap-3); margin: 0; } .changelog__entry { margin: 0 0 var(--kits-gap-4); } .changelog__entry:last-child { margin-bottom: 0; } .changelog__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kits-gap-2); margin: 0 0 var(--kits-gap-2); } .changelog__version { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; font-weight: 600; color: var(--kits-fg); } .changelog__date { font-size: 0.85rem; color: var(--kits-fg-muted); } .changelog__tag { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--kits-bg-warm); border: 1px solid var(--kits-rule); border-radius: 3px; padding: 0.125rem 0.5rem; color: var(--kits-fg-muted); } .changelog ul { list-style: none; padding: 0; margin: 0; } .changelog ul li { position: relative; padding-left: 1.25rem; margin: 0 0 0.4rem; line-height: 1.55; } .changelog ul li::before { content: '—'; position: absolute; left: 0; color: var(--kits-fg-muted); } /* -------------------------------------------------------------------------- "What's coming" + "When updates ship" + "How you'll know" — meta strip at the bottom of each kit page. dl/dt/dd structure for screen readers. -------------------------------------------------------------------------- */ .kit-meta-grid { display: grid; grid-template-columns: 1fr; gap: var(--kits-gap-3); background: var(--kits-bg-warm); border: 1px solid var(--kits-rule); border-radius: 8px; padding: var(--kits-gap-4); margin: 0; } @media (min-width: 720px) { .kit-meta-grid { grid-template-columns: repeat(2, 1fr); } } .kit-meta-grid dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kits-fg-muted); margin: 0 0 0.5rem; font-weight: 600; } .kit-meta-grid dd { margin: 0; font-size: 0.95rem; line-height: 1.55; } /* -------------------------------------------------------------------------- Footer-of-page nav (back-to-hub, back-to-buy). -------------------------------------------------------------------------- */ .kit-footnav { display: flex; flex-wrap: wrap; gap: var(--kits-gap-3); padding-top: var(--kits-gap-4); border-top: 1px solid var(--kits-rule); } .kit-footnav a { color: var(--kits-fg); text-decoration: none; border-bottom: 1px solid var(--kits-rule-strong); padding-bottom: 0.125rem; font-size: 0.95rem; } .kit-footnav a:hover, .kit-footnav a:focus-visible { border-bottom-color: var(--kits-fg); } /* -------------------------------------------------------------------------- Dark mode parity — re-aliases against the global theme variables already set in v2-dark-parity-v20260508b.css. Kept tight; no new dark-mode-only colors so the site stays predictable for the operator. -------------------------------------------------------------------------- */ [data-theme="dark"] .v2-kits-page { --kits-fg: #f1efe6; --kits-fg-muted: #b3b0a4; --kits-bg: #18170f; --kits-bg-warm: #221f17; --kits-bg-card: #1d1b14; --kits-rule: #3a3625; --kits-rule-strong: #565136; --kits-accent: #f1efe6; } /* -------------------------------------------------------------------------- /thanks/ bookmark-callout — used on the post-purchase page, not on /kits/ itself. Kept here so the callout's styling lives next to the URL it advertises. -------------------------------------------------------------------------- */ .download-future-versions { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--bg-warm, #f4f1ea); border: 1px solid var(--border-subtle, #e8e6dc); border-left: 3px solid var(--text-primary, #1a1a1a); border-radius: 4px; } .download-future-versions p { margin: 0; line-height: 1.55; } .download-future-versions p + p { margin-top: 0.5rem; font-size: 0.95rem; color: var(--text-secondary, #5a5a55); } .download-future-versions a { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; color: var(--text-primary, #1a1a1a); border-bottom: 1px solid var(--border-default, #d4d1c5); padding-bottom: 0.0625rem; text-decoration: none; } .download-future-versions a:hover, .download-future-versions a:focus-visible { border-bottom-color: var(--text-primary, #1a1a1a); } [data-theme="dark"] .download-future-versions { background: #221f17; border-color: #3a3625; border-left-color: #f1efe6; } /* Print styles — for the changelog, which buyers may legitimately want to print/save. Strip nav, footer, buttons; keep the prose. */ @media print { nav, footer, .kit-card__actions, .kit-detail-hero__cta, .kit-footnav { display: none !important; } .v2-kits-page { background: #fff !important; color: #000 !important; } .changelog { border-left-color: #000; } }