/* ============================================================ MERCURY DESIGN SYSTEM — tokens + components (portfolio subset) ------------------------------------------------------------ Adapted from the Mercury design system for a static site. Dark mode follows the visitor's OS preference automatically via @media (prefers-color-scheme: dark) instead of the design system's opt-in [data-theme="dark"] selector. ============================================================ */ /* Fonts are linked from index.html for faster loading. */ :root { /* ─── Font families ─────────────────────────────────────── */ --mer-font-sans: "Geist", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif; --mer-font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --mer-font-serif: "Instrument Serif", "Times New Roman", Georgia, serif; /* ─── Ink scale (cool neutrals, slightly blue-tinted) ───── */ --mer-ink-00: #FAFBFC; --mer-ink-05: #F4F5F7; --mer-ink-10: #ECEEF2; --mer-ink-15: #E2E5EB; --mer-ink-20: #D4D8E0; --mer-ink-30: #B7BCC6; --mer-ink-40: #939AA6; --mer-ink-50: #6E747E; --mer-ink-60: #4A4F58; --mer-ink-70: #2D3138; --mer-ink-80: #1F2227; --mer-ink-90: #16181C; --mer-ink-100: #0A0B0D; /* ─── Accent: quicksilver blue ──────────────────────────── */ --mer-accent-50: oklch(0.97 0.02 240); --mer-accent-100: oklch(0.93 0.05 240); --mer-accent-200: oklch(0.86 0.09 240); --mer-accent-300: oklch(0.76 0.12 240); --mer-accent-400: oklch(0.68 0.14 240); --mer-accent-500: oklch(0.60 0.15 240); /* primary */ --mer-accent-600: oklch(0.52 0.16 244); --mer-accent-700: oklch(0.44 0.15 248); --mer-accent-900: oklch(0.28 0.10 252); /* ─── Signals ───────────────────────────────────────────── */ --mer-positive: oklch(0.62 0.13 155); --mer-positive-soft: oklch(0.94 0.04 155); --mer-warning: oklch(0.74 0.14 75); --mer-warning-soft: oklch(0.96 0.05 80); --mer-critical: oklch(0.58 0.18 25); --mer-critical-soft: oklch(0.95 0.04 25); /* ─── Semantic surfaces ─────────────────────────────────── */ --mer-bg: var(--mer-ink-00); --mer-bg-sunken: var(--mer-ink-05); --mer-surface: #FFFFFF; --mer-surface-2: var(--mer-ink-05); --mer-overlay: rgba(10, 11, 13, 0.48); --mer-fg: var(--mer-ink-100); --mer-fg-muted: var(--mer-ink-60); --mer-fg-subtle: var(--mer-ink-50); --mer-fg-faint: var(--mer-ink-40); --mer-fg-on-accent: #FFFFFF; --mer-border: var(--mer-ink-15); --mer-border-strong: var(--mer-ink-20); --mer-border-faint: var(--mer-ink-10); --mer-divider: var(--mer-ink-10); /* ─── Radii ─────────────────────────────────────────────── */ --mer-r-xs: 2px; --mer-r-sm: 4px; --mer-r-md: 6px; --mer-r-lg: 10px; --mer-r-xl: 16px; --mer-r-pill: 999px; /* ─── Shadows (ink-tinted, hairline + lift) ─────────────── */ --mer-shadow-hair: 0 0 0 0.5px rgba(10, 11, 13, 0.08); --mer-shadow-1: 0 1px 2px rgba(10, 11, 13, 0.05), 0 0 0 0.5px rgba(10, 11, 13, 0.05); --mer-shadow-2: 0 4px 12px rgba(10, 11, 13, 0.06), 0 0 0 0.5px rgba(10, 11, 13, 0.06); --mer-shadow-3: 0 16px 40px rgba(10, 11, 13, 0.10), 0 0 0 0.5px rgba(10, 11, 13, 0.06); --mer-shadow-focus: 0 0 0 3px oklch(0.86 0.09 240 / 0.45); /* ─── Easing & motion ───────────────────────────────────── */ --mer-ease: cubic-bezier(0.2, 0.7, 0.1, 1); --mer-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mer-dur-1: 120ms; --mer-dur-2: 220ms; --mer-dur-3: 380ms; /* ─── Type scale (micro used below) ─────────────────────── */ --mer-text-body: 15px; --mer-lh-body: 1.55; --mer-text-micro: 11px; --mer-lh-micro: 1.4; } /* ─── Dark mode — follows the visitor's OS preference ─────── */ @media (prefers-color-scheme: dark) { :root { --mer-bg: var(--mer-ink-100); --mer-bg-sunken: #050608; --mer-surface: var(--mer-ink-90); --mer-surface-2: var(--mer-ink-80); --mer-overlay: rgba(0, 0, 0, 0.6); --mer-fg: var(--mer-ink-00); --mer-fg-muted: var(--mer-ink-30); --mer-fg-subtle: var(--mer-ink-40); --mer-fg-faint: var(--mer-ink-50); --mer-border: var(--mer-ink-80); --mer-border-strong: var(--mer-ink-70); --mer-border-faint: var(--mer-ink-90); --mer-divider: var(--mer-ink-80); --mer-shadow-hair: 0 0 0 0.5px rgba(255, 255, 255, 0.06); --mer-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.04); --mer-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.05); --mer-shadow-3: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06); } } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--mer-bg); color: var(--mer-fg); font-family: var(--mer-font-sans); font-size: var(--mer-text-body); line-height: var(--mer-lh-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; } [id] { scroll-margin-top: 88px; } /* ─── Type helpers ──────────────────────────────────────── */ .mer-micro { font-size: var(--mer-text-micro); line-height: var(--mer-lh-micro); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mer-font-mono); } .mer-mono { font-family: var(--mer-font-mono); font-feature-settings: "ss02"; } .mer-serif { font-family: var(--mer-font-serif); font-weight: 400; } /* ============================================================ CARD ============================================================ */ .mer-card { background: var(--mer-surface); border: 1px solid var(--mer-border); border-radius: var(--mer-r-lg); box-shadow: var(--mer-shadow-1); padding: 20px; } /* ============================================================ BADGE ============================================================ */ .mer-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; height: 22px; border-radius: var(--mer-r-pill); font-family: var(--mer-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; background: var(--mer-ink-10); color: var(--mer-ink-80); } .mer-badge--accent { background: var(--mer-accent-100); color: var(--mer-accent-700); } /* ============================================================ VERTICAL TIMELINE ============================================================ */ .mer-vtimeline { display: flex; flex-direction: column; position: relative; } .mer-vtimeline-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-bottom: 22px; } .mer-vtimeline-item:last-child { padding-bottom: 0; } .mer-vtimeline-rail { position: relative; display: flex; justify-content: center; } /* connecting line drawn downward from each node (static base track) */ .mer-vtimeline-item:not(:last-child) .mer-vtimeline-rail::after { content: ""; position: absolute; top: 20px; bottom: -22px; left: 50%; width: 1.5px; transform: translateX(-50%); background: var(--mer-border-strong); } /* node dot — default */ .mer-tl-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--mer-ink-30); box-shadow: 0 0 0 3px var(--mer-surface), 0 0 0 4px var(--mer-border-strong); margin-top: 3px; display: flex; align-items: center; justify-content: center; color: var(--mer-surface); flex-shrink: 0; } /* dot state colors */ .mer-tl-node--done .mer-tl-dot { background: var(--mer-ink-100); } .mer-tl-node--active .mer-tl-dot { background: var(--mer-accent-500); } /* active dot pulse ring */ .mer-tl-node--active .mer-tl-dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--mer-accent-500); opacity: 0.35; } /* content */ .mer-vtimeline-content { padding-top: 1px; min-width: 0; } .mer-tl-time { font-family: var(--mer-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mer-fg-subtle); margin-bottom: 3px; } .mer-tl-title { font-size: 14px; font-weight: 600; letter-spacing: -0.006em; color: var(--mer-fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mer-tl-desc { font-size: 13px; color: var(--mer-fg-muted); line-height: 1.5; margin-top: 3px; }