/** * Doradca AI - style frontu. * Wszystko scope'owane pod .mpai, zeby nie walczyc z Avada. * Paleta z prototypu marka.plus. */ /* * Paleta osobno od ukladu i celowo na DWOCH korzeniach. * * Okienko zgloszenia jest przy otwarciu przenoszone do , zeby wyjsc poza * konteksty ukladania budowane przez Avade - a to znaczy, ze traci przodka .mpai * i razem z nim wszystkie zmienne. Drugi selektor jest jedyna rzecza, ktora stoi * miedzy tym przeniesieniem a okienkiem bez ani jednego koloru. */ .mpai, .mpai-modal { --mpai-bg: #F6F0E8; --mpai-card: #FFFDFB; --mpai-panel: #FBF6EF; --mpai-line: #E7DED2; --mpai-line2: #E4D6C2; --mpai-ink: #201A15; --mpai-sub: #6B6058; --mpai-muted: #8A7D6E; --mpai-faint: #A2937F; --mpai-orange: #E5561F; --mpai-magenta: #C4456B; --mpai-brown: #6B4326; } .mpai { box-sizing: border-box; color: var(--mpai-ink); max-width: 1160px; margin: 0 auto; width: 100%; } .mpai *, .mpai *::before, .mpai *::after, .mpai-modal, .mpai-modal *, .mpai-modal *::before, .mpai-modal *::after { box-sizing: border-box; } /* Poza .mpai atrybut hidden tez musi wygrywac z naszym display: flex. */ .mpai-modal[hidden], .mpai-modal [hidden] { display: none !important; } /* * Atrybut hidden dziala przez "display: none" z arkusza przegladarki, wiec KAZDA wlasna * regula display go uniewaznia. Blok logo ma "display: flex" i przez to pokazywal pusta * ramke mimo hidden=true. Ta regula musi byc, zanim ustawimy gdziekolwiek display. */ .mpai [hidden] { display: none !important; } .mpai-ekran { display: none; } .mpai-ekran.is-active { display: block; animation: mpai-rise .45s both; } @keyframes mpai-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mpai-pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes mpai-orb { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 86, 31, .35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 26px rgba(229, 86, 31, 0); } } /* ---------- wejscie ---------- */ /* * Ekran startowy wedlug prototypu "MarekAI - ekran": grafit z czerwienia, Nunito i Figtree. * * Paleta jest ZAMKNIETA w tym ekranie, na wlasnych zmiennych. Reszta doradcy - analiza, * karty, okienka - ma na razie dotychczasowy wyglad; zmiana zmiennych .mpai przestawilaby * wszystko naraz, zanim pozostale ekrany dostana nowy projekt. */ .mpai-ekran-wejscie { --mk-grafit: #3F4145; --mk-awatar: #575858; --mk-czerwien: #DB402B; --mk-czerwien-ciemna: #B7331F; --mk-czerwien-jasna: #FCEBE8; --mk-lososiowy: #F5A08D; --mk-szary: #6B6E73; --mk-ikona: #A6AAB0; --mk-ramka: #E3E6E9; --mk-ramka-pola: #DCE0E4; --mk-tlo-pola: #F7F8F9; max-width: 1120px; margin: 0 auto; padding: 0 0 8px; text-align: left; font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--mk-grafit); } .mpai-start { background: #fff; border: 1px solid var(--mk-ramka); border-radius: 20px; padding: 40px 40px 34px; box-shadow: 0 24px 50px -40px rgba(63, 65, 69, .35); } .mpai-start-gora { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 13px; } .mpai-awatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--mk-awatar); } .mpai-awatar-litera { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 22px; line-height: 1; color: #fff; } .mpai-awatar-plus { position: absolute; right: -3px; bottom: -3px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 6px; background: var(--mk-czerwien); border: 2px solid #fff; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11px; line-height: 1; color: #fff; } .mpai-start-nazwa { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--mk-grafit); } .mpai-start-rola { font-size: 12.5px; font-weight: 500; color: var(--mk-szary); white-space: nowrap; } .mpai-pigulka { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; background: var(--mk-grafit); border-radius: 22px; padding: 8px 15px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; color: #fff; } .mpai-start-gora .mpai-pigulka { margin-left: auto; } .mpai-pigulka svg { flex-shrink: 0; color: var(--mk-czerwien); } /* Wersja na ciemnej sekcji. */ .mpai-pigulka-jasna { background: rgba(219, 64, 43, .16); border: 1px solid rgba(219, 64, 43, .45); padding: 7px 14px; font-size: 12.5px; color: var(--mk-lososiowy); } .mpai-pigulka-jasna svg { color: var(--mk-lososiowy); } /* * Rozmiar i interlinia naglowka z !important - swiadomie. * * Avada dokleja naglowkom w tresci klase "fusion-responsive-typography-calculated" * i styl inline z interlinia - widac to na naglowkach ekranu wynikow. Styl inline wygrywa * z kazda regula bez !important, wiec bez tego naglowek dostalby interlinie motywu. */ .mpai .mpai-ekran-wejscie .mpai-naglowek { max-width: 760px; margin: 26px 0 0; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -.03em; color: var(--mk-grafit); text-wrap: pretty; } .mpai-ekran-wejscie .mpai-podtytul { max-width: 620px; margin: 16px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--mk-szary); text-wrap: pretty; } .mpai-start-formularz { max-width: 640px; margin-top: 28px; } .mpai-pole { margin-bottom: 12px; text-align: left; } .mpai-pole.is-hidden { display: none; } .mpai-pole-url { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; } /* Etykieta, a nie div: klikniecie w ikone linku ustawia kursor w polu. */ .mpai-url-ramka { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 11px; margin: 0; padding: 0 16px; background: var(--mk-tlo-pola); border: 1.5px solid var(--mk-ramka-pola); border-radius: 13px; color: var(--mk-ikona); cursor: text; } .mpai-url-ramka:focus-within { border-color: var(--mk-czerwien); } .mpai-url-ramka svg { flex-shrink: 0; } .mpai-ekran-wejscie .mpai-url-ramka .mpai-input { flex: 1; min-width: 0; padding: 15px 0; font-size: 16.5px; color: var(--mk-grafit); background: transparent; border: none; border-radius: 0; box-shadow: none; } .mpai-ekran-wejscie .mpai-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--mk-szary); } .mpai-ekran-wejscie .mpai-nazwa-firmy { margin-bottom: 14px; padding: 14px 16px; font-size: 16px; color: var(--mk-grafit); background: var(--mk-tlo-pola); border: 1.5px solid var(--mk-ramka-pola); border-radius: 13px; } .mpai-ekran-wejscie .mpai-nazwa-firmy:focus { border-color: var(--mk-czerwien); } .mpai-ekran-wejscie .mpai-label-dopisek { font-weight: 500; color: var(--mk-ikona); } .mpai-ekran-wejscie .mpai-opis { resize: vertical; padding: 14px 16px; font-size: 16px; line-height: 1.55; color: var(--mk-grafit); background: var(--mk-tlo-pola); border: 1.5px solid var(--mk-ramka-pola); border-radius: 13px; } .mpai-ekran-wejscie .mpai-okazja { margin-top: 13px; padding: 13px 16px; font-size: 15px; color: var(--mk-grafit); background: #fff; border: 1.5px solid #E7EAEE; border-radius: 12px; } .mpai-ekran-wejscie .mpai-opis:focus, .mpai-ekran-wejscie .mpai-okazja:focus { border-color: var(--mk-czerwien); } /* Wybor logo przy opisie - w stylu prototypu: przerywana ramka, bez wypelnienia. */ .mpai-ekran-wejscie .mpai-opis-logo { margin: 12px 0 0; } .mpai-ekran-wejscie .mpai-opis-logo-strefa { display: inline-flex; justify-content: flex-start; width: auto; max-width: 100%; gap: 4px 9px; padding: 11px 15px; font-size: 14px; font-weight: 600; color: var(--mk-szary); text-align: left; background: #fff; border: 1.5px dashed #D4D8DD; border-radius: 11px; } .mpai-ekran-wejscie .mpai-opis-logo-strefa:hover, .mpai-ekran-wejscie .mpai-opis-logo-strefa.is-nad { border-color: var(--mk-czerwien); color: var(--mk-grafit); background: #fff; } .mpai-ekran-wejscie .mpai-opis-logo-nazwa { color: var(--mk-grafit); } .mpai-ekran-wejscie .mpai-opis-logo-dopisek { font-size: 12px; font-weight: 500; color: var(--mk-ikona); } /* Przyciski startu: czerwone, ze strzalka. */ .mpai-ekran-wejscie .mpai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 24px; font-size: 16px; font-weight: 700; color: #fff; background: var(--mk-czerwien); border-radius: 13px; transition: background .15s; } .mpai-ekran-wejscie .mpai-btn:hover:not(:disabled) { background: var(--mk-czerwien-ciemna); } .mpai-ekran-wejscie .mpai-pole-opis .mpai-btn { width: auto; margin-top: 14px; } .mpai-ekran-wejscie .mpai-przelacz { display: inline-block; margin-top: 16px; padding: 0; font-size: 14px; font-weight: 600; color: var(--mk-szary); text-underline-offset: 3px; } .mpai-ekran-wejscie .mpai-przelacz:hover:not(:disabled) { color: var(--mk-czerwien); } .mpai-ekran-wejscie .mpai-blad { margin: 13px 0 0; padding: 0; font-size: 14px; font-weight: 600; color: #C0392B; background: none; border: 0; } .mpai .mpai-start-atuty { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid #EBEEF1; font-size: 13.5px; font-weight: 600; color: var(--mk-szary); } .mpai .mpai-start-atuty li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; } .mpai-start-atuty svg { flex-shrink: 0; color: var(--mk-czerwien); } /* Trzy kroki pod karta. */ .mpai-start-kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; } .mpai-start-krok { background: #fff; border: 1px solid var(--mk-ramka); border-radius: 16px; padding: 20px 22px; } .mpai-start-krok-nr { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; background: var(--mk-czerwien-jasna); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; color: var(--mk-czerwien); } .mpai-start-krok-tytul { margin-top: 12px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--mk-grafit); } .mpai-ekran-wejscie .mpai-start-krok p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--mk-szary); } .mpai-ekran-wejscie .mpai-start-krok p.mpai-start-krok-mocno { margin-top: 9px; font-size: 13.5px; line-height: 1.5; font-weight: 700; color: var(--mk-grafit); } /* Ciemna sekcja o weryfikacji przez ludzi. */ .mpai-start-ciemna { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; align-items: start; margin-top: 20px; padding: 34px 40px; background: var(--mk-grafit); border-radius: 20px; } .mpai-start-ciemna-tytul { margin-top: 18px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: #fff; text-wrap: pretty; } .mpai-ekran-wejscie .mpai-start-ciemna-tekst { max-width: 460px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .72); text-wrap: pretty; } .mpai-start-ciemna-tekst b { color: #fff; } .mpai-start-filary { display: flex; flex-direction: column; gap: 13px; } .mpai-start-filar { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; padding: 17px 19px; } .mpai-start-filar-tytul { display: flex; align-items: center; gap: 9px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: #fff; } .mpai-start-filar-tytul svg { flex-shrink: 0; color: var(--mk-lososiowy); } .mpai-ekran-wejscie .mpai-start-filar p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .66); } .mpai-input { width: 100%; font: inherit; font-size: 16px; color: var(--mpai-ink); background: var(--mpai-card); border: 1px solid var(--mpai-line2); border-radius: 12px; padding: 13px 15px; outline: none; } .mpai-input:focus { border-color: var(--mpai-orange); } .mpai-btn { font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: var(--mpai-orange); border: none; border-radius: 12px; padding: 13px 22px; cursor: pointer; white-space: nowrap; transition: background .18s, transform .15s; } .mpai-btn:hover:not(:disabled) { background: var(--mpai-magenta); } .mpai-btn:disabled { opacity: .45; cursor: not-allowed; } .mpai-btn-wtorny { background: var(--mpai-ink); } .mpai-link { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mpai-muted); background: none; border: none; padding: 8px 0; margin-top: 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .mpai-link:hover:not(:disabled) { color: var(--mpai-orange); } /* Wymiana i cofniecie karty, ktora wlasnie rysuje wizualizacje. */ .mpai-link:disabled { opacity: .45; cursor: not-allowed; } .mpai-blad { margin-top: 14px; background: #FBE9E4; border: 1px solid #F1C6BA; color: #9A3412; border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.45; text-align: left; } /* ---------- ladowanie ---------- */ .mpai-ekran-ladowanie { text-align: center; padding: 72px 0; } .mpai-orb { width: 56px; height: 56px; border-radius: 50%; background: var(--mpai-orange); margin: 0 auto 24px; animation: mpai-orb 1.7s ease-in-out infinite; } .mpai-kroki { list-style: none; margin: 0 auto; padding: 0; display: inline-flex; flex-direction: column; gap: 14px; text-align: left; } .mpai-krok { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--mpai-faint); margin: 0; transition: color .25s ease; } /* Dwuwierszowy krok: nazwa czynnosci i dopowiedzenie mniejsza czcionka. */ .mpai-krok-opis { display: flex; flex-direction: column; gap: 2px; } .mpai-krok-pod { font-size: 13px; font-weight: 400; color: var(--mpai-faint); } .mpai-krok.is-aktywny { color: var(--mpai-ink); font-weight: 600; } .mpai-krok.is-aktywny .mpai-krok-pod { color: var(--mpai-muted); } .mpai-krok.is-gotowy { color: var(--mpai-sub); } /* Znacznik: pusty krazek gdy krok czeka, pierscien w ruchu gdy trwa, ptaszek gdy gotowy. */ .mpai-krok-znak { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mpai-line2); position: relative; } .mpai-krok.is-aktywny .mpai-krok-znak { border-color: var(--mpai-line2); border-top-color: var(--mpai-orange); animation: mpai-obrot .8s linear infinite; } .mpai-krok.is-gotowy .mpai-krok-znak { border-color: var(--mpai-orange); background: var(--mpai-orange); } .mpai-krok.is-gotowy .mpai-krok-znak::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @keyframes mpai-obrot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mpai-krok.is-aktywny .mpai-krok-znak { animation: none; } .mpai-orb { animation: none; } } /* ---------- pytanie Marka ---------- */ /* Gdy Marek pyta, wszystko inne w ekranie wynikow schodzi z drogi. Blok analizy zostaje, bo to on uzasadnia, skad w ogole to pytanie. */ .mpai-ekran-wyniki.is-pyta .mpai-naglowek-wynikow, .mpai-ekran-wyniki.is-pyta .mpai-karty, .mpai-ekran-wyniki.is-pyta .mpai-korekta, .mpai-ekran-wyniki.is-pyta .mpai-dobor-trwa { display: none; } .mpai-pytanie { background: var(--mpai-card); border: 1px solid var(--mpai-line); border-radius: 20px; padding: 30px 32px; box-shadow: 0 20px 50px -40px rgba(32, 26, 21, .5); animation: mpai-rise .45s both; } /* Karta jest pelnej szerokosci, jak blok analizy nad nia, ale sam tekst trzymamy w tej samej kolumnie co opis firmy - inaczej zdania robia sie za dlugie do czytania. */ .mpai-pytanie-says { font-size: 16px; line-height: 1.6; color: var(--mpai-sub); max-width: 700px; margin: 0 0 10px; } .mpai-pytanie-tekst { font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.35; color: var(--mpai-ink); max-width: 700px; margin: 0 0 22px; } .mpai-pytanie-opcje { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .mpai-opcja { font: inherit; font-size: 15px; font-weight: 600; color: var(--mpai-ink); background: var(--mpai-panel); border: 1px solid var(--mpai-line2); border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: border-color .18s ease, transform .18s ease; } .mpai-opcja:hover { border-color: var(--mpai-orange); transform: translateY(-1px); } /* Odpowiedziane pytanie zwija sie do jednej linijki i zostaje nad kartami, zeby klient widzial, skad wzialy sie akurat te produkty. */ .mpai-ustalenie { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mpai-sub); background: var(--mpai-panel); border: 1px solid var(--mpai-line); border-radius: 999px; padding: 8px 16px; margin-bottom: 22px; } .mpai-ustalenie::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--mpai-orange); } /* ---------- dobor w toku ---------- */ .mpai-dobor-trwa { display: none; } .mpai-ekran-wyniki.is-czeka .mpai-dobor-trwa { display: block; } /* Siatka kart zostaje widoczna przez caly czas - to na niej leza rewersy. */ .mpai-ekran-wyniki.is-czeka .mpai-naglowek-wynikow, .mpai-ekran-wyniki.is-czeka .mpai-korekta { display: none; } /* ---------- wymiana pojedynczej karty ---------- */ /* Trzecia akcja karty, pod przyciskiem "Wygeneruj projekt". Celowo cichsza od nich: to wyjscie awaryjne, nie glowna sciezka. */ /* * Selektor scope'owany klasa .mpai plus !important, tak jak przy naglowkach wyzej. * * Avada styluje przyciski regula w rodzaju ".fusion-body button", czyli klasa plus typ, * co bije nasz pojedynczy selektor klasowy niezaleznie od kolejnosci w pliku. Bez tego * przycisk zostawal pogrubiony po motywie, a wymuszony display: inline-block kasowal * odstep miedzy krzyzykiem a tekstem, bo gap dziala tylko w kontenerze flex. */ /* Wiersz akcji karty. Wysrodkowanie zeszlo z przyciskow na kontener, bo od chwili, gdy jest ich dwa, kazdy musi zajmowac tyle miejsca, ile potrzebuje. */ .mpai .mpai-karta-akcje { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; } .mpai .mpai-btn-wymien, .mpai .mpai-btn-cofnij { display: inline-flex !important; align-items: center; justify-content: center; width: auto; gap: 5px; margin: 0; padding: 0; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: .01em; text-transform: none !important; color: var(--mpai-faint) !important; text-decoration: none; border-bottom: 0; } .mpai .mpai-btn-wymien svg, .mpai .mpai-btn-cofnij svg { flex: none; opacity: .75; } .mpai .mpai-btn-wymien:hover, .mpai .mpai-btn-cofnij:hover { color: var(--mpai-orange) !important; } .mpai .mpai-btn-wymien:hover svg, .mpai .mpai-btn-cofnij:hover svg { opacity: 1; } /* Cofniecie jest akcja ratunkowa, wiec ma byc widoczne od razu - stad kolor akcentu zamiast wyblaklego szarego, ktorym chodzi wymiana. */ .mpai .mpai-btn-cofnij { color: var(--mpai-orange) !important; } .mpai .mpai-karta-akcje-sep { font-size: 12px; line-height: 1; color: var(--mpai-faint); opacity: .45; } /* Domyslny stan kazdej swiezo zbudowanej karty. Cofniecie odslania dopiero odpowiedz serwera, i tylko na tej karcie, ktora naprawde ma do czego wracac. */ .mpai .mpai-karta-akcje.is-bez-cofania .mpai-btn-cofnij, .mpai .mpai-karta-akcje.is-bez-cofania .mpai-karta-akcje-sep { display: none !important; } /* Limit przeliczen wyczerpany: chowamy obie drogi do kolejnej zmiany i mowimy dlaczego. */ .mpai-limit-info { display: none; margin-top: 26px; font-size: 14px; color: var(--mpai-muted); } /* Blad wymiany karty MUSI byc widoczny niezaleznie od pola korekty, bo ono potrafi byc ukryte po wyczerpaniu limitu - a wtedy odmowa znikala bez sladu i wygladalo to jak podmiana na ten sam produkt. */ .mpai-karty-blad { margin: 0 0 18px; padding: 12px 16px; font-size: 14px; color: var(--mpai-magenta); background: var(--mpai-panel); border: 1px dashed var(--mpai-line2); border-radius: 14px; } /* Dwa niezalezne wyczerpania. Podmiany karty moga sie skonczyc wczesniej niz mozliwosc przeliczenia calej trojki, i odwrotnie. */ /* Musi przebic display: inline-flex !important z reguly wyzej. Kreska znika razem z wymiana, inaczej zostawalaby wisiec przed samotnym "Cofnij". */ .mpai .mpai-ekran-wyniki.is-bez-wymian .mpai-btn-wymien, .mpai .mpai-ekran-wyniki.is-bez-wymian .mpai-karta-akcje-sep { display: none !important; } .mpai-ekran-wyniki.is-bez-zmian .mpai-korekta { display: none; } /* Wystarczy samo wyczerpanie przeliczen: to ono chowa pole uwag, wiec to ono musi w zamian pokazac wyjasnienie. Wczesniej wymagane byly obie klasy naraz i przy limicie rownym 1 pole znikalo bez sladu. */ .mpai-ekran-wyniki.is-bez-zmian .mpai-limit-info { display: block; } /* Przycisk udajacy link wewnatrz zdania - bez wlasnej linii i bez marginesow. */ .mpai .mpai-link-w-tekscie { display: inline !important; padding: 0; margin: 0; font: inherit !important; color: var(--mpai-orange) !important; text-decoration: underline; text-transform: none !important; } .mpai-dobor-status { font-size: 16px; font-weight: 600; color: var(--mpai-ink); margin: 0 0 20px; } /* ---------- karta odwracana ---------- */ /* * Rewers i awers leza jeden na drugim, wiec kontener nie ma wysokosci sam z siebie. * Rozwiazujemy to tak: DOPOKI szukamy, rewers jest w normalnym przeplywie i to ON nadaje * karcie wysokosc. Jego kwadratowa plansza odwzorowuje kadr zdjecia, ktory ma * aspect-ratio 1/1, wiec wysokosc skaluje sie z szerokoscia kolumny dokladnie tak samo * jak przy gotowej karcie. Po odkryciu rewers idzie na pozycje absolutna, a wysokosc * przejmuje prawdziwa karta. */ .mpai-karta-flip { position: relative; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .7, .3, 1); } /* * Perspektywa podana w samym transformie, a nie na siatce. Wspolna perspektywa dla * calego rzedu sprawia, ze karty z brzegu obracaja sie skosem, jakby patrzec na nie * z ukosa. Tak kazda karta ma wlasny punkt widzenia i wszystkie obracaja sie tak samo. */ .mpai-karta-flip.is-odkryta { transform: perspective(1400px) rotateY(180deg); } /* Siatka rozciaga wszystkie karty w rzedzie do najwyzszej, wiec awers musi wypelnic kontener - inaczej po obrocie bylby nizszy niz rewers, ktory lezy na inset: 0. */ .mpai-karta-flip .mpai-karta { height: 100%; } .mpai-karta-rewers { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--mpai-line); border-radius: 20px; background: var(--mpai-panel); overflow: hidden; } .mpai-karta-flip.is-czeka .mpai-karta-rewers { position: relative; } /* Awers jest odwrocony tylem, zeby po obrocie kontenera stanal przodem do widza. */ .mpai-karta-flip .mpai-karta { transform: rotateY(180deg); backface-visibility: hidden; animation: none; } .mpai-rewers-plansza { aspect-ratio: 1 / 1; border-bottom: 1px solid var(--mpai-line); background: linear-gradient(110deg, var(--mpai-panel) 30%, var(--mpai-line) 50%, var(--mpai-panel) 70%); background-size: 300% 100%; animation: mpai-omiatanie 1.6s ease-in-out infinite; } .mpai-rewers-stopka { height: 168px; display: flex; align-items: center; justify-content: center; gap: 7px; } .mpai-rewers-stopka span { width: 8px; height: 8px; border-radius: 50%; background: var(--mpai-faint); animation: mpai-puls 1.2s ease-in-out infinite; } .mpai-rewers-stopka span:nth-child(2) { animation-delay: .16s; } .mpai-rewers-stopka span:nth-child(3) { animation-delay: .32s; } @keyframes mpai-omiatanie { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } @keyframes mpai-puls { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } /* * Bez animacji: zadnego obrotu ani omiatania. Karta po prostu sie pojawia, * a rewers znika, bo obracanie w 3D jest dokladnie tym rodzajem ruchu, * ktory to ustawienie ma wylaczac. */ @media (prefers-reduced-motion: reduce) { .mpai-karta-flip, .mpai-karta-flip.is-odkryta { transform: none; transition: none; } .mpai-karta-flip .mpai-karta { transform: none; } .mpai-karta-flip.is-odkryta .mpai-karta-rewers { display: none; } .mpai-rewers-plansza, .mpai-rewers-stopka span { animation: none; } } .mpai-korekta-blad { margin-top: 12px; font-size: 14px; color: var(--mpai-magenta); } .mpai-ikona { vertical-align: -2px; margin-right: 7px; } /* ---------- konkurencja ---------- */ .mpai-ekran-konkurencja { padding: 8px 0 24px; } .mpai-konkurencja-karta { background: var(--mpai-card); border: 1px solid var(--mpai-line); border-radius: 20px; padding: 34px 36px; max-width: 720px; box-shadow: 0 20px 50px -40px rgba(32, 26, 21, .5); } .mpai-konkurencja-tresc { font-size: 17px; line-height: 1.65; color: var(--mpai-ink); margin: 0 0 18px; } /* ---------- karta analizy ---------- */ .mpai-analiza { background: var(--mpai-card); border: 1px solid var(--mpai-line); border-radius: 20px; padding: 30px 32px; margin-bottom: 34px; display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; box-shadow: 0 20px 50px -40px rgba(32, 26, 21, .5); } .mpai-analiza-glowna { flex: 1; min-width: 0; max-width: 700px; } .mpai-eyebrow { display: block; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--mpai-orange) !important; margin-bottom: 12px; } .mpai-analiza-firma { font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--mpai-ink) !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: none !important; } .mpai-analiza-branza { font-size: 15.5px !important; font-weight: 600 !important; color: var(--mpai-brown) !important; margin: 0 0 16px !important; } .mpai-analiza-opis { font-size: 17px !important; line-height: 1.55 !important; color: var(--mpai-sub) !important; margin: 0 !important; } .mpai-analiza-boczna { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; } .mpai-analiza-ton { text-align: right; } /* * Kafelek logo urosl z ramki na obrazek do malego panelu: obrazek, adnotacja skad go mamy * i mozliwosc podmiany. Dlatego kolumna zamiast wysrodkowania i wysokosc z tresci * zamiast sztywnych 60 px. */ .mpai-analiza-logo { width: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: #fff; border: 1px solid var(--mpai-line); border-radius: 12px; padding: 10px 12px; } .mpai-analiza-logo img { max-width: 100%; max-height: 52px; object-fit: contain; display: block; align-self: center; } /* * Wybor logo na ekranie startowym, przy opisie dzialalnosci. Celowo cichy: to jest * dodatek, a nie warunek - klient bez pliku pod reka ma isc dalej bez poczucia braku. */ .mpai-opis-logo { margin: -2px 0 10px; } .mpai-opis-logo-strefa { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; width: 100%; padding: 12px 14px; font: inherit; font-size: 13px; color: var(--mpai-sub); text-align: center; background: var(--mpai-panel); border: 1px dashed var(--mpai-line2); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .mpai-opis-logo-strefa:hover { border-color: var(--mpai-orange); color: var(--mpai-ink); } /* Stan przeciagania. Bez wyraznej zmiany klient nie wie, czy moze puscic. */ .mpai-opis-logo-strefa.is-nad { border-color: var(--mpai-orange); border-style: solid; background: #fff; color: var(--mpai-ink); } .mpai-opis-logo-podglad { max-height: 28px; max-width: 90px; object-fit: contain; background: #fff; border-radius: 4px; } .mpai-opis-logo-nazwa { font-size: 12px; font-weight: 600; color: var(--mpai-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; } .mpai-opis-logo-dopisek { font-size: 11px; color: var(--mpai-faint); } /* * Podpis i akcje pod logo - drobne i wyszrodkowane. Kafelek ma przede wszystkim pokazac * logo; tekstu jest tu tyle, ile trzeba, zeby klient wiedzial, skad je mamy i jak podmienic. */ .mpai-logo-podpis { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--mpai-sub); text-align: center; } .mpai-logo-akcje { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; text-align: center; } .mpai-logo-pytanie { font-size: 10.5px; line-height: 1.35; color: var(--mpai-sub); } .mpai-logo-wgraj, .mpai-logo-odrzuc, .mpai-logo-brak { font-size: 10.5px; font-weight: 600; color: var(--mpai-orange); background: none; border: 0; padding: 0; text-align: center; cursor: pointer; text-decoration: underline; } .mpai-logo-odrzuc, .mpai-logo-brak { color: var(--mpai-muted); } .mpai-logo-wgraj:hover, .mpai-logo-odrzuc:hover, .mpai-logo-brak:hover { opacity: .75; } .mpai-logo-status { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--mpai-ink); text-align: center; } .mpai-analiza-ton-etykieta { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mpai-faint); margin-bottom: 10px; } .mpai-tony { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .mpai-ton { font-size: 13.5px; font-weight: 600; color: #7A4A2B; background: #F0E4D2; border: 1px solid #E4D3BC; padding: 6px 13px; border-radius: 999px; white-space: nowrap; } /* ---------- naglowek listy ---------- */ .mpai-naglowek-wynikow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .mpai-liczba-produktow { font-size: clamp(20px, 2.4vw, 27px) !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--mpai-ink) !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } .mpai-naglowek-wynikow .mpai-link { margin-top: 0; } .mpai-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .mpai-karta { background: var(--mpai-card); border: 1px solid var(--mpai-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; animation: mpai-pop .5s both; box-shadow: 0 20px 50px -40px rgba(32, 26, 21, .55); } /* * Zdjecia produktowe maja bardzo rozna temperature barwowa (ciepla kawa na drewnie, * zimny blekit zawieszki, chlodna stal magnesow). Neutralne tlo i wyrazna ramka * sprawiaja, ze trzy rozne swiaty obok siebie nie zlewaja sie w kase. */ .mpai-karta-media { position: relative; aspect-ratio: 1 / 1; background: var(--mpai-panel); border-bottom: 1px solid var(--mpai-line); overflow: hidden; } .mpai-karta-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * Rysowanie wizualizacji. * * Zdjecie produktu zostaje widoczne i tylko przygasa - to jest stan przejsciowy, a nie * ladowanie od zera. Gdyby zamiast tego pojawil sie pusty prostokat, karta migalaby * dziura za kazdym razem, gdy klient ja odslania. */ .mpai-karta-media.is-rysuje img { opacity: .45; filter: saturate( .6 ); } .mpai-karta-media.is-rysuje::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 100deg, transparent 20%, rgba( 255, 255, 255, .55 ) 50%, transparent 80% ); background-size: 220% 100%; animation: mpai-omiatanie 1.5s linear infinite; pointer-events: none; } /* Przejscie ze zdjecia na wizualizacje. Bez tego obraz wskakuje twardo. */ .mpai-karta-media img { transition: opacity .35s ease, filter .35s ease; } .mpai-karta-media.ma-wizualizacje img { opacity: 1; filter: none; } .mpai-karta-media.is-pusta::after { content: "brak zdjęcia"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--mpai-faint); } .mpai-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7A2B3F; background: rgba(255, 255, 255, .92); padding: 5px 10px; border-radius: 7px; } /* Plakietka "Wizualizacja AI" - prawy gorny rog, naprzeciw "Najlepsze dopasowanie". */ .mpai-badge-ai { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--mpai-sub); background: rgba(255, 255, 255, .92); padding: 5px 10px; border-radius: 7px; } .mpai-badge-ai::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--mpai-orange); } /* Podpis w trakcie rysowania. Nad omiataniem, zeby nie zgubil sie w jasnej smudze. */ .mpai-wiz-status { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); max-width: calc(100% - 24px); text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mpai-ink); background: rgba(255, 255, 255, .94); padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } /* Pasek postepu pod podpisem. Wezszy niz kadr, zeby nie udawal paska ladowania strony. */ .mpai-wiz-pasek { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); width: 60%; max-width: 180px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .mpai-wiz-pasek i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--mpai-orange); transition: width .9s linear; } .mpai-karta-media.ma-wizualizacje img { cursor: zoom-in; } /* * Powiekszenie wizualizacji. * * Warstwa siedzi w , wiec nie dziedziczy zmiennych spod .mpai - kolory sa tu * wpisane wprost i tak ma zostac. */ .mpai-lupa { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 16, 13, .88); cursor: zoom-out; } .mpai-lupa img { max-width: min(1100px, 96vw); max-height: 92vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default; } .mpai-lupa-zamknij { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; font-size: 26px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; cursor: pointer; } .mpai-lupa-zamknij:hover { background: rgba(255, 255, 255, .26); } .mpai-karta-tresc { padding: 20px; display: flex; flex-direction: column; flex: 1; } /* * Typografia wymuszana z !important. * * Avada nadpisuje naglowki wlasnymi selektorami i inline CSS z Theme Options, przez co * nazwa produktu renderowala sie jasnoszara i cienka mimo font-weight: 700. Brzydkie, * ale to jedyna rzecz, ktora pewnie wygra z motywem wstrzykujacym styl inline. */ .mpai-karta-nazwa { font-size: 21px !important; font-weight: 800 !important; line-height: 1.22 !important; letter-spacing: -.015em; color: var(--mpai-ink) !important; margin: 0 0 10px !important; padding: 0 !important; text-transform: none !important; } .mpai-karta-meta { font-size: 12.5px !important; color: var(--mpai-muted) !important; margin: 0 0 10px !important; } .mpai-karta-powod { font-size: 15px !important; line-height: 1.58 !important; color: var(--mpai-sub) !important; margin: 0 0 18px !important; } .mpai-karta-stopka { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .mpai-btn-projekt { font-size: 13.5px; padding: 9px 15px; } /* "Podoba mi sie" i "Mam uwagi" - pojawiaja sie w miejscu "Wygeneruj projekt", gdy karta ma wizualizacje. */ .mpai-karta-stopka .mpai-btn-podoba, .mpai-karta-stopka .mpai-btn-uwagi { flex: 1 1 auto; } /* ---------- korekta ---------- */ .mpai-korekta { margin-top: 30px; padding: 20px; background: var(--mpai-panel); border: 1px dashed var(--mpai-line2); border-radius: 16px; } .mpai-korekta-pytanie { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--mpai-brown); } .mpai-korekta-pole { display: flex; gap: 10px; flex-wrap: wrap; } .mpai-korekta-pole .mpai-input { flex: 1; min-width: 220px; background: var(--mpai-card); } @media (max-width: 860px) { .mpai-analiza { flex-direction: column; gap: 22px; padding: 24px 22px; } .mpai-analiza-boczna { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 16px; flex-wrap: wrap; } .mpai-analiza-ton { text-align: left; } .mpai-tony { justify-content: flex-start; } } @media (max-width: 640px) { /* Ekran startowy w jednej kolumnie: przycisk pod polem adresu, kafelki jeden pod drugim. */ .mpai-start { padding: 26px 20px 24px; } .mpai-start-gora .mpai-pigulka { margin-left: 0; } .mpai-pole-url { flex-direction: column; } .mpai-url-ramka { min-width: 0; } .mpai-ekran-wejscie .mpai-btn, .mpai-ekran-wejscie .mpai-pole-opis .mpai-btn { width: 100%; } .mpai-start-ciemna { padding: 26px 22px; } .mpai-start-ciemna-tytul { font-size: 25px; } } /* ---------- okienko "Wygeneruj projekt" ---------- */ /* Warstwa nad calym doradca, nie kolejny krok przeplywu - stad fixed i wlasny stos. */ .mpai-modal { position: fixed; inset: 0; /* Avada trzyma w tej samej skali elementy siegajace 999999 i wyzej. Przeniesienie okienka do zalatwia kontekst ukladania, a ta liczba - sasiadow w nim. */ z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 20px; } .mpai-modal[hidden] { display: none; } /* Blokada przewijania tla. Bez tego dotkniecie poza okienkiem przewija strone pod spodem i klient gubi formularz w polowie wypelniania. */ body.mpai-modal-otwarty { overflow: hidden; } .mpai-modal-tlo { position: absolute; inset: 0; background: rgba(17, 17, 17, .55); backdrop-filter: blur(2px); } .mpai-modal-okno { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); padding: 30px 30px 26px; overflow-y: auto; background: var(--mpai-bg, #fff); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); } .mpai-modal-x { position: absolute; top: 12px; right: 14px; padding: 4px 8px; font-size: 22px; line-height: 1; color: var(--mpai-faint); cursor: pointer; background: none; border: 0; } .mpai-modal-x:hover { color: var(--mpai-ink); } .mpai-modal-produkt { margin: 0 0 20px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--mpai-ink); background: var(--mpai-panel); border-radius: 6px; } .mpai-modal-pole { display: block; margin-bottom: 14px; font-size: 13px; color: var(--mpai-muted); } .mpai-modal-pole .mpai-input { display: block; width: 100%; margin-top: 5px; } .mpai-modal-pole input[type="file"] { padding: 8px; font-size: 13px; } /* Delikatne wyjasnienie pod polem, np. po co nam imie. */ .mpai-modal-podpowiedz { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--mpai-muted); } /* Znalezione albo wgrane logo w okienku "Wygeneruj projekt" - zamiast pustego pola pliku. */ .mpai-modal-logo { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .mpai-modal-logo img { max-width: 120px; max-height: 48px; padding: 4px; background: #fff; border: 1px solid var(--mpai-line2); border-radius: 6px; } .mpai-modal-logo .mpai-link { margin-top: 0; padding: 0; font-size: 13px; } .mpai-modal-blad { margin: 0 0 14px; padding: 10px 14px; font-size: 13px; color: var(--mpai-magenta); background: var(--mpai-panel); border-radius: 6px; } .mpai-modal-wyslij { width: 100%; } .mpai-modal-sukces-tekst { margin: 0 0 18px; font-size: 15px; color: var(--mpai-ink); } /* Trwa zmiana karty. Pozostale przyciski wymiany gasna i przestaja reagowac, zeby klient nie zdazyl uruchomic drugiej zmiany w trakcie pierwszej. */ .mpai .mpai-ekran-wyniki.is-w-trakcie .mpai-btn-wymien, .mpai .mpai-ekran-wyniki.is-w-trakcie .mpai-btn-cofnij { pointer-events: none; opacity: .35; } /* --------------------------------------------------------------------------- Formularz projektu na stronie produktu. Uklad i wyglad jak w dotychczasowym CF7: zdjecie po lewej, formularz po prawej, pola w ramkach z etykieta wpieta w gorna krawedz, obszar "przeciagnij i upusc" w paski. Po wygenerowaniu projekt wchodzi w miejsce zdjecia, a formularz ustepuje miejsca dwom przyciskom - klient caly czas patrzy w to samo miejsce. Kolory trzymamy osobno od palety doradcy, bo formularz stoi na stronie produktu, miedzy elementami Avady, a nie na bezowym tle doradcy. --------------------------------------------------------------------------- */ .mpai-produkt { --mpai-f-ramka: #D9DADA; --mpai-f-tlo: #FFFFFF; --mpai-f-tekst: #1A1A1A; --mpai-f-szary: #6B7280; } .mpai-produkt-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } @media (max-width: 860px) { .mpai-produkt-kolumny { grid-template-columns: 1fr; gap: 20px; } } .mpai-produkt-obraz { position: relative; } .mpai-produkt-zdjecie { display: block; width: 100%; height: auto; border-radius: 14px; } .mpai-produkt-praca { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; background: rgba(255, 255, 255, .88); border-radius: 14px; text-align: center; } .mpai-produkt-praca-tekst { margin: 0; font-weight: 600; color: var(--mpai-f-szary); } .mpai-produkt-naglowek { margin: 0 0 18px; font-size: 22px; line-height: 1.25; color: var(--mpai-f-tekst); } .mpai-produkt-formularz { display: flex; flex-direction: column; gap: 20px; } /* Pole w ramce z etykieta wpieta w gorna krawedz - tak jak na stronie produktu. */ .mpai-produkt-pole { position: relative; } .mpai-produkt-etykieta { position: absolute; top: -9px; left: 12px; z-index: 2; padding: 0 6px; background: var(--mpai-f-tlo); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--mpai-f-tekst); } .mpai-produkt-formularz .mpai-input, .mpai-produkt-formularz textarea.mpai-input, .mpai-produkt-formularz select.mpai-input { width: 100%; padding: 14px 15px; background: var(--mpai-f-tlo); border: 1px solid var(--mpai-f-ramka); border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--mpai-f-tekst); } .mpai-produkt-formularz textarea.mpai-input { min-height: 120px; resize: vertical; } .mpai-produkt-formularz .mpai-input:focus { outline: none; border-color: var(--mpai-orange); } .mpai-produkt-formularz .mpai-input::placeholder { color: var(--mpai-f-szary); } /* Wiersze z ptaszkiem stoja poza ramkami, jak w CF7. */ .mpai-produkt-ptaszek label.mpai-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--mpai-f-tekst); } .mpai-produkt-plik > label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--mpai-f-tekst); } .mpai-produkt-opcjonalnie { font-weight: 400; color: var(--mpai-f-szary); } .mpai-produkt-podpowiedz { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--mpai-f-szary); } /* Obszar "przeciagnij i upusc" - w paski, jak uploader na stronie produktu. */ .mpai-produkt-dropzone { padding: 24px; background: repeating-linear-gradient(45deg, rgba(60, 60, 60, .06) 0 12px, transparent 12px 24px), #FDFDFD; border: 1.5px dashed var(--mpai-f-ramka); border-radius: 14px; text-align: center; transition: border-color .2s, background .2s; } .mpai-produkt-dropzone.is-nad { border-color: var(--mpai-orange); background: repeating-linear-gradient(45deg, rgba(229, 86, 31, .10) 0 12px, transparent 12px 24px), #FFF9F6; } .mpai-produkt-dropzone strong { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 600; color: var(--mpai-f-tekst); } .mpai-produkt-lub { display: block; margin-bottom: 12px; font-size: 14px; color: var(--mpai-f-szary); } .mpai-produkt-wybierz { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--mpai-f-tlo); border: 1px solid var(--mpai-f-ramka); border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--mpai-f-tekst); cursor: pointer; } .mpai-produkt-wybierz:hover { border-color: var(--mpai-orange); color: var(--mpai-orange); } .mpai-produkt-licznik { display: block; margin-top: 12px; font-size: 12px; color: var(--mpai-f-szary); } .mpai-produkt-lista { margin: 10px 0 0; padding: 0; list-style: none; } .mpai-produkt-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 8px 12px; background: var(--mpai-f-tlo); border: 1px solid var(--mpai-f-ramka); border-radius: 8px; font-size: 13px; word-break: break-all; } .mpai-produkt-usun { flex: 0 0 auto; padding: 0 4px; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--mpai-f-szary); cursor: pointer; } .mpai-produkt-usun:hover { color: var(--mpai-orange); } /* Przy dzialajacym JavaScripcie surowe pole pliku jest juz niepotrzebne. */ .mpai-produkt-js .mpai-produkt-logo { display: none; } .mpai-produkt-blad { padding: 10px 12px; background: #FDEDE8; border-radius: 8px; font-size: 13px; color: #9B2C10; } .mpai-produkt-wysylka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .mpai-produkt-dopisek { font-size: 14px; line-height: 1.4; color: var(--mpai-f-tekst); } .mpai-produkt-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .mpai-produkt-status { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--mpai-f-szary); } /* Czekanie na projekt: kula, opis kroku, pasek postępu i licznik sekund. */ .mpai-produkt-praca .mpai-orb { margin: 0 auto 18px; } .mpai-produkt-pasek { width: min(260px, 70%); height: 6px; margin: 14px auto 0; background: rgba(0, 0, 0, .08); border-radius: 999px; overflow: hidden; } .mpai-produkt-pasek span { display: block; width: 0; height: 100%; background: var(--mpai-orange); border-radius: 999px; transition: width .9s linear; } .mpai-produkt-czas { margin: 10px 0 0; font-size: 13px; color: var(--mpai-f-szary); } .mpai-produkt-sekundy { font-weight: 600; } .mpai-produkt-info { display: block; margin-top: 2px; font-size: 12px; } /* --------------------------------------------------------------------------- Po wysłaniu formularza cała scena przenosi się na środek: formularz znika, a projekt, komunikat i przyciski stoją w jednej kolumnie. Obraz jest wtedy wyraźnie większy, bo nie dzieli już miejsca z polami. --------------------------------------------------------------------------- */ .mpai-produkt-pracuje .mpai-produkt-panel, .mpai-produkt-gotowe .mpai-produkt-panel { display: none; } .mpai-produkt-pracuje .mpai-produkt-kolumny, .mpai-produkt-gotowe .mpai-produkt-kolumny { grid-template-columns: 1fr; justify-items: center; } .mpai-produkt-pracuje .mpai-produkt-obraz, .mpai-produkt-gotowe .mpai-produkt-obraz { width: 100%; max-width: 680px; } .mpai-produkt-ramka { position: relative; } .mpai-produkt-komunikat { margin: 0 0 14px; font-size: 18px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--mpai-f-tekst); } .mpai-produkt-akcje { justify-content: center; } .mpai-produkt-status { text-align: center; } /* Podziekowanie po zgloszeniu bez wizualizacji. Stoi pod formularzem, tak jak komunikat dotychczasowego formularza na stronie produktu - klient widzi, ze zgloszenie doszlo, i nie szuka wzrokiem obrazka, ktorego nie bedzie. --------------------------------------------------------------------------- */ .mpai-produkt-dziekujemy { margin-top: 16px; padding: 14px 16px; background: #EDF7ED; border: 1px solid #BFE0BF; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #1E4620; } /* Notka o zapamiętanych danych klienta i wiersz o logu z poprzedniego zgłoszenia. Celowo cicha - to informacja, nie ostrzeżenie. Odnośnik "Chcę podać inne dane" jest przyciskiem, bo nigdzie nie prowadzi, ale ma wyglądać jak zwykły link. --------------------------------------------------------------------------- */ .mpai-produkt-pamiec { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mpai-f-szary); } .mpai-produkt-zapomnij { padding: 0; background: none; border: 0; font: inherit; color: var(--mpai-orange); text-decoration: underline; cursor: pointer; } .mpai-produkt-logo-pamiec { margin-top: 10px; padding: 10px 12px; background: var(--mpai-f-tlo); border: 1px solid var(--mpai-f-ramka); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--mpai-f-szary); } .mpai-produkt-logo-pamiec strong { color: var(--mpai-f-tekst); word-break: break-all; } /* Pole z błędnym numerem telefonu - obwódka zamiast samego komunikatu. */ .mpai-produkt-formularz .mpai-input.mpai-produkt-zle { border-color: #C0392B; } /* Notka o zapamiętanych danych w okienku zgłoszenia u doradcy. */ .mpai-modal-pamiec { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mpai-muted); } .mpai-modal-zapomnij { padding: 0; background: none; border: 0; font: inherit; color: var(--mpai-orange); text-decoration: underline; cursor: pointer; }