body { max-width: 70ch; margin-inline: auto; } .sitenav { margin-block-end: 1.5rem; padding-block-end: 0.5rem; border-bottom: 1px solid currentColor; } .sitenav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; } .sitenav [aria-current="page"] { font-weight: bold; } .langpicker { text-align: right; font-size: 0.8rem; margin-block-end: 0.35rem; } .langpicker a, .langpicker [aria-current="page"] { margin-inline-start: 0.7rem; } .langpicker [aria-current="page"] { font-weight: bold; } .tab { display: none; } .tab:target { display: block; } .tabs:not(:has(:target)) #zec { display: block; } .charts-css.column { display: block; max-width: 36rem; margin-block: 1rem; overflow-x: auto; } .charts-css.column caption { caption-side: top; text-align: start; font-weight: bold; padding-bottom: 0.25rem; display: block; } .charts-css.column tbody { display: flex; align-items: stretch; gap: 0.5rem; height: 13rem; border-bottom: 1px solid currentColor; } .charts-css.column tbody tr { flex: 1 1 0; min-width: 3.25rem; display: grid; grid-template-rows: 1fr auto; } .charts-css.column td { grid-row: 1; align-self: end; height: calc(var(--size, 0) * 100%); background: var(--bar-color, #5a3eaf); border-radius: 3px 3px 0 0; display: flex; align-items: flex-start; justify-content: center; } .charts-css.column th { grid-row: 2; font-weight: normal; font-size: 0.72rem; text-align: center; padding-top: 0.25rem; word-break: break-word; } .charts-css.column .data { font-size: 0.7rem; color: #fff; padding: 0.1rem 0.2rem; white-space: nowrap; } .charts-css.column.volume-chart td:hover .data { font-size: 0.85rem; font-weight: bold; outline: 1px solid currentColor; } .charts-css.column.ref-line tbody { position: relative; } .charts-css.column.ref-line td { height: calc(var(--size, 0) * 80%); } .charts-css.column.ref-line tbody::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--ref, 1) * 100%); border-top: 2px dashed currentColor; pointer-events: none; } .history h3 { font-size: 1rem; margin-block: 1.25rem 0.25rem; } .history h4 { font-size: 0.8rem; font-weight: normal; margin-block: 0.75rem 0.25rem; } .history-empty { font-style: italic; } .history-chart { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; grid-template-rows: 14rem 5rem auto; gap: 0.25rem; max-width: 44rem; margin-block: 0.5rem 1.5rem; grid-template-areas: "data-1-axis stocks data-2-axis" "data-1-axis volume data-2-axis" "primary-axis primary-axis primary-axis"; } .history-chart .charts-css { display: block; width: 100%; height: 100%; position: relative; } .history-chart .charts-css.area, .history-chart .charts-css.line { grid-area: stocks; } .history-chart .charts-css.column { grid-area: volume; max-width: none; margin-block: 0; } .history-chart .primary-axis { grid-area: primary-axis; font-size: 0.68rem; text-align: center; padding-top: 0.25rem; border-top: 1px solid currentColor; } .history-chart .data-1-axis { grid-area: data-1-axis; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.68rem; text-align: center; align-self: center; } .history-chart .data-2-axis { grid-area: data-2-axis; writing-mode: vertical-rl; font-size: 0.68rem; text-align: center; align-self: center; } .history-chart .charts-css.area tbody, .history-chart .charts-css.line tbody { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 100%; } .history-chart .charts-css.area tbody tr, .history-chart .charts-css.line tbody tr { position: relative; flex: 1 1 0; min-width: 0; } .history-chart .charts-css.area td, .history-chart .charts-css.line td { position: absolute; inset: 0; } .history-chart .charts-css.area td::before, .history-chart .charts-css.line td::before { content: ""; position: absolute; inset: 0; } .history-chart .charts-css.area td::before { z-index: -1; background: linear-gradient(rgba(90, 62, 175, 0.30), rgba(90, 62, 175, 0)); clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%); } .history-chart .charts-css.line { --line-size: 2px; } .history-chart .charts-css.line td::before { clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size))); } .history-chart .charts-css.line.src-bitfinex td::before { background: #2e8b57; } .history-chart .charts-css.line.src-kraken td::before { background: #4060d0; } .history-chart .charts-css.line.src-coinbase td::before { background: #d07000; } .history-chart .charts-css.line.src-binance td::before { background: #b03090; } .history-chart .charts-css.line.src-coingecko td::before { background: #707070; } .history-chart .charts-css.line td.gap::before, .history-chart .charts-css.area td.gap::before { content: none; } .history-chart .charts-css.column tbody { display: flex; flex-direction: row; align-items: flex-end; gap: 1px; width: 100%; height: 100%; border-bottom: 0; } .history-chart .charts-css.column tbody tr { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; } .history-chart .charts-css.column td { width: 100%; height: calc(var(--size, 0) * 100%); background: #9a8fc0; border-radius: 0; } .history-chart .charts-css .data { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; } .charts-css.bar { display: block; max-width: 36rem; margin-block: 1rem; } .charts-css.bar caption { caption-side: top; text-align: start; font-weight: bold; padding-bottom: 0.25rem; } .charts-css.bar tbody { display: block; } .charts-css.bar tr { display: grid; grid-template-columns: 11rem 1fr 4.5rem; gap: 0.5rem; align-items: center; margin-block: 3px; } .charts-css.bar th { font-weight: normal; font-size: 0.72rem; text-align: start; overflow-wrap: anywhere; } .charts-css.bar td.bar { position: relative; height: 1rem; } .charts-css.bar td.bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--size, 0) * 100%); background: #5a3eaf; border-radius: 3px; } .charts-css.bar td.val { text-align: end; font-size: 0.72rem; font-variant-numeric: tabular-nums; } .node-chart { max-width: 40rem; margin-block: 0.5rem 1.5rem; } .node-chart figcaption { font-size: 0.85rem; font-weight: bold; margin-block: 0.75rem 0.25rem; } .node-plot { display: grid; height: 10rem; border-bottom: 1px solid currentColor; } .node-plot .charts-css { grid-area: 1 / 1; display: block; width: 100%; height: 100%; position: relative; } .node-plot .charts-css.line tbody { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 100%; } .node-plot .charts-css.line tbody tr { position: relative; flex: 1 1 0; min-width: 0; } .node-plot .charts-css.line td { position: absolute; inset: 0; } .node-plot .charts-css.line { --line-size: 2px; } .node-plot .charts-css.line td::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size))); } .node-plot .charts-css.line.ds-1 td::before { background: #2e8b57; } .node-plot .charts-css.line.ds-2 td::before { background: #4060d0; } .node-plot .charts-css.line td.gap::before { content: none; } .node-axis { display: flex; justify-content: space-between; font-size: 0.68rem; padding-top: 0.25rem; } .node-plot .charts-css .data { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; } ol.timeline { --timeline-accent: currentColor; list-style: none; position: relative; padding-left: 2.6rem; scroll-snap-type: y proximity; } ol.timeline::before { content: ""; position: absolute; left: 0.82rem; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 3px; opacity: 0.55; background: linear-gradient(to bottom, transparent 0, var(--timeline-accent) 7%, var(--timeline-accent) 93%, transparent 100%); } ol.timeline > li { position: relative; margin: 0 0 1.6rem 0; padding: 0.7rem 0.9rem; border: 1px solid transparent; border-radius: 7px; scroll-snap-align: start; } ol.timeline > li::before { content: ""; position: absolute; left: -2.05rem; top: 0.95rem; width: 13px; height: 13px; border-radius: 50%; background: var(--timeline-accent); box-shadow: 0 0 7px var(--timeline-accent); } ol.timeline > li:hover, ol.timeline > li:focus-within, ol.timeline > li:target { transform: scale(1.02); border-color: var(--timeline-accent); box-shadow: 0 0 0 1px var(--timeline-accent), 0 0 14px var(--timeline-accent); } @media (prefers-reduced-motion: no-preference) { ol.timeline > li { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } ol.timeline > li::before { animation: zs-timeline-node-pulse 3.2s ease-in-out infinite; } @keyframes zs-timeline-node-pulse { 0%, 100% { box-shadow: 0 0 6px var(--timeline-accent); } 50% { box-shadow: 0 0 13px var(--timeline-accent); } } } .home { margin-block: 1.5rem; } .home-hero { margin-block: 1rem 1.75rem; } .home-hero .tagline { margin-block: 0 0.4rem; } .home-hero p { margin-block: 0.5rem; } .home-sections { list-style: none; padding: 0; margin-block: 1.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; } .home-sections > li { display: flex; flex-direction: column; padding: 0.9rem 1.1rem; border: 1px solid currentColor; border-radius: 8px; } .home-sections h3 { margin-block: 0 0.3rem; } .home-sections h3 a { text-decoration: none; } .home-sections .sec-desc { margin-block: 0; font-size: 0.9rem; opacity: 0.85; } .home-notes { margin-block-start: 2rem; } .home-notes p { font-size: 0.85rem; margin-block: 0.55rem; } .home-foot { opacity: 0.7; } body { max-width: min(84ch, 94vw); padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; } .sitenav ul { gap: 0; } .sitenav li { flex: 1 1 0; display: flex; } .sitenav a, .sitenav [aria-current="page"] { flex: 1; text-align: center; padding: 0.3em 0.4em; } table:not(.charts-css) { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-block: 0.7rem 1.4rem; } table:not(.charts-css) caption { text-align: start; font-weight: bold; padding-bottom: 0.3rem; } table:not(.charts-css) th, table:not(.charts-css) td { white-space: nowrap; } table:not(.charts-css) th { text-align: start; font-size: 0.78rem; letter-spacing: 0.02em; border-block-end: 1px solid currentColor; padding: 0.25rem 0.5rem; } table:not(.charts-css) td { padding: 0.22rem 0.5rem; border-block-end: 1px solid currentColor; font-variant-numeric: tabular-nums; } table:not(.charts-css) tr:hover td { outline: 1px solid currentColor; } table:not(.charts-css) tr.summary td { border-block-start: 1px solid currentColor; font-weight: bold; } .news-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 1.5rem 0; } .news-pagination li { flex: 1 1 0; display: flex; } .news-pagination a, .news-pagination [aria-current="page"] { flex: 1; text-align: center; padding: 0.2em 0.4em; border: 1px solid currentColor; text-decoration: none; } .news-pagination a:hover, .news-pagination a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .news-pagination [aria-current="page"] { font-weight: bold; border-width: 2px; } .themepicker { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 2rem; padding-top: 1rem; border-top: 1px solid currentColor; } .themepicker a { flex: 1 1 0; text-align: center; margin: 0; padding: 0.3em 0.4em; border: 1px solid currentColor; text-decoration: none; } .themepicker a:hover, .themepicker a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .themepicker a.t-default { font-weight: bold; border-width: 2px; } .charts-css caption, .node-chart figcaption { width: 100%; } .charts-css.column, .charts-css.bar, .history-chart, .node-chart, .node-plot { max-width: 100%; } .node-plot .charts-css .data, .history-chart .charts-css .data { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-top: 2px; width: auto; height: auto; padding: 0.04em 0.35em; clip-path: none; overflow: visible; background: #fff; color: #000; border: 1px solid currentColor; font-size: 0.7rem; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 20; } .node-plot .charts-css td:hover .data, .node-plot .charts-css td:focus-within .data, .history-chart .charts-css td:hover .data, .history-chart .charts-css td:focus-within .data { opacity: 1; } /* network-address footer (ZS-221) — SHARED row layout (inherited by every theme except plain) */ .netfooter { margin-top: 3rem; font-size: 0.9rem; text-align: center; } .netaddr { list-style: none; display: flex; flex-wrap: nowrap; width: 100%; gap: 0; margin: 0; padding: 0; } .netaddr li { flex: 1 1 0; margin: 0; text-align: center; min-width: 0; } .nf-source { margin: 0.6rem 0 0; font-size: 0.74em; opacity: 0.6; } /* ============================================================================ Cyberpunk 2077 — "Night City HUD" theme (preview-opus; ZS-110 probe r19). Education prose → #ff86e4. (otherwise unchanged.) Pure CSS, I-1, Z-8. ============================================================================ */ /* ============================================================================ Cyberpunk — Phase-B HUD concept probe (over DEFAULT base). Recolor (palette + chromatic-aberration title) + Night City HUD layout/graphics. Pure CSS floor; the data: SVG reticle is additive (vanishes under Tor Safest). ============================================================================ */ /* --- palette + type (the existing recolor) --- */ body { background-color: #05060a; color: #f3e08a; font-family: "Rajdhani", "Chakra Petch", "Trebuchet MS", sans-serif; max-width: min(84ch, 94vw); margin-inline: auto; padding: 2rem clamp(1rem, 4vw, 3rem); } a { color: #00f0ff; text-shadow: 0 0 6px rgba(0,240,255,0.5); } a:visited { color: #4fd8e8; } :focus-visible { outline: 2px solid #fcee0a; outline-offset: 3px; } ::selection { background: rgba(0,240,255,0.32); color: #fcee0a; text-shadow: none; } h2, h3 { color: #00f0ff; letter-spacing: 0.04em; } /* chromatic-aberration / RGB-split title — softened warm gold (not searing yellow); ghosts dimmed */ h1 { color: #f3e08a; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 1.5px 0 rgba(0,240,255,0.55), -1.5px 0 rgba(255,43,214,0.5); } .tagline { color: #e9ddc0; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 1px 0 rgba(0,240,255,0.4), -1px 0 rgba(255,43,214,0.38); } /* --- masthead: hazard band + decorative HUD reticle --- */ .masthead { position: relative; border-bottom: 1px solid rgba(252,238,10,0.55); padding-bottom: 0.6rem; } .masthead::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; background: repeating-linear-gradient(135deg, #fcee0a 0 12px, #05060a 12px 24px); opacity: 0.9; } .masthead::after { content: ""; position: absolute; top: 0.2rem; right: 1.4rem; width: 46px; height: 46px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fcee0a' stroke-width='2'%3E%3Crect x='7' y='7' width='34' height='34'/%3E%3Cline x1='24' y1='0' x2='24' y2='11'/%3E%3Cline x1='24' y1='37' x2='24' y2='48'/%3E%3Cline x1='0' y1='24' x2='11' y2='24'/%3E%3Cline x1='37' y1='24' x2='48' y2='24'/%3E%3C/g%3E%3Crect x='20' y='20' width='8' height='8' fill='%2300f0ff'/%3E%3C/svg%3E"); } /* ZS-141: give the langpicker the top-right corner flush to the content edge, and drop the HUD reticle (::after) down beside the title — ZS-139's padding-right nudge still left the picker overlapping the reticle and looking un-right-aligned. */ .langpicker { position: relative; z-index: 1; } .masthead::after { top: 2.3rem; } /* --- home section cards: chamfered Night City HUD panels --- */ .home-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: sec; } /* gold chamfered frame: a gold backing layer clipped to the chamfer, with a dark inset fill on top — so the whole outline INCLUDING the cut corners reads in gold (not bare black). */ .home-sections > li { position: relative; margin: 0; padding: 1.1rem 1.2rem 1.2rem; counter-increment: sec; border: 0; border-radius: 0; background: rgba(243,224,138,0.32); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } .home-sections > li::before { content: ""; position: absolute; inset: 1.5px; z-index: 0; background: linear-gradient(160deg, rgba(0,240,255,0.08), rgba(11,15,19,0.97) 60%); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); } .home-sections > li > * { position: relative; z-index: 1; } .home-sections h3 { margin-top: 0.2rem; } /* counter is a HUD label — gold, present but still subordinate to the cyan section name */ .home-sections h3::before { content: "[ " counter(sec, decimal-leading-zero) " ] "; color: rgba(245,225,135,0.85); text-shadow: none; font-family: "Share Tech Mono", "Consolas", monospace; font-size: 0.78em; font-weight: 600; } .home-sections h3 a { text-shadow: 0 0 8px rgba(0,240,255,0.45); } .sec-desc { color: #aeb9c2; } /* --- sitenav: full-width hazard-bar; equal-width panels; hazard tape on the bottom border (frees .sitenav::after for the per-page Edgerunners quote, see sections) --- */ .sitenav { border: 0; border-bottom: 4px solid; padding: 0; position: relative; background: #0b0b0b; margin: 0 0 3.6rem; border-image: repeating-linear-gradient(135deg, #fcee0a 0 10px, #05060a 10px 20px) 1; } .sitenav ul { display: flex; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; } .sitenav li { flex: 1 1 0; text-align: center; border-right: 1px solid rgba(252,238,10,0.22); } .sitenav li:last-child { border-right: 0; } .sitenav a, .sitenav span { display: block; padding: 0.6rem 0.4rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.92rem; color: #f4e57a; text-shadow: none; } .sitenav a:hover, .sitenav a:focus-visible { background: rgba(252,238,10,0.16); color: #fcee0a; } .sitenav [aria-current="page"], .sitenav span[aria-current] { background: #fcee0a; color: #05060a; font-weight: 700; } /* --- themepicker: HUD loadout panel, evenly-distributed equal-width chips --- */ .themepicker { position: relative; box-sizing: border-box; width: 100%; margin-top: 2.2rem; padding: 1rem 1rem 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; border: 1px solid rgba(0,240,255,0.32); border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .themepicker::before { content: "// CHROMA LOADOUT // 6 INSTALLED"; flex-basis: 100%; display: block; color: #fcee0a; letter-spacing: 0.14em; font-size: 0.72rem; margin-bottom: 0.6rem; opacity: 0.85; font-family: "Share Tech Mono", "Consolas", monospace; } .themepicker a { flex: 1 1 0; text-align: center; padding: 0.3em 0.4em; margin: 0; font-size: 0.78rem; color: #00f0ff; text-decoration: none; text-shadow: none; background: rgba(11,15,19,0.7); border: 1px solid rgba(0,240,255,0.28); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } .themepicker a:hover, .themepicker a:focus-visible { color: #fcee0a; border-color: #fcee0a; outline: none; } .t-cyberpunk { background: #fcee0a !important; color: #05060a !important; text-shadow: none !important; border-color: #fcee0a !important; font-weight: 700; box-shadow: 0 0 8px rgba(252,238,10,0.45); } /* --- home hero: blinking SYSTEM ONLINE status (the quote moved under the sitenav) --- */ .home-hero { position: relative; } .home-hero::after { display: block; margin-top: 1.0rem; padding: 0.45rem 0.8rem; background: rgba(11,15,19,0.6); border-left: 3px solid #00f0ff; content: "// SYSTEM ONLINE // NIGHT CITY // SYNC: NOMINAL"; color: #fcee0a; font-family: "Share Tech Mono", "Consolas", monospace; font-size: 0.78rem; letter-spacing: 0.12em; } .home-hero .tagline::after { content: " _"; color: #fcee0a; } @media (prefers-reduced-motion: no-preference) { @keyframes cp-caret { 0%,55% { opacity: 1; } 55.01%,100% { opacity: 0; } } .home-hero::after, .home-hero .tagline::after { animation: cp-caret 1.1s steps(1) infinite; } } /* --- charts recolor --- */ .charts-css.column td { --bar-color: #00f0ff; } .charts-css.column .data { color: #05060a; } .charts-css.bar td.bar::before { background: #fcee0a; } .history-chart .charts-css.column td { background: #ff2bd6; } ol.timeline { --timeline-accent: #00f0ff; } /* ============================================================================ Cyberpunk — REMAINING SECTIONS (probe r2). Layers OVER the locked homepage fragment. Ports the agreed picks: T2 braindance-strand timeline (scanline on hover ONLY — the noise fix), breach-protocol news feed, per-section masthead emblems (news=signal, market=diamond, node=circuit, education=cap; home=reticle default from the homepage fragment), market tables HUD-framed (node-style), charts recolored cyan/gold-dominant (magenta rolled back). Pure CSS within I-1. Aesthetic (Z-8): ContrastLint gates DEFAULT alone. ASCII-only in content:. ============================================================================ */ /* === §1 per-section sector taglines on h1::after ================================== */ h1::after { content: " // NIGHT CITY"; white-space: nowrap; display: inline-block; margin-left: 0.45em; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.5em; letter-spacing: 0.14em; font-weight: 400; color: rgba(245,225,135,0.8); text-shadow: none; text-transform: none; vertical-align: middle; } body:not(:has(.sitenav a[href$="news/index.html"])) h1::after { content: " // SECTOR: NEWS"; } body:not(:has(.sitenav a[href$="market.html"])) h1::after { content: " // SECTOR: MARKET"; } body:not(:has(.sitenav a[href$="node.html"])) h1::after { content: " // SECTOR: NODE"; } body:not(:has(.sitenav a[href$="education/index.html"])) h1::after { content: " // SECTOR: DATA"; } /* === §1b per-section masthead emblems on .masthead::after ========================== The homepage fragment paints the reticle as the default. Each section overrides the background-image with its own motif via :has() (the matrix/pipboy per-section emblem pattern). Home keeps the reticle. Lint-clean data:SVGs (shapes + hex). */ body:not(:has(.sitenav a[href$="news/index.html"])) .masthead::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 26 Q24 8 42 26'/%3E%3Cpath d='M12 29 Q24 17 36 29'/%3E%3Cpath d='M18 32 Q24 26 30 32'/%3E%3C/g%3E%3Ccircle cx='24' cy='38' r='3' fill='%23fcee0a'/%3E%3Crect x='22.5' y='38' width='3' height='6' fill='%23fcee0a'/%3E%3C/svg%3E"); } body:not(:has(.sitenav a[href$="market.html"])) .masthead::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='24,4 44,18 24,44 4,18' fill='%2305060a' stroke='%2300f0ff' stroke-width='2'/%3E%3Cline x1='4' y1='18' x2='44' y2='18' stroke='%2300f0ff' stroke-width='1.2'/%3E%3Cline x1='24' y1='4' x2='24' y2='18' stroke='%23fcee0a' stroke-width='1.4'/%3E%3Cline x1='14' y1='18' x2='24' y2='44' stroke='%23f3e08a' stroke-width='1' opacity='0.6'/%3E%3Cline x1='34' y1='18' x2='24' y2='44' stroke='%23f3e08a' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E"); } body:not(:has(.sitenav a[href$="node.html"])) .masthead::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 12 H20 V26 H34'/%3E%3Cpath d='M6 26 H14 V38 H28'/%3E%3Cpath d='M34 26 V38 H42'/%3E%3C/g%3E%3Crect x='20' y='14' width='14' height='12' fill='none' stroke='%23fcee0a' stroke-width='1.6'/%3E%3Crect x='24' y='18' width='6' height='4' fill='%2300f0ff'/%3E%3Ccircle cx='6' cy='12' r='2.2' fill='%23fcee0a'/%3E%3Ccircle cx='28' cy='38' r='2.2' fill='%23fcee0a'/%3E%3Ccircle cx='42' cy='38' r='2.2' fill='%23fcee0a'/%3E%3C/svg%3E"); } body:not(:has(.sitenav a[href$="education/index.html"])) .masthead::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 9 L44 18 L24 27 L4 18 Z' fill='none' stroke='%23fcee0a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M13 22 V31 Q24 38 35 31 V22' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='44' y1='18' x2='44' y2='29' stroke='%2300f0ff' stroke-width='1.6'/%3E%3Ccircle cx='44' cy='31' r='2.2' fill='%2300f0ff'/%3E%3C/svg%3E"); } /* === §1c per-page Edgerunners transmission quote, under the sitenav ================ A different crew quote per page (Lucy/Rebecca/Maine/Kiwi/David), keyed by :has(). Typewriter-once (types letter-by-letter, then stays — no cycle) + a blinking caret. Reduced-motion: shown in full immediately. IP-light: short signature refrains. */ .sitenav::after { content: "LUCY // Let's go to the moon."; position: absolute; left: 0; top: calc(100% + 0.6rem); display: inline-block; box-sizing: border-box; overflow: hidden; white-space: nowrap; padding: 0.32rem 0.8rem; width: 0; max-width: min(84ch, 94vw); background: rgba(11,15,19,0.65); border-left: 3px solid #fcee0a; border-right: 2px solid #fcee0a; color: #00f0ff; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.86rem; letter-spacing: 0.03em; vertical-align: middle; text-shadow: 1px 0 rgba(255,43,214,0.25), -1px 0 rgba(0,240,255,0.25); } body:not(:has(.sitenav a[href$="news/index.html"])) .sitenav::after { content: "REBECCA // Heard the buzz, choom?"; } body:has(.news-pagination a[rel="prev"][href$="index.html"]):has(.news-pagination a[rel="next"][href$="3.html"]) .sitenav::after { content: "REBECCA // The net's loud today. Good."; } body:has(.news-pagination a[rel="prev"][href$="2.html"]):has(.news-pagination a[rel="next"][href$="4.html"]) .sitenav::after { content: "REBECCA // Stay sharp — this town bites."; } body:has(.news-pagination a[rel="prev"][href$="3.html"]):has(.news-pagination a[rel="next"][href$="5.html"]) .sitenav::after { content: "REBECCA // Eyes up — net's crawling today."; } body:has(.news-pagination a[rel="prev"][href$="4.html"]):has(.news-pagination a[rel="next"][href$="6.html"]) .sitenav::after { content: "REBECCA // Newsflash: nobody's coming to save you."; } body:has(.news-pagination a[rel="prev"][href$="5.html"]):has(.news-pagination a[rel="next"][href$="7.html"]) .sitenav::after { content: "REBECCA // Trust nobody. Trust the gun."; } body:has(.news-pagination a[rel="prev"][href$="6.html"]):has(.news-pagination a[rel="next"][href$="8.html"]) .sitenav::after { content: "REBECCA // Choom, you're reading the wrong feed."; } body:has(.news-pagination a[rel="prev"][href$="7.html"]):has(.news-pagination a[rel="next"][href$="9.html"]) .sitenav::after { content: "REBECCA // I got your back. Always."; } body:has(.news-pagination a[rel="prev"][href$="8.html"]):not(:has(.news-pagination a[rel="next"])) .sitenav::after { content: "REBECCA // The story's never the whole story."; } body:not(:has(.sitenav a[href$="market.html"])) .sitenav::after { content: "MAINE // Everybody's got a price."; } body:not(:has(.sitenav a[href$="node.html"])) .sitenav::after { content: "KIWI // The net never forgets."; } body:not(:has(.sitenav a[href$="education/index.html"])) .sitenav::after { content: "DAVID // Learn it. Then beat it."; } @media (prefers-reduced-motion: no-preference) { @keyframes cp-type { from { width: 2.1rem; } to { width: var(--qw); } } @keyframes cp-qcaret { 0%,50% { border-right-color: #fcee0a; } 50.01%,100% { border-right-color: transparent; } } .sitenav::after { --qw: calc(31ch + 1.6rem); animation: cp-type 3.1s steps(31, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.1s; } body:not(:has(.sitenav a[href$="news/index.html"])) .sitenav::after { --qw: calc(36ch + 1.6rem); animation: cp-type 3.6s steps(36, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.6s; } body:has(.news-pagination a[rel="prev"][href$="index.html"]):has(.news-pagination a[rel="next"][href$="3.html"]) .sitenav::after { --qw: calc(40ch + 1.6rem); animation: cp-type 4.0s steps(40, end) forwards, cp-qcaret 0.9s steps(1) infinite 4.0s; } body:has(.news-pagination a[rel="prev"][href$="2.html"]):has(.news-pagination a[rel="next"][href$="4.html"]) .sitenav::after { --qw: calc(42ch + 1.6rem); animation: cp-type 4.2s steps(42, end) forwards, cp-qcaret 0.9s steps(1) infinite 4.2s; } body:has(.news-pagination a[rel="prev"][href$="3.html"]):has(.news-pagination a[rel="next"][href$="5.html"]) .sitenav::after { --qw: calc(44ch + 1.6rem); animation: cp-type 4.4s steps(44, end) forwards, cp-qcaret 0.9s steps(1) infinite 4.4s; } body:has(.news-pagination a[rel="prev"][href$="4.html"]):has(.news-pagination a[rel="next"][href$="6.html"]) .sitenav::after { --qw: calc(52ch + 1.6rem); animation: cp-type 5.2s steps(52, end) forwards, cp-qcaret 0.9s steps(1) infinite 5.2s; } body:has(.news-pagination a[rel="prev"][href$="5.html"]):has(.news-pagination a[rel="next"][href$="7.html"]) .sitenav::after { --qw: calc(41ch + 1.6rem); animation: cp-type 4.1s steps(41, end) forwards, cp-qcaret 0.9s steps(1) infinite 4.1s; } body:has(.news-pagination a[rel="prev"][href$="6.html"]):has(.news-pagination a[rel="next"][href$="8.html"]) .sitenav::after { --qw: calc(50ch + 1.6rem); animation: cp-type 5.0s steps(50, end) forwards, cp-qcaret 0.9s steps(1) infinite 5.0s; } body:has(.news-pagination a[rel="prev"][href$="7.html"]):has(.news-pagination a[rel="next"][href$="9.html"]) .sitenav::after { --qw: calc(37ch + 1.6rem); animation: cp-type 3.7s steps(37, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.7s; } body:has(.news-pagination a[rel="prev"][href$="8.html"]):not(:has(.news-pagination a[rel="next"])) .sitenav::after { --qw: calc(47ch + 1.6rem); animation: cp-type 4.7s steps(47, end) forwards, cp-qcaret 0.9s steps(1) infinite 4.7s; } body:not(:has(.sitenav a[href$="market.html"])) .sitenav::after { --qw: calc(36ch + 1.6rem); animation: cp-type 3.6s steps(36, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.6s; } body:not(:has(.sitenav a[href$="node.html"])) .sitenav::after { --qw: calc(32ch + 1.6rem); animation: cp-type 3.2s steps(32, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.2s; } body:not(:has(.sitenav a[href$="education/index.html"])) .sitenav::after { --qw: calc(34ch + 1.6rem); animation: cp-type 3.4s steps(34, end) forwards, cp-qcaret 0.9s steps(1) infinite 3.4s; } } @media (prefers-reduced-motion: reduce) { .sitenav::after { width: auto; border-right-color: transparent; } } /* === §2 figures ============================================================== Education subsections DO carry a per-subsection HUD figure (matrix/pipboy ambition); painted in §7. Note: this re-triggers MatrixThemeTest:81 (matrix-exclusive figures) — a ZS-110 §Out-of-scope test-contract update (matrix is no longer the sole painter). */ /* === §3 timeline = BRAINDANCE STRAND (chosen) ===================================== A vertical glowing strand with node dots; each milestone a "memory clip" card. The scanline sweeps ONLY on :hover/:focus-within/:target (the noise fix) — never on every item. Distinct from matrix's console log + pipboy's man-page. */ ol.timeline { counter-reset: ms; list-style: none; position: relative; padding-inline-start: 2.6rem; margin: 1.3rem 0; } ol.timeline::before { content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, #00f0ff, rgba(255,43,214,0.7) 50%, #00f0ff); box-shadow: 0 0 6px rgba(0,240,255,0.45); } ol.timeline > li { counter-increment: ms; position: relative; margin: 0 0 1.0rem; padding: 0.55rem 0.9rem 0.65rem; background: rgba(11,15,19,0.6); border: 1px solid rgba(0,240,255,0.2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } ol.timeline > li::before { content: ""; position: absolute; left: -1.62rem; top: 0.85rem; width: 12px; height: 12px; border-radius: 50%; background: #05060a; border: 2px solid #00f0ff; } ol.timeline > li > p { margin: 0; } ol.timeline > li > p > strong:first-child { display: block; margin-bottom: 0.2rem; color: #00f0ff; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.92rem; letter-spacing: 0.02em; text-shadow: 1px 0 rgba(0,240,255,0.5), -1px 0 rgba(255,43,214,0.3); } ol.timeline > li > p > strong:first-child::before { content: "REC " counter(ms, decimal-leading-zero) " "; color: rgba(245,225,135,0.85); text-shadow: none; } /* scanline — HOVER-ONLY. Sweeps the card on interaction; invisible otherwise. */ ol.timeline > li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #00f0ff; box-shadow: 0 0 8px #00f0ff; opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { @keyframes cp-clip-scan { 0% { top: -2px; opacity: 0.9; } 100% { top: 100%; opacity: 0; } } ol.timeline > li:hover::after, ol.timeline > li:focus-within::after, ol.timeline > li:target::after { animation: cp-clip-scan 1.8s linear infinite; } } ol.timeline > li:hover > p > strong:first-child, ol.timeline > li:focus-within > p > strong:first-child, ol.timeline > li:target > p > strong:first-child { color: #aef6ff; } ol.timeline > li:hover::before, ol.timeline > li:focus-within::before, ol.timeline > li:target::before { background: #fcee0a; border-color: #fcee0a; box-shadow: 0 0 8px #fcee0a; } /* === §4 news = BREACH PROTOCOL feed (T1 repurposed for the news layout) ============ */ ol.news-feed { counter-reset: nf; list-style: none; padding: 0.9rem 1rem 1.1rem; margin: 1.3rem 0; background: rgba(11,15,19,0.55); border: 1px solid rgba(0,240,255,0.2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } ol.news-feed::before { content: "// BREACH PROTOCOL FEED: ACTIVE"; display: block; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; color: #fcee0a; font-size: 0.66rem; letter-spacing: 0.1em; opacity: 0.85; border-bottom: 1px dashed rgba(0,240,255,0.25); padding-bottom: 0.4rem; margin-bottom: 0.6rem; } ol.news-feed > li.news-item { counter-increment: nf; position: relative; list-style: none; margin: 0 0 0.5rem; padding: 0.42rem 0.75rem 0.5rem 7.0rem; background: rgba(0,240,255,0.04); border-left: 2px solid rgba(0,240,255,0.35); } ol.news-feed > li.news-item::before { content: "SEQ_" counter(nf, decimal-leading-zero); position: absolute; left: 0.55rem; top: 0.48rem; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; color: #f3e08a; font-size: 0.66rem; letter-spacing: 0.06em; text-shadow: none; } ol.news-feed > li.news-item::after { content: ""; position: absolute; left: 0.55rem; bottom: 0.32rem; width: 5.6rem; height: 2px; background: linear-gradient(90deg, #fcee0a 60%, rgba(252,238,10,0.15) 60%); } ol.news-feed > li.news-item:hover { border-left-color: #fcee0a; background: rgba(252,238,10,0.05); } .news-title { margin: 0 0 0.12rem; font-size: 0.96rem; } .news-title a { color: #00f0ff; text-shadow: 0 0 6px rgba(0,240,255,0.4); text-decoration: none; } .news-title a:hover, .news-title a:focus-visible { color: #fcee0a; text-shadow: 0 0 6px rgba(252,238,10,0.4); } .news-title a:visited { color: #4fd8e8; } .news-meta { color: #f3e08a; opacity: 0.7; font-size: 0.74rem; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; letter-spacing: 0.04em; margin: 0; } .news-metrics { color: #aeb9c2; font-size: 0.74rem; margin: 0.1rem 0 0.3rem; } /* chamfered HUD pager — current page = equipped yellow chip */ .news-pagination { margin-block: 1.3rem; padding: 0.5rem 0.8rem; background: rgba(11,15,19,0.55); border: 1px solid rgba(0,240,255,0.2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .news-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } .news-pagination li { display: flex; } .news-pagination a, .news-pagination [aria-current="page"], .news-pagination .news-gap { display: inline-block; padding: 0.06em 0.6em; font-size: 0.85rem; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; text-decoration: none; border: 1px solid rgba(0,240,255,0.3); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } .news-pagination a { color: #00f0ff; text-shadow: none; } .news-pagination a:hover, .news-pagination a:focus-visible { color: #fcee0a; border-color: #fcee0a; outline: none; background: rgba(252,238,10,0.1); } .news-pagination [aria-current="page"] { background: #fcee0a; color: #05060a; font-weight: 700; border-color: #fcee0a; text-shadow: none; } .news-pagination .news-gap { color: rgba(174,185,194,0.5); border-color: transparent; } /* === §5 market — HUD tab sheet + table framing + cyan/gold charts ================= */ .tabs { position: relative; margin-block: 1.4rem; } .tabnav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; border: 0; } .tabnav a { display: inline-block; padding: 0.28em 1.0em; text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.86rem; color: #00f0ff; text-shadow: none; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; background: rgba(11,15,19,0.7); border: 1px solid rgba(0,240,255,0.3); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .tabnav a:hover, .tabnav a:focus-visible { color: #fcee0a; border-color: #fcee0a; outline: none; background: rgba(252,238,10,0.08); } .tabs:not(:has(:target)) .tabnav a[href="#zec"], .tabs:has(#zec:target) .tabnav a[href="#zec"], .tabs:has(#xmr:target) .tabnav a[href="#xmr"] { color: #05060a; background: #fcee0a; border-color: #fcee0a; font-weight: 700; text-shadow: none; } .tab { padding: 0.2rem 0.4rem; } /* HUD-framed price tables (node-style: // caption, aligned mono numerics) + horizontal scroll for the wide 8-col quote tables (chamfer dropped — it would clip the scrollbar). */ .tab table { display: block; overflow-x: auto; margin: 0.5rem 0 0.9rem; border: 0; background: rgba(11,15,19,0.45); } .tab table caption { caption-side: top; text-align: left; padding: 0.4rem 0.75rem; color: #f3e08a; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .tab table caption::before { content: "// "; color: rgba(245,225,135,0.6); } .tab table th { color: #00f0ff; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-align: left; padding: 0.32rem 0.6rem; border-bottom: 1px solid rgba(0,240,255,0.25); text-transform: uppercase; font-weight: 400; white-space: nowrap; } .tab table td { padding: 0.3rem 0.6rem; font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 0.82rem; color: #f3e08a; border: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .tab table tbody tr:nth-child(even) { background: rgba(0,240,255,0.035); } .tab table td a { color: #00f0ff; text-shadow: none; } /* chart caption — gold mono HUD label */ .charts-css caption { color: rgba(245,225,135,0.85); text-shadow: none; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } .charts-css.column.volume-chart caption::before { content: "// "; color: rgba(245,225,135,0.6); } /* charts recolored cyan/gold-dominant (magenta rolled back) */ .charts-css.column td { --bar-color: #00f0ff; } .charts-css.column .data { color: #05060a; } /* chart text aligned to theme (gold data; was inheriting white on bar/line charts) */ .charts-css .data { color: #f3e08a; text-shadow: none; } .charts-css th { color: #00f0ff; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; } .charts-css .val { color: #f3e08a; } .node-gauge .data, .node-peers .data { color: #fcee0a; } /* C11 — stretch charts to the full content-column width (align with the tables; DEFAULT's caps beat a bare .charts-css (0,1,0); this 5-selector group ties each cap per-selector + wins by source order — the matrix/pipboy pattern). Charts stay within the reading column, aligned with the tables — NOT full-viewport. */ .charts-css.column, .charts-css.bar, .history-chart, .node-chart, .node-plot { max-width: 100%; } /* volume/column bars: value label ON the bar (pipboy pattern) — the base .charts-css.column .data { color:#05060a } above gives dark text on the cyan bar, always visible; DEFAULT's C10 hover-enlarge applies. No floating chip. */ /* line/area charts (node-plot + history): HOVER tooltip per point. DEFAULT clips .data SR-only; we un-clip + reveal on hover. No always-visible labels (they clutter a line). */ .node-plot .charts-css td, .history-chart .charts-css td { position: relative; } .node-plot .charts-css .data, .history-chart .charts-css .data { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-top: 2px; width: auto; height: auto; padding: 0.04em 0.35em; clip-path: none; border: 1px solid rgba(0,240,255,0.5); overflow: visible; background: #05060a; color: #fcee0a; font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 0.6rem; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6; text-shadow: none; } .node-plot .charts-css td:hover .data, .node-plot .charts-css td:focus-within .data, .history-chart .charts-css td:hover .data, .history-chart .charts-css td:focus-within .data { opacity: 1; color: #00f0ff; border-color: #fcee0a; } .charts-css.bar td.bar::before { background: #fcee0a; } .history-chart .charts-css.column td { background: #f3e08a; } .history-chart .charts-css.line.src-bitfinex td::before { background: #00f0ff; } .history-chart .charts-css.line.src-kraken td::before { background: #fcee0a; } .history-chart .charts-css.line.src-coinbase td::before { background: #f3e08a; } .history-chart .charts-css.line.src-binance td::before { background: #4fd8e8; } .history-chart .charts-css.line.src-coingecko td::before { background: #aef6ff; } /* === §6 node — HUD readout panels + cyan/gold series ============================== */ .node-stats { position: relative; margin: 1.1rem 0; padding: 0.8rem 1.0rem; background: rgba(11,15,19,0.55); border: 1px solid rgba(0,240,255,0.22); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .node-stats dt { color: rgba(245,225,135,0.85); font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.5rem; } .node-stats dt::before { content: "// "; color: rgba(245,225,135,0.55); } .node-stats dt:first-of-type { margin-top: 0; } .node-stats dd { color: #00f0ff; margin: 0.1rem 0 0; font-size: 1.0rem; font-family: "Share Tech Mono", ui-monospace, monospace; text-shadow: 0 0 5px rgba(0,240,255,0.3); } .node-chart, .node-plot { margin-block: 1.2rem; } /*
carries a UA margin-inline:40px that insets the charts ~40px per side — kill it so the node charts fill the content column (align with the tables). */ .node-chart { margin-inline: 0; max-width: 100%; } .node-plot .charts-css.line.ds-1 td::before { background: #00f0ff; } .node-plot .charts-css.line.ds-2 td::before { background: #fcee0a; box-shadow: 0 0 5px rgba(252,238,10,0.4); } /* news body stays light (third-party disclaimer note readability); everything else is gold */ body:has(.news-feed) { color: #d7e0e6; } body:has(.news-feed) .news-feed { color: #d7e0e6; } /* === §7 education — HUD directory + per-subsection figures ======================== Figure set (matrix/pipboy ambition): reveal the shared .figure-slot and paint a F1-style HUD widget per subsection. Cap allows it (~48 KB headroom at 37 KB used). The set is intentionally ONE art-direction (HUD widget) so it reads as a system. */ .eduhome { display: flex; flex-direction: row; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; } .education { flex: 1 1 62%; margin: 0; } .education::before { content: "// INDEX"; display: block; color: rgba(90,178,194,0.85); text-shadow: none; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.76rem; letter-spacing: 0.14em; margin: 0.9rem 0 0.6rem; padding: 0.9rem 1.05rem 0.4rem; background: rgba(11,15,19,0.55); border: 1px solid rgba(0,240,255,0.22); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .education { padding: 0; } .education ul { list-style: none; padding: 0; margin: 0; counter-reset: edir; border: 0; } .education li { counter-increment: edir; margin: 0.12rem 0; } .education a, .education [aria-current="page"] { display: block; padding: 0.16em 0.5em; text-decoration: none; font-size: 0.92rem; letter-spacing: 0.03em; color: #00f0ff; text-shadow: none; } .education a::before { content: "[" counter(edir, decimal-leading-zero) "] "; color: rgba(245,225,135,0.85); font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; margin-right: 0.4ch; } .education a:hover, .education a:focus-visible { color: #fcee0a; background: rgba(252,238,10,0.08); outline: none; } .education [aria-current="page"] { background: #fcee0a; color: #05060a; font-weight: 700; text-shadow: none; } .education [aria-current="page"]::before { content: "> "; color: #05060a; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; } body:not(:has(.education)) h2:first-of-type::after { content: "// FILE"; display: block; margin: 0.25rem 0 0; color: rgba(90,178,194,0.85); text-shadow: none; font-family: "Share Tech Mono", "Consolas", ui-monospace, monospace; font-size: 0.62em; letter-spacing: 0.12em; } /* education + news: comfortable soft-cyan (#5ab2c2) for titles, links, and labels — the bright #00f0ff was harsh for reading. The [NN] counters stay GOLD. Sitenav/themepicker keep bright cyan (global nav). */ body:not(:has(.sitenav a[href$="education/index.html"])) h2, body:not(:has(.sitenav a[href$="education/index.html"])) h3 { color: #5ab2c2; } /* ALL content links on education pages → soft cyan (covers prose

, references

  • , etc. — not just p a). Global nav/themepicker re-asserted below to keep their colors. */ body:not(:has(.sitenav a[href$="education/index.html"])) a { color: #5ab2c2; text-shadow: none; } body:not(:has(.sitenav a[href$="education/index.html"])) a:visited { color: #5ab2c2; } body:not(:has(.sitenav a[href$="education/index.html"])) a:hover, body:not(:has(.sitenav a[href$="education/index.html"])) a:focus-visible { color: #00f0ff; } body:not(:has(.sitenav a[href$="education/index.html"])) .sitenav a { color: #f4e57a; } body:not(:has(.sitenav a[href$="education/index.html"])) .themepicker a { color: #00f0ff; } /* education prose : slightly brighter than the gold body so bold stands out a touch (subtle, not searing). Timeline titles keep their cyan (higher-specificity rule wins). */ body:not(:has(.sitenav a[href$="education/index.html"])) strong { color: #ff86e4; } /* news page title (h1 + headlines) — same comfortable soft cyan */ body:not(:has(.sitenav a[href$="news/index.html"])) h1, body:not(:has(.sitenav a[href$="news/index.html"])) .news-title, body:not(:has(.sitenav a[href$="news/index.html"])) .news-title a { color: #5ab2c2; } /* --- per-subsection HUD figures (to the right of the index) --------------------- */ .figure-slot[hidden] { display: block; flex: 0 0 210px; align-self: stretch; min-height: 220px; margin: 0.9rem 0 0; padding: 0; background: rgba(11,15,19,0.5); border: 1px solid rgba(0,240,255,0.2); background-repeat: no-repeat; background-position: center; background-size: 170px auto; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } @media (max-width: 48rem) { .eduhome { flex-direction: column; } .figure-slot[hidden] { flex: 0 0 auto; width: 100%; min-height: 180px; } } @media (max-width: 44rem) { .figure-slot[hidden] { display: none; } } .figure-slot.figure-index { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='34' fill='none' stroke='%2300f0ff' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='22' fill='none' stroke='%2300f0ff' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='10' fill='none' stroke='%2300f0ff' stroke-width='1.4'/%3E%3Cpath d='M60 60 L88 42 A34 34 0 0 0 60 26 Z' fill='%23fcee0a' opacity='0.3'/%3E%3Ccircle cx='78' cy='48' r='3' fill='%23ff2bd6'/%3E%3Ccircle cx='66' cy='38' r='2.5' fill='%23fcee0a'/%3E%3C/svg%3E"); } .figure-slot.figure-money { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cellipse cx='60' cy='40' rx='24' ry='7' fill='%23fcee0a'/%3E%3Cpath d='M36 40 V54 Q36 61 60 61 Q84 61 84 54 V40' fill='none' stroke='%23fcee0a' stroke-width='2'/%3E%3Cpath d='M36 54 V68 Q36 75 60 75 Q84 75 84 68 V54' fill='none' stroke='%23f3e08a' stroke-width='2'/%3E%3Cpath d='M36 68 V82 Q36 89 60 89 Q84 89 84 82 V68' fill='none' stroke='%2300f0ff' stroke-width='2'/%3E%3Cline x1='60' y1='34' x2='60' y2='46' stroke='%2305060a' stroke-width='2'/%3E%3C/svg%3E"); } .figure-slot.figure-blockchain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='2'%3E%3Ccircle cx='30' cy='60' r='10'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Ccircle cx='90' cy='60' r='10'/%3E%3Cline x1='40' y1='60' x2='50' y2='60'/%3E%3Cline x1='70' y1='60' x2='80' y2='60'/%3E%3C/g%3E%3Cpath d='M26 56 H34 M26 64 H34' stroke='%23fcee0a' stroke-width='1.4'/%3E%3Cpath d='M56 56 H64 M56 64 H64' stroke='%23fcee0a' stroke-width='1.4'/%3E%3Cpath d='M86 56 H94 M86 64 H94' stroke='%23fcee0a' stroke-width='1.4'/%3E%3C/svg%3E"); } .figure-slot.figure-zcash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cpath d='M60 24 L86 36 V64 Q86 86 60 98 Q34 86 34 64 V36 Z' fill='%2305060a' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cpath d='M48 50 H72 L50 70 H74' fill='none' stroke='%2300f0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .figure-slot.figure-how-it-works { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cpath d='M34 34 H86 V92 H34 Z' fill='%2305060a' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cline x1='34' y1='34' x2='34' y2='92' stroke='%23fcee0a' stroke-width='4'/%3E%3Cg stroke='%2300f0ff' stroke-width='1.4'%3E%3Cline x1='44' y1='46' x2='78' y2='46'/%3E%3Cline x1='44' y1='56' x2='72' y2='56'/%3E%3Cline x1='44' y1='66' x2='78' y2='66'/%3E%3Cline x1='44' y1='76' x2='66' y2='76'/%3E%3C/g%3E%3Crect x='56' y='84' width='10' height='6' fill='%23ff2bd6'/%3E%3C/svg%3E"); } .figure-slot.figure-timeline { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Ccircle cx='60' cy='62' r='30' fill='%2305060a' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Ccircle cx='60' cy='62' r='24' fill='none' stroke='%23f3e08a' stroke-width='1'/%3E%3Cg stroke='%2300f0ff' stroke-width='1.4'%3E%3Cline x1='60' y1='36' x2='60' y2='42'/%3E%3Cline x1='60' y1='82' x2='60' y2='88'/%3E%3Cline x1='34' y1='62' x2='40' y2='62'/%3E%3Cline x1='80' y1='62' x2='86' y2='62'/%3E%3C/g%3E%3Cpath d='M60 62 L60 44 M60 62 L78 66' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M60 62 L50 74' stroke='%23ff2bd6' stroke-width='1.6'/%3E%3Crect x='50' y='24' width='20' height='8' rx='4' fill='%2305060a' stroke='%23f3e08a'/%3E%3C/svg%3E"); } .figure-slot.figure-privacy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cpath d='M60 24 L86 36 V62 Q86 86 60 100 Q34 86 34 62 V36 Z' fill='%2305060a' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cpath d='M46 62 Q60 48 74 62 Q60 76 46 62 Z' fill='none' stroke='%2300f0ff' stroke-width='2'/%3E%3Ccircle cx='60' cy='62' r='7' fill='%23ff2bd6'/%3E%3Ccircle cx='62' cy='60' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); } .figure-slot.figure-privacy-under-pressure { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cpath d='M60 24 L86 36 V62 Q86 86 60 100 Q34 86 34 62 V36 Z' fill='%2305060a' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cpath d='M52 40 L62 56 L50 68 L66 86' fill='none' stroke='%23ff2bd6' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M46 56 H54 M58 70 H68' stroke='%23ff2bd6' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E"); } .figure-slot.figure-privacy-and-the-law { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Cline x1='60' y1='30' x2='60' y2='86' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cline x1='36' y1='42' x2='84' y2='42' stroke='%23fcee0a' stroke-width='2.4'/%3E%3Cpath d='M36 42 L28 64 Q36 70 44 64 Z' fill='none' stroke='%2300f0ff' stroke-width='2'/%3E%3Cpath d='M84 42 L76 66 Q84 72 92 66 Z' fill='%23ff2bd6'/%3E%3Cpath d='M60 30 L52 22 L68 22 Z' fill='%23fcee0a'/%3E%3Crect x='46' y='86' width='28' height='6' fill='%23f3e08a'/%3E%3C/svg%3E"); } .figure-slot.figure-resources { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300f0ff' stroke-width='1.6'%3E%3Cpath d='M8 22 L8 8 L22 8'/%3E%3Cpath d='M98 8 L112 8 L112 22'/%3E%3Cpath d='M112 98 L112 112 L98 112'/%3E%3Cpath d='M22 112 L8 112 L8 98'/%3E%3C/g%3E%3Crect x='34' y='30' width='52' height='64' rx='2' fill='none' stroke='%2300f0ff' stroke-width='2'/%3E%3Cg fill='%2305060a' stroke='%23fcee0a' stroke-width='1.4'%3E%3Crect x='40' y='38' width='40' height='10'/%3E%3Crect x='40' y='52' width='40' height='10'/%3E%3Crect x='40' y='66' width='40' height='10'/%3E%3Crect x='40' y='80' width='40' height='10'/%3E%3C/g%3E%3Ccircle cx='74' cy='43' r='2' fill='%23ff2bd6'/%3E%3Ccircle cx='74' cy='57' r='2' fill='%2300f0ff'/%3E%3Ccircle cx='74' cy='71' r='2' fill='%23ff2bd6'/%3E%3C/svg%3E"); } /* --- Chakra Petch (local, OFL) — applied to display type, monospace fallback under Safest --- */ @font-face { font-family: "CPDisplay"; src: url("fonts/ChakraPetch-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "CPDisplay"; src: url("fonts/ChakraPetch-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } h1, .tagline, .home-sections h3 a, .home-sections h3::before, .themepicker::before, .sitenav a, .sitenav span { font-family: "CPDisplay", ui-monospace, "DejaVu Sans Mono", monospace; } h1 { letter-spacing: 0.14em; } .tagline { letter-spacing: 0.07em; } /* === A3 ambient — "psychosis" glitch: fast ~0.2s blinks, top then bottom, ~once per 40s === */ @media (prefers-reduced-motion: no-preference) { @keyframes cp-psy-top { 0%,93.5% { opacity: 0; transform: translateX(0); } 94% { opacity: 0.85; transform: translateX(2px); } 94.5%,100% { opacity: 0; transform: translateX(0); } } @keyframes cp-psy-bot { 0%,97.5% { opacity: 0; transform: translateX(0); } 98% { opacity: 0.85; transform: translateX(-2px); } 98.5%,100% { opacity: 0; transform: translateX(0); } } body::before { content: ""; position: fixed; left: 8%; right: 8%; top: 13%; height: 6px; z-index: 9998; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(0,240,255,0), rgba(0,240,255,0.85) 40%, rgba(255,43,214,0.7) 60%, rgba(255,43,214,0)); animation: cp-psy-top 40s steps(1) infinite; } body::after { content: ""; position: fixed; left: 8%; right: 8%; top: 83%; height: 6px; z-index: 9998; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(255,43,214,0), rgba(255,43,214,0.85) 40%, rgba(0,240,255,0.7) 60%, rgba(0,240,255,0)); animation: cp-psy-bot 40s steps(1) infinite; } } /* footer (ZS-221) — NET:// chamfered neon cells on a hazard-tape rail; magenta onion accent */ .netaddr { border-top: 4px solid; border-image: repeating-linear-gradient(135deg, #fcee0a 0 10px, #05060a 10px 20px) 1; background: linear-gradient(180deg,#0b0b0b,#05060a); padding: 1.1rem 0.75rem 1.5rem; gap: 0.6rem; } .netaddr li { position: relative; padding: 0.55rem 0.3rem; border: 1px solid rgba(0,240,255,0.55); clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background: rgba(0,240,255,0.05); } .netaddr a { color: #00f0ff; text-shadow: 0 0 10px rgba(0,240,255,0.7); font-family: "Share Tech Mono","Consolas",monospace; text-transform: uppercase; letter-spacing: 0.1em; } .netaddr a::before { content: "NET://"; display: block; font-size: 0.58em; color: #fcee0a; text-shadow: none; letter-spacing: 0.18em; opacity: 0.85; margin-bottom: 0.15em; } .na-onion { border-color: rgba(255,43,214,0.65); background: rgba(255,43,214,0.07); } .na-onion a { color: #ff86e4; text-shadow: 0 0 10px rgba(255,43,214,0.65); } .nf-source { margin-top: 0.8rem; } .nf-source a { color: #f4e57a; font-family: "Share Tech Mono","Consolas",monospace; text-transform: uppercase; letter-spacing: 0.12em; }