/* Varianta de mobil pentru portofoliu. ------------------------------------------------------------------ De ce exista fisierul asta: site-ul e o clona a unui export Framer. Framer tine cate o varianta de DOM per breakpoint si comuta intre ele la hidratare. Motorul de hidratare a fost scos intentionat (albea pagina pe alt domeniu decat Framer), asa ca in HTML ramane DOAR varianta de desktop. CSS-ul de mobil al lui Framer se aplica partial: din 204 de clase din blocul (max-width: 809.98px), 48 tintesc elemente care nu exista in DOM, fiindca sunt create doar in varianta mobila. De aici vin suprapunerile. Ce corectam aici, tintit, fara sa atingem codul generat: 1. antetul se aseza peste titlul din hero, iar navigatia iesea 189 px in dreapta ecranului 2. cardul "Meet the Founder" statea la x=579 pe un ecran de 390 px, deci butonul care deschide popupul era de neatins cu degetul 3. sectiunea de intrebari se randa pe doua coloane de 171 px, iar textul se suprapunea peste imagine 4. subsolul folosea acelasi doua-coloane, iar adresa de email la 40 px se rupea in mijlocul cuvantului Selectoarele merg pe atributul data-framer-name, nu pe clasele cu hash: hash-urile difera de la pagina la pagina, numele nu. Verificat pe toate cele patru pagini. ------------------------------------------------------------------ */ @media (max-width: 809.98px) { /* --- 1. Antetul --------------------------------------------------- Containerul antetului e absolut, peste hero. Pe mobil il scoatem din pozitionarea absoluta, ca sa curga deasupra continutului in loc sa il acopere. :has cu copil direct prinde exact parintele antetului si nimic altceva. */ div:has(> header[data-framer-name="Primary"]) { position: relative !important; height: auto !important; /* Scos din pozitionarea absoluta, containerul devine element flex al sectiunii Hero, care centreaza pe axa transversala: ajungea la 258 px, pornind de la x=66. */ width: 100% !important; max-width: 100% !important; align-self: stretch !important; } /* Pe latime nu incap unul langa altul: sigla, navigatia si cardul fondatorului insumeaza 665 px. Le asezam unul sub altul. */ header[data-framer-name="Primary"] { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; height: auto !important; min-height: 0 !important; row-gap: 14px !important; /* Fara padding lateral: containerul e deja retras cu 24 px, la fel ca restul continutului paginii. */ padding: 14px 0 !important; /* Latimea venea din varianta de desktop: 258 px, pornind de la x=66. */ width: 100% !important; max-width: 100% !important; } /* Navigatia din ANTET. Pe toate cele patru pagini se numeste "All Active". Nu adauga aici "Contact Active": acela e nav-ul din SUBSOLUL paginii Contact, si regulile de mai jos ii ascundeau numerele, lasand subsolul acelei pagini altfel decat restul. */ nav[data-framer-name="All Active"] { flex-wrap: wrap !important; gap: 18px !important; width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; } /* Numerele mici (01, 02...) de langa fiecare link mananca latime fara sa adauge informatie pe un ecran ingust. */ nav[data-framer-name="All Active"] div[data-framer-name="Roll No"] { display: none !important; } /* Zona de atingere: linkurile aveau 19 px inaltime. */ nav[data-framer-name="All Active"] a[data-framer-name="Menu Item"] { min-height: 44px !important; display: flex !important; align-items: center !important; } /* --- 2. Cardul fondatorului -------------------------------------- Statea in afara ecranului, deci popupul nu se putea deschide de pe telefon. Il aducem in rand, la latime intreaga, sub navigatie. */ div:has(> a[data-framer-name="Primary"]) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; order: 3 !important; } a[data-framer-name="Primary"] { width: 100% !important; max-width: 100% !important; min-height: 44px !important; } /* --- 3. Sectiunea de intrebari ----------------------------------- "Content" era flex row: imaginea si intrebarile, doua coloane de 171 px, cu text suprapus. Le punem una sub alta. */ /* Atentie la domeniu: numele "Content" apare pe 10 elemente in pagina, inclusiv pe fiecare rand de intrebare. O regula globala le-a strans pe toate la 1 px latime. Tintim doar coloana mare a sectiunii, prin calea completa: sectiunea de intrebari e singurul
numit "Desktop" (subsolul poarta acelasi nume, dar e