diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css index 1d62879..47bd81c 100644 --- a/frontend/src/styles/partials/70-cybersigil.css +++ b/frontend/src/styles/partials/70-cybersigil.css @@ -794,24 +794,61 @@ html.cybersigil body::after { color: var(--mauve); font-weight: 700; } +/* Section break — corrupted-terminal sigil rule. A thin ice→magenta scan + * that tears open at center for a glowing barb-sigil glyph, doubled by the + * hard cold offset echo the buttons/plates carry. */ .cybersigil .prose hr { - height: 3px; - opacity: 0.9; - background: repeating-linear-gradient( + height: 1px; + margin: 3.75rem auto; + opacity: 1; + overflow: visible; + background: linear-gradient( 90deg, - var(--sky) 0 12px, - var(--mauve) 12px 24px + transparent 0, + color-mix(in srgb, var(--sky) 12%, transparent) 5%, + color-mix(in srgb, var(--sky) 72%, transparent) 24%, + color-mix(in srgb, var(--sky) 72%, transparent) 42%, + transparent 46%, + transparent 54%, + color-mix(in srgb, var(--mauve) 72%, transparent) 58%, + color-mix(in srgb, var(--mauve) 72%, transparent) 76%, + color-mix(in srgb, var(--mauve) 12%, transparent) 95%, + transparent 100% ); - box-shadow: 0 0 12px color-mix(in srgb, var(--sky) 42%, transparent); + box-shadow: 0 0 16px -3px color-mix(in srgb, var(--sky) 32%, transparent); } +/* Hard cold offset echo — the signature drop the rest of the theme carries. */ +.cybersigil .prose hr::after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: calc(50% + 3px); + height: 1px; + background: inherit; + opacity: 0.3; + transform: none; +} +/* Center glyph — the barb sigil, glowing, seated over the gap. Overrides + * the base rotated-diamond pip entirely. */ .cybersigil .prose hr::before { + width: 3.4em; + height: 1.5em; + transform: translate(-50%, -50%); background: var(--sky); - box-shadow: 0 0 8px var(--sky); + border-radius: 0; + -webkit-mask: var(--cs-barb) center / contain no-repeat; + mask: var(--cs-barb) center / contain no-repeat; + filter: + drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 55%, transparent)) + drop-shadow(0 0 2px color-mix(in srgb, var(--mauve) 50%, transparent)); } .cybersigil .prose h3, .cybersigil .prose h4, -.cybersigil .prose h5 { +.cybersigil .prose h5, +.cybersigil .prose h6 { font-family: var(--font-sans); + font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; } @@ -821,6 +858,7 @@ html.cybersigil body::after { .cybersigil .prose h4::before { content: "### "; color: var(--sky); opacity: 0.6; } .cybersigil .prose h5 { color: var(--green); } .cybersigil .prose h5::before { content: "#### "; color: var(--sky); opacity: 0.55; } +.cybersigil .prose h6::before { content: "##### "; color: var(--sky); opacity: 0.5; } .cybersigil .prose a { text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--sky) 60%, transparent); @@ -831,6 +869,82 @@ html.cybersigil body::after { text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve); } +/* Emphasis — VT323 has no real italic, so the base font-display em renders + * as mangled bitmap. Drop to the terminal body and re-encode emphasis as + * colour: magenta em, ice strong with a faint bloom, red-struck del. */ +.cybersigil .prose em { + font-family: var(--font-sans); + font-style: normal; + color: var(--mauve); +} +.cybersigil .prose strong { + color: var(--sky); + text-shadow: 0 0 6px color-mix(in srgb, var(--sky) 30%, transparent); +} +.cybersigil .prose del { + text-decoration-color: color-mix(in srgb, var(--red) 80%, transparent); +} + +/* Lists — terminal nodes. The salon diamond becomes a square ice cell with + * the hard magenta offset; ordered markers go cold mono, no faux-italic. */ +.cybersigil .prose ul > li::before { + width: 0.4em; + height: 0.4em; + top: 0.66em; + transform: none; + background: var(--sky); + box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent); +} +.cybersigil .prose ol > li::marker { + color: var(--sky); + font-family: var(--font-sans); + font-style: normal; +} +.cybersigil .prose li > input[type="checkbox"] { accent-color: var(--mauve); } + +/* Figure caption — a `// ` log comment, not a salon plaque dash. */ +.cybersigil .prose figure figcaption { + font-family: var(--font-sans); + font-style: normal; + letter-spacing: 0.04em; + color: var(--subtext0); +} +.cybersigil .prose figure figcaption::before { + content: "// "; + color: var(--sky); + opacity: 0.85; +} + +/* Tables — a sector readout: square ice grid, scanline header, hard offset, + * magenta hover sweep. */ +.cybersigil .prose table { + font-family: var(--font-sans); + border-color: color-mix(in srgb, var(--sky) 40%, var(--surface2)); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--sky) 14%, transparent), + 4px 4px 0 0 color-mix(in srgb, var(--mauve) 22%, var(--crust)); +} +.cybersigil .prose thead { + background: + repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0) 0 2px, + color-mix(in srgb, var(--sky) 8%, transparent) 2px 3px, + rgba(0, 0, 0, 0) 3px 4px + ), + color-mix(in srgb, var(--crust) 80%, transparent); +} +.cybersigil .prose th { + color: var(--sky); + border-bottom-color: color-mix(in srgb, var(--mauve) 50%, transparent); +} +.cybersigil .prose td { + border-bottom-color: color-mix(in srgb, var(--sky) 20%, transparent); +} +.cybersigil .prose tbody tr:hover { + background: color-mix(in srgb, var(--sky) 7%, transparent); +} + /* Scrollbar + caret — hard cold chrome. */ .cybersigil { scrollbar-color: var(--sky) var(--crust);