/* Theme Name: Avisa Theme URI: https://avisasystems.com Author: Green Project Description: Tema proprie pentru landing page-ul Avisa — automatizare, inteligență artificială și asistență umană pentru produse reglementate. Version: 0.1.0 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: avisa */ /* ========================================================================== 0. Sumar 1. Resetare și tipografie de bază 2. Tokenuri (culori, spațiere, umbre) 3. Structură generală (invelis, sectiuni) 4. Antet 5. Erou 6. Cum funcționează 7. Aplicații 8. Conformitate 9. Banda finală de CTA 10. Subsol 11. Componente comune (butoane, cartonașe, etichete) 12. Animații și `prefers-reduced-motion` 13. Responsive ========================================================================== */ /* ========================================================================== 1. Resetare și tipografie de bază ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--f-text); font-size: 1rem; line-height: 1.6; color: var(--navy); background: var(--fundal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3, h4 { font-family: var(--f-titlu); color: var(--navy); line-height: 1.15; text-wrap: balance; } /* ========================================================================== 2. Tokenuri ========================================================================== */ :root { /* --- Culori de brand, culese din machetă (layout_landingpage.png) --- */ --navy: #071c3f; /* text principal, titluri */ --navy-adanc: #001a36; /* banda finală, fundal închis */ --albastru: #2483f0; /* iconițe, accente */ --verde: #6fa83c; /* CTA, evidențieri */ --verde-inchis:#5c9130; /* --- Neutre, cu o urmă de albastru — nu gri pur --- */ --fundal: #ffffff; --fundal-alt: #f4f7fb; --fundal-navy-alt: #eef2f7; --chenar: #e2e8f0; --text-stins: #52607a; /* --- Tipografie --- */ --f-titlu: 'Avisa Display', 'Plus Jakarta Sans', system-ui, sans-serif; --f-text: 'Avisa Text', 'Inter', system-ui, sans-serif; /* --- Spațiere, pe o scară de 4px --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; --raza: 14px; --raza-mica: 8px; --raza-pastila: 999px; --umbra: 0 12px 32px -12px rgb(7 28 63 / 0.16); --umbra-mica: 0 6px 16px -8px rgb(7 28 63 / 0.18); --latime-maxima: 1200px; } /* --- Fonturi locale, auto-găzduite — fără cereri către Google Fonts. Sunt fonturi variabile (un singur fișier acoperă tot intervalul de grosime), de-aia `font-weight` e un interval, nu o cifră. --- */ @font-face { font-family: 'Avisa Text'; src: url('assets/fonts/inter_400_latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Avisa Text'; src: url('assets/fonts/inter_400_latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+0304, U+0308, U+1E00-1E9F, U+2020; } @font-face { font-family: 'Avisa Display'; src: url('assets/fonts/pjs_500_latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Avisa Display'; src: url('assets/fonts/pjs_500_latin-ext.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+0304, U+0308, U+1E00-1E9F, U+2020; } /* ========================================================================== 3. Structură generală ========================================================================== */ .invelis { max-width: var(--latime-maxima); margin-inline: auto; padding-inline: var(--sp-5); } .sectiune { padding-block: var(--sp-9); } .sectiune--stransa { padding-block: var(--sp-8); } .eticheta { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-inchis); } .eticheta::before { content: ''; width: 20px; height: 3px; background: var(--verde); border-radius: var(--raza-pastila); } .titlu-sectiune { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 800; margin-block: var(--sp-3) var(--sp-4); } .titlu-sectiune .accent { color: var(--verde); } .sectiune__intro { max-width: 42rem; color: var(--text-stins); font-size: 1.08rem; } /* ========================================================================== 4. Antet ========================================================================== */ .antet { position: sticky; top: 0; z-index: 40; /* Transparent, la cererea lui Ion — fără blur, altfel ar rămâne o bandă „înghețată" fără culoare peste erou. */ background: transparent; border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; } .antet--derulat { border-bottom-color: var(--chenar); box-shadow: 0 8px 24px -18px rgb(7 28 63 / .35); } .antet__interior { display: flex; align-items: center; /* Meniul stă lângă siglă (48px), nu împins în marginea dreaptă — cerut de Ion după ce butonul a dispărut din antet și `space-between` lăsa un gol mare între ele. Hamburgerul rămâne în dreapta prin `margin-inline-start`. */ justify-content: flex-start; gap: var(--sp-7); padding-block: var(--sp-3); } .antet__interior > .meniu-comutator { margin-inline-start: auto; } .sigla { display: flex; align-items: center; gap: var(--sp-2); } /* Sigla oficială (simbol + nume + motto într-o singură imagine), decupată strâns din fișierele puse de Ion în bibliotecă: landscape (720×221) în antet, pătrată (528×440) în subsol. Se dă doar înălțimea; lățimea vine din proporție. */ .sigla__imagine { display: block; height: 60px; width: auto; max-width: none; flex: none; } /* În subsol, varianta pătrată (simbolul deasupra numelui) — aleasă de Ion. */ .subsol .sigla__imagine--patrat { height: 150px; } @media (max-width: 40em) { .sigla__imagine { height: 48px; } .subsol .sigla__imagine--patrat { height: 124px; } } .meniu-principal { display: flex; align-items: center; gap: var(--sp-6); } .meniu-principal__lista { display: flex; gap: var(--sp-5); font-size: 0.94rem; font-weight: 600; } .meniu-principal__lista a { position: relative; padding-block: var(--sp-2); color: var(--navy); white-space: nowrap; transition: color .2s ease; } .meniu-principal__lista a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .meniu-principal__lista a:hover { color: var(--verde-inchis); } .meniu-principal__lista a:hover::after { transform: scaleX(1); } .meniu-comutator { display: none; flex: none; width: 40px; height: 40px; border: 1px solid var(--chenar); border-radius: var(--raza-mica); background: var(--fundal); align-items: center; justify-content: center; } .meniu-comutator__linie, .meniu-comutator__linie::before, .meniu-comutator__linie::after { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .meniu-comutator__linie { position: relative; } .meniu-comutator__linie::before, .meniu-comutator__linie::after { content: ''; position: absolute; left: 0; } .meniu-comutator__linie::before { top: -6px; } .meniu-comutator__linie::after { top: 6px; } .antet[data-deschis="true"] .meniu-comutator__linie { background: transparent; } .antet[data-deschis="true"] .meniu-comutator__linie::before { transform: translateY(6px) rotate(45deg); } .antet[data-deschis="true"] .meniu-comutator__linie::after { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== 11. Componente comune ========================================================================== */ .buton { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.85rem 1.5rem; border-radius: var(--raza-pastila); border: 1px solid transparent; font-weight: 700; font-size: 0.98rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .buton svg { width: 18px; height: 18px; transition: transform .2s ease; } .buton:hover svg { transform: translateX(3px); } .buton--plin { background: var(--verde); color: #fff; box-shadow: var(--umbra-mica); } .buton--plin:hover { background: var(--verde-inchis); transform: translateY(-2px); box-shadow: var(--umbra); } .buton--contur { border-color: var(--navy); color: var(--navy); background: transparent; } .buton--contur:hover { background: var(--navy); color: #fff; transform: translateY(-2px); } .buton--contur-deschis { border-color: color-mix(in srgb, #fff 35%, transparent); color: #fff; background: color-mix(in srgb, #fff 8%, transparent); } .buton--contur-deschis:hover { background: #fff; color: var(--navy-adanc); } /* Cartonaș generic — icon, titlu, text — refolosit la pilonii din erou, aplicații și conformitate, ca să nu redesenăm aceeași cutie de patru ori. */ .cartonas { background: var(--fundal); border: 1px solid var(--chenar); border-radius: var(--raza); padding: var(--sp-5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .cartonas:hover { transform: translateY(-4px); box-shadow: var(--umbra); border-color: color-mix(in srgb, var(--verde) 40%, var(--chenar)); } .pictograma { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--albastru) 10%, transparent); color: var(--albastru); flex: none; } .pictograma svg, .pictograma img { width: 26px; height: 26px; object-fit: contain; } .pictograma--verde { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde-inchis); } /* ========================================================================== 5. Erou ========================================================================== */ /* Fotografia camerei + automatul e fundal pe tot eroul, ca în machetă — nu o poză încasetată lângă text. Gradientul o pregătește pentru text: partea stângă a fotografiei e deja deschisă la culoare (podea, pereți albi), dar gradientul o garantează, indiferent de lățimea ecranului sau de unde taie `cover`. */ .erou { position: relative; overflow: hidden; min-height: 44rem; display: flex; align-items: center; padding-block: var(--sp-8) var(--sp-9); background-image: linear-gradient(100deg, var(--fundal) 26%, color-mix(in srgb, var(--fundal) 62%, transparent) 46%, color-mix(in srgb, var(--fundal) 12%, transparent) 64%, transparent 76%), url('assets/img/hero-masina.webp'); background-size: cover; background-position: right center; background-repeat: no-repeat; } /* `width: 100%`, nu doar `max-width` moștenit: `.erou` e flex, iar fără lățime explicită, cutia s-ar strânge pe conținutul din interior (textul îngust) și `margin-inline: auto` de la `.invelis` ar centra-o pe EA — nu pe pagina întreagă — smulgând textul din alinierea celorlalte secțiuni. */ .erou__grid { position: relative; width: 100%; } /* Lățimea textului se pune pe conținut, nu pe cutia de-afară: rămâne la marginea stângă standard, iar restul lățimii arată fotografia. */ .erou__continut { max-width: 30rem; } /* Text simplu peste fotografie, fără cartonaș — exact ca-n referință: zona din dreapta-jos a automatului e suficient de luminoasă (aproape albă) cât textul cu accent verde să rămână lizibil fără fundal propriu. */ .erou__eticheta-foto { position: absolute; z-index: 2; right: clamp(1rem, 4vw, 4rem); bottom: clamp(4rem, 12vh, 7rem); max-width: 11rem; font-size: 0.85rem; font-weight: 800; line-height: 1.4; color: var(--navy); text-align: right; text-shadow: 0 1px 12px rgb(255 255 255 / .8), 0 1px 2px rgb(255 255 255 / .9); } .erou__eticheta-foto::after { content: ''; display: block; margin-inline-start: auto; margin-block-start: var(--sp-2); width: 24px; height: 3px; background: var(--verde); border-radius: var(--raza-pastila); } .erou__titlu { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; } .erou__titlu span { display: block; } .erou__titlu .accent { color: var(--verde); } .erou__sub { margin-block-start: var(--sp-4); font-size: 1.15rem; color: var(--text-stins); max-width: 32rem; } .erou__piloni { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-block: var(--sp-6); } .pilon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); } /* Pictogramele 05/06/07 din setul de brand vin deja cu inelul lor colorat — nu se mai adaugă un fundal circular peste, ca la aplicații/conformitate. */ .pilon__icon { width: 48px; height: 48px; object-fit: contain; } .pilon__titlu { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); } .pilon__text { font-size: 0.82rem; color: var(--text-stins); } /* ========================================================================== 6. Cum funcționează ========================================================================== */ /* Curba albă de sus e parte din chiar această imagine — nu un contur desenat separat. Poziționată sus-stânga, ca-n machetă; la `top right` (varianta dinainte) curba cădea în afara cadrului, complet nevăzută. */ .proces { background-color: var(--fundal-alt); background-image: url('assets/img/proces-fundal.webp'); background-repeat: no-repeat; background-size: 100%; background-position: top left; position: relative; overflow: hidden; } .proces__cap { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--sp-6); margin-block-end: var(--sp-8); } .proces__eticheta-laterala { font-family: var(--f-titlu); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-stins); text-align: right; /* Împinsă dincolo de marginea lui `.invelis`, spre chiar marginea secțiunii — `.proces` are `overflow: hidden`, deci nu iese din cadru. */ transform: translateX(3.5rem); line-height: 1.6; } /* Șase pași, cinci săgeți — coloane alternate, ca săgeata să cadă mereu exact între doi pași, indiferent de lățimea rândului. */ .pasi { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr; align-items: start; position: relative; } .pas { grid-row: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding-inline: var(--sp-1); } /* Cercul pictogramei, cu firul scurt către cercul numărului de dedesubt — albastru pentru 01-03, verde pentru 04-06 (.pas--verde, pus din PHP). */ .pas__cerc { width: 54px; height: 54px; border-radius: 50%; background: var(--fundal); border: 2px solid var(--albastru); display: flex; align-items: center; justify-content: center; color: var(--albastru); transition: border-color .3s ease, transform .3s ease; } .pas--verde .pas__cerc { border-color: var(--verde); color: var(--verde-inchis); } .pas__cerc svg { width: 24px; height: 24px; } .pas__stem { width: 2px; height: var(--sp-2); background: var(--albastru); } .pas--verde .pas__stem { background: var(--verde); } .pas__numar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--albastru); display: flex; align-items: center; justify-content: center; font-family: var(--f-titlu); font-weight: 800; font-size: 0.8rem; color: var(--albastru); } .pas--verde .pas__numar { border-color: var(--verde); color: var(--verde-inchis); } .pas__titlu { font-weight: 800; font-size: 0.86rem; letter-spacing: .02em; text-transform: uppercase; margin-block-start: var(--sp-1); } .pas__text { font-size: 0.8rem; color: var(--text-stins); line-height: 1.45; } /* Săgețile curbate dintre pași — o coloană îngustă (44px), înaltă cât ciorchinele pictogramă+fir+număr, aliniată sus ca și `.pas`. */ .pas-sageata { grid-row: 1; height: 96px; display: flex; align-items: center; justify-content: center; overflow: visible; } .pas-sageata svg { width: 100%; height: auto; overflow: visible; } .pas-sageata__linie, .pas-sageata__cap { stroke: var(--albastru); stroke-width: 3.5; fill: none; } .pas-sageata--verde .pas-sageata__linie, .pas-sageata--verde .pas-sageata__cap { stroke: var(--verde); } .pas-sageata--gradient .pas-sageata__linie, .pas-sageata--gradient .pas-sageata__cap { stroke: url(#avisaGradientSageata); } /* ========================================================================== 7. Aplicații ========================================================================== */ .aplicatii__cap { text-align: center; max-width: 36rem; margin-inline: auto; } .aplicatii__cap .sectiune__intro { margin-inline: auto; } /* Un singur rând de cartonașe SEPARATE, cu umbră proprie și spațiu între ele — nu o bandă unică despărțită de borduri. Fără cerc colorat în spatele pictogramei: cele din `pictograme AVISA/` vin deja colorate, o a doua culoare în spate ar fi dublat efectul. */ .aplicatii__grid { display: flex; gap: var(--sp-3); margin-block: var(--sp-7); } .aplicatie { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-5) var(--sp-2); background: var(--fundal); border-radius: var(--raza-mica); box-shadow: 0 1rem 2rem -1.5rem rgb(15 40 70 / .35); transition: transform .2s ease, box-shadow .2s ease; } .aplicatie:hover { transform: translateY(-3px); box-shadow: 0 1.25rem 2.25rem -1.5rem rgb(15 40 70 / .45); } .aplicatie__icon { width: 40px; height: 40px; object-fit: contain; } .aplicatie__nume { font-size: 0.72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; } .aplicatii__actiune { text-align: center; } /* ========================================================================== 8. Conformitate ========================================================================== */ /* Cadrul e text în flux normal + o grilă 2×2 de cartonașe albe proprii, nu iconuri poziționate peste pătrate coapte în poză (asta arăta imaginea sursă, dar imaginea de referință a paginii folosește cartonașe separate, cu umbră). Fotografia rămâne doar decor, înghesuită în dreapta cu un degrade — de-asta `conformitate-panou.webp` e decupat să nu mai includă pătratele de sticlă din `avisa 3.png` (ar fi dublat vizual cartonașele). */ .conformitate__cadru { position: relative; display: flex; align-items: center; gap: var(--sp-7); min-height: 26rem; padding-inline: var(--sp-7); border-radius: var(--raza); overflow: hidden; background-color: var(--fundal-alt); background-image: linear-gradient(90deg, var(--fundal-alt) 0%, var(--fundal-alt) 60%, color-mix(in srgb, var(--fundal-alt) 35%, transparent) 78%, transparent 92%), url('assets/img/conformitate-panou.webp'); background-repeat: no-repeat; background-position: right center; background-size: auto, cover; } .conformitate__continut { flex: 0 0 auto; max-width: 21rem; } .conformitate__continut .sectiune__intro { font-size: 0.85rem; } .conformitate__continut .buton { padding: 0.6rem 1.1rem; font-size: 0.85rem; } .conformitate__piloni { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); width: 24rem; max-width: 38%; } .conformitate__pilon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); text-align: left; padding: var(--sp-5) var(--sp-4); background: var(--fundal); border-radius: var(--raza-mica); box-shadow: 0 1.25rem 2.5rem -1.75rem rgb(15 40 70 / .35); } .conformitate__pilon img { width: 40px; height: 40px; } .conformitate__pilon span { font-weight: 800; font-size: 0.8rem; line-height: 1.3; } /* Planta e verde-deschis, saturat, pe toată lățimea decupajului — nu există o zonă naturală mai închisă unde textul simplu să rămână lizibil (verificat pe fotografie, colț cu colț). Un cartonaș propriu, nu doar culoare de text, ca eticheta să rămână lizibilă indiferent unde cade peste poză. */ .conformitate__eticheta-foto { flex: 0 0 auto; margin-inline-start: auto; max-width: 9rem; padding: 0.85em 1em; border-radius: var(--raza-mica); background: rgb(255 255 255 / .82); backdrop-filter: blur(6px); box-shadow: 0 1rem 2rem -1.25rem rgb(15 40 70 / .4); text-align: right; color: var(--navy); font-weight: 800; font-size: 0.8rem; line-height: 1.4; } .conformitate__eticheta-foto .accent { color: var(--verde-inchis); } /* ========================================================================== 9. Banda finală de CTA ========================================================================== */ /* Fotografia (avisa 4.png) e deja compusă cu chipul la dreapta și navy curat la stânga — o folosim ca fundal întreg, nu doar pe o felie, cu un gradient peste ca să garantăm contrastul textului, nu doar să-l presupunem. */ .cta-final { position: relative; background-color: var(--navy-adanc); background-image: linear-gradient(100deg, var(--navy-adanc) 32%, rgb(0 26 54 / .55) 55%, transparent 78%), url('assets/img/cta-portret.webp'); background-size: cover; background-position: right center; color: #fff; overflow: hidden; } .cta-final__interior { position: relative; z-index: 1; max-width: 34rem; padding-block: var(--sp-8); } .cta-final__eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, #fff 70%, transparent); line-height: 1.7; } .cta-final__eyebrow strong { color: #fff; } .cta-final__titlu { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 800; color: #fff; margin-block: var(--sp-3) var(--sp-5); } .cta-final__titlu::after { content: ''; display: block; width: 46px; height: 3px; background: var(--verde); border-radius: var(--raza-pastila); margin-block-start: var(--sp-4); } /* ========================================================================== 10. Subsol ========================================================================== */ .subsol { border-top: 1px solid var(--chenar); padding-block: var(--sp-7); } .subsol__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: var(--sp-6); align-items: start; } .subsol__contact { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-4); } .subsol__contact a { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.92rem; color: var(--text-stins); } .subsol__contact svg { width: 18px; height: 18px; color: var(--albastru); flex: none; } .subsol__coloana-titlu { font-size: 0.78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-stins); margin-block-end: var(--sp-3); } .subsol__lista { display: flex; flex-direction: column; gap: var(--sp-2); } .subsol__lista a { font-size: 0.92rem; color: var(--navy); } .subsol__lista a:hover { color: var(--verde-inchis); } .subsol__social { display: flex; gap: var(--sp-3); } .subsol__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--chenar); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background .2s ease, color .2s ease, border-color .2s ease; } .subsol__social a:hover { background: var(--verde); border-color: var(--verde); color: #fff; } .subsol__social svg { width: 17px; height: 17px; } .subsol__jos { display: flex; justify-content: space-between; align-items: center; margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-top: 1px solid var(--chenar); font-size: 0.82rem; color: var(--text-stins); } /* ========================================================================== 12. Animații ========================================================================== */ /* Elementele intră în pagină pe măsură ce ajung în vizor. Implicit (fără JS, sau cât timp scriptul nu a apucat să pornească) rămân pur și simplu vizibile — asta e starea de bază a `.reveal`. Abia după ce `landing.js` pune `.js-gata` pe `` se ascund, ca să le aducă înapoi pe rând, prin IntersectionObserver, cu `.e-vizibil`. */ .reveal { opacity: 1; transform: none; } .js-gata .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--intarziere, 0) * 90ms); } .js-gata .reveal.e-vizibil { opacity: 1; transform: none; } /* Eticheta de peste fotografia eroului: plutire foarte discretă. */ @keyframes plutire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .erou__eticheta-foto { animation: plutire 7s ease-in-out infinite; } /* Pașii procesului: fiecare cerc apare pe rând; săgeata dintre doi pași se „desenează" imediat după, cu `stroke-dasharray`/`stroke-dashoffset` — pornește când secțiunea intră în vizor (`.e-vizibil` pe `.pasi`). */ .pas { transition: opacity .5s ease, transform .5s ease; } .js-gata .pasi:not(.e-vizibil) .pas { opacity: 0; transform: translateY(10px); } .js-gata .pasi.e-vizibil .pas { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .25s); } .pas-sageata__linie, .pas-sageata__cap { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .5s ease-out; } .js-gata .pasi.e-vizibil .pas-sageata__linie, .js-gata .pasi.e-vizibil .pas-sageata__cap { stroke-dashoffset: 0; transition-delay: calc((var(--i, 0) + 1) * .25s - .1s); } /* Pictogramele din cartonașe: o mică ridicare la trecerea mouse-ului, pe lângă ridicarea cartonașului însuși. */ .cartonas:hover .pictograma { transform: translateY(-3px) scale(1.05); } .pictograma { transition: transform .3s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .js-gata .reveal.e-vizibil, .pas, .js-gata .pasi:not(.e-vizibil) .pas { opacity: 1 !important; transform: none !important; transition: none !important; } .erou__eticheta-foto { animation: none !important; } .pas-sageata__linie, .pas-sageata__cap { stroke-dashoffset: 0 !important; transition: none !important; } * { scroll-behavior: auto !important; } } /* ========================================================================== 13. Responsive ========================================================================== */ /* Cele 6 linkuri + butonul din antet au nevoie de mai multă lățime decât restul layout-ului mobil — sub ~80em încep să se rupă pe două rânduri în loc să încapă (găsit comparând direct cu referința, la o fereastră reală de ~1050px: „Cum funcționează” și „Despre noi” se rupeau, deși restul paginii arăta corect). Comutatorul pe hamburger e deci pe un prag propriu, mai devreme decât restul reașezărilor de mai jos. */ @media (max-width: 80em) { .meniu-principal__lista { display: none; } .meniu-comutator { display: flex; } .antet__interior > .meniu-principal > .js-comutabil { display: none; } } @media (max-width: 62em) { .erou__piloni { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } /* Sub 62em, fotografia rămâne fundal, dar spălată aproape peste tot — pe un ecran îngust `cover` decupează în mare parte automatul, fără loc deschis pentru text lângă el. Se vede în continuare, ca textură, dar nu mai trebuie să „nimerească" partea deschisă la culoare. */ .erou { min-height: 0; background-image: linear-gradient(180deg, color-mix(in srgb, var(--fundal) 90%, transparent), color-mix(in srgb, var(--fundal) 90%, transparent)), url('assets/img/hero-masina.webp'); background-position: center 15%; } .erou__eticheta-foto { display: none; } /* Sub 62em, cadrul cu poziții procentuale nu mai are sens — la o proporție 1774:887, un telefon l-ar face de câțiva zeci de pixeli înălțime. Revine la flux normal: fundal simplu, cei patru piloni într-o grilă de 2, eticheta de peste poză dispare (decorativă). */ .conformitate__cadru { min-height: 0; background-image: none; background-color: var(--fundal-alt); flex-direction: column; align-items: stretch; gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); } .conformitate__continut { max-width: 100%; } .conformitate__piloni { width: auto; max-width: 100%; } .conformitate__pilon { background: var(--fundal); border: 1px solid var(--chenar); box-shadow: none; } .conformitate__pilon img { width: 32px; height: 32px; } .conformitate__eticheta-foto { display: none; } /* Opt cartonașe într-un singur rând nu mai încap sub 62em — se rup pe două rânduri de câte 4, cu același spațiu între ele. */ .aplicatii__grid { flex-wrap: wrap; } .aplicatie { flex-basis: calc(25% - var(--sp-3) * 3 / 4); } /* Pe un ecran îngust, fotografia și textul nu mai au cum să stea unul lângă altul — gradientul acoperă aproape toată lățimea, ca textul să rămână lizibil peste orice rămâne din chip. */ .cta-final { background-image: linear-gradient(180deg, var(--navy-adanc) 60%, rgb(0 26 54 / .75)), url('assets/img/cta-portret.webp'); background-position: center 25%; } .cta-final__interior { max-width: 100%; } .subsol__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); } } @media (max-width: 46em) { .sectiune { padding-block: var(--sp-8); } .invelis { padding-inline: var(--sp-4); } /* Săgețile curbate presupun un singur rând — nu au cum să lege un pas de la capătul unui rând cu următorul, de la începutul celui de dedesubt. Dispar sub acest prag; pașii rămân pe o grilă simplă, în ordine. */ .pasi { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); column-gap: var(--sp-4); } .pas-sageata { display: none; } .aplicatie { flex-basis: calc(50% - var(--sp-3) / 2); } .erou__piloni { grid-template-columns: 1fr; } /* Grid, nu flex row: un `flex` obișnuit nu s-ar fi restrâns sub textul lui („Oferă servicii sigure și conforme” ieșea din ecran) — elementele flex refuză implicit să coboare sub lățimea proprie de conținut. `min-width: 0` mai jos e partea care chiar rezolvă asta. */ .pilon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-3); row-gap: 2px; align-items: center; } .pilon__icon { grid-row: 1 / 3; } .pilon__titlu { grid-column: 2; grid-row: 1; min-width: 0; } .pilon__text { grid-column: 2; grid-row: 2; min-width: 0; } .proces__cap { grid-template-columns: 1fr; } .proces__eticheta-laterala { text-align: left; transform: none; } .subsol__grid { grid-template-columns: 1fr; } .subsol__jos { flex-direction: column; gap: var(--sp-3); align-items: flex-start; } } /* Meniul mobil: aceeași listă, desenată sub antet. Implicit deschisă (fără JS tot se poate naviga prin ea, doar stă desfășurată); `landing.js` o pliază din prima și o comută pe `data-deschis`, ca butonul să aibă rost doar cât timp chiar face ceva. */ @media (max-width: 80em) { .meniu-principal__lista { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: 0; background: var(--fundal); border-bottom: 1px solid var(--chenar); padding: var(--sp-2) var(--sp-5) var(--sp-4); box-shadow: var(--umbra); } .meniu-principal__lista a { padding-block: var(--sp-3); border-bottom: 1px solid var(--fundal-alt); } .js-gata .meniu-principal__lista { display: none; } .js-gata .antet[data-deschis="true"] .meniu-principal__lista { display: flex; } } /* Legătura „sari la conținut" — vizibilă doar la focus, pentru navigarea de la tastatură; restul timpului nu ocupă loc. */ .doar-citit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .doar-citit:focus { position: fixed; top: var(--sp-3); left: var(--sp-3); width: auto; height: auto; clip: auto; z-index: 100; background: var(--navy); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--raza-mica); font-weight: 700; } /* Focus vizibil, peste tot — tastatura trebuie să vadă unde e. */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--albastru); outline-offset: 2px; } /* ========================================================================== 14. Pagina Elementor „elementor-11" — banda finală construită de Ion ========================================================================== */ /* CSS-urile generate de Elementor (post-11.css, local-11-frontend-desktop.css etc.) se încarcă DUPĂ style.css-ul temei — la specificitate egală, câștigă ele, nu regulile de-aici. De-asta prima trecere „nu se vedea": regulile chiar erau scrise, dar suprascrise mai jos în cascadă. `!important` aici nu e stil obișnuit al temei — e nevoie reală, ca să bată cascada page builder-ului pe clasele astea custom. */ /* Nu punem degradeul pe `background-image` — l-ai fi pierdut pe-al tău (poza), proprietatea se înlocuiește-n loc să se adune. Degradeul de contrast stă pe un ::before separat, deasupra fotografiei, sub text. */ /* Poza „se dubla" pentru că fundalul setat din Elementor avea `background-repeat: repeat` + `background-size: contain` (vizibil în local-11-frontend-desktop.css, clasa .e-1f1f3fa) — pe un cadru mai lat decât poza micșorată la „contain", browserul o repeta orizontal ca pe o textură. Suprascriem cu `cover` + `no-repeat`, ca pe restul fotografiilor de pe site. */ .section-5 { position: relative !important; background-color: var(--navy-adanc) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: right center !important; color: #fff !important; padding-block: 4rem !important; overflow: hidden !important; } .section-5::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(100deg, var(--navy-adanc) 32%, rgb(0 26 54 / .55) 55%, transparent 78%); pointer-events: none; } .section-5 > * { position: relative; z-index: 1; } /* `padding-right` nu muta nimic vizibil — textul e aliniat la stânga, iar spațiu în dreapta unui bloc care oricum nu-i atinge marginea nu se vede. Ca să împingă chiar blocul spre dreapta, trebuie spațiu pe partea stângă: `padding-left`. */ .title-1, .title-2, .title-3, .dual-heading { padding-left: 150px !important; } .title-1, .title-2, .title-3 { font-family: var(--f-text) !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.7 !important; color: color-mix(in srgb, #fff 70%, transparent) !important; margin: 0 !important; } /* „Dual heading” (Premium Addons) ține textul real două niveluri mai jos — clasa de pe widget nu ajunge la el fără să intri pe structura lui. */ .dual-heading .premium-dual-header-wrapper h1 { font-family: var(--f-titlu) !important; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem) !important; font-weight: 800 !important; line-height: 1.15 !important; margin-block: 1rem 0 !important; } .dual-heading .premium-dual-header-first-span, .dual-heading .premium-dual-header-second-header { color: #fff !important; } .dual-heading .premium-dual-header-second-header { display: block !important; margin-block-start: 0.2em !important; } .dual-heading .premium-dual-header-wrapper::after { content: ''; display: block; width: 46px; height: 3px; margin-block-start: 1.25rem; background: var(--verde); border-radius: var(--raza-pastila); } /* „Statement” (același widget Dual Heading, alt exemplar) — textul mic din dreapta, peste chip. Scos din fluxul coloanei flex (`position:absolute`, relativ la `.section-5`), altfel s-ar fi înșirat sub buton, nu s-ar fi așezat lângă fotografie ca-n model. */ /* `bottom: 4rem`, nu `top:50%` — 4rem e chiar `padding-block` de jos al `.section-5` (mai jos, în regulă). Butonul e ultimul element din fluxul coloanei, deci fundul lui e la aceeași distanță (4rem) de baza secțiunii; punând și liniuța verde a acestui bloc la 4rem de bază, cele două ies automat la același nivel, fără măsurători în px. */ .statement { position: absolute !important; right: calc(6% - 30px) !important; bottom: calc(4rem + 20px) !important; max-width: 27rem !important; text-align: left !important; } .statement .premium-dual-header-wrapper h2 { font-family: var(--f-text) !important; font-size: 1.8rem !important; font-weight: 800 !important; letter-spacing: 0.03em !important; line-height: 1.25 !important; margin: 0 !important; } .statement .premium-dual-header-first-span, .statement .premium-dual-header-second-header { color: #fff !important; } .statement .premium-dual-header-wrapper::after { content: ''; display: block; width: 60px; height: 4px; margin-block-start: 1rem; background: var(--verde); border-radius: var(--raza-pastila); } /* Nu era „imens" din padding — `.section-5` e o coloană flex din Elementor, iar `align-items` implicit e `stretch`: fără o lățime proprie, butonul se-ntindea pe toată lățimea benzii (peste fotografie), nu doar cât textul de deasupra. `align-self:flex-start` + `width:auto` îl aduce înapoi la mărimea conținutului, ca-n referință. */ .btn-contact { display: inline-flex !important; align-self: flex-start !important; width: auto !important; margin-left: 150px !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0.85rem 1.75rem !important; background: var(--verde) !important; color: #fff !important; font-family: var(--f-text) !important; font-weight: 700 !important; font-size: 1rem !important; border: 0 !important; border-radius: var(--raza-mica) !important; cursor: pointer; transition: background .2s ease; } .btn-contact:hover { background: var(--verde-inchis) !important; } /* ========================================================================== 15. Secțiunea Elementor „section-4" — Conformitate ========================================================================== */ /* Ținta e macheta „Conformitate" (aceeași ca pe pagina principală). Valorile de mai jos sunt MĂSURATE pe machetă la o lățime de 1440px, nu ghicite: titlu ~46px, paragraf ~22px, grilă de carduri ~32% din lățime, carduri aproape pătrate (~221px) cu iconița ~31% din card și eticheta centrată dedesubt, statement la ~60–83% din înălțime. Tot ce e în vw scalează proporțional cu macheta la 1920. */ .section-4 { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 34%) auto 1fr !important; grid-template-rows: auto auto !important; align-items: center !important; /* Spațiul în plus de la min-height merge deasupra/dedesubtul grilei, nu între cele două rânduri de carduri (implicit grid-ul ar întinde rândurile). */ align-content: center !important; column-gap: var(--sp-7) !important; row-gap: var(--sp-3) !important; height: auto !important; min-height: 670px !important; padding-inline: clamp(2rem, 6vw, 7rem) !important; padding-block: 4rem !important; border-radius: var(--raza) !important; overflow: hidden !important; isolation: isolate !important; background-color: var(--fundal-alt) !important; /* Fundalul rămâne poza pusă de tine în Elementor (avisa-3.png, întreagă, la scară naturală — cu planta și storurile ferestrei, ca în machetă). Elementor o dădea `contain` + `center right`; aici doar `cover`. */ background-repeat: no-repeat !important; /* `right center`, nu `center`: când secțiunea e mai înaltă decât jumătate din lățime (ecrane înguste), `cover` lasă poza mai lată decât cadrul; ancorată la dreapta, pătratele coapte alunecă spre stânga, sub voal, iar planta rămâne la margine. Cu `center` ar fi ieșit de sub voal. */ background-position: right center !important; background-size: cover !important; } /* Voal deschis peste partea stângă — opac până la 75%, unde se termină pătratele de sticlă coapte în poză (41–74,4%), ca să nu se vadă dublate în spatele cardurilor; de acolo poza iese la iveală (storurile, apoi planta). E un strat separat (::before), nu `background-image`, ca să nu înlocuiască poza ta; z-index -1 + `isolation:isolate` îl țin sub tot conținutul, dar peste fundal. Selectorul e `.section-4.e-con::before`, nu `.section-4::before`: Elementor își ține propriul `.e-con:before` (pentru „background overlay", cu `content: var(--background-overlay)`), la aceeași specificitate și încărcat după — la egalitate câștiga el și voalul nu se randa deloc. */ .section-4.e-con::before { content: '' !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; opacity: 1 !important; mix-blend-mode: normal !important; border: 0 !important; background: linear-gradient(90deg, var(--fundal-alt) 0%, var(--fundal-alt) 76%, color-mix(in srgb, var(--fundal-alt) 40%, transparent) 81%, transparent 87%) !important; pointer-events: none; } /* --- Coloana de text --- */ .h-conformitate { position: static !important; grid-column: 1 !important; grid-row: 1 / 3 !important; max-width: 30rem !important; text-align: left !important; } /* Liniuța verde de eyebrow, ca peste tot pe site (`.eticheta::before`). */ .h-conformitate::before { content: ''; display: block; width: 26px; height: 3px; margin-block-end: 1rem; background: var(--verde); border-radius: var(--raza-pastila); } .h-conformitate .premium-dual-header-wrapper h2 { font-family: var(--f-titlu) !important; font-size: clamp(1.75rem, 1rem + 2.1vw, 3.25rem) !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 !important; } /* Navy + navy + verde, ca `.titlu-sectiune .accent` de pe restul site-ului. */ .h-conformitate .premium-dual-header-first-span { color: var(--navy) !important; } .h-conformitate .premium-dual-header-second-header { color: var(--verde) !important; } .h-conformitate .premium-dh-description p { font-family: var(--f-text) !important; font-size: clamp(1rem, 0.5rem + 1vw, 1.35rem) !important; line-height: 1.45 !important; color: var(--text-stins) !important; margin-block-start: 1rem !important; } /* Butonul „Află mai multe" — nu există încă în pagină. Când adaugi un widget Button cu clasa `btn-afla` direct în section-4, CSS-ul de mai jos îl așază sub paragraf și-l desenează ca `.buton--contur` de pe site. */ .section-4:has(.btn-afla) .h-conformitate { grid-row: 1 !important; align-self: end !important; } .btn-afla { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; gap: var(--sp-2) !important; margin-block-start: var(--sp-5) !important; padding: 0.75rem 1.5rem !important; border: 1px solid var(--navy) !important; border-radius: var(--raza-pastila) !important; background: transparent !important; color: var(--navy) !important; font-family: var(--f-text) !important; font-weight: 700 !important; font-size: 0.95rem !important; cursor: pointer; transition: background .2s ease, color .2s ease; } .btn-afla:hover { background: var(--navy) !important; color: #fff !important; } /* --- Grila de carduri --- */ /* Cele două rânduri de iconițe din Elementor (`.e-con`, deci `position:relative` din CSS-ul lui de bază) devin itemi de grid: rândul de sus în rândul 1, cel de jos în rândul 2, ambele în coloana 2. `position:static` le scoate din calea lui `.statement`, care are nevoie de `.section-4` ca „containing block", nu de rândul lui. Lățimea e în vw pentru că secțiunea e pe toată lățimea ferestrei — 32vw = 32% din secțiune, cât are grila în machetă. */ .elementor-element-7dd46b4, .elementor-element-c6bdd90 { position: static !important; display: flex !important; grid-column: 2 !important; justify-self: start !important; width: 32vw !important; max-width: 100% !important; padding: 0 !important; gap: var(--sp-3) !important; } .elementor-element-7dd46b4 { grid-row: 1 !important; } .elementor-element-c6bdd90 { grid-row: 2 !important; } .icon-1, .icon-2, .icon-3, .icon-4 { position: static !important; flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: clamp(11rem, 15.3vw, 18rem) !important; padding: var(--sp-5) var(--sp-4) !important; text-align: center !important; background: var(--fundal) !important; border-radius: var(--raza) !important; box-shadow: 0 1.25rem 2.5rem -1.75rem rgb(15 40 70 / .35) !important; } /* Elementor pune `width:30%` pe
(per element) și `margin-bottom: 15px`; iconița era 30% dintr-un figure de 30% — ~9% din card. Normalizăm figure-ul la lățimea cardului și dăm iconița în procent din card. */ .icon-1 .elementor-image-box-wrapper, .icon-2 .elementor-image-box-wrapper, .icon-3 .elementor-image-box-wrapper, .icon-4 .elementor-image-box-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--sp-3) !important; width: 100% !important; } .icon-1 .elementor-image-box-img, .icon-2 .elementor-image-box-img, .icon-3 .elementor-image-box-img, .icon-4 .elementor-image-box-img { display: block !important; width: 100% !important; margin: 0 !important; } .icon-1 .elementor-image-box-img img, .icon-2 .elementor-image-box-img img, .icon-3 .elementor-image-box-img img, .icon-4 .elementor-image-box-img img { display: block !important; width: 31% !important; height: auto !important; margin-inline: auto !important; } .icon-1 .elementor-image-box-content, .icon-2 .elementor-image-box-content, .icon-3 .elementor-image-box-content, .icon-4 .elementor-image-box-content { width: 100% !important; } .icon-1 .elementor-image-box-title, .icon-2 .elementor-image-box-title, .icon-3 .elementor-image-box-title, .icon-4 .elementor-image-box-title, .icon-2:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after, .icon-3:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after, .icon-4:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { display: block; font-family: var(--f-text) !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1.3 !important; color: var(--navy) !important; text-align: center !important; margin: 0 !important; } /* Plasă de siguranță pentru conținutul care încă lipsește în Elementor — ca pagina să arate ca macheta ACUM. Ambele reguli se retrag singure: (1) iconițele: fișierele brute PICTOGRAME-AVISA-19/20/21 au textul copt în imagine (de-asta apar ca niște puncte). Cât timp widget-ul le folosește, le înlocuim vizual cu variantele decupate din temă; pui altă imagine în widget, regula nu se mai potrivește pe src și dispare. (2) etichetele: `::after` apare doar cât timp widget-ul n-are titlu (`:not(:has(.elementor-image-box-title))`); adaugi titlul în Elementor, textul din CSS dispare. Nu e conținut real — e placeholder vizual până completezi tu titlurile. */ .icon-2 img[src*="PICTOGRAME-AVISA-20"] { content: url('assets/img/pictograma-decizii.png'); } .icon-3 img[src*="PICTOGRAME-AVISA-21"] { content: url('assets/img/pictograma-date.png'); } .icon-4 img[src*="PICTOGRAME-AVISA-19"] { content: url('assets/img/pictograma-legislatie.png'); } .icon-2:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Decizii validate\A de un specialist'; white-space: pre-line; } .icon-3:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Date securizate\A și confidențiale'; white-space: pre-line; } .icon-4:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Respectarea\A legislației'; white-space: pre-line; } /* --- Statement (același stil ca în section-5, doar poziția e a acestui context: în machetă stă la ~60–83% din înălțime, nu la bază) --- */ .section-4 .statement { position: absolute !important; right: 6% !important; bottom: 15% !important; top: auto !important; } /* Sub 62em, cele trei zone nu mai încap una lângă alta. */ @media (max-width: 62em) { .section-4 { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--sp-5) !important; padding: var(--sp-6) var(--sp-5) !important; background-image: none !important; } .h-conformitate { max-width: 100% !important; } .elementor-element-7dd46b4, .elementor-element-c6bdd90 { width: 100% !important; } .icon-1, .icon-2, .icon-3, .icon-4 { min-height: 0 !important; } .section-4 .statement { display: none !important; } .btn-afla { margin-block-start: 0 !important; } } /* ========================================================================== 16. Secțiunea Elementor „section-3" — Aplicații ========================================================================== */ /* Ținta e secțiunea „Aplicații" de pe pagina principală (§7 mai sus): fundal alb, cap centrat (eyebrow + titlu + intro), un rând de 8 cartonașe egale cu iconiță colorată + etichetă mică, buton conturat centrat. Aici sunt aceleași valori, pe clasele din Elementor. */ /* DIN 20.09.2026 Ion a mutat conținutul între secțiuni: cardurile de aplicații stau acum în `section-2` (rămasă imediat sub erou, cu tot cu curbă), iar `section-3` ține „Procesul". Regulile de container ale celor două s-au mutat în §21; aici au rămas doar piesele care merg odată cu widgeturile (`.app-title`, `.aplicatii`, `.app-card`, `.btn-app`). */ /* --- Capul secțiunii. Widgetul Dual Heading ține „APLICATII" în primul span și titlul în al doilea, în același

; eyebrow-ul se desenează pe primul span (liniuță verde + majuscule mici verzi), titlul pe al doilea. */ /* `.app-title` a devenit clasa lui Ion pentru capul ORICĂREI secțiuni (Aplicații, Conformitate, Procesul, Pentru cine, Moduri, Platforma). În macheta nouă toate sunt aliniate la stânga, pe marginea conținutului. */ .app-title { width: 100% !important; max-width: 46rem !important; align-self: flex-start !important; text-align: left !important; margin: 0 0 var(--titlu-mai-sus, 0px) !important; } .app-title .premium-dual-header-wrapper h2 { font-family: var(--f-titlu) !important; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem) !important; font-weight: 800 !important; line-height: 1.15 !important; color: var(--navy) !important; margin: 0 !important; } .app-title .premium-dual-header-first-span { display: inline-flex !important; align-items: center !important; gap: var(--sp-2) !important; font-family: var(--f-text) !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1.6 !important; color: var(--verde-inchis) !important; margin-block-end: var(--sp-3) !important; } .app-title .premium-dual-header-first-span::before { content: ''; width: 20px; height: 3px; background: var(--verde); border-radius: var(--raza-pastila); } .app-title .premium-dual-header-second-header { display: block !important; color: var(--navy) !important; } .app-title .premium-dh-description { font-family: var(--f-text) !important; font-size: 1.08rem !important; line-height: 1.6 !important; color: var(--text-stins) !important; margin-block-start: var(--sp-4) !important; } /* --- Rândul de cartonașe: 8 egale, lipite prin `gap`, în lățimea standard a paginii (1200px), ca pe pagina principală. */ .aplicatii { position: static !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: var(--sp-3) !important; width: 100% !important; /* Cu ~22% mai lat decât lățimea standard a paginii (1200px), cum a cerut Ion: 92rem = 1472px la 1920; pe ecrane mai mici umple ce are. */ max-width: min(92rem, 100%) !important; margin-inline: auto !important; padding: 0 !important; } .app-card { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; /* `stretch` pe rând + `align-self` aici: toate cardurile la înălțimea celui mai înalt (eticheta pe 3 rânduri nu-l mai face pe al 5-lea mai înalt decât restul); conținutul centrat vertical în card. */ align-self: stretch !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--sp-4) !important; padding: var(--sp-6) var(--sp-3) !important; text-align: center !important; background: var(--fundal) !important; border-radius: var(--raza-mica) !important; box-shadow: 0 1rem 2rem -1.5rem rgb(15 40 70 / .35) !important; transition: transform .2s ease, box-shadow .2s ease; } .app-card:hover { transform: translateY(-3px); box-shadow: 0 1.25rem 2.25rem -1.5rem rgb(15 40 70 / .45) !important; } .app-card .elementor-image-box-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--sp-3) !important; width: 100% !important; } .app-card .elementor-image-box-img { display: block !important; width: auto !important; margin: 0 !important; } .app-card .elementor-image-box-img img { display: block !important; width: 48px !important; height: 48px !important; object-fit: contain !important; } .app-card .elementor-image-box-title, .app-card:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { display: block; font-family: var(--f-text) !important; font-size: 0.8rem !important; font-weight: 800 !important; letter-spacing: .02em !important; text-transform: uppercase !important; line-height: 1.3 !important; color: var(--navy) !important; margin: 0 !important; white-space: pre-line; } /* Plasă de siguranță, la fel ca la Conformitate — se retrage singură: (1) fișierele brute PICTOGRAME-AVISA-09…16 au eticheta coaptă în poză (de-aia apăreau textele uriașe) și sunt toate verzi; cât timp widgeturile le folosesc, le înlocuim vizual cu variantele decupate și colorate din temă (aceleași ca pe pagina principală). Altă imagine în widget → regula nu se mai potrivește pe src și dispare. (2) etichetele: `::after` doar cât timp widgetul n-are titlu; pui Titlul în Elementor, textul din CSS dispare. */ .app-card img[src*="PICTOGRAME-AVISA-09"] { content: url('assets/img/pictograma-animale.png'); } .app-card img[src*="PICTOGRAME-AVISA-10"] { content: url('assets/img/pictograma-farmacie.png'); } .app-card img[src*="PICTOGRAME-AVISA-11"] { content: url('assets/img/pictograma-makeup.png'); } .app-card img[src*="PICTOGRAME-AVISA-12"] { content: url('assets/img/pictograma-plante.png'); } .app-card img[src*="PICTOGRAME-AVISA-13"] { content: url('assets/img/pictograma-suplimente.png'); } .app-card img[src*="PICTOGRAME-AVISA-14"] { content: url('assets/img/pictograma-prim-ajutor.png'); } .app-card img[src*="PICTOGRAME-AVISA-15"] { content: url('assets/img/pictograma-calatorie.png'); } .app-card img[src*="PICTOGRAME-AVISA-16"] { content: url('assets/img/pictograma-altele.png'); } .app-card:has(img[src*="PICTOGRAME-AVISA-09"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Animale de\A companie'; } .app-card:has(img[src*="PICTOGRAME-AVISA-10"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Farmacie'; } .app-card:has(img[src*="PICTOGRAME-AVISA-11"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Make-up'; } .app-card:has(img[src*="PICTOGRAME-AVISA-12"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Îngrijirea\A plantelor'; } .app-card:has(img[src*="PICTOGRAME-AVISA-13"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Suplimente și\A îngrijiri medicale'; } .app-card:has(img[src*="PICTOGRAME-AVISA-14"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Primul\A ajutor'; } .app-card:has(img[src*="PICTOGRAME-AVISA-15"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Facilități\A călătorie'; } .app-card:has(img[src*="PICTOGRAME-AVISA-16"]):not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { content: 'Altele'; } /* --- Butonul: conturat, pastilă, centrat — ca `.buton--contur`. */ .btn-app { display: inline-flex !important; align-items: center !important; gap: var(--sp-2) !important; align-self: center !important; width: auto !important; padding: 0.85rem 1.5rem !important; border: 1px solid var(--navy) !important; border-radius: var(--raza-pastila) !important; background: transparent !important; color: var(--navy) !important; font-family: var(--f-text) !important; font-weight: 700 !important; font-size: 0.98rem !important; white-space: nowrap !important; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .btn-app::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .2s ease; } .btn-app:hover { background: var(--navy) !important; color: #fff !important; transform: translateY(-2px); } .btn-app:hover::after { transform: translateX(3px); } /* Sub 62em: două rânduri de câte 4; sub 46em: câte 2 pe rând. */ @media (max-width: 62em) { .aplicatii { flex-wrap: wrap !important; } .app-card { flex-basis: calc(25% - var(--sp-3) * 3 / 4) !important; } .section-3 { padding-block: var(--sp-8) !important; } } @media (max-width: 46em) { .app-card { flex-basis: calc(50% - var(--sp-3) / 2) !important; } } /* ========================================================================== 17. Trecerea Erou → „Cum funcționează" (Elementor „hero" → „section-2") ========================================================================== */ /* Poziționarea celor două fotografii de fundal, ca suprapunerea de jos să iasă ca în machetă. Nu se schimbă pozele din Elementor, doar cum se așază: - eroul (avisa-1.png) era `contain` — la 1920 stătea într-o casetă de ~1470px, cu benzi albe pe laterale; în machetă acoperă toată lățimea. `cover`, ancorat jos (baza automatului rămâne la baza secțiunii, unde o prinde curba). - „Cum funcționează" (avisa-2.png) era `cover` + `0% 0%` — valurile ieșeau mărite și tăiate în stânga. În machetă poza stă la lățimea ei reală (100%), cu colțul stânga-sus în stânga; cu `cover` ar fi crescut ori de câte ori secțiunea e mai înaltă decât proporția pozei. `100% auto` + `top left`; culoarea de sub ea preia ce rămâne dedesubt. */ /* Poza la scara ei naturală (nu `cover` — o mărea și o împingea spre stânga), lipită de dreapta. Ce rămâne gol în stânga e alb, sub voal. */ .hero { background-size: auto !important; background-position: right center !important; background-color: #fff !important; position: relative !important; isolation: isolate !important; } /* Voal alb din stânga, peste marginea pozei, care se stinge treptat peste ea — textul stă pe alb curat, trecerea la fotografie e fără muchie. Același gradient ca la eroul de pe pagina principală (`.erou`). E pe un ::before separat (nu pe `background-image`, care ar înlocui poza), sub conținut. `.hero.e-con::before` + `content` forțat: Elementor își ține propriul `.e-con:before` (background overlay) la aceeași specificitate. */ .hero.e-con::before { content: '' !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; opacity: 1 !important; mix-blend-mode: normal !important; border: 0 !important; background: linear-gradient(100deg, #fff 26%, rgb(255 255 255 / .62) 46%, rgb(255 255 255 / .12) 64%, transparent 76%) !important; pointer-events: none; } .section-2 { /* Masca (curba) e legată de marginea de sus a secțiunii, deci ca să urce peste erou trebuie urcată toată secțiunea, nu doar poza: Elementor dă -100px, aici -160px (cu 60px mai sus, cum a cerut Ion). */ margin-block-start: -180px !important; /* `cover` ancorat sus-stânga: poza crește exact cât să umple înălțimea secțiunii (fără bandă goală dedesubt), iar colțul stânga-sus rămâne pe loc — curba intră tot sub automat, ca în machetă; ce depășește se taie din dreapta. */ /* Creasta valurilor e chiar la marginea de sus a pozei (măsurat: 1–5% din înălțime pe la 40–50% lățime). Ca să intre în decupaj, sub automat, poza stă la `left 50px` (valoarea pusă de Ion), la scara ei reală (100% lățime, colțul stânga-sus în stânga) — NU se lărgește, ca valurile să nu se miște și lateral față de decupaj. Ce rămâne dedesubt, dacă secțiunea e mai înaltă decât poza, preia culoarea ei de la bază. */ /* La fel ca eroul: scara naturală (1536px), lipită de dreapta; ce rămâne gol în stânga preia culoarea pozei. Offsetul vertical (-10px) e cel pus de Ion. */ background-size: auto !important; background-position: right -10px !important; background-repeat: no-repeat !important; background-color: #f5f9fc !important; } /* În machetă, albul secțiunii următoare intră peste poza eroului cu o margine curbă — sus în stânga, coboară spre dreapta. `section-2` are deja `margin-top:-100px` din Elementor (se suprapune 100px peste erou), dar cu marginea de sus dreaptă, deci taie poza drept. Aici marginea de sus a lui `section-2` devine curbă printr-o mască: în banda suprapusă, ce e scos de sub mască e transparent și lasă poza eroului să se vadă deasupra curbei. Forma, trasată de pe linia roșie desenată de Ion (coordonate citite din imagine, la 1917px): dreaptă până la ~48% din lățime, coboară până la ~127px sub linie pe la 65–70%, urcă înapoi și iese în dreapta ~11px mai sus decât a intrat. Banda de mască e 260px ca să încapă adâncimea. Două straturi de mască: (1) o bandă de 260px sus, cu curba (SVG întins, `preserveAspectRatio=none`, deci scalează cu lățimea); (2) restul secțiunii, plin — ca adâncimea curbei să rămână în px, nu să crească odată cu înălțimea secțiunii. */ .section-2 { -webkit-mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(#000, #000) !important; mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(#000, #000) !important; -webkit-mask-size: 100% 260px, 100% calc(100% - 260px) !important; mask-size: 100% 260px, 100% calc(100% - 260px) !important; -webkit-mask-position: top, bottom !important; mask-position: top, bottom !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } /* ========================================================================== 18. Secțiunea Elementor „hero" — Erou (conținut) ========================================================================== */ /* Ținta e eroul de pe pagina principală (§5): coloană de text în stânga, ~30rem, centrată vertical; titlu pe 3 rânduri (ultimul verde), subtitlu, trei piloni (iconiță + titlu majuscule + o linie de text), buton verde. Aceleași valori, pe clasele din Elementor. Containerul .hero e deja flex-coloană din Elementor; aici doar îl centrăm vertical și îi dăm padding-ul lateral al paginii. */ .hero { justify-content: center !important; align-items: flex-start !important; /* Textul începe la ~6% din lățime în machetă (măsurat), nu la marginea containerului de 1200px. */ padding-inline: 6vw !important; padding-block: var(--sp-9) !important; } /* --- Titlu + subtitlu (Dual Heading: primele două rânduri în primul span, „Asistență umană." în al doilea; descrierea e subtitlul). --- */ .hero-title { width: 100% !important; max-width: 30rem !important; text-align: left !important; } .hero-title .premium-dual-header-wrapper h2 { font-family: var(--f-titlu) !important; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; color: var(--navy) !important; margin: 0 !important; } .hero-title .premium-dual-header-first-span { color: var(--navy) !important; } .hero-title .premium-dual-header-second-header { display: block !important; color: var(--verde) !important; } .hero-title .premium-dh-description { font-family: var(--f-text) !important; font-size: 1.15rem !important; line-height: 1.5 !important; color: var(--text-stins) !important; margin-block-start: var(--sp-4) !important; max-width: 32rem !important; } /* --- Cei trei piloni: rândul din Elementor devine grila de 3 coloane. --- */ .elementor-element-7507f02 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--sp-4) !important; width: 100% !important; max-width: 30rem !important; align-self: flex-start !important; align-items: start !important; margin-block: var(--sp-6) !important; padding: 0 !important; } .icon-hero { width: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--sp-2) !important; text-align: left !important; } .icon-hero .elementor-image-box-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-2) !important; width: 100% !important; text-align: left !important; } /* Elementor pune `width:30%` pe
per element și `margin-bottom` — iconița ieșea ~36px. Figure-ul la lățimea cardului; poza (simbol + text copt) la lățimea coloanei, max 9rem, ca textul din ea să fie lizibil. */ .icon-hero .elementor-image-box-img { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* Pictogramele 05/06/07 vin cu inelul lor colorat — fără fundal peste. */ /* Cele trei fișiere au proporții diferite (476×484, 429×449, 504×463), dar inelul are ACEEAȘI înălțime în toate (348px, măsurat) — lățimile diferă doar prin glow și prin lungimea textului copt. Scalate după înălțime (aceeași `height`, `width:auto`), inelele ies identice. */ .icon-hero .elementor-image-box-img img { display: block !important; width: auto !important; height: 9rem !important; max-width: 100% !important; object-fit: contain !important; } /* Inelul are 350px în toate fișierele, dar fișierele au înălțimi diferite (484/449/463) — la aceeași `height` inelul din 06 ieșea cu ~7% mai mare. Înălțime per fișier ∝ H (H×0,306), ca inelul să iasă ~70px în toate trei. */ .icon-hero img[src*="PICTOGRAME-AVISA-05"] { height: 148.3px !important; } .icon-hero img[src*="PICTOGRAME-AVISA-06"] { height: 137.5px !important; } .icon-hero img[src*="PICTOGRAME-AVISA-07"] { height: 141.8px !important; } /* Și marginea de sus a inelului la același nivel (în fișiere e la 18,2% / 14,7% / 14,9% din H): compensat din margin-top. */ .icon-hero img[src*="PICTOGRAME-AVISA-05"] { margin-top: 0 !important; } .icon-hero img[src*="PICTOGRAME-AVISA-06"] { margin-top: 6.7px !important; } .icon-hero img[src*="PICTOGRAME-AVISA-07"] { margin-top: 5.8px !important; } .icon-hero .elementor-image-box-content { width: 100% !important; } .icon-hero .elementor-image-box-title { display: block; font-family: var(--f-text) !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; line-height: 1.3 !important; color: var(--navy) !important; margin: 0 !important; white-space: pre-line; } .icon-hero .elementor-image-box-description { font-family: var(--f-text) !important; font-size: 0.82rem !important; color: var(--text-stins) !important; margin: 0 !important; } /* Iconițele rămân fișierele puse de Ion (PICTOGRAME-AVISA-05/06/07, cu eticheta coaptă în poză) — nu se înlocuiesc și nu se dublează textul. */ /* --- Butonul „Descoperă soluția AVISA”. Ion l-a pus cu clasa `btn-contact` (cea din secțiunea 5) — în contextul eroului îl aliniem la stânga, sub piloni, ca `.buton--plin` de pe site; `.btn-hero` e acceptat la fel. --- */ .hero .btn-contact, .btn-hero { margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: var(--sp-2) !important; align-self: flex-start !important; width: auto !important; padding: 0.85rem 1.5rem !important; border: 0 !important; border-radius: var(--raza-pastila) !important; background: var(--verde) !important; color: #fff !important; font-family: var(--f-text) !important; font-weight: 700 !important; font-size: 0.98rem !important; white-space: nowrap !important; box-shadow: var(--umbra-mica) !important; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .hero .btn-contact::after, .btn-hero::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .2s ease; } .hero .btn-contact:hover, .btn-hero:hover { background: var(--verde-inchis) !important; transform: translateY(-2px); box-shadow: var(--umbra) !important; } .hero .btn-contact:hover::after, .btn-hero:hover::after { transform: translateX(3px); } /* --- Eticheta „Experiență sigură și conformă / la fiecare pas”, în dreapta peste poză — nu există încă. Când adaugi un Heading cu clasa `hero-badge` direct în .hero, se așază singură (absolut, jos-dreapta), ca `.erou__eticheta-foto`. --- */ .hero-badge { position: absolute !important; z-index: 2 !important; right: clamp(1rem, 4vw, 4rem) !important; bottom: clamp(9rem, 20vh, 14rem) !important; width: auto !important; max-width: 11rem !important; font-family: var(--f-text) !important; font-size: 0.85rem !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--navy) !important; text-align: right !important; text-shadow: 0 1px 12px rgb(255 255 255 / .8), 0 1px 2px rgb(255 255 255 / .9); } .hero-badge::after { content: ''; display: block; margin-inline-start: auto; margin-block-start: var(--sp-2); width: 24px; height: 3px; background: var(--verde); border-radius: var(--raza-pastila); } /* --- Eticheta „EXPERIENȚĂ SIGURĂ / ȘI CONFORMĂ / la fiecare pas” — Ion a pus-o cu clasa `statement` (cea din secțiunile 4/5: text mare, alb). În contextul eroului trebuie ca în machetă (poza 20): text mic, navy, primele două rânduri aldine cu majuscule, al treilea normal, aliniat dreapta, fără liniuță, jos-dreapta peste poză, pe rândul butonului. Poziție măsurată pe machetă: marginea dreaptă la ~2% din lățime, textul la ~75–83% din înălțimea eroului. Suprascriem punctual, nu regula generală `.statement`. --- */ .hero .statement { position: absolute !important; z-index: 2 !important; right: 2vw !important; left: auto !important; bottom: 17% !important; top: auto !important; transform: none !important; width: auto !important; max-width: 14rem !important; padding: 0 !important; background: none !important; box-shadow: none !important; text-align: left !important; } .hero .statement .premium-dual-header-wrapper h2 { font-family: var(--f-text) !important; font-size: clamp(0.9rem, 0.6rem + 0.45vw, 1.1rem) !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: 1.45 !important; margin: 0 !important; text-shadow: 0 1px 12px rgb(255 255 255 / .8), 0 1px 2px rgb(255 255 255 / .9); } .hero .statement .premium-dual-header-first-span { color: var(--navy) !important; } .hero .statement .premium-dual-header-second-header { display: block !important; color: var(--navy) !important; font-weight: 400 !important; } .hero .statement .premium-dual-header-wrapper::after { display: none !important; content: none !important; } @media (max-width: 62em) { .hero { padding-inline: var(--sp-5) !important; padding-block: var(--sp-8) !important; } .elementor-element-7507f02 { grid-template-columns: repeat(3, 1fr) !important; gap: var(--sp-3) !important; } .hero-badge, .hero .statement { display: none !important; } } @media (max-width: 46em) { .elementor-element-7507f02 { grid-template-columns: 1fr !important; } } /* ========================================================================== 19. Secțiunea Elementor „section-2" — Cum funcționează (conținut) ========================================================================== */ /* Ținta e poza 28 (aceeași secțiune ca §6 de pe pagina principală). Măsurat pe machetă (768px lățime ⇒ ×2,5 la 1920): textul începe la ~8% din lățime; titlu ~33px cap-height (⇒ ~3rem), paragraf pe ~49% din lățime, buton conturat; „TECHNOLOGY MEETS HUMAN CARE” în dreapta, la ~78% din lățime, între 17–37% din înălțime; schema pașilor de la 5,6% la 92% din lățime, în partea de jos (59–91% din înălțime). Fundalul, curba (masca) și margin-top rămân cum sunt — nu se ating. */ /* Containerul `.section-2` e definit în §21 (acum ține Aplicațiile). */ /* --- Capul: Dual Heading cu „Un proces simplu.” (primul span) și „Asistență reală.” (al doilea, verde); eyebrow-ul „CUM FUNCȚIONEAZĂ” nu există în widget — îl desenăm pe ::before, ca `.eticheta` de pe site. Clasa reală pusă în Elementor e `h-functionare`. --- */ .h-functionare, .h-functiune { width: 100% !important; max-width: 30rem !important; text-align: left !important; margin: 0 !important; } .h-functionare::before, .h-functiune::before { content: 'Cum funcționează'; display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-3); font-family: var(--f-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); } .h-functionare .premium-dual-header-wrapper h2, .h-functiune .premium-dual-header-wrapper h2 { font-family: var(--f-titlu) !important; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; color: var(--navy) !important; margin: 0 !important; } .h-functionare .premium-dual-header-first-span, .h-functiune .premium-dual-header-first-span { color: var(--navy) !important; } .h-functionare .premium-dual-header-second-header, .h-functiune .premium-dual-header-second-header { display: block !important; color: var(--verde) !important; } .h-functionare .premium-dh-description, .h-functiune .premium-dh-description { font-family: var(--f-text) !important; font-size: 1.05rem !important; line-height: 1.55 !important; color: var(--navy) !important; margin-block-start: var(--sp-4) !important; max-width: 30rem !important; } /* --- Butonul „Vezi detaliile procesului” — nu există încă în pagină. Un widget Button cu clasa `btn-proces` direct în section-2 iese ca `.buton--contur` de pe site, sub paragraf. --- */ .btn-proces { display: inline-flex !important; align-items: center !important; gap: var(--sp-2) !important; align-self: flex-start !important; width: auto !important; margin: var(--sp-5) 0 0 !important; padding: 0.75rem 1.5rem !important; border: 1px solid var(--navy) !important; border-radius: var(--raza-pastila) !important; background: transparent !important; color: var(--navy) !important; font-family: var(--f-text) !important; font-weight: 700 !important; font-size: 0.95rem !important; white-space: nowrap !important; cursor: pointer; transition: background .2s ease, color .2s ease; } .btn-proces::after { content: '\2192'; font-size: 1.1em; line-height: 1; } .btn-proces:hover { background: var(--navy) !important; color: #fff !important; } /* --- Schema pașilor: o singură imagine, pe toată lățimea de la 5,6% la ~92% (≈ 86% din secțiune), jos. E în flux, după text; distanța de la text vine din margin-top. Elementor servește un thumbnail de 733px — la lățimea asta se vede blurat: în widget alege Image Size = Full (originalul are 2434×731). --- */ .img-pasi { /* 75% din 86,5vw, la cererea lui Ion; aliniată la stânga cu textul. */ width: 65vw !important; max-width: 65vw !important; margin: clamp(2rem, 4vw, 4.5rem) 0 0 0 !important; align-self: flex-start !important; } .img-pasi img { display: block !important; width: 100% !important; height: auto !important; } /* --- „TECHNOLOGY / MEETS / HUMAN CARE” — Ion a pus-o cu clasa `statement` (text mare alb, din secțiunile 4/5). Aici, ca în machetă: navy, greutate normală, majuscule, trei rânduri, fără liniuță, în dreapta peste valuri — la ~78% din lățime, 17–37% din înălțime. Suprascriere punctuală. --- */ .section-3 .statement { position: absolute !important; z-index: 2 !important; left: 79% !important; right: auto !important; /* La nivelul titlului „Un proces simplu.” — 17% din înălțime în machetă cădea prea sus aici, pentru că secțiunea e mai înaltă decât în machetă (fundalul urcat peste erou). */ top: clamp(14rem, 27%, 22rem) !important; bottom: auto !important; transform: none !important; width: auto !important; max-width: 18vw !important; padding: 0 !important; background: none !important; box-shadow: none !important; text-align: left !important; } .section-3 .statement .premium-dual-header-wrapper h2 { font-family: var(--f-text) !important; font-size: clamp(1.1rem, 0.7rem + 0.8vw, 1.6rem) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; line-height: 1.35 !important; text-transform: uppercase !important; margin: 0 !important; } .section-3 .statement .premium-dual-header-first-span, .section-3 .statement .premium-dual-header-second-header { color: var(--navy) !important; font-weight: 400 !important; } .section-3 .statement .premium-dual-header-second-header { display: block !important; } .section-3 .statement .premium-dual-header-wrapper::after { display: none !important; content: none !important; } @media (max-width: 62em) { .section-3 .statement { position: static !important; max-width: 100% !important; margin-block-start: var(--sp-4) !important; } .img-pasi { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } } /* ========================================================================== 20. Pop-up-ul de contact (Elementor Pro → Templates → Popups, „Contact") -------------------------------------------------------------------------- Pop-up-ul poartă clasa `avisa-popup-contact`, formularul `avisa-formular`. Se deschide la clic pe orice legătură spre #contact („Open By Selector"). `!important`: CSS-ul generat de Elementor se încarcă după foaia temei. ========================================================================== */ .avisa-popup-contact.dialog-widget { background: rgb(0 26 54 / 0.72) !important; /* --navy-adanc, voalat */ backdrop-filter: blur(4px); } .avisa-popup-contact .dialog-widget-content { width: 620px !important; /* aceeași cu Width din setările pop-up-ului */ border-radius: var(--raza) !important; box-shadow: 0 30px 80px -20px rgb(0 10 30 / 0.55) !important; max-width: calc(100vw - 2rem) !important; max-height: calc(100dvh - 2rem); overflow: hidden !important; } /* Elementor dă mesajului lățimea pop-up-ului (620px, plafonată la 100vw) — pe telefon iese mai lat decât cutia lui și câmpurile se taie în dreapta. */ .avisa-popup-contact .dialog-message { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 2rem) !important; overflow-y: auto; } .avisa-popup-contact .avisa-contact.e-con { padding: clamp(1.5rem, 4vw, 2.75rem) !important; gap: 0 !important; /* dunga de brand de sus: albastru → verde, ca în siglă. Ca fundal, nu ca `border-image` — acela ignoră colțurile rotunjite ale cutiei. */ background: linear-gradient(90deg, var(--albastru), var(--verde)) top / 100% 5px no-repeat, #fff !important; } /* Închidere */ .avisa-popup-contact .dialog-close-button { top: 1.1rem !important; right: 1.1rem !important; width: 36px; height: 36px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: var(--fundal-alt); color: var(--navy) !important; transition: background .2s ease, color .2s ease; } .avisa-popup-contact .dialog-close-button:hover { background: var(--navy); color: #fff !important; } .avisa-popup-contact .dialog-close-button svg { fill: currentColor; width: 14px; height: 14px; } /* Cap */ .avisa-contact__eyebrow .elementor-heading-title { font-family: var(--f-text) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde) !important; margin: 0 0 var(--sp-2) !important; } .avisa-contact__titlu .elementor-heading-title { font-family: var(--f-titlu) !important; font-size: clamp(1.7rem, 4vw, 2.25rem) !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--navy) !important; margin: 0 !important; } .avisa-contact__intro .elementor-heading-title { font-family: var(--f-text) !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--text-stins) !important; margin: var(--sp-3) 0 var(--sp-5) !important; } /* Câmpuri */ .avisa-formular .elementor-form-fields-wrapper { row-gap: var(--sp-4); } .avisa-formular .elementor-field-group { margin-bottom: 0 !important; } .avisa-formular .elementor-field-label { font-family: var(--f-text) !important; font-size: 0.85rem !important; font-weight: 600 !important; color: var(--navy) !important; padding-bottom: 0.35rem !important; } .avisa-formular .elementor-mark-required .elementor-field-label::after { color: var(--verde) !important; } .avisa-formular .elementor-field-textual { font-family: var(--f-text) !important; font-size: 1rem !important; /* sub 16px, iOS face zoom la focus */ color: var(--navy) !important; background: var(--fundal-alt) !important; border: 1px solid var(--chenar) !important; border-radius: var(--raza-mica) !important; padding: 0.75rem 0.9rem !important; min-height: 48px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .avisa-formular textarea.elementor-field-textual { min-height: 120px; resize: vertical; } .avisa-formular .elementor-field-textual:hover { border-color: color-mix(in srgb, var(--albastru) 45%, var(--chenar)) !important; } .avisa-formular .elementor-field-textual:focus { background: #fff !important; border-color: var(--albastru) !important; box-shadow: 0 0 0 3px rgb(36 131 240 / 0.18) !important; outline: none; } /* Lista de produse — bife pe două coloane (una pe telefon), fiecare ca o pastilă */ .avisa-formular .elementor-field-type-checkbox .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; } .avisa-formular .elementor-field-type-checkbox .elementor-field-option { display: flex; align-items: center; gap: 0.55rem; margin: 0 !important; padding: 0.55rem 0.75rem; background: var(--fundal-alt); border: 1px solid var(--chenar); border-radius: var(--raza-mica); transition: border-color .2s ease, background .2s ease; } .avisa-formular .elementor-field-type-checkbox .elementor-field-option:hover { border-color: color-mix(in srgb, var(--albastru) 45%, var(--chenar)); } .avisa-formular .elementor-field-type-checkbox .elementor-field-option:has(input:checked) { background: rgb(111 168 60 / 0.12); border-color: var(--verde); } .avisa-formular .elementor-field-type-checkbox input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--verde); } .avisa-formular .elementor-field-type-checkbox .elementor-field-option label { font-family: var(--f-text); font-size: 0.9rem; line-height: 1.3; color: var(--navy); cursor: pointer; flex: 1; } .avisa-formular textarea.elementor-field-textual[rows="2"] { min-height: 76px; } .avisa-formular .elementor-field-textual::placeholder { color: color-mix(in srgb, var(--text-stins) 75%, transparent); opacity: 1; } /* Acordul */ .avisa-formular .elementor-field-type-acceptance .elementor-field-label { display: none; } .avisa-formular .elementor-field-type-acceptance .elementor-field-option { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; } .avisa-formular .elementor-field-type-acceptance input[type="checkbox"] { width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: var(--verde); } .avisa-formular .elementor-field-type-acceptance label { font-family: var(--f-text); font-size: 0.85rem; line-height: 1.5; color: var(--text-stins); } /* Butonul — același cu .buton--plin */ .avisa-formular .elementor-button { font-family: var(--f-text) !important; font-size: 0.98rem !important; font-weight: 700 !important; color: #fff !important; background: var(--verde) !important; border: 0 !important; border-radius: var(--raza-pastila) !important; padding: 0.95rem 1.5rem !important; min-height: 50px; box-shadow: var(--umbra-mica); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .avisa-formular .elementor-button:hover { background: var(--verde-inchis) !important; transform: translateY(-2px); box-shadow: var(--umbra); } .avisa-formular .elementor-button:focus-visible { outline: 3px solid rgb(36 131 240 / 0.45); outline-offset: 2px; } .avisa-formular .elementor-button[disabled] { opacity: .65; transform: none; cursor: progress; } /* Mesaje */ .avisa-formular .elementor-message { font-family: var(--f-text); font-size: 0.95rem; line-height: 1.5; margin-top: var(--sp-4); padding: 0.85rem 1rem; border-radius: var(--raza-mica); } .avisa-formular .elementor-message::before { display: none; } .avisa-formular .elementor-message-success { color: #2f5d12 !important; background: rgb(111 168 60 / 0.14); } .avisa-formular .elementor-message-danger { color: #9b1c1c !important; background: rgb(200 40 40 / 0.09); } .avisa-formular .elementor-help-inline { font-family: var(--f-text); font-size: 0.8rem !important; color: #b42318 !important; } .avisa-formular .elementor-error .elementor-field-textual { border-color: #d92d20 !important; } /* Telefon: câmpurile pe câte un rând */ @media (max-width: 40em) { .avisa-formular .elementor-field-group.elementor-col-50 { width: 100% !important; } .avisa-formular .elementor-field-type-checkbox .elementor-field-subgroup { grid-template-columns: 1fr; } } /* ========================================================================== 21. Pagina în ordinea nouă (macheta din 19.09.2026) -------------------------------------------------------------------------- Erou → Aplicații (`section-2`) → Conformitate (`section-4`) → Procesul (`section-3`) → Pentru cine → Moduri de operare → Platforma → banda finală. Cele trei secțiuni noi NU au clase puse în Elementor. Le prind după id-ul elementului, dar fiecare selector acceptă și o clasă, ca Ion s-o poată pune oricând (și OBLIGATORIU dacă șterge și reface secțiunea — id-ul se schimbă): Pentru cine 92b96cc → clasa `section-cine` Moduri de operare 59deab2 → clasa `section-moduri` Platforma 53a1164 → clasa `section-platforma` ========================================================================== */ :root { --margine-pagina: clamp(1.25rem, 8vw, 10rem); } /* --- 21.1 Aplicații, în `section-2` (sub curbă; fundalul, masca și margin-top rămân cele din §17 — nu se ating) --------------------------- */ .section-2 { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--sp-5) !important; /* sus: loc pentru curbă și valuri, ca înainte */ padding: clamp(6rem, 12vw, 14rem) var(--margine-pagina) var(--sp-8) !important; /* „titlul mai sus, spațiu mai mare față de carduri" (cerut de Ion pe 18.09) */ --titlu-mai-sus: var(--sp-6); } /* Cele două etichete de grupă: fiecare deasupra celor 4 carduri ale ei. */ .section-2 > .e-con:not(.aplicatii) { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-3) !important; width: 100% !important; max-width: min(92rem, 100%) !important; margin: 0 auto calc(var(--sp-3) * -1) !important; padding: 0 !important; } .section-2 > .e-con:not(.aplicatii) > .elementor-widget-spacer { display: none !important; } .section-2 > .e-con:not(.aplicatii) > .e-heading-base { font-family: var(--f-text) !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--albastru) !important; /* eticheta din dreapta cade peste valurile din fundal — o pastilă albă, cât textul, o ține lizibilă fără să acopere desenul */ justify-self: start; width: auto !important; margin: 0 !important; padding: 0.3rem 0.7rem !important; border-radius: var(--raza-pastila); background: rgb(255 255 255 / 0.82); } .section-2 > .btn-app { align-self: center !important; margin-block-start: var(--sp-3) !important; } /* --- 21.2 Procesul, în `section-3` -------------------------------------- Cap la stânga, „Technology meets human care" în dreapta la nivelul titlului (§19), apoi — când Ion le pune — cadrul video (`video-proces`), schema pașilor (`img-pasi`) și butonul (`btn-proces`). */ .section-3 { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-6) !important; padding: var(--sp-9) var(--margine-pagina) var(--sp-8) !important; min-height: 0 !important; } .section-3 .app-title { max-width: min(46rem, 62%) !important; } .section-3 .statement { left: auto !important; right: var(--margine-pagina) !important; top: calc(var(--sp-9) + var(--sp-5)) !important; max-width: 16rem !important; padding-inline-start: var(--sp-5) !important; border-inline-start: 2px solid var(--albastru) !important; } .section-3 .video-proces, .section-3 .elementor-widget-video { width: 100% !important; border-radius: var(--raza) !important; overflow: hidden !important; box-shadow: var(--umbra) !important; } .section-3 .img-pasi { width: 100% !important; max-width: 100% !important; margin: 0 !important; align-self: stretch !important; } .section-3 .btn-proces, .section-3 > .btn-app { align-self: center !important; margin: 0 !important; } /* --- 21.3 Cartonașul comun secțiunilor „Pentru cine" și „Moduri" --------- */ :is(.section-cine, .elementor-element-92b96cc), :is(.section-moduri, .elementor-element-59deab2) { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--sp-6) !important; padding: var(--sp-9) var(--margine-pagina) var(--sp-8) !important; min-height: 0 !important; } :is(.section-moduri, .elementor-element-59deab2) { padding-block-start: var(--sp-7) !important; } /* rândul de cartonașe = containerul care are containere în el */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con:has(> .e-con) { position: static !important; display: grid !important; gap: var(--sp-4) !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } :is(.section-cine, .elementor-element-92b96cc) > .e-con:has(> .e-con) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con:has(> .e-con) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--sp-3) !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: var(--sp-5) !important; text-align: left !important; background: var(--fundal) !important; border: 1px solid var(--chenar) !important; border-radius: var(--raza) !important; box-shadow: 0 1rem 2rem -1.5rem rgb(15 40 70 / .35) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con:hover { transform: translateY(-3px); box-shadow: 0 1.25rem 2.25rem -1.5rem rgb(15 40 70 / .45) !important; border-color: color-mix(in srgb, var(--verde) 40%, var(--chenar)) !important; } /* capul cartonașului: iconiță + nume, pe un rând (widgetul Textual Showcase) */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .elementor-widget-premium-textual-showcase { width: 100% !important; margin: 0 !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__outer-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: var(--sp-3) !important; text-align: left !important; } /* Widgetul dă containerului iconiței o lățime fixă (100px) și o centrează — iconița plutea departe de margine și titlul se rupea pe două rânduri. */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-container { flex: none; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-container.has-text { flex: 1 1 auto; min-width: 0; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-img { display: block !important; width: 44px !important; height: 44px !important; object-fit: contain !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-text { font-family: var(--f-titlu) !important; font-size: 1.08rem !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--navy) !important; } /* textul cartonașului. În Elementor TOT textul e acum aldin ( pe fiecare rând); ca în machetă ar fi aldine doar etichetele „Ai deja:", „Îți lipsește:", „Potrivit pentru:". Până atunci, aldinul e îmblânzit. */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con > .e-paragraph-base { flex: 1 1 auto; font-family: var(--f-text) !important; font-size: 0.92rem !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--text-stins) !important; margin: 0 !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con > .e-paragraph-base strong { font-weight: 600; color: var(--navy); } /* butonul din cartonaș: jos, pe toată lățimea, la aceeași înălțime în toate */ :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con > .btn-app { align-self: stretch !important; justify-content: center !important; margin: auto 0 0 !important; padding: 0.65rem 1rem !important; font-size: 0.88rem !important; white-space: normal !important; } /* --- 21.4 Moduri de operare: coloana din mijloc evidențiată, lista cu bife - */ :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:nth-child(2) { background: color-mix(in srgb, var(--verde) 7%, #fff) !important; border-color: color-mix(in srgb, var(--verde) 55%, var(--chenar)) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:nth-child(2) .pa-txt-sc__item-text { color: var(--verde-inchis) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con > .e-paragraph-base { flex: 0 0 auto; } :is(.section-moduri, .elementor-element-59deab2) .elementor-widget-icon-list { width: 100% !important; margin: auto 0 0 !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-items { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; margin: 0 !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-item { display: flex !important; align-items: flex-start !important; gap: var(--sp-2) !important; width: 100% !important; margin: 0 !important; padding: 0.6rem 0 !important; border-top: 1px solid var(--chenar) !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-item::after { display: none !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-icon { flex: none; padding: 0 !important; margin-top: 0.1rem; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-icon svg { width: 18px !important; height: 18px !important; fill: var(--albastru) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:nth-child(2) .elementor-icon-list-icon svg { fill: var(--verde) !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-text { font-family: var(--f-text) !important; font-size: 0.9rem !important; line-height: 1.45 !important; color: var(--navy) !important; padding: 0 !important; } :is(.section-moduri, .elementor-element-59deab2) > .btn-contact, :is(.section-moduri, .elementor-element-59deab2) > .btn-app { align-self: center !important; } /* --- 21.5 Platforma: text + listă în stânga, ecranul în dreapta ---------- */ :is(.section-platforma, .elementor-element-53a1164) { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; column-gap: var(--sp-8) !important; row-gap: var(--sp-5) !important; align-items: center !important; padding: var(--sp-8) var(--margine-pagina) var(--sp-9) !important; min-height: 0 !important; } :is(.section-platforma, .elementor-element-53a1164) > .app-title { grid-column: 1; align-self: end !important; max-width: 100% !important; } :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-icon-list { grid-column: 1; align-self: start !important; width: 100% !important; margin: 0 !important; } :is(.section-platforma, .elementor-element-53a1164) > .e-con, :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-image, :is(.section-platforma, .elementor-element-53a1164) > .e-image-base { grid-column: 2; grid-row: 1 / span 2; position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } :is(.section-platforma, .elementor-element-53a1164) img { display: block; width: 100%; height: auto; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-items { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: var(--sp-3) !important; margin: 0 !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-item { display: flex !important; align-items: center !important; gap: var(--sp-3) !important; margin: 0 !important; padding: 0 !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-item::after { display: none !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-icon { flex: none; display: grid !important; place-items: center; width: 42px; height: 42px; padding: 0 !important; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--albastru) 35%, transparent); background: color-mix(in srgb, var(--albastru) 6%, #fff); } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-icon svg { width: 18px !important; height: 18px !important; fill: var(--albastru) !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-text { font-family: var(--f-text) !important; font-size: 1.02rem !important; font-weight: 500 !important; color: var(--navy) !important; padding: 0 !important; } /* --- 21.6 Pe ecrane mai mici ------------------------------------------- */ @media (max-width: 75em) { :is(.section-cine, .elementor-element-92b96cc) > .e-con:has(> .e-con) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 62em) { .section-2 { padding: clamp(5rem, 14vw, 8rem) var(--sp-5) var(--sp-7) !important; } .section-3, :is(.section-cine, .elementor-element-92b96cc), :is(.section-moduri, .elementor-element-59deab2) { padding: var(--sp-8) var(--sp-5) var(--sp-7) !important; } .section-3 .app-title { max-width: 100% !important; } .section-3 .statement { border-inline-start: 0 !important; padding-inline-start: 0 !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con:has(> .e-con) { grid-template-columns: 1fr !important; } :is(.section-platforma, .elementor-element-53a1164) { grid-template-columns: 1fr !important; padding: var(--sp-7) var(--sp-5) var(--sp-8) !important; } :is(.section-platforma, .elementor-element-53a1164) > .e-con, :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-image, :is(.section-platforma, .elementor-element-53a1164) > .e-image-base { grid-column: 1; grid-row: auto; } } @media (max-width: 40em) { :is(.section-cine, .elementor-element-92b96cc) > .e-con:has(> .e-con) { grid-template-columns: 1fr !important; } /* etichetele de grupă nu mai stau deasupra cardurilor lor când cardurile se rup pe rânduri */ .section-2 > .e-con:not(.aplicatii) { grid-template-columns: 1fr !important; } } /* --- 21.7 Ancorele din meniu: antetul e lipit sus (85px) și transparent. La secțiunile cu spațiu mic deasupra titlului, acesta ajungea sub antet. */ :is(.section-moduri, .elementor-element-59deab2), :is(.section-platforma, .elementor-element-53a1164) { scroll-margin-top: 3.5rem; } /* --- 21.8 Banda finală (`section-5`, §14) pe ecrane mici ------------------ §14 avea doar varianta de desktop: decalaje fixe de 150px și enunțul din dreapta poziționat absolut — pe telefon titlul, butonul și enunțul se suprapuneau. Aici totul curge pe o coloană; desktopul rămâne neatins. */ @media (max-width: 62em) { .section-5 { padding: var(--sp-8) var(--sp-5) !important; background-position: 72% center !important; } /* voal peste portret, ca textul să rămână lizibil când ajunge peste el */ .section-5::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(0 26 54 / .9) 0%, rgb(0 26 54 / .72) 55%, rgb(0 26 54 / .35) 100%); pointer-events: none; } .section-5 :is(.title-1, .title-2, .title-3, .dual-heading) { padding-left: 0 !important; } .section-5 .btn-contact { margin-left: 0 !important; } .section-5 .dual-heading .premium-dual-header-wrapper h1 { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem) !important; text-align: left !important; } .section-5 .statement { position: relative !important; right: auto !important; bottom: auto !important; max-width: 100% !important; margin-block-start: var(--sp-6) !important; } .section-5 .statement .premium-dual-header-wrapper h2 { font-size: 1.25rem !important; } /* al doilea rând al titlului are mărimea lui în Elementor — pe telefon ieșea mai mic decât primul */ .section-5 .dual-heading :is(.premium-dual-header-first-span, .premium-dual-header-second-header) { font-size: inherit !important; line-height: inherit !important; } .section-5 .statement { align-self: flex-start !important; left: auto !important; margin-inline: 0 !important; padding-inline: 0 !important; width: auto !important; } .section-5 .statement .premium-dual-header-wrapper { text-align: left !important; justify-content: flex-start !important; } } /* ========================================================================== 22. Trecerea secțiune cu secțiune, față de planul din 19.09 (făcută pe 21.09) ========================================================================== */ /* --- 22.1 Eroul ---------------------------------------------------------- În plan, titlul stă pe DOUĂ rânduri (unul navy, unul verde), iar textul ocupă aproape jumătate din lățime. Aici coloana era plafonată la 30rem și titlul ieșea pe patru rânduri. Lățimea e legată de fereastră (44vw), ca pe ecrane mai înguste textul să se rupă singur în loc să intre peste automat (poza e la scara naturală, lipită de dreapta — automatul începe la ~50%). */ /* Poza eroului e la scara NATURALĂ, lipită de dreapta: automatul ocupă ultimii ~720px indiferent de fereastră. Deci locul textului = lățimea ferestrei − 720px − marginea din stânga (6vw) − un spațiu de respiro. (Prima încercare, cu 44vw, punea textul peste automat la 1280px.) */ .hero { --loc-text: max(22rem, calc(100vw - 720px - 6vw - 2.5rem)); } .hero-title { max-width: min(42rem, var(--loc-text)) !important; } .hero-title .premium-dual-header-wrapper h2 { font-size: clamp(2.1rem, 1.4rem + 2vw, 2.95rem) !important; } .hero-title .premium-dh-description { max-width: 100% !important; padding: 0 !important; margin-inline: 0 !important; } /* Pilonii: în plan, iconița e în STÂNGA textului, trei pe un rând. Ion a trecut de la clasa `icon-hero` (fișierele cu textul copt) la `icon`, cu iconițe curate + titlu + descriere în widget. */ .hero .elementor-element-7507f02 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--sp-3) !important; width: 100% !important; max-width: min(42rem, var(--loc-text)) !important; align-items: start !important; } .hero .icon { width: auto !important; min-width: 0 !important; margin: 0 !important; } .hero .icon .elementor-image-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--sp-2) !important; text-align: left !important; } .hero .icon .elementor-image-box-img { flex: none; width: auto !important; margin: 0 !important; } .hero .icon .elementor-image-box-img img { display: block !important; width: 46px !important; height: 46px !important; object-fit: contain !important; } .hero .icon .elementor-image-box-content { min-width: 0; text-align: left !important; } .hero .icon .elementor-image-box-title { font-family: var(--f-text) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.02em; line-height: 1.3 !important; color: var(--navy) !important; margin: 0 !important; } .hero .icon .elementor-image-box-description { font-family: var(--f-text) !important; font-size: 0.8rem !important; line-height: 1.35 !important; color: var(--text-stins) !important; margin: 0 !important; } @media (max-width: 62em) { .hero-title, .hero-title .premium-dh-description, .hero .elementor-element-7507f02 { max-width: 100% !important; } } @media (max-width: 40em) { .hero .elementor-element-7507f02 { grid-template-columns: 1fr !important; gap: var(--sp-3) !important; } } /* --- 22.1b Eroul, ajustări cerute de Ion (21.09): titlu mai gros și mai mare, descriere mai mare și mai lată, zona de iconițe mai mare — toate trei pe ACEEAȘI lățime: locul rămas până la automat. -------------------------- */ .hero { --loc-text: max(22rem, calc(100vw - 720px - 6vw - 1rem)); } .hero-title { max-width: min(50rem, var(--loc-text)) !important; } /* Titlul părea subțire fiindcă cele două span-uri din widget (Dual Heading) își aduc tipografia lor — Roboto 600 — peste fontul de titlu al site-ului. Mărimea e legată de lățimea disponibilă: primul rând („Automatul tău poate vinde") umple coloana, deci titlul rămâne pe două rânduri la orice lățime de desktop, în loc să se rupă pe patru. */ .hero-title .premium-dual-header-wrapper h2 { /* măsurat: în Plus Jakarta 800, primul rând are ~8,8em lățime — împărțitorul 10,5 lasă ~15% rezervă față de automat */ font-size: clamp(2rem, calc(var(--loc-text) / 10.5), 4.6rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; } .hero-title .premium-dual-header-first-span, .hero-title .premium-dual-header-second-header { font-family: var(--f-titlu) !important; font-weight: 800 !important; font-size: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; } .hero-title .premium-dh-description { font-size: clamp(1.15rem, calc(var(--loc-text) / 30), 1.45rem) !important; line-height: 1.5 !important; margin-block-start: var(--sp-5) !important; } .hero .elementor-element-7507f02 { max-width: min(50rem, var(--loc-text)) !important; gap: var(--sp-4) !important; margin-block: var(--sp-6) !important; } .hero .icon .elementor-image-box-wrapper { gap: var(--sp-3) !important; } .hero .icon .elementor-image-box-img img { width: clamp(48px, calc(var(--loc-text) / 9), 72px) !important; height: clamp(48px, calc(var(--loc-text) / 9), 72px) !important; } .hero .icon .elementor-image-box-title { font-size: clamp(0.8rem, calc(var(--loc-text) / 40), 1rem) !important; line-height: 1.25 !important; } .hero .icon .elementor-image-box-description { font-size: clamp(0.8rem, calc(var(--loc-text) / 40), 0.98rem) !important; } /* --- 22.1c Panglica de târg din erou (widget Textual Showcase pus de Ion, fără clasă — prins ca fiu direct al eroului; acceptă și clasa `hero-panglica`). Ca în plan: pastilă deschisă, bulină verde, text navy. */ .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) { align-self: flex-start !important; width: auto !important; max-width: min(50rem, var(--loc-text)) !important; margin: 0 0 var(--sp-5) !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__outer-container { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.65rem !important; padding: 0.55rem 1.15rem 0.55rem 0.9rem !important; border-radius: var(--raza-pastila) !important; background: rgb(238 243 249 / 0.92) !important; border: 1px solid rgb(226 232 240 / 0.9) !important; box-shadow: 0 6px 18px -12px rgb(7 28 63 / 0.35); } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container { flex: none; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container.has-text { flex: 0 1 auto; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-icon { display: block !important; width: 12px !important; height: 12px !important; line-height: 0 !important; border-radius: 50%; /* bulina „în direct": un inel care se stinge, o dată la două secunde */ animation: avisa-panglica-puls 2s ease-out infinite; } /* Mărimea iconiței din widget (50px) e scrisă de Elementor cu `!important` și cu cinci clase în selector — de-asta lanțul lung de aici: trebuie să-l bată la specificitate, nu doar la `!important`. */ .elementor .elementor-element.hero > .elementor-element:is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container .pa-txt-sc__item-icon.pa-txt-sc__main-item svg { display: block !important; width: 12px !important; height: 12px !important; fill: var(--verde) !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-text { font-family: var(--f-text) !important; font-size: clamp(0.85rem, calc(var(--loc-text) / 38), 1.02rem) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--navy) !important; white-space: normal !important; } @keyframes avisa-panglica-puls { 0% { box-shadow: 0 0 0 0 rgb(111 168 60 / 0.55); } 70% { box-shadow: 0 0 0 9px rgb(111 168 60 / 0); } 100% { box-shadow: 0 0 0 0 rgb(111 168 60 / 0); } } @media (prefers-reduced-motion: reduce) { .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-icon { animation: none; } } @media (max-width: 62em) { .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) { max-width: 100% !important; } } /* culoarea bulinei: widgetul o pune pe , tot cu selector lung */ .elementor .elementor-element.hero > .elementor-element:is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container .pa-txt-sc__item-icon.pa-txt-sc__main-item svg, .elementor .elementor-element.hero > .elementor-element:is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container .pa-txt-sc__item-icon.pa-txt-sc__main-item svg path { fill: var(--verde) !important; } /* Panglica are acum patru elemente: bulina · „Lansare la" · „Expo Retail" (cu link) · „· 23–24 septembrie". Între bucățile de text ajunge un spațiu de cuvânt; primele două sunt aldine, data e normală — ca în plan. Linkul widgetului e un GOL întins peste element, deci sublinierea se desenează pe text, iar -ul doar prinde clicul. */ .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__outer-container { gap: 0.32em !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container:first-child { margin-inline-end: 0.35rem !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container.has-text { position: relative !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container.has-text .pa-txt-sc__item-text { font-weight: 700 !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container.has-text:last-child .pa-txt-sc__item-text { font-weight: 500 !important; color: var(--text-stins) !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__link { position: absolute !important; inset: -0.4rem -0.15rem !important; z-index: 2; border-radius: 4px; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container:has(.pa-txt-sc__link) .pa-txt-sc__item-text { /* verde, fără subliniere — cerut de Ion. Verdele închis, nu cel de CTA: pe fondul deschis al pastilei, #6fa83c are contrast prea mic pentru text. */ color: var(--verde-inchis) !important; text-decoration: none; transition: color .2s ease; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__item-container:has(.pa-txt-sc__link:hover) .pa-txt-sc__item-text { color: var(--navy) !important; } .hero > :is(.hero-panglica, .elementor-widget-premium-textual-showcase) .pa-txt-sc__link:focus-visible { outline: 2px solid var(--albastru); outline-offset: 1px; } /* --- 22.2 Scara de mărimi a secțiunilor (cerută de Ion, 21.09: „aceleași observații ca la erou — mărimea textului, a iconițelor, a titlurilor") --- Un singur loc pentru toate secțiunile de sub erou, ca să rămână egale între ele. Valorile de până acum erau cele din prima machetă, mai mici. */ :root { --t-sectiune: clamp(2rem, 1.2rem + 2.1vw, 2.9rem); /* 46px la 1440 (era 40) */ --t-intro: clamp(1.1rem, 0.9rem + 0.45vw, 1.3rem); /* 20,8px (era 17,3) */ --t-eyebrow: 0.9rem; /* 14,4px (era 12,8) */ --t-card-nume: clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem); /* 20,8px (era 17,3) */ --t-card-text: clamp(0.98rem, 0.9rem + 0.2vw, 1.08rem); /* 17,3px (era 14,7) */ } /* Titlul secțiunii. Ca la erou: span-urile widgetului Dual Heading aduc Roboto 600 peste fontul de titlu — de-asta păreau subțiri. */ .app-title { max-width: 54rem !important; } .app-title .premium-dual-header-wrapper h2 { font-size: var(--t-sectiune) !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; } .app-title .premium-dual-header-second-header { font-family: var(--f-titlu) !important; font-weight: 800 !important; font-size: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; } .app-title .premium-dual-header-first-span { font-size: var(--t-eyebrow) !important; letter-spacing: 0.1em !important; margin-block-end: var(--sp-4) !important; } .app-title .premium-dual-header-first-span::before { width: 26px; } .app-title .premium-dh-description { font-size: var(--t-intro) !important; line-height: 1.55 !important; margin-block-start: var(--sp-4) !important; } /* Aplicații */ .section-2 > .e-con:not(.aplicatii) > .e-heading-base { font-size: 1.08rem !important; } .app-card { padding: var(--sp-6) var(--sp-2) !important; gap: var(--sp-4) !important; } .app-card .elementor-image-box-img img { width: 64px !important; height: 64px !important; } .app-card .elementor-image-box-title, .app-card:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { font-size: 0.9rem !important; line-height: 1.3 !important; } .btn-app, .btn-proces { font-size: 1.02rem !important; padding: 0.9rem 1.7rem !important; } /* Conformitate */ .section-4 .elementor-image-box-img img { height: 92px !important; width: auto !important; } .section-4 .elementor-image-box-title, .section-4 .elementor-widget-image-box:not(:has(.elementor-image-box-title)) .elementor-image-box-wrapper::after { font-size: 1.12rem !important; line-height: 1.3 !important; } /* Pentru cine + Moduri de operare */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con { padding: var(--sp-6) var(--sp-5) !important; gap: var(--sp-4) !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-img { width: 60px !important; height: 60px !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-text { font-size: var(--t-card-nume) !important; } :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con > .e-paragraph-base { font-size: var(--t-card-text) !important; line-height: 1.55 !important; } :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con > .btn-app { font-size: 0.98rem !important; padding: 0.8rem 1rem !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-text { font-size: var(--t-card-text) !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-icon svg { width: 21px !important; height: 21px !important; } :is(.section-moduri, .elementor-element-59deab2) .elementor-icon-list-item { padding: 0.75rem 0 !important; gap: var(--sp-3) !important; } /* Platforma */ :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-items { gap: var(--sp-4) !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-icon { width: 54px; height: 54px; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-icon svg { width: 23px !important; height: 23px !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-text { font-size: clamp(1.08rem, 0.95rem + 0.35vw, 1.25rem) !important; } /* Conformitate: capul secțiunii e acum `.app-title` (înainte `h-conformitate`) și nu mai era legat de grila din §15 — cădea doar în rândul 1, îl înălța, iar între cele două rânduri de carduri apărea un gol mare. Îl întind pe ambele. */ .section-4 > .app-title { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: center !important; max-width: 100% !important; } /* Aplicații: Ion vrea introducerea pe UN SINGUR rând (o limitasem la 34rem ca să nu treacă peste valurile din fundal — se rupea în două). O las cât e textul; un halou alb o ține lizibilă acolo unde ajunge peste puncte. Sub ~1200px nu mai încape pe un rând și se rupe firesc. */ .section-2 .app-title { max-width: 100% !important; } .section-2 .app-title .premium-dh-description { max-width: 100% !important; text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 2px #fff; } /* Procesul: în plan titlul stă pe UN rând („Un proces simplu. Asistență reală.") */ .section-3 .app-title { max-width: min(58rem, 70%) !important; } .section-3 .app-title .premium-dh-description { max-width: 46rem !important; } /* Pentru cine: la mărimea nouă, butonul se rupea pe două rânduri */ :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con > .btn-app { font-size: 0.92rem !important; padding: 0.8rem 0.6rem !important; gap: 0.4rem !important; white-space: nowrap !important; } /* Tot textul cartonașelor e în Elementor; la 17px, aldinul plin e greoi */ :is(.section-cine, .elementor-element-92b96cc, .section-moduri, .elementor-element-59deab2) > .e-con > .e-con > .e-paragraph-base strong { font-weight: 500; } /* Moduri de operare: Ion a pus butonul „Cere o ofertă" ÎN rândul de cartonașe (al patrulea fiu al grilei) — cădea sub primul cartonaș, împins de cei 150px ai lui `.btn-contact` din §14. Îl întind pe tot rândul și îl centrez; arată ca butonul verde din plan. */ :is(.section-moduri, .elementor-element-59deab2) > .e-con > :is(.btn-contact, .btn-app) { grid-column: 1 / -1 !important; justify-self: center !important; align-self: center !important; width: auto !important; margin: var(--sp-5) 0 0 !important; padding: 1rem 2.2rem !important; gap: var(--sp-2) !important; font-family: var(--f-text) !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #fff !important; background: var(--verde) !important; border: 0 !important; border-radius: var(--raza-pastila) !important; box-shadow: var(--umbra-mica) !important; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > :is(.btn-contact, .btn-app)::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .2s ease; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > :is(.btn-contact, .btn-app):hover { background: var(--verde-inchis) !important; transform: translateY(-2px); box-shadow: var(--umbra) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > :is(.btn-contact, .btn-app):hover::after { transform: translateX(3px); } /* Introducerea de sub titlu pornește de la aceeași margine ca titlul (widgetul o centra în cutia ei când cutia era mai lată decât textul). */ .app-title .premium-dh-description { margin-inline: 0 !important; padding-inline: 0 !important; text-align: left !important; } /* --- 22.3 Banda finală, cu rândul de târg și al doilea buton (puse de Ion) --- În plan: cele două butoane stau UNUL LÂNGĂ ALTUL, pastile — primul verde plin, al doilea conturat deschis. Sunt frați direcți ai secțiunii (fără container al lor), deci secțiunea devine grilă cu două coloane de buton. */ @media (min-width: 62.01em) { .section-5 { display: grid !important; grid-template-columns: max-content max-content 1fr !important; align-content: center !important; justify-items: start !important; column-gap: var(--sp-3) !important; row-gap: 0 !important; } .section-5 > :is(.title-1, .title-2, .title-3, .dual-heading) { grid-column: 1 / -1 !important; } .section-5 > .btn-contact { grid-column: 1 !important; align-self: start !important; margin-top: var(--sp-5) !important; } .section-5 > .btn-contact ~ .btn-contact { grid-column: 2 !important; margin-left: 0 !important; } } .section-5 .btn-contact { border-radius: var(--raza-pastila) !important; padding: 0.95rem 1.9rem !important; font-size: 1.02rem !important; gap: var(--sp-2) !important; } .section-5 .btn-contact::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .2s ease; } .section-5 .btn-contact:hover::after { transform: translateX(3px); } .section-5 .btn-contact ~ .btn-contact { background: rgb(255 255 255 / 0.08) !important; color: #fff !important; border: 1px solid rgb(255 255 255 / 0.4) !important; box-shadow: none !important; } .section-5 .btn-contact ~ .btn-contact:hover { background: #fff !important; color: var(--navy-adanc) !important; } /* titlul benzii: cele două rânduri aveau un gol mare între ele — span-urile widgetului își aduc propria înălțime de rând */ .section-5 .dual-heading :is(.premium-dual-header-first-span, .premium-dual-header-second-header) { font-family: var(--f-titlu) !important; font-weight: 800 !important; line-height: 1.12 !important; margin: 0 !important; padding: 0 !important; } .section-5 .dual-heading .premium-dh-description { font-family: var(--f-text) !important; font-size: var(--t-intro) !important; line-height: 1.5 !important; color: rgb(255 255 255 / 0.9) !important; margin: var(--sp-4) 0 0 !important; max-width: 40rem !important; } /* Widgetul Dual Heading își pune descrierea într-o coloană flex cu `align-items:center`: când descrierea e mai îngustă decât cutia, plutea spre mijloc (vizibil la „Procesul" și, pe telefon, în banda finală). */ :is(.app-title, .hero-title, .dual-heading) .premium-dh-description { align-self: flex-start !important; text-align: left !important; margin-inline: 0 !important; } /* O singură margine de pagină: eroul (§18) și Conformitate (§15) încep la 6vw, secțiunile din §21 începeau la 8vw — în plan toate stau pe aceeași verticală. */ :root { --margine-pagina: clamp(1.25rem, 6vw, 8rem); } /* --- 22.4 Aplicații: carduri aliniate între ele (cerut de Ion, 22.09) -------- Fiecare card își centra conținutul pe verticală, deci iconița urca sau cobora după câte rânduri avea titlul (2, 3 sau 4) — rândul arăta dezordonat. Acum: iconița stă într-o casetă de înălțime fixă, la aceeași distanță de marginea de sus în toate cardurile, iar titlurile pornesc toate de la același nivel. Cardurile fără titlu (cele cu „…") își țin iconița pe aceeași linie cu restul. */ .app-card { justify-content: flex-start !important; padding: var(--sp-6) var(--sp-3) var(--sp-5) !important; } .app-card .elementor-image-box-wrapper { justify-content: flex-start !important; gap: var(--sp-4) !important; height: 100%; } .app-card .elementor-image-box-img { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 72px !important; flex: none; } /* înălțime egală, lățime după proporție: pictograma de act (lată) și cercurile +18/+16 (pătrate) ajung să cântărească la fel vizual */ .app-card .elementor-image-box-img img { width: auto !important; height: 64px !important; max-width: 92px !important; object-fit: contain !important; } .app-card img[src*="altele"] { height: 18px !important; } .app-card .elementor-image-box-content { width: 100% !important; } .app-card .elementor-image-box-title { text-align: center !important; text-wrap: balance; } /* --- 22.5 Titlurile de secțiune, legate de titlul din erou (22.09) --------- Ion: „am senzația că titlul e mai mic decât în Hero". Era: 46px față de 59px la 1440. Mai rău: titlul din erou e fluid (crește cu fereastra), iar cele de secțiune aveau plafon fix — la 1280px ieșeau MAI MARI decât eroul (46 vs 44). Acum au aceeași sursă: titlul de secțiune = 90% din titlul eroului, la orice lățime. Ierarhia H1 > H2 rămâne, dar abia vizibilă, cum a cerut. */ :root { --t-erou: clamp(2rem, calc((100vw - 720px - 6vw - 1rem) / 10.5), 4.6rem); --t-sectiune: max(1.9rem, calc(var(--t-erou) * 0.9)); } .hero-title .premium-dual-header-wrapper h2 { font-size: var(--t-erou) !important; } /* lățimea titlului nu mai e plafonată în rem: la 1920px titlul are 66px și „Același sistem. Trei moduri de operare" se rupea în două sub un plafon fix. Introducerea își păstrează o lățime de citit. */ .app-title { max-width: 100% !important; } .section-3 .app-title { max-width: 72% !important; } .app-title .premium-dh-description { max-width: 52rem !important; } .section-2 .app-title .premium-dh-description { max-width: 100% !important; } @media (max-width: 62em) { .section-3 .app-title { max-width: 100% !important; } } /* --- 22.6 Procesul: rândul celor șase pași -------------------------------- Structura de pus în Elementor, în `section-3`, sub cap (și sub video, când apare): un container cu clasa `proces-pasi`, iar în el șase widgeturi Image Box cu clasa `proces-pas` (imagine = pictograma „Proces 0N", titlu = pasul, descriere = rândul explicativ). Numerele 01–06 și săgețile dintre pași le desenează CSS-ul — nu se pun în Elementor. Pașii clientului/aparatului (1, 5, 6) sunt albaștri, ai specialistului (2, 3, 4) verzi, ca în pictograme. NU `pasi`/`pas`: clasele acelea există deja în §6 (prima pagină scrisă de mână), cu reguli de animație care ascund elementele până la scroll. */ .proces-pasi { position: static !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: var(--sp-4) !important; align-items: start !important; width: 100% !important; max-width: 100% !important; margin: var(--sp-4) 0 0 !important; padding: 0 !important; counter-reset: pas; } .proces-pas { position: relative !important; width: auto !important; min-width: 0 !important; margin: 0 !important; counter-increment: pas; --culoare-pas: #5cc4f1; text-align: center !important; } .proces-pas:nth-child(2), .proces-pas:nth-child(3), .proces-pas:nth-child(4) { --culoare-pas: #87bd27; } .proces-pas .elementor-image-box-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; text-align: center !important; } .proces-pas .elementor-image-box-img { width: auto !important; margin: 0 !important; line-height: 0; } .proces-pas .elementor-image-box-img img { display: block !important; width: 96px !important; height: 96px !important; object-fit: contain !important; } /* numărul pasului, în bulină, sub pictogramă */ .proces-pas .elementor-image-box-content { width: 100% !important; } .proces-pas .elementor-image-box-content::before { content: counter(pas, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; margin: var(--sp-3) auto var(--sp-3); border-radius: 50%; border: 2px solid var(--culoare-pas); background: #fff; font-family: var(--f-titlu); font-size: 0.85rem; font-weight: 800; color: var(--navy); } .proces-pas .elementor-image-box-title { font-family: var(--f-titlu) !important; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.18rem) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--navy) !important; margin: 0 0 var(--sp-2) !important; text-wrap: balance; } .proces-pas .elementor-image-box-description { font-family: var(--f-text) !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: var(--text-stins) !important; margin: 0 !important; text-wrap: balance; } /* săgeata spre pasul următor: pleacă din dreapta pictogramei, la jumătatea ei */ .proces-pas:not(:last-child)::after { content: ''; position: absolute; top: 48px; left: calc(50% + 58px); width: calc(100% + var(--sp-4) - 116px); height: 12px; transform: translateY(-50%); background: linear-gradient(90deg, var(--culoare-pas), var(--culoare-pas)) left center / calc(100% - 9px) 2px no-repeat, conic-gradient(from 225deg at 100% 50%, var(--culoare-pas) 90deg, transparent 0) right center / 10px 12px no-repeat; opacity: .85; pointer-events: none; } @media (max-width: 75em) { .proces-pasi { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: var(--sp-6) !important; } .proces-pas:nth-child(3n)::after { display: none; } } @media (max-width: 40em) { /* pe telefon: o coloană, pictograma în stânga, textul în dreapta, fără săgeți */ .proces-pasi { grid-template-columns: 1fr !important; row-gap: var(--sp-5) !important; } .proces-pas::after { display: none !important; } .proces-pas .elementor-image-box-wrapper { flex-direction: row !important; align-items: flex-start !important; gap: var(--sp-4) !important; text-align: left !important; } .proces-pas .elementor-image-box-img img { width: 64px !important; height: 64px !important; } .proces-pas .elementor-image-box-content { text-align: left !important; } .proces-pas .elementor-image-box-content::before { margin: 0 0 var(--sp-2); width: 30px; height: 30px; font-size: 0.75rem; } .proces-pas .elementor-image-box-title, .proces-pas .elementor-image-box-description { text-align: left !important; } } /* --- 22.7 Procesul: cei șase pași într-un singur panou (22.09) -------------- Ion a dat fiecărui pas, din Elementor, un card alb cu umbră tare: cardurile ieșeau de înălțimi diferite, lipite între ele, iar săgețile dispăreau în spatele lor. Varianta de aici: UN panou alb, cu pașii legați ca pe o linie a timpului. Fundalul și umbra puse pe widgeturi în Elementor sunt anulate de aici — dacă le scoate și de acolo, nu se schimbă nimic. */ .proces-pasi { gap: var(--sp-2) !important; margin: var(--sp-5) 0 0 !important; padding: var(--sp-7) var(--sp-5) var(--sp-6) !important; background: rgb(255 255 255 / 0.92) !important; border: 1px solid rgb(226 232 240 / 0.9) !important; border-radius: 22px !important; box-shadow: 0 30px 60px -34px rgb(7 28 63 / 0.35), 0 2px 6px rgb(7 28 63 / 0.04) !important; backdrop-filter: blur(6px); } .proces-pasi .proces-pas, .proces-pasi .proces-pas > .elementor-widget-container { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 var(--sp-2) !important; } .proces-pas .elementor-image-box-img img { width: 92px !important; height: 92px !important; border-radius: 50%; background: #fff; transition: transform .3s ease, box-shadow .3s ease; } .proces-pas:hover .elementor-image-box-img img { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--culoare-pas) 70%, transparent); } /* bulina cu numărul: plină, în culoarea pasului — se citește ca un reper, nu ca încă un cerc gol lângă pictograma care e și ea un cerc */ .proces-pas .elementor-image-box-content::before { width: 34px; height: 34px; margin: var(--sp-3) auto var(--sp-3); border: 0; background: var(--culoare-pas); color: #fff; font-size: 0.8rem; letter-spacing: 0.02em; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--culoare-pas) 80%, transparent); } .proces-pas .elementor-image-box-title { font-size: clamp(1rem, 0.88rem + 0.32vw, 1.16rem) !important; } .proces-pas .elementor-image-box-description { font-size: 0.93rem !important; } /* săgeata: linie punctată fină + vârf, între marginile pictogramelor */ .proces-pas:not(:last-child)::after { top: 46px; left: calc(50% + 56px); width: calc(100% + var(--sp-2) - 112px); height: 10px; z-index: 1; opacity: 1; background: repeating-linear-gradient(90deg, var(--culoare-pas) 0 6px, transparent 6px 11px) left center / calc(100% - 9px) 2px no-repeat, conic-gradient(from 225deg at 100% 50%, var(--culoare-pas) 90deg, transparent 0) right center / 9px 10px no-repeat; } /* legenda culorilor, sub panou */ .proces-pasi::after { content: '● Clientul și aparatul ● Specialistul'; grid-column: 1 / -1; justify-self: center; margin-top: var(--sp-5); padding-top: var(--sp-4); width: 100%; border-top: 1px solid var(--chenar); text-align: center; white-space: pre; font-family: var(--f-text); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: transparent; background: linear-gradient(90deg, #5cc4f1 0 50%, #87bd27 50% 100%); -webkit-background-clip: text; background-clip: text; } /* pașii apar pe rând când panoul intră în ecran (doar cu JS pornit și fără „reduce motion"; altfel sunt vizibili din prima) */ @media (prefers-reduced-motion: no-preference) { .js-gata .proces-pasi .proces-pas, .js-gata .proces-pasi .proces-pas::after { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .js-gata .proces-pasi:not(.e-vizibil) .proces-pas { opacity: 0; transform: translateY(16px); } .js-gata .proces-pasi:not(.e-vizibil) .proces-pas::after { opacity: 0; } .js-gata .proces-pasi .proces-pas:nth-child(1) { transition-delay: .05s; } .js-gata .proces-pasi .proces-pas:nth-child(2) { transition-delay: .17s; } .js-gata .proces-pasi .proces-pas:nth-child(3) { transition-delay: .29s; } .js-gata .proces-pasi .proces-pas:nth-child(4) { transition-delay: .41s; } .js-gata .proces-pasi .proces-pas:nth-child(5) { transition-delay: .53s; } .js-gata .proces-pasi .proces-pas:nth-child(6) { transition-delay: .65s; } } @media (max-width: 75em) { .proces-pasi { padding: var(--sp-6) var(--sp-4) !important; row-gap: var(--sp-6) !important; } } @media (max-width: 40em) { .proces-pasi { padding: var(--sp-5) var(--sp-4) !important; } /* pe telefon legenda stă pe două rânduri; culoarea se împarte pe verticală (pe orizontală, jumătatea cădea în mijlocul unui cuvânt) */ .proces-pasi::after { content: '● Clientul și aparatul\A● Specialistul'; white-space: pre; line-height: 1.9; background: linear-gradient(180deg, #5cc4f1 0 50%, #87bd27 50% 100%); -webkit-background-clip: text; background-clip: text; } .proces-pas .elementor-image-box-img img { width: 60px !important; height: 60px !important; } .proces-pas .elementor-image-box-content::before { margin: 0 0 var(--sp-2); width: 28px; height: 28px; font-size: 0.72rem; } } /* --- 22.8 „Pentru cine": fundal și carduri finisate (22.09) ----------------- Ion: „cred că am avea nevoie de un background la secțiune" — cardurile albe stăteau pe alb. Fundalul e făcut din CSS (nu poză): gri-albăstruiul paginii, o pată albastră sus-dreapta și una verde jos-stânga, plus un câmp de puncte care se stinge spre centru — ecoul valurilor de sub erou, fără să concureze cu ele. Dacă Ion pune un fundal din Elementor, îl acoperă cel de aici; pentru alt fundal, se șterge regula `background` de mai jos. */ :is(.section-cine, .elementor-element-92b96cc) { overflow: hidden !important; background: radial-gradient(56rem 30rem at 100% 0%, rgb(36 131 240 / 0.17), transparent 64%), radial-gradient(48rem 28rem at 0% 100%, rgb(111 168 60 / 0.15), transparent 64%), var(--fundal-alt) !important; } :is(.section-cine, .elementor-element-92b96cc).e-con::before { content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; opacity: 1 !important; background: radial-gradient(circle, rgb(36 131 240 / 0.42) 1.4px, transparent 1.9px) 0 0 / 20px 20px !important; -webkit-mask-image: radial-gradient(46rem 24rem at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(46rem 24rem at 100% 0%, #000 0%, transparent 72%); pointer-events: none; } :is(.section-cine, .elementor-element-92b96cc) > * { position: relative; z-index: 1; } /* cardul: alb curat, o dungă de brand care apare sus la trecerea cu mouse-ul */ :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con { position: relative !important; overflow: hidden !important; border-color: rgb(226 232 240 / 0.9) !important; box-shadow: 0 24px 48px -32px rgb(7 28 63 / 0.4), 0 1px 3px rgb(7 28 63 / 0.04) !important; } :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--albastru), var(--verde)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con:hover::after { transform: scaleX(1); } /* pictograma într-o casetă colorată discret — capul cardului capătă greutate */ :is(.section-cine, .elementor-element-92b96cc) .pa-txt-sc__item-container:not(.has-text) { display: grid !important; place-items: center; width: 60px !important; height: 60px !important; border-radius: 16px; background: color-mix(in srgb, var(--albastru) 9%, #fff); } :is(.section-cine, .elementor-element-92b96cc) .pa-txt-sc__item-img { width: 38px !important; height: 38px !important; } :is(.section-cine, .elementor-element-92b96cc) > .e-con > .e-con > .e-paragraph-base { padding-top: var(--sp-2); border-top: 1px solid var(--chenar); } /* --- 22.9 „Moduri de operare": finisaje (22.09) ----------------------------- Containerul gol pus de Ion pentru banda „1 – 2 – 3" ocupa un loc în coloana secțiunii și lăsa un gol dublu între titlu și carduri. Cât e gol, nu contează la așezare; când îl umple, reapare singur. */ :is(.section-moduri, .elementor-element-59deab2) > .e-con:not(:has(*)) { display: none !important; } /* același cap de card ca la „Pentru cine": pictograma în casetă, dungă la hover */ :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con { position: relative !important; overflow: hidden !important; box-shadow: 0 24px 48px -32px rgb(7 28 63 / 0.4), 0 1px 3px rgb(7 28 63 / 0.04) !important; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--albastru), var(--verde)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:hover::after { transform: scaleX(1); } /* cardul recomandat își ține dunga mereu vizibilă, verde */ :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:nth-child(2)::after { transform: scaleX(1); background: var(--verde); } :is(.section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-container:not(.has-text) { display: grid !important; place-items: center; width: 60px !important; height: 60px !important; border-radius: 16px; background: color-mix(in srgb, var(--albastru) 9%, #fff); } :is(.section-moduri, .elementor-element-59deab2) > .e-con > .e-con:nth-child(2) .pa-txt-sc__item-container:not(.has-text) { background: color-mix(in srgb, var(--verde) 14%, #fff); } :is(.section-moduri, .elementor-element-59deab2) .pa-txt-sc__item-img { width: 38px !important; height: 38px !important; } /* fără containerul gol, titlul ajungea prea aproape de carduri */ :is(.section-moduri, .elementor-element-59deab2) > .app-title { margin-bottom: var(--sp-5) !important; } /* --- 22.10 Platforma: lista pe un rând, sub text și laptop (22.09) ----------- Cu un al cincilea element (GDPR), lista ieșea prea înaltă și cobora sub imaginea cu laptopul, lăsând jumătatea dreaptă goală. Acum: text stânga, laptop dreapta, iar dedesubt elementele listei pe un singur rând, pe toată lățimea — oricâte ar fi (4, 5 sau 6), se împart egal. */ :is(.section-platforma, .elementor-element-53a1164) { row-gap: var(--sp-7) !important; align-items: start !important; } :is(.section-platforma, .elementor-element-53a1164) > .app-title { align-self: center !important; } :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-icon-list { grid-column: 1 / -1 !important; grid-row: 2 !important; } :is(.section-platforma, .elementor-element-53a1164) > .e-con, :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-image, :is(.section-platforma, .elementor-element-53a1164) > .e-image-base { grid-row: 1 !important; min-height: 18rem; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-items { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) !important; gap: var(--sp-4) !important; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-item { align-items: center !important; padding: var(--sp-4) !important; background: rgb(255 255 255 / 0.9); border: 1px solid var(--chenar); border-radius: var(--raza); box-shadow: 0 18px 36px -28px rgb(7 28 63 / 0.4); } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-icon { width: 46px; height: 46px; } :is(.section-platforma, .elementor-element-53a1164) .elementor-icon-list-text { font-size: 1.02rem !important; line-height: 1.3 !important; text-wrap: balance; } @media (max-width: 62em) { :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-icon-list { grid-row: auto !important; } :is(.section-platforma, .elementor-element-53a1164) > .e-con { min-height: 0; } } /* Platforma: laptopul e ÎN imaginea de fundal a secțiunii (2170×725, `contain`, lipită dreapta-sus), deci crește odată cu fereastra: înălțimea lui pe ecran = lățimea ferestrei / 2,993. Rândul 1 (text + locul laptopului) trebuie să fie cel puțin atât de înalt, altfel cartonașele de dedesubt urcă peste laptop — cum a văzut Ion pe ecranul lui, mai lat decât cel pe care testasem (1440). 96% = până sub reflexia laptopului; 4.5rem = padding-ul de sus al secțiunii. */ @media (min-width: 62.01em) { :is(.section-platforma, .elementor-element-53a1164) > .e-con, :is(.section-platforma, .elementor-element-53a1164) > .elementor-widget-image, :is(.section-platforma, .elementor-element-53a1164) > .e-image-base { min-height: calc(100vw / 2.993 * 0.96 - 4.5rem) !important; } } /* --- 22.11 Banda finală, adusă pe grila paginii (22.09) --------------------- §14 o împingea cu 150px ficși de la stânga (măsurați pe prima machetă): conținutul începea la 160px, când toată pagina începe la 6vw (86px la 1440). Titlul avea plafon fix (54px) — la 1920 ieșea MAI MIC decât titlurile de secțiune (66px), deși e fraza de închidere a paginii. */ .section-5 { padding-inline: var(--margine-pagina) !important; } .section-5 :is(.title-1, .title-2, .title-3, .dual-heading) { padding-left: 0 !important; } .section-5 > .btn-contact { margin-left: 0 !important; } .section-5 .statement { right: var(--margine-pagina) !important; } .section-5 .dual-heading .premium-dual-header-wrapper h1 { font-size: var(--t-sectiune) !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; } .section-5 .dual-heading :is(.premium-dual-header-first-span, .premium-dual-header-second-header) { font-size: inherit !important; letter-spacing: inherit !important; } .section-5 :is(.title-1, .title-2, .title-3) { font-size: clamp(0.78rem, 0.62rem + 0.28vw, 0.98rem) !important; } .section-5 .statement .premium-dual-header-wrapper h2 { font-size: clamp(1.4rem, 1rem + 0.9vw, 2.1rem) !important; } /* banda crește cu fereastra, ca portretul să nu fie tăiat tot mai strâns pe ecrane late */ @media (min-width: 62.01em) { .section-5 { min-height: clamp(34rem, 30vw, 44rem) !important; } } @media (max-width: 62em) { /* pe telefon: aer între rândul cu târgul și butoane; butoanele egale, pe toată lățimea */ .section-5 > .btn-contact { align-self: stretch !important; width: 100% !important; justify-content: center !important; margin-top: var(--sp-5) !important; } .section-5 > .btn-contact ~ .btn-contact { margin-top: var(--sp-3) !important; } } @media (max-width: 62em) { /* regula de desktop de mai sus (`right`) ar împinge enunțul cu 24px în afara marginii */ .section-5 .statement { right: auto !important; } } /* ========================================================================== 23. Subsolul, refăcut (22.09.2026) — înlocuiește vizual §10 -------------------------------------------------------------------------- Pe marginea paginii (6vw), nu în învelișul de 1200px: altfel sigla din subsol cădea la 144px, iar tot ce e deasupra ei începe la 86px. Fundalul e din aceeași familie cu „Pentru cine"; sus, o dungă de brand. ========================================================================== */ .subsol { position: relative; padding: 0 !important; border-top: 0 !important; background: radial-gradient(44rem 22rem at 0% 0%, rgb(36 131 240 / 0.10), transparent 62%), radial-gradient(40rem 22rem at 100% 100%, rgb(111 168 60 / 0.10), transparent 62%), var(--fundal-alt); } .subsol::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--albastru), var(--verde)); } .subsol__interior { display: grid; grid-template-columns: minmax(16rem, 1.5fr) 1fr 1fr minmax(15rem, 1.1fr); gap: var(--sp-7); align-items: start; padding: var(--sp-8) var(--margine-pagina) var(--sp-7); } .subsol .sigla__imagine--patrat { height: 132px !important; } .subsol__descriere { max-width: 24rem; margin: var(--sp-4) 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-stins); } .subsol__coloana-titlu { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-family: var(--f-text); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-inchis); } .subsol__coloana-titlu::before { content: ''; width: 18px; height: 3px; border-radius: var(--raza-pastila); background: var(--verde); } .subsol__lista { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .subsol__lista a { font-size: 1rem; font-weight: 500; color: var(--navy); transition: color .2s ease, padding-left .2s ease; } .subsol__lista a:hover, .subsol__lista a:focus-visible { color: var(--verde-inchis); padding-left: 4px; } .subsol__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin: 0; } .subsol__contact-rand { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 1rem; font-weight: 600; color: var(--navy); transition: color .2s ease; } .subsol__contact-rand:hover { color: var(--albastru); } .subsol__contact-rand svg { flex: none; width: 38px; height: 38px; padding: 10px; border-radius: 50%; color: var(--albastru); background: #fff; border: 1px solid var(--chenar); } .subsol__buton { margin-top: var(--sp-3); } .subsol__jos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); margin: 0 !important; padding: var(--sp-5) var(--margine-pagina) !important; border-top: 1px solid var(--chenar); font-size: 0.88rem; color: var(--text-stins); } .subsol__jos p { margin: 0; } .subsol__drepturi a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .subsol__motto { font-weight: 600; letter-spacing: 0.02em; color: var(--navy); text-align: center; } .subsol__social { justify-self: end; display: flex; gap: var(--sp-3); } .subsol__social a { width: 40px; height: 40px; background: #fff; } @media (max-width: 75em) { .subsol__interior { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); } .subsol__brand { grid-column: 1 / -1; } } @media (max-width: 40em) { .subsol__interior { grid-template-columns: 1fr; padding-block: var(--sp-7) var(--sp-6); } .subsol .sigla__imagine--patrat { height: 112px !important; } .subsol__jos { grid-template-columns: 1fr; justify-items: start; text-align: left; } .subsol__motto { text-align: left; } .subsol__social { justify-self: start; } } /* §10 avea `.subsol__contact a { color: text-stins }` — făcea gri și textul butonului */ .subsol .subsol__buton, .subsol .subsol__buton:hover { color: #fff !important; font-size: 0.98rem; } .subsol .subsol__contact-rand { color: var(--navy) !important; font-size: 1rem !important; } .subsol .subsol__contact-rand:hover { color: var(--albastru) !important; } .subsol .subsol__buton svg { color: #fff !important; width: 18px !important; height: 18px !important; } /* Antetul pe aceeași margine ca pagina: sigla era la 144px (învelișul de 1200px, centrat), iar titlurile de sub ea încep la 86px (6vw). */ .antet__interior { max-width: none !important; padding-inline: var(--margine-pagina) !important; } /* ========================================================================== 24. Antetul de landing page (22.09.2026) — fără meniu, cu un singur buton ========================================================================== Meniul de ancore și hamburgerul au fost scoase din `header.php` (regulile lor din §4 și §13 au rămas, inerte). Antetul: siglă + „Cere o ofertă”. - Pe erou: transparent, butonul ascuns (un singur CTA în primul ecran). - După erou (`antet--sub-erou`, dat de landing.js): fundal alb, butonul apare. - Derulare în jos (`antet--ascuns`): iese din ecran; în sus revine. ========================================================================== */ .antet { transition: transform .35s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; will-change: transform; } .antet--derulat { background: var(--fundal); } .antet--ascuns { transform: translateY(-100%); box-shadow: none; } .antet__interior { justify-content: space-between !important; } .antet__cta { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .2s ease, box-shadow .2s ease; } .antet--sub-erou .antet__cta { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s, background .2s ease, box-shadow .2s ease; } .antet__cta::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .2s ease; } .antet--sub-erou .antet__cta:hover { transform: translateY(-2px); } .antet__cta:hover::after { transform: translateX(3px); } /* Tastatura: dacă butonul primește focus (Tab) cât e ascuns, îl arătăm. */ .antet__cta:focus-visible { opacity: 1; visibility: visible; transform: none; } @media (max-width: 40em) { .antet__cta { padding: 0.7rem 1.1rem; font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .antet, .antet__cta { transition: none; } } /* Sigla din antet mărită cu 40% (cerut de Ion, 22.09): 60 → 84px; sub 62em 48 → 67px. Pe telefon îngust (≤40em) sigla + butonul nu încap la 67px (verificat la 390px: butonul ieșea din ecran), deci sigla rămâne la 60px și butonul e compact. */ .antet .sigla__imagine { height: 84px; } @media (max-width: 62em) { .antet .sigla__imagine { height: 67px; } } @media (max-width: 40em) { .antet .sigla__imagine { height: 60px; } .antet__cta { padding: 0.6rem 0.95rem; font-size: 0.85rem; } .antet__interior { gap: var(--sp-3); } } @media (max-width: 24em) { .antet .sigla__imagine { height: 52px; } .antet__cta { padding: 0.55rem 0.8rem; font-size: 0.8rem; } } @media (max-width: 21em) { .antet .sigla__imagine { height: 44px; } } /* Blocul de text din erou cu 60px mai sus (cerut de Ion, 22.09, după mărirea siglei). Conținutul e centrat vertical în cutia de 1070px: mut 60px din padding-ul de sus în cel de jos, deci doar textul urcă; poza nu se mișcă. Sub 62em rămâne regula din §18 (padding-block --sp-8). */ @media (min-width: 62.0625em) { .hero { padding-top: calc(var(--sp-9) - 60px) !important; padding-bottom: calc(var(--sp-9) + 60px) !important; } } /* Aplicații: blocul de titlu (Dual Heading) cu 60px mai sus pe desktop (cerut de Ion, 22.09; apoi încă 20px → 80px). Scad din padding-ul de sus al secțiunii — titlul, etichetele de grupă și cardurile urcă împreună; curba și valurile din fundal rămân. */ @media (min-width: 62.0625em) { .section-2 { padding-top: calc(clamp(6rem, 12vw, 14rem) - 80px) !important; } }