/* ========================================================================== FOREST THEME — Immersive Canopy Experience Only active when data-theme="forest" is set on ========================================================================== */ /* ═══════════════════════════════════════ 1. ATMOSPHERE — Body Background ═══════════════════════════════════════ */ [data-theme="forest"] { background-color: var(--bg-body); background-image: radial-gradient(ellipse 600px 500px at 8% 15%, rgba(201, 168, 76, 0.09) 0%, transparent 70%), radial-gradient(ellipse 500px 700px at 92% 30%, rgba(27, 94, 59, 0.07) 0%, transparent 65%), radial-gradient(ellipse 800px 400px at 50% 95%, rgba(122, 90, 58, 0.06) 0%, transparent 60%), radial-gradient(ellipse 600px 600px at 50% 50%, rgba(116, 198, 157, 0.04) 0%, transparent 50%), radial-gradient(ellipse 400px 350px at 85% 8%, rgba(212, 162, 78, 0.06) 0%, transparent 60%); background-attachment: fixed; } /* ═══════════════════════════════════════ 2. FALLING LEAVES ═══════════════════════════════════════ */ [data-theme="forest"] .forest-leaves { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; overflow: hidden; } [data-theme="forest"] .forest-leaf { position: absolute; top: -60px; opacity: 0.65; animation: forestLeafFall linear infinite, forestLeafSway ease-in-out infinite; will-change: transform; } [data-theme="forest"] .forest-leaf.leaf-type-1 { width: 16px; height: 10px; background: var(--forest-leaf-green-2); border-radius: 50% 0 50% 0; filter: drop-shadow(0 1px 3px rgba(82, 183, 136, 0.3)); } [data-theme="forest"] .forest-leaf.leaf-type-2 { width: 10px; height: 18px; background: var(--forest-leaf-green-3); border-radius: 0 80% 0 80%; filter: drop-shadow(0 1px 3px rgba(45, 134, 89, 0.25)); } [data-theme="forest"] .forest-leaf.leaf-type-3 { width: 18px; height: 12px; background: var(--forest-leaf-autumn-1); border-radius: 50% 10% 50% 10%; filter: drop-shadow(0 1px 4px rgba(212, 184, 61, 0.35)); } [data-theme="forest"] .forest-leaf.leaf-type-4 { width: 9px; height: 16px; background: var(--forest-leaf-autumn-2); border-radius: 10% 80% 10% 80%; filter: drop-shadow(0 1px 3px rgba(199, 123, 46, 0.3)); } [data-theme="forest"] .forest-leaf.leaf-type-5 { width: 12px; height: 8px; background: var(--forest-leaf-green-1); border-radius: 80% 10% 80% 10%; filter: drop-shadow(0 1px 2px rgba(183, 228, 199, 0.4)); } @keyframes forestLeafFall { 0% { transform: translateY(-60px) rotate(0deg) scale(1); } 15% { transform: translateY(15vh) rotate(80deg) scale(0.97); } 35% { transform: translateY(35vh) rotate(180deg) scale(0.94); } 55% { transform: translateY(55vh) rotate(280deg) scale(0.9); } 75% { transform: translateY(78vh) rotate(370deg) scale(0.85); } 100% { transform: translateY(112vh) rotate(450deg) scale(0.78); } } @keyframes forestLeafSway { 0%, 100% { margin-left: 0; } 15% { margin-left: 35px; } 30% { margin-left: -20px; } 50% { margin-left: 45px; } 65% { margin-left: -30px; } 85% { margin-left: 20px; } } /* ═══════════════════════════════════════ 3. MOTES OF LIGHT (Fireflies) ═══════════════════════════════════════ */ [data-theme="forest"] .forest-motes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; overflow: hidden; } [data-theme="forest"] .forest-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--forest-firefly); box-shadow: 0 0 6px 2px var(--forest-dust); opacity: 0; animation: moteDrift linear infinite, moteGlow ease-in-out infinite; will-change: transform, opacity; } [data-theme="forest"] .forest-mote.mote-bright { width: 5px; height: 5px; background: var(--forest-gold); box-shadow: 0 0 10px 3px rgba(201, 168, 76, 0.4); } [data-theme="forest"] .forest-mote.mote-dim { width: 3px; height: 3px; box-shadow: 0 0 4px 1px rgba(210, 180, 80, 0.35); } @keyframes moteDrift { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -40px) scale(1.1); } 50% { transform: translate(-20px, -80px) scale(0.9); } 75% { transform: translate(40px, -30px) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes moteGlow { 0%, 100% { opacity: 0; } 20% { opacity: 0.7; } 50% { opacity: 0.3; } 80% { opacity: 0.8; } } /* ═══════════════════════════════════════ 4. CARDS — Clean subtle hover only ═══════════════════════════════════════ */ [data-theme="forest"] .modern-card:hover { box-shadow: 0 8px 20px -4px rgba(27, 94, 59, 0.12), 0 4px 8px -2px rgba(27, 94, 59, 0.06) !important; } /* ═══════════════════════════════════════ 5. HEADER & SIDEBAR ═══════════════════════════════════════ */ [data-theme="forest"] .app-header, [data-theme="forest"] header.gc-header { border-bottom: 1px solid rgba(116, 198, 157, 0.2) !important; box-shadow: 0 1px 8px rgba(27, 94, 59, 0.06); } [data-theme="forest"] .app-sidebar { border-right-color: rgba(116, 198, 157, 0.15); } /* ═══════════════════════════════════════ 6. SCROLLBAR ═══════════════════════════════════════ */ [data-theme="forest"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--forest-mid), var(--forest-bark)); border-radius: 10px; } [data-theme="forest"] ::-webkit-scrollbar-track { background: var(--bg-body); } /* ═══════════════════════════════════════ 7. SELECTION & LINKS ═══════════════════════════════════════ */ [data-theme="forest"] ::selection { background: rgba(27, 94, 59, 0.18); color: var(--text-main); } [data-theme="forest"] a:not([class]) { color: var(--primary); } /* ═══════════════════════════════════════ 8. BUTTONS ═══════════════════════════════════════ */ [data-theme="forest"] .btn-primary, [data-theme="forest"] .btn-action { box-shadow: 0 4px 16px -3px rgba(27, 94, 59, 0.3); } [data-theme="forest"] .iframe-modal-close:hover { background: #c9a84c !important; color: #000 !important; } /* ═══════════════════════════════════════ 10. MANAGEMENT (/gestion) — hardcoded whites ═══════════════════════════════════════ */ [data-theme="forest"] .mgmt-card-header .news-control { background: var(--bg-input); } [data-theme="forest"] .period-selector-premium { background: var(--bg-input); border-color: var(--border-panel); } [data-theme="forest"] .segmented-item.active { background: var(--bg-card); } /* ═══════════════════════════════════════ 11. INTERFACES (Freebox modals) ═══════════════════════════════════════ */ [data-theme="forest"] .modal-image-box { background: var(--bg-card); } /* ═══════════════════════════════════════ 12. WORD TREE — Dashboard bottom-left Words form a tree silhouette; grows on page load ═══════════════════════════════════════ */ [data-theme="forest"] .forest-word-tree-svg, [data-theme="forest"] .forest-word-tree-container { position: fixed; bottom: 0; width: 460px; max-width: 42vw; height: auto; pointer-events: none; z-index: 0; overflow: visible; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Positioning Classes */ [data-theme="forest"] .forest-word-tree-svg.tree-pos-left, [data-theme="forest"] .forest-word-tree-container.tree-pos-left { left: 20px; right: auto; } [data-theme="forest"] .forest-word-tree-svg.tree-pos-center, [data-theme="forest"] .forest-word-tree-container.tree-pos-center { left: 68%; right: auto; transform: translateX(-50%); } [data-theme="forest"] .forest-word-tree-svg.tree-pos-right, [data-theme="forest"] .forest-word-tree-container.tree-pos-right { right: 20px; left: auto; } /* Ensure SVG inside container scales correctly */ [data-theme="forest"] .forest-word-tree-container svg { width: 100%; height: auto; display: block; } [data-theme="forest"] .wt-word { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; text-anchor: middle; opacity: 0; animation: wtGrow 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--grow-d, 0s) both, wtSway var(--sway-d, 6s) ease-in-out var(--sway-start, 0.7s) infinite; } /* Color tiers */ [data-theme="forest"] .wt-gold { fill: #c9a84c; } [data-theme="forest"] .wt-w { fill: #f0ece2; } [data-theme="forest"] .wt-g1 { fill: #74c69d; } [data-theme="forest"] .wt-g2 { fill: #2d8659; } [data-theme="forest"] .wt-g3 { fill: #1b5e3b; } @keyframes wtGrow { from { opacity: 0; transform: translateY(8px) scale(0.88); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes wtSway { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate( 0.8px, -1.2px); } 45% { transform: translate(-1.2px, 0.6px); } 70% { transform: translate( 1.0px, -0.8px); } 85% { transform: translate(-0.5px, 1.0px); } } /* ═══════════════════════════════════════ 13. RESPONSIVE ═══════════════════════════════════════ */ @media (max-width: 768px) { [data-theme="forest"] .forest-motes { display: none; } [data-theme="forest"] .forest-word-tree-svg { width: 220px; max-width: 55vw; opacity: 0.7; } }