/* ======================================================================= BIZARRE DOCKYARD — site-wide manga theme (override, loaded LAST) Re-points the mission-control theme's design tokens to the cel-shaded "anime/manga-action" palette + fonts, then adds hard-shadow panels and sharp edges so the whole site reads as one piece with the homepage. ======================================================================= */ /* ---- TOKENS: light/cream "anime cel" (default) ---- */ :root{ --font-sans: 'Zilla Slab', Georgia, serif; /* body */ --font-display:'Bungee', sans-serif; /* headings */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg-primary: #f6e8c5; /* cel cream paper */ --bg-secondary:#fdf4da; /* lighter cream */ --bg-tertiary: #f3c6d9; /* bubblegum */ --border: #1a0a2e; /* inked violet-black (hard borders) */ --border-active:#ff2bd0; /* magenta */ --text-primary:#1a0a2e; --text-secondary:#46306e; --text-muted: #6a5888; --accent-green:#1faa55; --accent-amber:#e6b800; --accent-cyan: #0093ad; --accent-red: #ff2bd0; /* the hot magenta accent */ --accent-violet:#7c3aed; --accent-gold: #d98700; --code-bg:#1a0a2e; --code-text:#f6e8c5; --ink:#1a0a2e; --paper:#f6e8c5; --border-radius:0px; --card-shadow:5px 5px 0 #1a0a2e; /* HARD manga offset */ --card-shadow-hover:8px 8px 0 #ff2bd0; --bg-focus: var(--bg-secondary); /* focus-mode backdrop follows the active palette */ } /* ---- PALETTES (data-palette on ; cycled by the PALETTE button). :root above is the default "anime-dream". These mirror the homepage. ---- */ [data-palette="sunset-strike"]{ --bg-primary:#ffd9b8; --bg-secondary:#ffe7d2; --bg-tertiary:#ffb3c1; --border:#2d0e4e; --border-active:#ff5a3c; --text-primary:#2d0e4e; --text-secondary:#6a2a4a; --text-muted:#8a4a5a; --accent-red:#ff5a3c; --accent-cyan:#0093ad; --accent-amber:#e0a200; --accent-violet:#ff2bd0; --accent-green:#1faa55; --accent-gold:#d98700; --code-bg:#2d0e4e; --code-text:#ffd9b8; --ink:#2d0e4e; --paper:#ffd9b8; --card-shadow:5px 5px 0 #2d0e4e; --card-shadow-hover:8px 8px 0 #ff5a3c; } [data-palette="stand-aurora"]{ --bg-primary:#1b0740; --bg-secondary:#250a52; --bg-tertiary:#3a0b6a; --border:#ffe14d; --border-active:#ff2bd0; --text-primary:#ffe9a8; --text-secondary:#d9c2ff; --text-muted:#b09ae0; --accent-red:#ff2bd0; --accent-cyan:#00e5ff; --accent-amber:#a2ff3a; --accent-violet:#ffa30a; --accent-green:#a2ff3a; --accent-gold:#ffa30a; --code-bg:#0d0322; --code-text:#ffe14d; --ink:#ffe14d; --paper:#1b0740; --card-shadow:5px 5px 0 #ff2bd0; --card-shadow-hover:8px 8px 0 #00e5ff; } [data-palette="ink-red"]{ --bg-primary:#f3eee4; --bg-secondary:#faf6ee; --bg-tertiary:#e8e0d0; --border:#0a0908; --border-active:#c4201c; --text-primary:#0a0908; --text-secondary:#3a322a; --text-muted:#6a5c49; --accent-red:#c4201c; --accent-cyan:#0093b0; --accent-amber:#d99b00; --accent-violet:#7a2e8a; --accent-green:#2f8f4f; --accent-gold:#a87431; --code-bg:#0a0908; --code-text:#f3eee4; --ink:#0a0908; --paper:#f3eee4; --card-shadow:5px 5px 0 #0a0908; --card-shadow-hover:8px 8px 0 #c4201c; } [data-palette="neon"]{ --bg-primary:#050010; --bg-secondary:#0c0625; --bg-tertiary:#140a35; --border:#ff2bd0; --border-active:#00ffd1; --text-primary:#ffe5ff; --text-secondary:#c9a8ff; --text-muted:#8868aa; --accent-red:#ff2bd0; --accent-cyan:#00ffd1; --accent-amber:#ffe14d; --accent-violet:#9b5cff; --accent-green:#39ff88; --accent-gold:#ffb84d; --code-bg:#0c0625; --code-text:#ffe5ff; --ink:#ff2bd0; --paper:#050010; --card-shadow:5px 5px 0 #ff2bd0; --card-shadow-hover:8px 8px 0 #00ffd1; } /* ---- BODY: cream paper + faint cel wash + grain ---- */ body{ font-family:var(--font-sans); font-weight:600; background-color:var(--bg-primary); background-image: radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--bg-tertiary) 55%, transparent), transparent 48%), radial-gradient(circle at 100% 22%, color-mix(in oklab, #b8e3ff 55%, transparent), transparent 52%), radial-gradient(circle at 25% 100%, color-mix(in oklab, var(--accent-amber) 22%, transparent), transparent 60%); background-attachment:fixed; } body::after{ /* subtle ink grain */ content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } /* ---- TYPE: Bungee headings, manga links ---- */ h1,h2,h3,h4,.title,.post-title,.section-title,.card-title{ font-family:var(--font-display)!important; letter-spacing:.01em; line-height:1.08; } h5,h6{ font-family:var(--font-mono)!important; text-transform:uppercase; letter-spacing:.14em; } a{ color:var(--accent-red); text-underline-offset:3px; text-decoration-thickness:2px; } a:hover{ color:var(--accent-violet); } strong,b{ color:var(--text-primary); } /* ---- SHARP MANGA EDGES everywhere ---- */ *{ border-radius:0 !important; } /* ---- HARD-SHADOW PANELS: cards, callouts, quotes, media ---- */ article, .card, .post-card, .panel, .semantic-panel, .main-event-card, blockquote, pre, figure, .note, .tip, .warning, .spec, .spoiler, table{ border:3px solid var(--ink); box-shadow:var(--card-shadow); } a.card:hover, .post-card:hover, .card:hover{ transform:translate(-3px,-3px); box-shadow:var(--card-shadow-hover); } /* quotes get a paper-2 fill + a magenta tab */ blockquote{ background:var(--bg-tertiary); position:relative; padding-left:1.2em; } /* code blocks: inked */ pre, code{ font-family:var(--font-mono); } pre{ background:var(--code-bg); color:var(--code-text); } :not(pre)>code{ background:var(--bg-tertiary); color:var(--ink); border:2px solid var(--ink); padding:1px 5px; box-shadow:2px 2px 0 var(--ink); } /* thick rules */ hr{ border:none; height:5px; background:var(--ink); box-shadow:none; } /* images in content read as inked panels */ .post-content img, .content img, article img{ border:3px solid var(--ink); box-shadow:var(--card-shadow); } /* buttons / tags / pills -> chunky comic */ button, .btn, .button, .tag, .pill, .badge{ font-family:var(--font-display); border:3px solid var(--ink)!important; box-shadow:3px 3px 0 var(--ink); text-transform:uppercase; letter-spacing:.04em; } button:hover, .btn:hover, .button:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--accent-red); } /* selection */ ::selection{ background:var(--accent-red); color:var(--paper); }