/* ════════════════════════════════════════════════════════════ C DESIGN — STRAT DE EFECTE (design «neon slides») Fundal animat + casete neon + slide-uri laterale între secțiuni. Folosește variabilele temei site-ului (var(--teal) etc.), deci urmează automat culorile setate din admin → Temă. Activare: + acest CSS + /effects.js ════════════════════════════════════════════════════════════ */ /* ── FUNDAL ANIMAT ─────────────────────────────────────────── */ .fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .fx-bg svg{width:100%;height:100%;display:block;} .fx-tri{fill:none;stroke:var(--teal,#00c8b4);stroke-width:1.2;opacity:.22;transform-origin:center;transform-box:fill-box;} .fx-tri-slow{animation:fx-drift 18s ease-in-out infinite alternate;} .fx-tri-med{animation:fx-drift 12s ease-in-out infinite alternate-reverse;} .fx-plus{fill:var(--teal,#00c8b4);opacity:.3;animation:fx-pulse 4s ease-in-out infinite;} .fx-diamond{fill:none;stroke:var(--teal,#00c8b4);stroke-width:3;opacity:.35;animation:fx-spin 26s linear infinite;transform-origin:center;transform-box:fill-box;} .fx-glow{fill:var(--teal,#00c8b4);filter:drop-shadow(0 0 6px var(--teal,#00c8b4));animation:fx-pulse 3.2s ease-in-out infinite;} .fx-dotswave{animation:fx-wave 26s linear infinite;} .fx-lines{stroke:var(--teal,#00c8b4);opacity:.07;stroke-width:1;} @keyframes fx-drift{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(26px,-18px) rotate(9deg)}} @keyframes fx-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes fx-pulse{0%,100%{opacity:.18}50%{opacity:.55}} @keyframes fx-wave{from{transform:translateX(0)}to{transform:translateX(-220px)}} /* conținutul paginii stă deasupra fundalului */ body[data-fx] main,body[data-fx] footer{position:relative;z-index:2;} /* nav-ul rămâne sticky (scroll normal) și mereu deasupra conținutului */ body[data-fx] nav{z-index:300;} /* NOTĂ: modul vechi „fx-slide" (fullscreen, panouri glisante) a fost înlocuit de „fx-scroll" (derulare normală). Regulile fx-slide au fost eliminate. */ /* suprapunerile decorative din designul vechi (modelul punctat de pe hero-uri) sunt redundante peste fundalul animat al temei noi */ body[data-fx] .hero::before{display:none;} /* footer-ul devine ultimul slide — centrat și compact */ /* footer fix: bară compactă jos, mereu vizibilă peste orice slide */ body.fx-scroll footer{position:fixed!important;left:0;right:0;top:auto;bottom:0;z-index:150; padding:9px 0!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} body.fx-scroll footer .footer-grid-full, body.fx-scroll footer .footer-grid{display:none;} body.fx-scroll footer .footer-bottom-bar, body.fx-scroll footer .footer-bottom{border-top:none;padding-top:0;margin:0; display:flex;justify-content:center;align-items:center;gap:8px 22px;flex-wrap:wrap;font-size:.74rem;} /* sertar: butonul ˄ deschide footer-ul complet peste slide */ .fx-foot-toggle{display:none;} body.fx-scroll .fx-foot-toggle{display:flex;position:absolute;top:-24px;left:50%;transform:translateX(-50%); width:52px;height:24px;border-radius:10px 10px 0 0;cursor:pointer;align-items:center;justify-content:center; background:rgba(var(--teal-glow-rgb,0,200,180),.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(var(--teal-glow-rgb,0,200,180),.35);border-bottom:none;color:var(--teal,#00c8b4);padding:0;} .fx-foot-toggle::after{content:'';width:8px;height:8px;border-left:2px solid currentColor;border-top:2px solid currentColor; transform:rotate(45deg) translate(2px,2px);transition:transform .35s;} body.fx-scroll footer.fx-open .fx-foot-toggle::after{transform:rotate(225deg) translate(2px,2px);} body.fx-scroll footer.fx-open{padding:26px 0 12px!important;max-height:82vh;max-height:82dvh;overflow-y:auto; box-shadow:0 -14px 48px rgba(0,0,0,.45);scrollbar-width:thin;} body.fx-scroll footer.fx-open .footer-grid-full{display:grid;animation:fx-foot-in .45s cubic-bezier(.22,.8,.32,1);} body.fx-scroll footer.fx-open .footer-grid{display:grid;animation:fx-foot-in .45s cubic-bezier(.22,.8,.32,1);} @keyframes fx-foot-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* footer lizibil în modul slide: fundal aproape opac (fără text peste blur) + contrast bun pe titluri/linkuri/descriere */ body.fx-scroll footer{background:rgba(9,13,17,.97)!important;} body.fx-scroll footer .footer-col h3, body.fx-scroll footer .footer-col-full h3{color:#ffffff!important;} body.fx-scroll footer .footer-about, body.fx-scroll footer .footer-col a, body.fx-scroll footer .footer-col-full a{color:#cdd6df!important;} body.fx-scroll footer .footer-bottom, body.fx-scroll footer .footer-bottom a{color:#cdd6df!important;} body.fx-scroll footer .footer-col a:hover, body.fx-scroll footer .footer-col-full a:hover, body.fx-scroll footer .footer-bottom a:hover{color:var(--teal,#00c8b4)!important;} body.fx-scroll footer .footer-bottom .teal{color:var(--teal,#00c8b4)!important;} /* buton ✕ de închidere, vizibil doar cu sertarul deschis */ .fx-foot-close{display:none;} body.fx-scroll footer.fx-open .fx-foot-close{display:flex;position:sticky;top:0;margin-left:auto;margin-right:16px; width:34px;height:34px;align-items:center;justify-content:center;cursor:pointer;z-index:5; background:rgba(var(--teal-glow-rgb,0,200,180),.1);border:1px solid rgba(var(--teal-glow-rgb,0,200,180),.4); border-radius:9px;color:var(--teal,#00c8b4);font-size:1rem;line-height:1;padding:0; font-family:'DM Sans',sans-serif;} body.fx-scroll footer.fx-open .fx-foot-close:hover{background:rgba(var(--teal-glow-rgb,0,200,180),.2);} /* iconițele social media în bara fixă */ .fx-foot-social{display:none;} body.fx-scroll .fx-foot-social{display:inline-flex;gap:8px;align-items:center;} .fx-foot-social a{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center; border:1px solid rgba(var(--teal-glow-rgb,0,200,180),.35);border-radius:7px;color:var(--soft,#9aa5b4); transition:color .2s,border-color .2s,box-shadow .2s;} .fx-foot-social a:hover{color:var(--teal,#00c8b4);border-color:var(--teal,#00c8b4); box-shadow:0 0 10px rgba(var(--teal-glow-rgb,0,200,180),.5);} .fx-foot-social a svg{width:13px;height:13px;} .fx-foot-social .fb-label{display:none;} /* ── PUNCTE DE NAVIGARE (stânga) ───────────────────────────── */ .fx-dots{display:none;position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:220;flex-direction:column;gap:4px;} /* țintă de atins de 26px (cerință accesibilitate), punct vizual de 11px */ .fx-dots button{width:26px;height:26px;border:none;background:transparent;cursor:pointer;padding:0;position:relative;} .fx-dots button::after{content:'';position:absolute;inset:7.5px;border-radius:50%;border:1px solid rgba(var(--teal-glow-rgb,0,200,180),.5);transition:background .3s,box-shadow .3s,transform .3s;} .fx-dots button.on::after{background:#ff4d4d;border-color:#ff4d4d; box-shadow:0 0 12px rgba(255,77,77,.85),0 0 26px rgba(255,77,77,.35);transform:scale(1.25); animation:fx-dot-blink 2.6s ease-in-out infinite;} /* pâlpâit lent — doar pe opacity (compus pe GPU) */ @keyframes fx-dot-blink{0%,100%{opacity:1}50%{opacity:.4}} /* ── LOGO — glow alb static + pâlpâit lent doar pe opacity (animarea filter cu drop-shadow «mută pixeli» și apărea în PageSpeed la «Evită animațiile necompuse») ── */ body[data-fx] nav .logo img{ filter:drop-shadow(0 0 6px rgba(255,255,255,.6)) drop-shadow(0 0 16px rgba(255,255,255,.3)); animation:fx-logo-blink 3.2s ease-in-out infinite; } @keyframes fx-logo-blink{0%,100%{opacity:1}50%{opacity:.55}} /* floating-bar peste slide-uri, dar sub dots */ body.fx-scroll .floating-bar{z-index:210;} /* ── INDICIU DE SCROLL (primul slide) ────────────────────────── Mouse cu rotiță animată pe desktop, săgeți pulsante pe mobil. Dispare la prima interacțiune. */ .fx-scrollhint{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:160; display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none; opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;} .fx-sh-label{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.22em; text-transform:uppercase;color:var(--teal,#00c8b4);opacity:.85;} .fx-sh-mouse{width:24px;height:38px;border:2px solid rgba(var(--teal-glow-rgb,0,200,180),.75); border-radius:13px;position:relative;box-shadow:0 0 14px rgba(var(--teal-glow-rgb,0,200,180),.25);} .fx-sh-mouse span{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px; border-radius:2px;background:var(--teal,#00c8b4);animation:fx-sh-wheel 1.7s ease-in-out infinite;} @keyframes fx-sh-wheel{0%{transform:translateY(0);opacity:1}65%{transform:translateY(13px);opacity:0}100%{transform:translateY(13px);opacity:0}} .fx-sh-chevs{display:flex;flex-direction:column;align-items:center;} .fx-sh-chevs i{display:block;width:11px;height:11px;border-right:2px solid var(--teal,#00c8b4); border-bottom:2px solid var(--teal,#00c8b4);transform:rotate(45deg);margin:-5px 0; opacity:0;animation:fx-sh-chev 1.7s ease-in-out infinite;} .fx-sh-chevs i:nth-child(2){animation-delay:.22s;} @keyframes fx-sh-chev{0%{opacity:0;transform:rotate(45deg) translate(-5px,-5px)}45%{opacity:1}85%,100%{opacity:0;transform:rotate(45deg) translate(4px,4px)}} @media(max-width:900px){ .fx-sh-mouse{display:none;} .fx-scrollhint{bottom:72px;} } /* ── MOBIL: slide-uri compacte ─────────────────────────────── */ @media(max-width:900px){ .fx-dots{left:4px;gap:2px;} .fx-dots button::after{inset:8.5px;} body.fx-scroll footer .footer-bottom-bar span:last-child, body.fx-scroll footer .footer-bottom span:last-child{display:none;} } /* pe mobil, bara plutitoare se ascunde în modul slide — toate iconițele (telefon, WhatsApp, email, social) sunt în bara de footer */ @media(max-width:640px){ body.fx-scroll .floating-bar{display:none;} } /* ── REDUCED MOTION ────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .fx-tri-slow,.fx-tri-med,.fx-plus,.fx-diamond,.fx-glow,.fx-dotswave{animation:none;} .fx-dots button.on::after{animation:none;} body[data-fx] nav .logo img{animation:none;} } /* ════════════════════════════════════════════════════════════ MOD SCROLL NORMAL (fx-scroll) Pagina deruleaza normal pe verticala; fiecare sectiune aluneca in cadru din stanga/dreapta cand intra in ecran. Pastreaza fundalul animat si casetele neon, dar FARA preluarea scroll-ului. ════════════════════════════════════════════════════════════ */ body.fx-scroll{overflow-x:hidden;padding-bottom:54px;} /* taie alunecarea laterala a sectiunilor exact la marginea ecranului, ca translateX-ul de reveal sa nu produca scroll orizontal. 'clip' nu creeaza scroll container (nav sticky ramane ok). */ body.fx-scroll main{overflow-x:clip;} /* caseta neon (doar aspect — fara max-height/overflow ca in modul slide) */ body.fx-scroll .fx-neon{ background:rgba(var(--teal-glow-rgb,0,200,180),.04); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(var(--teal-glow-rgb,0,200,180),.4);border-radius:22px; padding:40px 36px!important; box-shadow:0 0 14px rgba(var(--teal-glow-rgb,0,200,180),.3),0 0 56px rgba(var(--teal-glow-rgb,0,200,180),.14),inset 0 0 26px rgba(var(--teal-glow-rgb,0,200,180),.05); } /* reveal la scroll: alunecare laterala + fade, apoi pozitie normala */ body.fx-scroll .fx-reveal{opacity:0; transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .85s ease; will-change:transform,opacity;} body.fx-scroll .fx-reveal.fx-from-left{transform:translateX(-70px);} body.fx-scroll .fx-reveal.fx-from-right{transform:translateX(70px);} body.fx-scroll .fx-reveal.fx-shown{opacity:1;transform:none;} /* animatiile reveal interne nu mai tin continutul ascuns in acest mod */ body.fx-scroll .reveal{opacity:1!important;transform:none!important;} @media(prefers-reduced-motion:reduce){ body.fx-scroll .fx-reveal{opacity:1!important;transform:none!important;transition:none;} }