/* prisca-os v0.1 — system.css × BOOTSTRA.386 × Zellij Selectors verified against Flowershow HTML output. github.com/saiefr ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Silkscreen&display=swap'); /* ════════════════════════════════════════════════════════════ TOKENS ════════════════════════════════════════════════════════════ */ :root { --ph-gold: #ffc658; --ph-amber: #e8a838; --ph-ember: #9a6e28; --fx-text: #f0ece8; --fx-bright: #ffffff; --fx-pale: #ffffff; --fx-dim: #d8d0c8; --fx-ghost: #c0b4a8; --wf-celeste: #85d4e8; --wf-violet: #8a7fe0; --ln-mid: #e088a0; --lavender: #c4b0f4; --lav-dim: #8878c8; --lav-deep: #3a2860; --pr-deep: #081828; --pr-mid: #0e2a4a; --pr-brd: #1e4878; --pr-text: #78b8e8; --tm-green: #78e890; --hot-pink: #f070c0; --ph-orange: #e87038; --crt-void: #0d0b06; --crt-panel: #160e07; --crt-line: #241a09; --crt-bg: #1c0a1a; /* Ubuntu aubergine — dark purple page base */ /* flowershow framework overrides */ --font-heading: 'VT323', 'Courier New', monospace; --font-body: 'VT323', 'Courier New', monospace; --font-size-base: 1.42rem; --line-height-normal: 1.58; --radius: 0; --color-d-background: var(--crt-bg); --color-d-foreground: var(--fx-text); --color-d-accent: var(--ph-amber); --color-l-background: var(--crt-bg); --color-l-foreground: var(--fx-text); --color-l-accent: var(--ph-amber); --color-code-bg: var(--crt-panel); --color-code-bg-dark: var(--crt-panel); } /* ════════════════════════════════════════════════════════════ THE TUBE — CRT physics ════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } /* scanlines + phosphor sub-pixel columns */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,.09) 1px, rgba(0,0,0,.09) 2px ), repeating-linear-gradient(90deg, rgba(255,90,60,.024) 0px, rgba(255,90,60,.024) 0.5px, rgba(90,255,100,.018) 0.5px, rgba(90,255,100,.018) 1px, rgba(60,100,255,.013) 1px, rgba(60,100,255,.013) 1.5px, transparent 1.5px, transparent 3px ); } /* CRT tube vignette — edge darkening + corner pools */ .site-layout { background: radial-gradient(ellipse 90% 86% at 50% 50%, transparent 55%, rgba(0,0,0,.38) 100%), radial-gradient(circle at 0% 0%, rgba(0,0,0,.42) 0%, transparent 38%), radial-gradient(circle at 100% 0%, rgba(0,0,0,.42) 0%, transparent 38%), radial-gradient(circle at 0% 100%, rgba(0,0,0,.42) 0%, transparent 38%), radial-gradient(circle at 100% 100%, rgba(0,0,0,.42) 0%, transparent 38%); min-height: 100vh; } /* noise grain on Flowershow pages */ .site-layout::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 172px 172px; opacity: .028; animation: noise-step .5s steps(3) infinite; /* background-position not GPU-composited — will-change removed */ } @keyframes noise-step { 0% { background-position: 0px 0px } 10% { background-position: -42px -12px } 20% { background-position: 18px -38px } 30% { background-position: -28px 22px } 40% { background-position: 44px -28px } 50% { background-position: -8px 44px } 60% { background-position: 36px 8px } 70% { background-position: -18px -44px } 80% { background-position: 12px 30px } 90% { background-position: -36px 16px } } /* butterfly layer — z-index 0 so sidebars (z-index:2) always render above */ .site-layout::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* mechanical butterfly — faceted wing plates, gold ribs + frame, segmented armored body, pivot joints, cyan energy channels, segmented antennae */ background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); /* side gutters only — left sidebar zone and right TOC zone */ background-position: 4% 18%, 7% 68%, 94% 28%, 96% 62%, 3% 46%; background-size: 100px auto, 82px auto, 96px auto, 78px auto, 68px auto; background-repeat: no-repeat; opacity: 0.42; filter: saturate(1.04) brightness(1.03); /* clip to outer gutters — nothing renders in the content column */ -webkit-mask-image: linear-gradient(to right, black 0%, black 13%, transparent 19%, transparent 81%, black 87%, black 100%); mask-image: linear-gradient(to right, black 0%, black 13%, transparent 19%, transparent 81%, black 87%, black 100%); } /* ════════════════════════════════════════════════════════════ MECHANICAL PETALS — Warframe-style cyan crystal shards side-gutter only via mask; two parallax layers ════════════════════════════════════════════════════════════ */ body::after { content: ""; position: fixed; left: 0; right: 0; top: -860px; bottom: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 560px 860px; opacity: .28; -webkit-mask-image: linear-gradient(to right, #000 0, transparent 20%, transparent 80%, #000 100%); mask-image: linear-gradient(to right, #000 0, transparent 20%, transparent 80%, #000 100%); animation: mech-near 20s linear infinite; } html::after { content: ""; position: fixed; left: 0; right: 0; top: -720px; bottom: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 480px 720px; opacity: .20; -webkit-mask-image: linear-gradient(to right, #000 0, transparent 22%, transparent 78%, #000 100%); mask-image: linear-gradient(to right, #000 0, transparent 22%, transparent 78%, #000 100%); animation: mech-far 30s linear infinite; } @keyframes mech-near { 0% { transform: translate(0, 0); } 100% { transform: translate(12px, 860px); } } @keyframes mech-far { 0% { transform: translate(0, 0); } 100% { transform: translate(-8px, 720px); } } /* one-shot power-on */ article { animation: crt-boot .4s ease-out 1; } @keyframes crt-boot { 0% { opacity: 0; filter: brightness(2.4); } 100% { opacity: 1; filter: brightness(1); } } /* ════════════════════════════════════════════════════════════ ZELLIJ NAV BAR ════════════════════════════════════════════════════════════ */ .site-navbar { display: flex; align-items: center; flex-wrap: wrap; /* warm DOS panel face — top-lit bevel */ background: linear-gradient(180deg, #322617 0%, #221a10 46%, #161009 100%); border-top: 2px solid color-mix(in srgb, var(--ph-gold) 52%, transparent); border-bottom: 3px solid color-mix(in srgb, var(--hot-pink) 52%, transparent); font-family: 'Press Start 2P', monospace; font-size: .25rem; overflow: hidden; scrollbar-width: none; position: sticky; top: 0; z-index: 20; padding: 5px 8px; gap: 5px; /* inner top highlight + ember underline + hard MS-DOS drop shadow */ box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ph-amber) 24%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ph-ember) 45%, transparent), 0 5px 0 rgba(0,0,0,.6); } .site-navbar::-webkit-scrollbar { display: none; } /* ── NES.css pixel-button tabs ── */ .site-navbar a { position: relative; display: inline-flex; align-items: center; padding: 4px 8px; color: var(--fx-bright); text-decoration: none !important; white-space: nowrap; letter-spacing: .05em; text-transform: uppercase; font-family: 'Press Start 2P', monospace !important; font-size: .85rem !important; transition: filter .12s, box-shadow .12s, transform .1s; /* NES pixel-corner border */ border-style: solid; border-width: 4px; border-image-slice: 2; border-image-width: 2; border-image-outset: 0; border-image-repeat: stretch; border-image-source: url("data:image/svg+xml,"); background: #38220a; /* inset bevel + hard MS-DOS drop shadow — the button floats off the bar */ box-shadow: inset -3px -3px rgba(0,0,0,.55), inset 2px 2px rgba(255,255,255,.1), 2px 2px 0 rgba(0,0,0,.55); } .site-navbar a::before { display: none; } .site-navbar a:hover { filter: brightness(1.4); text-shadow: none; transform: translate(-1px,-1px); box-shadow: inset -3px -3px rgba(0,0,0,.6), inset 2px 2px rgba(255,255,255,.14), 3px 3px 0 rgba(0,0,0,.6); } /* nav brand / site title — keep small, VT323 instead of Press Start 2P */ .site-navbar-brand, .site-navbar > a:first-child, .site-navbar > *:first-child > a { font-family: 'VT323', monospace !important; font-size: .75rem !important; letter-spacing: .06em; padding: 2px 8px !important; } /* per-section bg + vivid accent text — matches index.html .zj-tab */ .site-navbar a[href="/"], .site-navbar a:first-of-type { background: #38220a; color: var(--ph-amber); order: 0; } .site-navbar a[href^="/01.prisca-vault"] { background: #0d4225; color: #7affa2; order: 2; } .site-navbar a[href^="/02.projects"] { background: #3c3510; color: #f8d840; order: 2; } .site-navbar a[href^="/03.academics"] { background: #082a42; color: #6adcf8; order: 2; } .site-navbar a[href^="/04.now"] { background: #40091e; color: #ff78c0; order: 2; } .site-navbar a[href^="/05.about-me"] { background: #1c0a4a; color: #c0a8ff; order: 2; } .site-navbar a[href^="/06.resume"] { background: #3c1408; color: #f27840; order: 2; } /* ── GitHub & LinkedIn: icon-only, inline after brand ── */ .site-navbar a[href*="github.com/saiefr"], .site-navbar a[href*="linkedin"] { order: 1; border-image: none !important; border: 1px solid !important; font-size: 0 !important; padding: 0 !important; width: 18px; min-width: 18px; height: 18px; justify-content: center; transition: filter .12s, transform .1s, box-shadow .1s !important; } .site-navbar a[href*="github.com/saiefr"]:hover, .site-navbar a[href*="linkedin"]:hover { filter: brightness(1.7) !important; transform: translate(-1px,-1px) !important; } .site-navbar a[href*="github.com/saiefr"] { background: color-mix(in srgb, var(--ph-ember) 14%, #0d0a05) !important; border-color: color-mix(in srgb, var(--ph-ember) 45%, transparent) !important; box-shadow: 1px 1px 0 rgba(0,0,0,.9), inset 1px 1px 0 rgba(255,200,80,.07) !important; } .site-navbar a[href*="linkedin"] { background: color-mix(in srgb, var(--wf-celeste) 10%, #05100d) !important; border-color: color-mix(in srgb, var(--wf-celeste) 40%, transparent) !important; box-shadow: 1px 1px 0 rgba(0,0,0,.9), inset 1px 1px 0 rgba(133,212,232,.07) !important; margin-right: 8px; } /* show SVG icon via ::before */ .site-navbar a[href*="github.com/saiefr"]::before, .site-navbar a[href*="linkedin"]::before { display: inline-block !important; content: ""; width: 13px; height: 13px; flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .site-navbar a[href*="github.com/saiefr"]::before { background-color: color-mix(in srgb, var(--ph-amber) 70%, transparent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E"); } .site-navbar a[href*="linkedin"]::before { background-color: var(--wf-celeste); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z'/%3E%3C/svg%3E"); } /* active — pressed into the bar: drop shadow gone, deep inset, colored rail */ .site-navbar a[aria-current="page"] { transform: translate(1px,1px) !important; box-shadow: inset 4px 4px rgba(0,0,0,.6), inset 0 -3px 0 currentColor !important; filter: brightness(1.55) !important; text-shadow: none !important; } /* ════════════════════════════════════════════════════════════ ARTICLE WINDOW — terminal chrome for content pages ════════════════════════════════════════════════════════════ */ /* the article wraps the whole page content */ article { animation: crt-boot .4s ease-out 1; position: relative; z-index: 2; } /* ── main reading panel — distinct charcoal gray, off the violet page bg ── */ .prose { background: #1c1b24; /* amber edges define the panel against the violet margins */ border: 1px solid color-mix(in srgb, var(--ph-ember) 28%, transparent); padding: 1.6rem 1.9rem 2.4rem; /* hard shadow lifts the panel off the page + soft inner top highlight */ box-shadow: 6px 6px 0 rgba(8,5,12,.55), inset 0 1px 0 color-mix(in srgb, var(--lavender) 8%, transparent); } /* fake macOS/tmux title bar pinstripe above article content */ .prose::before { content: ""; display: block; height: .18rem; margin-bottom: 1.8rem; background: repeating-linear-gradient(to right, transparent 0 6px, color-mix(in srgb, var(--ph-ember) 18%, transparent) 6px 7px); border-bottom: 1px solid color-mix(in srgb, var(--ph-ember) 22%, transparent); } /* ════════════════════════════════════════════════════════════ TYPOGRAPHY — multicolor nested headings Dual selectors: article (standard) + .prose (Flowershow wrapper) ════════════════════════════════════════════════════════════ */ article h1, article h2, article h3, article h4, .prose h1, .prose h2, .prose h3, .prose h4, main h1, main h2, main h3, main h4 { font-family: 'VT323', monospace; font-weight: 400; scroll-margin-top: 3.5rem; } /* Flowershow page description (frontmatter description field) */ main > * > p:first-of-type, .prose > p:first-child, [class*="description"]:not(.site-navbar):not(.site-footer), [class*="subtitle"] { color: var(--ln-mid); opacity: .9; } /* h1 — gold, large, diamond brackets + blinking cursor */ article h1, .prose h1, main h1 { color: var(--ph-gold); font-size: 2.4rem; text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 0 6px color-mix(in srgb, var(--ph-gold) 55%, transparent), 0 0 22px color-mix(in srgb, var(--ph-gold) 18%, transparent); margin-bottom: .8rem; padding-bottom: .45rem; border-bottom: 1px solid color-mix(in srgb, var(--ph-ember) 32%, transparent); } /* terminal comment prefix */ article h1::before, .prose h1::before, main h1::before { content: "// "; color: var(--ph-ember); font-size: 1em; text-shadow: none; opacity: .65; } /* blinking block cursor */ article h1::after, .prose h1::after, main h1::after { content: "▮"; margin-left: .15em; color: var(--ph-amber); font-size: 1em; text-shadow: none; animation: cursor-blink 1.06s steps(1) infinite; } @keyframes cursor-blink { 50% { opacity: 0; } } /* h2 — lavender, ▓▒░ DOS shade blocks */ article h2, .prose h2, main h2 { color: var(--lavender); font-size: 1.88rem; text-transform: none; letter-spacing: .04em; margin-top: 3rem; margin-left: .9rem; text-shadow: 0 0 3px color-mix(in srgb, var(--lavender) 28%, transparent); } article h2::before, .prose h2::before, main h2::before { content: "< "; color: var(--lavender); text-shadow: 0 0 8px color-mix(in srgb, var(--lavender) 50%, transparent); } article h2::after, .prose h2::after, main h2::after { content: " >"; color: var(--lavender); text-shadow: 0 0 8px color-mix(in srgb, var(--lavender) 50%, transparent); } /* h3 — pink, tree branch prefix */ article h3, .prose h3, main h3 { color: var(--ln-mid); font-size: 1.58rem; font-weight: 400; text-transform: lowercase; letter-spacing: .04em; margin-top: 2rem; margin-left: 1.9rem; text-shadow: 0 0 3px color-mix(in srgb, var(--ln-mid) 22%, transparent); } article h3::before, .prose h3::before, main h3::before { content: "├── "; color: var(--ph-ember); text-shadow: none; } /* h4 — celeste, nested one level deeper */ article h4, .prose h4, main h4 { color: var(--wf-celeste); font-size: 1.44rem; font-weight: 400; margin-top: 1.4rem; margin-left: 2.9rem; text-shadow: 0 0 3px color-mix(in srgb, var(--wf-celeste) 20%, transparent); } article h4::before, .prose h4::before, main h4::before { content: "│ └── "; color: var(--ph-ember); text-shadow: none; white-space: pre; } /* ── Nested content — indent paragraphs/lists by heading level ── h2→lavender rail, h3→pink rail, h4→celeste rail Later rule wins for deeper nesting (CSS cascade) */ :is(article, .prose, main) h2 ~ :is(p, ul, ol) { margin-left: .9rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--lavender) 22%, transparent); } :is(article, .prose, main) h3 ~ :is(p, ul, ol) { margin-left: 1.9rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--ln-mid) 20%, transparent); } :is(article, .prose, main) h4 ~ :is(p, ul, ol) { margin-left: 2.9rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--wf-celeste) 18%, transparent); } /* callouts and blockquotes keep their own layout */ :is(article, .prose, main) :is(h2, h3, h4) ~ :is(.callout, blockquote) { margin-left: 0; padding-left: 0; border-left: none; } /* body text */ article strong, .prose strong { color: var(--ph-gold); font-weight: 400; text-shadow: 0 0 4px color-mix(in srgb, var(--ph-gold) 25%, transparent); } article strong, .prose strong, article b, .prose b { color: var(--fx-bright); font-weight: 400; text-shadow: 0 0 6px color-mix(in srgb, var(--fx-bright) 18%, transparent); } article em, .prose em { color: var(--lavender); font-style: normal; letter-spacing: .05em; } article p, .prose p { margin: .78em 0; letter-spacing: .02em; } /* links — DOS inverse-video on hover */ article a, .prose a, main a { color: #00e5ff; text-decoration: underline; text-decoration-color: color-mix(in srgb, #00e5ff 38%, transparent); text-underline-offset: 3px; padding: 0 .12em; transition: color .1s ease, background .1s ease, text-shadow .1s ease; text-shadow: 0 0 6px rgba(0,229,255,.2); } article a:hover, .prose a:hover, main a:hover { color: var(--crt-void); background: #00e5ff; text-decoration: none; text-shadow: none; } /* internal/wikilinks — amber (href starts with /) */ article a[href^="/"], .prose a[href^="/"], main a[href^="/"] { color: var(--ph-amber); text-decoration-color: color-mix(in srgb, var(--ph-amber) 38%, transparent); text-shadow: 0 0 6px rgba(232,168,56,.22); } article a[href^="/"]:hover, .prose a[href^="/"]:hover, main a[href^="/"]:hover { color: var(--wf-celeste); background: transparent; text-shadow: 0 0 8px color-mix(in srgb, var(--wf-celeste) 60%, transparent); text-decoration-color: var(--wf-celeste); } /* lists — default bullets, amber tree lines on nested levels */ article li, .prose li, main li { margin: .38em 0; } article ul ul, .prose ul ul, main ul ul { padding-left: 1.2em; margin-left: .2em; border-left: 1px solid var(--ph-amber); } article ul ul ul, .prose ul ul ul, main ul ul ul { border-left: 1px solid var(--ph-ember); } article ul ul ul ul, .prose ul ul ul ul, main ul ul ul ul { border-left: 1px solid color-mix(in srgb, var(--ph-ember) 50%, transparent); } article ul > li::marker, .prose ul > li::marker, main ul > li::marker { color: var(--ph-amber); } article ol > li::marker, .prose ol > li::marker, main ol > li::marker { color: var(--ph-amber); font-variant-numeric: tabular-nums; font-family: 'VT323', monospace; } /* task list checkboxes */ article li:has(> input[type="checkbox"]), .prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.1em; } article li input[type="checkbox"], .prose li input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-block; width: 1em; height: 1em; border: 1px solid var(--ph-ember); background: #0e0a04; margin-right: .45em; vertical-align: middle; position: relative; top: -.1em; cursor: default; } article li input[type="checkbox"]:checked, .prose li input[type="checkbox"]:checked { background: var(--ph-amber); border-color: var(--ph-gold); } article li input[type="checkbox"]:checked::after, .prose li input[type="checkbox"]:checked::after { content: "✓"; position: absolute; color: var(--crt-void); font-size: .8em; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* kbd */ article kbd, .prose kbd { display: inline-block; font-family: 'VT323', monospace; font-size: .9em; color: var(--ph-gold); background: #0e0a04; border: 1px solid var(--ph-ember); border-bottom-width: 3px; padding: .02em .4em; letter-spacing: .05em; line-height: 1.4; } /* mark / highlight */ article mark, .prose mark { background: color-mix(in srgb, var(--ph-amber) 30%, transparent); color: var(--fx-bright); padding: 0 .2em; } /* ════════════════════════════════════════════════════════════ CODE — clean base16 dark ════════════════════════════════════════════════════════════ */ /* inline code — amber chip, clearly warm against the cool violet prose bg */ article code, .prose code, main code { font-family: 'VT323', monospace; font-size: 0.85em; color: var(--ph-amber); background: #141009; border: 1px solid #2e2410; padding: .06em .52em; letter-spacing: .02em; } /* code block */ article pre, .prose pre, main pre { background: #151515; border: 1px solid #303030; box-shadow: 4px 4px 0 rgba(0,0,0,.7); position: relative; padding: 0.75rem 1.0rem; overflow-x: auto; margin: 1.2rem 0; } article pre::before, .prose pre::before, main pre::before { content: none; } /* code inside pre resets inline styles */ article pre code, .prose pre code, main pre code { display: block; background: transparent; border: none; padding: 0; color: #d0d0d0; font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.5; text-shadow: none; } /* ── base16 default dark token colors ── */ .hljs-comment, .hljs-meta, .token.comment, .token.prolog, .token.doctype { color: #505050; font-style: italic; } .hljs-keyword, .hljs-selector-tag, .token.keyword, .token.at-rule, .token.rule { color: #aa759f; } .hljs-string, .hljs-template-variable, .hljs-addition, .token.string, .token.char, .token.inserted { color: #90a959; } .hljs-attr, .token.attr-value { color: #90a959; } .hljs-number, .hljs-literal, .token.number, .token.boolean { color: #d28445; } .hljs-title.function_, .hljs-title, .token.function { color: #6a9fb5; } .hljs-title.class_, .token.class-name { color: #f4bf75; } .hljs-built_in, .hljs-type, .token.builtin { color: #75b5aa; } .hljs-variable, .hljs-params, .token.variable, .token.parameter { color: #d0d0d0; } .hljs-property, .hljs-attribute, .token.property, .token.attr-name { color: #6a9fb5; } .hljs-operator, .token.operator { color: #d0d0d0; } .hljs-punctuation, .token.punctuation { color: #505050; } .hljs-tag, .hljs-name, .token.tag { color: #ac4142; } .hljs-deletion, .token.deleted { color: #ac4142; } .hljs-section { color: #6a9fb5; } /* language label */ [class*="codeBlockTitle"], [class*="code-title"], div[class*="language-"] > span:first-child, .remark-code-title { display: block; font-family: 'VT323', monospace !important; font-size: 1.08rem !important; background: #202020 !important; color: #505050 !important; border-bottom: 1px solid #303030 !important; padding: .2em .8em !important; letter-spacing: .08em; text-shadow: none !important; } /* ════════════════════════════════════════════════════════════ COPY BUTTON — injected by copy-btn.js on pre + .callout ════════════════════════════════════════════════════════════ */ .copy-btn { position: absolute; top: .28rem; right: .45rem; background: rgba(30,20,5,.85); color: color-mix(in srgb, var(--ph-ember) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ph-ember) 30%, transparent); font-family: 'Press Start 2P', monospace; font-size: .36rem; line-height: 1.6; padding: .2em .55em; cursor: pointer; letter-spacing: .07em; box-shadow: 1px 1px 0 rgba(0,0,0,.85); z-index: 5; transition: color .1s, border-color .1s, background .1s; user-select: none; } .copy-btn:hover { color: var(--ph-gold); border-color: color-mix(in srgb, var(--ph-gold) 55%, transparent); background: color-mix(in srgb, var(--ph-gold) 10%, #1a1206); } .copy-btn--ok { color: var(--tm-green) !important; border-color: color-mix(in srgb, var(--tm-green) 50%, transparent) !important; } /* inside callout title bar — inherit the callout accent color */ .callout-title .copy-btn { position: static; margin-left: auto; background: transparent; color: color-mix(in srgb, var(--cl, var(--ph-amber)) 60%, transparent); border-color: color-mix(in srgb, var(--cl, var(--ph-amber)) 28%, transparent); box-shadow: none; } .callout-title .copy-btn:hover { color: var(--cl, var(--ph-amber)); border-color: color-mix(in srgb, var(--cl, var(--ph-amber)) 55%, transparent); background: color-mix(in srgb, var(--cl, var(--ph-amber)) 10%, transparent); } /* pre — sits in the DOS title bar (::before is gray, z-index must be above it) */ pre .copy-btn { top: .25rem; right: .5rem; background: rgba(180,180,180,.18); color: #333; border-color: #888; box-shadow: 1px 1px 0 rgba(0,0,0,.4); } pre .copy-btn:hover { color: #000; background: rgba(0,0,0,.12); border-color: #444; } pre .copy-btn--ok { color: #1a6b1a !important; border-color: #2a8b2a !important; } /* ════════════════════════════════════════════════════════════ BLOCKQUOTE — dark navy panel, matches code block palette ════════════════════════════════════════════════════════════ */ article blockquote, .prose blockquote, main blockquote { position: relative; border: 1px solid #2244aa; background: #010d1e; margin: 1.6rem 0; padding: 1rem 1.6rem; color: color-mix(in srgb, #85d4e8 22%, var(--fx-text)); font-style: italic; letter-spacing: .04em; box-shadow: 0 0 0 3px #010d1e, 0 0 0 4px #1a3370, 6px 6px 0 rgba(0,0,0,.95), 0 8px 32px rgba(26,51,112,.55), 0 2px 16px rgba(34,68,170,.3); } article blockquote::before, .prose blockquote::before, main blockquote::before { content: none; } article blockquote::after, .prose blockquote::after, main blockquote::after { content: none; } article blockquote p::before, .prose blockquote p::before, main blockquote p::before { content: none; } article blockquote p::after, .prose blockquote p::after, main blockquote p::after { content: none; } /* ════════════════════════════════════════════════════════════ TABLES — amber phosphor terminal grid ════════════════════════════════════════════════════════════ */ article table, .prose table, main table { width: 100%; border-collapse: collapse; font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .06em; margin: 2rem 0; background: #080601; border: 2px solid var(--ph-amber); border-top: 2px solid var(--ph-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ph-ember) 60%, #000), 6px 6px 0 rgba(0,0,0,.95), inset 0 1px 0 color-mix(in srgb, var(--ph-gold) 30%, transparent); } /* header — dark navy bar */ article thead th, .prose thead th, main thead th { background: #2c251a; color: #c8a84a; font-weight: normal; text-align: left; padding: .38em 1em; border-bottom: 2px solid var(--ph-gold); border-right: 1px solid #3d3020; letter-spacing: .12em; text-shadow: none; } article thead th:last-child, .prose thead th:last-child, main thead th:last-child { border-right: none; } /* body cells */ article tbody td, .prose tbody td, main tbody td { padding: .32em 1em; color: var(--ph-amber); border-bottom: 1px solid color-mix(in srgb, var(--ph-ember) 28%, transparent); border-right: 1px solid color-mix(in srgb, var(--ph-ember) 16%, transparent); vertical-align: middle; } article tbody td:last-child, .prose tbody td:last-child, main tbody td:last-child { border-right: none; } /* first column — slightly brighter as key */ article tbody td:first-child, .prose tbody td:first-child, main tbody td:first-child { color: var(--ph-gold); border-right: 1px solid color-mix(in srgb, var(--ph-ember) 35%, transparent); } /* alternating rows */ article tbody tr:nth-child(even) td, .prose tbody tr:nth-child(even) td, main tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ph-amber) 4%, transparent); } /* last row */ article tbody tr:last-child td, .prose tbody tr:last-child td, main tbody tr:last-child td { border-bottom: none; } /* hover */ article tbody tr:hover td, .prose tbody tr:hover td, main tbody tr:hover td { background: color-mix(in srgb, var(--ph-amber) 10%, #080601); color: var(--ph-gold); } /* ════════════════════════════════════════════════════════════ OBSIDIAN CALLOUTS — left-rail terminal panels ════════════════════════════════════════════════════════════ */ article .callout, .prose .callout { --cl: var(--ph-amber); border: none; border-left: 5px solid var(--cl); border-top: 1px solid color-mix(in srgb, var(--cl) 22%, transparent); outline: 1px solid color-mix(in srgb, var(--cl) 10%, transparent); outline-offset: -1px; background: linear-gradient(135deg, color-mix(in srgb, var(--cl) 9%, #0b0803) 0%, #0a0806 52%, #0b0803 100%); box-shadow: inset 5px 0 32px color-mix(in srgb, var(--cl) 10%, transparent), 4px 4px 0 rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); margin: 1.8rem 0; padding: 0; border-radius: 0; overflow: hidden; position: relative; } /* left rail glow */ article .callout::after, .prose .callout::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cl) 55%, transparent); pointer-events: none; } article .callout-title, .prose .callout-title { display: flex; align-items: center; gap: .55em; background: color-mix(in srgb, var(--cl) 14%, #0d0904); border-bottom: 1px solid color-mix(in srgb, var(--cl) 24%, transparent); color: var(--cl); font-family: 'VT323', monospace; text-transform: uppercase; letter-spacing: .16em; font-size: 1.1rem; padding: .32em 1em .32em .9em; margin: 0; text-shadow: 0 0 14px color-mix(in srgb, var(--cl) 70%, transparent); /* scanline pinstripe on title bar */ background-image: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0,0,0,.08) 2px 3px ); } /* ▶ connector before icon */ article .callout-title::before, .prose .callout-title::before { content: "▶"; font-size: .7em; opacity: .7; flex-shrink: 0; } article .callout-title svg, .prose .callout-title svg { width: 1em; height: 1em; opacity: .85; filter: drop-shadow(0 0 5px currentColor); } article .callout-content, .prose .callout-content { padding: 1rem 1.4rem 1rem 1.2rem; color: color-mix(in srgb, var(--cl) 22%, var(--fx-text)); font-size: .97em; line-height: 1.68; } article .callout-content p, .prose .callout-content p { margin: .38em 0; } /* ── per-type accent colors ── */ article .callout[data-callout="note"], article .callout[data-callout="abstract"] { --cl: var(--pr-text); } article .callout[data-callout="tip"], article .callout[data-callout="success"] { --cl: var(--tm-green); } article .callout[data-callout="warning"] { --cl: var(--ph-amber); } article .callout[data-callout="important"] { --cl: var(--ph-gold); } article .callout[data-callout="caution"], article .callout[data-callout="danger"], article .callout[data-callout="failure"], article .callout[data-callout="bug"] { --cl: var(--ln-mid); } article .callout[data-callout="info"], article .callout[data-callout="example"] { --cl: var(--wf-celeste); } article .callout[data-callout="quote"] { --cl: var(--lavender); } /* ════════════════════════════════════════════════════════════ SEPARATOR — BIOS double rule ════════════════════════════════════════════════════════════ */ article hr, .prose hr, main hr { border: none; border-top: 1px solid #4a4a4a; height: 0; margin: 3rem 0; position: relative; overflow: visible; } article hr::before, .prose hr::before, main hr::before { content: none; } article hr::after, .prose hr::after, main hr::after { content: "----< ♦ >----"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--crt-bg); padding: 0 .8em; color: var(--wf-celeste); font-family: 'VT323', monospace; font-size: 1rem; line-height: 1; letter-spacing: .08em; } /* ════════════════════════════════════════════════════════════ TABLES — DOS grid ════════════════════════════════════════════════════════════ */ article table, .prose table { border: none; border-left: 3px solid var(--ph-ember); outline: 1px solid color-mix(in srgb, var(--ph-ember) 18%, transparent); outline-offset: -1px; box-shadow: 4px 4px 0 rgba(0,0,0,.8); border-collapse: collapse; width: 100%; margin: 1.8rem 0; } article th, .prose th { color: var(--ph-gold); background: color-mix(in srgb, var(--ph-ember) 18%, #0e0a04); border-bottom: 1px solid color-mix(in srgb, var(--ph-ember) 40%, transparent); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 0 8px color-mix(in srgb, var(--ph-gold) 40%, transparent); padding: .28em .8em; } article td, .prose td { border-bottom: 1px solid color-mix(in srgb, var(--ph-ember) 12%, transparent); padding: .25em .8em; color: var(--fx-text); } article tbody tr:hover td, .prose tbody tr:hover td { background: color-mix(in srgb, var(--ph-amber) 7%, transparent); color: var(--fx-bright); } /* ════════════════════════════════════════════════════════════ TMUX FOOTER — minimal one-liner bar, hide Flowershow's default content ════════════════════════════════════════════════════════════ */ .site-footer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; background: #100d07; border-top: 1px solid var(--crt-line); font-family: 'VT323', monospace; font-size: .82rem; padding: .18rem .9rem; color: var(--fx-ghost); letter-spacing: .04em; overflow: hidden; max-height: 2.4rem; scrollbar-width: none; gap: .6rem; } .site-footer::-webkit-scrollbar { display: none; } .site-footer * { display: none !important; } .site-footer::before { content: "PRISCA/OS v0.1"; display: block; color: color-mix(in srgb, var(--ph-ember) 55%, transparent); white-space: nowrap; flex-shrink: 0; font-size: .72rem; letter-spacing: .1em; } .site-footer::after { content: "\2714 ok"; display: block; color: color-mix(in srgb, var(--tm-green) 60%, transparent); white-space: nowrap; flex-shrink: 0; font-size: .76rem; letter-spacing: .06em; margin-left: auto; } /* ── footer contact buttons — injected by nav-contacts.js ── */ .footer-contacts { display: inline-flex !important; align-items: center; gap: .5rem; } .footer-clink { display: inline-flex !important; align-items: center; gap: .35em; text-decoration: none; font-family: 'Press Start 2P', monospace; font-size: .48rem; letter-spacing: .06em; padding: .28em .6em; border: 1px solid transparent; transition: color .12s, border-color .12s, background .12s, text-shadow .12s; white-space: nowrap; } .footer-clink svg { flex-shrink: 0; } .footer-gh { color: color-mix(in srgb, var(--fx-dim) 75%, transparent); border-color: color-mix(in srgb, var(--fx-dim) 20%, transparent); } .footer-gh:hover { color: var(--ph-gold); border-color: color-mix(in srgb, var(--ph-gold) 50%, transparent); background: color-mix(in srgb, var(--ph-gold) 8%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--ph-gold) 55%, transparent); } .footer-li { color: color-mix(in srgb, var(--wf-celeste) 55%, transparent); border-color: color-mix(in srgb, var(--wf-celeste) 20%, transparent); } .footer-li:hover { color: var(--wf-celeste); border-color: color-mix(in srgb, var(--wf-celeste) 50%, transparent); background: color-mix(in srgb, var(--wf-celeste) 8%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--wf-celeste) 55%, transparent); } /* ════════════════════════════════════════════════════════════ SIDEBAR — BOOTSTRA.386 panel + per-section color rails ════════════════════════════════════════════════════════════ */ .site-sidebar, nav[aria-label="Sidebar"], aside.sidebar { font-family: 'VT323', monospace; font-size: 1.5rem; padding: 0; min-width: 208px; width: 208px; background-color: #8a3f5e; /* lighter rose — stands out, text stays legible */ background-image: repeating-linear-gradient( to right, transparent 0, transparent 5px, rgba(0,0,0,.05) 5px, rgba(0,0,0,.05) 6px ); border-right: 3px solid #000; box-shadow: 4px 0 0 rgba(0,0,0,.9); overflow-x: hidden; } /* ─── system.css Mac title bar — pinstripes + centered title plate ─── */ .site-sidebar::before, nav[aria-label="Sidebar"]::before { content: "❖ NAVIGATE ❖"; display: block; white-space: nowrap; overflow: hidden; background-color: var(--ph-amber); background-image: linear-gradient(to right, transparent 0 8%, color-mix(in srgb, var(--ph-gold) 45%, var(--ph-amber)) 8% 92%, transparent 92% 100%), repeating-linear-gradient(to bottom, rgba(0,0,0,.68) 0 1px, transparent 1px 4px); background-repeat: no-repeat, repeat; color: #160b00; font-family: 'Press Start 2P', monospace; font-size: .74rem; letter-spacing: .14em; padding: 1.15em .5em; text-align: center; text-transform: uppercase; border-top: 3px solid color-mix(in srgb, var(--ph-gold) 70%, #fff); border-bottom: 4px solid #000; box-shadow: 0 5px 0 rgba(0,0,0,.9), 0 0 28px color-mix(in srgb, var(--ph-amber) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ph-gold) 80%, #fff); } /* ─── window base — pinstriped footer strip ─── */ .site-sidebar::after, nav[aria-label="Sidebar"]::after { content: ""; display: block; height: 2rem; background-color: var(--ph-amber); background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.62) 0 1px, transparent 1px 4px); border-top: 4px solid #000; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ph-gold) 65%, #fff), 0 0 20px color-mix(in srgb, var(--ph-amber) 55%, transparent); } /* ─── section rail colors via CSS custom property ─── */ .site-sidebar a[href^="/01.prisca-vault"], nav[aria-label="Sidebar"] a[href^="/01.prisca-vault"] { --rail: var(--tm-green); } .site-sidebar a[href^="/02.projects"], nav[aria-label="Sidebar"] a[href^="/02.projects"] { --rail: var(--ph-gold); } .site-sidebar a[href^="/03.academics"], nav[aria-label="Sidebar"] a[href^="/03.academics"] { --rail: var(--wf-celeste); } .site-sidebar a[href^="/04.now"], nav[aria-label="Sidebar"] a[href^="/04.now"] { --rail: #ff90d0; } .site-sidebar a[href^="/05.about-me"], nav[aria-label="Sidebar"] a[href^="/05.about-me"] { --rail: var(--lavender); } .site-sidebar a[href^="/06.resume"], nav[aria-label="Sidebar"] a[href^="/06.resume"] { --rail: var(--ph-orange); } /* ─── list rows ─── */ .site-sidebar a, nav[aria-label="Sidebar"] a, aside.sidebar a { color: #ffffff; text-decoration: none; display: block; padding: .62em 1.1em .62em .8em; border-left: 8px solid var(--rail, var(--crt-line)); border-bottom: 1px solid rgba(0,0,0,.32); border-top: 1px solid rgba(255,255,255,.09); line-height: 1.5; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: background .08s, border-left-color .08s, text-shadow .08s; } /* no arrows */ .site-sidebar a::before, nav[aria-label="Sidebar"] a::before, aside.sidebar a::before { content: none; } /* hover */ .site-sidebar a:hover, nav[aria-label="Sidebar"] a:hover, aside.sidebar a:hover { background: rgba(255,255,255,.09); } /* active — section-color glow, white text */ .site-sidebar a[aria-current="page"], nav[aria-label="Sidebar"] a[aria-current="page"], aside.sidebar a[aria-current="page"] { color: #ffffff !important; background: color-mix(in srgb, var(--rail, #fff) 18%, transparent) !important; border-left-color: var(--rail, #fff) !important; border-left-width: 10px !important; font-size: 1.6rem; letter-spacing: .06em; text-shadow: 0 0 10px var(--rail, rgba(255,255,255,.9)), 0 0 22px color-mix(in srgb, var(--rail, #fff) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--rail, #fff) 35%, transparent); filter: none !important; } /* ── tree sub-items: indented child pages ── */ .site-sidebar ul ul a, nav[aria-label="Sidebar"] ul ul a { padding-left: 1.4rem; font-size: 1.2rem; border-left: 4px solid var(--rail, var(--crt-line)); opacity: .82; } .site-sidebar ul ul ul a, nav[aria-label="Sidebar"] ul ul ul a { padding-left: 2rem; font-size: 1.1rem; opacity: .7; } /* vertical tree connector */ .site-sidebar ul ul, nav[aria-label="Sidebar"] ul ul { border-left: 1px solid rgba(255,255,255,.14); margin-left: .5rem; } /* Flowershow expand toggles — styled as small amber DOS buttons */ .site-sidebar button, nav[aria-label="Sidebar"] button { color: var(--ph-ember); background: transparent; border: none; cursor: pointer; font-family: 'VT323', monospace; font-size: 1rem; line-height: 1; padding: 0 .3em; opacity: .7; transition: opacity .1s, color .1s; } .site-sidebar button:hover, nav[aria-label="Sidebar"] button:hover { color: var(--ph-amber); opacity: 1; } /* ── TOC: Turbo Vision dialog — framed directory-tree panel ── */ .toc, nav[aria-label="Table of contents"], .site-toc { font-family: 'VT323', monospace; font-size: .86rem; min-width: 0; width: 185px; max-width: 185px; padding: 0 .9rem 1rem; background: color-mix(in srgb, var(--lav-deep) 62%, var(--crt-bg)); border: 3px double color-mix(in srgb, var(--lavender) 80%, transparent); border-radius: 0; /* hard shadow + outer lavender phosphor bloom + inner glow */ box-shadow: 5px 5px 0 rgba(8,5,12,.7), 0 0 16px color-mix(in srgb, var(--lavender) 32%, transparent), inset 0 0 22px color-mix(in srgb, var(--lavender) 12%, transparent); color: var(--lavender); } /* title bar — Turbo Vision inverse-video, scanlines, [■] close box */ .toc > *:first-child, .site-toc > *:first-child, nav[aria-label="Table of contents"] > *:first-child, .toc-heading, .toc-title { position: relative; margin: 0 -.7rem .7rem; padding: .6em 1.9em; background-color: var(--lavender); background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.09) 3px 4px); color: var(--lav-deep); font-family: 'Press Start 2P', monospace; font-size: .6rem; /* the TITLE is the big element, not the tree */ letter-spacing: .03em; text-transform: uppercase; text-align: center; border-bottom: 2px solid color-mix(in srgb, var(--lav-deep) 85%, #000); /* hard drop + lavender bloom radiating from the title bar */ box-shadow: 0 3px 0 rgba(8,5,12,.5), 0 0 18px color-mix(in srgb, var(--lavender) 60%, transparent); text-shadow: none; } /* Borland close box pinned to the title-bar left */ .toc > *:first-child::before, nav[aria-label="Table of contents"] > *:first-child::before, .toc-heading::before, .toc-title::before { content: "[\25A0]"; position: absolute; left: .6em; top: 50%; transform: translateY(-50%); font-family: 'VT323', monospace; font-size: .9rem; letter-spacing: 0; color: var(--lav-deep); } /* strip default list styles */ .toc ul, nav[aria-label="Table of contents"] ul, .site-toc ul { list-style: none; margin: 0; padding-left: 0; } /* nested list — indent + vertical trunk line */ .toc ul ul, nav[aria-label="Table of contents"] ul ul, .site-toc ul ul { margin-left: .55em; padding-left: .7em; border-left: 1px solid color-mix(in srgb, var(--lavender) 42%, transparent); } /* li — tree branch chars */ .toc li, nav[aria-label="Table of contents"] li, .site-toc li { list-style: none; } .toc li::before, nav[aria-label="Table of contents"] li::before, .site-toc li::before { content: "\251C\2500\2500 "; color: color-mix(in srgb, var(--lavender) 62%, transparent); font-size: .95em; text-shadow: 0 0 5px color-mix(in srgb, var(--lavender) 40%, transparent); } .toc li:last-child::before, nav[aria-label="Table of contents"] li:last-child::before, .site-toc li:last-child::before { content: "\2514\2500\2500 "; } /* link — inline so it follows the li::before branch char */ .toc a, nav[aria-label="Table of contents"] a, .site-toc a { color: color-mix(in srgb, var(--lavender) 88%, white); text-decoration: none; display: inline; padding: .06em 0; letter-spacing: .03em; text-shadow: 0 0 6px color-mix(in srgb, var(--lavender) 35%, transparent); transition: text-shadow .12s, color .12s; } /* clear old a::before — tree chars live on li now */ .toc a::before, nav[aria-label="Table of contents"] a::before, .site-toc a::before { content: none; } /* hover — branch char + link both go celeste */ .toc li:hover::before, nav[aria-label="Table of contents"] li:hover::before, .site-toc li:hover::before { color: var(--wf-celeste); } .toc a:hover, nav[aria-label="Table of contents"] a:hover, .site-toc a:hover { color: var(--wf-celeste); text-shadow: 0 0 6px color-mix(in srgb, var(--wf-celeste) 70%, transparent), 0 0 14px color-mix(in srgb, var(--wf-celeste) 40%, transparent); } /* active — pulsing celeste phosphor glow + ● filled circle */ .toc a[aria-current="true"], .toc a.active, nav[aria-label="Table of contents"] a[aria-current="true"], nav[aria-label="Table of contents"] a.active, .site-toc a.active { color: var(--ph-amber); animation: toc-glow 1.8s ease-in-out infinite; } @keyframes toc-glow { 0%, 100% { text-shadow: 0 0 6px color-mix(in srgb, var(--ph-amber) 45%, transparent); } 50% { text-shadow: 0 0 10px color-mix(in srgb, var(--ph-amber) 85%, transparent), 0 0 20px color-mix(in srgb, var(--ph-amber) 50%, transparent); } } .toc li:has(> a[aria-current="true"])::before, .toc li:has(> a.active)::before, nav[aria-label="Table of contents"] li:has(> a[aria-current="true"])::before, nav[aria-label="Table of contents"] li:has(> a.active)::before, .site-toc li:has(> a.active)::before { content: "\251C\2500 \25CF "; color: var(--ph-amber); text-shadow: 0 0 9px color-mix(in srgb, var(--ph-amber) 70%, transparent); } .toc li:last-child:has(> a[aria-current="true"])::before, nav[aria-label="Table of contents"] li:last-child:has(> a[aria-current="true"])::before, .site-toc li:last-child:has(> a.active)::before { content: "\2514\2500 \25CF "; color: var(--ph-amber); } /* ════════════════════════════════════════════════════════════ COMPONENTS — crt-box dialogs, tags, helpers ════════════════════════════════════════════════════════════ */ /* DOS dialog: double border + BOOTSTRA.386 hard shadow */ .crt-box { border: 4px double var(--ph-ember); background: color-mix(in srgb, var(--crt-panel) 75%, transparent); box-shadow: 6px 6px 0 rgba(8,5,12,.75); padding: 1.3rem 1.4rem 1.1rem; margin: 2rem 0; position: relative; } .crt-box[data-title]::before { content: " " attr(data-title) " "; position: absolute; top: -.78em; left: 50%; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(13,10,14,.4) 3px 4px) var(--ph-ember); color: var(--crt-void); text-transform: uppercase; letter-spacing: .12em; font-size: .88rem; padding: 0 .65em; text-shadow: none; white-space: nowrap; box-shadow: 2px 2px 0 rgba(8,5,12,.6); } /* color variants */ .crt-box.pink { border-color: color-mix(in srgb, var(--ln-mid) 55%, transparent); } .crt-box.pink[data-title]::before { background-color: var(--ln-mid); color: var(--crt-void); } .crt-box.violet { border-color: color-mix(in srgb, var(--wf-violet) 55%, transparent); } .crt-box.violet[data-title]::before { background-color: var(--wf-violet); } .crt-box.prussian { border: 4px double var(--pr-brd); background: color-mix(in srgb, var(--pr-deep) 88%, transparent); } .crt-box.prussian[data-title]::before { background-color: var(--pr-mid); color: var(--pr-text); border: 1px solid var(--pr-brd); } .crt-box.lavender { border-color: color-mix(in srgb, var(--lav-dim) 55%, transparent); } .crt-box.lavender[data-title]::before { background-color: var(--lav-deep); color: var(--lavender); } .crt-box.celeste { border-color: color-mix(in srgb, var(--wf-celeste) 55%, transparent); } .crt-box.celeste[data-title]::before { background-color: color-mix(in srgb, var(--wf-celeste) 60%, var(--crt-panel)); color: var(--crt-void); } .crt-box.gold { border-color: color-mix(in srgb, var(--ph-gold) 55%, transparent); } .crt-box.gold[data-title]::before { background-color: var(--ph-gold); color: var(--crt-void); } /* tags */ .tag { display: inline-block; font-size: .9rem; padding: 0 .5em; margin: 0 .35em .3em 0; color: var(--ph-ember); border: 1px solid var(--ph-ember); } .tag.gold { color: var(--ph-gold); border-color: var(--ph-gold); } .tag.pink { color: var(--ln-mid); border-color: var(--ln-mid); } .tag.teal { color: var(--wf-celeste); border-color: var(--wf-celeste); } .tag.violet { color: var(--wf-violet); border-color: var(--wf-violet); } .tag.lav { color: var(--lavender); border-color: var(--lav-dim); } /* hero ascii block */ .hero-ascii { font-family: 'VT323', monospace; white-space: pre; overflow-x: auto; line-height: 1.05; font-size: clamp(.95rem, 2.7vw, 1.8rem); color: var(--ph-gold); text-shadow: -1.5px 0 color-mix(in srgb, var(--ln-mid) 45%, transparent), 1.5px 0 color-mix(in srgb, var(--wf-celeste) 45%, transparent), 0 0 9px color-mix(in srgb, var(--ph-gold) 75%, transparent), 0 0 30px color-mix(in srgb, var(--ph-amber) 35%, transparent); margin-bottom: .3rem; } /* byline, whisper, update, sysline */ .byline { color: var(--fx-ghost); font-size: .95rem; letter-spacing: .1em; margin-top: -.9rem; } .whisper { color: var(--fx-ghost); text-align: center; letter-spacing: .22em; font-size: 1rem; margin: 2.4rem 0; } .update { color: var(--fx-dim); } .update b { color: var(--fx-bright); font-weight: 400; } .sysline { color: var(--fx-dim); font-size: 1.02rem; letter-spacing: .1em; text-transform: lowercase; } .sysline em { color: var(--ln-mid); } /* ════════════════════════════════════════════════════════════ SCROLLBAR + SELECTION ════════════════════════════════════════════════════════════ */ ::selection { background: var(--ph-amber); color: var(--crt-void); text-shadow: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--crt-panel); } ::-webkit-scrollbar-thumb { background: var(--ph-ember); border: 2px solid var(--crt-panel); } ::-webkit-scrollbar-thumb:hover { background: var(--ph-amber); } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 660px) { article h2 { font-size: 1.35rem; } article h3 { margin-left: .4rem; } article h4 { margin-left: .9rem; } /* strip most of the vignette on mobile — narrow screens put content inside the "dark zone", making text unreadable */ .site-layout { background: radial-gradient(ellipse 90% 86% at 50% 50%, transparent 65%, rgba(0,0,0,.18) 100%), var(--crt-bg); } /* also reduce the noise grain layer */ .site-layout::after { opacity: .014; } /* navbar tabs — match index.html mobile sizing */ .site-navbar a { padding: 3px 8px; font-size: .42rem; } /* sidebar drawer on mobile */ .site-sidebar, nav[aria-label="Sidebar"], aside.sidebar { background: var(--crt-panel); border-right: 1px solid color-mix(in srgb, var(--ph-ember) 38%, transparent); max-width: 82vw; } .site-sidebar a, nav[aria-label="Sidebar"] a { padding: .3em 1em .3em .8em; font-size: 1.1rem; } } @media (max-width: 440px) { .site-navbar a { padding: 3px 6px; font-size: .4rem; } } /* ════════════════════════════════════════════════════════════ PRISCA/VAULT: Turbo Vision / MS-DOS BIOS skin Activates on any /notes/* page via CSS :has() Palette: DOS navy bg, classic-blue navbar, cyan/yellow headings, white body text, gray borders, cyan status bar. ════════════════════════════════════════════════════════════ */ /* ── base ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) { background: #00004a; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-layout { background: radial-gradient(ellipse 90% 86% at 50% 50%, transparent 50%, rgba(0,0,0,.38) 100%), #00004a; } /* ── navbar: Turbo Vision menu bar ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-navbar { background: #0000aa; border-bottom-color: #5555ff; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-navbar a { color: #cccccc; border-right-color: #2222cc; background: transparent !important; --tab-sq: #55ffff; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-navbar a::before { background: #55ffff; box-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-navbar a[aria-current="page"] { background: #aaaaaa !important; color: #000080 !important; border-bottom: 2px solid #aaaaaa !important; text-shadow: none !important; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-navbar a:hover { background: #ffffff !important; color: #000080 !important; text-shadow: none !important; } /* ── sidebar: Turbo Vision file manager panel ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"] { background: #000080; border-right-color: #aaaaaa; box-shadow: 4px 0 0 rgba(0,0,0,.8); } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar::before, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"]::before { background-color: #aaaaaa; background-image: none; color: #000000; border-top-color: rgba(255,255,255,.5); border-bottom-color: #888888; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar::after, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"]::after { background-color: #aaaaaa; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.45) 0 1px, transparent 1px 4px); border-top-color: #888888; box-shadow: inset 0 2px 0 rgba(255,255,255,.45); } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar a, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"] a { color: #ffffff; filter: none; border-left-color: #2222cc; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar a:hover, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"] a:hover { background: #0000cc; border-left-color: #55ffff; text-shadow: none; filter: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-sidebar a[aria-current="page"], body:has(a[href^="/01.prisca-vault"][aria-current="page"]) nav[aria-label="Sidebar"] a[aria-current="page"] { background: #55ffff !important; color: #000080 !important; border-left-color: #55ffff !important; text-shadow: none; filter: none !important; } /* ── article pinstripe ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose::before { background: repeating-linear-gradient(to right, transparent 0 6px, rgba(85,85,255,.35) 6px 7px); border-bottom-color: #5555ff; } /* ── headings: DOS 16-color palette ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article h1, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose h1 { color: #ffff55; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article h2, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose h2 { color: #55ffff; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article h3, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose h3 { color: #55ff55; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article h4, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose h4 { color: #ffffff; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article strong, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose strong { color: #ffff55; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article a, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose a { color: #55ffff; text-decoration-color: #5555ff; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article a:hover, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose a:hover { background: #55ffff; color: #000080; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article code, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose code { background: #000060; color: #55ffff; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article pre, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose pre { background: #000060; border-color: #aaaaaa; box-shadow: 4px 4px 0 rgba(0,0,0,.8); } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article pre::before, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose pre::before { content: " C:\\NOTES> "; background: #aaaaaa; color: #000000; text-shadow: none; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article pre code, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose pre code { color: #55ffff; text-shadow: none; } /* prisca-vault blockquote inherits the DOS blue — no override needed */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) article ul > li::marker, body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .prose ul > li::marker { color: #55ffff; } /* ── footer: Turbo Vision status bar ── */ body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-footer { background: #0055aa; border-top-color: #aaaaaa; color: #ffffff; } body:has(a[href^="/01.prisca-vault"][aria-current="page"]) .site-footer::after { color: #55ffff; } @media (prefers-reduced-motion: reduce) { article, article h1::after, .prose h1::after, .site-layout::after, body::after, html::after, .toc a[aria-current="true"], .toc a.active, nav[aria-label="Table of contents"] a[aria-current="true"], nav[aria-label="Table of contents"] a.active { animation: none; } }