/* ============================================================================ warroom-site.css — homepage-ul, in limbajul War Room (varianta de previzualizare). ---------------------------------------------------------------------------- Se incarca DUPA panou.css + aparat.css, pe orice pagina care poarta ``. Tot ce e aici sta sub `body.wr`, deci o pagina fara clasa ramane neatinsa. Homepage-ul are in plus `wr-home`: doar el primeste fundalul scenei (grila de puncte + halou); pe paginile interioare acel strat scadea contrastul de sub `.sdek`, asa ca ramane doar la scena. Ce se schimba, fata de „aparatul pe masa" (panou.css/aparat.css): · carcasa fizica (perete, granulatie, lumina de sus, sina) → panou plat, mat, cu muchie fina si umbra adancita — ca `.wr-panou` din War Room; · hero-ul devine o SCENA: grila de puncte, halou portocaliu, patru colturi de raft, titlu mare cu litere care intra pe rand, lampa portocalie dedesubt; · seria BM—xx.x ia culoarea familiei pictogramei ei (cy/ye/mg/gn/bl/or); · cardurile si displayurile primesc o muchie colorata sus, ca `.wr-kpi`. Ce NU se schimba: textul, structura, culorile de familie, fonturile, pictogramele. ========================================================================== */ body.wr{ --wr-ease:cubic-bezier(.16,1,.3,1); --wr-glow:rgba(240,78,35,.16); --wr-adanc:0 1px 0 rgba(255,255,255,.04) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 24px 48px -32px rgba(0,0,0,.9); --wr-panou:linear-gradient(180deg,var(--disp),var(--disp2)); } /* masa: grila mai stearsa + un halou cald sus, ca fundalul scenei din War Room */ body.wr.wr-home::before{ background-image: radial-gradient(80% 42% at 50% -6%, rgba(240,78,35,.10), transparent 70%), radial-gradient(rgba(237,238,234,.06) 1px, transparent 1.3px); background-size:auto, 20px 20px; } /* ═══════ PANOUL: orice `.aparat` devine panou plat ═══════ */ body.wr .aparat, body.wr .aparat:not(.aparat--paper), body.wr .aparat--negru{ background:var(--wr-panou); border:1px solid var(--disprule); border-radius:16px; box-shadow:var(--wr-adanc); isolation:isolate; } body.wr .aparat::before, body.wr .aparat:not(.aparat--paper)::before{display:none} /* fara granulatie */ body.wr .aparat .muchie{display:none} body.wr .tabla__s{display:none} /* suruburile */ /* displayurile din panou: inca o treapta mai adanc, fara dubla ramă neagra */ body.wr .aparat .disp, body.wr .aparat:not(.aparat--paper) .disp, body.wr .disp{ background:#08090A; border:1px solid var(--disprule); border-radius:12px; box-shadow:0 2px 18px -6px rgba(0,0,0,.9) inset; } /* ═══════ HERO = SCENA ═══════ */ body.wr .hero{padding:28px 0 8px} body.wr .hero .aparat{ position:relative; overflow:hidden; padding:clamp(22px,3.6vw,44px) clamp(18px,3.6vw,44px) clamp(20px,3vw,34px); background: radial-gradient(60% 70% at 24% 28%, var(--wr-glow), transparent 70%), radial-gradient(rgba(237,238,234,.085) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--wr-panou); } /* colturile de raft: doua taieturi portocalii, sus-stanga si jos-dreapta */ body.wr .hero .aparat::after, body.wr .final::after{ content:""; position:absolute; right:14px; bottom:14px; width:28px; height:28px; border:2px solid var(--or); border-left:0; border-top:0; opacity:.8; pointer-events:none; } body.wr .hero .aparat::before{ display:block; content:""; position:absolute; inset:auto; z-index:0; top:14px; left:14px; width:28px; height:28px; background:none; opacity:.8; border:2px solid var(--or); border-right:0; border-bottom:0; pointer-events:none; mix-blend-mode:normal; filter:none; border-radius:0; } body.wr .hero h1{ font-size:clamp(38px,6.1vw,88px); line-height:.98; letter-spacing:-.035em; font-weight:800; color:var(--dispink); } body.wr .hero h1 .nb{color:var(--or)} /* litera care intra — aceeasi miscare ca la „WAR ROOM": urca .34em si se aprinde */ @keyframes wr-litera-in{from{transform:translateY(.34em); opacity:0} to{transform:none; opacity:1}} @keyframes wr-lampa-in{from{transform:scaleX(0)} to{transform:scaleX(1)}} @keyframes wr-sus-in{from{transform:translateY(10px); opacity:0} to{transform:none; opacity:1}} body.wr .wr-l{display:inline-block; animation:wr-litera-in 640ms var(--wr-ease) calc(200ms + var(--i,0) * 26ms) backwards} body.wr .wr-cuv{display:inline-block; white-space:nowrap} /* lampa de sub titlu: bara portocalie cu lumina, cum are „WAR ROOM" */ body.wr .hero h1::after{ content:""; display:block; width:min(220px,46%); height:6px; margin-top:18px; border-radius:1px; background:var(--or); box-shadow:0 0 18px 1px rgba(240,78,35,.55); transform-origin:left; animation:wr-lampa-in 700ms var(--wr-ease) 900ms backwards; } body.wr .hero__calificare{font-size:16.5px; color:var(--dispink2); animation:wr-sus-in 560ms var(--wr-ease) 1000ms backwards} body.wr .hero__jos{animation:wr-sus-in 560ms var(--wr-ease) 1100ms backwards} body.wr .hero__jos p{color:var(--dispink2)} body.wr .hero__jos p b{color:var(--dispink)} /* seria de sus a scenei: mono gravat, ca in antetul War Room */ body.wr .hero__sus .serie{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink3); } body.wr .hero__sus .serie i{color:var(--dispink)} /* KPI-urile (77 / 2 h / 0): muchie colorata sus, valoare in culoarea familiei */ body.wr .tablou{background:none; border:0; box-shadow:none; gap:10px; padding:0} body.wr .tablou__c{ background:var(--wr-panou); border:1px solid var(--disprule); border-radius:8px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 0 0 var(--fam,var(--or)) inset; padding:16px 14px 14px; } body.wr .tablou__c:nth-child(n){border:1px solid var(--disprule)} body.wr .tablou__c:has(.p-cy){--fam:var(--cy)} body.wr .tablou__c:has(.p-ye){--fam:var(--ye)} body.wr .tablou__c:has(.p-mg){--fam:var(--mg)} body.wr .tablou__c:has(.p-gn){--fam:var(--gn)} body.wr .tablou__c:has(.p-bl){--fam:var(--bl)} body.wr .tablou__c:has(.p-or){--fam:var(--or)} body.wr .tablou__i{color:var(--fam,var(--or))} body.wr .tablou .cifra{font-family:var(--mono); font-weight:600; letter-spacing:-.03em; color:var(--fam,var(--dispink))} body.wr .tablou .lbl{font-family:var(--mono); letter-spacing:.12em; color:var(--dispink)} /* displayul de abilitati: capul lui e un antet de panou */ body.wr .abil{padding:14px 18px 16px} body.wr .abil__cap{padding-bottom:10px; border-bottom:1px solid var(--disprule)} body.wr .abil .lbl{font-family:var(--mono); letter-spacing:.16em; color:var(--dispink)} /* ═══════ ANTETELE DE SECTIUNE ═══════ */ body.wr .shead{max-width:78ch; gap:14px} body.wr .shead__sus{ --c:var(--or); gap:12px 16px; padding-bottom:12px; border-bottom:1px solid var(--disprule); } body.wr .shead__sus:has(.p-cy){--c:var(--cy)} body.wr .shead__sus:has(.p-ye){--c:var(--ye)} body.wr .shead__sus:has(.p-mg){--c:var(--mg)} body.wr .shead__sus:has(.p-gn){--c:var(--gn)} body.wr .shead__sus:has(.p-bl){--c:var(--bl)} body.wr .shead__sus:has(.p-or){--c:var(--or)} body.wr .shead__sus .serie{margin-left:0; order:-1; border:0; padding:0; letter-spacing:.2em} body.wr .shead__sus .serie b{color:var(--or)} body.wr .shead__sus .serie i{color:var(--c)} body.wr .shead__sus .semn{order:-2} body.wr .shead__sus .eyebrow{margin-left:auto; color:var(--ink3)} body.wr .shead h2{font-size:clamp(26px,3.6vw,46px); letter-spacing:-.04em; line-height:1.02} body.wr .sdek{color:var(--ink2)} /* ═══════ CARDURI, REZULTATE, PASII: muchie colorata sus ═══════ */ body.wr .card, body.wr .rez__c, body.wr .vi__pas{ background:var(--wr-panou); border:1px solid var(--disprule); border-radius:8px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 0 0 var(--fam,var(--or)) inset; } body.wr .card{--fam:var(--or)} body.wr .card:has(.p-cy){--fam:var(--cy)} body.wr .card:has(.p-ye){--fam:var(--ye)} body.wr .card:has(.p-mg){--fam:var(--mg)} body.wr .card:has(.p-gn){--fam:var(--gn)} body.wr .card:has(.p-bl){--fam:var(--bl)} body.wr .card:has(.p-or){--fam:var(--or)} body.wr .card p{color:var(--dispink2)} body.wr .rez, body.wr .vi{background:none; border:0; box-shadow:none} body.wr .rez__c .cifra{font-family:var(--mono); letter-spacing:-.03em; color:var(--fam,var(--dispink))} body.wr .rez__c .lbl, body.wr .servicii-grup__lbl{font-family:var(--mono); letter-spacing:.14em} /* butoane: aceleasi, cu colturile lui `--r0` ca in aplicatie */ body.wr .btn{border-radius:8px} /* ═══════ FINALUL ═══════ */ body.wr .final{ position:relative; overflow:hidden; background: radial-gradient(60% 90% at 50% 0%, var(--wr-glow), transparent 70%), radial-gradient(rgba(237,238,234,.085) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--wr-panou); } /* ═══════ DRUMUL: sina de sus, noduri, avionul de hartie ═══════ Sina merge DEASUPRA cardurilor (nu prin ele): cinci noduri, unul per pas, iar avionul zboara pe ea si aprinde pe rand nodurile. Linia portocalie se umple in urma lui. Ciclul ramane cel de 10 s din pagina: avion 0–80%, stat 92%, reluare. Avionul e cel din poza de referinta: coada sus-stanga, botul jos-dreapta. */ body.wr .vi{padding:66px 24px 24px} body.wr .vi__pas{padding:20px 12px 18px} body.wr .vi__pas::before{ content:""; position:absolute; left:50%; top:-40px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--gr); border:2px solid var(--fam,var(--or)); box-shadow:0 0 0 4px var(--gr), 0 0 12px var(--fam,var(--or)); } body.wr .vi__pas::after{ content:""; position:absolute; left:50%; top:-28px; height:28px; width:2px; margin-left:-1px; background:linear-gradient(var(--fam,var(--or)), transparent); } body.wr .vi__sina{left:calc(24px + (100% - 88px) / 10); right:auto; width:calc((100% - 48px) * .8 + 8px); top:26px} body.wr .vi__sina::before{left:0; right:0; border-top:2px dashed #2b3036} body.wr .vi__sina::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:0; opacity:0; background:var(--or); box-shadow:0 0 12px 1px rgba(240,78,35,.75); } body.wr .vi__avion{max-width:none; top:0; left:0; width:68px; height:36.8px; margin:-18px 0 0 -34px; color:var(--bl); filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(58,114,232,.45)); } .js body.wr .vi.e-viu .vi__avion{animation:wr-zbor 10s linear infinite} .js body.wr .vi.e-viu .vi__sina::after{animation:wr-traseu 10s linear infinite} @keyframes wr-zbor{ 0% {left:0; opacity:0; transform:translateY(-6px) rotate(-8deg)} 4% {opacity:1} 10% {transform:translateY(-14px) rotate(-12deg)} 20% {transform:translateY(-2px) rotate(-2deg)} 30% {transform:translateY(8px) rotate(4deg)} 40% {transform:translateY(-2px) rotate(-3deg)} 50% {transform:translateY(-14px) rotate(-12deg)} 60% {transform:translateY(-2px) rotate(-2deg)} 70% {transform:translateY(8px) rotate(4deg)} 80% {left:100%; opacity:1; transform:translateY(-4px) rotate(-6deg)} 92% {left:100%; opacity:1; transform:translateY(-4px) rotate(-6deg)} 97% {left:100%; opacity:0} 100% {left:0; opacity:0} } @keyframes wr-traseu{ 0% {width:0; opacity:0} 2% {opacity:1} 80% {width:100%; opacity:1} 92% {width:100%; opacity:1} 97% {width:100%; opacity:0} 100% {width:0; opacity:0} } @media (prefers-reduced-motion:reduce){ .js body.wr .vi.e-viu .vi__avion, .js body.wr .vi.e-viu .vi__sina::after{animation:none !important; display:none} } @media (max-width:760px){ body.wr .vi{padding:14px 14px 14px 14px} body.wr .vi__pasi{padding-left:34px} body.wr .vi__pas{padding:12px 4px; background:none; border:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--disprule)} body.wr .vi__pas:last-child{border-bottom:0} body.wr .vi__pas::after{display:none} body.wr .vi__pas::before{left:-20px; top:50%; margin:-5px 0 0 -5px} body.wr .vi__sina{left:28px; right:auto; width:0; top:14px; bottom:14px; height:auto} body.wr .vi__sina::before{left:0; right:auto; top:10%; bottom:10%; border-top:0; border-left:2px dashed #2b3036} body.wr .vi__sina::after{left:-1px; top:10%; width:2px; height:0} body.wr .vi__avion{left:0; top:10%; width:46px; height:25px; margin:-12px 0 0 -23px} .js body.wr .vi.e-viu .vi__avion{animation-name:wr-zbor-v} .js body.wr .vi.e-viu .vi__sina::after{animation-name:wr-traseu-v} @keyframes wr-zbor-v{ 0% {top:10%; opacity:0; transform:translateX(-4px) rotate(60deg)} 4% {opacity:1} 10%,50% {transform:translateX(-8px) rotate(66deg)} 30%,70% {transform:translateX(6px) rotate(54deg)} 80%,92% {top:90%; opacity:1; transform:translateX(-2px) rotate(60deg)} 97% {top:90%; opacity:0} 100% {top:10%; opacity:0} } @keyframes wr-traseu-v{ 0% {height:0; opacity:0} 2% {opacity:1} 80%,92% {height:80%; opacity:1} 97% {height:80%; opacity:0} 100% {height:0; opacity:0} } } /* ═══════ 05 — CINE: poza se digitalizeaza ═══════ */ body.wr .eu{grid-template-columns:264px 1fr; gap:34px} body.wr .dig{margin:0; position:relative} body.wr .dig__cadru{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); border:1px solid var(--disprule); background:var(--gr); box-shadow:0 18px 40px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(240,78,35,.06); } body.wr .dig__cadru::before,body.wr .dig__cadru::after{ content:""; position:absolute; width:22px; height:22px; z-index:3; pointer-events:none; border:2px solid var(--or); } body.wr .dig__cadru::before{left:8px; top:8px; border-right:0; border-bottom:0} body.wr .dig__cadru::after{right:8px; bottom:8px; border-left:0; border-top:0} body.wr .dig img.dig__foto{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border:0; border-radius:0} body.wr .dig__px{position:absolute; inset:0; width:100%; height:100%; display:none; image-rendering:pixelated; clip-path:inset(0 100% 0 0)} body.wr .dig.dig--gata .dig__px{display:block} body.wr .dig__scan{ position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; z-index:2; opacity:0; background:var(--or); box-shadow:0 0 14px 2px rgba(240,78,35,.85), 0 0 40px 8px rgba(240,78,35,.3); pointer-events:none; } body.wr .dig__leg{ display:flex; align-items:center; gap:10px; margin-top:12px; font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--muted,#8a8f98); } body.wr .dig__leg svg{width:22px; height:22px; flex:none} body.wr .dig__nume{color:var(--ink)} body.wr .dig__leg-sep{flex:1; height:0; border-top:1px dashed #2b3036; min-width:24px} body.wr .dig__stare{color:var(--or); min-width:6ch; text-align:right} @media (max-width:620px){ body.wr .eu{grid-template-columns:1fr; gap:22px} body.wr .dig{max-width:280px} } /* ═══════ MISCARE REDUSA ═══════ */ @media (prefers-reduced-motion:reduce){ body.wr .wr-l, body.wr .hero h1::after, body.wr .hero__calificare, body.wr .hero__jos{animation:none !important} } @media (max-width:640px){ body.wr .hero .aparat{padding:24px 16px 18px} body.wr .hero h1{font-size:clamp(28px,8.4vw,52px)} body.wr .hero__cap > *{min-width:0} body.wr .shead__sus .eyebrow{margin-left:0} } /* banda transportoare din hero: capul ei e un antet de panou, ca la `.abil` */ body.wr .rulanta{padding:14px 22px 14px} body.wr .rulanta .lbl,body.wr .rulanta__jos{font-family:var(--mono); color:var(--dispink)} body.wr .rulanta .lbl{letter-spacing:.16em} @media(max-width:600px){body.wr .rulanta{padding:12px 14px}}