/* ATLAS Theme — Dark mode tokens Activated by [data-theme="dark"] on . */ :root[data-theme="dark"] { --atlas-bg: #0d0c09; --atlas-bg-elev: #14120e; --atlas-bg-soft: #1a1813; --atlas-bg-tint: #221d14; --atlas-ink: #f6f1e3; --atlas-ink-2: #d8d2c0; --atlas-ink-3: #b1aa97; --atlas-muted: #847d6b; --atlas-line: #2a251c; --atlas-line-2: #3a3326; --atlas-accent-fg: #1a0d04; --atlas-gold: #e0b558; --atlas-teal: #5eead4; --atlas-plum: #c084fc; --atlas-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 32px -16px rgba(0,0,0,.5); --atlas-shadow-hover: 0 1px 2px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.6); --atlas-shadow-press: 0 1px 0 rgba(0,0,0,.3); /* Classic Refined header zones — dark equivalents */ --atlas-cyan: #5eead4; --atlas-topbar-bg: linear-gradient(180deg, #14120e, #100f0b); --atlas-topbar-border: rgba(94,234,212,.18); --atlas-topbar-ink: #9db8b0; --atlas-menubar-bg: rgba(13,12,9,.82); --atlas-journal-bg: #1a1813; --atlas-journal-border: #2a251c; --atlas-journal-meta: #9a8f78; } :root[data-theme="dark"] .atlas-art-thumb .atlas-badge { background: rgba(20,18,14,.92); color: var(--atlas-ink); } :root[data-theme="dark"] .atlas-cta { background: linear-gradient(135deg, #14120e 0%, #1f1c14 100%); color: #f6f1e3; } :root[data-theme="dark"] body.atlas-body .pkp_structure_main a { color: var(--atlas-accent); } /* OJS form fields polish in dark mode */ :root[data-theme="dark"] body.atlas-body input[type="text"], :root[data-theme="dark"] body.atlas-body input[type="email"], :root[data-theme="dark"] body.atlas-body input[type="password"], :root[data-theme="dark"] body.atlas-body input[type="search"], :root[data-theme="dark"] body.atlas-body select, :root[data-theme="dark"] body.atlas-body textarea { background: var(--atlas-bg-soft); color: var(--atlas-ink); border-color: var(--atlas-line-2); } /* ============================================================================ Editorial Board plugin (editorialBoard / .ebm-atlas) — dark mode. The plugin re-declares the --atlas-* design tokens on its own .ebm-atlas container with hard-coded LIGHT values, so custom-property inheritance keeps everything inside it light even when the theme is in dark mode (white cards). We re-declare those same tokens on the container with the theme's dark palette — higher specificity (:root[data-theme=dark] .ebm-atlas) wins, and every card/name/border inside then follows dark mode. ============================================================================ */ :root[data-theme="dark"] .ebm-atlas { --atlas-ink: #f6f1e3; --atlas-ink-2: #d8d2c0; --atlas-ink-3: #b1aa97; --atlas-muted: #847d6b; --atlas-line: #2a251c; --atlas-line-2: #3a3326; --atlas-bg-elev: #14120e; --atlas-bg-soft: #1a1813; --atlas-shadow: 0 6px 18px -8px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.4); } /* Bio modal is rendered outside .ebm-atlas and hard-codes #fff, so it needs its own explicit dark treatment. These elements live under , so the theme's :root dark tokens are available here. */ :root[data-theme="dark"] .ebm-bio-modal-card { background: var(--atlas-bg-elev); border: 1px solid var(--atlas-line); color: var(--atlas-ink-2); } :root[data-theme="dark"] .ebm-bio-modal-name { color: var(--atlas-ink); } :root[data-theme="dark"] .ebm-bio-modal-text { color: var(--atlas-ink-2); } :root[data-theme="dark"] .ebm-bio-modal-eyebrow { color: var(--atlas-muted); } :root[data-theme="dark"] .ebm-bio-modal-close { color: var(--atlas-ink-3); } :root[data-theme="dark"] .ebm-bio-modal-close:hover { background: rgba(255,255,255,.06); color: var(--atlas-ink); } /* Index logos are often dark-ink artwork on a transparent background, which would vanish on the dark strip. Sit them on a light chip so any logo stays legible in dark mode. */ :root[data-theme="dark"] .atlas-idx-logo { background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 3px 7px; }