/* ========================================================= hoeses-site.css Téli háttér-tónus + a hóesés kapcsoló widget a látogatóknak. Kapcsold be a -ben, a style.css UTÁN. ========================================================= */ /* ===== TÉLI HÁTTÉR-TÓNUS ===== JS két elemet tesz a végére (nem ::before-t — az a legtöbb oldalon a tartalom MÖGÉ került volna, ahol a fehér/opak szekciók eltakarták, és csak a szekciók közti résekben látszott furcsa kék csíkként): 1) #tt-tel-hatter-multiply — "multiply" keveréssel. A tiszta fehér hátteret ez tudja ténylegesen átszínezni (a soft-light a fehéren érintetlenül hagyná), egy halvány, meleg-krém → jégkék pasztell átmenettel — ettől lesz "cozy" az oldal alap fehérje. 2) #tt-tel-hatter-layer — "soft-light" keveréssel, mélyebb kék/meleg hangulatréteg mindenek felett (ez adja az összefüggő, "átszínezett" hatást a nem fehér elemeken: navbar, képek, kártyák szegélyei). */ #tt-tel-hatter-multiply { position: fixed; inset: 0; z-index: 1998; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(255, 247, 235, 0.95) 0%, rgba(238, 245, 252, 0.95) 45%, rgba(224, 238, 250, 0.95) 100%); } #tt-tel-hatter-layer { position: fixed; inset: 0; z-index: 1999; /* a hóesés canvas (2000) alatt, minden tartalom felett */ pointer-events: none; opacity: 0; transition: opacity 0.6s ease; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 70px), radial-gradient(ellipse 900px 260px at 50% 0%, rgba(255, 205, 140, 0.30), transparent 60%), linear-gradient(180deg, rgba(120, 170, 230, 0.55) 0%, rgba(70, 110, 170, 0.30) 45%, rgba(40, 70, 120, 0.40) 100%); } body.tt-tel-hatter #tt-tel-hatter-multiply, body.tt-tel-hatter #tt-tel-hatter-layer { opacity: 1; } /* ===== LÁTOGATÓI KAPCSOLÓ WIDGET ===== */ .tt-tel-widget { position: fixed; right: 18px; bottom: 18px; z-index: 2001; font-family: "Segoe UI", Roboto, Arial, sans-serif; } .tt-tel-widget-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: linear-gradient(135deg, #1b3a5c, #2f6fb0); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.2s ease; } .tt-tel-widget-btn:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } .tt-tel-widget-panel { position: absolute; right: 0; bottom: 58px; min-width: 190px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); border: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .tt-tel-widget.open .tt-tel-widget-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .tt-tel-widget-opcio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #1f2937; cursor: pointer; transition: background 0.15s ease; } .tt-tel-widget-opcio:hover { background: #f3f4f6; } .tt-tel-widget-opcio input { accent-color: #2f6fb0; } @media (max-width: 480px) { .tt-tel-widget { right: 12px; bottom: 12px; } }