/* ========================================================================== Minionii × Carrefour — stiluri campanie Design: Figma "DIGITAL_STAR (Copy)" / frame Desktop (1920 × 6300) ========================================================================== */ /* -------------------------------------------------------------- Fonturi --- */ /* Proxima Nova e font comercial, servit local din assets/fonts/. Ubuntu si Montserrat vin de la Google Fonts (vezi din index.php). */ /* Fisierul din radacina are o singura greutate, asa ca il declaram doar ca 400. Un interval (400 700) ar spune browserului ca fontul acopera si bold-ul, iar atunci ar fi randat identic cu textul normal. */ @font-face { font-family: 'Proxima Nova'; src: url('../fonts/font.woff2') format('woff2'), url('../fonts/font.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondRegular/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondRegular/font.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondMedium/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondMedium/font.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondSemibold/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondSemibold/font.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondBold/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondBold/font.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondExtrabld/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondExtrabld/font.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('../fonts/ProximaNovaACondBlack/font.woff2') format('woff2'), url('../fonts/ProximaNovaACondBlack/font.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ------------------------------------------------------------- Tokens --- */ :root { /* * Fonturi, exact ca in Figma. Design-ul foloseste trei familii: * Ubuntu — titluri, bannere, etichete, butoane * Proxima Nova — paragrafe (servit local din assets/fonts/) * Montserrat — cifrele de pret */ --font-titlu: 'Ubuntu', 'Segoe UI', system-ui, sans-serif; --font-text: 'Proxima Nova', 'Ubuntu', 'Segoe UI', system-ui, sans-serif; --font-text-condensat: 'Proxima Nova Condensed', 'Proxima Nova', 'Ubuntu', sans-serif; --font-pret: 'Montserrat', 'Ubuntu', sans-serif; /* Culori preluate din frame-ul Desktop */ --albastru: #273BA1; --albastru-inchis: #1B2B7A; --albastru-deschis:#4055C8; --violet-footer: #29018C; --galben: #FFD84D; --galben-accent: #FEDB65; /* Galbenul din logotipul Minionii, luat din fisier: `minionii.png` are 25 037 de pixeli de #FDDA00, restul galbenurilor fiind doar antialiasing pe margini. Diferit de `--galben-accent`, care e galbenul de accent al textelor. */ --galben-logo: #FDDA00; --portocaliu: #F15E40; --rosu: #FF0033; --rosu-inchis: #E4003A; --roz-deschis: #FBC5D6; --bleu: #A2D9E8; /* Roz-ul (#F6A0C5), lila (#A8AAD8) si bleul (#8AA8DA) panourilor nu mai apar aici: vin din SVG-urile de forma, care includ propriul fill. */ --alb: #FFFFFF; --gri-text: #5A5A5A; /* * Dimensiuni care scaleaza pe scara de rezolutii (vezi finalul fisierului). * Valorile de aici sunt cele din macheta Desktop 1920; fiecare prag le * rescrie, iar regulile din corpul fisierului nu se mai ating. */ --container: 1416px; --hero-bloc: 1565px; /* zona hero, mai lata decat containerul */ /* * Corpurile sunt PROPORTIONALE CU PANOUL, nu trepte pe praguri. Panoul e * `min(1416, 100vw - 64px)`, deci `(100vw - 64px) * N / 1416` da exact cifra * din macheta cat timp panoul e intreg (peste 1500) si scade in acelasi ritm * cu el dedesubt. Treptele fixe produceau salturi: bannerul sarea de la 35 * la 29 intre 1024 si 1023, adica pentru un pixel de latime. * Minimul fiecarui clamp e valoarea din lp_MOBILE, ca sa nu apara o ruptura * la 767, unde macheta de mobil preia controlul. */ --font-banner: clamp(22px, calc((100vw - 64px) * 42 / 1416), 42px); --font-banner-mic: clamp(19px, calc((100vw - 64px) * 30 / 1416), 30px); --font-pas: clamp(15px, calc((100vw - 64px) * 26 / 1416), 26px); --font-eticheta: clamp(17px, calc((100vw - 64px) * 26 / 1416), 26px); --font-partener: clamp(18px, calc((100vw - 64px) * 24 / 1416), 24px); --font-buton: clamp(15px, calc((100vw - 64px) * 18 / 1416), 18px); /* Singurul care NU urmeaza panoul: cardul de produs se lateste cand panoul se strange, pentru ca scade numarul de coloane (186 la 1920, 221 la 768). Deci corpul lui rămâne 19 pe tot desktopul; mobilul il coboara la 15. */ --font-produs: 19px; /* Paddingurile panourilor: laterale in procente ca sa urmeze latimea, verticale in px pentru ca depind de placa portocalie de deasupra. */ --pad-jetoane-sus: 298px; --pad-jetoane-jos: 76px; --pad-branduri-sus: 149px; --pad-branduri-jos: 107px; --pad-pasi-sus: 115px; --pad-pasi-jos: 106px; /* Diametrul cercului de jeton. Pe desktop 134, cat in Figma si cat cea mai mare moneda exportata. Pe mobil scade, ca sa incapa 3 randuri in panou. */ --jeton-max: 134px; /* Figma: panourile mari colorate au raza 25, cardurile albe interioare 35. */ --raza-panou: 25px; --raza-card: 35px; --raza-pill: 999px; /* Umbre */ --umbra-card: 0 12px 32px rgba(16, 26, 84, .18); --umbra-sageata: 0 4px 12px rgba(0, 0, 0, .25); /* Placile portocalii au in Figma o umbra alba decalata, fara blur. */ --umbra-placa: 16px 13px 0 #FFFFFF; } /* -------------------------------------------------------------- Reset --- */ *, *::before, *::after { box-sizing: border-box; } /* NU pune `overflow-x` aici. Pe elementul radacina valoarea se propaga la viewport, iar `clip` alaturi de `overflow-y: visible` opreste complet derularea verticala a paginii in Chrome — pagina rămâne blocata sus. Taierea pe orizontala se face pe `body` (vezi mai jos). */ html { scroll-behavior: smooth; } /* Un singur gradient albastru pe toata pagina: sectiunile stau transparente peste el, ca sa nu apara cusaturi acolo unde se schimba fundalul. */ body { position: relative; margin: 0; font-family: var(--font-titlu); font-size: 16px; line-height: 1.45; color: var(--albastru); background: linear-gradient(180deg, #2B3FAB 0%, #273BA1 22%, #2E44B4 52%, #3348BE 74%, #273BA1 100%); overflow-x: hidden; } /* ------------------------------------------------- Lumini din fundal --- */ /* Cele cinci benzi diagonale blurate care dau relief albastrului. In Figma alterneaza stanga-dreapta la Y 900 / 1503 / 2331 / 3416 / 5229 din cei 6300, de unde procentele de mai jos. Fiind decorative, precizia lor nu e critica — blurul de 148 le face oricum difuze. */ .fundal-lumini { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .lumina { position: absolute; height: auto; } .lumina--1 { top: 14.3%; right: -8%; width: 38%; } .lumina--2 { top: 23.9%; left: -18%; width: 44%; } .lumina--3 { top: 37%; right: -12%; width: 49%; } .lumina--4 { top: 54.2%; left: -18%; width: 44%; } .lumina--5 { top: 83%; right: -6%; width: 54%; } img { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; border: 0; background: none; } .container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------- Banner de sectiune --- */ /* Placa portocalie inclinata care titreaza fiecare sectiune. */ /* Figma: Ubuntu Bold 42 / line-height 95, placa 114,75 inalta, raza 22, rotita 2,3°. Umbra este ALBA, decalata 16/13 si fara blur — de aici dunga alba care se vede sub placa, spre dreapta-jos. */ .banner { display: inline-block; position: relative; z-index: 3; padding: 10px 46px; /* In Figma placa intra 44px in panoul de dedesubt (banner 2035..2150, panou de la 2105). Marginea negativa reproduce exact suprapunerea. */ margin: 0 0 -44px; background: var(--portocaliu); color: var(--alb); font-family: var(--font-titlu); font-size: var(--font-banner); font-weight: 700; line-height: 95px; text-transform: uppercase; border-radius: 22px; transform: rotate(-2.3deg); box-shadow: var(--umbra-placa); } .banner--mic { font-size: var(--font-banner-mic); padding: 14px 34px 16px; } /* -------------------------------------------------------------- Header --- */ /* Antetul face parte din hero, asezat peste fundalul albastru — nu este o banda separata deasupra lui. DOUA pilule albe, cate una pentru fiecare logotip (cerinta clientului), peste macheta care le tinea pe amandoua in aceeasi pilula de 633 x 90 despartite de un „×". Randul — `.site-header` — preia latimea si centrarea de la pilula, iar fiecare pilula se strange acum pe logotipul ei. */ .site-header { position: relative; z-index: 10; display: flex; /* `stretch`, nu `center`: logotipul Minionii e mai inalt (80 fata de 47), deci pilula lui ar creste la 104 si cealalta ar rămâne la 90. Intinse pe rand, amandoua ies la 104 si arata ca o pereche. */ align-items: stretch; justify-content: center; gap: 24px; margin-inline: auto; } .header-pill { display: flex; align-items: center; justify-content: center; /* Pilulele nu mai au latime data, deci pe ecrane inguste randul lor ar da overflow. `min-width: 0` le lasa sa coboare sub latimea logotipului si `max-width: 100%` de mai jos strange imaginea odata cu ele. */ min-width: 0; min-height: 90px; padding: 12px 34px; background: var(--alb); border-radius: var(--raza-pill); box-shadow: var(--umbra-card); } /* Logotipurile se masoara pe LATIME, nu pe inaltime ca inainte: doar asa `max-width: 100%` le poate strange pastrand raportul cand pilula se comprima. 260 si 227 sunt exact inaltimile din macheta (47 si 80) trecute prin rapoartele fisierelor — 5,536 si 2,833. */ .header-pill img { max-width: 100%; height: auto; } .header-carrefour { width: 260px; } .header-minionii { width: 227px; } /* ---------------------------------------------------------------- Hero --- */ /* Pilula sta la y=176 in frame, iar continutul paginii incepe la y=76 — de aici cei 100px de sus. */ /* Fara overflow:hidden — traseul punctat trebuie sa treaca peste marginea de jos in sectiunea urmatoare. Ce iese lateral e taiat de body. */ /* FARA fundal propriu aici. Era un radial-gradient `at 78% 18%, rgba(80,104,224,.5) -> 0 la 62%`, adica un al doilea strat peste gradientul din `body`. Doua probleme: 1. centrul la 78% facea fundalul vizibil mai deschis spre dreapta si mai inchis spre stanga — singura variatie ORIZONTALA de culoare din toata pagina, si exact "diferenta de culoare pe background" raportata la 1280/1366/1440/1520 (fiind in procente, apare la orice latime); 2. la marginea dreapta a hero-ului transparenta era inca ~0,35, deci stratul se RETEZA acolo in loc sa se stinga. Strălucirile din macheta vin din `.fundal-lumini`, deci stratul asta era si de prisos. Daca vrei totusi o aura in hero, pune-o cu ultimul stop transparent ATINS in interiorul cutiei (de pilda `... 0%, rgba(80,104,224,0) 100%`), altfel revine cusatura. */ /* MICSORAREA HERO-ULUI CU 10% — cele trei linii `zoom` / `width` / `margin-inline` lucreaza impreuna, nu se pot lua separat. `zoom: .9` singur NU micsoreaza cu 10%: el mareste spatiul de coordonate al subarborelui la 1/0.9, iar plafonul `calc(100% - 64px)` de la `.hero-grid` inceteaza sa mai lege. Masurat la 1505: grila, vizualul si badge-ul ieseau la 97,8%, nu la 90% — adica o micsorare de 2%, nu de 10%. `width: 90%` anuleaza exact acea inflatie: 90% dintr-un containing block care in spatiul mărit are W/0.9 da tocmai W. Deci INTERIORUL se calculeaza identic cu inainte (aceleasi procente, acelasi `100vw` in `clamp`), iar apoi tot ansamblul se randeaza la 90%. Asta e o micsorare vizuala curata. De ce nu `transform: scale(.9)`: scaleaza corect, dar nu atinge asezarea, deci lasa un gol de 10% din inaltimea hero-ului — 107px la 1505. `zoom` colapseaza spatiul singur. Daca schimbi scara, schimba AMBELE numere (0.9 in `zoom` si 90% in `width`). */ .hero { position: relative; /* Cat urca hero-ul, in pixeli DINAINTE de micsorare: pe ecran se vede 0,9 din ei. 11,11px de aici = 10px pe ecran. Se scade din paddingul de sus in toate cele trei benzi care il declara (aici, 768-900 si mobil). */ --hero-ridicare: 11.11px; zoom: 0.9; width: 90%; margin-inline: auto; /* Doi butoni distincti, ambii scazuti din paddingul de sus: --hero-ridicare cat urca hero-ul singur; --pagina-ridicare cat urca TOT continutul paginii. Al doilea foloseste acelasi padding fiindca hero-ul e primul element in flux: ce tai de deasupra lui ridica tot ce vine dupa, fara sa atingi spatiile dintre secțiuni. Asa golurile dintre panouri (88/96/94 pe mobil, exact ca in lp_MOBILE) si cat se vede din fiecare traseu rămân neschimbate. Se declara doar pe mobil, de aceea rezerva `0px` de aici. */ /* 55, nu cei 100 din macheta: in Figma pilula sta la y=176 iar continutul paginii incepe la y=76, de unde veneau cei 100. Pe ecran asta dadea 80px de albastru gol deasupra pilulelor, iar clientul a cerut mai putin — acum sunt 40. Pe mobil paddingul e declarat separat, in blocul de sub 768, si acolo rămân 6px. */ padding: calc(55px - var(--hero-ridicare) - var(--pagina-ridicare, 0px)) 0 50px; } /* In Figma zona hero se intinde de la x=213 la x=1778 din cei 1920 (81,5%), iar textul si compozitia vizuala se SUPRAPUN: blocul din dreapta incepe la x=667, inainte sa se termine paragraful. Le asezam de aceea in aceeasi celula de grid, nu in doua coloane alaturate. */ /* Pilula se termina la y=266, iar compozitia vizuala incepe la y=245: cele doua se intrepatrund cu 21px, de unde marginea negativa. */ .hero-grid { position: relative; z-index: 2; display: grid; grid-template-areas: 'zona'; width: min(var(--hero-bloc), calc(100% - 64px)); margin: -21px auto 0; } .hero-continut, .hero-vizual { grid-area: zona; } /* 569 din 1565 — cat masoara logotipul Carrefour */ .hero-continut { position: relative; z-index: 3; align-self: center; width: 36.4%; } /* 1111 din 1565, lipit de marginea din dreapta */ .hero-vizual { width: 71%; justify-self: end; align-self: center; } /* Titlul are TREI randuri, toate scrise ca text: "ÎNCEPE", "BANANAVENTURA" (singurul galben) si "LA CARREFOUR". Al treilea nu mai e logotipul Carrefour — clientul a spus ca ii ajunge cel din pilula albă din antet. Fiind o propozitie, toate randurile au ACELASI corp, tinut intr-o variabila ca sa nu se poata desincroniza pe benzi. Corpul il da cuvantul cel mai LUNG, iar acum acela e "BANANAVENTURA" cu 9,096em in Ubuntu Bold — nu 12,912em cat avea propozitia intreaga pe un rand. De aceea litera poate urca de la 48 la 59: intr-o coloana de 569 cuvantul incape la cel mult 62, iar 59 lasa ~6% rezerva daca fontul randeaza cu un fir mai lat. Si de aceea nu mai e nevoie de `white-space: nowrap` si de ieșirea din coloana: randurile incap acum in ea, deci nu se mai apropie de minionul din dreapta. Proportia se ia din BLOCUL hero (1565), nu din viewport: `4.35vw` atingea valoarea din macheta abia la exact 1920 si scadea imediat sub, desi blocul e inca la latime plina pana la 1629. */ .hero-titlu { margin: 0; color: var(--alb); line-height: 1; --corp-titlu: clamp(28px, calc((100vw - 64px) * 59 / 1565), 59px); /* Blocul e centrat in coloana, la orice latime: clientul a cerut asa si pentru paragraful de dedesubt, iar cele trei randuri au lungimi foarte diferite ("ÎNCEPE" 3,6em, "BANANAVENTURA" 9,1em), deci aliniate la stanga arata neregulat. */ text-align: center; } .hero-titlu-rand { display: block; font-family: var(--font-titlu); font-size: var(--corp-titlu); font-weight: 700; line-height: 1.055; } .hero-titlu-galben { color: var(--galben-logo); } /* Figma: Proxima Nova 26 / line-height 120%. Raportat la blocul hero, ca titlul. */ .hero-text { margin: 26px 0 0; font-family: var(--font-text); font-size: clamp(15px, calc((100vw - 64px) * 26 / 1565), 26px); line-height: 1.2; color: var(--alb); /* Centrat, ca titlul de deasupra — cerinta clientului: aliniat la stanga sub un titlu centrat arata dezlipit. */ text-align: center; } /* Fisierul Proxima Nova furnizat are o singura greutate si browserul nu ii sintetizeaza bold-ul, asa ca accentele din paragraf trec pe Ubuntu Bold — celalalt font al design-ului. Inlocuieste cu 'Proxima Nova' de indata ce exista si un fisier Bold in assets/fonts/. */ .hero-text strong { font-family: var(--font-titlu); font-weight: 700; } /* „50% REDUCERE" din paragraful hero, in galbenul din logotipul Minionii — acelasi cu al cuvantului „BANANAVENTURA" de deasupra. Clasa e generala, nu legata de hero, ca sa poata marca orice bucata de text in aceeasi nuanta. */ .accent-galben { color: var(--galben-logo); } /* Compozitia din dreapta: doua panouri colorate, minionii peste ele, badge-ul turcoaz si globul. Cadrul de referinta este zona 667..1778 x 245..1154 din frame-ul Figma (1111 x 909). Toate pozitiile de mai jos sunt procente din acest cadru, asa ca proportiile raman exacte la orice latime. */ .hero-vizual { position: relative; aspect-ratio: 1111 / 909; } .hero-panou { position: absolute; display: block; } /* 386 x 504 la (859, 440) */ .hero-panou--rosu { left: 17.3%; top: 21.5%; width: 34.7%; height: 55.4%; z-index: 1; background: #F05F40; } /* 386 x 388 la (1246, 556) */ .hero-panou--albastru { left: 52.1%; top: 34.2%; width: 34.7%; height: 42.7%; z-index: 2; background: #8AA8DA; } .hero-minion { position: absolute; height: auto; } /* 695 x 783 la (667, 245) — iese in stanga panoului rosu */ .hero-minion--turist { left: 0; top: 0; width: 62.6%; z-index: 4; } /* 517 x 574 la (1200, 580) — coboara sub panoul albastru */ .hero-minion--palarie { left: 48%; top: 36.9%; width: 46.5%; z-index: 5; } /* 295 x 276 la (1280, 291) */ .hero-badge { position: absolute; left: 55.2%; top: 5.1%; width: 26.6%; z-index: 6; } /* 199 x 199 la (1579, 438) — sta in spatele minionului cu palarie */ .hero-glob { position: absolute; left: 82.1%; top: 21.2%; width: 17.9%; z-index: 3; } /* 425 x 228 la (870, 934) — silueta din fundal */ .hero-ny { position: absolute; left: 18.3%; top: 75.8%; width: 38.3%; z-index: 0; } /* ========================================================================== Traseul punctat galben (Vector 19–24 din Figma) Cinci segmente care coboara prin pagina, cate unul la fiecare trecere intre sectiuni. Fiecare e ancorat de marginea de JOS a sectiunii gazda, ca sa treaca peste granita chiar daca inaltimea sectiunii difera de cea din design. `left` si `width` sunt procente din cei 1920 ai frame-ului, deci raportul fata de pagina ramane acelasi la orice rezolutie. ========================================================================== */ .traseu { position: absolute; z-index: 1; height: auto; pointer-events: none; /* Un . Cu , stilurile paginii nu intra in interiorul imaginii, deci `stroke-width` rămânea blocat in fisier — iar acelasi fisier serveste si desktopul si mobilul, la scări intre 0,27x si 1,01x. Rezultatul erau linii de la 1,36px la 5,06px pe acelasi ecran. `vector-effect: non-scaling-stroke` e cheia: face ca grosimea si punctul sa fie socotite in pixeli de ecran, nu in unitatile desenului. Asa un singur numar da aceeasi linie la toate traseele, oricat de diferit ar fi scalat fiecare. */ .traseu path { fill: none; stroke: #FFFF00; stroke-width: var(--traseu-linie); stroke-dasharray: var(--traseu-punct) var(--traseu-punct); vector-effect: non-scaling-stroke; } /* ------------------------------------------- lumina care alearga pe traseu --- */ /* Al doilea `path` din fiecare traseu, identic cu primul, dar alb si cu halou. Din el se vede o SINGURA porțiune, cat o liniuta, iar animatia o plimba de la un capat al traseului la celalalt — liniutele se aprind una dupa alta, in sir indian. DE CE `stroke-dashoffset` SI NU O MASCA: prima varianta folosea o masca-banda orizontala, adica selecta dupa POZITIA PE ECRAN. Dar traseele se intorc pe ele insele (bucla din hero, curbele dintre panouri), iar o banda orizontala taie curba in doua-trei locuri deodata — se aprindeau trei liniute simultan, la inaltimi egale. `stroke-dashoffset` merge de-a lungul ARCULUI curbei, deci pozitia luminii nu mai are nimic de-a face cu inaltimea pe ecran. CUM SE OBTINE O SINGURA LINIUTA: `stroke-dasharray` pe stratul de lumina e ` `, deci exista o singura porțiune vizibila pe toata lungimea. `stroke-dashoffset` o muta, iar `steps()` face saltul exact de o liniuta plus un spatiu, ca sa cada mereu peste una din liniutele de dedesubt. `stroke-dasharray` si animatia vin din assets/js/trasee.js: depind de lungimea reala a curbei si de scara la care e afisata, pe care CSS-ul nu le stie. ANIMATIA NU E UN `@keyframes`, ci se construieste din JS cu Web Animations API. Motivul: `var()` folosit INAUNTRUL unui `@keyframes` nu se aplica. Verificat pe patru variante — `stroke-dashoffset` pus direct: merge; negativ mare: merge; `calc(-1 * var(...))` direct pe element: merge (-1293px); acelasi calc intr-un cadru-cheie: rămânea 0, iar cu valoarea scrisa literal in cadru ajungea la -635px. Cum lungimea curbei se afla oricum doar din JS (`getTotalLength`), animatia se face acolo. */ .traseu path.traseu-glow { /* Miez aproape alb: o liniuta care lumineaza tare isi pierde culoarea in centru si o pastreaza doar in halou. Galbenul rămâne in cele trei umbre. */ stroke: #FFFFFF; /* Mai groasa decat linia de baza, ca sa o acopere complet si sa para ca liniuta insasi lumineaza, nu ca e desenata alta peste ea. */ stroke-width: calc(var(--traseu-linie) * 1.8); /* Trei straturi, de la strans la larg: miez alb-cald, inel galben, revarsare ambra. Un singur `drop-shadow` da o pata plata; trei dau adancime. */ filter: drop-shadow(0 0 3px rgba(255, 255, 225, 1)) drop-shadow(0 0 9px rgba(255, 235, 90, .95)) drop-shadow(0 0 22px rgba(255, 200, 0, .75)); /* Ascunsa pana cand JS-ul a calculat lungimile. Fara asta, o pagina cu JS oprit ar arata stratul de lumina INTREG peste traseu — adica tot traseul alb. */ opacity: 0; } .traseu.are-lumina path.traseu-glow { opacity: 1; } /* Oprirea cand traseul nu e pe ecran se face din JS, pe obiectul de animatie (`.pause()`), nu cu o clasa: `animation-play-state` nu are efect asupra unei animatii create cu Web Animations API. */ /* Cine a cerut mai putina miscare vede traseul static, fara lumina. */ @media (prefers-reduced-motion: reduce) { .traseu path.traseu-glow { display: none; } } /* --------------------------------------- poziționarea fiecarui traseu --- */ /* Procente din latimea secțiunii gazda, deci raportul cu pagina rămâne acelasi la orice rezolutie. Banda de mobil (<=767.98) le rescrie pe toate. */ /* Vector 19 — 682 x 249: bucla din hero. Traseul porneste la x=-94, deci intra din afara marginii stangi a paginii. */ .traseu--19 { left: -4.9%; bottom: -109px; width: 32.5%; } /* Vector 20 — 368 x 157: capatul de jos cade 141px sub baza cardului galben. `bottom` = 141 minus paddingul de jos al sectiunii (60). */ .traseu--20 { left: 50.3%; bottom: -81px; width: 19.5%; } /* FAZA LINIUTELOR pe traseul 2. Curba iese de sub forma pictata a panoului galben la 56,4px de la startul ei, iar acolo tiparul cadea exact pe un GOL: rămâneau 9,6px de nimic tocmai unde ochiul aștepta sa inceapa linia, deci traseul parea ca porneste mai tarziu, desprins de panou. Cei 9px muta tiparul ca o liniuta sa inceapa chiar in punctul de ieșire. Valoarea de aici e doar REZERVA pentru cazul in care JS-ul nu ruleaza, si e calibrata pentru o singura lațime. Nu poate fi universala: lungimea curbei in pixeli creste cu lațimea ferestrei, dar liniuta e fixa la 10,9px de ecran (`vector-effect: non-scaling-stroke`), deci faza la punctul de ieșire se roteste complet la fiecare ~39% de lațime. Cand JS-ul ruleaza, assets/js/trasee.js calculeaza faza pentru TOATE cele cinci trasee, la lațimea curenta, si o rescrie ca stil inline — deci valoarea asta e ignorata. Punctul de ieșire se afla cu `isPointInFill` pe forma pictata a panoului. */ .traseu--20 path { stroke-dashoffset: 9px; } /* Vector 21 — 724 x 566: 108px sub baza cardului roz, minus paddingul de 29. Singurul traseu legat de CONTAINER, nu de secțiune. Restul sunt procente din secțiune, adica din toata fereastra — dar panourile sunt plafonate la 1416, deci raportul traseu/panou se schimba cu lațimea ferestrei: masurat, traseul avea 55,2% din panou la 2560, dar doar 47% la 1920, si atat il facea sa nu mai iasa de sub colțul din dreapta-jos al panoului roz. Arcul din dreapta rămânea ascuns sub panou. `--cont` repeta formula containerului, iar procentele sunt luate din randarea de la 2400+, pe care clientul a validat-o. ATENTIE la ce inseamna „marginea panoului": forma roz nu se intinde pe cutie, ci se incadreaza in ea (vezi `.card-pasi` in banda de 2400). De la 2400 in sus e pictata cu 72,8px mai inauntru pe fiecare parte, deci acolo traseul depaseste forma cu 66px — 4,52% din lațimea pictata — si arcul iese frumos de sub colțul din dreapta-jos. Sub 2400 forma umple cutia, deci ACELASI raport fata de cutie lasa traseul cu 5px INAINTE de forma, si colțul roz acopera liniutele. De aceea raporturile de aici sunt calibrate pe forma PICTATA de la 2400 — start 43,81% si lațime 60,71% din ea — iar banda de 2400 isi pastreaza valorile ei fata de cutie. Asa geometria fata de roz e identica la orice lațime. */ .traseu--21 { --cont: min(1416px, calc(100% - 64px)); --t3-start: 0.4381; --t3-lat: 0.6071; left: calc((100% - var(--cont)) / 2 + var(--cont) * var(--t3-start)); bottom: -59px; width: calc(var(--cont) * var(--t3-lat)); } /* Vector 22 — 314 x 360: 191px sub baza cardului lila, minus paddingul de 13. */ .traseu--22 { left: 42.5%; bottom: -178px; width: 16.4%; } /* Vector 24 — 301 x 275 */ .traseu--24 { left: 36.1%; bottom: -125px; width: 13.2%; } /* -------------------------------------------- Sectiunea galbena (produse) --- */ /* Fundalul ramane albastru: galbenul este un card care pluteste peste el. Paddingul de sus reproduce spatiul din Figma pana la sectiunea precedenta (64px de la baza minionilor la placa portocalie). Cel de jos NU se schimba fara a recalcula si `bottom` al traseului punctat din sectiune. */ /* Spatiile se masoara PANOU la PANOU si sunt uniforme, 153px intre toate — in Figma variaza (134/153/108/92), dar la inaltimile reale ale panourilor de aici valorile mici arata inghesuit. Ferestrele astea sunt cele prin care se vede traseul punctat: cu cat sunt mai largi, cu atat se vede mai mult din el. Se regleaza din `padding-top`, ca sa nu mute traseele (vezi mai jos). */ /* 200px pana la hero — trecerea de la minioni la primul panou suporta mai mult aer decat cele dintre panouri (153px). */ .sect-produse { position: relative; padding: 150px 0 60px; } /* Panourile de secțiune nu sunt dreptunghiuri: in Figma sunt patrulatere ușor neregulate (marginea de jos inclinata ~1°, in direcții diferite), cu colțuri rotunjite de 25. Forma vine din SVG-urile exportate din Figma, care includ si culoarea — de aceea nu mai au `background-color`, `border-radius` sau umbra. `background-size: 100% 100%` intinde forma pe panou; panourile fiind mai inalte decat originalul cu ~10%, colțurile se alungesc pe atat. */ .card-galben, .card-pasi, .card-jetoane, .card-partenere { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } /* PANOURILE STAU PESTE TRASEE. Traseele punctate au `z-index: 1`, iar panourile nu aveau niciun `z-index` — adica `auto`. Un element poziționat cu z-index 1 pictează DEASUPRA unuia cu `auto`, deci liniuțele galbene treceau pe deasupra panourilor in loc sa se ascunda sub ele. Cu lumina alba si haloul, trecerea a devenit imposibil de ignorat. Doua comentarii din fisierul asta presupuneau deja ca panoul are `z-index: 2` (vezi `.eticheta-banana` si placa de titlu); acum chiar il are. Efect secundar bun: si eticheta "banana" (z-index 1) intra sub panou, cum spune comentariul ei. Secțiunile sunt `position: relative` fara z-index, deci NU creeaza contexte de stivuire: valorile se compara global — trasee 1, panouri 2, plăci de titlu 4. Asa un traseu trece pe sub panoul secțiunii urmatoare, nu doar pe sub al sau. */ .card-galben, .card-pasi, .card-jetoane, .card-partenere, .card-branduri { position: relative; z-index: 2; } /* Cardul galben — 1422 x 664. Padding-urile reproduc decalajul fata de cardul alb interior (1102 x 480). */ .card-galben { position: relative; padding: 8% 11.3% 5.3%; background-image: url('../img/bg-yellow.svg'); } /* Placa portocalie sta calare pe coltul din stanga sus al cardului galben. Iese in stanga panoului DOAR de la 1520 in sus (vezi banda respectiva). In macheta de 1920 depaseste panoul cu 46px, dar asta cere o marja laterala de cel putin atat: marja e 24px la 1024-1279, 32px la 1280-1499 si abia peste 1520 ajunge la 52px. Cu `-46px` scris aici, in baza, placa ieșea din ECRAN la toate latimile intre 768 si ~1510, retezata de `body { overflow-x: hidden }`. Masurat inainte de reparare: -28px la 803, -16px la 1423. */ .card-galben .banner { position: absolute; top: -32px; left: 0; margin: 0; z-index: 4; } .minion-galben { position: absolute; z-index: 1; pointer-events: none; } /* Iese cu doua treimi deasupra marginii de sus, spre dreapta. */ .minion-galben--sus { top: -0.05%; right: 13%; width: 7.8%; } /* Sta in interiorul cardului, jos-stanga, sub carusel. */ .minion-galben--jos { bottom: 13.2%; left: 4%; width: 10%; z-index: 3; } .card-produse { position: relative; z-index: 2; padding: 42px 46px 38px; background: var(--alb); border-radius: var(--raza-card); box-shadow: var(--umbra-card); } /* ------------------------------------------------------- Card produs --- */ /* Fara height:100% — slide-urile se intind singure prin align-items:stretch, iar .produs-nume cu flex:1 impinge preturile pe aceeasi linie de baza. */ .produs { display: flex; flex-direction: column; text-align: center; } .produs-media { position: relative; aspect-ratio: 1 / 1; background: #FDEBEB; border-radius: 18px; } /* Fotografiile vin in proportii diferite (patrate, portret, peisaj). Imaginea e scoasa din flux: altfel cele in portret intindeau zona pe verticala, iar numele produselor ieseau la inaltimi diferite intre carduri. `object-fit` incadreaza fiecare fotografie in patratul astfel garantat. */ .produs-media img { position: absolute; top: 14px; left: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; } /* Figma: Ubuntu Bold 19 / line-height 110%. */ .produs-nume { flex: 1; margin: 16px 0 12px; font-family: var(--font-titlu); font-size: var(--font-produs); font-weight: 700; line-height: 1.1; color: var(--albastru); } /* ------------------------------------------- Produs clicabil (are `url`) --- */ /* Linkul e pe numele produsului, ca sa aiba un nume accesibil citibil, dar pseudo-elementul lui acopera tot cardul: se poate apasa si pe fotografie si pe pastila de pret, fara sa impachetam tot cardul intr-un . `position` pe card e ancora acestei suprafete — fara ea s-ar intinde peste toata pagina. carousel.js anuleaza click-ul cand utilizatorul tocmai a tras de carusel, deci swipe-ul pe mobil nu deschide produsul din greseala. */ .produs--link { position: relative; } .produs-link { text-decoration: none; } .produs-link::after { content: ''; position: absolute; inset: 0; /* Deasupra fotografiei (poziționata absolut) si a pastilei de pret, care vin inainte si dupa nume in DOM. */ z-index: 2; border-radius: 18px; } /* Semnalul de link e doar fotografia care creste putin — clientul nu vrea linie sub numele produsului la hover, de aceea `text-decoration: none` de mai sus nu are pereche pe :hover. Aceeasi stare si la focus din tastatura, prin `:focus-within` pe card, nu doar la mouse; focusul are in plus conturul de mai jos. */ .produs--link .produs-media img { transition: transform .18s ease; } .produs--link:hover .produs-media img, .produs--link:focus-within .produs-media img { transform: scale(1.05); } /* Conturul de focus se deseneaza pe suprafata intinsa, ca sa incadreze tot cardul. */ .produs-link:focus-visible::after { outline: 3px solid var(--albastru); outline-offset: 4px; } /* Figma: eticheta Ubuntu Regular 16, letter-spacing -3%. */ .produs-pret-intreg { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--font-titlu); font-size: 16px; font-weight: 400; letter-spacing: -.03em; color: var(--albastru); } /* Figma: cifra Montserrat Bold 31,16. FARA `color` propriu: cifra moștenește bleumarinul rândului, acelasi de pe eticheta si pe „LEI / 90" — inainte era roșu (#FF0033). Prin moștenire nu se pot desincroniza. */ .produs-pret-intreg .valoare { font-family: var(--font-pret); font-size: 31.16px; font-weight: 700; line-height: 1; } .produs-pret-5x { display: flex; align-items: center; justify-content: center; /* `wrap` + `nowrap` pe eticheta (mai jos) garanteaza ca iconita mini-pack NU se desprinde niciodata de textul "Pret cu 5x": ori incap amandoua pe randul pastilei, ori trec impreuna pe rand propriu. Inainte eticheta era strivita (83px din 96 necesari) si iconita cadea singura pe al doilea rand, cu centrul la 26px sub text — masurat la 1903. */ flex-wrap: wrap; /* 8 si 6, nu 12 si 10: la 5 coloane slide-ul are 186px, deci pastila are 162 utili iar continutul cere 175. Paddingul si gap-ul mai mici dau cei 16px care lipsesc. Erau deja valorile folosite in banda de mobil, din acelasi motiv. */ gap: 6px; margin-top: 12px; padding: 10px 8px; background: var(--portocaliu); /* Tot conținutul pastilei — eticheta „Preț cu 5x", cifra, „LEI" si zecimalele — e bleumarin, acelasi #273BA1 de pe randul „Preț întreg" de deasupra. Era alb. */ color: var(--albastru); border-radius: 12px; font-family: var(--font-titlu); font-size: 16px; font-weight: 400; letter-spacing: -.03em; } /* Eticheta "Pret cu 5x" plus iconita: o singura unitate, care nu se rupe. */ .produs-pret-5x > span:first-child { white-space: nowrap; flex-shrink: 0; } /* Regula globala `img { display: block }` scotea iconita mini-pack pe rand propriu, sub textul "Pret cu 5x" — randul devenea 66px inalt la 340, dublu fata de "Pret intreg". In macheta iconita sta lipita de text. */ .produs-pret-5x img { display: inline-block; vertical-align: middle; margin-left: 4px; } /* Cifra nu are culoare proprie: o ia de la pastila, ca restul textului din ea. */ .produs-pret-5x .valoare { font-family: var(--font-pret); font-size: 31.16px; font-weight: 700; line-height: 1; } /* Cifra si stiva "LEI / 90" formeaza o unitate proprie, ca alinierea dintre ele sa nu depinda de cum e aliniat randul: la pretul intreg randul sta pe linia de baza, iar la pastila 5x e CENTRAT — altfel iconita mini-pack, care coboara mai jos decat cifra, inalta pastila cu 4px. `last baseline` aliniaza ULTIMA linie a stivei, adica zecimalele: ele cad pe linia de baza a cifrei si "LEI" urca la varful ei, ca in macheta. Cu `baseline` simplu se alinia PRIMA linie, deci "LEI" ajungea la jumatatea cifrei si zecimalele ii ieseau dedesubt — de aici si rezerva, pentru motoarele care nu cunosc `last`. `gap: inherit` pastreaza spatiul pe care il avea randul intre cifra si stiva: 8 la pretul intreg, 6 in pastila. */ .pret-grup { display: inline-flex; align-items: baseline; align-items: last baseline; gap: inherit; } /* Blocul "159 LEI / 00" — cifra mare plus unitatea pe doua randuri lipite. Figma: Montserrat SemiBold 13,6 / line-height 10,2. 13px, nu cei 10,2 din macheta: stiva trebuie sa acopere EXACT inaltimea cifrei, adica de la varful lui "LEI" pana pe linia de baza a cifrei. Inaltimea stivei e `line-height + inaltimea majusculei de sus`, iar masurat in Montserrat cifra are 23px de cerneala si "LEI" 11 — deci 23 - 11. */ .pret-unit { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--font-pret); font-size: 13.6px; font-weight: 600; line-height: 12px; letter-spacing: 0; } /* ---------------------------------------------- Sectiunea roz (3 pasi) --- */ /* Figma: 153px de la baza cardului galben la cardul roz de aici. */ .sect-pasi { position: relative; padding: 14px 0 29px; } /* Figma: panoul roz 1425 x 840, iar cardul alb din el 782 x 618 asezat la 91px de marginea stanga, 115px de sus si 106px de jos. */ .card-pasi { position: relative; padding: var(--pad-pasi-sus) 6.4% var(--pad-pasi-jos); background-image: url('../img/bg-pink.svg'); } /* 782 din cei 1234 ramasi dupa paddingul panoului roz. */ /* Paddingul lateral sta intr-o variabila fiindca e si retragerea pe care o anuleaza pastila "Pasul N": schimbi un numar si rămân aliniate. Banda de mobil il rescrie la 16px. */ .card-pasi-interior { --pas-padding-lateral: 40px; max-width: 63.4%; padding: 36px var(--pas-padding-lateral) 40px; background: var(--alb); border-radius: var(--raza-card); } /* 49px intre pasi: cu cele trei blocuri de 115+185+144 si paddingul de 76, asta da exact cei 618 ai cardului alb din Figma. */ .pas + .pas { margin-top: 49px; } /* Figma: Ubuntu Bold 26, cu gap 9 fata de iconita. */ /* `margin: 0` conteaza: eticheta e un
, iar marginea implicita de 1em la font-size 26 adauga 52px pe fiecare pas — cardul alb ieșea cu 110px mai inalt decat in Figma si intreaga secțiune parea alta ca așezare. */ /* Pastila porneste din MARGINEA cardului alb, nu din interiorul paddingului: marginea negativa anuleaza exact paddingul lateral al cardului, la orice rezolutie. */ .pas-eticheta { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 0 calc(-1 * var(--pas-padding-lateral)); padding: 9px 20px; background: var(--portocaliu); color: var(--alb); border-radius: 10px; font-family: var(--font-titlu); font-size: var(--font-eticheta); font-weight: 700; line-height: 1; } .pas-eticheta img { width: 24px; height: 24px; object-fit: contain; } /* Figma: Ubuntu 26 / line-height 110%. */ .pas-text { margin: 14px 0 0; font-family: var(--font-titlu); font-size: var(--font-pas); line-height: 1.1; text-align: center; color: var(--albastru); } .brand-bringo { display: inline-block; vertical-align: middle; height: 1.2em; width: auto; } /* Pragurile de cumparare: logotipul magazinului (imagine, pe fundal transparent) lipit de o pastila colorata cu suma. Figma: pastila are colturi drepte, text Proxima Nova Extrabold alb — 21,13 cifra si 14,08 unitatea, apropiate cu -6. */ .praguri { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; } .prag { display: flex; align-items: center; gap: 6px; } .prag-logo { height: 32px; width: auto; } /* Logotipul Carrefour.ro e pe un singur rand, deci mai scund. */ .prag-logo[src*='carrefouro'] { height: 23px; } .prag-suma { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; padding: 3px 7px; color: var(--alb); font-family: var(--font-text); font-weight: 800; text-align: center; } .prag-suma--rosu { background: #ED332E; } .prag-suma--verde { background: #027A3E; } .prag-suma .valoare { font-size: 21.13px; line-height: 1; } .prag-suma .unitate { margin-top: -3px; font-size: 14.08px; line-height: 1; } /* Containerul nu genereaza cutie proprie, ca imaginile sa se poziționeze fata de panoul roz. Pe mobil (vezi mai jos) redevine un rand flex. */ .pasi-vizual { display: contents; } /* Balonul, badge-ul si pliculetul din dreapta panoului roz. Toate trei sunt imagini, poziționate procentual fata de panou (1425 x 840 in Figma): balon 183 x 305 la (788, 33) badge 224 x 224 la (1157, 46), rotit 1,21° pliculet + umbra 416 x 558 la (897, 191) */ /* `top` e in px, nu procente: panoul isi schimba inaltimea cu lungimea textelor din cei trei pasi, iar procentele ar deplasa imaginile. `left` ramane procentual, latimea panoului fiind fixa. */ .balon { position: absolute; left: 55.3%; top: 33px; width: 10.8%; z-index: 2; } .badge-pliculet { position: absolute; left: 81.2%; top: 46px; width: 15.7%; z-index: 4; transform: rotate(1.21deg); } .pliculet-grup { position: absolute; left: 63%; top: 191px; width: 29.2%; z-index: 3; } .pliculet-grup .pliculet { width: 96.7%; /* 402 din cei 416 ai grupului */ height: auto; /* margin-inline: auto; */ margin-left: 40px; margin-top: -82px; } /* Elipsa roz de sub pliculet: 394 x 34, la 16px sub el. */ .pliculet-grup .pliculet-umbra { width: 94.7%; height: auto; margin: 16px auto 0; margin-left: 30px; } /* -------------------------------------------- Sectiunea jetoane (24) --- */ /* 153px de la baza cardului roz la cardul lila de aici. */ .sect-jetoane { position: relative; padding: 45px 0 13px; } /* Figma: panoul lila 1416 x 744. Primul rand de monede incepe la 298px de sus — deasupra lor stau placa portocalie si cea galbena, suprapuse pe panou. Cei 205px lateral fac cercurile sa iasa exact 134px, cu pas de 218. Placa "24 jetoane de colectie" sta INAUNTRUL panoului, sus-dreapta. */ .card-jetoane { position: relative; padding: var(--pad-jetoane-sus) 14.5% var(--pad-jetoane-jos); background-image: url('../img/bg-lilla.svg'); } .logo-24 { position: absolute; top: 38px; right: 96px; width: 35%; max-width: 496px; height: auto; } /* O coloana = doua jetoane stivuite, ca in grila 5 x 2 din design. */ /* Figma: cercul alb 134,24 iar moneda 127,27 x 118,67 in el — adica 94,8%. Monedele sunt exportate la 1:1 (~128px), deci nu trebuie marite: peste dimensiunea nativa se vad neclare. Pasul dintre coloane e 218 (gap 84), iar intre randuri 68. */ /* Fara `grid-template-rows` fix: coloana are doua elemente pe desktop si trei pe mobil (vezi `data-randuri`), iar randurile automate se potrivesc singure. */ .jeton-coloana { display: grid; gap: 68px; } /* 134px e diametrul din Figma si totodata latimea celei mai mari monede. Fara plafon, cercul urmeaza latimea slide-ului — la 640px ajungea 184, iar moneda, care ramane la scara nativa, plutea intr-un inel de alb. */ .jeton { display: grid; place-items: center; aspect-ratio: 1 / 1; /* `width` explicit, nu `max-width`: cu `margin-inline: auto` elementul pierde intinderea din grila, iar `aspect-ratio` nu mai are de la ce sa porneasca — cercul se facea 0x0. */ width: min(100%, var(--jeton-max)); margin-inline: auto; /* Fara asta, dimensiunea minima automata a unui element de grila il umfla pana la min-content: la 340 cercul ieșea 91px intr-o coloana de 86, deci cercurile vecine se atingeau peste spatiul dintre ele. */ min-width: 0; background: var(--alb); border-radius: 50%; box-shadow: 0 6px 14px rgba(16, 26, 84, .16); } /* Monedele nu au toate aceeasi dimensiune (121–134px) si nici acelasi raport, asa ca nu le fixam latimea: le lasam la scara nativa, incadrate in cerc. Orice marire peste dimensiunea exportata le-ar face neclare. */ .jeton img { width: auto; height: auto; max-width: 95%; max-height: 95%; } /* ------------------------------------------ Sectiunea produse partenere --- */ /* 153px de la baza cardului lila la cardul bleu de aici. */ .sect-partenere { position: relative; padding: 61px 0 90px; } /* Figma: panoul 1416 x 826; cele trei carduri de 319 lati stau centrate, ceea ce lasa 203px de padding lateral. */ .card-partenere { padding: 48px 14.3% 40px; background-image: url('../img/bg-blue.svg'); } /* Containerul si panoul au aceeasi latime si aceeasi baza (bannerul e tras in sus cu marginea negativa), deci eticheta poate fi ancorata de container si totusi sa cada exact fata de panou. */ .sect-partenere .container { position: relative; } /* Eticheta cu banana — 303 x 203, la 28px sub baza panoului. `bottom` in px, nu procente: panoul isi schimba inaltimea cu lungimea denumirilor de produs. In Figma sta la 93,3% din latime; aici e la 86%, deci se vede mai mult din ea. `z-index: 1` o trece SUB panou (care are 2) — de aceea eticheta trebuie sa fie frate cu panoul, nu copil: un copil nu poate ajunge sub fundalul parintelui, nici cu z-index negativ. */ .eticheta-banana { position: absolute; left: 86%; bottom: -28px; width: 21.4%; height: auto; z-index: 1; pointer-events: none; } /* Figma: 319 x 527, raza 25. */ .partener { display: flex; flex-direction: column; padding: 22px 20px 26px; background: var(--alb); border-radius: 25px; } /* Badge-ul e absolut in coltul din stanga-sus, deci randul are un singur copil in flux: logoul. `place-items: center` il centra (65px egal pe ambele parti), dar in macheta sta lipit de marginea dreapta a cardului. */ .partener-antet { position: relative; display: grid; place-items: center end; min-height: 56px; } /* Fundalul e `--rosu`, acelasi cu al sagetilor de carusel — era `--rosu-inchis` (#E4003A), o nuanta apropiata dar nu identica, si se vedea alaturi de sageata. */ .partener-reducere { position: absolute; top: -8px; left: -8px; padding: 5px 12px; background: var(--rosu); color: var(--alb); border-radius: 8px; font-size: 15px; font-weight: 700; } /* Pliculetul sta in coltul stanga-sus, sub badge-ul de reducere, si e ABSOLUT cu `top` fix — nu intr-o stiva in flux — ca sa pastreze aceeasi poziție si pe cele 4 produse care nu au reducere in feed. Badge-ul ocupa -8..24, deci 30 lasa 6px intre ele. Amandoua pornesc de la aceeasi margine stanga (-8px). Sursa e `pliculet-mic.png` (123 x 156), nu `mini-pack.png` (21 x 27): aceeasi grafica, dar thumbnailul de 21px marit la 50 ar fi doar interpolat, adica vizibil neclar. E taiat la 3x fata de cei 39 x 50 afisati, ca sa fie curat si pe ecranele cu densitate mare — originalul `pliculet.png` are 263 KB, mult prea mult pentru un marcaj de 39px, iar varianta asta are 36. Antetul are doar 56px, deci pliculetul coboara puțin peste zona imaginii de produs. Nu se ating totuși: imaginile sunt centrate si au margini transparente, verificat pixel cu pixel pe toate cele 12 produse, la fiecare banda de rezolutie. De acolo vine si 50 in loc de 52 — la 52 acopera 19 pixeli din colțul ambalajului President, pe banda 440-519. */ .partener-pliculet { position: absolute; top: 30px; left: -8px; z-index: 1; height: 50px; /* Doar inaltimea se regleaza pe mobil; latimea vine din raportul fisierului. */ width: auto; aspect-ratio: 123 / 156; } /* `max-height` singur lasa latimea libera, iar la 340 logoul ieșea 131px din cele 186 de conținut — badge-ul se termina la 72 si logoul incepea la 75, deci se atingeau. Plafonul procentual il face sa urmeze cardul, si tine si cand vin logourile reale, cu alte proportii decat placeholderele. */ .partener-brand { max-height: 42px; max-width: 42%; width: auto; } .partener-media { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 10px 0 14px; } .partener-media img { max-height: 100%; width: auto; object-fit: contain; } /* Figma: Proxima Nova Condensed SemiBold 24 / line-height 22. */ .partener-nume { flex: 1; margin: 0; font-family: var(--font-text-condensat); font-size: var(--font-partener); font-weight: 600; line-height: 22px; color: #1B1B1B; } /* Gramajul urmeaza numele, nu o valoare fixa: 18 din 24 pe desktop, adica trei sferturi. Cu 18px fix ajungea egal cu numele pe mobil, unde numele e 18 — in macheta e vizibil mai mic decat el. */ .partener-gramaj { margin: 6px 0 10px; font-family: var(--font-text-condensat); font-size: calc(var(--font-partener) * .75); color: var(--gri-text); } .partener-preturi { display: flex; align-items: center; gap: 14px; /* Preturile stau lipite de baza cardului si cand numele produsului lipseste din feed, deci nu mai exista `.partener-nume` cu `flex: 1` sa umple locul. */ margin-top: auto; } .pret-vechi, .pret-nou { display: flex; align-items: flex-start; gap: 3px; font-weight: 700; line-height: 1; } /* Preturile sunt bleumarin, ca in primul carusel — erau roz palid (#F09AA8) si roșu (#E4003A). Pretul vechi pastreaza ierarhia prin OPACITATE, nu prin alta culoare: la 45% e vizibil secundar, dar de aceeasi nuanta ca cel nou. */ .pret-vechi { position: relative; color: var(--albastru); opacity: .45; } /* `currentColor`, ca bara sa urmeze automat culoarea si opacitatea pretului tăiat. */ .pret-vechi::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 2px; background: currentColor; transform: rotate(-8deg); } .pret-nou { color: var(--albastru); padding-left: 14px; /* Linia despartitoare, in aceeasi familie: bleumarin diluat, nu roz (#E9BFC6). */ border-left: 2px solid rgba(39, 59, 161, .28); } /* Produsele fara pret_nou in feed au un singur pret, deci nu e nimic de despartit: fara linia din stanga si fara indentarea de langa ea, altfel pretul singur ar parea taiat din alt pret care lipseste. */ .pret-nou--singur { padding-left: 0; border-left: 0; } /* Figma: cifrele de pret sunt Montserrat, ca in cardurile de produs. */ .pret-vechi, .pret-nou { font-family: var(--font-pret); } .pret-vechi .intreg, .pret-nou .intreg { font-size: 38px; line-height: 1; } /* Figma: Ubuntu Bold 18 / line-height 18. */ .buton-catalog { display: block; width: min(340px, 100%); margin: 30px auto 0; padding: 16px 28px; background: var(--portocaliu); color: var(--alb); border: 3px solid var(--alb); border-radius: var(--raza-pill); font-family: var(--font-titlu); font-size: var(--font-buton); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; box-shadow: var(--umbra-card); transition: transform .18s ease, background .18s ease; } .buton-catalog:hover { background: #E14E31; transform: translateY(-2px); } /* ------------------------------------------------------- Regulament --- */ /* Paddingul de sus tine titlul SUB capatul traseului 24, care coboara din secțiunea de partenere si se termina in zona asta. Erau cinci `
` in markup, care faceau exact 116px (5 x line-height 23,2); fara ei titlul urca 85px deasupra capatului traseului si liniutele ii trecerau peste text. 156 = cei 40 din macheta plus cei 116 pe care ii dadeau `
`-urile, deci asezarea de pe desktop rămâne neschimbata. Pe mobil traseul se termina mai sus, deci acolo valoarea e mai mica — vezi blocul de mobil. */ .sect-regulament { position: relative; padding: 156px 0 70px; } /* FARA personaj. Zona e rezervata finantarii de furnizor, iar acelasi minion apare deja in hero — cerinta clientului, peste macheta care avea minionul in coloana din stanga si textul in cea din dreapta. Rămâne o singura coloana centrata, la fel ca pe tableta si pe mobil. */ .regulament-grid { display: grid; justify-items: center; text-align: center; } /* Figma: Proxima Nova Bold 42 / line-height 46. Fiind bold pe toata lungimea si fara fisier Bold pentru Proxima Nova, titlul foloseste Ubuntu Bold. */ .regulament-titlu { margin: 0 0 26px; font-family: var(--font-titlu); /* Raportat la .container (1416): rămâne 42 cat timp containerul e plin, adica pana la 1480, si abia sub scade proportional. */ font-size: clamp(24px, calc((100vw - 64px) * 42 / 1416), 42px); font-weight: 400; line-height: 1.095; color: var(--alb); } .regulament-titlu strong { font-weight: 700; } /* Intrebarea galbena care deschide titlul. Era un `style="color:..."` in markup; mutata pe clasa, ca sa poata fi si rupta pe rand propriu pe mobil. */ .regulament-intrebare { color: var(--galben-logo); } /* Figma: Ubuntu Bold 18 / line-height 18, la fel ca butonul de catalog. Aceeasi haina ca `.buton-catalog` — portocaliu cu chenar alb si umbra — ca toate butoanele paginii sa arate identic. Era roșu (#FF0033), singurul diferit. Padding-ul rămâne al lui (18/60, nu 16/28): butonul asta e `inline-block` centrat pe textul „REGULAMENT", nu o bară de 340px ca cel de catalog. */ .buton-regulament { display: inline-block; padding: 18px 60px; background: var(--portocaliu); color: var(--alb); border: 3px solid var(--alb); border-radius: var(--raza-pill); font-family: var(--font-titlu); font-size: var(--font-buton); font-weight: 700; line-height: 1; text-decoration: none; text-transform: uppercase; box-shadow: var(--umbra-card); transition: transform .18s ease, background .18s ease; } .buton-regulament:hover { background: #E14E31; transform: translateY(-2px); } /* --------------------------------------------------------- Branduri --- */ /* Banda de branduri defileaza la nesfarsit: fara sageti, fara puncte (cerinta clientului, peste macheta care avea logourile statice). Latimea celulei si ritmul vin din variabile, ca sa scada pe scara de rezolutii. */ :root { --brand-lat: 400px; --brand-gap: 67px; /* Durata pentru o jumatate de pista de 21 de celule. Tinta e ~80px/s — suficient de vie ca sa se citeasca drept carusel, suficient de lenta cat sa nu fure privirea. Numarul real de branduri intra prin `--brand-factor`, pus inline din PHP, deci viteza nu se schimba cand se adauga sau se scot logotipuri. */ --brand-durata: 120s; } .sect-branduri { position: relative; padding: 30px 0 60px; } /* Figma: panoul bleu 1416 x 392, cu randul de logotipuri (177 inalt) la 149px de sus si 66px de jos — spatiul de sus e mare pentru ca placa portocalie sta calare pe el. */ /* Singurul panou fara SVG de forma: ramane dreptunghi rotunjit pana vine exportul din Figma (bleu deschis, 1416 x 392). */ .card-branduri { overflow: hidden; padding: var(--pad-branduri-sus) 0 var(--pad-branduri-jos); background: var(--bleu); border-radius: var(--raza-panou); } .branduri-pista { display: flex; width: max-content; animation: branduri-defilare calc(var(--brand-durata) * var(--brand-factor, 1)) linear infinite; } @keyframes branduri-defilare { to { transform: translateX(-50%); } } /* Figma: cardurile albe au 136 inaltime; logotipurile stau la dimensiunea lor, incadrate — vin cu proportii foarte diferite (Aviko oval, BaByliss si Braun alungite), deci nu pot fi scalate pe o singura dimensiune. */ .brand { position: relative; flex: 0 0 var(--brand-lat); height: 136px; margin-right: var(--brand-gap); background: var(--alb); border-radius: 16px; } /* Ca la cardurile de produs: dimensiuni explicite plus `object-fit`. Cu `max-height: 100%` intr-un grid, procentul se raporteaza la o inaltime pe care tot imaginea o determina — si logotipul Braun ieșea din card. */ .brand img { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; } /* Inimile portocalii decorative */ /* Inima portocalie decorativa — imagine (259 x 229 in Figma). */ .inima { position: absolute; width: 259px; height: auto; pointer-events: none; } .inima--dreapta { top: -40px; right: 18%; } /* --------------------------------------------------------------- Legal --- */ .legal { padding: 34px 0 46px; } .legal p { max-width: 900px; margin: 0 auto; font-size: 15px; line-height: 1.5; text-align: center; color: var(--alb); } .legal a { text-decoration: underline; } /* -------------------------------------------------------------- Footer --- */ .site-footer { padding: 34px 0 40px; background: var(--violet-footer); text-align: center; } .footer-social { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 18px; } .footer-social a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--alb); transition: transform .18s ease, opacity .18s ease; } .footer-social a:hover { transform: translateY(-2px); opacity: .82; } /* Iconitele vin din Figma cu inaltimi diferite (42–58px) si proportii diferite, asa ca le aliniem pe inaltime si lasam latimea sa urmeze. */ .footer-social img { width: auto; height: 26px; } .site-footer p { margin: 3px 0; font-size: 13px; color: rgba(255, 255, 255, .82); } /* ========================================================================== Carusel — folosit de toate cele trei sectiuni ========================================================================== */ .carusel { position: relative; } .carusel-fereastra { overflow: hidden; } .carusel-pista { display: flex; align-items: stretch; transition: transform .5s cubic-bezier(.33, 1, .68, 1); will-change: transform; } /* Cand utilizatorul trage cu degetul/mouse-ul, oprim tranzitia. */ .carusel.is-dragging .carusel-pista { transition: none; cursor: grabbing; } .carusel-slide { flex: 0 0 auto; } /* Sagetile de navigare — plasate in afara ferestrei, ca in design. */ .carusel-sageata { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; background: var(--rosu); color: var(--alb); border-radius: 50%; box-shadow: var(--umbra-sageata); transform: translateY(-50%); transition: background .18s ease, transform .18s ease, opacity .18s ease; } .carusel-sageata:hover:not(:disabled) { background: var(--rosu-inchis); transform: translateY(-50%) scale(1.08); } .carusel-sageata:disabled { opacity: .35; cursor: default; } .carusel-sageata svg { width: 20px; height: 20px; fill: currentColor; } .carusel-sageata--prev { left: -62px; } .carusel-sageata--next { right: -62px; } .carusel-puncte { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; } .carusel-punct { width: 10px; height: 10px; padding: 0; background: rgba(255, 255, 255, .55); border-radius: var(--raza-pill); transition: width .25s ease, background .25s ease; } .carusel-punct.is-activ { width: 34px; background: var(--rosu); } /* Pe fundal alb (caruselul de produse) punctele inactive trebuie inchise. */ .carusel--pe-alb .carusel-punct { background: #E3E6F3; } .carusel--pe-alb .carusel-punct.is-activ { background: var(--rosu); } /* Cand caruselul e invelit intr-un card, punctele coboara sub el — in design stau pe galben, nu pe alb. */ .carusel--puncte-afara { position: relative; } .carusel--puncte-afara .carusel-puncte { margin-top: 20px; } .carusel--puncte-afara .carusel-punct { background: #E9C64A; } .carusel--puncte-afara .carusel-punct.is-activ { background: var(--rosu); } /* Sagetile se aliniaza pe mijlocul cardului alb, nu al intregului carusel: scadem jumatate din banda de puncte de dedesubt (20px margine + 10px punct). */ .carusel--puncte-afara .carusel-sageata { top: calc(50% - 15px); } /* ========================================================================== Scara de rezolutii Baza fisierului (fara media query) = macheta Desktop 1920. Mai jos, praguri descrescatoare pana la 340; deasupra, un singur prag min-width pentru 2400. Fiecare prag rescrie doar variabilele din :root si cele cateva reguli de asezare care nu pot fi variabile — restul fisierului nu se mai atinge. Pragurile: 2400 · 1920 · 1660 · 1520 · 1500 · 1440 · 1366 · 1280 · 1024 768(*) · 520 · 440 · 390 · 340 (*) la 767 intra macheta lp_MOBILE, cu valorile ei masurate. ========================================================================== */ /* -------------------------------------------------- 2400 si mai lat --- */ /* Singurul prag care creste peste macheta: pagina ar arata pierduta in mijloc. */ /* ========================================================================== DESKTOP / TABLETA — BENZI DE REZOLUTIE Metoda, identica cu partea de mobil de mai jos: - 768-900 si 901-1023 sunt intervale EXCLUSIVE (min + max), deci ce pui acolo NU se scurge in sus; - de la 1024 in sus sunt min-width CUMULATIVE: fiecare banda rescrie doar ce se schimba fata de banda de dinaintea ei, iar valoarea tine pana o schimba banda urmatoare. Valorile din regulile de baza (fara media query) sunt cele ale machetei Desktop 1920. De aceea banda 1500 le redeclara explicit: de la ea in sus panoul e la 1416 intregi si totul revine la cifrele din Figma. Ordinea in fiecare banda: 1 containere 2 tipografie 3 panouri (galben/roz/lila/bleu/branduri) 4 carusele 5 asezare (doar sub 1024) ========================================================================== */ /* ------------------------------------------------------------ 768 - 900px --- */ /* Tableta ingusta. Aici hero-ul e stivuit (text peste vizual) si blocul cu pliculetul coboara sub cei trei pasi. */ @media only screen and (min-width: 767.99px) and (max-width: 900.98px) { /* 1 --- containere */ .container, .hero-grid { width: calc(100% - 40px); } /* Ancora traseului 3 repeta gutterul containerului din banda — vezi .traseu--21. */ .traseu--21 { --cont: calc(100% - 40px); } /* 3 --- panouri */ .card-jetoane { padding-block: 150px 40px; } .card-branduri { padding-block: 88px 52px; } .card-pasi { padding-block: 64px 64px; } .card-pasi-interior { max-width: 100%; } /* Hero stivuit: coloana de text ocupa toata latimea, iar cele doua logotipuri sunt IMAGINI cu `width: 100%` — deci se umflau la 687px, adica 95% din hero, fata de 33% in macheta. Plus `margin-left: -67.5px` (alta valoare de 1920) le trăgea la x=-3, lipite de marginea ecranului. Plafonam blocul de text si anulam bleed-ul. */ .hero-continut { max-width: 62%; margin-inline: auto; text-align: center; } /* Aici suprapunerea cu titlul e de 24,3 unitati, nu 2,2 ca pe telefoane, fiindca grila pastreaza `margin-top: -21px` din baza. 42 lasa acelasi gol de ~18. */ .site-header { margin-bottom: 42px; } /* Corpul din baza e raportat la o coloana de 36,4%; aici coloana e plafonata la 62%, deci formula lasa titlul mult sub latimea lui. La capatul ingust al benzii (768) coloana are 442 unitati, iar propozitia pe un rand cere 581 — dar hero-ul are 753, deci incape lejer si la 45. */ .hero-titlu { --corp-titlu: 46px; } /* Paragraful se lovea de podeaua `clamp` (15px) fiindca formula e raportata la hero-ul de 1565 de pe desktop. Langa un titlu de 40px arata ca o nota de subsol. */ .hero-text { font-size: 18px; } /* 4 --- carusele si banda de branduri */ .carusel-sageata { width: 40px; height: 40px; } .carusel-sageata--prev { left: -8px; } .carusel-sageata--next { right: -8px; } .brand { flex-basis: 240px; height: 110px; margin-right: 24px; } :root { --brand-durata: 70s; } /* Inima decorativa, mai spre dreapta. `right: 18%` din baza e proportional cu panoul, dar inima are latime FIXA (259px): pe un panou de 843 ocupa 31% din el, fata de 18% pe cel de 1416, si se inghesuia in placa de titlu. */ .inima--dreapta { right: 4%; } /* 5 --- asezare */ /* 30px, nu cei 24 pe care ii da podeaua `clamp`: formula e raportata la containerul de 1416 al desktopului, iar la 803 ajunge la 21,9px si se opreste in minim. Langa un panou de 763 arata pierdut. */ .regulament-titlu { font-size: 30px; } .hero-grid { grid-template-areas: 'text' 'vizual'; gap: 30px; } .hero-continut { grid-area: text; width: 100%; } .hero-vizual { grid-area: vizual; width: 100%; justify-self: center; } /* Compozitia de sub cei trei pasi: balon sus-stanga, pliculetul mare in centru, badge-ul calare pe colțul lui din dreapta-jos — ca in macheta. Inainte era un RAND FLEX cu cele trei piese una langa alta si nici una nu atingea alta: balonul cadea jos-stanga (y 3019), badge-ul sus la mijloc (2796) si pliculetul in dreapta, cu mult roz gol intre ele. Masurat la 900. Un rand flex nu poate produce suprapuneri, deci pliculetul rămâne in flux (el da inaltimea zonei) iar balonul si badge-ul se ancoreaza de zona. */ .pasi-vizual { position: relative; display: block; margin-top: 26px; padding-bottom: 24px; } .pliculet-grup { position: relative; inset: auto; width: 52%; margin-inline: auto; transform: none; } .balon { position: absolute; left: 4%; top: 0; bottom: auto; width: 15%; transform: none; z-index: 5; } /* `top: auto` e obligatoriu: baza pune `top: 46px`, iar pe un element absolut cu inaltime data `top` bate `bottom` si acesta e ignorat in silenta. */ .badge-pliculet { position: absolute; left: auto; right: 16%; top: auto; bottom: 14%; width: 21%; margin: 0; transform: none; z-index: 4; } /* Marginile de calibrare din baza (40px / -82px, pentru compozitia de desktop) nu se resetau aici: pliculetul intra 56px peste cardul alb si randul ieșea inegal. Pe mobil (<=767) rămân, acolo sunt calibrarea machetei lp_MOBILE. */ .pliculet-grup .pliculet { margin-top: 0; margin-left: 0; margin-inline: auto; } .pliculet-grup .pliculet-umbra { margin-left: auto; } } /* ----------------------------------------------------------- 901 - 1023px --- */ /* Tableta in peisaj: hero-ul revine suprapus (ca pe desktop), panourile inca strimte. */ @media only screen and (min-width: 900.99px) and (max-width: 1023.98px) { /* 1 --- containere */ .container, .hero-grid { width: calc(100% - 40px); } .traseu--21 { --cont: calc(100% - 40px); } /* 3 --- panouri */ .card-jetoane { padding-block: 168px 40px; } .card-branduri { padding-block: 96px 52px; } .card-pasi { padding-block: 72px 64px; } .card-pasi-interior { max-width: 68%; } /* 4 --- carusele si banda de branduri */ .carusel-sageata { width: 40px; height: 40px; } .carusel-sageata--prev { left: -8px; } .carusel-sageata--next { right: -8px; } .brand { flex-basis: 300px; height: 124px; margin-right: 40px; } :root { --brand-durata: 90s; } /* Acelasi motiv ca in banda de dedesubt: inima are latime fixa, panoul e inca ingust. */ .inima--dreapta { right: 8%; } } /* ---------------------------------------------------------------- 1024px+ --- */ /* Prima banda de desktop. Containerul se plafoneaza la 1180, iar caruselul de produse are 3 coloane (vezi data-vizibile din index.php). */ @media only screen and (min-width: 1024px) { /* 1 --- containere */ /* `width` bate `min(var(--container), ...)` din baza, deci pe banda asta containerul urmeaza ecranul, fara plafon. */ .container, .hero-grid { width: calc(100% - 48px); } .traseu--21 { --cont: calc(100% - 48px); } /* 3 --- panouri */ .card-jetoane { padding-block: 248px 63px; } .card-branduri { padding-block: 124px 89px; } .card-pasi { padding-block: 96px 88px; } .card-pasi-interior { max-width: 62%; } /* 4 --- carusele si banda de branduri */ .carusel-sageata { width: 46px; height: 46px; } .carusel-sageata--prev { left: -14px; } .carusel-sageata--next { right: -14px; } .brand { flex-basis: 400px; height: 136px; margin-right: 67px; } :root { --brand-durata: 120s; } } /* ---------------------------------------------------------------- 1280px+ --- */ @media only screen and (min-width: 1280px) { /* 1 --- containere: revin la plafonul de 1416 al machetei */ .container { width: min(1416px, calc(100% - 64px)); } .hero-grid { width: min(1565px, calc(100% - 64px)); } /* Anuleaza gutterul de 48 al benzii de la 1024. */ .traseu--21 { --cont: min(1416px, calc(100% - 64px)); } /* 3 --- panouri */ .card-jetoane { padding-block: 268px 68px; } .card-branduri { padding-block: 134px 96px; } .card-pasi { padding-block: 104px 95px; } .card-pasi-interior { max-width: 63.4%; } } /* ---------------------------------------------------------------- 1366px+ --- */ @media only screen and (min-width: 1366px) { .card-jetoane { padding-block: 283px 72px; } .card-branduri { padding-block: 141px 101px; } .card-pasi { padding-block: 109px 100px; } } /* ---------------------------------------------------------------- 1440px+ --- */ @media only screen and (min-width: 1440px) { .card-jetoane { padding-block: 292px 74px; } .card-branduri { padding-block: 146px 105px; } .card-pasi { padding-block: 113px 104px; } } /* ---------------------------------------------------------------- 1500px+ --- */ /* De aici in sus panoul e la 1416 INTREGI, deci totul e exact ca in macheta Desktop 1920. 1500, nu 1480: media query-ul se compara cu `innerWidth` (include bara de derulare), iar containerul cu `clientWidth` (fara ea). */ @media only screen and (min-width: 1500px) { .card-jetoane { padding-block: 298px 76px; } .card-branduri { padding-block: 149px 107px; } .card-pasi { padding-block: 115px 106px; } } /* ---------------------------------------------------------------- 1520px+ --- */ /* Doar sagetile: marginea libera de langa container creste, deci ele se pot depana mai in afara. */ @media only screen and (min-width: 1520px) { .carusel-sageata--prev { left: -16px; } .carusel-sageata--next { right: -16px; } /* De aici marja laterala trece de 46px, deci placa poate ieși din panou ca in macheta de 1920, fara sa atinga marginea ecranului. */ .card-galben .banner { left: -46px; } } /* ---------------------------------------------------------------- 1660px+ --- */ @media only screen and (min-width: 1660px) { .carusel-sageata--prev { left: -20px; } .carusel-sageata--next { right: -20px; } } /* ---------------------------------------------------------------- 1920px+ --- */ /* Latimea nominala a machetei. Sagetile ajung la poziția din Figma. */ @media only screen and (min-width: 1920px) { .carusel-sageata--prev { left: -62px; } .carusel-sageata--next { right: -62px; } } /* ---------------------------------------------------------------- 2400px+ --- */ /* Singura banda care CRESTE peste macheta: pagina ar arata pierduta in mijloc. */ /* -------------------- pastila „Preț cu 5x" pe slide-urile inguste ---------- */ /* Intre 768 si 2400 caruselul arata 3-5 produse, deci pastila are doar 163-170px utili, iar continutul cere 181,5 la preturile de 3 cifre (139, 199, 278...). Cu `flex-wrap: wrap` din baza, tocmai acele pastile isi mutau pretul pe rand propriu — masurat, 26 din 29 la 1440 si 900, 6 din 29 intre 1520 si 2200 — deci in acelasi carusel unele pastile aveau 51px si altele 84. Nu se rezolva cu o singura valoare: eticheta scade, gap-ul si paddingul se string, iar iconita se lipeste mai mult de text. Impreuna dau cei ~19px care lipsesc in cazul cel mai strans (900px, unde pastila are 178,7). Pretul NU se atinge — rămâne la 31,16 din macheta. */ @media only screen and (min-width: 767.99px) and (max-width: 2399.98px) { .produs-pret-5x { gap: 4px; padding-inline: 6px; /* 13, nu 13,5: la 1440 (5 coloane, pastila 179) mai rămâneau 1,7px, prea putin pentru o rezolutie atat de comuna. */ font-size: 13px; } .produs-pret-5x img { margin-left: 3px; } /* Si spatiul dintre cifra si stiva „LEI / 00", care il moștenea prin `gap: inherit`. */ .pret-grup { gap: 4px; } } /* Sub 1024 e punctul cel mai strans din toata gama: la 860 caruselul trece de la 2 la 3 produse, deci slide-ul cade la 168px — mai ingust chiar si decat la 5 coloane pe 1440. Aici valorile de mai sus mai lasa 9px lipsa, deci se string inca o data. Alternativa ar fi sa mut pragul de 3 coloane mai sus, dar aceea schimba cate produse se vad, adica o decizie de design, nu o reparatie. */ @media only screen and (min-width: 767.99px) and (max-width: 1023.98px) { .produs-pret-5x { gap: 3px; padding-inline: 5px; font-size: 12px; } .produs-pret-5x img { margin-left: 2px; } .pret-grup { gap: 3px; } } @media only screen and (min-width: 2400px) { .container { width: min(1600px, calc(100% - 64px)); } .hero-grid { width: min(1760px, calc(100% - 64px)); } .banner { font-size: 46px; } /* Pandantul e obligatoriu: `.banner--mic` din baza are aceeasi specificitate ca `.banner`, dar e cu ~1450 de linii mai sus, deci fara linia asta placa mica ar sari de la 30 la 46px exact la 2400. */ .banner--mic { font-size: 33px; } .pas-text { font-size: 28px; } /* Cardul alb ieșea din forma roz pe partea stanga. Cauza nu e cardul, ci forma: bg-pink.svg are `width`/`height` PE LANGA `viewBox`, deci `background-size: 100% 100%` nu il intinde — isi pastreaza proportia (preserveAspectRatio implicit) si se incadreaza centrat in cutie. De aici in sus panoul are 1600 x 828, adica raport 1,933 fata de 1,694 al formei, deci rămân 98,9px goi pe fiecare parte. Paddingul de 6,4% da 102,4 — cardul pornea exact de pe muchia de sus a formei, iar muchia se inclina spre dreapta cu 31px pana jos, deci il lasa afara. 9% duce cardul la 144, adica 15px in interiorul muchiei si la baza lui. Sub 2400 nu e nevoie: acolo cutia e mai ingusta decat forma, deci forma se incadreaza pe LATIME si nu rămâne gol lateral. */ .card-pasi { padding-inline: 9%; } /* Containerul creste la 1600 aici, deci si ancora traseului 3. Raporturile revin la cele fata de CUTIE, fiindca aici forma roz e incadrata si decalajul de 72,8px il da chiar incadrarea. Cu asta randarea de la 2400+ rămâne exact cea de dinainte — ea e referinta. */ .traseu--21 { --cont: min(1600px, calc(100% - 64px)); --t3-start: 0.4437; --t3-lat: 0.5519; } } @media only screen and (max-width: 767.98px) { /* Punctele sunt singurul control pe mobil (sagetile sunt ascunse mai jos), iar 10x10px e prea mic pentru atingere. Paddingul duce zona de atins la 24x34, `background-clip: content-box` pastreaza pastila la fel de mica, iar marginile negative anuleaza cresterea spatiului dintre ele. Randul isi compenseaza cei 24px de inaltime in plus, ca nimic sa nu se mute. */ /* Zona de atins se mareste cu un pseudo-element invizibil, NU cu padding + `background-clip: content-box`: regulile `.carusel--pe-alb .carusel-punct` folosesc shorthand-ul `background`, care reseteaza `background-clip` la `border-box` — fundalul umplea toata zona de 24x34 si pastila ieșea o cutie mare. Asa, cutia si fundalul rămân exact cum sunt, dar degetul are 24x34 de atins. */ .carusel-punct { position: relative; } .carusel-punct::before { content: ''; position: absolute; inset: -12px -7px; } /* Corpurile masurate in lp_MOBILE. Pragurile de sub 520 le rescriu de aici, deci regulile mai jos folosesc variabile, nu valori directe. */ /* Fara --font-produs aici: in lp_MOBILE cardul de produse e cel de pe desktop (1102x480) taiat de marginea frame-ului, deci produsele isi pastreaza corpurile de desktop — 19 la nume, 31 la cifra de pret. */ :root { --font-banner: 22px; --font-banner-mic: 19px; --font-pas: 15px; --font-eticheta: 17px; --font-partener: 18px; --font-buton: 15px; } /* ----------------------------------------------------- structura --- */ /* Panourile au 357 in macheta (margini 16,5), iar blocul de titlu 336 (margini 27) — de aceea containerul si hero-grid difera. */ .container { width: calc(100% - 33px); /* container 357 din 390 */ } .hero-grid { width: calc(100% - 54px); /* blocul hero 336 din 390 */ } /* Gapurile panou-panou din lp_MOBILE: 88 (galben-roz), 96 (roz-lila), 94 (lila-bleu). Ale noastre ieseau 156/156/131, deci sectiunile de mobil isi strang paddingurile — plăcile din flux (inaltime minus marginea negativa) fac deja ~90 din fiecare gap. */ .sect-produse { padding-bottom: 6px; } .sect-pasi { padding-top: 82px; padding-bottom: 14px; } .sect-jetoane { padding-top: 82px; padding-bottom: 0; } .sect-branduri { padding-top: 67px; } /* padding-bottom mare: butonul de catalog e agatat 86px sub panou si tot el trebuie sa lase ~70 pana la titlul regulamentului (Figma: 69). */ .sect-partenere { padding-top: 37px; padding-bottom: 155px; } /* Tot continutul urca cu 20px pe mobil. 22.22px aici = 20px pe ecran, fiindca `zoom: .9` scaleaza si paddingul propriu al hero-ului (20 / 0.9 = 22.22). Hero-ul fiind primul element in flux, ce tai de deasupra lui ridica toate secțiunile de dedesubt cu acelasi numar, iar spatiile DINTRE ele rămân neatinse — deci golurile de 88/96/94 si traseele galbene arata la fel. */ .hero { --pagina-ridicare: 22.22px; /* Tot ce e SUB hero — traseul lui galben inclusiv — urca in plus cu atat. 69.44px aici = 62,5px pe ecran (zoom .9). Se face cu MARGINE NEGATIVA, nu prin taierea paddingului de jos. Prima varianta scadea din `padding-bottom`, dar acela are doar 60px: peste atat ar fi ieșit padding negativ, ceea ce CSS nu permite. Marginea nu are plafon. Continutul hero-ului nu se mișca, fiindca marginea e in afara cutiei. Dar tocmai de aceea traseul galben, care e ancorat de cutia hero-ului, NU ar urca singur — si panoul galben ar veni peste el. De asta `bottom` de la `.traseu--19` se corecteaza mai jos cu exact acelasi numar. Spatiile dintre panourile de dedesubt nu se schimba: coboara toate cu acelasi numar. */ --sub-hero-ridicare: 119.45px; margin-bottom: calc(-1 * var(--sub-hero-ridicare)); padding: calc(40px - var(--hero-ridicare) - var(--pagina-ridicare)) 0 60px; } /* Stivuirea hero-ului: pe desktop textul si vizualul stau suprapuse in aceeasi celula de grila ('zona'). Regulile astea sunt si in banda 768-900, dar aceea e EXCLUSIVA, deci trebuie repetate aici — altfel sub 768 hero-ul cade pe grila de desktop si textul iese 122px lat la 375. */ .hero-grid { grid-template-areas: 'text' 'vizual'; margin-top: 0; gap: 26px; } .hero-continut { grid-area: text; width: 100%; } .hero-vizual { grid-area: vizual; width: 100%; justify-self: center; } /* In macheta totul e centrat, nu aliniat la stanga ca pe desktop. */ .hero-continut, .hero-titlu, .hero-text { text-align: center; } /* ------------------------------------------------------- antetul --- */ /* Figma mobil: pilula 336 × 56 — inaltimea rămâne, latimea o preia randul, fiindca pilulele sunt acum doua si se strang fiecare pe logotipul ei. */ .site-header { width: calc(100% - 54px); gap: 18px; /* Aer sub pilule: titlul, acum pe un singur rand si mai inalt, intra 2,2 unitati in ele — iar pilulele au z-index 10, deci il acopereau. 20 lasa ~18 unitati de gol. Spatiul sta AICI, nu ca `padding-bottom` pe pilula: acolo ar fi crescut forma alba sub logotip si l-ar fi scos din centru. */ margin-bottom: 20px; } .header-pill { min-height: 56px; padding: 8px 16px; } /* Latimi, nu inaltimi: 26 si 32 trecute prin rapoartele fisierelor. */ .header-carrefour { width: 144px; } .header-minionii { width: 91px; } /* --------------------------------------------------- tipografie --- */ /* Valori din lp_MOBILE: titlu 38,93/41,1 · paragraf 12,12/120% · banner 22 */ /* Plafonul il da capatul INGUST al benzii, 375,99, unde coloana are 336 unitati: "BANANAVENTURA" (9,096em) incape la 36 — dar masurat, la 35 randul iese exact cat coloana, cu zero rezerva, deci 34. */ .hero-titlu { --corp-titlu: 34px; } .hero-text { font-size: 12.12px; line-height: 1.2; } /* Doua diferente fata de desktop: — placa e CENTRATA peste panou, nu lipita de marginea din stanga; — `max-width` o obliga sa rupa titlul pe doua randuri. Fara el, "Ce te asteapta daca faci escala la raft?" rămâne pe un rand si placa ajunge la 405px, mai lata decat panoul, deci iese din el. E procent, nu pixeli: o valoare fixa ar lasat placa pitica pe ecranele mari. 70% (250px la 390) e valoarea din macheta, confirmata de doua placi: cu ea "Produse partenere" se rupe pe doua randuri si `fit-content` o strange la ~166px, exact cat se vede in lp_MOBILE, iar "Ce suveniruri poti colectiona?" iese pe doua randuri la 250 lat. Cu 88% prima rămânea pe un singur rand si placa ieșea de doua ori mai lata decat in macheta. */ .banner { display: block; width: fit-content; max-width: 70%; margin: 0 auto -22px; font-size: var(--font-banner); line-height: 1.15; padding: 14px 24px; border-radius: 14px; transform: rotate(-1.84deg); box-shadow: 8px 7px 0 var(--alb); } /* In lp_MOBILE fiecare placa sta cu ~21px deasupra marginii panoului ei si restul pe panou. In flux, cu margin negativ fix (-22), placa plutea cu pana la 86px deasupra — vizibil "rupta" de panou. Absolute + top -21 da exact geometria machetei; containerul devine reperul (panoul incepe chiar la marginea lui de sus dupa ce placa iese din flux). */ .sect-pasi .container, .sect-jetoane .container, .sect-branduri .container { position: relative; } .sect-pasi .banner, .sect-jetoane .banner, .sect-branduri .banner { position: absolute; top: -21px; left: 0; right: 0; margin: 0 auto; z-index: 3; } /* Latimi care lasa titlurile pe 2 randuri, ca in macheta. Textul e uppercase (prin CSS), deci mai lat decat pare: "REDUCEREA DE 50%?" cere ~230px la 22 bold, "CE SUVENIRURI POTI" ~216. */ .sect-pasi .banner { max-width: 80%; } .sect-jetoane .banner { max-width: 76%; } .sect-branduri .banner { max-width: 85%; } /* In lp_MOBILE placa de la partenere e strânsa pe cel mai lung rand — 166px, adica "PARTENERE" plus paddingul — nu lata cat plafonul. `fit-content` o lasa la 250 si centreaza textul intr-o cutie prea lata; `min-content` rupe la spatiu, ceea ce aici e exact ce trebuie, titlul avand doua cuvinte. Nu se poate generaliza: pe un titlu lung `min-content` ar rupe la fiecare cuvant. Celelalte placi au nevoie de latimile lor din macheta. */ .sect-partenere .banner { width: min-content; } /* Placa sectiunii de produse e absoluta in panoul galben. `left: 50%` + translate ar parea calea evidenta, dar pentru un element absolut fara `right` latimea disponibila e doar de la 50% pana la marginea dreapta — adica jumatate de panou (178px la 390), iar titlul se rupea in patru randuri in loc de doua. Cu `left: 0; right: 0` are tot panoul la dispozitie, iar `margin-inline: auto` il centreaza. */ /* Figma: placa 251.84 x 106.81, cu centrul la +14 fata de centrul panoului (x 83.7 dintr-un panou care incepe la 16.4). `left: 28px` + margin auto centreaza cutia in intervalul ramas, adica exact decalajul cerut. */ .card-galben .banner { position: absolute; top: -21px; left: 28px; right: 0; margin: 0 auto; padding: 12px 20px; transform: rotate(-1.84deg); } .banner--mic { font-size: var(--font-banner-mic); } .pas-text { font-size: var(--font-pas); } /* Marginea negativa vine din regula de baza; aici doar variabila e alta (16px in loc de 40), deci pastila rămâne lipita de marginea cardului. */ .pas-eticheta { font-size: var(--font-eticheta); padding: 7px 14px; } .pas-eticheta img { width: 17px; height: 17px; } .partener-nume { font-size: var(--font-partener); line-height: 1.15; } /* ------------------------------------------------------ panouri --- */ /* Paddingurile din desktop (pana la 298px) sunt calculate pentru 1920 si ar lasa panourile aproape goale la 390. */ /* Formele de panou au variante proprii de mobil, exportate din lp_MOBILE: galben 358x595, roz 357x1029, lila 357x613, bleu 357x579. Panoul de branduri nu are inca export, deci rămâne dreptunghi rotunjit. */ .card-galben { background-image: url('../img/bg-yellow-mobil.svg'); } .card-pasi { background-image: url('../img/bg-pink-mobil.svg'); } .card-jetoane { background-image: url('../img/bg-lilla-mobil.svg'); } .card-partenere { background-image: url('../img/bg-blue-mobil.svg'); } /* * Formele sunt patrulatere inclinate, puse cu `background-size: 100% 100%`. * Daca panoul are alt raport decat SVG-ul, forma se turteste: colturile si * inclinarea se deformeaza, iar panoul PARE mai ingust decat vecinii lui. * Rozul era cazul extrem — 349x828 pentru un desen de 357x1029, adica * turtit 20%, in timp ce galbenul iesea 1:1. * * `aspect-ratio` = raportul nativ al fiecarui SVG: panoul nu mai coboara * sub proportia desenului, deci forma se randeaza nedeformata. Daca * continutul cere mai mult, cutia creste (si atunci se intinde putin, dar * controlat). */ /* Spatiul in plus din panoul roz merge in zona pliculetului, nu intr-un gol la baza: compozitia se centreaza in el, ca in macheta. */ .card-pasi { display: flex; flex-direction: column; } .pasi-vizual { flex: 1; display: flex !important; flex-direction: column; justify-content: center; } .card-galben, .card-pasi, .card-jetoane, .card-partenere, .card-branduri, .card-produse { padding-inline: 16px; } /* Grila trece pe 2 coloane x 3 randuri (vezi `data-randuri` din markup). Cercul nu mai poate umple coloana: la 390 coloana ar avea 156px, iar monedele ar creste pana la plafonul de 134 — mai mari decat acum, nu mai mici. Cu 88px si 26px intre randuri, cele trei randuri dau un panou lila de ~613px, adica exact inaltimea formei exportate din lp_MOBILE. */ /* Masurat in lp_MOBILE: cerc 104, 18 intre randuri, 30 intre coloane, iar moneda ocupa ~63-75% din cerc, nu 95 ca pe desktop. A treia coloana se TAIE la marginea panoului: padding-right 0 pe panou + data-vecin 0.94. */ :root { --jeton-max: 104px; } .jeton-coloana { gap: 18px; } /* 82%, nu cei 72 din macheta: clientul a cerut monedele mai mari, in doi pasi de cate 5px. Pe cele trei diametre de cerc din benzi — 88, 96 si 104 — 82% da 72,2 / 78,7 / 85,3px, fata de 63,4 / 69,1 / 74,9 la 72%. Rămân sub dimensiunea exportata (cea mai mica moneda are 121px nativ), deci nu se incetoseaza, si rămân in cerc, cu 9% de aer pe fiecare parte. */ .jeton img { max-width: 82%; max-height: 82%; } /* Sagetile stau peste continut, nu langa el: la 340 acopereau 30px din primul cerc de jeton (dintr-unul de 86 — o treime) si 18px din imaginea produsului pe fiecare parte. Panourile n-au margine libera unde sa le mut, asa ca pe mobil rămân swipe, tastatura si punctele. */ .carusel-sageata { display: none; } /* Banda de branduri, in varianta de mobil: celule mici, defilare mai lenta pe distanta mai scurta. */ :root { --brand-lat: 106px; --brand-gap: 4px; --brand-durata: 45s; } .brand { height: 40px; border-radius: 8px; } .brand img { top: 6px; left: 10px; width: calc(100% - 20px); height: calc(100% - 12px); } .card-galben { padding-block: 102px 51px; } .card-pasi { padding-block: 52px 30px; } .card-jetoane { padding-block: 76px 30px; padding-right: 0; } .card-partenere{ padding-block: 82px 44px; } .card-branduri { padding-block: 88px 36px; } /* Masurat in lp_MOBILE (Frame 150 nu are fill!): albul NU e o placa unica — fiecare produs are cardul lui alb de ~197. Fata de macheta (care taie banda la marginea ecranului) am ales, cu clientul, varianta cu UN singur card centrat in panou: containerul transparent se strange pe latimea unui slide si sta la mijloc, deci nimic nu iese din panoul galben. */ /* Latimea de un singur slide (199) e mai jos, in pragul <=519: intre 520 si 767 caruselul arata 2 carduri, deci containerul ocupa panoul. */ .card-produse { padding: 0; margin-inline: 0; background: none; box-shadow: none; border-radius: 0; } .produs { background: var(--alb); border-radius: 25px; overflow: hidden; /* 26, nu 10: dupa ce continutul s-a micsorat, cardul arata inghesuit la baza. Aerul de aici il lungeste fara sa mareasca inapoi elementele din el. */ padding-bottom: 26px; } /* Imaginea umple cardul de la margine la margine, lipita de sus. Inaltimea e FIXA (cea de la latimea initiala de 199): cand cardul s-a latit la 225, proportia 197/259 ar fi crescut-o si pe verticala — clientul a cerut doar latime. */ /* Retrasa de la marginile cardului si mai scunda. Inainte umplea cardul de la margine la margine (`margin: 0`), iar la 261px inaltime era cel mai masiv bloc din slide — clientul a cerut sa nu mai atinga marginea si sa se micsoreze. 225 pastreaza aproximativ proportia casetei la noua lățime. */ .produs-media { height: 225px; background: #F9E2E2; border-radius: 20px; /* 15px de alb si DEASUPRA casetei: inainte era lipita de marginea de sus a cardului. In lp_MOBILE caseta are aer pe toate laturile. Benzile de sub 376 rescriu doar `margin-inline`, deci retragerea de sus rămâne. */ margin: 15px 18px 0; } .produs-media img { top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); } .produs-nume, .produs-pret-intreg { margin-inline: 8px; } .produs-pret-5x { margin-inline: 6px; } /* Pastila "Pret cu 5x" trebuie sa incapa pe UN rand la slide de 198 (in macheta e un rand): fara paddingul lateral de 12 si cu gap 6, cele ~180px de continut incap. */ /* Pastila se aliniaza cu caseta de sus, la 18px — asa e in lp_MOBILE. Cei 6px de mai sus erau stersi de `margin` prescurtat. Eticheta scade la 14px si gap-ul la 4: la 18px retragere pastila are doar 174px utili, iar conținutul la 16px cere 172 — s-ar rupe la prima diferenta de randare. Benzile de sub 376 reduc retragerea, ca acolo slide-ul e prea ingust (vezi jos). */ .produs-pret-5x { padding: 10px 5px; gap: 3px; margin: 6px 18px 0; font-size: 13px; } .produs-pret-5x .pret-grup { gap: 3px; } /* Baza pune 4px; aici fiecare pixel conteaza. */ .produs-pret-5x img { margin-left: 2px; } .produs-pret-intreg { margin-block: 8px; margin-inline: 18px; } /* In lp_MOBILE cardul de produse nu are puncte sub el — panoul se inchide la 34px sub card. Ale noastre adaugau ~30px si impingeau panoul la 652. */ /* Ascunse la produse, ca in macheta: cu 29 de produse si un singur card vizibil ieseau 29 de puncte pe doua randuri. Navigarea rămâne pe swipe (plus autoplay). */ .sect-produse .carusel-puncte { display: none; } /* Cardul din macheta are 480 inaltime cu numele pe DOUA randuri. Denumirile noastre reale fac si 3-4 randuri la 198 lățime, ceea ce umfla cardul la ~570 (si panoul la 673 fata de 599). Plafonul la 2 randuri + minimul egal tin toate cardurile la geometria machetei; ce nu incape se taie cu „…". */ /* `margin` prescurtat, nu `margin-inline`: regula de mai sus punea 8px lateral, dar shorthand-ul de aici il resetase la 0, deci numele ajungea pana in marginea slide-ului. Acum retragerea sta chiar aici, la 12px. */ .produs-nume { margin: 12px 18px 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 38px; /* 2 randuri de 17px la 110% */ } .card-pasi { padding-inline: 9px; } /* Macheta: ~40 sus si ~50 jos in cardul alb, nu 22/26. */ /* Paddingul lateral sta intr-o variabila fiindca e si retragerea pe care o anuleaza pastila "Pasul N" mai jos: schimbi un numar si rămân aliniate. */ .card-pasi-interior { --pas-padding-lateral: 16px; max-width: 100%; padding: 33px var(--pas-padding-lateral) 45px; margin-top: 30px; } /* Placa galbena: 270 din 357 (76%), la 28 de marginea stanga a panoului — in lp_MOBILE nu e centrata — si cu 33 pana la primul rand de monede. */ .logo-24 { position: static; width: 79%; /* 270 din content-box-ul de 341 */ margin: 0 0 33px 12px; /* 12 + padding-left 16 = 28 din panou */ } /* In lp_MOBILE blocul de sub cei trei pasi are alta asezare decat pe desktop: balonul mic sus-stanga, pliculetul mare in centru si badge-ul "1 pliculet" calare pe colțul lui din dreapta-jos. */ /* * AICI se muta pliculetul (cu badge si balon, ca un grup): `padding-bottom`. * Mai mare = grupul urca, mai mic = coboara. NU folosi `margin-top`: zona * are `flex: 1` (creste ca sa umple panoul) si continutul e ancorat la baza * prin `align-items: flex-end`, deci marginea de sus doar o inalta, fara sa * mute nimic. Balonul si badge-ul sunt poziționate fata de acest bloc, deci * il urmeaza automat. Pentru pliculet singur, vezi `.pliculet-grup`. */ .pasi-vizual { display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: center; position: relative; margin-top: 1px; padding-top: 40px; padding-right: 5%; padding-bottom: 60px; /* grupul urcat cu 60px de la baza panoului */ /* Cat urca grupul pliculet + balon + badge peste poziția din flux, ca in lp_MOBILE: acolo pliculetul depaseste in sus marginea cardului alb, iar la noi stătea 74px sub ea. Se face cu `transform`, nu cu padding-bottom, din doua motive: - zona are `align-items: flex-end`, iar `padding-bottom` e reglat separat in fiecare banda (40px sub 340, 60px mai sus) — ar fi insemnat sase valori de intretinut; - intre 520 si 767 panoul roz NU are `aspect-ratio`, deci inaltimea lui vine din continut: un padding mai mare i-ar fi crescut panoul cu 85px. Transformarea muta doar pictura, fara sa atinga nicio inaltime. De ce e NEGATIVA acum: grupul e aliniat la BAZA, deci fiecare marire a pliculetului (175 -> 222 -> 256 lat) ii urca singura varful. La 256x324 varful sarea cu 45px peste tinta si acoperea textul "Pasul 3". Valoarea negativa coboara grupul inapoi, ca varful sa stea la 11px peste marginea cardului alb — poziția din lp_MOBILE. Cele doua valori sunt LEGATE: daca schimbi `width` la `.pliculet-grup`, reglezi si asta, altfel pliculetul intra in text. */ --pliculet-ridicare: 1px; transform: translateY(calc(-1 * var(--pliculet-ridicare))); } /* Balonul e ancorat de zona vizuala, nu de cardul alb, si NU urca tot atat cat pliculetul. Cu `top: 0` urca odata cu `translateY` al zonei si acoperea ultimul rand din "Pasul 3" cu 39px — exact capcana pe care comentariul de dinainte o semnala. Cei 73px il coboara inapoi in interiorul zonei, astfel incat varful lui sa fie la nivelul varfului pliculetului, ca in lp_MOBILE (acolo cele doua sunt aliniate la partea de sus, balonul nu iese deasupra). Rezultatul: balonul incepe la 34px sub ultimul rand de text. Daca umbli la `--pliculet-ridicare` sau la marimea pliculetului, verifica din nou distanta asta — e constrangerea care se strica prima. */ .balon { position: absolute; left: 2%; top: -36px; width: 38%; z-index: 5; } .pliculet-grup { position: relative; inset: auto; width: 95%; flex-shrink: 0; margin-inline: auto; } /* Badge-ul e SCOS din randul flex si ancorat de zona, ca pe desktop. Cat timp era item de flex cu `flex-shrink: 0`, fiecare marire a pliculetului il impingea afara si cerea recalibrarea lui `margin-right`. La marimile de acum ar fi trebuit -33%, ceea ce i-ar fi dus marginea dreapta la 389px — in afara panoului roz, care se termina la 374. Ancorat, badge-ul nu mai concureaza cu pliculetul pentru latime si poate creste independent. */ .badge-pliculet { position: absolute; left: auto; right: -8%; /* CAPCANA: aici era `bottom`, si nu avea NICIUN efect, la nicio valoare. Regula de baza pune `top: 46px`, iar blocul asta nu il reseta — cu `top` si `bottom` amandoua declarate pe un element absolut cu inaltime data, `top` castiga si `bottom` e ignorat in silenta. Deci pozitionam badge-ul prin `top`, pargia care e efectiv in vigoare. 91px = poziția de dinainte plus cei 20px ceruti in jos. Badge-ul e ancorat de zona, deci urca odata cu ea: daca umbli la `--pliculet-ridicare`, reglezi si asta. */ top: 126px; bottom: auto; width: 38%; margin: 0; z-index: 4; } /* ------------------------------------------------------- praguri --- */ .praguri { gap: 8px 10px; } /* In lp_MOBILE pragurile stau pe DOUA randuri: Carrefour.ro cu suma lui singur pe primul, celelalte trei magazine pe al doilea. */ .prag:first-child { flex-basis: 100%; justify-content: center; } /* 14, nu cei ~43 din lp_MOBILE: clientul a marcat pe captura tot spatiul de sub textul fiecarui pas ca fiind de scos. 14 e cat marginea de SUS a textului (`.pas-text`), deci pasul respira la fel deasupra si dedesubt. */ .pas + .pas { margin-top: 14px; } .prag { gap: 4px; } .prag-logo { height: 20px; } .prag-logo[src*='carrefouro'] { height: 14px; } .prag-suma { min-width: 28px; padding: 2px 4px; } .prag-suma .valoare { font-size: 14px; } .prag-suma .unitate { font-size: 9px; } /* ------------------------------------------------------ carusel --- */ /* Sagetile sunt ascunse pe toata banda de mobil (vezi sus), deci nu mai au dimensiuni aici. Spatiul dintre randurile de jetoane e tot sus, langa `--jeton-max`, ca sa stea cele doua valori care depind una de alta la un loc — un al doilea `gap` aici il suprascria prin ordine. */ /* -------------------------------------------------------- trasee --- */ /* Pozitiile masurate in lp_MOBILE (bbox-urile vectorilor, la 390): V19 -71/695 287x100 hero -> galben, se opreste LA placa V20 -66/1389 373x159 ~180° galben -> roz V23 110/2447 197x154 roz -> lila (la noi e imaginea --21) V22 127/3113 160x318 lila -> bleu, coada intra sub panou V21 din macheta (36/2645) sta INTEGRAL in spatele panoului lila — nu il redam. Stanga/latimea sunt procente din 390 ca sa scaleze pe benzi; offseturile verticale sunt fixe pentru ca gap-urile dintre panouri sunt constante pe tot mobilul (88/96/94). Formele raman exporturile de desktop; unde macheta roteste vectorul la ~180°, il intoarcem cu scale. */ /* Aceeasi linie la toate cinci, egala cu cea a traseului de langa header: inainte ieseau intre 1,36px (Vector 21) si 5,06px (Vector 20), fiindca fiecare desen e scalat altfel. */ .traseu { --traseu-linie: 2.1px; --traseu-punct: 6.3px; } /* `bottom` corectat cu `--sub-hero-ridicare`: traseul e ancorat de cutia hero-ului, iar marginea negativa de acolo nu miscă cutia. Fara corectia asta traseul ar rămâne pe loc si panoul galben ar urca peste el. */ .traseu--19 { left: -18.3%; bottom: calc(-125px + var(--sub-hero-ridicare)); width: 73.5%; } .traseu--20 { left: -17%; bottom: -126px; width: 95.5%; transform: scale(-1); } .traseu--21 { left: 28%; bottom: -53px; width: 50.6%; } .traseu--22 { left: 32.5%; bottom: -188px; width: 41%; } /* max-width: la 767 cei 22% ar face vectorul de 161 lat si 148 inalt, iar varful lui urca 70px peste buton. Plafonat la marimea de la 390. */ .traseu--24 { left: 30%; bottom: -15px; width: 22%; max-width: 90px; } /* ------------------------------------------ elemente decorative --- */ .minion-galben { display: none; } .inima--dreapta { width: 96px; top: -24px; right: 0; } .eticheta-banana { width: 30%; left: 68%; bottom: -14px; } /* "Coborat pe panou" fara sa se atinga panoul. Trei piese, acelasi principiu: nimic din ce misca grupul nu are voie sa schimbe fluxul, pentru ca panoul (pozitie SI inaltime) e determinat de flux, iar SVG-ul lui se intinde cu el. 1. Placa: `translateY` — pur vizual. Sta acum PE panou (nu 59px deasupra), si primeste z-index 3 ca sa treaca peste panoul cu z-index 2. 2. Cardul + punctele: paddingul de sus al panoului creste, dar compensat exact de plecarea butonului din flux (pasul 3), asa ca panoul iese la 579px — chiar inaltimea nativa a SVG-ului, deci fara intindere. 3. Butonul: absolut, agatat SUB panou (bottom negativ), ca in lp_MOBILE — nu mai ocupa loc in flux. Incape in paddingul de 90px al secțiunii, deci nici distanta pana la sectiunea urmatoare nu se schimba. */ .sect-partenere .banner { position: relative; z-index: 3; transform: translateY(35px) rotate(-1.84deg); } /* Ca la produse: un singur card centrat in panou, nimic nu iese din el — alegerea clientului, in locul benzii taiate la marginea ecranului din macheta. Latimea = cardul de 265 din lp_MOBILE. */ /* Aliniat la STANGA zonei utile, nu centrat, si lat cu 16px peste paddingul din dreapta al panoului — la fel ca la caruselul de produse. Asa se vede o parte din produsul urmator, retezata exact la marginea bleului. Cardul rămâne la 265px (valoarea din lp_MOBILE) prin `data-vecin`. */ .sect-partenere .carusel { margin-inline: 0; } /* Cardul de partener: valorile vin din variabile ca sa se stranga treptat pe benzile mici fara reguli duplicate. */ .partener { padding: 22px 20px 26px; } .partener-antet { min-height: 56px; } .partener-media { margin: 10px 0 14px; } .partener-gramaj { margin: 6px 0 10px; } /* Figma: butonul are 354 (cat panoul), 55 inaltime, raza 15 — NU pastila — contur alb de 3 si sta la ~31 sub panou. */ .sect-partenere .buton-catalog { position: absolute; left: 0; right: 0; bottom: -86px; width: auto; margin: 0; } .buton-catalog { width: 100%; min-height: 55px; font-size: 19px; padding: 14px 18px; border-radius: 15px; border: 3px solid var(--alb); } /* 50, nu 156 ca pe desktop: aici traseul 24 se termina cu 15px in secțiune, nu cu 125, deci padding-ul de desktop lasa 141px de gol sub liniute. Cu 50 rămâne un spatiu de ~35px intre capatul traseului si titlu, cat pe desktop. */ .sect-regulament { padding-top: 50px; } /* lp_MOBILE: titlu (30px, "INTREBARI?" galben — vine din markup) si sub el butonul, aproape cat sectiunea de lat. lp_MOBILE are titlul CENTRAT, cu majuscule si pe patru randuri ("INTREBARI? / CONSULTA / REGULAMENTUL / PROMOTIEI."), nu aliniat la stanga pe doua randuri ca inainte. 34px vine din linia cea mai lunga: la atat, "REGULAMENTUL" iese 277px, adica exact cat ocupa in macheta, si rămân 40px de aer in containerul de 357. Corpul mai mare l-ar sparge — la 45px linia ar avea 366px, mai lat decat containerul, deci n-ar mai incapea pe un rand. Majusculele vin din CSS, nu din text, exact ca la `.banner`: sursa se scrie normal, iar `text-transform` o ridica. Titlul asta era singurul lasat pe dinafara. */ .regulament-titlu { font-size: 34px; text-transform: uppercase; } /* Intrebarea galbena STA PE RANDUL EI, la orice latime. Fara asta, ruperea depindea de cat de lat e containerul: la 390 nimerea singura pe primul rand, dar la 440 (container 407) incapea si "CONSULTA" langa ea, iar intrebarea galbena se lipea de propozitia alba — alta structura decat in macheta. `display: block` scoate norocul din ecuatie. */ .regulament-intrebare { display: block; } .buton-regulament { display: block; padding: 16px 40px; font-size: 19px; } .footer-social img { height: 22px; } } /* ========================================================================== MOBIL — BENZI DE REZOLUTIE Fiecare banda e INDEPENDENTA (min-width + max-width) si are valori in px. Ce schimbi intr-o banda NU se scurge in celelalte, deci se poate edita liniar, fara sa urmaresti cascada. Structura comuna (asezare, forme de panou, carusele, marquee) sta in blocul `@media only screen and (max-width: 767.98px)` de mai sus. Aici sunt doar MARIMILE. Ordinea, identica in fiecare banda: 1 containere 2 tipografie 3 panoul galben 4 panoul roz 5 panoul lila 6 panoul bleu 7 branduri ========================================================================== */ /* --------------------------------------------------------- 340px si mai jos --- */ @media only screen and (max-width: 339.98px) { /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 20px); } .hero-grid, .site-header { width: calc(100% - 28px); } /* 2 --- tipografie ------------------------------------------------- */ /* Slide-ul are aici doar 188px, deci retragerile de 18 din blocul de mobil lasa casetei 152 si pastilei 140 utili — sub cei ~157 ceruti de conținut. 10px pentru casete si text, iar pastila rămâne lipita de margini. */ .produs-media { margin-inline: 10px; } .produs-nume { margin-inline: 10px; } .produs-pret-intreg { margin-inline: 10px; } .produs-pret-5x { margin-inline: 0; } /* Pastila „Preț cu 5x": la 320 conținutul cere cu 9px mai mult decat incape, deci preturile de 3 cifre isi mutau valoarea pe rand propriu. Aceleasi manete ca pe benzile de tableta si desktop — eticheta, gap, padding, iconita. Pretul rămâne la 31,16. */ .produs-pret-5x { gap: 4px; padding-inline: 6px; font-size: 14px; } .produs-pret-5x img { margin-left: 2px; } .pret-grup { gap: 4px; } /* Hero-ul are 305 unitati: propozitia incape la 23; 22 pentru rezerva. */ .hero-titlu { --corp-titlu: 29px; } .banner { font-size: 18px; padding: 10px 16px; } .banner--mic { font-size: 16px; } .pas-text { font-size: 13px; } .pas-eticheta { font-size: 15px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 16px; } /* 3 --- panoul galben (produse) ------------------------------------ */ .card-galben { padding-block: 102px 51px; } /* Fereastra caruselului trece cu 16px PESTE paddingul din dreapta al panoului, adica pana la marginea exterioara a galbenului: acolo o reteaza `overflow: hidden`. Stanga rămâne aliniata la zona utila, deci compozitia e intentionat asimetrica — 16px de galben in stanga, zero in dreapta, ca peek-ul sa mearga cat mai in margine. Slide-ul NU mai e cat containerul: din el se scade fractiunea de vecin (`data-vecin` din index.php), care lasa urmatorul produs sa se vada. Inainte era 80% centrat, deci cardul sta la 32px de marginea utila si nu se vedea nimic din slide-ul urmator. */ .card-produse { width: calc(100% + 16px); } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 30px; padding-inline: 10px; } .pasi-vizual { padding-bottom: 40px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 100px 30px; } .jeton { width: 88px; } .jeton-coloana { gap: 16px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .sect-partenere .carusel { width: calc(100% + 16px); } .partener { padding: 16px 14px 18px; } .partener-antet { min-height: 44px; } .partener-pliculet { height: 40px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 56px 24px; } .brand { height: 36px; } /* Formele SVG isi pastreaza proportia — altfel se turtesc si panoul pare mai ingust. Sterge cele 4 linii daca vrei panouri strict pe continut. */ .card-galben { aspect-ratio: 358 / 595; } .card-pasi { aspect-ratio: 357 / 1029; } .card-jetoane { aspect-ratio: 357 / 613; } .card-partenere { aspect-ratio: 357 / 579; } } /* --------------------------------------------------------- 340 - 375px --- */ @media only screen and (min-width: 340px) and (max-width: 375.98px) { /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 26px); } .hero-grid, .site-header { width: calc(100% - 40px); } /* Slide-ul are 197px: retragerea de 18 din blocul de mobil lasa pastilei doar 149px utili, sub cei ~157 ceruti. 10px peste tot pe banda asta. */ .produs-media { margin-inline: 10px; } .produs-nume { margin-inline: 10px; } .produs-pret-intreg { margin-inline: 10px; } /* 6, nu 10 ca surorile ei: la 340 pastila are cea mai putina rezerva din toata gama, iar la 8 mai rămâneau doar 3,5px. */ .produs-pret-5x { margin-inline: 6px; } /* 2 --- tipografie ------------------------------------------------- */ /* Aceleasi manete ca pe banda de sub 340: la capatul ei ingust (340) pastila mai avea 0,4px, deci un pret de 3 cifre se rupea. */ .produs-pret-5x { gap: 4px; padding-inline: 6px; font-size: 14px; } .produs-pret-5x img { margin-left: 2px; } .pret-grup { gap: 4px; } /* Hero-ul are 325 unitati: propozitia incape la 25; 23 pentru rezerva. */ .hero-titlu { --corp-titlu: 30px; } .banner { font-size: 20px; padding: 12px 20px; } .banner--mic { font-size: 17px; } .pas-text { font-size: 14px; } .pas-eticheta { font-size: 16px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 17px; } /* 3 --- panoul galben (produse) ------------------------------------ */ .card-galben { padding-block: 102px 51px; } /* Fereastra caruselului trece cu 16px PESTE paddingul din dreapta al panoului, adica pana la marginea exterioara a galbenului: acolo o reteaza `overflow: hidden`. Stanga rămâne aliniata la zona utila, deci compozitia e intentionat asimetrica — 16px de galben in stanga, zero in dreapta, ca peek-ul sa mearga cat mai in margine. Slide-ul NU mai e cat containerul: din el se scade fractiunea de vecin (`data-vecin` din index.php), care lasa urmatorul produs sa se vada. Inainte era 80% centrat, deci cardul sta la 32px de marginea utila si nu se vedea nimic din slide-ul urmator. */ .card-produse { width: calc(100% + 16px); } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 30px; padding-inline: 32px; } .pasi-vizual { padding-bottom: 60px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 112px 30px; } .jeton { width: 96px; } .jeton-coloana { gap: 16px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .sect-partenere .carusel { width: calc(100% + 16px); } .partener { padding: 16px 14px 18px; } .partener-antet { min-height: 44px; } .partener-pliculet { height: 40px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 62px 28px; } .brand { height: 38px; } /* Formele SVG isi pastreaza proportia — altfel se turtesc si panoul pare mai ingust. Sterge cele 4 linii daca vrei panouri strict pe continut. */ .card-galben { aspect-ratio: 358 / 595; } .card-pasi { aspect-ratio: 357 / 1029; } .card-jetoane { aspect-ratio: 357 / 613; } .card-partenere { aspect-ratio: 357 / 579; } } /* --------------------------------------------------------- 376 - 390px (latimea machetei lp_MOBILE) --- */ @media only screen and (min-width: 375.99px) and (max-width: 390.98px) { /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 33px); } .hero-grid, .site-header { width: calc(100% - 54px); } /* 2 --- tipografie ------------------------------------------------- */ .banner { font-size: 22px; padding: 14px 24px; } .banner--mic { font-size: 19px; } .pas-text { font-size: 15px; } .pas-eticheta { font-size: 17px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 18px; } /* 3 --- panoul galben (produse) ------------------------------------ */ /* 120, nu 92: paddingul e fix, dar bannerul isi schimba inaltimea dupa cum se rupe textul, iar pe banda asta e cel mai inalt (108px) — rămâneau doar 9px intre el si slide. In lp_MOBILE golul e ~37px, si acolo il aduc cei 120. */ .card-galben { padding-block: 120px 61px; } /* Fereastra caruselului trece cu 16px PESTE paddingul din dreapta al panoului, adica pana la marginea exterioara a galbenului: acolo o reteaza `overflow: hidden`. Stanga rămâne aliniata la zona utila, deci compozitia e intentionat asimetrica — 16px de galben in stanga, zero in dreapta, ca peek-ul sa mearga cat mai in margine. Slide-ul NU mai e cat containerul: din el se scade fractiunea de vecin (`data-vecin` din index.php), care lasa urmatorul produs sa se vada. Inainte era 80% centrat, deci cardul sta la 32px de marginea utila si nu se vedea nimic din slide-ul urmator. */ .card-produse { width: calc(100% + 16px); } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 40px; padding-inline: 32px; } .pasi-vizual { padding-bottom: 60px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 124px 30px; } .jeton { width: 104px; } .jeton-coloana { gap: 18px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .sect-partenere .carusel { width: calc(100% + 16px); } .partener { padding: 18px 16px 20px; } .partener-antet { min-height: 48px; } .partener-pliculet { height: 40px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 68px 30px; } .brand { height: 40px; } /* Formele SVG isi pastreaza proportia — altfel se turtesc si panoul pare mai ingust. Sterge cele 4 linii daca vrei panouri strict pe continut. */ .card-galben { aspect-ratio: 358 / 595; } .card-pasi { aspect-ratio: 357 / 1029; } .card-jetoane { aspect-ratio: 357 / 613; } .card-partenere { aspect-ratio: 357 / 579; } } /* --------------------------------------------------------- 391 - 439px --- */ @media only screen and (min-width: 390.99px) and (max-width: 439.98px) { /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 33px); } .hero-grid, .site-header { width: calc(100% - 54px); } /* 2 --- tipografie ------------------------------------------------- */ .banner { font-size: 22px; padding: 14px 24px; } .banner--mic { font-size: 19px; } .pas-text { font-size: 15px; } .pas-eticheta { font-size: 17px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 18px; } /* 3 --- panoul galben (produse) ------------------------------------ */ /* 120, nu 92: paddingul e fix, dar bannerul isi schimba inaltimea dupa cum se rupe textul, iar pe banda asta e cel mai inalt (108px) — rămâneau doar 9px intre el si slide. In lp_MOBILE golul e ~37px, si acolo il aduc cei 120. */ .card-galben { padding-block: 120px 61px; } /* Fereastra caruselului trece cu 16px PESTE paddingul din dreapta al panoului, adica pana la marginea exterioara a galbenului: acolo o reteaza `overflow: hidden`. Stanga rămâne aliniata la zona utila, deci compozitia e intentionat asimetrica — 16px de galben in stanga, zero in dreapta, ca peek-ul sa mearga cat mai in margine. Slide-ul NU mai e cat containerul: din el se scade fractiunea de vecin (`data-vecin` din index.php), care lasa urmatorul produs sa se vada. Inainte era 80% centrat, deci cardul sta la 32px de marginea utila si nu se vedea nimic din slide-ul urmator. */ .card-produse { width: calc(100% + 16px); } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 40px; padding-inline: 32px; } .pasi-vizual { padding-bottom: 60px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 124px 30px; } .jeton { width: 104px; } .jeton-coloana { gap: 18px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .sect-partenere .carusel { width: calc(100% + 16px); } .partener { padding: 18px 16px 20px; } .partener-antet { min-height: 48px; } .partener-pliculet { height: 40px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 68px 30px; } .brand { height: 40px; } /* Formele SVG isi pastreaza proportia — altfel se turtesc si panoul pare mai ingust. Sterge cele 4 linii daca vrei panouri strict pe continut. */ .card-galben { aspect-ratio: 358 / 595; } .card-pasi { aspect-ratio: 357 / 1029; } .card-jetoane { aspect-ratio: 357 / 613; } .card-partenere { aspect-ratio: 357 / 579; } } /* --------------------------------------------------------- 440 - 519px --- */ @media only screen and (min-width: 439.99px) and (max-width: 519.98px) { /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 33px); } .hero-grid, .site-header { width: calc(100% - 54px); } /* 2 --- tipografie ------------------------------------------------- */ .banner { font-size: 22px; padding: 14px 24px; } .banner--mic { font-size: 19px; } .pas-text { font-size: 15px; } .pas-eticheta { font-size: 17px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 18px; } /* 3 --- panoul galben (produse) ------------------------------------ */ /* 120, nu 92: paddingul e fix, dar bannerul isi schimba inaltimea dupa cum se rupe textul, iar pe banda asta e cel mai inalt (108px) — rămâneau doar 9px intre el si slide. In lp_MOBILE golul e ~37px, si acolo il aduc cei 120. */ .card-galben { padding-block: 120px 61px; } /* Fereastra caruselului trece cu 16px PESTE paddingul din dreapta al panoului, adica pana la marginea exterioara a galbenului: acolo o reteaza `overflow: hidden`. Stanga rămâne aliniata la zona utila, deci compozitia e intentionat asimetrica — 16px de galben in stanga, zero in dreapta, ca peek-ul sa mearga cat mai in margine. Slide-ul NU mai e cat containerul: din el se scade fractiunea de vecin (`data-vecin` din index.php), care lasa urmatorul produs sa se vada. Inainte era 80% centrat, deci cardul sta la 32px de marginea utila si nu se vedea nimic din slide-ul urmator. */ .card-produse { width: calc(100% + 16px); } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 30px; padding-inline: 32px; } .pasi-vizual { padding-bottom: 60px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 124px 30px; } .jeton { width: 104px; } .jeton-coloana { gap: 18px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .sect-partenere .carusel { width: calc(100% + 16px); } .partener { padding: 22px 20px 26px; } .partener-antet { min-height: 56px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 68px 30px; } .brand { height: 40px; } /* Formele SVG isi pastreaza proportia — altfel se turtesc si panoul pare mai ingust. Sterge cele 4 linii daca vrei panouri strict pe continut. */ .card-galben { aspect-ratio: 358 / 595; } .card-pasi { aspect-ratio: 357 / 1029; } .card-jetoane { aspect-ratio: 357 / 613; } .card-partenere { aspect-ratio: 357 / 579; } } /* ========================================================================== PANOURILE RENUNTA LA FORMELE SVG INTRE 520 SI 1280 ========================================================================== Formele sunt patrulatere inclinate, intinse cu `background-size: 100% 100%`. Cand raportul cutiei difera de cel al desenului, forma se deformeaza: colturile rotunjite de 25px devin elipse, iar marginile inclinate se strambă. Panoul PARE atunci mai mic decat continutul lui — de aici impresia ca "caruselele sunt mai mari decat panourile". Masurat, intindere pe verticala fata de desen: latime | galben roz lila bleu -------+--------------------------- 803 | 190% 236% 141% 177% 950 | 161% 135% 122% 152% 1100 | 143% 130% 124% 124% 1348 | 122% 105% 103% 108% 1440 | 114% 104% 100% 104% De la ~1280 in sus deformarea intra in 103-122%, adica nivelul acceptat pe desktop (panourile sunt oricum ~10% mai inalte decat originalul). Sub 1280 e inacceptabila, iar `aspect-ratio` nu e o soluție: ar face panoul roz de peste 2000px inalt. Asa ca folosim dreptunghiuri rotunjite in culorile lor — zero deformare, la orice inaltime. Acelasi tratament era deja aplicat pe 520-767; blocul asta doar il extinde pe tot intervalul, ca sa acopere si tableta. ========================================================================== */ @media only screen and (min-width: 519.99px) and (max-width: 1279.98px) { .card-galben, .card-pasi, .card-jetoane, .card-partenere { background-image: none; border-radius: 25px; } .card-galben { background-color: #FEDB65; } .card-pasi { background-color: #F6A0C5; } .card-jetoane { background-color: #A8AAD8; } .card-partenere { background-color: #8AA8DA; } } /* ---------------------------------------------------- 768 - 1280px --- */ /* Eticheta "banana" e desenata sa IASA din container: `left: 86%` plus o latime de 21.4% duc marginea ei dreapta la 107,4% din container. Pe 1920 e loc (marja laterala e 252px), dar pe tableta marja e 20-32px, deci eticheta ieșea din ecran cu ~50px si o reteza `body { overflow-x: hidden }`. Masurat la 803: 662..822 pe un viewport de 786. O aducem in container. Bleed-ul rămâne doar pe ecranele care au marja pentru el. */ @media only screen and (min-width: 767.99px) and (max-width: 1279.98px) { .eticheta-banana { left: 76%; } } /* --------------------------------------------------------- 520 - 767px (mobil lat) --- */ /* Formele din lp_MOBILE sunt desenate pentru un panou de ~357 (portret). Peste 520 panoul devine lat, iar `background-size: 100% 100%` le-ar turti pana la 26%; `aspect-ratio` ar rezolva turtirea, dar ar face panoul roz de 2116px la 767. Asa ca de aici in sus renuntam la forme si folosim dreptunghiuri rotunjite in culorile lor — zero deformare, la orice inaltime. */ @media only screen and (min-width: 519.99px) and (max-width: 767.98px) { /* Fara aspect-ratio pe banda asta, panoul urmeaza continutul si marginile de calibrare din baza (-82px pe .pliculet) trag compozitia 41px peste cardul alb. Acelasi reset ca in banda 768-900. */ .pliculet-grup .pliculet { margin-top: 0; margin-left: 0; margin-inline: auto; } .pliculet-grup .pliculet-umbra { margin-left: auto; } /* 1 --- containere ------------------------------------------------- */ .container { width: calc(100% - 33px); } .hero-grid, .site-header { width: calc(100% - 54px); } /* 2 --- tipografie ------------------------------------------------- */ /* La 520 — capatul ingust — hero-ul are 505 unitati, deci propozitia incape pe un rand la 39; 37 pentru rezerva. Spre 767 hero-ul creste la 685, deci acolo textul rămâne sub latimea lui, dar banda are un singur corp. */ .hero-titlu { --corp-titlu: 47px; } .banner { font-size: 22px; padding: 14px 24px; } .banner--mic { font-size: 19px; } .pas-text { font-size: 15px; } .pas-eticheta { font-size: 17px; } .produs-nume { font-size: 17px; } .partener-nume { font-size: 18px; } /* 3 --- panoul galben (produse) ------------------------------------ */ .card-galben { padding-block: 102px 51px; } /* 4 --- panoul roz (pasi) ------------------------------------------ */ .card-pasi { padding-block: 52px 30px; padding-inline: 40px; } .pasi-vizual { padding-bottom: 60px; } /* 5 --- panoul lila (jetoane) -------------------------------------- */ .card-jetoane { padding-block: 124px 30px; } .jeton { width: 104px; } .jeton-coloana { gap: 18px; } /* 6 --- panoul bleu (partenere) ------------------------------------ */ .card-partenere { padding-block: 82px 44px; } .partener { padding: 22px 20px 26px; } .partener-antet { min-height: 56px; } /* 7 --- branduri --------------------------------------------------- */ .card-branduri { padding-block: 68px 30px; } .brand { height: 40px; } } /* --- doar sub 340: antetul si logourile de prag se strang -------------- */ @media only screen and (max-width: 339.98px) { .site-header { gap: 12px; } .header-pill { padding: 6px 12px; } .header-carrefour { width: 122px; } .header-minionii { width: 76px; } .prag-logo { height: 17px; } .prag-logo[src*='carrefouro'] { height: 12px; } } /* Respecta preferinta de reducere a miscarii. */ @media only screen and (prefers-reduced-motion: reduce) { .branduri-pista { animation: none; } .produs--link .produs-media img { transition: none; } .produs--link:hover .produs-media img, .produs--link:focus-within .produs-media img { transform: none; } html { scroll-behavior: auto; } .carusel-pista { transition: none; } }