/* ========================================================================== THÈME D'ÉVÈNEMENT — YULSOL Yule — Solstice d’Hiver · Retour du Soleil Lũmavae, Jour 1 (21 déc) · fenêtre 12-18 → 12-24 (voir /includes/event_themes.php) Canon (Calendrier Valshaari) : couleur or et blanc (lũma), pierre cristal de roche. 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="yulsol"]{ --ac-bg:#e6dcc6;--ac-bg2:#d6c8aa;--ac-card:#f2ead8;--ac-text:#2b2110;--ac-muted:#6d5c3c; --ac-border:#c7b590;--ac-line:#b09a6e; --ac-accent1:#a8781c;--ac-accent2:#3c5a7a; --ac-success:#4a6b2a;--ac-warning:#a8600f;--ac-danger:#96301f; --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 12px rgba(80,58,16,.16);--ac-shadow:0 12px 30px rgba(80,58,16,.24); --ac-on-accent:#f8f1de; } html[data-theme="yulsol"] .ac-card,html[data-theme="yulsol"] .ac-auth-card{border-radius:14px} html[data-theme="yulsol"] .ac-header{border-bottom:2px solid;border-image:linear-gradient(90deg,var(--ac-accent1),#e8d59a 50%,var(--ac-accent1)) 1} html[data-theme="yulsol"] .ac-btn--primary{background:linear-gradient(135deg,#c9922c,#a8781c 55%,#7d5510);border-color:var(--ac-accent1);color:#fff6e0;box-shadow:0 3px 14px rgba(168,120,28,.32)} html[data-theme="yulsol"] .ac-btn--primary:hover{background:linear-gradient(135deg,#f0d08a,#c9922c 60%,#a8781c);color:#3a2708;box-shadow:0 6px 20px rgba(201,146,44,.4);transform:translateY(-1px)} html[data-theme="yulsol"] .ac-btn--ghost:hover,html[data-theme="yulsol"] .ac-nav__link:hover{background:rgba(168,120,28,.1)} html[data-theme="yulsol"] .hero-title{background:linear-gradient(100deg,#8a5f10,#e0bd60,#fff3d0,#8a5f10);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:yulsol-shimmer 8s linear infinite} @keyframes yulsol-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} /* Soleil qui remonte à l'horizon : lueur basse + rais qui tournent lentement */ html[data-theme="yulsol"] .hero-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 105%,rgba(255,214,120,.55),transparent 62%),radial-gradient(circle at 15% 12%,rgba(60,90,122,.16),transparent 45%)} html[data-theme="yulsol"] .hero-section::after{content:"";position:absolute;left:50%;bottom:-40%;width:130%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none;opacity:.35;background:conic-gradient(from 0deg,rgba(255,226,160,.5) 0 3deg,transparent 3deg 30deg,rgba(255,226,160,.4) 30deg 33deg,transparent 33deg 60deg,rgba(255,226,160,.5) 60deg 63deg,transparent 63deg 90deg);animation:yulsol-rays 90s linear infinite} @keyframes yulsol-rays{0%{transform:translateX(-50%) rotate(0)}100%{transform:translateX(-50%) rotate(360deg)}} /* Poussière de cristal de roche, très lente, presque immobile */ html[data-theme="yulsol"] body::after{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 14% 22%,rgba(255,255,255,.95) 0 1.5px,transparent 2.2px),radial-gradient(circle at 47% 64%,rgba(255,231,170,.9) 0 2px,transparent 3px),radial-gradient(circle at 76% 30%,rgba(255,255,255,.8) 0 1.4px,transparent 2px),radial-gradient(circle at 90% 82%,rgba(214,196,150,.85) 0 1.8px,transparent 2.6px);background-size:200px 200px,260px 260px,170px 170px,320px 320px;animation:yulsol-dust 26s linear infinite} @keyframes yulsol-dust{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(40px,-70px,0)}} html[data-theme="yulsol"],html[data-theme="yulsol"] *{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='%23a8781c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23f0d08a' stroke='%23fff6e0'/%3E%3C/g%3E%3C/svg%3E") 14 14,auto} html[data-theme="yulsol"] a,html[data-theme="yulsol"] button,html[data-theme="yulsol"] [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%3Cpath d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z' fill='%23f0d08a' stroke='%23a8781c' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 15 15,pointer} /* Le voile de particules est posé sur : le contenu passe au-dessus. */ html[data-theme="yulsol"] .ac-main, html[data-theme="yulsol"] .ac-footer { position: relative; z-index: 1; } html[data-theme="yulsol"] .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="yulsol"] { --ev-deep: #ded2b8; /* remplace #0e0b16 / #0a0a0a */ --ev-surface: #f2ead8; /* remplace #1e1632 (cartes) */ --ev-surface2: #e6dcc6; /* remplace #1a1428 */ --ev-surface3: #d6c8aa; /* remplace #241b38 */ --ev-border: #c7b590; /* remplace #3d2f5e */ --ev-acc: #a8781c; /* remplace #9b59b6 */ --ev-acc-l: #7d5510; /* remplace #b57cd9 */ --ev-ink: #2b2110; /* remplace #e8dff8 */ --ev-muted: #6d5c3c; /* remplace #9a87c0 */ --ev-dim: #8a7550; /* remplace #6b5d8a */ } /* ── 1. MagicTalk ─────────────────────────────────────────────────────────── */ html[data-theme="yulsol"], html[data-theme="yulsol"] .mt-app, html[data-theme="yulsol"] .magictalk-page { --mt-neon-cyan: #7d5510; --mt-neon-violet: #a8781c; --mt-neon-gold: var(--ac-warning); --mt-neon-rose: var(--ac-danger); --mt-glass: #f2ead8; --mt-glass-border: rgba(168,120,28, .28); --mt-glow-violet: 0 0 18px rgba(168,120,28, .30); --mt-glow-cyan: 0 0 18px rgba(168,120,28, .22); --mt-glow-gold: 0 0 12px rgba(168,120,28, .28); } html[data-theme="yulsol"] .mt-post, html[data-theme="yulsol"] .mt-composer, html[data-theme="yulsol"] .mt-side-card, html[data-theme="yulsol"] .mt-suggest-card, html[data-theme="yulsol"] .mt-nav, html[data-theme="yulsol"] .mt-nav-card, html[data-theme="yulsol"] .mt-panthéon, html[data-theme="yulsol"] .mt-modal__content, html[data-theme="yulsol"] .mt-search-form__input { background: var(--ev-surface); border-color: rgba(168,120,28, .28); color: var(--ev-ink); } html[data-theme="yulsol"] .mt-post__divider, html[data-theme="yulsol"] .mt-post__actions, html[data-theme="yulsol"] .mt-composer__divider, html[data-theme="yulsol"] .mt-post__comments { border-color: rgba(168,120,28, .22); } html[data-theme="yulsol"] .mt-post__content, html[data-theme="yulsol"] .mt-composer__textarea, html[data-theme="yulsol"] .mt-side-user__name, html[data-theme="yulsol"] .mt-search-form__input { color: var(--ev-ink); } html[data-theme="yulsol"] .mt-post__time, html[data-theme="yulsol"] .mt-post__handle, html[data-theme="yulsol"] .mt-side-user__followers, html[data-theme="yulsol"] .mt-composer__counter { color: var(--ev-muted); } html[data-theme="yulsol"] .mt-nav__link { color: var(--ev-muted); } html[data-theme="yulsol"] .mt-nav__link.active, html[data-theme="yulsol"] .mt-nav__link:hover, html[data-theme="yulsol"] .mt-nav-link.is-active, html[data-theme="yulsol"] .mt-nav-link:hover { background: rgba(168,120,28, .12); color: var(--ev-acc); } html[data-theme="yulsol"] .mt-side-card__title { color: var(--ev-acc); } html[data-theme="yulsol"] .mt-composer__input, html[data-theme="yulsol"] .mt-comment-form input, html[data-theme="yulsol"] .mt-comment { background: var(--ev-surface2); color: var(--ev-ink); } html[data-theme="yulsol"] .mt-composer__input::placeholder, html[data-theme="yulsol"] .mt-comment-form input::placeholder { color: var(--ev-muted); } html[data-theme="yulsol"] .mt-composer__submit, html[data-theme="yulsol"] .mt-comment-form button, html[data-theme="yulsol"] .mt-btn--violet { background: linear-gradient(135deg,#c9922c,#a8781c 55%,#7d5510); color: #fff6e0; border-radius: 14px; } html[data-theme="yulsol"] .mt-btn, html[data-theme="yulsol"] .mt-follow-btn, html[data-theme="yulsol"] .mt-action-btn { border-radius: 14px; } html[data-theme="yulsol"] .mt-action-btn { color: var(--ev-muted); } html[data-theme="yulsol"] .mt-action-btn:hover { background: rgba(168,120,28, .10); color: var(--ev-acc); } /* Overlays : on garde un voile sombre pour la lisibilité des photos */ html[data-theme="yulsol"] .mt-story-viewer, html[data-theme="yulsol"] .mt-modal { background: rgba(10, 6, 10, .86); } html[data-theme="yulsol"] .mt-modal__nav { background: rgba(168,120,28, .35); } html[data-theme="yulsol"] .mt-modal__nav:hover { background: rgba(168,120,28, .6); } html[data-theme="yulsol"] .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="yulsol"] .ss-p-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 14px; } html[data-theme="yulsol"] .ss-p-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(168,120,28, .22); } html[data-theme="yulsol"] .ss-p-card__img { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(168,120,28, .14), transparent 60%); } html[data-theme="yulsol"] .ss-p-card__img::after { color: var(--ev-dim); } html[data-theme="yulsol"] .ss-p-card__body { background: linear-gradient(to top, var(--ev-surface) 0%, var(--ev-surface) 62%, transparent); } html[data-theme="yulsol"] .ss-p-card__cat { color: var(--ev-acc-l); } html[data-theme="yulsol"] .ss-p-card__nom { color: var(--ev-ink); } html[data-theme="yulsol"] .ss-p-card__sub { color: var(--ev-muted); } html[data-theme="yulsol"] .ss-cat-btn { border-radius: 14px; } html[data-theme="yulsol"] .ss-cat-btn:hover { border-color: var(--ev-acc); } html[data-theme="yulsol"] .ss-cat-btn.is-active { background: linear-gradient(135deg,#c9922c,#a8781c 55%,#7d5510); border-color: transparent; color: #fff6e0; } html[data-theme="yulsol"] .ss-nav-card { border-radius: 14px; } html[data-theme="yulsol"] .ss-nav-card:hover { border-color: var(--ev-acc); } html[data-theme="yulsol"] .ss-nav-card__full-badge { color: var(--ev-acc); background: rgba(168,120,28, .12); border-color: rgba(168,120,28, .3); } html[data-theme="yulsol"] .ss-hero { background: linear-gradient(to bottom, rgba(168,120,28, .12), transparent); border-bottom-color: rgba(168,120,28, .2); } html[data-theme="yulsol"] .ss-hero p, html[data-theme="yulsol"] .ss-back-link { color: var(--ev-muted); } html[data-theme="yulsol"] .ss-back-link { border-radius: 14px; } html[data-theme="yulsol"] .ss-back-link:hover { background: rgba(168,120,28, .10); border-color: var(--ev-acc); color: var(--ev-acc); } html[data-theme="yulsol"] .ss-dialog { border-radius: 14px; } html[data-theme="yulsol"] .ss-dialog::backdrop { background: rgba(168,120,28, .3); } html[data-theme="yulsol"] .ss-dialog-header { background: linear-gradient(135deg, var(--ac-card), rgba(168,120,28, .12)); } html[data-theme="yulsol"] .ss-dialog-body h3, html[data-theme="yulsol"] .ss-dialog-body blockquote { color: var(--ev-acc-l); } html[data-theme="yulsol"] .ss-dialog-body { scrollbar-color: var(--ev-acc) transparent; } html[data-theme="yulsol"] .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="yulsol"] .ss-month-card, html[data-theme="yulsol"] .ss-season-card, html[data-theme="yulsol"] .ss-fete-card, html[data-theme="yulsol"] .ss-converter { border-radius: 14px; border-color: var(--ev-border); } html[data-theme="yulsol"] .ss-converter-result { background: var(--ev-deep); border-color: var(--ev-border); color: var(--ev-ink); } html[data-theme="yulsol"] .ss-month-card__pron, html[data-theme="yulsol"] .ss-fete-pos { color: var(--ev-muted); } html[data-theme="yulsol"] .ss-conv-zodiac { border-top-color: var(--ev-border); } html[data-theme="yulsol"] .ss-fete-header:hover { background: rgba(168,120,28, .08); } html[data-theme="yulsol"] .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="yulsol"] .ss-fete-card[data-fete="yulsol"] { border-color: var(--ev-acc); box-shadow: 0 0 0 1px rgba(168,120,28, .35), 0 10px 28px rgba(168,120,28, .22); } /* ── 4. Sang-Satō — manuscrits (.ms-*) ───────────────────────────────────── */ html[data-theme="yulsol"] .ms-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 14px; } html[data-theme="yulsol"] .ms-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(168,120,28, .22); } html[data-theme="yulsol"] .ms-cover { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(168,120,28, .2), transparent 60%); } html[data-theme="yulsol"] .ms-serie { color: var(--ev-acc-l); } html[data-theme="yulsol"] .ms-titre { color: var(--ev-ink); } html[data-theme="yulsol"] .ms-sous-titre, html[data-theme="yulsol"] .ms-synopsis { color: var(--ev-muted); } html[data-theme="yulsol"] .ms-progress-label, html[data-theme="yulsol"] .ms-meta { color: var(--ev-dim); } html[data-theme="yulsol"] .ms-progress-bar { background: var(--ev-deep); border-color: var(--ev-border); } html[data-theme="yulsol"] .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="yulsol"] { --at-bg: var(--ac-bg); --at-bg2: var(--ac-bg2); --at-bg3: #d6c8aa; --at-card: #f2ead8; --at-border: #c7b590; --at-purple: #a8781c; --at-purple-lt: #7d5510; --at-gold: var(--ac-accent2); --at-gold-lt: var(--ac-warning); --at-text: #2b2110; --at-text-muted: #6d5c3c; --at-text-dim: #8a7550; --at-shadow: 0 4px 24px rgba(168,120,28, .2); --at-glow: 0 0 20px rgba(168,120,28, .22); } /* ── 6. Boutique, admin, arcade — texte sur fond accentué ─────────────────── */ html[data-theme="yulsol"] .shop-price-tag, html[data-theme="yulsol"] .adm-btn-gold, html[data-theme="yulsol"] .adm-filter-btn.active, html[data-theme="yulsol"] .adm-page-link.active { color: var(--ac-on-accent); } html[data-theme="yulsol"] .shop-card, html[data-theme="yulsol"] .adm-card { border-radius: 14px; } /* 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="yulsol"] .hero-title, html[data-theme="yulsol"] .hero-section::before, html[data-theme="yulsol"] .hero-section::after, html[data-theme="yulsol"] body::after, html[data-theme="yulsol"] .ms-live-dot::before { animation: none !important; } }