Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
11 kB · 557 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558/* Spec page styles. The spec body is rendered markdown, so these rules are global within the /spec route and target .spec-document content. */
/* The spec page supplies its own shell padding, so the global body gutter is removed while this stylesheet is loaded. */body:has(.site-shell) { padding: 0;}
.site-shell { position: relative; z-index: var(--dr-z-content); display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1.25rem, 3vw, 3.5rem); max-width: 1600px; margin: 0 auto;}
/* ── TOC toggle (mobile) ── */
.toc-toggle { display: none; position: sticky; top: 0; z-index: 3; width: 100%; border: 2px solid var(--dr-border-color); background: var(--dr-surface-elevated); color: var(--dr-text-primary); font-family: var(--dr-font-heading); font-variation-settings: 'slnt' 0; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--dr-space-md) var(--dr-space-lg); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); cursor: pointer; transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast);}
.toc-toggle:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm);}
.toc-toggle:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
/* ── TOC panel ── */
.toc-panel { position: sticky; top: clamp(1rem, 3vw, 2rem); align-self: start; height: fit-content;}
.toc-panel__inner { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius-lg); padding: var(--dr-space-lg); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight);}
.toc-eyebrow { font-family: var(--dr-font-heading); font-variation-settings: 'slnt' 0; font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--dr-text-quiet); margin: 0 0 var(--dr-space-xs);}
.toc-panel__hint { font-size: var(--dr-text-sm); color: var(--dr-text-quiet); margin-bottom: var(--dr-space-md);}
.toc-nav { font-size: var(--dr-text-sm); max-height: calc(100vh - 6rem); overflow: auto; padding-right: var(--dr-space-sm);}
.toc-nav ul { list-style: none; margin: 0; padding-left: 0.95rem;}
.toc-nav > ul { padding-left: 0;}
.toc-nav li { margin: 0.2rem 0;}
.toc-nav a { display: inline-flex; width: 100%; gap: var(--dr-space-sm); align-items: center; padding: 0.2rem 0.25rem; border-left: 2px solid transparent; color: var(--dr-text-secondary); text-decoration: none; transition: color var(--dr-transition-fast), border-color var(--dr-transition-fast);}
.toc-nav a:hover { color: var(--dr-text-primary); border-color: var(--dr-surface-highlight);}
.toc-nav a.is-active { color: var(--dr-text-primary); border-color: var(--dr-accent);}
/* ── Main spec document ── */
.spec-main { min-width: 0;}
.spec-document { background: var(--dr-surface-base); border-radius: var(--dr-radius-lg); padding: clamp(var(--dr-space-lg), 3vw, var(--dr-space-xl)); border: var(--dr-border); box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-inner-highlight);}
.spec-document h1,.spec-document h2,.spec-document h3,.spec-document h4,.spec-document h5,.spec-document h6 { font-family: var(--dr-font-heading); font-variation-settings: 'slnt' 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;}
.spec-document h1 { color: var(--dr-heading); font-size: clamp(var(--dr-text-2xl), 5vw, var(--dr-text-3xl)); margin-top: 0; margin-bottom: var(--dr-space-sm);}
.spec-document h2 { color: var(--dr-heading); font-size: var(--dr-text-xl); margin-top: var(--dr-space-xl); margin-bottom: var(--dr-space-md); text-transform: uppercase; letter-spacing: 0.1em; border-left: var(--dr-border-thick); border-left-color: var(--dr-accent); padding-left: var(--dr-space-md);}
.spec-document h3 { color: var(--dr-heading-sub); font-size: var(--dr-text-lg); margin-top: var(--dr-space-xl); margin-bottom: var(--dr-space-sm);}
.spec-document h4 { color: var(--dr-heading-sub); font-size: var(--dr-text-lg); font-weight: 600; margin-top: var(--dr-space-lg); margin-bottom: var(--dr-space-sm);}
.spec-document h5 { color: var(--dr-text-primary); font-size: var(--dr-text-lg); font-weight: 600; margin-top: var(--dr-space-lg); margin-bottom: var(--dr-space-sm);}
.spec-document h6 { color: var(--dr-text-secondary); font-size: var(--dr-text-base); font-weight: 600; margin-top: var(--dr-space-md); margin-bottom: var(--dr-space-sm);}
.spec-lede { font-size: var(--dr-text-lg); color: var(--dr-text-quiet); max-width: 60ch; line-height: 1.45;}
/* ── Meta bar ── */
.spec-meta { display: flex; flex-wrap: wrap; gap: var(--dr-space-md); margin: var(--dr-space-lg) 0 var(--dr-space-xl); padding: var(--dr-space-md) var(--dr-space-lg); background: var(--dr-surface-elevated); border: var(--dr-border); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight);}
.spec-meta__item { flex: 1 1 200px;}
.spec-meta__label { display: block; font-family: var(--dr-font-heading); font-variation-settings: 'slnt' 0; font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--dr-text-primary); margin-bottom: var(--dr-space-xs);}
.spec-meta__value { font-size: var(--dr-text-base); font-weight: 600;}
.status-chip { display: inline-flex; align-items: center; gap: var(--dr-space-sm); padding: var(--dr-space-xs) var(--dr-space-md); border-radius: var(--dr-radius); background: var(--dr-surface-secondary); border: var(--dr-border-subtle);}
.status-chip::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dr-accent); box-shadow: 0 0 12px var(--dr-glow-accent);}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--dr-space-sm); margin-left: auto; align-items: center;}
/* ── Spec document content ── */
.spec-document table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--dr-surface-elevated); border: var(--dr-border);}
.spec-document th,.spec-document td { padding: var(--dr-space-sm) var(--dr-space-md); text-align: center; border-bottom: var(--dr-border-subtle);}
.spec-document th { background: var(--dr-surface-elevated); font-family: var(--dr-font-heading); font-variation-settings: 'slnt' 0; font-weight: 700; font-size: var(--dr-text-xs); color: var(--dr-heading); text-transform: uppercase; letter-spacing: 0.2em; border-bottom: var(--dr-border);}
.spec-document tbody tr:last-child td { border-bottom: none;}
.spec-document tbody tr:hover { background: var(--dr-surface-highlight);}
.spec-document pre { margin: var(--dr-space-md) 0; padding: var(--dr-space-lg); background: var(--dr-surface-secondary); color: var(--dr-text-primary); border-radius: var(--dr-radius); overflow: auto; font-family: var(--dr-font-mono); font-size: var(--dr-text-sm); line-height: 1.5; border: var(--dr-border); border-left: var(--dr-border-thick); border-left-color: var(--dr-border-color-warm); hyphens: none;}
.spec-document code { font-family: var(--dr-font-mono);}
.spec-document blockquote { margin: var(--dr-space-lg) 0; padding: var(--dr-space-sm) var(--dr-space-md); background: var(--core-meltdown-40); color: var(--dr-text-secondary); font-style: italic;}
.spec-document hr { border: none; border-top: var(--dr-border); margin: var(--dr-space-xl) auto; width: 50%;}
.spec-document ul,.spec-document ol { padding-left: 1.5rem;}
.spec-document li { margin: 0.35rem 0;}
/* ── Color lab (palette card grids above the source tables) ── */
.table-scroll { overflow-x: auto; margin-top: var(--dr-space-md);}
.color-lab { margin-bottom: var(--dr-space-xl);}
.color-lab .color-grid,.color-lab .ansi-grid { display: grid; gap: var(--dr-space-sm); margin: var(--dr-space-lg) 0 var(--dr-space-sm);}
.color-lab .color-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
.color-card { padding: var(--dr-space-sm); border: var(--dr-border); border-radius: var(--dr-radius); background: var(--dr-surface-secondary); display: flex; flex-direction: column; gap: var(--dr-space-sm); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast);}
.color-card:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm);}
.color-card:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
.color-card__swatch { border-radius: var(--dr-radius); height: 80px; border: var(--dr-border-subtle);}
.color-card__code { font-family: var(--dr-font-mono); font-size: var(--dr-text-xs); letter-spacing: 0.05em;}
.color-card__note { opacity: 0.7; font-size: var(--dr-text-sm);}
.color-lab .ansi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));}
.color-lab .ansi-chip { display: flex; align-items: center; gap: var(--dr-space-sm); padding: var(--dr-space-sm) var(--dr-space-md); background: var(--dr-surface-secondary); border: var(--dr-border); border-radius: var(--dr-radius); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast);}
.color-lab .ansi-chip:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm);}
.color-lab .ansi-chip:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
.color-lab .ansi-chip span { font-size: var(--dr-text-sm);}
.legend-chip { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: var(--dr-radius-sm); flex-shrink: 0;}
.color-lab .ansi-chip .legend-chip { width: 1.25rem; height: 1.25rem;}
/* ── Responsive ── */
@media (max-width: 1100px) { .site-shell { grid-template-columns: 1fr; }
.toc-toggle { display: block; }
.toc-panel { position: fixed; top: 0; bottom: 0; left: 0; width: 320px; max-width: 85vw; transform: translateX(-100%); transition: transform var(--dr-duration-normal) var(--dr-ease-out-expo); z-index: 4; }
.toc-panel.is-open { transform: translateX(0); }
.toc-panel__inner { height: 100%; border-radius: 0; }}
@media (max-width: 640px) { .spec-meta { flex-direction: column; }
/* Basis applies to height in column direction. Items size to content. */ .spec-meta__item { flex: none; }
.hero-actions { width: 100%; justify-content: flex-start; }
.spec-document pre { font-size: var(--dr-text-xs); }}
@media (prefers-reduced-motion: reduce) { .toc-toggle, .color-card, .ansi-chip { transition: none; }
.toc-toggle:hover, .toc-toggle:active, .color-card:hover, .color-card:active, .ansi-chip:hover, .ansi-chip:active { transform: none; }}
@media print { body:has(.site-shell) { background: white; color: black; }
.site-shell, .spec-document { padding: 0; background: none; box-shadow: none; border: none; }
.toc-panel, .toc-toggle, .spec-live-demo, .color-grid, .ansi-grid { display: none; }}