/* ============================================================================
AIdas design system — "cyberpunk on paper"
Canonical stylesheet for AIdas web views (lab, dashboards, tools, embeds).
Mirrors gazzetta.xyz: cream page, flat dashed cards, ink buttons, purple links,
VT323 pixel headings, JetBrains Mono body, terminal flourishes.
Drop in with:
Put class="aidas" on or a wrapper. See STYLE.md.
Four rules:
1. Purple is the signal. --violet (#7c3aed) marks links, brand and live signal.
Primary buttons are ink and turn purple on hover. Cyan for data, oxide for errors.
2. Machine label vs. body. JetBrains Mono for body/labels/controls (readable),
VT323 (pixel) for display headings, system sans only for a long reading column.
3. Five sizes. All UI text uses --fs-xs to --fs-lg. Separate two roles with
weight, case or colour, not with a new size.
4. Flat, not raised. Group with 1px borders (dashed for content, solid for data
panels) and tonal shifts. No shadows, no gradients.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:ital,wght@0,400;0,700;1,700&display=swap');
:root {
--bg: #f5efdf; /* cream page */
--panel: #ffffff; /* solid data panel */
--ink: #1a1a1a; /* text, borders, buttons */
--muted: #565656; /* secondary text */
--line: #d8d8d8; /* faint dividers */
--violet: #7c3aed; /* THE accent: links, brand, live signal (site --phosphor) */
--phosphor: #7c3aed; /* alias, matches site variable name */
--violet-2: #7e22ce; /* quieter accent: meta, read-time (site --secondary) */
--secondary: #7e22ce; /* alias */
--violet-lt: #ede9fe; /* accent tint */
--cyan: #0891b2; /* data series */
--oxide: #9a3b3b; /* errors, refusals */
--mono: "JetBrains Mono", "Courier New", Courier, monospace; /* body, labels, UI */
--pixel: "VT323", "Courier New", monospace; /* display headings */
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* The type scale. These five steps are the only sizes in the system. Weight,
case and colour make the difference between two roles at the same size. */
--fs-xs: 12px; /* labels, tables, gauges, chips, captions */
--fs-sm: 13px; /* notes, meta, status, panel headings */
--fs-md: 14px; /* buttons, inputs, the model answer */
--fs-body: 16px; /* page default, lede, command prefix */
--fs-lg: 20px; /* subheads and gauge values */
/* Display sizes. VT323 only: the nameplate and a dialog title. */
--fs-heading: 26px;
--fs-title: clamp(30px, 8vw, 44px);
--fs-display: clamp(46px, 9vw, 72px);
--gap: 20px;
--pad: 1rem;
}
/* ---- base ---------------------------------------------------------------- */
.aidas, body.aidas {
background: var(--bg); color: var(--ink);
font-family: var(--mono); font-size: var(--fs-body); line-height: 1.7;
}
.aidas *, body.aidas * { box-sizing: border-box; }
.aidas .wrap { max-width: 900px; margin: 0 auto; padding: 24px 18px 70px; }
.aidas strong, .aidas b { color: var(--ink); font-weight: 700; } /* bold is ink, not purple */
.aidas ::selection { background: var(--violet); color: var(--bg); }
/* Links: purple, dashed underline, invert on hover (the site's content-link style) */
.aidas a {
color: var(--violet); text-decoration: underline; text-decoration-style: dashed;
text-decoration-thickness: 1px; text-underline-offset: 4px; padding: 0 2px;
transition: background .12s ease, color .12s ease;
}
.aidas a:hover, .aidas a:focus { background: var(--violet); color: var(--bg); text-decoration: none; }
/* Nav / plain links: ink, no underline, purple on hover */
.aidas a.plain { color: var(--ink); text-decoration: none; padding: 0; }
.aidas a.plain:hover { color: var(--violet); background: transparent; }
/* Outbound arrow on external links */
.aidas a[href^="http"]:not([href*="gazzetta.xyz"])::after { content: " \2197"; color: var(--violet); }
/* ---- headings ------------------------------------------------------------ */
.aidas h1, .aidas .display {
font-family: var(--pixel); font-weight: 400; letter-spacing: .02em;
font-size: var(--fs-display); line-height: .95; margin: 2px 0 4px; color: var(--ink);
}
.aidas .tag { font-family: var(--pixel); font-weight: 400; font-size: var(--fs-heading); color: var(--violet); margin: 0 0 6px; }
.aidas h2, .aidas .section-title {
font-family: var(--pixel); font-weight: 400; letter-spacing: .02em;
font-size: var(--fs-heading); color: var(--ink); margin: 0 0 8px;
}
/* Editorial subheading like the site's in-article h2: mono bold italic */
.aidas .subhead { font-family: var(--mono); font-weight: 700; font-style: italic; font-size: var(--fs-lg); margin: 24px 0 6px; }
.aidas .lede { font-size: var(--fs-body); max-width: 660px; color: var(--muted); }
.aidas .prose { font-family: var(--sans); }
/* Terminal prompt line, e.g. C:\GAZZETTA\AIDAS-LAB>_ */
.aidas .term { font-size: var(--fs-md); color: var(--violet); letter-spacing: .1em; font-weight: 700; }
/* Command-line title: prepends the C:\ prompt + blinking cursor to a heading */
.aidas .cmd::before { content: "C:\\GAZZETTA\\>"; display: block; font-family: var(--mono); font-weight: 700;
font-size: var(--fs-body); color: var(--violet); letter-spacing: .1em; margin-bottom: .5rem; }
.aidas .cmd::after, .aidas .blink { content: "_"; color: var(--violet); animation: gzBlink 1.1s step-end infinite; }
.aidas .blink { display: inline-block; margin-left: 4px; }
@keyframes gzBlink { 50% { opacity: 0; } }
/* ---- buttons: ink, purple on hover, square ------------------------------ */
.aidas .btn {
display: inline-block; font-family: var(--mono); font-size: var(--fs-md); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
border-radius: 0; padding: .5rem 1rem; margin-top: 14px; text-decoration: none;
}
.aidas .btn:hover { background: var(--violet); color: var(--bg); border-color: var(--violet); }
.aidas .btn[disabled] { opacity: .5; cursor: wait; }
.aidas .btn.accent { background: var(--violet); border-color: var(--violet); }
.aidas .btn.accent:hover { background: var(--bg); color: var(--violet); }
.aidas .btn.ghost { background: transparent; color: var(--ink); }
.aidas .btn.ghost:hover { background: var(--violet); color: var(--bg); }
.aidas .btn.sm { font-size: var(--fs-xs); padding: 6px 12px; margin-right: 8px; }
/* ---- forms --------------------------------------------------------------- */
.aidas label {
display: block; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); margin: 10px 0 3px;
}
.aidas input, .aidas textarea, .aidas select {
width: 100%; font-family: var(--mono); font-size: var(--fs-md); padding: 8px 10px;
border: 1px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink);
}
.aidas textarea { min-height: 56px; resize: vertical; }
.aidas input:focus, .aidas textarea:focus, .aidas select:focus { outline: 1px solid var(--violet); outline-offset: 1px; }
/* ---- cards & panels (flat) ----------------------------------------------- */
/* Content card: dashed ink border, transparent, subtle hover (the site's card) */
.aidas .card { border: 1px dashed var(--ink); background: transparent; padding: var(--pad); margin-top: var(--gap); }
.aidas .card:hover { background: rgba(0,0,0,.03); }
/* Data panel: solid white with a solid border, for charts and tables that need contrast */
.aidas .panel { border: 1px solid var(--ink); background: var(--panel); padding: var(--pad); margin-top: var(--gap);
-webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* ---- rules, quotes, meta, labels ---------------------------------------- */
/* Horizontal rule as an ASCII line */
.aidas hr, .aidas .rule { border: 0; margin: 1.5rem 0; }
.aidas hr::before, .aidas .rule::before {
content: "----------------------------------------"; display: block; text-align: center;
color: var(--violet); font-family: var(--mono); white-space: pre; overflow: hidden;
}
/* Blockquote as terminal output */
.aidas blockquote { border-left: 2px solid var(--violet); margin-left: 0; padding-left: 12px; font-style: normal; }
.aidas blockquote p::before { content: "> "; color: var(--violet); font-weight: 700; }
/* Meta line / dates: // prefix, quieter purple */
.aidas .meta { color: var(--violet-2); font-size: var(--fs-sm); }
.aidas .meta time::before, .aidas time.date::before { content: "// "; color: var(--violet); }
/* Section label with a pulsing signal dot */
.aidas .section-label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.aidas .section-label::before {
content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--violet); margin-right: 8px; vertical-align: middle; animation: gzPulse 2s ease-in-out infinite;
}
@keyframes gzPulse { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
/* End-of-transmission divider */
.aidas .eof { text-align: center; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .2em;
color: var(--violet); opacity: .55; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--violet); }
.aidas .foot { font-size: var(--fs-xs); color: var(--muted); margin-top: 26px; border-top: 1px solid var(--ink); padding-top: 10px; }
/* CRT scanlines over an image: wrap it in */
.aidas .scan { position: relative; display: inline-block; }
.aidas .scan::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.06) 2px 4px);
}
/* ---- small type / status ------------------------------------------------- */
.aidas .note { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.aidas .muted { color: var(--muted); }
.aidas .status { font-size: var(--fs-sm); margin-top: 10px; min-height: 18px; }
.aidas .status.err { color: var(--oxide); }
/* ---- pills / badges / chips --------------------------------------------- */
.aidas .pill { display: inline-block; font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; background: var(--violet-lt); color: var(--violet); }
.aidas .badge { display: inline-block; color: #fff; font-size: var(--fs-xs); padding: 2px 8px; text-transform: uppercase; letter-spacing: .05em; background: var(--violet); }
.aidas .chip { font-size: var(--fs-xs); border: 1px solid var(--line); padding: 2px 6px; background: #faf7ee; }
.aidas .chip i, .aidas .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: middle; }
.aidas .legend { margin-top: 12px; font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 10px; }
/* ---- data: horizontal bar & matrix table -------------------------------- */
.aidas .bar { height: 20px; border: 1px solid var(--ink); display: flex; overflow: hidden; }
.aidas .bar span { display: block; height: 100%; }
.aidas .bar.empty { align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--muted); }
.aidas table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); margin: 10px 0 4px; }
.aidas table.data th, .aidas table.data td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; }
.aidas table.data th { background: #f3efe2; font-weight: 700; font-size: var(--fs-xs); }
.aidas table.data td.rowlbl { text-align: left; font-weight: 700; background: #faf7ee; white-space: nowrap; }
.aidas table.data td.cell { color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
/* ---- reduced motion ------------------------------------------------------
The cursor and the signal dot are decoration; a static state says the same. */
@media (prefers-reduced-motion: reduce) {
.aidas .cmd::after, .aidas .blink, .aidas .section-label::before { animation: none; }
.aidas * { transition-duration: 0.01ms !important; }
}
/* ---- terminal scrollbar -------------------------------------------------- */
.aidas ::-webkit-scrollbar { width: 8px; height: 8px; }
.aidas ::-webkit-scrollbar-track { background: var(--bg); }
.aidas ::-webkit-scrollbar-thumb { background: var(--ink); border: 1px solid var(--bg); }
.aidas ::-webkit-scrollbar-thumb:hover { background: var(--violet); }