/* ============================================================
Portfolio design tokens
Unified from truecom, Trustplane, DeepTap.
Drop this file in every project; override the EDITMODE block
per project to switch palette/typography/density/theme.
============================================================ */
/* ------------------------------------------------------------
TYPOGRAPHY MODES
Three font pairings. Pick one per project via data-type on .
- editorial : Fraunces display + IBM Plex Sans body + IBM Plex Mono
(truecom — most "designed", highest drama)
- technical : Space Grotesk display + Inter Tight body + JetBrains Mono
(DeepTap — density, numbers, protocol feel)
- neutral : Inter Tight display + Inter body + JetBrains Mono
(Trustplane — enterprise-safe, copy-forward)
Load the matching from Google Fonts in
the document . See PATTERNS.md § Typography loading.
------------------------------------------------------------ */
:root {
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-serif: "Fraunces", ui-serif, Georgia, serif;
}
:root[data-type="editorial"] {
--font-display: "Fraunces", ui-serif, Georgia, serif;
--font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
:root[data-type="neutral"] {
--font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
/* ------------------------------------------------------------
TYPE SCALE
------------------------------------------------------------ */
:root {
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 17px;
--fs-lg: 20px;
--fs-xl: 28px;
--fs-2xl: 40px;
--fs-3xl: clamp(40px, 5.4vw, 76px); /* display heading */
--fs-4xl: clamp(56px, 9vw, 132px); /* hero only */
--lh-tight: 0.98;
--lh-head: 1.05;
--lh-body: 1.55;
--tr-head: -0.028em;
--tr-display: -0.035em;
--tr-mono: 0.003em;
--tr-eyebrow: 0.12em;
}
/* ------------------------------------------------------------
SPACING / RADII / MOTION / LAYOUT
------------------------------------------------------------ */
:root {
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
--r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px;
--ease-out: cubic-bezier(.2,.7,.2,1);
--ease-in-out: cubic-bezier(.6,0,.2,1);
--ease-spring: cubic-bezier(.3,1.4,.4,1);
--d-fast: 180ms;
--d-med: 320ms;
--d-slow: 600ms;
--max-w: 1200px;
--max-w-wide: 1360px;
--max-w-prose: 720px;
--nav-h: 64px;
--hair-w: 1px;
}
/* Density (applied via data-density on ) */
:root[data-density="compact"] { --s-section-y: var(--s-8); }
:root[data-density="comfortable"] { --s-section-y: var(--s-9); }
:root[data-density="spacious"] { --s-section-y: var(--s-10); }
:root { --s-section-y: var(--s-9); }
/* ------------------------------------------------------------
ACCENT PALETTES
Pick one per project via data-palette on .
Every palette exposes --accent, --accent-2, --accent-glow, --warm, --warm-2.
------------------------------------------------------------ */
:root {
--accent: #4fd1c5;
--accent-2: #2ca4b5;
--accent-glow: rgba(79,209,197,0.28);
--warm: #d97706;
--warm-2: #f59e0b;
--warm-glow: rgba(217,119,6,0.25);
}
:root[data-palette="teal-amber"] { --accent:#4fd1c5; --accent-2:#2ca4b5; --accent-glow:rgba(79,209,197,0.28); --warm:#d97706; --warm-2:#f59e0b; --warm-glow:rgba(217,119,6,0.25); }
:root[data-palette="sapphire-copper"] { --accent:#7aa7ff; --accent-2:#4d7fd6; --accent-glow:rgba(122,167,255,0.28); --warm:#b87333; --warm-2:#d68e54; --warm-glow:rgba(184,115,51,0.25); }
:root[data-palette="forest-copper"] { --accent:#4ab897; --accent-2:#2d8568; --accent-glow:rgba(74,184,151,0.28); --warm:#c77d42; --warm-2:#e09c66; --warm-glow:rgba(199,125,66,0.25); }
:root[data-palette="glacial-sand"] { --accent:#89b8c7; --accent-2:#5b8a99; --accent-glow:rgba(137,184,199,0.24); --warm:#d4a373; --warm-2:#e7bf93; --warm-glow:rgba(212,163,115,0.2); }
:root[data-palette="emerald-ivory"] { --accent:#1f8f5f; --accent-2:#14663f; --accent-glow:rgba(31,143,95,0.22); --warm:#b58a3e; --warm-2:#d4a95d; --warm-glow:rgba(181,138,62,0.2); }
:root[data-palette="cobalt-ember"] { --accent:#3b68f5; --accent-2:#264ec5; --accent-glow:rgba(59,104,245,0.24); --warm:#e07650; --warm-2:#ee9778; --warm-glow:rgba(224,118,80,0.22); }
/* Status colors (palette-independent) */
:root {
--good: #34d399;
--bad: #ef4444;
--warn: #f59e0b;
}
/* ------------------------------------------------------------
THEMES — dark default, light opt-in
Neutral ramp first, then surface semantic tokens.
------------------------------------------------------------ */
:root, :root[data-theme="dark"] {
--bg: #06121a;
--bg-1: #0a1a24;
--bg-2: #0f2432;
--bg-3: #132e3f;
--bg-inv:#f7f6f2;
--fg: #e6edf3;
--fg-2: #a9b6c0;
--fg-3: #6b7a86;
--fg-4: #475560;
--line: rgba(255,255,255,0.06);
--line-2: rgba(255,255,255,0.12);
--hair: rgba(255,255,255,0.08);
--code-bg: #08161f;
--code-fg: #e6edf3;
--sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
--sh-2: 0 0 0 1px var(--accent-glow), 0 12px 48px rgba(0,0,0,0.45);
}
:root[data-theme="light"] {
--bg: #f7f6f2;
--bg-1: #ffffff;
--bg-2: #efece5;
--bg-3: #e3dfd5;
--bg-inv:#0a1a24;
--fg: #0c1a22;
--fg-2: #3b4a54;
--fg-3: #65727c;
--fg-4: #8c97a0;
--line: rgba(0,0,0,0.08);
--line-2: rgba(0,0,0,0.14);
--hair: rgba(0,0,0,0.1);
--code-bg: #0c1a22; /* code keeps dark treatment in light mode */
--code-fg: #e6edf3;
--sh-1: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 24px rgba(0,0,0,0.08);
--sh-2: 0 0 0 1px var(--accent-glow), 0 12px 48px rgba(0,0,0,0.12);
}
/* ============================================================
BASE RESETS & ELEMENTS
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--bg); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: var(--tr-head);
line-height: var(--lh-head);
margin: 0;
}
h1 { font-size: var(--fs-4xl); letter-spacing: var(--tr-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
code, pre, .mono {
font-family: var(--font-mono);
letter-spacing: var(--tr-mono);
font-feature-settings: "zero","ss02";
}
/* ============================================================
LAYOUT PRIMITIVES
============================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-5); }
.container-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 var(--s-5); }
.prose { max-width: var(--max-w-prose);margin: 0 auto; padding: 0 var(--s-5); }
@media (max-width: 700px) {
.container, .container-wide, .prose { padding: 0 var(--s-4); }
}
section { padding: var(--s-section-y) 0; position: relative; }
.sec-tight { padding: var(--s-7) 0; }
.hair { height: 1px; background: var(--hair); width: 100%; }
/* ============================================================
SECTION RHYTHM
The portfolio's signature: eyebrow → heading → lede → body.
Plus the numbered section index (§ demo 03 / 09) that gives
truecom its editorial feel.
============================================================ */
.sec-index {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-3);
text-transform: lowercase;
letter-spacing: var(--tr-mono);
position: absolute;
top: var(--s-5);
left: var(--s-5);
opacity: 0.6;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
color: var(--accent);
margin-bottom: var(--s-4);
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
.eyebrow.plain { color: var(--fg-3); }
.eyebrow::before {
content: "";
width: 6px; height: 6px;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 12px var(--accent-glow);
}
.eyebrow.plain::before { box-shadow: none; opacity: 0.5; }
.pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 var(--accent-glow);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 var(--accent-glow); }
70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.section-title { font-size: var(--fs-3xl); max-width: 920px; margin-bottom: var(--s-4); }
.section-lede { color: var(--fg-2); font-size: var(--fs-md); max-width: 640px; margin-bottom: var(--s-7); }
/* Italic serif accent inside a sans heading (truecom signature) */
.accent-serif {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 80;
}
/* ============================================================
REVEAL — IntersectionObserver companion
Toggle .in via JS/useInView. Respects reduced-motion.
============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
html { scroll-behavior: auto; }
}
/* ============================================================
COMPONENTS
============================================================ */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 11px 20px;
border-radius: var(--r-2);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--d-fast) var(--ease-out),
background var(--d-fast),
color var(--d-fast),
border-color var(--d-fast),
box-shadow var(--d-fast);
user-select: none;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: var(--bg);
box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 24px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-2), 0 12px 32px var(--accent-glow); }
.btn-secondary {
background: transparent;
color: var(--fg);
border-color: var(--line-2);
}
.btn-secondary:hover { border-color: var(--fg-3); background: color-mix(in oklab, var(--fg) 4%, transparent); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg); }
/* Chrome — a framing device used by every demo */
.demo-frame {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--r-4);
overflow: hidden;
box-shadow: var(--sh-1);
}
.demo-chrome {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 10px var(--s-4);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-3);
}
.demo-chrome .dots { display: flex; gap: 6px; }
.demo-chrome .dots span {
width: 10px; height: 10px; border-radius: 50%;
background: var(--line-2);
}
.demo-chrome .addr { flex: 1; text-align: center; }
.demo-chrome .addr .live {
display: inline-block;
background: var(--accent);
color: var(--bg);
padding: 2px 6px;
border-radius: var(--r-1);
margin-right: 8px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.demo-pane-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px var(--s-4);
border-bottom: 1px solid var(--line);
background: var(--bg-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Callout — neutral banner for supporting info */
.callout {
padding: var(--s-5);
border-left: 2px solid var(--accent);
background: color-mix(in oklab, var(--accent) 5%, var(--bg-1));
border-radius: 0 var(--r-3) var(--r-3) 0;
}
.callout .label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--accent);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
margin-bottom: var(--s-2);
}
/* Proof strip — the numbered metadata bar under hero */
.proof-strip {
display: flex;
flex-wrap: wrap;
gap: var(--s-6);
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--hair);
}
.proof-item .n {
font-family: var(--font-display);
font-size: var(--fs-xl);
color: var(--fg);
line-height: 1;
}
.proof-item .l {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
margin-top: 4px;
}
/* Code block */
pre, .code {
background: var(--code-bg);
color: var(--code-fg);
padding: var(--s-4);
border-radius: var(--r-3);
overflow-x: auto;
font-size: var(--fs-sm);
line-height: 1.6;
}
code.inline {
background: var(--bg-2);
padding: 1px 6px;
border-radius: var(--r-1);
font-size: 0.92em;
}
/* Chip — used in rail/protocol/persona selectors */
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 8px 14px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--fg-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
cursor: pointer;
transition: all var(--d-fast) var(--ease-out);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.chip:hover { border-color: var(--fg-4); color: var(--fg); }
.chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--bg-2)); }
/* ============================================================
NAV — minimal fixed bar with blur
============================================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 80;
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 200ms, background 200ms;
}
.nav.scrolled { border-bottom-color: var(--hair); }
.nav-inner {
max-width: var(--max-w-wide);
margin: 0 auto;
padding: 0 var(--s-5);
height: var(--nav-h);
display: flex;
align-items: center;
gap: var(--s-6);
}
.nav-links {
display: flex;
gap: var(--s-5);
font-size: var(--fs-sm);
color: var(--fg-2);
}
.nav-links a { transition: color var(--d-fast); }
.nav-links a:hover { color: var(--fg); }
.nav-right { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; }
@media (max-width: 820px) {
.nav-links { display: none; }
}
@media (max-width: 760px) {
.nav-inner {
padding: 0 var(--s-4);
}
}
@media (max-width: 480px) {
.btn {
white-space: normal;
text-align: center;
}
}
/* ============================================================
UTILITY
============================================================ */
.muted { color: var(--fg-3); }
.accent { color: var(--accent); }
.warm { color: var(--warm); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.dim { opacity: 0.6; }
.kbd {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
}
/* ============================================================
EDITMODE TWEAK BLOCK
Every project includes a
============================================================ */