/* ============================================================ BOCCHI — тема «Хитори Гото / Боччи» (Bocchi the Rock!). Розовый трикотаж, паника и полумрак клуба STARRY. Дельта на :root=dark. Активируется data-theme="bocchi". Селектор html[data-theme=…] (специфичность 0,1,1) — надёжно перебивает тёмную базу :root. ============================================================ */ html[data-theme="bocchi"] { /* ── 1. БРЕНД — розовый цвет её любимой олимпийки ── */ --brand: #ff94b8; /* неоново-розовый / кофта Боччи */ --brand-700: #d66b8f; /* сгущающийся розовый (hover) */ --brand-300: #ffbcd3; /* нежный пастельный розовый (active) */ /* ── 2. ФОНЫ — тёмный шкаф и стены клуба STARRY ── */ --bg-page: #12131a; --bg-header: #0b0c10; --bg-form: #1c1d26; --bg-post-op: #242633; --bg-post-reply: #171921; --bg-input: #0f1014; --bg-tag: #2b2d3d; --bg-code: #08090d; --bg-sidebar: #0b0c10; --bg-admin-side: #0b0c10; --bg-admin-head: #1c1d26; --bg-meta: rgba(0, 0, 0, 0.30); /* ── 3. ТЕКСТ — контрасты её заколки-кубика ── */ --text-main: #f5eff2; /* мягкий белый с розовым отливом */ --text-dim: #888da8; --text-muted: #585d75; --text-header: #ffffff; --text-link: #5dcbe3; /* голубой кубик из заколки */ --text-link-hover: #92e0f0; --text-name: #f7cd43; /* жёлтый кубик / Kessoku Band */ --text-subject: var(--brand-300); --text-btn: #12131a; /* тёмный текст на розовых кнопках */ --text-green: #a3d16b; --text-num: #585d75; --text-relnum: #3f4357; /* ── 4. ГРАНИЦЫ ── */ --border-post: #2b2e3d; --border-form: #363a4d; --border-input: #363a4d; --border-sep: #1e202b; --border-op: var(--brand); /* ── 5. СКРУГЛЕНИЯ / МЕТРИКИ / ШРИФТ ── */ --radius: 8px; --radius-lg: 12px; --radius-sm: 5px; --radius-pill: 999px; --site-width: 1200px; --font-size: 14px; --line-height: 1.65; --font-family: "Segoe UI", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Consolas", "SF Mono", Menlo, monospace; /* ── 6. ТЕНИ / СКРИМЫ / СЛОИ ── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7); --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.6); --shadow-xl: 0 12px 44px rgba(0, 0, 0, 0.7); --shadow-color: rgba(0, 0, 0, 0.35); --ring-hairline: rgba(0, 0, 0, 0.15); --scrim: rgba(0, 0, 0, 0.5); --scrim-strong: rgba(0, 0, 0, 0.7); --on-media: #ffffff; --modal-overlay: rgba(11, 12, 16, 0.8); /* ── 7. SAGE (Боччи превращается в прах) ── */ --sage-color: #555866; --sage-bg: rgba(85, 88, 102, 0.2); /* ── 8. БЕЙДЖИ И АКЦЕНТЫ КОМПОНЕНТОВ ── */ --link: var(--text-link); --crimson-soft: #d6567f; --fav-star: #f7cd43; --fav-star-dim: #c4a029; --opmod-color: #5dcbe3; --opmod-bg: rgba(93, 203, 227, 0.1); --opmod-border: rgba(93, 203, 227, 0.25); --pc-badge-color: #8ca2ff; --pc-badge-bg: rgba(140, 162, 255, 0.1); --pc-badge-bg-hover:rgba(140, 162, 255, 0.2); --pc-badge-border: rgba(140, 162, 255, 0.25); --via-color: #b58cff; --via-bg: rgba(181, 140, 255, 0.1); --via-border: rgba(181, 140, 255, 0.25); --fb-accent: #e6a73c; --fb-accent-strong: #f5b74c; --fb-accent-bg: rgba(230, 167, 60, 0.1); --donate-accent: var(--brand-300); --donate-accent-strong: var(--brand); --donate-accent-bg: color-mix(in srgb, var(--brand) 12%, transparent); --donate-accent-border: color-mix(in srgb, var(--brand) 28%, transparent); --contacts-accent: var(--brand); /* ── 9. АЛЕРТЫ ── */ --alert-error-bg: color-mix(in srgb, var(--brand) 10%, transparent); --alert-error-border: color-mix(in srgb, var(--brand) 25%, transparent); --alert-error-color: var(--brand-300); --alert-success-bg: rgba(163, 209, 107, 0.08); --alert-success-border: rgba(163, 209, 107, 0.2); --alert-success-color: #b9e089; --alert-info-bg: rgba(93, 203, 227, 0.08); --alert-info-border: rgba(93, 203, 227, 0.2); --alert-info-color: #92e0f0; --alert-warning-bg: rgba(247, 205, 67, 0.06); --alert-warning-border: rgba(247, 205, 67, 0.18); --alert-warning-color: #fbe285; /* ── 10. КНОПКИ МОДЕРАЦИИ ── */ --mod-del-color: var(--brand-300); --mod-del-border: color-mix(in srgb, var(--brand) 30%, transparent); --mod-del-hover-bg: color-mix(in srgb, var(--brand) 12%, transparent); --mod-edit-color: #b9e089; --mod-edit-border: rgba(163, 209, 107, 0.3); --mod-edit-hover-bg:rgba(163, 209, 107, 0.1); --mod-ip-color: #92e0f0; --mod-ip-border: rgba(93, 203, 227, 0.3); --mod-ip-hover-bg: rgba(93, 203, 227, 0.1); --mod-pin-color: #b9e089; --mod-pin-border: rgba(163, 209, 107, 0.3); --mod-pin-hover-bg: rgba(163, 209, 107, 0.1); --mod-lock-color: #fbe285; --mod-lock-border: rgba(247, 205, 67, 0.3); --mod-lock-hover-bg:rgba(247, 205, 67, 0.1); --mod-more-color: var(--text-muted); --mod-more-border: var(--border-sep); --mod-more-hover-bg:var(--bg-tag); /* ── 11. ТЕГИ СОСТОЯНИЯ ТРЕДА ── */ --tag-pinned-bg: rgba(163, 209, 107, 0.08); --tag-pinned-color: #b9e089; --tag-pinned-border:rgba(163, 209, 107, 0.2); --tag-locked-bg: rgba(247, 205, 67, 0.08); --tag-locked-color: #fbe285; --tag-locked-border:rgba(247, 205, 67, 0.2); --tag-nsfw-bg: color-mix(in srgb, var(--brand) 10%, transparent); --tag-nsfw-color: var(--brand-300); --tag-nsfw-border: color-mix(in srgb, var(--brand) 25%, transparent); --tag-default-bg: var(--bg-tag); --tag-default-color:var(--brand-300); --tag-default-border: color-mix(in srgb, var(--brand) 20%, transparent); --op-badge-bg: rgba(93, 203, 227, 0.12); --op-badge-color: #5dcbe3; --op-badge-border: rgba(93, 203, 227, 0.25); /* ── 12. ШАПКА ── */ --hdr-link: rgba(245, 239, 242, 0.75); --hdr-link-hover: #ffffff; --hdr-btn-color: rgba(245, 239, 242, 0.7); --hdr-btn-hover: #ffffff; --hdr-btn-hover-bg: rgba(255, 255, 255, 0.08); --hdr-border: transparent; /* ── 13. ГАЛЕРЕЯ ── */ --gallery-media-bg: #08090d; /* ── 14. РАЗНОЕ ── */ --yt-red: #ff94b8; --knob: #ffffff; --mk-big: 1.45em; --mk-small: 0.8em; --hl-bg: #f7cd43; /* луч прожектора на сцене */ --hl-color: #12131a; --qr-paper: #f5eff2; --qr-ink: #1c1d26; --splash-bg: var(--bg-page); --splash-dot: var(--brand); --online-dot: #5a9e63; } html[data-theme="bocchi"] { color-scheme: dark; }