/* =============================================================================
Samsonice Labs — design system
Warm-paper, light-first. Editorial serif for display, a system grotesk for
text, a system mono for eyebrows/labels/data. The signature is the four-point
"spark" lifted from the sam wordmark. No external fonts.
The rule that keeps pastel legible:
PASTEL CARRIES SURFACES AND STATUS. INK CARRIES MEANING.
Body text is never pastel. Every ink/ground pair below clears WCAG AA
(4.5:1 text, 3:1 boundaries) and is asserted in tests/test_palette.py —
pastel on near-white is exactly where contrast quietly fails, so it is
measured rather than eyeballed.
Dark stays a first-class theme, not a leftover: `[data-theme="dark"]` holds
the original navy palette, and the token-gated investor documents pin
themselves to it so a public re-skin can never alter a sent PDF.
========================================================================== */
/* --- Tokens: warm paper (default) ----------------------------------------- */
:root {
/* brand palette (global constraints) */
--ink: #1A1A17;
--paper: #FAF7F2;
--navy: #141E2F;
--blue-700: #1F4FA8;
--blue-500: #3B6FD4;
--blue-300: #6E93E0;
/* surfaces + lines */
--bg: var(--paper);
--surface: #FFFFFF;
--surface-2: #F5F1EA;
--line: rgba(26, 26, 23, 0.13);
--line-strong: rgba(26, 26, 23, 0.26);
/* Interactive control boundaries need 3:1 of their own — decorative
hairlines above do not, and must never be reused for a form field. */
--line-input: rgba(26, 26, 23, 0.55);
/* text */
--text: var(--ink);
--text-dim: #575245;
--text-faint: #6E685E;
--on-accent: #FFFFFF;
/* roles */
--accent: var(--blue-700);
--accent-strong: #17408B;
--link: var(--blue-700);
--spark: var(--blue-500);
--focus: var(--blue-700);
/* The one action per page we actually want taken reads as ink, not colour —
colour is spent on status, so the button has nothing to compete with. */
--action: var(--ink);
--on-action: var(--paper);
/* Status: an ink for text and a pastel wash for the surface behind it.
live=green pilot=sand building=blue weekend=teal retired=stone. */
--st-live: #2F6B4F;
--st-pilot: #8A6420;
--st-wip: #3F5590;
--st-weekend: #2C6461;
--st-retired: #665C55;
--st-live-wash: #E4EDE6;
--st-pilot-wash: #F7EEDC;
--st-wip-wash: #E7EBF4;
--st-weekend-wash: #E4EFEE;
--st-retired-wash: #F0EBE8;
/* semantic: lead-form error copy (Task 11). */
--danger: #B3261E;
/* type */
--font-display: Georgia, "Iowan Old Style", "Palatino Linotype",
"Times New Roman", "Noto Serif", serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* rhythm */
--shell: 1120px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--section-y: clamp(3.5rem, 8vw, 7rem);
--radius: 14px;
--radius-sm: 10px;
--radius-pill: 999px;
--shadow-1: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 14px 34px -22px rgba(26, 26, 23, 0.30);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Decorative atmosphere only — never behind text that needs its contrast
measured. On paper these are barely-there sage and sand; the electric blue
bloom they replace was drawn for a navy ground and reads as a smudge on
cream. Restated in the dark theme below. */
--glow-a: rgba(168, 195, 180, 0.40);
--glow-b: rgba(217, 201, 182, 0.38);
--glow-strength: 0.75;
}
/* --- Tokens: dark ---------------------------------------------------------
The original navy palette, unchanged. base.html stamps an explicit
data-theme on every page, so the OS preference is applied once in site.js
(first visit, no stored choice) rather than duplicated as a media query
that an explicit attribute would always beat.
------------------------------------------------------------------------- */
:root[data-theme="dark"] {
--ink: #0B1220;
--paper: #0B1220;
--blue-700: #1D4ED8;
--blue-500: #3B82F6;
--blue-300: #60A5FA;
--bg: var(--ink);
--surface: var(--navy);
--surface-2: #1B2942;
--line: rgba(233, 240, 251, 0.10);
--line-strong: rgba(233, 240, 251, 0.20);
--line-input: rgba(233, 240, 251, 0.45);
--text: #EAF0FB;
--text-dim: #A7B6D2;
--text-faint: #94A6C4;
--on-accent: #F7FAFF;
--accent: var(--blue-500);
--accent-strong: var(--blue-700);
--link: var(--blue-300);
--spark: var(--blue-500);
--focus: var(--blue-300);
/* blue-700, never blue-500: --on-action is near-white, and on blue-500 that
is ~2.9:1 — below AA for button text. Asserted in tests/test_palette.py. */
--action: var(--blue-700);
--on-action: #F7FAFF;
/* live is blue-300, not blue-500. A status wash is the ink's own hue, so it
lifts the ground toward the ink: blue-500 measures 4.54:1 on --surface bare
and only 3.69:1 inside its wash. Same reason wip/retired were already
lightened here. Every pair is asserted in tests/test_palette.py. */
--st-live: #60A5FA;
--st-pilot: #F59E0B;
--st-wip: #A78BFA;
--st-weekend: #14B8A6;
--st-retired: #94A3B8;
--st-live-wash: rgba(59, 130, 246, 0.16);
--st-pilot-wash: rgba(245, 158, 11, 0.16);
--st-wip-wash: rgba(167, 139, 250, 0.16);
--st-weekend-wash: rgba(20, 184, 166, 0.16);
--st-retired-wash: rgba(148, 163, 184, 0.16);
--danger: #F87171;
--shadow-1: 0 1px 0 rgba(233, 240, 251, 0.04) inset,
0 12px 40px -18px rgba(0, 0, 0, 0.7);
--glow-a: color-mix(in srgb, var(--blue-500) 26%, transparent);
--glow-b: color-mix(in srgb, var(--blue-700) 20%, transparent);
--glow-strength: 1;
}
/* --- Reset-ish -------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Defensive only — every component below is fixed to wrap/shrink properly
at narrow widths; this is a safety net against a future regression
(a long unbroken string, a mis-set fixed width), never a substitute for
fixing the real layout. Doesn't affect position:sticky (only x is clip). */
overflow-x: clip;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
line-height: 1.6;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
h1,
h2,
h3 {
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
margin: 0;
}
/* Visible keyboard focus everywhere. */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
z-index: 100;
background: var(--accent);
color: var(--on-accent);
padding: 0.6rem 1rem;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
left: 0;
}
/* Text for screen readers only. Not `display: none` — that removes it from the
accessibility tree too, which defeats the point. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Theme toggle ----------------------------------------------------------
A sun that becomes a moon: one circle, and a second offset circle painted in
the page background that eats a crescent out of it when dark is active. No
icon font, no second SVG, and it animates between the two states. The rays
are a conic-gradient ring that fades out in dark.
-------------------------------------------------------------------------- */
.theme-toggle {
--tt-size: 34px;
flex: none;
display: grid;
place-items: center;
width: var(--tt-size);
height: var(--tt-size);
margin-left: 0.9rem;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
color 0.2s var(--ease);
}
.theme-toggle:hover {
border-color: var(--line-strong);
background: var(--surface-2);
color: var(--text);
}
.theme-toggle-glyph {
--tt-disc: 12px;
position: relative;
display: block;
width: var(--tt-disc);
height: var(--tt-disc);
border-radius: 50%;
background: currentColor;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
/* The sun's rays. Each spoke is the disc shrunk by the negative spread and
pushed out by the offset: 12px - (2 x 4.5px) = a 3px dot centred 9px away,
so it spans 7.5-10.5px from centre and clears the disc's own 6px edge.
Rays closer in than that merge with the disc and it reads as a blob. */
box-shadow: 0 -9px 0 -4.5px currentColor, 0 9px 0 -4.5px currentColor,
-9px 0 0 -4.5px currentColor, 9px 0 0 -4.5px currentColor;
}
.theme-toggle-glyph::after {
/* The crescent-cutter: a disc painted in the page background, parked off the
glyph in light and slid across it in dark to bite a crescent out. */
content: "";
position: absolute;
inset: -2px auto -2px 0;
width: var(--tt-disc);
border-radius: 50%;
background: var(--bg);
transform: translateX(-115%);
transition: transform 0.35s var(--ease);
}
:root[data-theme="dark"] .theme-toggle-glyph {
transform: rotate(-20deg);
box-shadow: none;
}
:root[data-theme="dark"] .theme-toggle-glyph::after {
/* Overlap by just under half the disc — enough for a crescent, not so much
that the moon thins to a sliver. */
transform: translateX(42%);
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle-glyph,
.theme-toggle-glyph::after {
transition: none;
}
}
/* --- Layout ----------------------------------------------------------------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* --- The spark (signature glyph) ------------------------------------------- */
.spark {
width: 1em;
height: 1em;
display: inline-block;
fill: var(--spark);
flex: none;
vertical-align: -0.12em;
}
.spark-xs {
width: 0.72em;
height: 0.72em;
}
.spark-sm {
width: 0.85em;
height: 0.85em;
}
/* --- Eyebrow (mono label; the studio's voice) ------------------------------ */
/* Block (not inline-flex): the letter-spaced label must wrap as normal text at
narrow widths instead of overflowing as one unbreakable run. */
.eyebrow,
.footer-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0;
overflow-wrap: break-word;
}
.eyebrow .spark,
.footer-eyebrow .spark {
fill: var(--accent);
margin-right: 0.5em;
}
/* --- Buttons ---------------------------------------------------------------- */
.btn {
--btn-pad-y: 0.7rem;
--btn-pad-x: 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--radius-pill);
border: 1px solid transparent;
font: inherit;
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1;
cursor: pointer;
text-decoration: none;
transition: transform 0.16s var(--ease), background 0.16s var(--ease),
border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn:hover {
text-decoration: none;
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn-lg {
--btn-pad-y: 0.95rem;
--btn-pad-x: 1.5rem;
font-size: 1.05rem;
}
/* Bg is blue-700 (not blue-500): white text on blue-700 clears AA (6.4:1),
on blue-500 it does not (3.5:1). Still an electric blue. */
/* The one action a page wants taken. On paper that reads as ink, so colour is
left free to mean status; in dark it is blue-700 (never blue-500 — near-white
text on blue-500 is ~2.9:1, below AA). Both pairs asserted in
tests/test_palette.py. */
.btn-primary {
background: var(--action);
color: var(--on-action);
box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--action) 70%, transparent);
}
.btn-primary:hover {
background: color-mix(in srgb, var(--action) 86%, var(--bg));
}
.btn-primary .spark {
fill: currentColor;
}
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn-ghost:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* --- Status badges ---------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.18em 0.6em;
border-radius: var(--radius-pill);
border: 1px solid currentColor;
line-height: 1.4;
white-space: nowrap;
}
.badge::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
}
.badge-live {
color: var(--st-live);
}
.badge-pilot {
color: var(--st-pilot);
}
.badge-wip {
color: var(--st-wip);
}
.badge-weekend {
color: var(--st-weekend);
}
.badge-retired {
color: var(--st-retired);
}
/* --- Cards (base for later tasks) ------------------------------------------ */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
box-shadow: var(--shadow-1);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover {
border-color: var(--line-strong);
}
/* Reusable responsive grid for later tasks. */
.grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* --- Nav -------------------------------------------------------------------- */
.site-nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
gap: 1.25rem;
height: 68px;
}
/* The wordmark art is opaque navy-on-white, so it lives in a small rounded
light chip — an intentional lockup that keeps the navy letters and the blue
spark intact against the dark shell. The art's own margins are the padding. */
.nav-brand {
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: 0 0 0 1px var(--line-strong);
transition: box-shadow 0.16s var(--ease);
}
.nav-brand:hover {
box-shadow: 0 0 0 1px var(--accent);
}
/* The master wordmark is navy type on an opaque white ground, which reads as a
white pill on the dark theme and as a white box on warm paper. So the mark is
a background-image on an empty element rather than an ![]()
: each theme names
the file that suits its ground, and the browser fetches only the one in use
(two ![]()
tags with one display:none'd would download both).
`sam-wordmark-ink.png` is generated by tools/make_brand.py. */
.nav-wordmark {
display: block;
height: 40px;
/* Intrinsic ratio of the cropped ink mark, 1423x417. */
aspect-ratio: 1423 / 417;
width: auto;
background: url("/assets/brand/sam-wordmark-ink.png") left center / contain
no-repeat;
}
:root[data-theme="dark"] .nav-wordmark {
/* The white-ground master: on navy it becomes the pill it was drawn to be. */
background-image: url("/assets/brand/sam-wordmark-horizontal.png");
aspect-ratio: 1774 / 887;
border-radius: 9px;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.4rem;
margin-left: auto;
}
.nav-links a {
color: var(--text-dim);
font-weight: 550;
font-size: 0.95rem;
}
.nav-links a:hover {
color: var(--text);
text-decoration: none;
}
.nav-cta {
flex: none;
}
/* --- Hero ------------------------------------------------------------------- */
.hero {
position: relative;
overflow: clip;
padding-block: clamp(4rem, 12vw, 9rem) var(--section-y);
}
.hero-glow {
position: absolute;
inset: -20% -10% auto -10%;
height: 620px;
background: radial-gradient(60% 55% at 62% 30%, var(--glow-a), transparent 70%),
radial-gradient(42% 42% at 20% 8%, var(--glow-b), transparent 72%);
filter: blur(6px);
opacity: var(--glow-strength);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 44ch;
}
.hero .eyebrow {
margin-bottom: 1.4rem;
}
/* Display serif, not the grotesk. This single choice is most of what makes the
page read as an editorial studio rather than a templated SaaS landing page —
the grotesk stays for everything that has a job to do. Serifs carry tighter
at large sizes, so the optical size and tracking are tuned separately from
the sans headings. */
.hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.6rem, 7.4vw, 4.9rem);
line-height: 1.02;
letter-spacing: -0.022em;
margin: 0 0 1.35rem;
}
.hero-sam {
position: relative;
color: var(--accent);
white-space: nowrap;
}
.hero-spark {
fill: var(--spark);
width: 0.42em;
height: 0.42em;
vertical-align: 0.55em;
margin-left: 0.06em;
animation: spark-twinkle 3.4s var(--ease) infinite;
transform-origin: center;
}
.hero-sub {
color: var(--text-dim);
font-size: clamp(1.08rem, 1rem + 0.7vw, 1.4rem);
line-height: 1.5;
max-width: 40ch;
margin: 0 0 2.25rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
@keyframes spark-twinkle {
0%,
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.72;
transform: scale(0.82) rotate(45deg);
}
}
/* Page-load reveal for the hero content. */
.page-home .hero-inner > * {
animation: rise-in 0.7s var(--ease) both;
}
.page-home .eyebrow {
animation-delay: 0.02s;
}
.page-home .hero-title {
animation-delay: 0.08s;
}
.page-home .hero-sub {
animation-delay: 0.16s;
}
.page-home .hero-actions {
animation-delay: 0.24s;
}
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Footer ----------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--surface) 55%, var(--bg));
padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
margin-top: var(--section-y);
}
.footer-grid {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
grid-template-columns: 1.2fr 1.6fr 0.9fr;
align-items: start;
}
.footer-brand {
display: inline-flex;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: 0 0 0 1px var(--line);
}
.footer-brand .nav-wordmark {
height: 34px;
}
.footer-tagline {
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.02em;
margin: 1rem 0 0.5rem;
color: var(--text);
}
.footer-note {
color: var(--text-dim);
margin: 0;
max-width: 34ch;
font-size: 0.95rem;
}
.footer-eyebrow {
margin-bottom: 1rem;
}
.rollcall-list,
.contact-list {
list-style: none;
margin: 0;
padding: 0;
}
.rollcall-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem 1.5rem;
}
.rollcall-item {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.92rem;
min-width: 0;
}
.rollcall-link {
color: var(--text);
font-weight: 550;
}
.rollcall-link:hover {
color: var(--accent);
text-decoration: none;
}
.rollcall-text {
color: var(--text-faint);
}
.rollcall-item .badge {
font-size: 0.64rem;
padding: 0.12em 0.5em;
}
.contact-list li {
margin-bottom: 0.55rem;
}
.contact-list a {
color: var(--text-dim);
font-weight: 550;
}
.contact-list a:hover {
color: var(--text);
}
.footer-link-btn {
font: inherit;
font-weight: 550;
color: var(--text-dim);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
}
.footer-link-btn:hover {
color: var(--text);
}
.footer-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1.5rem;
margin-top: clamp(2rem, 5vw, 3rem);
padding-top: 1.5rem;
border-top: 1px solid var(--line);
color: var(--text-faint);
font-size: 0.82rem;
}
.footer-base p {
margin: 0;
}
.footer-honesty {
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
/* =============================================================================
Home page (Task 5) — sections built on the tokens above.
The organizing idea is "the honest ledger": a studio that tallies everything
it built, live and dead. Mono = the receipts voice; the spark = the brand.
========================================================================== */
/* Small button size for in-card actions. */
.btn-sm {
--btn-pad-y: 0.5rem;
--btn-pad-x: 0.9rem;
font-size: 0.875rem;
font-weight: 600;
}
/* Shared section scaffolding. */
.home-section {
position: relative;
padding-block: var(--section-y);
}
.section-head {
max-width: 60ch;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head .eyebrow {
margin-bottom: 1rem;
}
.section-title {
font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
letter-spacing: -0.035em;
margin: 0 0 1rem;
}
.section-lede {
color: var(--text-dim);
font-size: clamp(1.02rem, 1rem + 0.3vw, 1.18rem);
max-width: 54ch;
margin: 0;
}
.section-lede b {
color: var(--text);
font-weight: 700;
}
/* --- Hero: breathing orb + the ledger -------------------------------------- */
.hero-orb {
position: absolute;
top: clamp(1rem, 5vw, 4rem);
right: clamp(-7rem, -3vw, 2rem);
width: min(48vw, 440px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(
circle at 50% 45%,
var(--glow-a),
var(--glow-b) 46%,
transparent 70%
);
filter: blur(22px);
opacity: calc(0.5 * var(--glow-strength));
pointer-events: none;
z-index: 0;
animation: orb-breathe 7s var(--ease) infinite;
}
@keyframes orb-breathe {
0%,
100% {
transform: scale(1);
opacity: 0.44;
}
50% {
transform: scale(1.08);
opacity: 0.66;
}
}
.hero-ledger {
display: flex;
flex-wrap: wrap;
gap: clamp(1.25rem, 5vw, 3rem);
margin: clamp(2rem, 4vw, 2.75rem) 0 0;
padding-top: 1.75rem;
border-top: 1px solid var(--line);
}
.ledger-cell dt {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 0.4rem;
}
.ledger-cell dd {
margin: 0;
font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
}
.ledger-cell:nth-child(2) dd {
color: var(--blue-300);
}
.ledger-cell:nth-child(3) dd {
color: var(--st-retired);
}
/* --- Flagship six ---------------------------------------------------------- */
.flagship-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.flagship-card {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.flagship-card:hover {
border-color: var(--line-strong);
transform: translateY(-3px);
}
.fc-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.fc-name {
font-size: 1.2rem;
letter-spacing: -0.02em;
min-width: 0;
overflow-wrap: break-word;
}
.fc-line {
color: var(--text-dim);
font-size: 0.96rem;
margin: 0;
flex: 1;
}
.fc-metrics {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chip {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.72rem;
padding: 0.3em 0.65em;
border-radius: var(--radius-pill);
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text-dim);
}
.chip-v {
color: var(--text);
font-weight: 600;
}
.chip-l {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fc-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.15rem;
}
/* --- Industries strip ------------------------------------------------------ */
.ind-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.ind-pill {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.7rem 0.6rem 1rem;
border-radius: var(--radius-pill);
border: 1px solid var(--line-strong);
background: color-mix(in srgb, var(--surface) 55%, transparent);
color: var(--text);
font-weight: 600;
transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
transform 0.16s var(--ease);
}
.ind-pill:hover {
text-decoration: none;
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
transform: translateY(-1px);
}
.ind-name {
font-size: 0.95rem;
}
.ind-count {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
padding: 0.12em 0.55em;
border-radius: var(--radius-pill);
}
/* --- Proof panels: ask SAM / let it call you --------------------------------
Sits directly under the fold. Two equal cards; the left one is the primary
action of the whole page, so it takes the ink button and the right one stays
ghost. Both are real forms wired in site.js.
-------------------------------------------------------------------------- */
.proof-grid {
display: grid;
gap: clamp(1rem, 2.4vw, 1.5rem);
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
.proof-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: clamp(1.25rem, 2.6vw, 1.8rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-1);
}
.proof-ask {
/* The one panel we most want used, tinted with the live-status wash so it
reads as the working thing rather than a form. */
background: color-mix(in srgb, var(--st-live-wash) 60%, var(--surface));
}
.proof-h {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.proof-p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-dim);
}
.proof-row {
display: flex;
gap: 0.5rem;
margin-top: 0.2rem;
}
.proof-row .btn {
flex: none;
}
.proof-input {
flex: 1 1 auto;
/* Without this a flex text input refuses to shrink below its default size and
overflows the card on narrow screens. */
min-width: 0;
padding: 0.7rem 0.85rem;
font: inherit;
font-size: 0.92rem;
color: var(--text);
background: var(--bg);
/* --line-input, not --line: a control boundary needs 3:1 (tests/test_palette). */
border: 1px solid var(--line-input);
border-radius: var(--radius-sm);
}
.proof-input::placeholder {
color: var(--text-faint);
}
.proof-input:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
border-color: var(--focus);
}
.proof-chips {
list-style: none;
margin: 0.15rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.proof-chip {
font: inherit;
font-size: 0.78rem;
color: var(--text-dim);
padding: 0.35rem 0.7rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: transparent;
cursor: pointer;
transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.proof-chip:hover {
border-color: var(--accent);
color: var(--text);
}
.proof-status {
margin: 0;
min-height: 1.2em;
font-size: 0.84rem;
color: var(--st-live);
}
.proof-status.is-error {
color: var(--danger);
}
.proof-fine {
margin: 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-faint);
}
@media (max-width: 760px) {
.proof-grid {
grid-template-columns: 1fr;
}
.proof-row {
flex-wrap: wrap;
}
.proof-row .btn {
width: 100%;
}
}
/* --- Roll call: every product as one square --------------------------------
Status drives both colour and navigation. Each `.roll-cell` carries a
`status-*` class, and the two custom properties below are the only thing that
varies between them — set once per status, consumed by the square and its
hover card. That keeps five statuses from becoming five near-duplicate rules.
-------------------------------------------------------------------------- */
.roll-legend {
list-style: none;
margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
}
.roll-key {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--text-dim);
}
.roll-key b {
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--text);
}
.roll-swatch {
width: 9px;
height: 9px;
border-radius: 3px;
background: var(--roll-ink);
/* Baseline-align a box that has no text in it. */
transform: translateY(-1px);
}
.roll-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.roll-cell {
position: relative;
display: block;
text-decoration: none;
/* The hit target is the square plus its gap — 24px of square reads as a
mosaic, but a 24px tap target fails WCAG 2.5.5, so padding does the work
without changing the visual rhythm. */
padding: 5px;
margin: -5px;
border-radius: 8px;
}
.roll-square {
display: block;
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--roll-wash);
box-shadow: inset 0 0 0 1.5px var(--roll-ink);
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.roll-cell:hover .roll-square,
.roll-cell:focus-visible .roll-square {
background: var(--roll-ink);
transform: translateY(-2px);
}
.roll-cell:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
/* Hover card. Kept aria-hidden and duplicated as visually-hidden text on the
link, because a hover-only tooltip is invisible to a keyboard or screen
reader — and on touch there is no hover at all, which is why the square is
never the only way to identify a product (the catalog page is). */
.roll-tip {
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
z-index: 3;
width: max-content;
max-width: 15rem;
transform: translate(-50%, 4px);
padding: 0.5rem 0.7rem;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-1);
opacity: 0;
visibility: hidden;
transition: opacity 0.16s var(--ease), transform 0.16s var(--ease),
visibility 0.16s;
}
.roll-tip b {
display: block;
font-size: 0.86rem;
color: var(--text);
}
.roll-tip span {
display: block;
font-size: 0.76rem;
color: var(--roll-ink);
}
.roll-cell:hover .roll-tip,
.roll-cell:focus-visible .roll-tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* The first and last few squares in a row would push their card off-screen. */
.roll-grid > li:first-child .roll-tip {
left: 0;
transform: translate(0, 4px);
}
.roll-grid > li:first-child .roll-cell:hover .roll-tip,
.roll-grid > li:first-child .roll-cell:focus-visible .roll-tip {
transform: translate(0, 0);
}
/* The only per-status declarations in the whole component. */
.status-live {
--roll-ink: var(--st-live);
--roll-wash: var(--st-live-wash);
}
.status-pilot {
--roll-ink: var(--st-pilot);
--roll-wash: var(--st-pilot-wash);
}
.status-wip {
--roll-ink: var(--st-wip);
--roll-wash: var(--st-wip-wash);
}
.status-weekend {
--roll-ink: var(--st-weekend);
--roll-wash: var(--st-weekend-wash);
}
.status-retired {
--roll-ink: var(--st-retired);
--roll-wash: var(--st-retired-wash);
}
@media (prefers-reduced-motion: reduce) {
.roll-square,
.roll-tip {
transition: none;
}
.roll-cell:hover .roll-square,
.roll-cell:focus-visible .roll-square {
transform: none;
}
}
/* --- Engine model: build -> test -> kill -> scale -------------------------- */
.engine-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(4, 1fr);
}
.engine-step {
position: relative;
display: flex;
flex-direction: column;
gap: 0.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.1rem, 2vw, 1.5rem);
box-shadow: var(--shadow-1);
}
.step-index {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
color: var(--accent);
margin: 0;
}
.step-verb {
font-size: 1.25rem;
letter-spacing: -0.02em;
margin: 0;
}
.step-copy {
color: var(--text-dim);
font-size: 0.92rem;
margin: 0;
flex: 1;
}
.step-copy b {
color: var(--text);
font-weight: 700;
}
.step-eg {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0.25rem 0 0;
font-size: 0.85rem;
}
.step-eg-name {
font-weight: 600;
color: var(--text);
}
/* Kill is a stage, not a failure — but we mark it honestly in the slate hue. */
.engine-step--kill {
border-color: color-mix(in srgb, var(--st-retired) 45%, var(--line));
}
.engine-step--kill .step-index,
.engine-step--kill .step-verb {
color: var(--st-retired);
}
/* --- Weekend teaser -------------------------------------------------------- */
.weekend-grid {
list-style: none;
margin: 0 0 clamp(1.5rem, 3vw, 2rem);
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(3, 1fr);
}
.weekend-card {
background: color-mix(in srgb, var(--surface) 70%, var(--bg));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.1rem, 2vw, 1.4rem);
}
.wk-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.wk-name {
font-size: 1.05rem;
letter-spacing: -0.02em;
min-width: 0;
overflow-wrap: break-word;
}
.wk-line {
color: var(--text-dim);
font-size: 0.9rem;
margin: 0;
}
.weekend-more {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.02em;
font-weight: 600;
color: var(--link);
}
/* --- Thesis close + contact ------------------------------------------------ */
.close-inner {
max-width: 62ch;
margin-inline: auto;
text-align: center;
}
.close-line {
font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.12;
margin: 1.2rem auto 2rem;
color: var(--text);
}
.close-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
justify-content: center;
margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.close-contacts {
list-style: none;
margin: 0;
padding-top: 1.75rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 4vw, 2.75rem);
justify-content: center;
}
.cc-item {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cc-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
}
.cc-item a {
color: var(--text);
font-weight: 600;
}
.cc-pending {
color: var(--text-dim);
font-style: italic;
}
/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
.engine-steps {
grid-template-columns: repeat(2, 1fr);
}
.weekend-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 860px) {
.footer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.rollcall-list {
grid-template-columns: 1fr;
}
.engine-steps {
grid-template-columns: 1fr;
}
.weekend-grid {
grid-template-columns: 1fr;
}
.hero-ledger {
gap: 1.5rem 1.75rem;
}
}
/* =============================================================================
Products catalog (Task 6) — the whole ledger, filterable.
Sibling to the home page: same cards, badges and chips. The one new idea is
the filter console with a live "Showing X of N" count. Everything stays quiet
so the filtering and the honest badges do the talking.
========================================================================== */
/* --- Catalog hero (compact; home owns the big hero) ------------------------ */
.catalog-hero {
position: relative;
overflow: clip;
padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3.5rem);
}
.catalog-hero .eyebrow {
margin-bottom: 1.1rem;
}
.catalog-hero .shell {
position: relative;
z-index: 1;
}
.catalog-title {
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
letter-spacing: -0.04em;
margin: 0 0 1.1rem;
max-width: 18ch;
}
.catalog-lede {
color: var(--text-dim);
font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
line-height: 1.5;
max-width: 52ch;
margin: 0;
}
.catalog-tally {
font-family: var(--font-mono);
font-size: 0.86rem;
line-height: 1.9;
color: var(--text-faint);
margin: 1.75rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
max-width: 62ch;
}
.tally-seg b {
color: var(--text);
font-weight: 700;
}
.tally-dot {
color: var(--text-faint);
margin-inline: 0.4em;
}
.tally-honesty {
display: block;
margin-top: 0.35rem;
color: var(--text-dim);
font-style: italic;
}
/* --- Filter console -------------------------------------------------------- */
.filters {
padding-block: 0 clamp(1.5rem, 3vw, 2.25rem);
}
.filter-console {
display: flex;
flex-direction: column;
gap: 1rem;
background: color-mix(in srgb, var(--surface) 65%, var(--bg));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.1rem, 2.4vw, 1.6rem);
box-shadow: var(--shadow-1);
}
.filter-group {
display: grid;
grid-template-columns: minmax(6.5rem, max-content) 1fr;
align-items: start;
gap: 0.6rem 1.1rem;
margin: 0;
padding: 0;
border: 0;
}
.filter-group + .filter-group {
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.filter-legend {
float: none; /* reset UA fieldset legend quirks inside grid */
padding: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
padding-top: 0.45rem;
}
.filter-legend .spark {
fill: var(--accent);
margin-right: 0.4em;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.filter-pill {
font: inherit;
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
color: var(--text-dim);
background: transparent;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
padding: 0.44rem 0.85rem;
cursor: pointer;
transition: color 0.16s var(--ease), border-color 0.16s var(--ease),
background 0.16s var(--ease);
}
.filter-pill:hover {
color: var(--text);
border-color: var(--accent);
}
.filter-pill.is-active {
color: var(--on-accent);
background: var(--blue-700);
border-color: var(--blue-700);
}
.filter-count {
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--text-dim);
margin: 0;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.filter-count b {
color: var(--accent);
font-weight: 700;
}
/* --- The grid -------------------------------------------------------------- */
.catalog {
padding-bottom: var(--section-y);
}
.catalog-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
/* [hidden] must beat the card's own display:flex — author specificity ties, so
this explicit rule guarantees filtered-out cards actually disappear. */
.catalog-grid .product-card[hidden] {
display: none;
}
.product-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.product-card:hover {
border-color: var(--line-strong);
transform: translateY(-3px);
}
.pc-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.pc-name {
font-size: 1.16rem;
letter-spacing: -0.02em;
line-height: 1.15;
min-width: 0;
overflow-wrap: break-word;
}
.pc-line {
color: var(--text-dim);
font-size: 0.94rem;
margin: 0;
}
.pc-who {
color: var(--text-faint);
font-size: 0.82rem;
line-height: 1.45;
margin: 0;
}
.pc-reason {
color: var(--text-dim);
font-size: 0.86rem;
line-height: 1.5;
margin: 0.1rem 0 0;
padding-left: 0.8rem;
border-left: 2px solid color-mix(in srgb, var(--st-retired) 55%, transparent);
}
.pc-tags {
list-style: none;
margin: 0.1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.tag {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
color: var(--text-dim);
background: color-mix(in srgb, var(--surface-2) 70%, transparent);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
padding: 0.24em 0.65em;
}
.pc-metrics {
list-style: none;
margin: 0.1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pc-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: auto;
padding-top: 0.5rem;
}
/* Retired: muted, but the reason stays legible — that's the honest bit. */
.product-card[data-status="retired"] {
background: color-mix(in srgb, var(--surface) 55%, var(--bg));
border-style: dashed;
border-color: color-mix(in srgb, var(--st-retired) 30%, var(--line));
}
.product-card[data-status="retired"] .pc-name {
color: var(--text-dim);
}
.product-card[data-status="retired"] .pc-line,
.product-card[data-status="retired"] .pc-who {
color: var(--text-faint);
}
.product-card[data-status="retired"]:hover {
transform: none;
border-color: color-mix(in srgb, var(--st-retired) 45%, var(--line));
}
/* --- Zero state ------------------------------------------------------------ */
.catalog-empty {
text-align: center;
padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
}
.empty-line {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
color: var(--text);
}
.empty-sub {
color: var(--text-dim);
margin: 0;
}
.empty-reset {
font: inherit;
color: var(--link);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Invite modal ---------------------------------------------------------- */
.invite-modal {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
padding: 0;
max-width: min(92vw, 30rem);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.invite-modal::backdrop {
background: color-mix(in srgb, var(--ink) 72%, transparent);
backdrop-filter: blur(3px);
}
.invite-inner {
padding: clamp(1.5rem, 4vw, 2rem);
}
.invite-eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.6rem;
}
.invite-title {
font-size: 1.35rem;
letter-spacing: -0.02em;
margin: 0 0 0.6rem;
}
.invite-copy {
color: var(--text-dim);
font-size: 0.95rem;
margin: 0 0 1.4rem;
}
.invite-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.6rem;
}
/* --- Lead-capture form (Task 11: invite / beta / call-request) ------------- */
.invite-form {
display: flex;
flex-direction: column;
}
/* Author `display` always beats the UA [hidden] rule regardless of
specificity (origin, not specificity, decides that tie) -- so any element
we hand an explicit `display` needs its own [hidden] override, or the
hidden attribute set by site.js silently does nothing. */
.invite-form[hidden],
.lead-success[hidden] {
display: none;
}
.lead-success {
display: block;
}
.field {
margin: 0 0 0.9rem;
}
.field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.35rem;
}
.field-optional {
font-weight: 400;
color: var(--text-faint);
}
.field input,
.field textarea {
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 0.95rem;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.6rem 0.75rem;
}
.field textarea {
resize: vertical;
}
.field input:focus,
.field textarea:focus {
outline: 2px solid var(--focus);
outline-offset: 1px;
border-color: var(--focus);
}
.lead-status {
font-size: 0.88rem;
color: var(--text-dim);
margin: 0 0 0.9rem;
}
.lead-status.is-error {
color: var(--danger);
}
.lead-success-copy {
font-size: 0.98rem;
color: var(--text);
margin: 0 0 1.4rem;
}
/* --- Catalog responsive ---------------------------------------------------- */
@media (max-width: 620px) {
.filter-group {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.filter-legend {
padding-top: 0;
}
}
/* =============================================================================
Story pages (Task 7) — one honest case file per catalog entry.
The signature is the VERDICT: a one-line outcome in the status's own hue, so
a killed product reads "retired — and here's why" as a proud post-mortem, not
a thing we hid. Reuses badges, chips, tags and cards from the system above.
========================================================================== */
/* Verdict hue, keyed to the page's status (set on ). */
.status-live {
--verdict: var(--st-live);
}
.status-pilot {
--verdict: var(--st-pilot);
}
.status-wip {
--verdict: var(--st-wip);
}
.status-weekend {
--verdict: var(--st-weekend);
}
.status-retired {
--verdict: var(--st-retired);
}
.story {
padding-block: clamp(1.5rem, 4vw, 2.75rem) var(--section-y);
}
.story-crumb {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-faint);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.story-crumb a {
color: var(--text-dim);
}
.story-crumb a:hover {
color: var(--accent);
text-decoration: none;
}
.story-crumb .crumb-sep {
color: var(--text-faint);
}
.story-crumb [aria-current="page"] {
color: var(--text);
}
.story-head {
max-width: 62ch;
padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: clamp(2rem, 5vw, 3rem);
border-bottom: 1px solid var(--line);
}
/* The stamp is a badge dialed up — the outcome, stated first. */
.story-stamp {
font-size: 0.72rem;
padding: 0.3em 0.85em;
margin: 0 0 1.25rem;
}
.story-name {
font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4.2rem);
letter-spacing: -0.04em;
margin: 0 0 0.9rem;
}
.story-dek {
color: var(--text-dim);
font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
line-height: 1.45;
margin: 0 0 1.5rem;
}
.story-who {
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 1.35rem;
}
.story-who-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-right: 0.5em;
}
.story-tags {
list-style: none;
margin: 0 0 1.35rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.story-metrics {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* The honest verdict line — a colored spine in the outcome's hue. */
.story-verdict {
margin: 0;
padding: 0.75rem 0 0.75rem 1.1rem;
border-left: 3px solid var(--verdict, var(--accent));
color: var(--text);
font-size: 1.02rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.story-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.35rem;
}
/* --- The narrative body ---------------------------------------------------- */
.story-body {
max-width: 66ch;
}
.story-body-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 1.25rem;
}
.story-body-eyebrow .spark {
fill: var(--accent);
margin-right: 0.4em;
}
.story-para {
color: var(--text-dim);
font-size: 1.06rem;
line-height: 1.72;
margin: 0 0 1.2rem;
}
.story-lead {
color: var(--text);
font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.32rem);
line-height: 1.6;
}
.story-more {
font-family: var(--font-mono);
font-size: 0.92rem;
color: var(--text-faint);
}
/* Post-mortem framing for the ones we killed: slate spine, no shame. */
.story-body--postmortem {
border-left: 3px solid color-mix(in srgb, var(--st-retired) 55%, transparent);
padding-left: clamp(1.1rem, 3vw, 1.75rem);
}
.story-body--postmortem .story-body-eyebrow .spark {
fill: var(--st-retired);
}
/* --- Siblings: more from the same engine ----------------------------------- */
.story-siblings {
margin-top: clamp(3rem, 7vw, 5rem);
padding-top: clamp(2rem, 5vw, 3rem);
border-top: 1px solid var(--line);
}
.siblings-grid,
.shelf-grid,
.tools-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.sibling-card,
.shelf-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
height: 100%;
color: inherit;
}
.sibling-card:hover,
.shelf-card:hover {
text-decoration: none;
border-color: var(--line-strong);
transform: translateY(-3px);
}
.sib-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.sib-name {
font-size: 1.12rem;
letter-spacing: -0.02em;
color: var(--text);
min-width: 0;
overflow-wrap: break-word;
}
.sib-line {
color: var(--text-dim);
font-size: 0.94rem;
margin: 0;
flex: 1;
}
.sib-more {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
font-weight: 600;
color: var(--link);
}
.sibling-card:hover .sib-more,
.shelf-card:hover .sib-more {
color: var(--accent);
}
.story-foot {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: clamp(2.5rem, 6vw, 4rem);
padding-top: clamp(1.75rem, 4vw, 2.5rem);
border-top: 1px solid var(--line);
}
/* Story link on catalog cards. */
.pc-story {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.03em;
font-weight: 600;
color: var(--link);
margin-top: 0.15rem;
}
.pc-story:hover {
color: var(--accent);
text-decoration: none;
}
.product-card[data-status="retired"] .pc-story {
color: var(--st-retired);
}
/* =============================================================================
Weekend page (Task 7) — the off-the-clock shelf, a narrative.
========================================================================== */
.wknd-hero,
.tools-hero {
position: relative;
overflow: clip;
padding-block: clamp(3rem, 9vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}
.wknd-hero .shell,
.tools-hero .shell {
position: relative;
z-index: 1;
}
.wknd-hero .eyebrow,
.tools-hero .eyebrow {
margin-bottom: 1.1rem;
}
.wknd-title,
.tools-title {
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
letter-spacing: -0.04em;
margin: 0 0 1.1rem;
max-width: 20ch;
}
.wknd-lede,
.tools-lede {
color: var(--text-dim);
font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
/* --- Feature: the iOS Port Spree ------------------------------------------ */
.wknd-feature {
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.wknd-feature-inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
background: color-mix(in srgb, var(--surface) 70%, var(--bg));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.75rem);
box-shadow: var(--shadow-1);
}
.feature-copy .eyebrow {
margin-bottom: 1rem;
}
.feature-title {
font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
letter-spacing: -0.03em;
margin: 0 0 1rem;
}
.feature-copy-lede {
color: var(--text);
font-size: 1.08rem;
line-height: 1.6;
margin: 0 0 1rem;
}
.feature-copy-note {
color: var(--text-dim);
font-size: 0.96rem;
line-height: 1.6;
margin: 0 0 1.25rem;
}
.feature-copy .story-metrics {
margin-bottom: 1.25rem;
}
.feature-tally {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.1rem;
border-left: 1px solid var(--line);
padding-left: clamp(1.25rem, 3vw, 2rem);
}
.feature-tally li {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.ft-v {
font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--st-weekend);
}
.ft-l {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
/* --- The weekend shelf ---------------------------------------------------- */
.wknd-shelf {
padding-block: var(--section-y) clamp(2rem, 5vw, 3.5rem);
}
.shelf-who {
color: var(--text-faint);
font-size: 0.82rem;
line-height: 1.45;
margin: 0;
}
.wknd-close {
padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-y);
}
/* =============================================================================
Tools page (Task 7) — the free shelf. Two favours that stayed free.
========================================================================== */
.tools-list {
padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--section-y);
}
.tool-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
height: 100%;
}
.tool-name {
font-size: 1.2rem;
letter-spacing: -0.02em;
color: var(--text);
}
.tool-line {
color: var(--text-dim);
font-size: 0.96rem;
margin: 0;
}
.tool-who {
color: var(--text-faint);
font-size: 0.82rem;
line-height: 1.45;
margin: 0;
}
.tool-free {
display: flex;
align-items: flex-start;
gap: 0.5em;
font-size: 0.9rem;
color: var(--text);
margin: 0.35rem 0 0;
padding: 0.7rem 0.85rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--st-weekend) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--st-weekend) 30%, var(--line));
}
.tool-free .spark {
fill: var(--st-weekend);
margin-top: 0.15em;
}
.tool-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-top: auto;
padding-top: 0.5rem;
}
.tool-onrequest {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text-dim);
}
.tools-foot {
color: var(--text-dim);
font-size: 0.96rem;
max-width: 56ch;
margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
/* =============================================================================
Stories index (Task 7) — the doorway to every case file. Leads with the
post-mortems (honesty first), then the whole catalog grouped by status.
========================================================================== */
.stories-hero {
position: relative;
overflow: clip;
padding-block: clamp(3rem, 9vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}
.stories-hero .shell {
position: relative;
z-index: 1;
}
.stories-hero .eyebrow {
margin-bottom: 1.1rem;
}
.stories-title {
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
letter-spacing: -0.04em;
margin: 0 0 1.1rem;
max-width: 18ch;
}
.stories-lede {
color: var(--text-dim);
font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
.stories-postmortems {
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.pm-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.pm-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
height: 100%;
color: inherit;
border-style: dashed;
border-color: color-mix(in srgb, var(--st-retired) 32%, var(--line));
}
.pm-card:hover {
text-decoration: none;
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--st-retired) 55%, var(--line));
}
.stories-all {
padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-y);
}
.stories-group {
padding-top: clamp(1.5rem, 3vw, 2rem);
margin-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--line);
}
.stories-group:first-of-type {
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.stories-group-head {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 1.1rem;
}
.stories-group-count {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-faint);
}
.stories-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.15rem 2rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.stories-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--line);
}
.stories-link {
color: var(--text);
font-weight: 650;
font-size: 1rem;
letter-spacing: -0.01em;
width: fit-content;
}
.stories-link:hover {
color: var(--accent);
text-decoration: none;
}
.stories-line {
color: var(--text-faint);
font-size: 0.86rem;
line-height: 1.45;
}
.stories-close {
padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-y);
}
/* =============================================================================
Blog hub (Task 8) — the index into every product's own writing. Deliberately
built for a sparse state: a tally line stands in for a wall of cards, entries
group under the product that wrote them, and the "next up" manifest reuses
the dashed/muted "not yet" language already established on the retired
product cards — honesty about what doesn't exist yet, not a placeholder.
========================================================================== */
.blog-hero {
position: relative;
overflow: clip;
padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3.5rem);
}
.blog-hero .eyebrow {
margin-bottom: 1.1rem;
}
.blog-hero .shell {
position: relative;
z-index: 1;
}
.blog-title {
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
letter-spacing: -0.04em;
margin: 0 0 1.1rem;
max-width: 20ch;
}
.blog-lede {
color: var(--text-dim);
font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
/* Reuses the products-page tally bar exactly (.tally-seg/.tally-dot/
.tally-honesty already carry their rules) — only the wrapper is new. */
.blog-tally {
font-family: var(--font-mono);
font-size: 0.86rem;
line-height: 1.9;
color: var(--text-faint);
margin: 1.75rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
max-width: 62ch;
}
/* --- Groups + cards ---------------------------------------------------------- */
.blog-groups {
padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4rem);
}
.blog-group + .blog-group {
margin-top: clamp(2rem, 5vw, 3rem);
padding-top: clamp(2rem, 5vw, 3rem);
border-top: 1px solid var(--line);
}
.blog-group-head {
display: flex;
align-items: baseline;
gap: 0.7rem;
margin: 0 0 1.1rem;
}
.blog-group-title {
font-size: 1.3rem;
letter-spacing: -0.02em;
}
.blog-group-count {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-faint);
}
.blog-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* A lone card in a group (e.g. a product with exactly one post so far)
shouldn't sit in an otherwise-empty grid row — cap the row to its width
instead of leaving dead space beside it. Progressive enhancement: browsers
without :has() just keep the auto-fill row, which is still correct. */
.blog-grid:has(.blog-card:only-child) {
max-width: 380px;
}
.blog-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.blog-card:hover {
border-color: var(--line-strong);
transform: translateY(-3px);
}
.bc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.blog-type {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.22em 0.65em;
border-radius: var(--radius-pill);
border: 1px solid currentColor;
}
.blog-type-post {
color: var(--st-live);
}
.blog-type-guide {
color: var(--st-weekend);
}
.bc-date {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-faint);
}
.bc-title {
font-size: 1.1rem;
line-height: 1.3;
letter-spacing: -0.015em;
}
.bc-title a {
color: var(--text);
}
.bc-title a:hover {
color: var(--accent);
}
.bc-excerpt {
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
flex: 1;
}
.bc-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin-top: 0.3rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line);
}
.bc-product {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-dim);
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.bc-product .spark {
fill: var(--text-faint);
}
.bc-product:hover {
color: var(--text);
text-decoration: none;
}
.bc-out {
font-size: 0.82rem;
font-weight: 650;
color: var(--link);
display: inline-flex;
align-items: center;
gap: 0.35em;
white-space: nowrap;
}
.bc-out:hover {
text-decoration: none;
}
.bc-out .spark {
fill: currentColor;
}
.blog-empty-state {
padding-block: clamp(2rem, 6vw, 3.5rem);
text-align: center;
}
/* --- What's coming: dashed manifest, same honest "not yet" language as the
retired product cards on stories.html --------------------------------- */
.blog-next {
padding-block: clamp(1rem, 3vw, 2rem) var(--section-y);
}
.blog-next-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
max-width: 44rem;
}
.blog-next-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.1rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.blog-next-item.is-soon {
border-style: dashed;
background: transparent;
}
.blog-next-name {
font-weight: 650;
letter-spacing: -0.01em;
}
.blog-next-item.is-soon .blog-next-name {
color: var(--text-dim);
}
.blog-next-status {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.blog-next-status.is-live {
color: var(--st-live);
}
.blog-next-status.is-soon {
color: var(--text-faint);
}
.blog-close {
padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-y);
}
.blog-close-sub {
color: var(--text-dim);
max-width: 56ch;
margin: 0.6rem 0 0;
line-height: 1.55;
}
/* --- Task 7 responsive ----------------------------------------------------- */
@media (max-width: 760px) {
.wknd-feature-inner {
grid-template-columns: 1fr;
}
.feature-tally {
border-left: 0;
padding-left: 0;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.bc-foot {
flex-direction: column;
align-items: flex-start;
}
.blog-next-item {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
}
/* =============================================================================
Investor brief (Task 9) — the token-gated /invest page. Same dark-navy system
as the public site; reuses .hero, .hero-ledger, .engine-steps, .flagship-*,
.card, .badge, .chip, .close-*. The one new idea is the "confidential ledger"
framing: a confidential eyebrow chip, an audit-style honesty note, a term-sheet
for the ask, and a server-rendered use-of-funds bar (no JS, no ticking).
========================================================================== */
/* Confidential eyebrow: a bordered chip so "shared by invitation" reads as a
status, not a tagline. Inline-flex (overrides the block .eyebrow) since it's
a short, fixed label. */
.invest-conf {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.4em 0.9em;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--text-dim);
}
.invest-conf .spark {
fill: var(--accent);
margin-right: 0;
}
.invest-title {
font-size: clamp(2.6rem, 7vw, 5rem);
}
.invest-hero-inner {
max-width: 52ch;
}
.invest-portfolio-note {
color: var(--text-dim);
font-size: 0.95rem;
margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}
/* --- Traction stats -------------------------------------------------------- */
.traction-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.traction-stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ts-value {
font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--blue-300);
margin: 0;
}
.ts-label {
color: var(--text);
font-weight: 600;
font-size: 0.98rem;
margin: 0.3rem 0 0;
}
.ts-sub {
color: var(--text-dim);
font-size: 0.86rem;
line-height: 1.5;
margin: 0;
}
.invest-traction-foot {
color: var(--text-dim);
font-size: 0.96rem;
line-height: 1.6;
max-width: 64ch;
margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
/* --- The ask: term-sheet + use of funds ------------------------------------ */
.ask-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.ask-terms {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.75rem, 1.5vw, 1rem);
margin: 0;
}
.ask-tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1rem, 2vw, 1.35rem);
box-shadow: var(--shadow-1);
}
.ask-tile dt {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 0.5rem;
}
.ask-tile dd {
margin: 0;
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
}
/* The two headline terms carry the accent; the derived valuations stay neutral. */
.ask-tile:first-child dd,
.ask-tile:nth-child(2) dd {
color: var(--blue-300);
}
.fund-eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 0.85rem;
}
.fund-bar {
display: flex;
height: 16px;
border-radius: var(--radius-pill);
overflow: hidden;
border: 1px solid var(--line);
}
.fund-seg {
height: 100%;
display: block;
}
.fund-seg + .fund-seg {
border-left: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
}
.fund-list {
list-style: none;
margin: 1.1rem 0 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.fund-row {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.94rem;
}
.fund-sw {
width: 0.8rem;
height: 0.8rem;
border-radius: 3px;
flex: none;
}
.fund-label {
color: var(--text);
font-weight: 550;
}
.fund-pct {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-dim);
white-space: nowrap;
}
.fund-note {
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.55;
margin: 1.1rem 0 0;
max-width: 48ch;
}
/* --- Team ------------------------------------------------------------------ */
.team-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.member {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.member-av {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
color: var(--blue-300);
font-family: var(--font-mono);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.04em;
margin-bottom: 0.35rem;
}
.member-name {
font-size: 1.2rem;
letter-spacing: -0.02em;
}
.member-role {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.member-bio {
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.6;
margin: 0.35rem 0 0;
}
.member-tags {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
/* --- The honesty note + close --------------------------------------------- */
.honesty-note {
text-align: left;
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.65;
max-width: 64ch;
margin: 0 auto clamp(2rem, 5vw, 3rem);
padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface) 55%, var(--bg));
}
.honesty-note .spark {
fill: var(--accent);
margin-right: 0.4em;
}
.invest-close-sub {
margin-inline: auto;
}
/* --- Invest responsive ----------------------------------------------------- */
@media (max-width: 760px) {
.ask-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.ask-terms {
grid-template-columns: 1fr;
}
}
/* =============================================================================
/try playground (Task 6) — the zero-login front row. Sibling to the
products catalog: same cards, badges and chips. The one new idea is the
try-rails row of direct-contact buttons (WhatsApp / call / open product).
========================================================================== */
.try-hero {
position: relative;
overflow: clip;
padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3.5rem);
}
.try-hero .shell {
position: relative;
z-index: 1;
}
.try-hero .eyebrow {
margin-bottom: 1.1rem;
}
.try-title {
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
letter-spacing: -0.04em;
margin: 0 0 1.1rem;
max-width: 18ch;
}
.try-lede {
color: var(--text-dim);
font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
line-height: 1.5;
max-width: 52ch;
margin: 0;
}
.try-grid-wrap {
padding-bottom: var(--section-y);
}
.try-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.try-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.try-card:hover {
border-color: var(--line-strong);
transform: translateY(-3px);
}
.try-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.try-name {
font-size: 1.16rem;
letter-spacing: -0.02em;
line-height: 1.15;
min-width: 0;
overflow-wrap: break-word;
}
.try-line {
color: var(--text-dim);
font-size: 0.94rem;
margin: 0;
}
.try-rails {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.15rem;
}
.try-clip {
width: 100%;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface-2);
}
.try-story-link {
margin-top: auto;
padding-top: 0.3rem;
}
.try-more {
padding-bottom: var(--section-y);
}
.try-more-line {
color: var(--text-dim);
font-size: 1rem;
margin: 0;
}
/* --- FAQ (Task 11): bordered rows in the site's card language, native
/ re-skinned — no JS, marker replaced with a rotating
chevron. ------------------------------------------------------------------ */
.faq-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding-inline: clamp(1.1rem, 2.5vw, 1.5rem);
transition: border-color 0.2s var(--ease);
}
.faq-item:hover,
.faq-item[open] {
border-color: var(--line-strong);
}
.faq-item > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 600;
font-size: 1.02rem;
color: var(--text);
}
.faq-item > summary::-webkit-details-marker {
display: none;
}
.faq-item > summary::after {
content: "";
flex: none;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(45deg);
transition: transform 0.2s var(--ease);
}
.faq-item[open] > summary::after {
transform: rotate(-135deg);
}
.faq-item > p {
color: var(--text-dim);
font-size: 0.98rem;
line-height: 1.6;
max-width: 68ch;
margin: 0 0 clamp(1rem, 2.5vw, 1.25rem);
}
.faq-item > p a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* --- Vocabulary tags + family links -----------------------------------------
Industry/audience tags describe WHAT a thing is and stay quiet. A vocabulary
tag says why it exists — "Earns revenue", "Weekend build", "Killed on unit
economics" — so it gets a solid ground and darker type, one step louder than
its neighbours and still a step below a status badge. Groups differ only in
ground: money reads live-green, outcome reads retired-stone, the rest stay
neutral. No new colour pair enters the system.
---------------------------------------------------------------------------- */
.tag-mark {
color: var(--text);
background: var(--surface-2);
border-color: var(--line-strong);
}
.tag-mark.tag-money {
color: var(--st-live);
background: var(--st-live-wash);
border-color: transparent;
}
.tag-mark.tag-outcome {
color: var(--st-retired);
background: var(--st-retired-wash);
border-color: transparent;
}
.pill-n {
font-family: var(--font-mono);
font-size: 0.82em;
opacity: 0.65;
margin-left: 0.25em;
}
.story-family {
margin-top: clamp(1.4rem, 3vw, 2rem);
}
.family-line {
color: var(--text-dim);
font-size: 0.95rem;
margin: 0.5rem 0 0;
}
.family-list {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.family-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem;
font-size: 0.95rem;
}
.family-note {
color: var(--text-dim);
font-size: 0.88rem;
}
/* --- Playground demo panels (spec steps 5-6) --------------------------------
A demo lives INSIDE its product's try card, so it borrows the card's
language rather than introducing a second one: same radius, same hairline,
one recessed surface to say "this part is machinery". Colour is spent only
on the verdict, which is the one place a result means good/careful/bad —
and it reuses the status inks + washes the rest of the site already proves
for contrast (tests/test_palette.py), so no new pair enters the system.
---------------------------------------------------------------------------- */
.demo {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: clamp(0.85rem, 2vw, 1.1rem);
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.demo-title {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}
.demo-line {
font-size: 0.9rem;
color: var(--text-dim);
margin: 0;
}
.demo-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
}
.demo-form[hidden] {
display: none;
}
.demo-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
margin: 0;
padding: 0;
}
.demo-input {
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 0.95rem;
color: var(--text);
background: var(--surface);
/* --line-input, not --line: a control boundary owes 3:1 of its own. */
border: 1px solid var(--line-input);
border-radius: var(--radius-sm);
padding: 0.55rem 0.7rem;
}
.demo-input:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
.demo-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.chip-btn {
font: inherit;
font-size: 0.78rem;
color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--line-input);
border-radius: 999px;
padding: 0.25rem 0.65rem;
cursor: pointer;
}
.chip-btn:hover {
color: var(--text);
border-color: var(--line-strong);
}
.demo-choice {
border: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.demo-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.swatch input,
.pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.swatch img {
display: block;
width: 4.5rem;
height: 6rem;
object-fit: cover;
border-radius: var(--radius-sm);
border: 2px solid transparent;
box-shadow: 0 0 0 1px var(--line);
}
.swatch input:checked + img {
border-color: var(--action);
}
.swatch input:focus-visible + img {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.demo-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.pill span {
display: inline-block;
font-size: 0.82rem;
color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--line-input);
border-radius: 999px;
padding: 0.3rem 0.75rem;
cursor: pointer;
}
.pill input:checked + span {
color: var(--on-action);
background: var(--action);
border-color: var(--action);
}
.pill input:focus-visible + span {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.demo-consent {
display: flex;
gap: 0.5rem;
align-items: flex-start;
font-size: 0.82rem;
color: var(--text-dim);
line-height: 1.4;
}
.demo-fine {
font-size: 0.76rem;
color: var(--text-faint);
margin: 0;
}
.demo-out {
display: block;
font-size: 0.88rem;
color: var(--text-dim);
}
.demo-out:empty {
display: none;
}
.demo-out.is-working {
color: var(--text-dim);
font-style: italic;
}
.demo-out.is-good {
color: var(--st-live);
}
.demo-out.is-capped,
.demo-out.is-resting {
color: var(--text-dim);
}
.demo-image {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
}
.demo-caption {
font-size: 0.78rem;
color: var(--text-faint);
margin: 0.35rem 0 0;
}
.demo-fallback {
font-size: 0.82rem;
margin: 0;
}
.demo-fallback a {
color: var(--text-dim);
}
.verdict {
border-radius: var(--radius-sm);
padding: 0.65rem 0.8rem;
border: 1px solid transparent;
}
.verdict-title {
font-weight: 700;
font-size: 0.95rem;
margin: 0 0 0.2rem;
}
.verdict-line,
.verdict-meta {
font-size: 0.84rem;
margin: 0;
color: var(--text);
}
.verdict-meta {
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-dim);
}
.verdict-good {
background: var(--st-live-wash);
}
.verdict-good .verdict-title {
color: var(--st-live);
}
.verdict-warn {
background: var(--st-pilot-wash);
}
.verdict-warn .verdict-title {
color: var(--st-pilot);
}
.verdict-bad {
background: var(--st-retired-wash);
}
.verdict-bad .verdict-title {
color: var(--danger);
}
/* --- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}