/* Cape Labs design tokens (from ../../design.md v0.5 §13). Change design.md first, then this file. */ @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } :root { color-scheme: light; /* Neutrals */ --color-obsidian: #070709; --color-ink: #151515; --color-graphite: #33333d; --color-charcoal: #60606c; --color-placeholder: #73737f; --color-slate: #8b8b96; --color-hairline: #e4e4ea; --color-cloud: #f5f5f5; --color-paper: #ffffff; /* Accent */ --color-blue: #2597d0; /* non-text only */ --color-blue-text: #1b6f9e; /* text-safe blue */ --color-blue-tint: #d7e6f5; --color-blue-wash: #e8f2fa; /* Peptide colours (v0.6). Base = non-text only. Text = AA on white and cloud. Tint = selected fills. Wash = subtle fills. Sky/haze = the hero gradient's top two stops. */ --ret: #7b5cf0; --ret-text: #5b3fd1; --ret-tint: #e5defc; --ret-wash: #f3f0fe; --ret-sky: #cccaf2; --ret-haze: #e9e6f4; --tir: #f27a1a; --tir-text: #ad4c06; --tir-tint: #fce4d1; --tir-wash: #fef3ea; --tir-sky: #e9d1bf; --tir-haze: #f5e9df; --mot: #13a594; --mot-text: #0b7368; --mot-tint: #d0edea; --mot-wash: #eaf7f5; --mot-sky: #b3dcdc; --mot-haze: #deedeb; --tes: #e8487a; --tes-text: #b52d5a; --tes-tint: #fadae4; --tes-wash: #fdeff3; --tes-sky: #e6c5d6; --tes-haze: #f4e4e9; --cji: #e3a512; --cji-text: #8a6300; --cji-tint: #f9edd0; --cji-wash: #fcf7ea; --cji-sky: #e5dcbd; --cji-haze: #f3edde; --ghk: #2597d0; --ghk-text: #1b6f9e; --ghk-tint: #d7e6f5; --ghk-wash: #e8f2fa; --ghk-sky: #cfdeeb; --ghk-haze: #e6edf3; /* Hero (v0.5): grey with a hint of sky at the top. v0.6: the sky takes the selected peptide's colour. */ --gradient-hero: linear-gradient(180deg, var(--accent-sky) 0%, var(--accent-haze) 18%, #f5f5f5 42%, #f5f5f5 100%); /* Fonts */ --font-display: 'Open Runde', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Type scale */ --text-display: clamp(2.75rem, 1.6rem + 5vw, 5rem); --text-heading: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); --text-heading-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --text-subheading: 1.25rem; --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.75rem; --tracking-display: -0.04em; --tracking-heading: -0.035em; --tracking-heading-sm: -0.03em; --tracking-body: -0.01em; /* Space */ --section-gap: clamp(4rem, 2rem + 6vw, 7.5rem); --card-pad: clamp(1.5rem, 1rem + 2vw, 3rem); --gap: 1rem; --gutter: 1rem; --max-width: 1200px; /* Radius */ --radius-pill: 999px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 32px; /* Shadow */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-button: 0 1px 2px rgba(36, 36, 40, 0.10), 0 3px 3px rgba(36, 36, 40, 0.09), 0 6px 4px rgba(36, 36, 40, 0.05), 0 11px 4px rgba(36, 36, 40, 0.01); --shadow-card: 0 17px 37px rgba(16, 55, 132, 0.03), 0 67px 67px rgba(16, 55, 132, 0.03), 0 150px 90px rgba(16, 55, 132, 0.02); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.5s; } /* The live accent follows the selected peptide (). Registered as colours so the whole page cross-fades between peptides. */ @property --accent { syntax: ''; inherits: true; initial-value: #2597d0; } @property --accent-text { syntax: ''; inherits: true; initial-value: #1b6f9e; } @property --accent-tint { syntax: ''; inherits: true; initial-value: #d7e6f5; } @property --accent-wash { syntax: ''; inherits: true; initial-value: #e8f2fa; } @property --accent-sky { syntax: ''; inherits: true; initial-value: #cfdeeb; } @property --accent-haze { syntax: ''; inherits: true; initial-value: #e6edf3; } :root { transition: --accent 0.7s var(--ease-out), --accent-text 0.7s var(--ease-out), --accent-tint 0.7s var(--ease-out), --accent-wash 0.7s var(--ease-out), --accent-sky 0.9s var(--ease-out), --accent-haze 0.9s var(--ease-out); } [data-peptide="ret"] { --accent: var(--ret); --accent-text: var(--ret-text); --accent-tint: var(--ret-tint); --accent-wash: var(--ret-wash); --accent-sky: var(--ret-sky); --accent-haze: var(--ret-haze); } [data-peptide="tir"] { --accent: var(--tir); --accent-text: var(--tir-text); --accent-tint: var(--tir-tint); --accent-wash: var(--tir-wash); --accent-sky: var(--tir-sky); --accent-haze: var(--tir-haze); } [data-peptide="mot"] { --accent: var(--mot); --accent-text: var(--mot-text); --accent-tint: var(--mot-tint); --accent-wash: var(--mot-wash); --accent-sky: var(--mot-sky); --accent-haze: var(--mot-haze); } [data-peptide="tes"] { --accent: var(--tes); --accent-text: var(--tes-text); --accent-tint: var(--tes-tint); --accent-wash: var(--tes-wash); --accent-sky: var(--tes-sky); --accent-haze: var(--tes-haze); } [data-peptide="cji"] { --accent: var(--cji); --accent-text: var(--cji-text); --accent-tint: var(--cji-tint); --accent-wash: var(--cji-wash); --accent-sky: var(--cji-sky); --accent-haze: var(--cji-haze); } [data-peptide="ghk"] { --accent: var(--ghk); --accent-text: var(--ghk-text); --accent-tint: var(--ghk-tint); --accent-wash: var(--ghk-wash); --accent-sky: var(--ghk-sky); --accent-haze: var(--ghk-haze); } @media (min-width: 640px) { :root { --gutter: 1.5rem; } } @media (min-width: 960px) { :root { --gutter: 2rem; } } @media (max-width: 639px) { :root { --radius-xl: 24px; } }