/* Reguli CSS comune, extrase automat de pe cele 11 pagini de comuna. */ @layer base { html, body { width: 100%; max-width: 100%; position: relative; scroll-behavior: smooth; overscroll-behavior-y: contain; scroll-padding-top: 76px; background-color: #030405; margin:0; padding:0;} ::-webkit-scrollbar-track { background: #030405; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* ══════════ CONTINUTUL E VIZIBIL DIN START (12.08.2026) ══════════ Pana acum `.reveal` pornea cu opacity:0 si devenea vizibil DOAR daca JavaScript-ul reusea sa-i puna clasa .active. Adica intreg continutul site-ului depindea de un mecanism care se putea rupe - si s-a rupt: Johnny a vazut zile intregi doar primul ecran, pe Firefox Android. Decizia de fond: continutul se vede FARA JS, neconditionat. Animatia de intrare e un bonus care se activeaza doar daca scriptul confirma ca e viu (isi pune .pa-anim pe ), si chiar si atunci un cronometru CSS de 8 secunde scoate orice bloc din invizibilitate, orice s-ar intampla. Cel mai rau caz posibil de-acum: continutul apare fara animatie. */ /* Animatia miscă DOAR pozitia, niciodata opacitatea. Doua motive: 1) textul e mereu 100% opac, deci mereu lizibil - continutul nu poate disparea nici macar pentru o fractiune de secunda; 2) o estompare in curs inseamna culoare compusa cu fundalul: Lighthouse a prins blocurile la ~62% opacitate si contrastul pica (2,65 in loc de 4,5), desi culorile in sine sunt corecte. Masurat pe chassis-waterloo, 12.08. */ .reveal { opacity: 1; transform: none; } html.pa-anim .reveal { transition: transform .7s cubic-bezier(0.16,1,0.3,1); } html.pa-anim .reveal:not(.active) { transform: translateY(28px); } html.pa-anim .reveal.active { transform: translateY(0); } @media (prefers-reduced-motion: reduce){ html.pa-anim .reveal, html.pa-anim .reveal:not(.active){ transform:none; transition:none; } } /* Eticheta albastra din galerie: text #297eff pe fundalul ei propriu (albastru 20% peste card, adica #0b1c37) da contrast 4,46 - sub pragul de 4,5. Se vedea abia acum, fiindca inainte blocurile erau invizibile si verificatorul nu le putea evalua. Albastru putin mai deschis => 5,6. `!important` in interiorul stratului, altfel utilitarul Tailwind castiga (vezi regula @layer). Selector pe atribut, nu pe container: aceeasi eticheta apare si in #galerie-*, si in #chantiers (Wavre), si prima varianta a ratat-o. */ [class*="bg-brandBlue/20"].text-brandBlue, [class*="bg-brandBlue/20"] .text-brandBlue{ color:#4d94ff !important; } /* Text ALB pe fundal viu = contrast prea mic (legea lui Johnny: niciodata deschis pe deschis). Masurat: alb pe portocaliu #e74104 = 4,07; alb pe albastru #2774e9 = 4,41; gri deschis pe magenta #ff1493 = 2,93 - toate sub pragul de 4,5. Inversul, negru pe aceeasi culoare vie, da 5,17 / 4,80 / 5,80 si se potriveste cu limbajul neon al sitului. */ [class*="bg-neonOrange/90"], [class*="bg-neonOrange/90"] *, [class*="bg-brandBlue/90"], [class*="bg-brandBlue/90"] *, button[class*="bg-neonMagenta"], button[class*="bg-neonMagenta"] *{ color:#000 !important; } .text-balance { text-wrap: balance; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.1); opacity: 0.8; } } .ambient-orb { animation: breathe 8s infinite alternate ease-in-out; } .brand-logo-container { display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; height: 100%;} .brand-logo-container:hover { transform: scale(1.02); } @keyframes massiveBreathe { 0%, 100% { filter: drop-shadow(0 0 4px rgba(0,255,255,0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 12px rgba(0,255,255,0.8)); transform: scale(1.03); } } @keyframes elegantSparkle { 0%, 80%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 90% { opacity: 1; transform: scale(1.2) rotate(45deg); filter: drop-shadow(0 0 5px #FFF); } } .luxury-sparkle { animation: elegantSparkle 6s ease-in-out infinite; transform-origin: center; fill: #FFF;} .font-logo { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: -0.05em; } header { background: rgba(3, 4, 5, 0.95); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); top: 0 !important; margin: 0 !important; width: 100% !important; left: 0 !important; border-radius: 0 !important; animation: headerGlow 4s infinite alternate ease-in-out; } .nav-link { position: relative; transition: all 0.3s ease; display: inline-flex; align-items: center; height: 100%; color: #D1D5DB; } .nav-link:hover::after { width: 100%; } .dropdown { display: inline-flex; align-items: center; height: 100%; position: relative;} .dropdown:hover .dropdown-menu { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-item-hover:hover { padding-left: 1.5rem; background: rgba(255,255,255,0.03); } .anim-exclam { animation: exclamPulseSync 4s infinite ease-in-out; display: inline-block; transform-origin: bottom center; margin-left: 0.25rem;} @keyframes sharpRing { 0%, 80%, 100% { transform: rotate(0deg); filter: drop-shadow(0 0 2px currentColor); } 82%, 86%, 90%, 94%, 98% { transform: rotate(-8deg) scale(1.1); filter: drop-shadow(0 0 10px currentColor); } 84%, 88%, 92%, 96% { transform: rotate(8deg) scale(1.1); filter: drop-shadow(0 0 10px currentColor); } } @keyframes expandGlowRing { 0% { transform: scale(0.8); opacity: 1; box-shadow: 0 0 10px currentColor; border-width: 2px; } 100% { transform: scale(2.2); opacity: 0; box-shadow: 0 0 40px currentColor; border-width: 0px; } } .ring-expand { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: expandGlowRing 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 0; } .btn-glass-hero { position: relative; background: rgba(10, 12, 16, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; display: flex; align-items: center; overflow: hidden; border: 2px solid transparent; background-clip: padding-box; transition: all 0.4s ease; } .btn-glass-hero::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); transition: 0.6s; z-index: 1; pointer-events: none; } .btn-glass-hero:hover::before { left: 150%; } .icon-circle-glass { position: relative; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; z-index: 10; border: 1px solid currentColor;} @keyframes floatIconCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5)); } } .card-icon-live { animation: floatIconCard 3.5s ease-in-out infinite; transition: all 0.4s ease; display: inline-block; } @keyframes woodBreathExtreme { 0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0px transparent); } 50% { transform: scale(1.15) rotate(2deg); filter: drop-shadow(0 0 8px currentColor); } } @keyframes thermalPulse { 0%, 100% { filter: drop-shadow(0 0 0px transparent); transform: scale(1); } 50% { filter: drop-shadow(0 0 12px currentColor); transform: scale(1.1); } } .anim-pvc-therm { animation: thermalPulse 3s infinite ease-in-out; display: inline-block; } @keyframes shieldBlock { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px currentColor); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 15px currentColor); } } .anim-shield-block { animation: shieldBlock 2s infinite ease-in-out; display: inline-block; } @keyframes slideLeftArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } } @keyframes slideRightArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .anim-slide-left { animation: slideLeftArrow 3s infinite ease-in-out; display: inline-block;} .anim-slide-right { animation: slideRightArrow 3s infinite ease-in-out; display: inline-block;} @keyframes animVoletsDown { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); filter: drop-shadow(0 0 8px currentColor); } } .anim-volets-roll path { transform-origin: top; animation: animVoletsDown 3.5s infinite ease-in-out; } @keyframes animForcefield { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; filter: drop-shadow(0 0 5px currentColor); } } .anim-forcefield { animation: animForcefield 2.5s infinite ease-in-out; display: inline-block; } @keyframes animRotateSunCenter { 100% { transform: rotate(360deg); } } .anim-spin-center { animation: animRotateSunCenter 10s linear infinite; transform-origin: center; display: inline-block;} @keyframes arrowContinuous { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); filter: drop-shadow(0 0 3px currentColor); } } .anim-arrow-continuous { animation: arrowContinuous 1.5s infinite ease-in-out; display: inline-block; } @keyframes laserScan { 0%, 100% { transform: translateY(-4px); filter: drop-shadow(0 2px 2px currentColor); } 50% { transform: translateY(4px); filter: drop-shadow(0 -2px 8px currentColor); } } .anim-laser-scan { animation: laserScan 2s infinite ease-in-out; display: inline-block; } @keyframes pulseFast { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px currentColor); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 15px currentColor); } } .anim-pulse-fast { animation: pulseFast 1.5s infinite ease-in-out; display: inline-block; } @keyframes softPulseIcon { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px currentColor); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 15px currentColor); } } .soft-pulse-icon { animation: softPulseIcon 2s infinite ease-in-out; display: inline-block; } .bento-card { background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, transparent 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0; transform: translateY(40px) scale(0.95); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden;} .bento-card-wide { flex-direction: row; justify-content: flex-start; gap: 16px; text-align: left; } @keyframes bentoPopMagic { 0% { opacity: 0; transform: translateY(50px) scale(0.9) rotateX(-5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } } #mobile-menu.active .bento-card:nth-child(n) { animation: bentoPopMagic 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .fab-wrapper { position: fixed; bottom: 24px; right: 24px; z-index: 9000; display: flex; flex-direction: column; align-items: center;} .fab-item:hover { transform: scale(1.15); } .fab-wrapper.active-fab .fab-options { opacity: 1; pointer-events: auto; transform: translateY(0); } .fab-wrapper.active-fab .fab-icon-close { transform: scale(1) rotate(0deg); opacity: 1; } .anim-typing-dot { animation: typingNatural 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1) both; display: inline-block; } @keyframes typingNatural { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; box-shadow: 0 0 8px currentColor;} } .fab-wrapper.active-fab .typing-indicator-main { opacity: 0 !important; display: none !important; transform: scale(0); } @keyframes syncShakeAll { 0%, 85%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px currentColor); } 88% { transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 10px currentColor); } 91% { transform: scale(1.05) rotate(5deg); filter: drop-shadow(0 0 5px currentColor); } 94% { transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 10px currentColor); } } .sync-all-anim { animation: syncShakeAll 5s infinite;} .fb-new-badge-container { position: absolute; top: -8px; right: -8px; z-index: 30;} @keyframes pulseNewBadge { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px #FF0000;} 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 20px #FF0000;} } .fb-new-badge { animation: pulseNewBadge 2s infinite ease-in-out; display: inline-block; background-color: #FF0000 !important; color: white !important; font-weight: 900 !important;} .timeline-step:last-child { margin-bottom: 0; } .star-anim-1 { animation: starPulse 2s infinite ease-in-out 0.0s; } .star-anim-2 { animation: starPulse 2s infinite ease-in-out 0.2s; } .star-anim-3 { animation: starPulse 2s infinite ease-in-out 0.4s; } .star-anim-4 { animation: starPulse 2s infinite ease-in-out 0.6s; } .star-anim-5 { animation: starPulse 2s infinite ease-in-out 0.8s; } .testimonial-card { background: rgba(10, 15, 20, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); padding: 1.5rem; border-radius: 1rem; transition: transform 0.3s ease; position: relative; border-top: 3px solid transparent;} .testimonial-card:hover { transform: translateY(-5px); } #lightbox { position: fixed; inset: 0; background: rgba(3,4,5,0.98); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 100000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 10px; } #lightbox.active { opacity: 1; pointer-events: auto; } .lightbox-content-wrapper { position: relative; max-width: 90%; max-height: 80vh; display: flex; align-items: center; justify-content: center; } #lightbox.active #lightbox-img { transform: scale(1); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 100002; width: 44px; height: 44px;} .lightbox-top-bar { position: absolute; top: 20px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; z-index: 100002; width: 100%; pointer-events: none;} .lightbox-close:hover { background: #FF1493; border-color: #FF1493; transform: rotate(90deg); box-shadow: 0 0 15px rgba(255,20,147,0.5);} #lightbox-caption { color: #fff; margin-top: 20px; text-align: center; max-width: 800px; padding: 0 20px;} details > summary { list-style: none; outline: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details.faq-item[open] summary ~ * { animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .table-seo td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .zone-tag-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); transition: 0.5s; } .siege-illuminated::before { display: none !important; } @keyframes rotateWindow { 0% { transform: rotateY(0deg) rotateX(15deg) rotateZ(5deg); } 100% { transform: rotateY(360deg) rotateX(15deg) rotateZ(5deg); } } @keyframes gridMoveExt { 0% { transform: translateY(0); } 100% { transform: translateY(80px); } } .q-glass-1 { transform: translateZ(80px); animation: pulseGlassExt 2s infinite alternate; } .q-glass-3 { transform: translateZ(-80px); animation: pulseGlassExt 2s infinite alternate-reverse; } @keyframes scanUpDownExt { 0% { top: -5%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } } @keyframes orbitParticleExt { 0% { transform: rotateY(0deg) translateZ(240px) translateY(-120px); } 100% { transform: rotateY(360deg) translateZ(240px) translateY(120px); } } .q-label { position: absolute; background: rgba(0, 0, 0, 0.95); border: 2px solid; padding: 10px 16px; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 900; color: #fff; border-radius: 8px; white-space: nowrap; pointer-events: none; transform-style: preserve-3d; backdrop-filter: blur(8px); box-shadow: 0 15px 40px rgba(0,0,0,0.9); } @keyframes floatLabelExt { 0%, 100% { transform: translateY(0) translateZ(90px) scale(1); filter: drop-shadow(0 0 15px currentColor); } 50% { transform: translateY(-30px) translateZ(90px) scale(1.15); filter: drop-shadow(0 0 40px currentColor); } } @view-transition{navigation:auto} @keyframes softPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.035) } } @keyframes paBurger{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(.7);opacity:1}} #mobile-menu-btn .pa-burger line{transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .2s ease} #mobile-menu-btn[aria-expanded="true"] .pa-burger line:nth-child(1){transform:translateY(6px) rotate(45deg)} #mobile-menu-btn[aria-expanded="true"] .pa-burger line:nth-child(2){opacity:0;transform:scaleX(.2)} #mobile-menu-btn[aria-expanded="true"] .pa-burger line:nth-child(3){transform:translateY(-6px) rotate(-45deg)} #mobile-menu-btn[aria-expanded="true"] .pa-burger{color:#FF4500} #mobile-menu::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45; background-image:linear-gradient(rgba(0,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.05) 1px,transparent 1px); background-size:46px 46px} #mobile-menu.active::before{animation:paGrid 26s linear infinite} @keyframes paGrid{to{background-position:46px 46px}} #mobile-menu::after{content:'';position:absolute;top:-16%;left:50%;width:150%;height:60%;transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse at center,rgba(0,255,255,.12),transparent 62%)} #mobile-menu.active::after{animation:paAura 7s ease-in-out infinite} @keyframes paAura{0%,100%{opacity:.45}50%{opacity:1}} /* ══════════ MENIUL MOBIL TAIAT JOS (reparat 12.08.2026) ══════════ Masurat pe meniul deschis: butoanele "WhatsApp" si "Appel" din .pa-foot stateau la y=1091..1145, cu ecranul terminat la y=720 - adica 371px sub marginea de jos, inaccesibile. Exact cele doua butoane reclamate de Johnny. Cauza: .pa-body e copil de flex cu `flex:1 1 0%` dar `min-height:auto` (implicit). In flexbox, min-height:auto IMPIEDICA elementul sa se micsoreze sub inaltimea continutului - deci in loc sa deruleze pe dinauntru, se revarsa in afara containerului fix si restul se pierde. `min-height:0` il lasa sa se micsoreze si sa devina zona derulabila reala. In plus, .pa-foot devine lipit jos: butoanele de contact raman VIZIBILE tot timpul, deci nu se mai pot pierde nici daca derularea interna cedeaza. */ #mobile-menu .pa-body{ min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-left: 16px; /* pierduta la dedup-ul de CSS din 05.08, repusa */ padding-right: 16px; } #mobile-menu .pa-body::-webkit-scrollbar{display:none} #mobile-menu .pa-sep{display:flex;align-items:center;gap:12px;margin:16px 2px 11px;opacity:.8} #mobile-menu .pa-sep i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,255,.35),transparent)} #mobile-menu .pa-sep b{font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap} #mobile-menu .pa-hero{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:17px; text-decoration:none;overflow:hidden;background:linear-gradient(135deg,rgba(0,255,255,.14),rgba(0,255,255,.05)); border:1px solid rgba(0,255,255,.36);border-bottom:2px solid #00FFFF;box-shadow:0 6px 26px rgba(0,255,255,.1); transition:transform .2s} #mobile-menu .pa-hero:active{transform:scale(.97)} #mobile-menu .pa-hero .bx{width:30px;height:30px;border-radius:9px;background:rgba(0,255,255,.22);display:flex;align-items:center; justify-content:center;color:#00FFFF;flex-shrink:0;animation:paBoxBreath 3s ease-in-out infinite} @keyframes paBoxBreath{0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(0,255,255,.35)}50%{transform:scale(1.06);box-shadow:0 0 26px rgba(0,255,255,.5)}} #mobile-menu .pa-hero .t{font-family:'Montserrat',sans-serif;font-weight:900;font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.08em} #mobile-menu .pa-hero .s{font-size:9.5px;font-weight:800;color:#00FFFF;text-transform:uppercase;letter-spacing:.12em;margin-top:3px} #mobile-menu .pa-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px} #mobile-menu .pa-card.wide{grid-column:span 2;min-height:86px;flex-direction:row;gap:12px} #mobile-menu .pa-card:active{transform:scale(.955)} #mobile-menu.active .pa-hero,#mobile-menu.active .pa-card,#mobile-menu.active .pa-sep{ animation:paPop .5s cubic-bezier(.16,1,.3,1) backwards} @keyframes paPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} #mobile-menu.active .pa-hero{animation-delay:.05s} #mobile-menu.active .pa-g2 .pa-card:nth-child(1){animation-delay:.12s} #mobile-menu.active .pa-g2 .pa-card:nth-child(2){animation-delay:.18s} #mobile-menu.active .pa-g2 .pa-card:nth-child(3){animation-delay:.24s} #mobile-menu.active .pa-g2 .pa-card:nth-child(4){animation-delay:.30s} #mobile-menu .k1{color:#00FFFF} #mobile-menu .k2{color:#0066FF} #mobile-menu .k3{color:#FF4500} #mobile-menu .k4{color:#D4AF37} #mobile-menu .k5{color:#fff} #mobile-menu .k6{color:#39ff14} #mobile-menu .k7{color:#FF1493} .st-card::before{content:'';position:absolute;top:9px;right:9px;width:13px;height:13px;border-top:2px solid rgba(255,255,255,.25);border-right:2px solid rgba(255,255,255,.25);border-radius:1px} .st-card::after{content:'';position:absolute;left:9px;bottom:9px;width:13px;height:13px;border-bottom:2px solid rgba(255,255,255,.25);border-left:2px solid rgba(255,255,255,.25);border-radius:1px} .st-tile svg{width:24px;height:24px} .st-val{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.05rem,4.6vw,1.9rem);color:#fff;letter-spacing:-.01em;line-height:1.1} @keyframes stLine{0%,100%{opacity:.22;transform:scaleX(.65)}50%{opacity:.8;transform:scaleX(1)}} .st-card:nth-child(2) .st-line{animation-delay:.45s} .st-card:nth-child(3) .st-line{animation-delay:.9s} .st-card:nth-child(4) .st-line{animation-delay:1.35s} .st-cyan{color:#00FFFF} .st-cyan .st-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .st-orange{color:#FF4500} .st-orange .st-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .st-blue{color:#0066FF} .st-blue .st-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .st-green{color:#39ff14} .st-green .st-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .st-therm{animation:stTherm 3s ease-in-out infinite} @keyframes stTherm{0%,100%{filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}50%{filter:drop-shadow(0 0 10px currentColor);transform:scale(1.08)}} .st-w1{animation:stWave 2.6s ease-in-out infinite} .st-w2{animation:stWave 2.6s ease-in-out .3s infinite} @keyframes stWave{0%,100%{opacity:.3}40%{opacity:1}} .st-shield{animation:stShield 3.2s ease-in-out infinite;transform-origin:center} @keyframes stShield{0%,60%,100%{transform:scale(1)}70%{transform:scale(.94)}80%{transform:scale(1.1);filter:drop-shadow(0 0 10px currentColor)}} @keyframes stLeaf{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg);filter:drop-shadow(0 0 7px currentColor)}} .st-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3);box-shadow:0 14px 34px rgba(0,0,0,.5)} .st-line,.st-therm,.st-w1,.st-w2,.st-shield,.st-leaf{animation:none!important;opacity:1!important} #mobile-menu.active .pa-card .bx{animation:paHello .65s cubic-bezier(.34,1.56,.64,1) backwards} #mobile-menu.active .pa-g2:nth-of-type(1) .pa-card:nth-child(1) .bx{animation-delay:.42s} #mobile-menu.active .pa-g2:nth-of-type(1) .pa-card:nth-child(2) .bx{animation-delay:.50s} #mobile-menu.active .pa-g2:nth-of-type(1) .pa-card:nth-child(3) .bx{animation-delay:.58s} #mobile-menu.active .pa-g2:nth-of-type(1) .pa-card:nth-child(4) .bx{animation-delay:.66s} #mobile-menu.active .pa-g2:nth-of-type(2) .pa-card:nth-child(1) .bx{animation-delay:.74s} #mobile-menu.active .pa-g2:nth-of-type(2) .pa-card:nth-child(2) .bx{animation-delay:.82s} #mobile-menu.active .pa-g2:nth-of-type(2) .pa-card:nth-child(3) .bx{animation-delay:.90s} #mobile-menu.active .pa-g2:nth-of-type(3) .pa-card:nth-child(1) .bx{animation-delay:.98s} #mobile-menu.active .pa-g2:nth-of-type(3) .pa-card:nth-child(2) .bx{animation-delay:1.06s} #mobile-menu.active .pa-g2:nth-of-type(3) .pa-card:nth-child(3) .bx{animation-delay:1.14s} #mobile-menu.active .pa-g2:nth-of-type(3) .pa-card:nth-child(4) .bx{animation-delay:1.22s} @keyframes paHello{0%{transform:scale(.3) rotate(-14deg)}62%{transform:scale(1.18) rotate(7deg)}100%{transform:scale(1) rotate(0)}} #mobile-menu.active .pa-hero::after{animation:paComet 4.6s ease-in-out infinite} @keyframes paComet{0%,52%{transform:translateX(-109%);opacity:0}58%{opacity:.9}100%{transform:translateX(350%);opacity:0}} #mobile-menu.active .pa-g2 .pa-card:nth-child(odd){animation:paPop .5s cubic-bezier(.16,1,.3,1) backwards, paFloat 5s ease-in-out 1.4s infinite} #mobile-menu.active .pa-g2 .pa-card:nth-child(even){animation:paPop .5s cubic-bezier(.16,1,.3,1) backwards, paFloat 5s ease-in-out 3.9s infinite} @keyframes paFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* sticky, nu relative: butoanele WhatsApp/Appel raman lipite jos in zona derulabila a meniului, deci sunt vizibile mereu. Inainte plecau la y=1091 pe un ecran de 720 si nu se mai putea ajunge la ele. */ #mobile-menu .pa-foot{position:sticky;bottom:0;z-index:3;display:flex;gap:10px;margin-top:14px; padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to top,#030405 55%,rgba(3,4,5,0))} #mobile-menu .pa-cta{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:11px;height:56px;border-radius:17px; text-decoration:none;overflow:hidden;font-family:'Montserrat',sans-serif;font-weight:900;font-size:15px; letter-spacing:-.005em;text-transform:none;border:1.5px solid;transition:transform .2s,box-shadow .3s} #mobile-menu .pa-cta:active{transform:scale(.96)} #mobile-menu .pa-cta .pill{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} #mobile-menu .pa-cta.wa .pill svg{width:26.4px;height:26.4px} #mobile-menu .pa-cta.tl .pill svg{width:19.8px;height:19.8px} #mobile-menu.active .pa-cta::after{animation:paCtaSheen 5.5s ease-in-out infinite} @keyframes paCtaSheen{0%,55%{transform:skewX(-18deg) translateX(-254%)}88%,100%{transform:skewX(-18deg) translateX(327%)}} #mobile-menu .pa-cta.wa{color:#39ff14;border-color:rgba(57,255,20,.5); background:linear-gradient(150deg,rgba(57,255,20,.16),rgba(57,255,20,.05));box-shadow:0 4px 20px rgba(57,255,20,.14)} #mobile-menu .pa-cta.wa .pill{background:rgba(57,255,20,.2);box-shadow:0 0 14px rgba(57,255,20,.3);animation:paBubble 1.4s ease-in-out infinite} #mobile-menu .pa-cta.tl{color:#00FFFF;border-color:rgba(0,255,255,.5); background:linear-gradient(150deg,rgba(0,255,255,.16),rgba(0,255,255,.05));box-shadow:0 4px 20px rgba(0,255,255,.14)} #mobile-menu .pa-cta.tl .pill{background:rgba(0,255,255,.2);box-shadow:0 0 14px rgba(0,255,255,.3);position:relative;overflow:visible} #mobile-menu .pa-cta.tl::after{animation-delay:2.7s} #mobile-menu .bubble .dot{fill:#39ff14;transform-box:fill-box;transform-origin:center; animation:paTyping 1.4s infinite cubic-bezier(.4,0,.2,1) both} #mobile-menu .bubble .dot:nth-of-type(1){animation-delay:-.32s} #mobile-menu .bubble .dot:nth-of-type(2){animation-delay:-.16s} @keyframes paTyping{0%,62%,100%{transform:translateY(0) scale(.88);opacity:.45}13%{transform:translateY(-2.6px) scale(1.15);opacity:1}27%{transform:translateY(.8px) scale(.95);opacity:.7}38%{transform:translateY(0) scale(1);opacity:.55}} @keyframes paBubble{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} #mobile-menu .pa-cta.tl .rng{position:absolute;inset:0;border-radius:50%;border:1px solid #00FFFF;pointer-events:none; animation:paRingOut 2.8s cubic-bezier(.16,1,.3,1) infinite} #mobile-menu .pa-cta.tl .rng.r2{animation-delay:.93s} #mobile-menu .pa-cta.tl .rng.r3{animation-delay:1.86s} @keyframes paRingOut{0%{transform:scale(.92);opacity:.34}100%{transform:scale(1.5);opacity:0}} @keyframes paTherm{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 11px currentColor)}} .pa-therm{animation:paTherm 3s ease-in-out infinite} @keyframes paAlu{0%,88%,100%{transform:translateX(0)}91%{transform:translateX(-1px)}94%{transform:translateX(1px)}97%{transform:translateX(-.5px)}} .pa-alu{animation:paAlu 4s ease-in-out infinite} @keyframes paWood{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(1.4deg);filter:drop-shadow(0 0 7px currentColor)}} .pa-wood{animation:paWood 3.6s ease-in-out infinite;transform-origin:bottom center} @keyframes paSlat{0%,12%{opacity:0;transform:translateY(-7px)}22%,72%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-7px)}} .pa-roll line{animation:paSlat 3.6s ease-in-out infinite} .pa-roll line:nth-child(2){animation-delay:.16s} .pa-roll line:nth-child(3){animation-delay:.32s} .pa-roll line:nth-child(4){animation-delay:.48s} @keyframes paMesh{0%,100%{opacity:.5}50%{opacity:1;filter:drop-shadow(0 0 6px currentColor)}} .pa-mesh{animation:paMesh 2.4s ease-in-out infinite} @keyframes paSun{to{transform:rotate(360deg)}} .pa-sun{animation:paSun 12s linear infinite;transform-origin:center} @keyframes paRays{0%,100%{opacity:.55}50%{opacity:1}} .pa-sun .r{animation:paRays 2.6s ease-in-out infinite} @keyframes paSlideL{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}} @keyframes paSlideR{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} .pa-sl{animation:paSlideL 3s ease-in-out infinite} .pa-sr{animation:paSlideR 3s ease-in-out infinite} @keyframes paRing{0%,72%,100%{transform:rotate(0)}75%,83%,91%{transform:rotate(-10deg) scale(1.07)}79%,87%,95%{transform:rotate(10deg) scale(1.07)}} .pa-ring{animation:paRing 3.6s ease-in-out infinite;transform-origin:center} @keyframes paEuro{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}50%{transform:scale(1.16);filter:drop-shadow(0 0 11px currentColor)}} .pa-euro{animation:paEuro 2.8s ease-in-out infinite;transform-origin:center} @keyframes paHouse{0%,100%{transform:scale(1)}50%{transform:scale(1.13);filter:drop-shadow(0 0 9px currentColor)}} .pa-house{animation:paHouse 3s ease-in-out infinite;transform-origin:center} @keyframes paLens{0%,100%{transform:scale(1)}50%{transform:scale(1.12);filter:drop-shadow(0 0 8px currentColor)}} .pa-lens{animation:paLens 2.8s ease-in-out infinite} .pa-book path:nth-child(2){animation:paPage 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:left center} @keyframes paPage{0%,55%,100%{transform:scaleX(1);opacity:1}68%{transform:scaleX(.78);opacity:.75}82%{transform:scaleX(1.03);opacity:1}} @keyframes paPin{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-5px)}90%{transform:translateY(-2px)}} .pa-pin{animation:paPin 3.4s ease-in-out infinite} /* ══════ ZONA DE ATINS 44px PE ETICHETELE DE COMUNA (06.08) ══════ .zone-tag-link e 143x35px -- sub pragul Apple HIG de 44px. Pseudo-elementul invizibil clasic NU merge aici: etichetele se infasoara pe mai multe randuri cu doar 8px gol intre randuri, deci ar extinde zona de atins peste rândul vecin (exact capcana documentata -- "padding + margin negativ NU merge pe liste care se rup pe mai multe randuri"). Solutia: min-height REAL pe cutie, ca randurile insesi sa creasca (gap-ul de layout ramane corect). */ @media (max-width: 939px) { .zone-tag-link { min-height: 44px; display: inline-flex; align-items: center; } } /* ══════ BUTONUL DE TELEFON DIN HEADER, 40px -> 44px (06.08) ══════ Buton izolat in header (nu se infasoara ca zone-tag-link), deci fara riscul de mai sus. w-[40px]/h-[40px] sunt utilitare Tailwind arbitrare -- !important obligatoriu fiindca sunt intr-un layer care bate blocul de fata (@layer base). */ @media (max-width: 939px) { a[aria-label="Appeler pour urgence châssis"] { width: 44px !important; height: 44px !important; } } /* ══════ FOCUS VIZIBIL: navigarea cu Tab nu mai e oarba (06.08) ══════ outline:none/outline-none era taiat pe butonul de meniu si pe toate

FAQ, fara inlocuitor -- cine navigheaza cu tastatura nu vedea NIMIC unde e. Deja testat si activ pe index01.html; extins acum peste tot prin fisierul comun. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #00FFFF !important; outline-offset: 3px; border-radius: 6px; } /* ══════ REDUCED MOTION GLOBAL (06.08) ══════ Kill-switch complet pentru cine cere liniste din sistem -- opreste TOATE animatiile/ tranzitiile deodata, nu doar cele 2-3 acoperite punctual pe fiecare pagina. Deja testat si activ pe index01.html; extins acum peste tot. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══════════════ PANOU FARA FOTOGRAFIE (10.08.2026) ══════════════ Inainte, cardurile de galerie fara poza reala afisau o imagine neagra pe care scria "PHOTO DE CHANTIER A VENIR". Pentru un client care intra prima data pe sit, aia striga "firma fara lucrari" - exact impresia proasta semnalata de Johnny. Acum locul e ocupat de un panou grafic care arata INTENTIONAT: pictograma de fereastra + eticheta tipului de lucrare, in culorile marcii. Nicio promisiune, nicio poza lipsa. Se inlocuieste cand vin fotografiile reale. */ .pa-nophoto{ position:relative; width:100%; height:100%; min-height:210px; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; /* Implicit pictograma sta la mijloc: pe majoritatea paginilor legenda cardului curge SUB panou, deci n-avem de ce rezerva loc jos. */ padding-bottom:0; background: radial-gradient(circle at 50% 32%, rgba(0,255,255,.08), transparent 62%), linear-gradient(158deg,#070c0f 0%,#0d161a 100%); overflow:hidden; } /* trama fina de fundal, aceeasi limbaj vizual ca restul sitului */ /* Varianta pentru cele 7 pagini unde .gallery-overlay e position:absolute si asaza titlul PESTE zona imaginii. Acolo pictograma trebuie urcata, altfel se incaleca peste badge si titlu (masurat pe realisations.html). */ .pa-nophoto--suprapus{ padding-bottom:46%; } .pa-nophoto::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: linear-gradient(to right, rgba(0,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,255,255,.045) 1px, transparent 1px); background-size:34px 34px; } /* !important: CSS-ul per-pagina (si utilitarele Tailwind, aflate intr-un layer superior lui @layer base) intindeau pictograma la toata latimea cardului - masurat 296px in loc de 44px pe realisations.html. */ .pa-nophoto svg{ width:44px !important; height:44px !important; max-width:44px !important; flex:0 0 auto !important; color:rgba(0,255,255,.42) !important; position:relative; z-index:1; } .pa-nophoto b{ position:relative; z-index:1; font-family:'Montserrat','Montserrat Fallback',sans-serif; font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.38); text-align:center; padding:0 14px; line-height:1.5; } } /* ═══════════════════════════════════════════════════════════════════════════ 19.08.2026 — BUTOANELE DIN MENIU NU MAI SUNT TRANSPARENTE --------------------------------------------------------------------------- Johnny, de pe telefon: „butoanele din meniul mobile sunt foarte de aiurea". Captura lui arata textul unui card („CONTROLE & CONFORT") citindu-se PRIN butoanele WhatsApp si Appel. Cauza, masurata live: cele doua butoane au ca fundal doar un degradeu de culoare la 16% -> 5% opacitate. Adica sunt 84-95% transparente, iar bara care le tine (.pa-foot) e lipita jos (sticky) si pluteste peste grila de carduri. Rezultat: cardul de dedesubt se citeste prin buton. Reparatia pastreaza EXACT aspectul de sticla colorata: degradeul ramane neschimbat, dar primeste dedesubt un strat opac din culoarea de fundal a marcii. Doua straturi de fundal pe acelasi element — degradeul deasupra, culoarea plina dedesubt. Zero cost de performanta, zero schimbare de nuanta. Se pune in pa-comun.css, deci se aplica pe toate paginile deodata. ═══════════════════════════════════════════════════════════════════════════ */ #mobile-menu .pa-cta.wa{ background:linear-gradient(150deg,rgba(57,255,20,.16),rgba(57,255,20,.05)),var(--c-bg-4,#0a0f14); } #mobile-menu .pa-cta.tl{ background:linear-gradient(150deg,rgba(0,255,255,.16),rgba(0,255,255,.05)),var(--c-bg-4,#0a0f14); } /* Fasia subtire dintre si deasupra butoanelor: degradeul barei devine opac mai devreme (78% in loc de 55%), ca sa nu se vada cardul nici prin spatiul dintre ele. Marginea de sus ramane estompata — asta e efectul dorit, nu un defect. */ #mobile-menu .pa-foot{ background:linear-gradient(to top,#030405 78%,rgba(3,4,5,.72) 91%,rgba(3,4,5,0)); } /* ═══════════════════════════════════════════════════════════════════════════ 19.08.2026 — BUTOANELE NU MAI PLUTESC PESTE MENIU --------------------------------------------------------------------------- Cererea lui Johnny, textual: „de stateau lipite de JOS-ul meniului, dar asa floating pe deasupra la restul meniului... Nu vreau!" si „meniul mobile SE TERMINA dupa ultima iconita din meniu". Erau `position:sticky; bottom:0` — adica se lipeau de marginea de jos a zonei care se deruleaza si treceau peste carduri. De-aia aveau nevoie de un degradeu care sa ascunda ce trece pe dedesubt, si tot de-aia parea ca „se misca la scroll". Acum curg natural, ca ultimul rand din meniu. Meniul se termina dupa ele. Fara plutire, fara degradeu de mascare, fara nimic care trece pe dedesubt. ═══════════════════════════════════════════════════════════════════════════ */ #mobile-menu .pa-foot{ position:static; background:none; margin-top:18px; padding:0 0 calc(8px + env(safe-area-inset-bottom, 0px)); } /* ═══════════════════════════════════════════════════════════════════════════ 20.08.2026 — AERUL DERULABIL DE SUB BUTOANELE WhatsApp / Appel --------------------------------------------------------------------------- Johnny, dupa ce derularea s-a reparat: „meniul mobile dau scroll chiar si dupa cele 2 butoane de jos apel si WhatsApp". Masurat pe meniul deschis: 31px de gol care se derula sub butoane. Veneau din DOUA padding-uri suprapuse, puse in doua locuri diferite: 18px din `#mobile-menu .pa-body{ padding:14px 14px calc(18px + env(...)) }` — regula din