/* Cover logo for campaign pages */ .cover-logo { display: block; margin: 1em auto 2em auto; max-width: 80%; height: auto; } /* Tighten Material tables (vertical density) */ .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: 0.1em 0.05em; /* reduced horizontal padding */ text-align: left !important; line-height: 1.1em; } /* Increase base font sizes for better readability at 150% zoom */ body { font-size: 17px; } .md-typeset { font-size: 1.05em; } .md-typeset h1 { font-size: 2.2em; } .md-typeset h2 { font-size: 1.8em; } .md-typeset h3 { font-size: 1.5em; } .md-typeset h4 { font-size: 1.2em; } /* Wide table container for better horizontal display */ .md-typeset { overflow-x: auto; } .md-main__inner { max-width: 100%; } /* Allow tables to be wider with horizontal scroll as fallback */ .md-typeset table:not([class]) { width: 100%; table-layout: auto; min-width: 100%; } /* Make table wrapper wider */ .md-typeset > figure > table { width: 100%; } /* Prevent table from being constrained */ .md-typeset table:not([class]) { margin-left: auto; margin-right: auto; } /* Prevent theme flash: hide body until JavaScript sets `theme-applied` on . The script sets this very early; this avoids briefly showing the wrong theme while navigation occurs. */ html:not(.theme-applied) body { visibility: hidden !important; } /* Expand content area but keep sidebar visible */ .md-grid { max-width: 100%; } .md-content { max-width: 100%; } .md-typeset { max-width: 100%; } /* Optional: slightly smaller font inside tables */ .md-typeset table:not([class]) { font-size: 0.8em; } /* Optional: reduce spacing around tables */ .md-typeset table:not([class]) { margin: 0.3em 0; } /* Fantasy: make tables blend with parchment — transparent cells and subtle brown rules */ html.theme-fantasy .md-typeset table, html.theme-fantasy .md-typeset table:not([class]) { background-color: transparent !important; border-collapse: collapse; position: relative; z-index: 2; /* lift tables above any subtle overlays */ } html.theme-fantasy .md-typeset table td, html.theme-fantasy .md-typeset table th { /* give cells a semi-transparent parchment tint so dividers contrast against busy background images */ background-color: rgba(246,239,230,0.72) !important; border: none !important; padding: 0.45em 0.6em !important; position: relative; z-index: 3; /* ensure cell content sits above table overlay */ } /* subtle divider lines between rows */ html.theme-fantasy .md-typeset table tr:not(:last-child) td { border-bottom: 1px solid rgba(20,15,0,0.36); /* stronger soft brown */ } /* slightly stronger header divider */ html.theme-fantasy .md-typeset table thead tr th, html.theme-fantasy .md-typeset table thead tr td { border-bottom: 2px solid rgba(122,75,47,0.56); } /* Zebra striping: slightly darker/more opaque blue on even rows, and the alternating rows are 2x more transparent (half alpha). */ html.theme-fantasy .md-typeset table tbody tr:nth-child(even) td { background-color: rgba(190,220,255,0.2) !important; /* darker/more opaque blue */ } html.theme-fantasy .md-typeset table tbody tr:nth-child(odd) td { background-color: rgba(190,220,255,0.01) !important; /* alternating rows half alpha */ } /* Subtle translucent overlay for paper texture unify — drawn behind cells */ html.theme-fantasy .md-typeset table::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; /* behind cells (cells are z-index:3) */ background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.02)); mix-blend-mode: multiply; border-radius: 4px; } /* make table captions and small note text use fantasy ink */ html.theme-fantasy .md-typeset table caption, html.theme-fantasy .md-typeset table small { color: var(--fantasy-ink) !important; } .md-typeset strong { color: #ff4fd8; } .md-typeset a { color: #00eaff; } .md-typeset h2, .md-typeset h3 { color: #00eaff; } /* ============================= */ /* CYBERPUNK VISUAL EFFECTS */ /* ============================= */ /* Load candidate fonts (Audiowide for Cyber, Merriweather for Fantasy) */ @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Merriweather:wght@300;400;700&display=swap'); :root { --cyber-font: 'Audiowide', cursive; --fantasy-font: 'Merriweather', serif; } /* Theme font variables (applied when the corresponding class is set on ) */ html.theme-modern { /* default Material fonts - no change */ } html.theme-cyber { --md-text-font: var(--cyber-font); --md-code-font: 'JetBrains Mono'; } html.theme-fantasy { --md-text-font: var(--fantasy-font); --md-code-font: 'JetBrains Mono'; } /* ----------------------------- */ /* Modern: basic dark mode styles */ /* ----------------------------- */ html.theme-modern { --modern-bg: #0b0f14; /* page background */ --modern-surface: #0f1419; /* panels */ --modern-text: #e6eef6; /* main text */ --modern-muted: #94a3b8; /* muted text */ --modern-accent: #60a5fa; /* link / accent */ } /* page background and main text */ html.theme-modern body { background-color: var(--modern-bg); color: var(--modern-text); } html.theme-modern .md-typeset { color: var(--modern-text); } /* Links and accents */ html.theme-modern .md-typeset a, html.theme-modern .md-nav__link, html.theme-modern .md-toc__link { color: var(--modern-accent) !important; } html.theme-modern .md-typeset a:hover { opacity: 0.92; } /* Sidebar / nav surfaces */ html.theme-modern .md-sidebar, html.theme-modern .md-nav__list, html.theme-modern .md-nav__link, html.theme-modern .md-nav__title, html.theme-modern .md-nav--secondary .md-nav__link { background-color: var(--modern-surface) !important; color: var(--modern-text) !important; } html.theme-modern .md-nav__link:hover, html.theme-modern .md-nav__link[aria-current] { color: var(--modern-accent) !important; } /* Header / toolbar */ html.theme-modern .md-header, html.theme-modern .md-header__inner, html.theme-modern .md-toolbar { background-color: var(--modern-surface) !important; color: var(--modern-text) !important; } /* TOC surface */ html.theme-modern .md-toc { background-color: transparent; color: var(--modern-text) !important; } /* Tables: dark translucent surfaces and subtle borders */ html.theme-modern .md-typeset table, html.theme-modern .md-typeset table:not([class]) { background-color: rgba(255,255,255,0.02) !important; border-collapse: collapse; } html.theme-modern .md-typeset table td, html.theme-modern .md-typeset table th { background-color: transparent !important; color: var(--modern-text) !important; border: 1px solid rgba(255,255,255,0.04) !important; padding: 0.45em 0.6em !important; } html.theme-modern .md-typeset table thead tr th, html.theme-modern .md-typeset table thead tr td { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } html.theme-modern .md-typeset table tbody tr:nth-child(even) td { background-color: rgba(255,255,255,0.01) !important; } /* Muted text */ html.theme-modern .md-typeset p, html.theme-modern .md-typeset li { color: var(--modern-muted); } /* Remove neon/blue glow and use a subtler accent for headings in Modern dark mode */ html.theme-modern .md-typeset h1, html.theme-modern .md-typeset h2, html.theme-modern .md-typeset h3 { text-shadow: none !important; color: var(--modern-accent) !important; } /* Remove hover glow from links in Modern */ html.theme-modern .md-typeset a:hover { text-shadow: none !important; } /* Prevent nav/toc link flash when navigating between pages: remove transitions and neutralize :active/:focus styles so clicking doesn't briefly show a different theme's colors before the saved theme is applied on the next page. */ .md-nav__link, .md-toc__link { -webkit-tap-highlight-color: rgba(0,0,0,0); transition: none !important; } .md-nav__link:active, .md-nav__link:focus, .md-toc__link:active, .md-toc__link:focus { background: transparent !important; color: inherit !important; outline: none !important; } /* Make the active/current state stable across navigation by keeping the appearance consistent (no flashing) */ .md-nav__link[aria-current], .md-toc__link[aria-current] { transition: none !important; } /* Active nav item: bright teal highlight so it's visible on dark sidebar */ .md-nav__item--active > .md-nav__link, .md-nav__link--active, .md-nav__link[aria-current="page"] { background-color: rgba(0, 150, 136, 0.30) !important; color: #80cbc4 !important; border-radius: 3px; } /* Theme-specific active nav highlights */ html.theme-modern .md-nav__item--active > .md-nav__link, html.theme-modern .md-nav__link--active, html.theme-modern .md-nav__link[aria-current="page"] { background-color: rgba(96, 165, 250, 0.20) !important; color: #93c5fd !important; } html.theme-fantasy .md-nav__item--active > .md-nav__link, html.theme-fantasy .md-nav__link--active, html.theme-fantasy .md-nav__link[aria-current="page"] { background-color: rgba(122, 75, 47, 0.18) !important; color: #7a4b2f !important; box-shadow: none !important; } html.theme-fantasy .md-nav__link, html.theme-fantasy .md-nav__title { box-shadow: none !important; } html.theme-cyber .md-nav__item--active > .md-nav__link, html.theme-cyber .md-nav__link--active, html.theme-cyber .md-nav__link[aria-current="page"] { background-color: rgba(0, 234, 255, 0.15) !important; color: #00eaff !important; } /* ----------------------------- */ /* Cyber: subtle zebra lines for tables */ /* ----------------------------- */ /* Provide a faint cyan/teal striping and thin divider lines for readability */ html.theme-cyber .md-typeset table, html.theme-cyber .md-typeset table:not([class]) { background-color: transparent !important; border-collapse: collapse; } html.theme-cyber .md-typeset table td, html.theme-cyber .md-typeset table th { background-color: transparent !important; padding: 0.45em 0.6em !important; color: inherit; border-bottom: 1px solid rgba(0,234,255,0.04) !important; /* thin cyan divider */ } html.theme-cyber .md-typeset table thead tr th, html.theme-cyber .md-typeset table thead tr td { border-bottom: 1px solid rgba(0,234,255,0.08) !important; } /* subtle zebra: even rows slightly tinted cyan */ html.theme-cyber .md-typeset table tbody tr:nth-child(even) td { background-color: rgba(0,200,255,0.03) !important; } /* make zebra a bit more visible on hover */ html.theme-cyber .md-typeset table tbody tr:hover td { background-color: rgba(0,200,255,0.06) !important; } /* Cyber theme: large vertical parallax background (portrait image) Place a tall image at `docs/images/cyber-vertical-portrait.jpg`. The image will be positioned center-top and fixed for parallax effect. On small/touch devices we fall back to scroll and cover. */ html.theme-cyber .md-container, html.theme-cyber .md-main, html.theme-cyber .md-typeset { background-image: url('/images/cyber-vertical-portrait.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; /* parallax */ background-size: auto 160vh; /* scale vertically larger than viewport for parallax movement */ } @media (pointer: coarse), (max-width: 900px) { html.theme-cyber .md-container, html.theme-cyber .md-main, html.theme-cyber .md-typeset { background-attachment: scroll; background-size: cover; /* scale to fill small screens */ background-position: center top; } } /* When cyber mode is fully enabled (video + scanlines), drop the static background image so the looping video is visible. Keep surfaces transparent to let the video show through. */ html.theme-cyber.cyber-enabled .md-container, html.theme-cyber.cyber-enabled .md-main, html.theme-cyber.cyber-enabled .md-typeset { background-image: none !important; background-color: transparent !important; } html.theme-cyber.cyber-enabled body { background-color: #04060a; /* subtle fallback behind the video */ } /* Cyber background video element (full-screen, behind content) */ .cyber-bg-video { position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; /* behind content; scanline overlays use very high z-index */ pointer-events: none; opacity: 1; } /* Ensure main content sits above the video */ html.theme-cyber .md-container, html.theme-cyber .md-main, html.theme-cyber .md-typeset { position: relative; z-index: 1; } /* Ensure bold text in Modern uses white for clear contrast */ html.theme-modern .md-typeset strong { color: #ffffff !important; } /* Fantasy theme: parchment background and readable black text */ html.theme-fantasy body { /* off-white parchment tone */ --fantasy-paper: #f6efe6; --fantasy-ink: #3b2f22; /* earthy dark brown for body/nav text */ --fantasy-accent: #7a4b2f; /* warm brown accent for links */ background-color: var(--fantasy-paper); /* light parchment fallback */ } /* Fantasy background: use a single full-width 2560x1440 image by default (parallax effect). If you prefer tiling, use the `.fantasy-tile` class on the `` element or supply a repeating texture named `paper-texture.png`. */ html.theme-fantasy .md-container, html.theme-fantasy .md-main, html.theme-fantasy .md-typeset { background-image: url('/images/paper-2560x1440.png'); background-repeat: no-repeat; background-size: 2560px 1440px; /* fixed-size full-width image */ background-position: center top; background-attachment: fixed; /* parallax effect on supported browsers */ } /* Fallback: mobile and touch devices often don't support fixed attachment well. Switch to scroll attachment on those devices for smoother rendering. */ @media (pointer: coarse), (max-width: 900px) { html.theme-fantasy .md-container, html.theme-fantasy .md-main, html.theme-fantasy .md-typeset { background-attachment: scroll; background-position: center top; background-size: cover; /* scale nicely on small screens */ } } /* Optional: enable tiling instead of a single image by adding `fantasy-tile` to the element (e.g. ). This will use a repeating texture named `paper-texture.png`. */ html.theme-fantasy.fantasy-tile .md-container, html.theme-fantasy.fantasy-tile .md-main, html.theme-fantasy.fantasy-tile .md-typeset { background-image: url('/images/paper-texture.png'); background-repeat: repeat; background-size: auto; background-attachment: scroll; } /* Use earthy dark-brown ink for readability in fantasy theme */ html.theme-fantasy .md-typeset, html.theme-fantasy .md-typeset p, html.theme-fantasy .md-typeset li, html.theme-fantasy .md-typeset h1, html.theme-fantasy .md-typeset h2, html.theme-fantasy .md-typeset h3, html.theme-fantasy .md-typeset strong { color: var(--fantasy-ink) !important; } /* Links use a warm brown accent */ html.theme-fantasy .md-typeset a { color: var(--fantasy-accent); } /* Remove any neon/cyber text-shadow when in fantasy theme */ html.theme-fantasy .md-typeset h1, html.theme-fantasy .md-typeset h2, html.theme-fantasy .md-typeset h3 { text-shadow: none; color: var(--fantasy-ink); } /* --- Neon glow (headings only) --- */ .md-typeset h1, .md-typeset h2, .md-typeset h3 { text-shadow: 0 0 6px rgba(0, 234, 255, 0.35), 0 0 14px rgba(0, 234, 255, 0.18); } /* --- Neon hover accent (links) --- */ .md-typeset a:hover { text-shadow: -1px 0 rgba(255, 79, 216, 0.55), 1px 0 rgba(0, 234, 255, 0.45), 0 0 10px rgba(0, 234, 255, 0.25); transition: text-shadow 120ms ease-out; } /* --- Micro-glitch for headings (rare/subtle) --- */ @keyframes microGlitch { 0%, 95% { transform: translateX(0); filter: none; } 96% { transform: translateX(0.6px); } 97% { transform: translateX(-0.8px); } 98% { transform: translateX(0.3px); } 100% { transform: translateX(0); } } /* apply only lightly to avoid layout shifts */ .md-typeset h1.glitch, .md-typeset h2.glitch { display: inline-block; } /* ------------------------- */ /* Animated scanlines layer */ /* Use background-position animation (more reliable) */ @keyframes scanShift { 0% { background-position: 0 0; } 100% { background-position: 0 12px; } } /* Base scanline layer is inert by default; animations enabled only when cyber mode is active */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; /* hidden by default */ background: transparent; will-change: opacity; } /* Active cyber mode: enable scanline animation and tweak appearance */ html.cyber-enabled body::before { opacity: 0.12; /* subtle by default; adjust 0.06–0.25 */ background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px, rgba(0,0,0,0.00) 3px, rgba(0,0,0,0.00) 8px ); background-repeat: repeat; background-size: 100% 12px; mix-blend-mode: overlay; animation: scanShift 1.8s linear infinite; } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { .md-typeset h1.glitch, .md-typeset h2.glitch { animation: none !important; } html.cyber-enabled body::before { animation: none !important; } } /* Optional: small RGB split/glitch on hover for headings */ /* Optional: small RGB split/glitch on hover for headings */ .md-typeset h1:hover, .md-typeset h2:hover { position: relative; } .md-typeset h1:hover::after, .md-typeset h2:hover::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: rgba(0, 234, 255, 0.6); clip-path: inset(0 0 70% 0); transform: translateX(1px); pointer-events: none; text-shadow: 0 0 8px rgba(0, 234, 255, 0.2); } /* When cyber mode is enabled, apply the cyber font to headings for a stylistic feel */ html.cyber-enabled .md-typeset h1, html.cyber-enabled .md-typeset h2, html.cyber-enabled .md-typeset h3 { font-family: var(--cyber-font); letter-spacing: 0.6px; } html.theme-cyber .md-typeset h1 { color: #00eaff !important; font-weight: 700; } html.theme-cyber .md-typeset h2 { color: #ff4fd8 !important; font-weight: 700; } html.theme-cyber .md-typeset h3 { color: #5bff8f !important; font-weight: 700; } html.theme-cyber .md-typeset h4 { color: #ffd166 !important; font-weight: 700; } html.theme-cyber .md-typeset h5 { color: #9fa6ff !important; font-weight: 700; } html.theme-cyber .md-typeset h6 { color: #ffffff !important; font-weight: 700; } /* Removed standalone cyber toggle button styles (UI uses picker now) */ /* demo overlay class (keeps previous behavior) */ .cyber-scanlines { z-index: 9998; } /* Fantasy: parchment on html root with original sizing — all surfaces transparent */ html.theme-fantasy { background-color: var(--fantasy-paper); } /* Tile on small screens / high zoom (JS adds .fantasy-tile class) */ html.theme-fantasy.fantasy-tile { background-image: url('/images/paper-texture.png') !important; background-repeat: repeat !important; background-size: auto !important; background-attachment: scroll !important; } @media (pointer: coarse), (max-width: 900px) { html.theme-fantasy { background-attachment: scroll; background-size: cover; } } /* All Material surfaces transparent so parchment shows through from html root */ html.theme-fantasy body, html.theme-fantasy .md-sidebar, html.theme-fantasy .md-sidebar__scrollwrap, html.theme-fantasy .md-nav, html.theme-fantasy .md-nav__list, html.theme-fantasy .md-content, html.theme-fantasy .md-content__inner, html.theme-fantasy .md-grid, html.theme-fantasy .md-main__inner, html.theme-fantasy .md-container { background-color: transparent !important; background-image: none !important; } html.theme-fantasy .md-main { background-color: transparent !important; } /* Body: left parchment page. Width locked to sidebar width via CSS var so it always fills the sidebar regardless of viewport size or zoom level. */ html.theme-fantasy body { background-color: var(--fantasy-paper) !important; background-image: url('/images/paper-left.jpg') !important; background-repeat: no-repeat !important; background-size: var(--md-sidebar-width, 12.1rem) 100% !important; background-position: left top !important; background-attachment: fixed !important; } /* Content: right parchment page. cover fills the viewport; position offsets by sidebar width so the fold (x=0 of image) lands at the sidebar edge. */ html.theme-fantasy .md-main { background-image: url('/images/paper-right.jpg') !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: var(--md-sidebar-width, 12.1rem) top !important; background-attachment: fixed !important; } /* Fantasy nav/TOC text ink */ html.theme-fantasy .md-sidebar, html.theme-fantasy .md-nav__list, html.theme-fantasy .md-nav__link, html.theme-fantasy .md-nav__title, html.theme-fantasy .md-nav--secondary .md-nav__link, html.theme-fantasy .md-toc, html.theme-fantasy .md-toc__link { color: var(--fantasy-ink) !important; } /* Hover/active nav links */ html.theme-fantasy .md-nav__link:hover, html.theme-fantasy .md-nav__link[aria-current], html.theme-fantasy .md-toc__link:hover, html.theme-fantasy .md-toc__link[aria-current] { color: var(--fantasy-accent) !important; } /* Sidebar section headers: warm golden highlight with dark ink */ html.theme-fantasy .md-nav__title, html.theme-fantasy .md-toc__title, html.theme-fantasy .md-sidebar .md-nav__title { background-color: #c8a05a !important; color: #2a1a0e !important; border-bottom: 2px solid rgba(122,75,47,0.5) !important; } html.theme-fantasy .md-nav__title a, html.theme-fantasy .md-toc__title a { color: #2a1a0e !important; } /* Tab bar (second horizontal menu): medium brown */ html.theme-fantasy .md-tabs { background-color: #5c3318 !important; } html.theme-fantasy .md-tabs__link { color: var(--fantasy-paper) !important; opacity: 0.8; } html.theme-fantasy .md-tabs__link--active, html.theme-fantasy .md-tabs__link:hover { color: var(--fantasy-paper) !important; opacity: 1; } /* Art gallery grid */ .art-gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 1em 0; } .art-gallery img { height: 200px; width: auto; cursor: zoom-in; border-radius: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease; object-fit: cover; } .art-gallery img:hover { transform: scale(1.04); box-shadow: 0 6px 22px rgba(0,0,0,0.5); } /* Lightbox for images with the class 'lightbox' */ .lightbox { cursor: zoom-in; transition: transform 150ms ease, box-shadow 150ms ease; } .lightbox:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .lightbox:active { transform: none; } .lightbox[data-enlarged="true"] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; height: auto !important; max-width: 95vw !important; max-height: 95vh !important; object-fit: contain !important; z-index: 100001 !important; cursor: zoom-out; box-shadow: 0 12px 48px rgba(0,0,0,0.7); } .lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 100000; pointer-events: auto; } /* Ensure header doesn't overlap lightbox when enlarged */ .md-header { z-index: 4; } /* Top site header: brown background in Fantasy mode with light text */ html.theme-fantasy .md-header, html.theme-fantasy .md-header__inner, html.theme-fantasy .md-toolbar, html.theme-fantasy .md-header-nav { background-color: var(--fantasy-accent) !important; color: var(--fantasy-paper) !important; } html.theme-fantasy .md-header a, html.theme-fantasy .md-header__title, html.theme-fantasy .md-header-nav__title { color: var(--fantasy-paper) !important; } html.theme-fantasy .md-header { border-bottom: 1px solid rgba(0,0,0,0.08); } /* Only apply heading microGlitch when cyber-enabled */ html.cyber-enabled .md-typeset h1.glitch, html.cyber-enabled .md-typeset h2.glitch { animation: microGlitch 4s infinite; } /* Strong demo overlay (activated by JS when ?cyber=1) */ .cyber-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background-image: repeating-linear-gradient( to bottom, rgba(0,255,255,0.08) 0px, rgba(0,255,255,0.08) 1px, rgba(0,0,0,0.00) 3px, rgba(0,0,0,0.00) 8px ); background-size: 100% 8px; mix-blend-mode: screen; opacity: 0.28; animation: scanShift 0.9s linear infinite; } /* make headings visibly glitch for demo when param is present */ .cyber-demo-glitch .md-typeset h1, .cyber-demo-glitch .md-typeset h2 { animation: microGlitch 2s infinite; }