/* ========================================================================== موتور فصلی — هاله‌ی فصلی سایت، ذرات، و بلوک روزشمار (نسخه‌ی ۲) ========================================================================== */ /* ---------- هاله‌ی پس‌زمینه بر اساس فصلِ جاری (روی ست می‌شود) ---------- */ html[data-season="spring"] { --season-tint: 116, 198, 140; } html[data-season="summer"] { --season-tint: 255, 193, 92; } html[data-season="autumn"] { --season-tint: 236, 142, 58; } html[data-season="winter"] { --season-tint: 128, 172, 255; } /* ---------- ذرات ---------- */ .main-content, .site-footer { position: relative; z-index: 1; } .particle { position: absolute; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; animation-timing-function: linear; animation-iteration-count: infinite; } .p-snow { background: rgba(255,255,255,0.95); box-shadow: 0 0 4px 1px rgba(150,195,255,0.5); animation-name: fall; } .p-leaf { border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #e8a33d, #bd4f18); animation-name: fall-spin; } .p-petal { border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #ffc7da, #ff8fb2); animation-name: fall-spin; } .p-mote { background: radial-gradient(circle, rgba(255,216,130,0.95), rgba(255,180,80,0.15)); box-shadow: 0 0 6px rgba(255,200,110,0.55); animation-name: rise; } @keyframes fall { 0% { transform: translate3d(0, -6vh, 0); opacity: 0; } 12% { opacity: var(--op, 0.6); } 88% { opacity: var(--op, 0.6); } 100% { transform: translate3d(-7vw, 106vh, 0); opacity: 0; } } @keyframes fall-spin { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; } 12% { opacity: var(--op, 0.7); } 50% { transform: translate3d(4vw, 50vh, 0) rotate(180deg); } 88% { opacity: var(--op, 0.7); } 100% { transform: translate3d(-6vw, 106vh, 0) rotate(360deg); opacity: 0; } } @keyframes rise { 0% { transform: translate3d(0, 106vh, 0); opacity: 0; } 15% { opacity: var(--op, 0.5); } 85% { opacity: var(--op, 0.5); } 100% { transform: translate3d(3vw, -6vh, 0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .particle { display: none; } } /* ========================================================================== بلوک روزشمار — جمع‌وجور و شیک، با تمِ فصلِ بعد ========================================================================== */ .season-hero { position: relative; overflow: hidden; max-width: 990px; margin: 6px auto 30px; padding: 18px 20px 20px; border: 1px solid color-mix(in srgb, var(--season-accent, var(--accent)) 22%, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--season-grad, linear-gradient(135deg, var(--surface), var(--surface-2))); transition: background 0.4s ease, border-color 0.4s ease; } /* نوار درخشان بالای بلوک */ .season-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--season-accent, var(--accent)), transparent); opacity: 0.8; } .season-hero[data-season="spring"] { --season-grad: linear-gradient(135deg, rgba(116,198,140,0.16), rgba(255,182,206,0.13)); --season-accent: #2fa15a; } .season-hero[data-season="summer"] { --season-grad: linear-gradient(135deg, rgba(255,201,92,0.18), rgba(80,190,190,0.12)); --season-accent: #d98a12; } .season-hero[data-season="autumn"] { --season-grad: linear-gradient(135deg, rgba(236,142,58,0.18), rgba(193,80,30,0.12)); --season-accent: #c15a1b; } .season-hero[data-season="winter"] { --season-grad: linear-gradient(135deg, rgba(128,172,255,0.16), rgba(200,225,255,0.12)); --season-accent: #2f6fd1; } .season-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .season-badge { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: var(--season-accent, var(--accent)); background: color-mix(in srgb, var(--season-accent, var(--accent)) 16%, transparent); } .season-badge svg { width: 22px; height: 22px; } .season-eyebrow { margin: 0; font-size: 0.98rem; color: var(--text); } .season-eyebrow strong { color: var(--season-accent, var(--accent)); font-weight: 700; } .countdown { display: flex; justify-content: center; gap: 8px; text-align: center; } .cd-box { flex: 1; max-width: 74px; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(4px); } .cd-num { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } .cd-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; } @media (min-width: 640px) { .season-hero { padding: 22px 26px 24px; } .season-badge { width: 42px; height: 42px; } .season-badge svg { width: 24px; height: 24px; } .cd-box { padding: 12px 8px; } .cd-num { font-size: 1.8rem; } }