/* ========================================================= INTRA CONNECT — Overlay festiv (sărbători) Activat prin atributul (setat de assets/js/season.js, ?season=... sau IC_SEASON_DEFAULT). STRICT ADITIV: fără atribut, tema de bază rămâne neschimbată. Două „teme" sezoniere: - iarna -> Crăciun / An Nou (fulgi de nea, accente reci + aur/roșu) - paste -> Paște (ouă & petale, pasteluri calde) ========================================================= */ /* ---------- Bara de urări (injectată sus, peste header) ---------- */ .ic-season-ribbon { position: relative; z-index: 41; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 18px; text-align: center; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; } .ic-season-ribbon i { font-size: 0.95rem; } .ic-season-ribbon .ic-season-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; opacity: 0.7; font-size: 0.85rem; line-height: 1; padding: 4px; color: inherit; } .ic-season-ribbon .ic-season-close:hover { opacity: 1; } @media (max-width: 640px) { .ic-season-ribbon { font-size: 0.78rem; padding: 8px 34px 8px 12px; } } /* ---------- Stratul de decor (fulgi / ouă / petale) ---------- */ .ic-season-fx { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; } .ic-season-bit { position: absolute; top: -8vh; will-change: transform, opacity; opacity: 0; line-height: 1; animation: ic-season-fall linear infinite; } @keyframes ic-season-fall { 0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--ic-bit-op, 0.9); } 92% { opacity: var(--ic-bit-op, 0.9); } 100% { transform: translate3d(var(--ic-bit-x, 0px), 108vh, 0) rotate(var(--ic-bit-rot, 360deg)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ic-season-fx { display: none; } } /* ========================================================= IARNĂ — Crăciun / An Nou ========================================================= */ :root[data-season="iarna"] .ic-season-ribbon { color: #fff7e6; background: linear-gradient(90deg, #07203d 0%, #0E5A8A 50%, #07203d 100%); border-bottom: 1px solid rgba(227, 179, 65, 0.45); box-shadow: inset 0 -2px 0 rgba(227, 179, 65, 0.35); } :root[data-season="iarna"] .ic-season-ribbon i { color: #e3b341; } /* accent festiv pe pastila de header: chenar rece + halou discret + inel auriu (respectă colțurile rotunjite ale pastilei — fără linie întreruptă) */ :root[data-season="iarna"] .ic-topbar { border-color: rgba(149, 214, 255, 0.6); box-shadow: 0 10px 30px rgba(10, 37, 64, 0.08), inset 0 0 0 1px rgba(227, 179, 65, 0.3), 0 0 18px rgba(149, 214, 255, 0.35); } /* fulgii moșteniți */ :root[data-season="iarna"] .ic-season-bit { color: #eaf6ff; text-shadow: 0 0 6px rgba(149, 214, 255, 0.7); } /* sclipire rece pe haloul scutului din hero (focalul de pe home) */ :root[data-season="iarna"] .ic-hub-home .ic-hub-shield { filter: drop-shadow(0 0 46px rgba(149, 214, 255, 0.7)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55)); } /* ========================================================= PAȘTE — sărbători pascale ========================================================= */ :root[data-season="paste"] .ic-season-ribbon { color: #2f5d3a; background: linear-gradient(90deg, #eaf7ec 0%, #f6ecf8 50%, #fff6e0 100%); border-bottom: 1px solid rgba(127, 185, 138, 0.55); box-shadow: inset 0 -2px 0 rgba(181, 154, 214, 0.3); } :root[data-season="paste"] .ic-season-ribbon i { color: #b59ad6; } /* accent festiv pe pastila de header: chenar pastel + halou cald discret */ :root[data-season="paste"] .ic-topbar { border-color: rgba(181, 154, 214, 0.55); box-shadow: 0 10px 30px rgba(10, 37, 64, 0.08), inset 0 0 0 1px rgba(127, 185, 138, 0.3), 0 0 18px rgba(240, 210, 122, 0.3); } /* ouăle/petalele moștenesc culoarea per-element (setată inline din JS) */ :root[data-season="paste"] .ic-season-bit { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08)); } /* ---------- Ilustrația festivă în hero (dreapta-sus, fundal translucid) ---------- */ /* element decorativ subtil, în plus față de decorul care cade; stă în colțul din dreapta-sus al hero-ului, în spatele conținutului (z-index 0) și semitransparent, ca să nu iasă în prim-plan. Injectat din season.js. `.ic-hero-xl` are deja `position:relative; overflow:hidden`. */ .ic-season-hero { position: absolute; z-index: 0; pointer-events: none; line-height: 0; right: clamp(-6px, 0.6vw, 10px); top: clamp(-8px, 0.5vw, 8px); width: clamp(150px, 19vw, 270px); opacity: 0.2; filter: drop-shadow(0 0 9px rgba(170, 220, 255, 0.35)); } .ic-season-hero svg, .ic-season-hero img { display: block; width: 100%; height: auto; } /* pe ecrane înguste hero-ul devine o coloană — ascundem fundalul decorativ */ @media (max-width: 1023px) { .ic-season-hero { display: none; } } /* ---------- Control discret pentru animația sezonieră (doar homepage) ---------- */ .ic-season-ctrl { position: absolute; top: 20px; right: 22px; z-index: 6; line-height: 0; } @media (max-width: 600px) { .ic-season-ctrl { top: 14px; right: 14px; } } /* declanșatorul — pastilă rotundă mică, „sparkle" cyan, cu un inel pulsant discret care invită la hover */ .ic-season-ctrl-btn { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #bfeaf5; background: rgba(13, 42, 71, 0.5); border: 1px solid rgba(95, 212, 234, 0.45); box-shadow: 0 2px 10px rgba(7, 27, 48, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .ic-season-ctrl-btn:hover, .ic-season-ctrl-btn:focus-visible { outline: none; color: #eafaff; transform: translateY(-1px) scale(1.07); border-color: rgba(95, 212, 234, 0.9); box-shadow: 0 0 0 4px rgba(24, 183, 214, 0.12), 0 4px 14px rgba(7, 27, 48, 0.42); } .ic-season-ctrl-spark { width: 18px; height: 18px; display: block; } .ic-season-ctrl-spark svg { width: 100%; height: 100%; display: block; } @media (prefers-reduced-motion: no-preference) { .ic-season-ctrl-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(95, 212, 234, 0.45); pointer-events: none; animation: ic-ctrl-pulse 2.8s ease-out infinite; } .ic-season-ctrl[data-open="true"] .ic-season-ctrl-btn::after { animation: none; opacity: 0; } } @keyframes ic-ctrl-pulse { 0% { transform: scale(0.85); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } } /* după câteva secunde fără interacțiune, declanșatorul pulsează mai vizibil (glow) ca să atragă atenția; clasa .is-invite e adăugată/scoasă din season.js */ .ic-season-ctrl-btn.is-invite { color: #eafaff; border-color: rgba(95, 212, 234, 0.95); } @media (prefers-reduced-motion: no-preference) { .ic-season-ctrl-btn.is-invite { animation: ic-ctrl-invite 1.8s ease-in-out infinite; } .ic-season-ctrl-btn.is-invite::after { border-color: rgba(95, 212, 234, 0.75); animation-duration: 1.8s; } } @keyframes ic-ctrl-invite { 0%, 100% { box-shadow: 0 2px 10px rgba(7, 27, 48, 0.3), 0 0 0 0 rgba(24, 183, 214, 0); transform: none; } 50% { box-shadow: 0 2px 14px rgba(7, 27, 48, 0.4), 0 0 20px 5px rgba(24, 183, 214, 0.6); transform: translateY(-1px) scale(1.06); } } /* popover-ul — se deschide în jos, aliniat la dreapta; navy translucid, border cyan */ .ic-season-ctrl-pop { position: absolute; top: calc(100% + 10px); right: 0; width: max-content; max-width: 260px; padding: 14px 15px; text-align: left; background: rgba(9, 31, 56, 0.92); border: 1px solid rgba(95, 212, 234, 0.35); border-radius: 14px; color: #eaf6fb; box-shadow: 0 18px 40px rgba(5, 18, 36, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .ic-season-ctrl[data-open="true"] .ic-season-ctrl-pop { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .ic-season-ctrl-pop { transition: opacity 0.18s ease; transform: none; } .ic-season-ctrl[data-open="true"] .ic-season-ctrl-pop { transform: none; } } /* mic vârf către declanșator */ .ic-season-ctrl-pop::before { content: ""; position: absolute; top: -5px; right: 14px; width: 9px; height: 9px; transform: rotate(45deg); background: rgba(9, 31, 56, 0.92); border-left: 1px solid rgba(95, 212, 234, 0.35); border-top: 1px solid rgba(95, 212, 234, 0.35); } /* „punte" invizibilă care acoperă spațiul dintre declanșator și popover, ca să nu se declanșeze `mouseleave` când treci de pe icon pe tooltip (stabilitate hover) */ .ic-season-ctrl-pop::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .ic-season-ctrl-title { margin: 0 0 6px; font-size: 0.9rem; font-weight: 700; color: #ffffff; } .ic-season-ctrl-text { margin: 0 0 13px; font-size: 0.78rem; line-height: 1.5; color: rgba(223, 238, 248, 0.85); } /* comutatorul (switch accesibil cu input checkbox real) */ .ic-season-ctrl-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #eaf6fb; user-select: none; } .ic-season-ctrl-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .ic-season-ctrl-track { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(95, 212, 234, 0.3); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ic-season-ctrl-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #dff4fb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, background 0.2s ease; } .ic-season-ctrl-switch input:checked + .ic-season-ctrl-track { background: linear-gradient(90deg, var(--ic-blue), var(--ic-cyan)); border-color: rgba(95, 212, 234, 0.6); } .ic-season-ctrl-switch input:checked + .ic-season-ctrl-track .ic-season-ctrl-thumb { transform: translateX(16px); background: #ffffff; } .ic-season-ctrl-switch input:focus-visible + .ic-season-ctrl-track { box-shadow: 0 0 0 3px rgba(24, 183, 214, 0.28); }