/* ========================================================================== THÈME D'ÉVÈNEMENT — OSTAVAE Ostara — Éq. de Printemps · Terre qui s’éveille Terravae, Jour 7 (~21 mars) · fenêtre 03-18 → 03-24 (voir /includes/event_themes.php) Canon (Calendrier Valshaari) : couleur vert et or, pierre aventurine. 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="ostavae"]{ --ac-bg:#dde7cd;--ac-bg2:#cbd9b6;--ac-card:#eef4e2;--ac-text:#1e2c12;--ac-muted:#586b42; --ac-border:#b3c69a;--ac-line:#95ac78; --ac-accent1:#4a7a20;--ac-accent2:#a8781c; --ac-success:#3d7a2a;--ac-warning:#a8600f;--ac-danger:#8f3320; --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(40,60,20,.14);--ac-shadow:0 12px 30px rgba(40,60,20,.22); --ac-on-accent:#f4f8ea; } html[data-theme="ostavae"] .ac-card{border-radius:20px 20px 20px 4px} html[data-theme="ostavae"] .ac-header{border-bottom:2px solid;border-image:linear-gradient(90deg,var(--ac-accent1),var(--ac-accent2) 55%,var(--ac-accent1)) 1} html[data-theme="ostavae"] .ac-btn--primary{background:linear-gradient(135deg,#66a02c,#4a7a20 60%,#345714);border-color:var(--ac-accent1);color:#f4f8ea;box-shadow:0 3px 14px rgba(74,122,32,.3)} html[data-theme="ostavae"] .ac-btn--primary:hover{background:linear-gradient(135deg,#e0c471,#8fb64a 55%,#4a7a20);color:#22300f;box-shadow:0 6px 20px rgba(143,182,74,.42);transform:translateY(-1px)} html[data-theme="ostavae"] .ac-btn--ghost:hover,html[data-theme="ostavae"] .ac-nav__link:hover{background:rgba(74,122,32,.1)} html[data-theme="ostavae"] .hero-title{background:linear-gradient(100deg,#3a6417,#8fb64a,#dcc06a,#3a6417);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ostavae-shimmer 8s linear infinite} @keyframes ostavae-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} html[data-theme="ostavae"] .hero-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 55% at 50% 100%,rgba(74,122,32,.3),transparent 62%),radial-gradient(circle at 80% 15%,rgba(224,196,113,.32),transparent 48%)} /* Pollen et graines qui montent de la terre réveillée */ html[data-theme="ostavae"] body::after{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 16% 88%,rgba(255,248,200,.9) 0 1.7px,transparent 2.5px),radial-gradient(circle at 44% 94%,rgba(143,182,74,.85) 0 2.1px,transparent 3px),radial-gradient(circle at 70% 86%,rgba(224,196,113,.9) 0 1.6px,transparent 2.4px),radial-gradient(circle at 92% 92%,rgba(255,255,255,.7) 0 1.9px,transparent 2.8px);background-size:190px 240px,240px 280px,210px 260px,300px 320px;animation:ostavae-rise 20s linear infinite} @keyframes ostavae-rise{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(50px,-380px,0)}} html[data-theme="ostavae"],html[data-theme="ostavae"] *{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 fill='none' stroke='%234a7a20' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 21c0-8 5-13 15-15-1 10-6 15-15 15z' fill='%238fb64a'/%3E%3Cpath d='M4 21C8 15 12 12 17 9'/%3E%3C/g%3E%3C/svg%3E") 4 21,auto} html[data-theme="ostavae"] a,html[data-theme="ostavae"] button,html[data-theme="ostavae"] [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%3Cg fill='none' stroke='%23a8781c' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 22V9'/%3E%3Cpath d='M12 12C8 12 6 9 6 5c4 0 6 3 6 7z' fill='%238fb64a'/%3E%3Cpath d='M12 14c4 0 6-3 6-7-4 0-6 3-6 7z' fill='%23dcc06a'/%3E%3C/g%3E%3C/svg%3E") 12 22,pointer} /* Le voile de particules est posé sur : le contenu passe au-dessus. */ html[data-theme="ostavae"] .ac-main, html[data-theme="ostavae"] .ac-footer { position: relative; z-index: 1; } html[data-theme="ostavae"] .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="ostavae"] { --ev-deep: #d4e0c2; /* remplace #0e0b16 / #0a0a0a */ --ev-surface: #eef4e2; /* remplace #1e1632 (cartes) */ --ev-surface2: #dde7cd; /* remplace #1a1428 */ --ev-surface3: #cbd9b6; /* remplace #241b38 */ --ev-border: #b3c69a; /* remplace #3d2f5e */ --ev-acc: #4a7a20; /* remplace #9b59b6 */ --ev-acc-l: #a8781c; /* remplace #b57cd9 */ --ev-ink: #1e2c12; /* remplace #e8dff8 */ --ev-muted: #586b42; /* remplace #9a87c0 */ --ev-dim: #77875e; /* remplace #6b5d8a */ } /* ── 1. MagicTalk ─────────────────────────────────────────────────────────── */ html[data-theme="ostavae"], html[data-theme="ostavae"] .mt-app, html[data-theme="ostavae"] .magictalk-page { --mt-neon-cyan: #a8781c; --mt-neon-violet: #4a7a20; --mt-neon-gold: var(--ac-warning); --mt-neon-rose: var(--ac-danger); --mt-glass: #eef4e2; --mt-glass-border: rgba(74,122,32, .28); --mt-glow-violet: 0 0 18px rgba(74,122,32, .30); --mt-glow-cyan: 0 0 18px rgba(74,122,32, .22); --mt-glow-gold: 0 0 12px rgba(74,122,32, .28); } html[data-theme="ostavae"] .mt-post, html[data-theme="ostavae"] .mt-composer, html[data-theme="ostavae"] .mt-side-card, html[data-theme="ostavae"] .mt-suggest-card, html[data-theme="ostavae"] .mt-nav, html[data-theme="ostavae"] .mt-nav-card, html[data-theme="ostavae"] .mt-panthéon, html[data-theme="ostavae"] .mt-modal__content, html[data-theme="ostavae"] .mt-search-form__input { background: var(--ev-surface); border-color: rgba(74,122,32, .28); color: var(--ev-ink); } html[data-theme="ostavae"] .mt-post__divider, html[data-theme="ostavae"] .mt-post__actions, html[data-theme="ostavae"] .mt-composer__divider, html[data-theme="ostavae"] .mt-post__comments { border-color: rgba(74,122,32, .22); } html[data-theme="ostavae"] .mt-post__content, html[data-theme="ostavae"] .mt-composer__textarea, html[data-theme="ostavae"] .mt-side-user__name, html[data-theme="ostavae"] .mt-search-form__input { color: var(--ev-ink); } html[data-theme="ostavae"] .mt-post__time, html[data-theme="ostavae"] .mt-post__handle, html[data-theme="ostavae"] .mt-side-user__followers, html[data-theme="ostavae"] .mt-composer__counter { color: var(--ev-muted); } html[data-theme="ostavae"] .mt-nav__link { color: var(--ev-muted); } html[data-theme="ostavae"] .mt-nav__link.active, html[data-theme="ostavae"] .mt-nav__link:hover, html[data-theme="ostavae"] .mt-nav-link.is-active, html[data-theme="ostavae"] .mt-nav-link:hover { background: rgba(74,122,32, .12); color: var(--ev-acc); } html[data-theme="ostavae"] .mt-side-card__title { color: var(--ev-acc); } html[data-theme="ostavae"] .mt-composer__input, html[data-theme="ostavae"] .mt-comment-form input, html[data-theme="ostavae"] .mt-comment { background: var(--ev-surface2); color: var(--ev-ink); } html[data-theme="ostavae"] .mt-composer__input::placeholder, html[data-theme="ostavae"] .mt-comment-form input::placeholder { color: var(--ev-muted); } html[data-theme="ostavae"] .mt-composer__submit, html[data-theme="ostavae"] .mt-comment-form button, html[data-theme="ostavae"] .mt-btn--violet { background: linear-gradient(135deg,#66a02c,#4a7a20 60%,#345714); color: #f4f8ea; border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .mt-btn, html[data-theme="ostavae"] .mt-follow-btn, html[data-theme="ostavae"] .mt-action-btn { border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .mt-action-btn { color: var(--ev-muted); } html[data-theme="ostavae"] .mt-action-btn:hover { background: rgba(74,122,32, .10); color: var(--ev-acc); } /* Overlays : on garde un voile sombre pour la lisibilité des photos */ html[data-theme="ostavae"] .mt-story-viewer, html[data-theme="ostavae"] .mt-modal { background: rgba(10, 6, 10, .86); } html[data-theme="ostavae"] .mt-modal__nav { background: rgba(74,122,32, .35); } html[data-theme="ostavae"] .mt-modal__nav:hover { background: rgba(74,122,32, .6); } html[data-theme="ostavae"] .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="ostavae"] .ss-p-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ss-p-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(74,122,32, .22); } html[data-theme="ostavae"] .ss-p-card__img { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(74,122,32, .14), transparent 60%); } html[data-theme="ostavae"] .ss-p-card__img::after { color: var(--ev-dim); } html[data-theme="ostavae"] .ss-p-card__body { background: linear-gradient(to top, var(--ev-surface) 0%, var(--ev-surface) 62%, transparent); } html[data-theme="ostavae"] .ss-p-card__cat { color: var(--ev-acc-l); } html[data-theme="ostavae"] .ss-p-card__nom { color: var(--ev-ink); } html[data-theme="ostavae"] .ss-p-card__sub { color: var(--ev-muted); } html[data-theme="ostavae"] .ss-cat-btn { border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ss-cat-btn:hover { border-color: var(--ev-acc); } html[data-theme="ostavae"] .ss-cat-btn.is-active { background: linear-gradient(135deg,#66a02c,#4a7a20 60%,#345714); border-color: transparent; color: #f4f8ea; } html[data-theme="ostavae"] .ss-nav-card { border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ss-nav-card:hover { border-color: var(--ev-acc); } html[data-theme="ostavae"] .ss-nav-card__full-badge { color: var(--ev-acc); background: rgba(74,122,32, .12); border-color: rgba(74,122,32, .3); } html[data-theme="ostavae"] .ss-hero { background: linear-gradient(to bottom, rgba(74,122,32, .12), transparent); border-bottom-color: rgba(74,122,32, .2); } html[data-theme="ostavae"] .ss-hero p, html[data-theme="ostavae"] .ss-back-link { color: var(--ev-muted); } html[data-theme="ostavae"] .ss-back-link { border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ss-back-link:hover { background: rgba(74,122,32, .10); border-color: var(--ev-acc); color: var(--ev-acc); } html[data-theme="ostavae"] .ss-dialog { border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ss-dialog::backdrop { background: rgba(74,122,32, .3); } html[data-theme="ostavae"] .ss-dialog-header { background: linear-gradient(135deg, var(--ac-card), rgba(74,122,32, .12)); } html[data-theme="ostavae"] .ss-dialog-body h3, html[data-theme="ostavae"] .ss-dialog-body blockquote { color: var(--ev-acc-l); } html[data-theme="ostavae"] .ss-dialog-body { scrollbar-color: var(--ev-acc) transparent; } html[data-theme="ostavae"] .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="ostavae"] .ss-month-card, html[data-theme="ostavae"] .ss-season-card, html[data-theme="ostavae"] .ss-fete-card, html[data-theme="ostavae"] .ss-converter { border-radius: 20px 20px 20px 4px; border-color: var(--ev-border); } html[data-theme="ostavae"] .ss-converter-result { background: var(--ev-deep); border-color: var(--ev-border); color: var(--ev-ink); } html[data-theme="ostavae"] .ss-month-card__pron, html[data-theme="ostavae"] .ss-fete-pos { color: var(--ev-muted); } html[data-theme="ostavae"] .ss-conv-zodiac { border-top-color: var(--ev-border); } html[data-theme="ostavae"] .ss-fete-header:hover { background: rgba(74,122,32, .08); } html[data-theme="ostavae"] .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="ostavae"] .ss-fete-card[data-fete="ostavae"] { border-color: var(--ev-acc); box-shadow: 0 0 0 1px rgba(74,122,32, .35), 0 10px 28px rgba(74,122,32, .22); } /* ── 4. Sang-Satō — manuscrits (.ms-*) ───────────────────────────────────── */ html[data-theme="ostavae"] .ms-card { background: var(--ev-surface); border-color: var(--ev-border); border-radius: 20px 20px 20px 4px; } html[data-theme="ostavae"] .ms-card:hover { border-color: var(--ev-acc); box-shadow: 0 6px 24px rgba(74,122,32, .22); } html[data-theme="ostavae"] .ms-cover { background: var(--ev-deep); background-image: radial-gradient(circle at 30% 20%, rgba(74,122,32, .2), transparent 60%); } html[data-theme="ostavae"] .ms-serie { color: var(--ev-acc-l); } html[data-theme="ostavae"] .ms-titre { color: var(--ev-ink); } html[data-theme="ostavae"] .ms-sous-titre, html[data-theme="ostavae"] .ms-synopsis { color: var(--ev-muted); } html[data-theme="ostavae"] .ms-progress-label, html[data-theme="ostavae"] .ms-meta { color: var(--ev-dim); } html[data-theme="ostavae"] .ms-progress-bar { background: var(--ev-deep); border-color: var(--ev-border); } html[data-theme="ostavae"] .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="ostavae"] { --at-bg: var(--ac-bg); --at-bg2: var(--ac-bg2); --at-bg3: #cbd9b6; --at-card: #eef4e2; --at-border: #b3c69a; --at-purple: #4a7a20; --at-purple-lt: #a8781c; --at-gold: var(--ac-accent2); --at-gold-lt: var(--ac-warning); --at-text: #1e2c12; --at-text-muted: #586b42; --at-text-dim: #77875e; --at-shadow: 0 4px 24px rgba(74,122,32, .2); --at-glow: 0 0 20px rgba(74,122,32, .22); } /* ── 6. Boutique, admin, arcade — texte sur fond accentué ─────────────────── */ html[data-theme="ostavae"] .shop-price-tag, html[data-theme="ostavae"] .adm-btn-gold, html[data-theme="ostavae"] .adm-filter-btn.active, html[data-theme="ostavae"] .adm-page-link.active { color: var(--ac-on-accent); } html[data-theme="ostavae"] .shop-card, html[data-theme="ostavae"] .adm-card { border-radius: 20px 20px 20px 4px; } /* 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="ostavae"] .hero-title, html[data-theme="ostavae"] .hero-section::before, html[data-theme="ostavae"] .hero-section::after, html[data-theme="ostavae"] body::after, html[data-theme="ostavae"] .ms-live-dot::before { animation: none !important; } }