/* ========================================================================== THÈME D'ÉVÈNEMENT — MABOSOL Mabon — Éq. d’Automne · Équilibre lumière-ombre Mabovae, Jour 23 (~21 sept) · fenêtre 09-18 → 09-24 (voir /includes/event_themes.php) Canon (Calendrier Valshaari) : couleur rouge bordeaux et or, pierre obsidienne. Fichier autonome : tokens + habillage global + surcharges de toutes les pages internes. Activé par . À charger APRÈS style.css, header.css, magictalk.css, sangsato.css, atelier.css et shop.css (donc en dernier des feuilles de page). ========================================================================== */ html[data-theme="mabosol"]{ --ac-bg:#1c0b11;--ac-bg2:#2b1019;--ac-card:#36151f;--ac-text:#eddcd6;--ac-muted:#b48a8e; --ac-border:#54202d;--ac-line:#6d2a3a; --ac-accent1:#a02440;--ac-accent2:#c8912f; --ac-success:#3f9d5a;--ac-warning:#c8912f;--ac-danger:#e0523f; --ac-font-h1:'Fondamento',cursive;--ac-font-h2:'Cinzel Decorative',serif;--ac-font-h3:'Grenze Gotisch',cursive;--ac-font-body:'Merriweather',serif; --ac-shadow-sm:0 2px 14px rgba(160,36,64,.24);--ac-shadow:0 12px 32px rgba(160,36,64,.3); --ac-on-accent:#fdf3e6; } html[data-theme="mabosol"] .ac-card{border-radius:8px} html[data-theme="mabosol"] .ac-header{border-bottom:2px solid;border-image:linear-gradient(90deg,var(--ac-accent2),var(--ac-accent1) 50%,#120609) 1} html[data-theme="mabosol"] .ac-btn--primary{background:linear-gradient(135deg,#c8912f,#a02440 55%,#3d0d18);border-color:var(--ac-accent1);color:#fdf3e6;box-shadow:0 3px 14px rgba(160,36,64,.35)} html[data-theme="mabosol"] .ac-btn--primary:hover{background:linear-gradient(135deg,#3d0d18,#a02440 45%,#e3b45c);color:#fdf3e6;box-shadow:0 6px 22px rgba(200,145,47,.35);transform:translateY(-1px)} html[data-theme="mabosol"] .ac-btn--ghost:hover,html[data-theme="mabosol"] .ac-nav__link:hover{background:rgba(160,36,64,.14)} html[data-theme="mabosol"] .hero-title{background:linear-gradient(100deg,#7d1830,#c8912f,#f0dcae,#7d1830);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mabosol-shimmer 9s linear infinite} @keyframes mabosol-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} /* Les deux chemins : l'or à gauche, le noir d'obsidienne à droite, en bascule */ html[data-theme="mabosol"] .hero-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(200,145,47,.22),transparent 48%,rgba(10,4,6,.5)),radial-gradient(circle at 50% 50%,rgba(160,36,64,.16),transparent 55%);animation:mabosol-balance 14s ease-in-out infinite} @keyframes mabosol-balance{0%,100%{opacity:.75}50%{opacity:1}} /* Feuilles d'or qui tombent du côté clair vers le côté sombre */ html[data-theme="mabosol"] body::after{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.45;background-image:radial-gradient(ellipse 2.6px 1.4px at 24% 12%,rgba(224,182,96,.95),transparent),radial-gradient(ellipse 3px 1.6px at 58% 44%,rgba(160,36,64,.9),transparent),radial-gradient(ellipse 2.2px 1.2px at 80% 18%,rgba(240,220,174,.85),transparent),radial-gradient(ellipse 2.8px 1.5px at 40% 76%,rgba(200,145,47,.9),transparent);background-size:210px 250px,250px 290px,190px 240px,300px 320px;animation:mabosol-fall 19s linear infinite} @keyframes mabosol-fall{0%{transform:translate3d(-60px,-160px,0)}100%{transform:translate3d(80px,300px,0)}} html[data-theme="mabosol"],html[data-theme="mabosol"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cg stroke='%23c8912f' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3v16M5 8h14M5 8l-3 6h6zM19 8l-3 6h6z' fill='none'/%3E%3Cpath d='M8 20h8'/%3E%3C/g%3E%3C/svg%3E") 12 3,auto} html[data-theme="mabosol"] a,html[data-theme="mabosol"] button,html[data-theme="mabosol"] [role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23120609' stroke='%23c8912f' stroke-width='1.4'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23c8912f'/%3E%3C/svg%3E") 15 15,pointer} /* Le voile de particules est posé sur : le contenu passe au-dessus. */ html[data-theme="mabosol"] .ac-main, html[data-theme="mabosol"] .ac-footer { position: relative; z-index: 1; } html[data-theme="mabosol"] .ac-header { position: sticky; z-index: 200; } /* ========================================================================== SURCHARGES DES PAGES INTERNES MagicTalk, Sang-Satō (personnages, bestiaire, lieux, manuscrits, calendrier), Atelier, Boutique, Admin. Ces fichiers codent leurs couleurs en dur (#1e1632, #9b59b6, --mt-glass…) : le thème ne les atteint pas sans remap. ========================================================================== */ html[data-theme="mabosol"] { --ev-deep: #14070c; /* remplace #0e0b16 / #0a0a0a */ --ev-surface: #36151f; /* remplace #1e1632 (cartes) */ --ev-surface2: #2b1019; /* remplace #1a1428 */ --ev-surface3: #401a26; /* remplace #241b38 */ --ev-border: #54202d; /* remplace #3d2f5e */ --ev-acc: #a02440; /* remplace #9b59b6 */ --ev-acc-l: #c8912f; /* remplace #b57cd9 */ --ev-ink: #eddcd6; /* remplace #e8dff8 */ --ev-muted: #b48a8e; /* remplace #9a87c0 */ --ev-dim: #96706f; /* remplace #6b5d8a */ } /* ── 1. MagicTalk ─────────────────────────────────────────────────────────── */ html[data-theme="mabosol"], html[data-theme="mabosol"] .mt-app, html[data-theme="mabosol"] .magictalk-page { --mt-neon-cyan: #c8912f; --mt-neon-violet: #a02440; --mt-neon-gold: var(--ac-warning); --mt-neon-rose: var(--ac-danger); --mt-glass: #36151f; --mt-glass-border: rgba(160,36,64, .28); --mt-glow-violet: 0 0 18px rgba(160,36,64, .30); --mt-glow-cyan: 0 0 18px rgba(160,36,64, .22); --mt-glow-gold: 0 0 12px rgba(160,36,64, .28); } html[data-theme="mabosol"] .mt-post, html[data-theme="mabosol"] .mt-composer, html[data-theme="mabosol"] .mt-side-card, html[data-theme="mabosol"] .mt-suggest-card, html[data-theme="mabosol"] .mt-nav, html[data-theme="mabosol"] .mt-nav-card, html[data-theme="mabosol"] .mt-panthéon, html[data-theme="mabosol"] .mt-modal__content, html[data-theme="mabosol"] .mt-search-form__input { background: var(--ev-surface); border-color: rgba(160,36,64, .28); color: var(--ev-ink); } html[data-theme="mabosol"] .mt-post__divider, html[data-theme="mabosol"] .mt-post__actions, html[data-theme="mabosol"] .mt-composer__divider, html[data-theme="mabosol"] .mt-post__comments { border-color: rgba(160,36,64, .22); } html[data-theme="mabosol"] .mt-post__content, html[data-theme="mabosol"] .mt-composer__textarea, html[data-theme="mabosol"] .mt-side-user__name, html[data-theme="mabosol"] .mt-search-form__input { color: var(--ev-ink); } html[data-theme="mabosol"] .mt-post__time, html[data-theme="mabosol"] .mt-post__handle, html[data-theme="mabosol"] .mt-side-user__followers, html[data-theme="mabosol"] .mt-composer__counter { color: var(--ev-muted); } html[data-theme="mabosol"] .mt-nav__link { color: var(--ev-muted); } html[data-theme="mabosol"] .mt-nav__link.active, html[data-theme="mabosol"] .mt-nav__link:hover, html[data-theme="mabosol"] .mt-nav-link.is-active, html[data-theme="mabosol"] .mt-nav-link:hover { background: rgba(160,36,64, .12); color: var(--ev-acc); } html[data-theme="mabosol"] .mt-side-card__title { color: var(--ev-acc); } html[data-theme="mabosol"] .mt-composer__input, html[data-theme="mabosol"] .mt-comment-form input, html[data-theme="mabosol"] .mt-comment { background: var(--ev-surface2); color: var(--ev-ink); } html[data-theme="mabosol"] .mt-composer__input::placeholder, html[data-theme="mabosol"] .mt-comment-form input::placeholder { color: var(--ev-muted); } html[data-theme="mabosol"] .mt-composer__submit, html[data-theme="mabosol"] .mt-comment-form button, html[data-theme="mabosol"] .mt-btn--violet { background: linear-gradient(135deg,#c8912f,#a02440 55%,#3d0d18); color: #fdf3e6; border-radius: 8px; } html[data-theme="mabosol"] .mt-btn, html[data-theme="mabosol"] .mt-follow-btn, html[data-theme="mabosol"] .mt-action-btn { border-radius: 8px; } html[data-theme="mabosol"] .mt-action-btn { color: var(--ev-muted); } html[data-theme="mabosol"] .mt-action-btn:hover { background: rgba(160,36,64, .10); color: var(--ev-acc); } /* Overlays : on garde un voile sombre pour la lisibilité des photos */ html[data-theme="mabosol"] .mt-story-viewer, html[data-theme="mabosol"] .mt-modal { background: rgba(10, 6, 10, .86); } html[data-theme="mabosol"] .mt-modal__nav { background: rgba(160,36,64, .35); } html[data-theme="mabosol"] .mt-modal__nav:hover { background: rgba(160,36,64, .6); } html[data-theme="mabosol"] .mt-skeleton { background: linear-gradient(90deg, var(--ev-surface2) 25%, var(--ev-surface) 50%, var(--ev-surface2) 75%); background-size: 200% 100%; } /* ── 2. Sang-Satō — fiches, filtres, héros, modales ───────────────────────── */ html[data-theme="mabosol"] .ss-p-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 8px; } html[data-theme="mabosol"] .ss-p-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(160,36,64, .22); } html[data-theme="mabosol"] .ss-p-card__img { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(160,36,64, .14), transparent 60%); } html[data-theme="mabosol"] .ss-p-card__img::after { color: var(--ev-dim); } html[data-theme="mabosol"] .ss-p-card__body { background: linear-gradient(to top, var(--ev-surface) 0%, var(--ev-surface) 62%, transparent); } html[data-theme="mabosol"] .ss-p-card__cat { color: var(--ev-acc-l); } html[data-theme="mabosol"] .ss-p-card__nom { color: var(--ev-ink); } html[data-theme="mabosol"] .ss-p-card__sub { color: var(--ev-muted); } html[data-theme="mabosol"] .ss-cat-btn { border-radius: 8px; } html[data-theme="mabosol"] .ss-cat-btn:hover { border-color: var(--ev-acc); } html[data-theme="mabosol"] .ss-cat-btn.is-active { background: linear-gradient(135deg,#c8912f,#a02440 55%,#3d0d18); border-color: transparent; color: #fdf3e6; } html[data-theme="mabosol"] .ss-nav-card { border-radius: 8px; } html[data-theme="mabosol"] .ss-nav-card:hover { border-color: var(--ev-acc); } html[data-theme="mabosol"] .ss-nav-card__full-badge { color: var(--ev-acc); background: rgba(160,36,64, .12); border-color: rgba(160,36,64, .3); } html[data-theme="mabosol"] .ss-hero { background: linear-gradient(to bottom, rgba(160,36,64, .12), transparent); border-bottom-color: rgba(160,36,64, .2); } html[data-theme="mabosol"] .ss-hero p, html[data-theme="mabosol"] .ss-back-link { color: var(--ev-muted); } html[data-theme="mabosol"] .ss-back-link { border-radius: 8px; } html[data-theme="mabosol"] .ss-back-link:hover { background: rgba(160,36,64, .10); border-color: var(--ev-acc); color: var(--ev-acc); } html[data-theme="mabosol"] .ss-dialog { border-radius: 8px; } html[data-theme="mabosol"] .ss-dialog::backdrop { background: rgba(160,36,64, .3); } html[data-theme="mabosol"] .ss-dialog-header { background: linear-gradient(135deg, var(--ac-card), rgba(160,36,64, .12)); } html[data-theme="mabosol"] .ss-dialog-body h3, html[data-theme="mabosol"] .ss-dialog-body blockquote { color: var(--ev-acc-l); } html[data-theme="mabosol"] .ss-dialog-body { scrollbar-color: var(--ev-acc) transparent; } html[data-theme="mabosol"] .ss-dialog-body::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--ev-acc), var(--ev-acc-l)); background-clip: padding-box; } /* ── 3. Sang-Satō — calendrier (la page de la fête elle-même) ─────────────── */ html[data-theme="mabosol"] .ss-month-card, html[data-theme="mabosol"] .ss-season-card, html[data-theme="mabosol"] .ss-fete-card, html[data-theme="mabosol"] .ss-converter { border-radius: 8px; border-color: var(--ev-border); } html[data-theme="mabosol"] .ss-converter-result { background: var(--ev-deep); border-color: var(--ev-border); color: var(--ev-ink); } html[data-theme="mabosol"] .ss-month-card__pron, html[data-theme="mabosol"] .ss-fete-pos { color: var(--ev-muted); } html[data-theme="mabosol"] .ss-conv-zodiac { border-top-color: var(--ev-border); } html[data-theme="mabosol"] .ss-fete-header:hover { background: rgba(160,36,64, .08); } html[data-theme="mabosol"] .ss-fete-body blockquote { border-left-color: var(--ev-acc); color: var(--ev-acc-l); } /* La fête en cours se distingue des sept autres dans la liste */ html[data-theme="mabosol"] .ss-fete-card[data-fete="mabosol"] { border-color: var(--ev-acc); box-shadow: 0 0 0 1px rgba(160,36,64, .35), 0 10px 28px rgba(160,36,64, .22); } /* ── 4. Sang-Satō — manuscrits (.ms-*) ───────────────────────────────────── */ html[data-theme="mabosol"] .ms-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 8px; } html[data-theme="mabosol"] .ms-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(160,36,64, .22); } html[data-theme="mabosol"] .ms-cover { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(160,36,64, .2), transparent 60%); } html[data-theme="mabosol"] .ms-serie { color: var(--ev-acc-l); } html[data-theme="mabosol"] .ms-titre { color: var(--ev-ink); } html[data-theme="mabosol"] .ms-sous-titre, html[data-theme="mabosol"] .ms-synopsis { color: var(--ev-muted); } html[data-theme="mabosol"] .ms-progress-label, html[data-theme="mabosol"] .ms-meta { color: var(--ev-dim); } html[data-theme="mabosol"] .ms-progress-bar { background: var(--ev-deep); border-color: var(--ev-border); } html[data-theme="mabosol"] .ms-progress-fill { background: linear-gradient(90deg, var(--ev-acc-l), var(--ev-acc)); } /* ── 5. Atelier (privé, mais autant qu'il suive) ──────────────────────────── */ html[data-theme="mabosol"] { --at-bg: var(--ac-bg); --at-bg2: var(--ac-bg2); --at-bg3: #401a26; --at-card: #36151f; --at-border: #54202d; --at-purple: #a02440; --at-purple-lt: #c8912f; --at-gold: var(--ac-accent2); --at-gold-lt: var(--ac-warning); --at-text: #eddcd6; --at-text-muted: #b48a8e; --at-text-dim: #96706f; --at-shadow: 0 4px 24px rgba(160,36,64, .2); --at-glow: 0 0 20px rgba(160,36,64, .22); } /* ── 6. Boutique, admin, arcade — texte sur fond accentué ─────────────────── */ html[data-theme="mabosol"] .shop-price-tag, html[data-theme="mabosol"] .adm-btn-gold, html[data-theme="mabosol"] .adm-filter-btn.active, html[data-theme="mabosol"] .adm-page-link.active { color: var(--ac-on-accent); } html[data-theme="mabosol"] .shop-card, html[data-theme="mabosol"] .adm-card { border-radius: 8px; } /* Le Marché Noir garde son ambiance rouge/noire : zone « interdite », le contraste fait partie du décor. */ @media (prefers-reduced-motion: reduce) { html[data-theme="mabosol"] .hero-title, html[data-theme="mabosol"] .hero-section::before, html[data-theme="mabosol"] .hero-section::after, html[data-theme="mabosol"] body::after, html[data-theme="mabosol"] .ms-live-dot::before { animation: none !important; } }