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.
DigitalRust specstyle.css
17 kB · 847 lines
CSS
at commit 1c8d2c10
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848/* ============================================================ Digital Rust Spec Page — Normalized to Design System Uses the canonical token system from style.css ============================================================ */
/* ---- Reset & Base ---- */
*,*::before,*::after { box-sizing: border-box; font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual; font-variant-numeric: oldstyle-nums tabular-nums; hyphens: auto; font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility;}
body { margin: 0; min-height: 100vh; font-family: var(--dr-font-body); font-weight: 500; color: var(--dr-text-primary); background-color: var(--dr-surface-base); line-height: 1.6;}
/* ---- Non-Negotiable Atmospheric Overlays ---- */
.noise-overlay { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.02; pointer-events: none; z-index: var(--dr-z-noise);}
.scanline-overlay { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, var(--dr-scanline) 2px, var(--dr-scanline) 4px ); pointer-events: none; z-index: calc(var(--dr-z-noise) - 1);}
/* ---- Links — Design System Token Compliant ---- */
a { color: var(--dr-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dr-transition-fast), text-decoration-thickness var(--dr-transition-fast);}
a:hover,a:focus-visible { color: var(--dr-text-link-hover); text-decoration-thickness: 2px;}
a:visited { color: var(--dr-text-link-visited);}
a:active { color: var(--digital-rust);}
::selection { background: var(--digital-rust); color: var(--dr-text-on-accent);}
:focus-visible { outline: 2px solid var(--stack-overglow); outline-offset: 2px;}
/* ---- Layout Shell ---- */
.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: var(--dr-border); 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(--corrupted-cache); margin: 0 0 var(--dr-space-xs);}
.toc-panel__hint { font-size: var(--dr-text-sm); color: var(--corrupted-cache); margin-bottom: var(--dr-space-md);}
#TOC { font-size: var(--dr-text-sm); max-height: calc(100vh - 6rem); overflow: auto; padding-right: var(--dr-space-sm);}
#TOC ul { list-style: none; margin: 0; padding-left: 0.95rem;}
#TOC>ul { padding-left: 0;}
#TOC li { margin: 0.2rem 0;}
#TOC 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 a:hover { color: var(--dr-text-primary); border-color: var(--dr-surface-highlight);}
#TOC a.is-active { color: var(--dr-text-primary); border-color: var(--digital-rust);}
/* ---- 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);}
/* ---- Headings — Rajdhani, Design System Tokenized ---- */
.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(--fatal-error); 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(--fatal-error); 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(--digital-rust); padding-left: var(--dr-space-md);}
.spec-document h3 { color: var(--copper-trace); font-size: var(--dr-text-lg); margin-top: var(--dr-space-xl); margin-bottom: var(--dr-space-sm);}
.spec-document h4 { color: var(--copper-trace); 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 ---- */
.spec-lede { font-size: var(--dr-text-lg); color: var(--copper-trace); 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(--digital-rust); box-shadow: 0 0 12px var(--digital-rust);}
/* ---- Buttons — Offset Shadow Pattern ---- */
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--dr-space-sm); margin-left: auto;}
.btn { border: 2px solid var(--dark-packet); border-radius: var(--dr-radius); padding: var(--dr-space-sm) var(--dr-space-lg); font-family: var(--dr-font-heading); font-variation-settings: "slnt" 0; font-weight: 600; font-size: var(--dr-text-sm); cursor: pointer; transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), background-color var(--dr-transition-fast), border-color var(--dr-transition-fast), color var(--dr-transition-fast); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; display: inline-flex; align-items: center; gap: var(--dr-space-sm); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight);}
.btn-primary { background: var(--digital-rust); border-color: var(--digital-rust); color: var(--dr-text-on-accent); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight);}
.btn-primary:hover { background: var(--amber-alert); border-color: var(--amber-alert); transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm), var(--dr-shadow-inner-highlight);}
.btn-primary:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
.btn-secondary { border-color: var(--dark-packet); color: var(--dr-text-secondary); background: transparent;}
.btn-secondary:hover { border-color: var(--digital-rust); color: var(--dr-text-primary); background: var(--dr-surface-elevated); transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-highlight);}
.btn-secondary:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
/* ---- Live Demo ---- */
.live-demo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--dr-space-lg); margin: var(--dr-space-xl) 0 var(--dr-space-2xl); padding: var(--dr-space-lg); background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius-lg); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight);}
.live-demo>div { min-width: 0;}
.demo-heading { display: flex; align-items: center; justify-content: space-between; font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--dr-text-secondary); margin-bottom: var(--dr-space-sm);}
.demo-status { display: inline-flex; align-items: center; gap: var(--dr-space-sm);}
.demo-status::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--memory-leek); box-shadow: 0 0 12px var(--memory-leek);}
pre { margin: 0; padding: var(--dr-space-lg); background: var(--dr-surface-base); color: var(--memory-leek); 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(--stack-overglow); hyphens: none;}
code { font-family: inherit; white-space: pre;}
.demo-legend { display: flex; flex-direction: column; gap: var(--dr-space-sm);}
.legend-item { display: flex; justify-content: space-between; align-items: center; padding: var(--dr-space-sm) var(--dr-space-md); font-size: var(--dr-text-sm); border: var(--dr-border-subtle); background: var(--dr-surface-secondary); border-radius: var(--dr-radius);}
.legend-chip { width: 0.85rem; height: 0.85rem; border-radius: var(--dr-radius-sm);}
/* ---- Token Colors — Same as Main Site ---- */
.token-keyword { color: var(--fatal-error); font-weight: bold;}
.token-function { color: var(--stack-overglow);}
.token-type { color: var(--dead-thread);}
.token-string { color: var(--memory-leek);}
.token-constant { color: var(--bright-stack-overglow);}
.token-number { color: var(--thermal-throttle);}
.token-comment { color: var(--dim-thermal-throttle); font-style: italic;}
.token-operator { color: var(--copper-trace);}
/* ---- Tables — Design System Tokenized ---- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--dr-surface-elevated); border: var(--dr-border);}
th,td { padding: var(--dr-space-sm) var(--dr-space-md); text-align: center; border-bottom: var(--dr-border-subtle);}
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(--copper-trace); text-transform: uppercase; letter-spacing: 0.2em;}
tbody tr:last-child td { border-bottom: none;}
/* ---- Color Lab (Palette Grids) ---- */
.table-scroll { overflow-x: auto; margin-top: var(--dr-space-md);}
.color-lab { margin-bottom: var(--dr-space-xl);}
.color-grid,.ansi-grid { display: grid; gap: var(--dr-space-sm); margin: var(--dr-space-lg) 0 var(--dr-space-sm);}
.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); cursor: pointer;}
.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;}
.ansi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));}
.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); cursor: pointer;}
.ansi-chip:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm);}
.ansi-chip:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active);}
.ansi-chip span { font-size: var(--dr-text-sm);}
.ansi-chip .legend-chip { width: 1.25rem; height: 1.25rem; border-radius: var(--dr-radius-sm);}
/* ---- Blockquotes — Left Border Accent ---- */
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;}
/* ---- Horizontal Rules — Dark Packet Lines ---- */
hr { border: none; border-top: var(--dr-border); margin: var(--dr-space-xl) auto; width: 50%;}
/* ---- Lists ---- */
ul,ol { padding-left: 1.5rem;}
li { margin: 0.35rem 0;}
/* ---- Scrollbar — Matches Main Site ---- */
::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { background: var(--dark-packet); border-radius: 4px; border: 2px solid var(--dr-surface-secondary);}
::-webkit-scrollbar-thumb:hover { background: var(--digital-rust);}
* { scrollbar-width: thin; scrollbar-color: var(--dark-packet) transparent;}
/* ---- 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; 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; }
.live-demo { grid-template-columns: 1fr; }}
@media (max-width: 640px) { .spec-meta { flex-direction: column; }
.hero-actions { width: 100%; justify-content: flex-start; }
pre { font-size: var(--dr-text-xs); }}
/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.btn:hover, .btn:active, .color-card:hover, .color-card:active, .ansi-chip:hover, .ansi-chip:active { transform: none; }}
/* ---- Print ---- */
@media print { body { background: white; color: black; }
.site-shell, .spec-document { padding: 0; background: none; box-shadow: none; border: none; }
.toc-panel, .toc-toggle, .live-demo, .color-grid, .ansi-grid, .noise-overlay, .scanline-overlay { display: none; }}