/* ClearVial Design System — shared tokens & base styles * Used by both the Elm SPA (index.html) and static guide pages. * Keep in sync with frontend/src/Styles.elm. * * Font: Inter only (loaded via Google Fonts in each HTML head). * Accent: Blue #2563EB | Background: #FFFFFF * Text: Slate scale | Borders: cool slate */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── CSS Custom Properties (design tokens) ─────────────── */ :root { /* Background layers */ --cv-bg-page: #FFFFFF; --cv-bg-card: #FFFFFF; --cv-bg-sidebar: #F8FAFC; --cv-bg-input: #FFFFFF; /* Borders (cool slate) */ --cv-border-light: #E2E8F0; --cv-border-medium: #CBD5E1; --cv-border-dark: #94A3B8; /* Primary accent (Blue) */ --cv-primary: #2563EB; --cv-primary-hover: #1D4ED8; --cv-primary-muted: rgba(37, 99, 235, 0.08); --cv-primary-glow: rgba(37, 99, 235, 0.12); /* Success (Green) */ --cv-success: #15803D; --cv-success-muted: rgba(21, 128, 61, 0.08); /* Danger (Red) */ --cv-danger: #DC2626; --cv-danger-muted: rgba(220, 38, 38, 0.08); /* Warning (Amber) */ --cv-warning: #B45309; --cv-warning-muted: rgba(180, 83, 9, 0.08); /* Text (Slate) */ --cv-text-primary: #0F172A; --cv-text-secondary: #475569; --cv-text-muted: #64748B; /* Fonts */ --cv-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Radii */ --cv-radius-sm: 4px; --cv-radius-base: 6px; --cv-radius-md: 8px; --cv-radius-lg: 12px; --cv-radius-pill: 999px; /* Shadows */ --cv-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --cv-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --cv-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04); } /* ── Base body (applied when class "cv-base" is on ) ─ */ body.cv-base { margin: 0; padding: 0; background: var(--cv-bg-page); color: var(--cv-text-primary); font-family: var(--cv-font-ui); -webkit-font-smoothing: antialiased; line-height: 1.7; } /* ── Shared nav bar ────────────────────────────────────── */ .cv-nav { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--cv-border-light); padding: 16px 24px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .cv-nav-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .cv-nav-inner.cv-nav-wide { max-width: 980px; } .cv-nav-brand { color: var(--cv-text-primary); font-family: var(--cv-font-ui); font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; } .cv-nav .cv-nav-link { color: #FFFFFF; background: var(--cv-primary); text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 16px; border: 1px solid var(--cv-primary); border-radius: var(--cv-radius-pill); transition: all 0.2s; } .cv-nav .cv-nav-link:hover { background: var(--cv-primary-hover); border-color: var(--cv-primary-hover); text-decoration: none; } /* ── Content container ─────────────────────────────────── */ .cv-content { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; } .cv-content.cv-content-wide { max-width: 980px; } /* ── Typography ────────────────────────────────────────── */ .cv-base h1 { font-family: var(--cv-font-ui); font-size: 2rem; font-weight: 700; color: var(--cv-text-primary); margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.02em; } .cv-base h2 { font-family: var(--cv-font-ui); font-size: 1.4rem; font-weight: 600; color: var(--cv-text-primary); margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--cv-border-light); } .cv-base h3 { font-family: var(--cv-font-ui); font-size: 1.1rem; font-weight: 600; color: var(--cv-text-primary); margin: 32px 0 12px; } .cv-base p { margin: 0 0 16px; color: var(--cv-text-primary); } .cv-base .subtitle { color: var(--cv-text-muted); font-size: 1.05rem; margin-bottom: 40px; } /* ── Links ─────────────────────────────────────────────── */ .cv-base a { color: var(--cv-primary); text-decoration: none; } .cv-base a:hover { text-decoration: underline; } .cv-base a.cv-nav-link { color: #FFFFFF; } .cv-base a.cv-nav-link:hover { color: #FFFFFF; } .cv-base a.cv-cta { color: #FFFFFF; } .cv-base a.cv-cta:hover { color: #FFFFFF; } /* ── Inline elements ───────────────────────────────────── */ .cv-base strong { color: var(--cv-text-primary); font-weight: 600; } .cv-base code { background: var(--cv-primary-muted); color: var(--cv-primary); padding: 2px 6px; border-radius: var(--cv-radius-sm); font-size: 0.9em; } .cv-base ul, .cv-base ol { margin: 0 0 16px; padding-left: 24px; color: var(--cv-text-primary); } .cv-base li { margin-bottom: 6px; } /* ── Blockquotes ───────────────────────────────────────── */ .cv-base blockquote { margin: 24px 0; padding: 16px 20px; background: var(--cv-primary-muted); border-left: 3px solid var(--cv-primary); border-radius: 0 var(--cv-radius-md) var(--cv-radius-md) 0; } .cv-base blockquote p { margin: 0; color: var(--cv-text-primary); } /* ── Tables ────────────────────────────────────────────── */ .cv-base .table-wrap { overflow-x: auto; margin: 24px 0; } .cv-base table { width: 100%; border-collapse: collapse; } .cv-base th { text-align: left; padding: 10px 16px; background: var(--cv-bg-sidebar); color: var(--cv-text-primary); font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid var(--cv-border-light); } .cv-base td { padding: 10px 16px; border-bottom: 1px solid var(--cv-border-light); color: var(--cv-text-primary); font-size: 0.9rem; } /* ── CTA button ────────────────────────────────────────── */ .cv-cta { display: inline-block; margin: 32px 0; padding: 14px 28px; background: var(--cv-primary); color: #FFFFFF; font-weight: 600; border-radius: var(--cv-radius-pill); text-decoration: none; font-size: 1rem; transition: all 0.2s; } .cv-cta:hover { text-decoration: none; background: var(--cv-primary-hover); transform: translateY(-1px); } /* ── Related guides box ────────────────────────────────── */ .cv-related { margin-top: 40px; padding: 24px; border: 1px solid var(--cv-border-light); border-radius: var(--cv-radius-lg); background: var(--cv-bg-card); box-shadow: var(--cv-shadow-sm); } .cv-related h2 { margin-top: 0; font-size: 1.2rem; border-bottom: none; padding-bottom: 0; } .cv-related ul { margin-bottom: 0; } /* ── Disclaimer footer ─────────────────────────────────── */ .cv-disclaimer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--cv-border-light); color: var(--cv-text-muted); font-size: 0.85rem; font-style: italic; } /* ── Breadcrumb ────────────────────────────────────────── */ .cv-breadcrumb { color: var(--cv-text-muted); font-size: 0.85rem; margin-bottom: 24px; } .cv-breadcrumb a { color: var(--cv-primary); } /* ── Guide index cards ─────────────────────────────────── */ .cv-cluster { margin-bottom: 40px; } .cv-cluster h2 { font-family: var(--cv-font-ui); font-size: 1.25rem; margin: 0 0 14px; color: var(--cv-text-primary); border-bottom: none; padding-bottom: 0; } .cv-cluster-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; } .cv-guide-card { display: block; padding: 20px; background: var(--cv-bg-card); border: 1px solid var(--cv-border-light); border-radius: var(--cv-radius-lg); text-decoration: none; transition: all 0.2s; box-shadow: var(--cv-shadow-sm); } .cv-guide-card:hover { background: var(--cv-primary-muted); border-color: var(--cv-border-medium); transform: translateY(-2px); text-decoration: none; box-shadow: var(--cv-shadow-md); } .cv-guide-card h3 { font-family: var(--cv-font-ui); font-size: 1.05rem; font-weight: 600; color: var(--cv-text-primary); margin: 0 0 8px; } .cv-guide-card p { color: var(--cv-text-secondary); margin: 0; font-size: 0.95rem; } .cv-guide-card .arrow { color: var(--cv-primary); font-size: 0.9rem; margin-top: 10px; display: inline-block; } /* ── Responsive ────────────────────────────────────────── */ @media (min-width: 840px) { .cv-cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cv-base h1 { font-size: 1.6rem; } .cv-base h2 { font-size: 1.2rem; } .cv-content { padding: 32px 16px 64px; } } /* ── Reduced motion ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }