:root { /* CSVLOD type colours — Option A (default): Kotusev business→IT gradient (red = business, green = IT) */ --color-considerations: #FF0000; --color-standards: #00FF00; --color-visions: #FF5000; --color-landscapes: #91FF00; --color-outlines: #FFAA00; --color-designs: #FFFF00; /* Neutral brand accent for chrome (links, icons, hovers) — kept independent of type colours */ --color-accent: #3A7BC8; --color-bg: #f8f9fa; --color-text: #2d3748; --color-muted: #718096; --color-border: #e2e8f0; } /* * Option B (secondary) — colourblind-safe orange→blue variant. * A literal red→green gradient is the hardest case for red-green colour-vision * deficiency. To use this palette instead, add class="palette-cvd" to . */ .palette-cvd { --color-considerations: #B35806; --color-standards: #2166AC; --color-visions: #E08214; --color-landscapes: #4393C3; --color-outlines: #FDB863; --color-designs: #92C5DE; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; } header { background: white; border-bottom: 1px solid var(--color-border); padding: 1.5rem 2rem; } header nav { margin-bottom: 0.75rem; } header nav a { color: var(--color-muted); text-decoration: none; font-size: 0.85rem; } header nav a:hover { color: var(--color-text); } header h1 { font-size: 1.5rem; font-weight: 600; display: inline-block; vertical-align: middle; } header .type-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: #000; font-weight: 700; font-size: 1rem; margin-right: 0.75rem; vertical-align: middle; } header .meta { color: var(--color-muted); font-size: 0.85rem; margin-top: 0.25rem; } main { max-width: 900px; margin: 2rem auto; padding: 0 2rem; } section { margin-bottom: 2rem; } section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); } .description p { color: var(--color-muted); font-size: 0.9rem; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); } th { background: #f7fafc; font-weight: 600; font-size: 0.8rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; } .status { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 500; } .status-current { background: #c6f6d5; color: #276749; } .status-draft { background: #fefcbf; color: #975a16; } .status-stale { background: #fed7d7; color: #9b2c2c; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: 0.4rem; font-size: 0.9rem; } dl { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; font-size: 0.9rem; } dt { font-weight: 600; color: var(--color-muted); } footer { max-width: 900px; margin: 2rem auto; padding: 1.5rem 2rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; } footer a { color: var(--color-accent); text-decoration: none; } footer a:hover { text-decoration: underline; } .data-source { margin-top: 0.75rem; font-size: 0.75rem; color: var(--color-muted); font-style: italic; } .data-source a { color: var(--color-accent); text-decoration: none; } .data-source a:hover { text-decoration: underline; } .instance-data h3 { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }