/* ===================================================================== theme-toonami.css ----------------------------------------------------------------------- Optional accent stylesheet for Toonami-flavored Deep Dives posts. Loaded IN ADDITION to /style.css (never instead of it) -- this only overrides the visual details for the page it's linked on. Inspired by the space/TOM/chrome-tech look of Toonami's classic branding: dark starfield panel, glowing cyan/green accents, hexagon-clipped image frames. To use on a page: add class="theme-toonami" to , and link this stylesheet AFTER /style.css in . Every other page that doesn't include this stylesheet is completely unaffected -- all selectors here are scoped under .theme-toonami. ===================================================================== */ .theme-toonami header { border-bottom: 3px solid #00e5ff; box-shadow: 0 0 20px rgba(0, 229, 255, 0.5); } .theme-toonami nav.site-nav { background-color: #052534; border: 1px solid #00e5ff; } .theme-toonami nav.site-nav a { color: #7fd8ff; } .theme-toonami nav.site-nav a:hover, .theme-toonami nav.site-nav a.active { background-color: #00e5ff; color: #05141c; } .theme-toonami main { background-color: #050414; color: #d9f7ff; border: 2px solid #00e5ff; box-shadow: 0 0 25px rgba(0, 229, 255, 0.35) inset; /* faint starfield */ background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px); background-size: 70px 70px, 110px 110px; background-position: 0 0, 35px 45px; } .theme-toonami main p { color: #d9f7ff; } .theme-toonami a:link, .theme-toonami a:visited { color: #39ff8f; } .theme-toonami .page-title { font-family: 'Courier New', monospace; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(180deg, #eafcff 0%, #7fd8ff 40%, #0b6b8a 70%, #052534 100%); -webkit-background-clip: text; background-clip: text; color: transparent; border-bottom: 3px solid #39ff8f; padding-bottom: 8px; } .theme-toonami .post-meta { color: #7fd8ff; } .theme-toonami .post-meta .tag { background-color: #052534; border: 1px solid #39ff8f; color: #39ff8f; } .theme-toonami .embed-image { background-color: #050414; border: 2px solid #00e5ff; box-shadow: 0 0 14px rgba(0, 229, 255, 0.45); clip-path: polygon(6% 0, 94% 0, 100% 15%, 100% 85%, 94% 100%, 6% 100%, 0 85%, 0 15%); } .theme-toonami .embed-image img { border-color: #39ff8f; } .theme-toonami .embed-image figcaption { color: #7fd8ff; } .theme-toonami .content-box { background-color: #050414; border: 2px solid #00e5ff; color: #d9f7ff; } .theme-toonami .callout { border: 2px dashed #39ff8f; background-color: rgba(0, 229, 255, 0.08); color: #d9f7ff; } .theme-toonami .callout-title { color: #39ff8f; } .theme-toonami code.inline { background-color: #052534; border: 1px solid #39ff8f; color: #39ff8f; } .theme-toonami .post-nav { border-top: 3px solid #39ff8f; } .theme-toonami .post-nav a { color: #39ff8f; }