dodanie poradnika
This commit is contained in:
+694
-13
@@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
|
||||
const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
|
||||
const SMS_VERIFICATION_CODE = '123456';
|
||||
|
||||
type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
|
||||
type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
|
||||
|
||||
type MessageThreadListing = {
|
||||
listingId: number;
|
||||
@@ -3413,7 +3413,8 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
{view === 'services' && <ServicesPage />}
|
||||
{view === 'guides' && <GuidesPage />}
|
||||
{view === 'guides' && <GuidesPage onNavigate={navigate} />}
|
||||
{view === 'guideBuying' && <GuideBuyingPage onNavigate={navigate} />}
|
||||
{view === 'map' && <MapSearchPage initialCity={mapCity} offerType={mapOfferType} onNavigate={navigate} />}
|
||||
{view === 'home' && <HomePage onNavigate={navigate} filters={filters} onOpenMap={openMap} />}
|
||||
</main>
|
||||
@@ -12292,7 +12293,668 @@ function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
|
||||
);
|
||||
}
|
||||
|
||||
function GuidesPage() {
|
||||
const buyingProcessSteps = [
|
||||
{ icon: 'search', title: 'Analiza potrzeb i możliwości', text: 'Określ, po co kupujesz i na co Cię stać.' },
|
||||
{ icon: 'calculator', title: 'Określenie budżetu', text: 'Policz cenę plus wszystkie koszty dodatkowe.' },
|
||||
{ icon: 'chart', title: 'Sprawdzenie zdolności', text: 'Zbadaj zdolność kredytową w kilku bankach.' },
|
||||
{ icon: 'pin', title: 'Wybór i analiza lokalizacji', text: 'Sprawdź okolicę, dojazdy i plany zagospodarowania.' },
|
||||
{ icon: 'eye', title: 'Oglądanie mieszkań', text: 'Odwiedź kilka ofert i porównaj je na spokojnie.' },
|
||||
{ icon: 'group', title: 'Negocjacja ceny', text: 'Ustal realną wartość i wynegocjuj warunki.' },
|
||||
{ icon: 'calendar', title: 'Rezerwacja mieszkania', text: 'Zabezpiecz ofertę umową rezerwacyjną.' },
|
||||
{ icon: 'document', title: 'Umowa przedwstępna', text: 'Spisz warunki i terminy u notariusza lub cywilnie.' },
|
||||
{ icon: 'building', title: 'Kredyt hipoteczny', text: 'Złóż wnioski i wybierz najlepszą ofertę.' },
|
||||
{ icon: 'scale', title: 'Akt notarialny', text: 'Podpisz umowę przenoszącą własność.' },
|
||||
{ icon: 'key', title: 'Odbiór mieszkania', text: 'Sprawdź stan techniczny i spisz protokół.' },
|
||||
{ icon: 'house', title: 'Zameldowanie i formalności', text: 'Przepisz media, ubezpiecz i zamelduj się.' },
|
||||
];
|
||||
|
||||
const buyingToc = [
|
||||
{ id: 'start', label: 'Od czego zacząć?' },
|
||||
{ id: 'budzet', label: 'Jak określić budżet?' },
|
||||
{ id: 'gotowka-kredyt', label: 'Gotówka czy kredyt?' },
|
||||
{ id: 'zdolnosc', label: 'Zdolność kredytowa' },
|
||||
{ id: 'rynek', label: 'Rynek pierwotny czy wtórny?' },
|
||||
{ id: 'lokalizacja', label: 'Wybór lokalizacji' },
|
||||
{ id: 'ogladanie', label: 'Jak oglądać mieszkanie?' },
|
||||
{ id: 'stan-techniczny', label: 'Stan techniczny' },
|
||||
{ id: 'ksiega-wieczysta', label: 'Księga wieczysta' },
|
||||
{ id: 'negocjacje', label: 'Negocjacja ceny' },
|
||||
{ id: 'umowa-przedwstepna', label: 'Umowa przedwstępna' },
|
||||
{ id: 'akt-notarialny', label: 'Akt notarialny' },
|
||||
{ id: 'odbior', label: 'Odbiór mieszkania' },
|
||||
{ id: 'klucze', label: 'Przekazanie kluczy' },
|
||||
{ id: 'bledy', label: 'Najczęstsze błędy' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'podsumowanie', label: 'Podsumowanie' },
|
||||
];
|
||||
|
||||
const buyingCostRows = [
|
||||
{ name: 'Wkład własny', who: 'Kupujący', value: 'zwykle 10–20% ceny', note: 'Im wyższy, tym niższa rata i lepsze warunki kredytu.' },
|
||||
{ name: 'Podatek PCC (rynek wtórny)', who: 'Kupujący', value: '2% wartości', note: 'Zakup pierwszego mieszkania bywa zwolniony z PCC.' },
|
||||
{ name: 'Taksa notarialna', who: 'Kupujący', value: 'zależna od ceny', note: 'Stawki maksymalne są ustalone rozporządzeniem, do negocjacji.' },
|
||||
{ name: 'Wpis do księgi wieczystej', who: 'Kupujący', value: '200 zł + 200 zł', note: 'Wpis własności oraz ewentualnej hipoteki.' },
|
||||
{ name: 'Prowizja pośrednika', who: 'Zależnie od umowy', value: 'zwykle 1–3%', note: 'Tylko jeśli korzystasz z biura nieruchomości.' },
|
||||
{ name: 'Koszty kredytu', who: 'Kredytobiorca', value: 'prowizja, wycena, ubezpieczenia', note: 'Doliczane do finansowania zakupu z banku.' },
|
||||
];
|
||||
|
||||
const buyingChecklist = [
|
||||
'Przeczytaj aktualny odpis z księgi wieczystej i sprawdź dział III i IV.',
|
||||
'Poproś o zaświadczenie o braku zaległości w czynszu i mediach.',
|
||||
'Sprawdź, kto figuruje jako właściciel i czy zgadza się ze sprzedającym.',
|
||||
'Zapytaj o zaległości i plany remontowe wspólnoty lub spółdzielni.',
|
||||
'Obejrzyj mieszkanie za dnia i wieczorem, sprawdź nasłonecznienie.',
|
||||
'Skontroluj instalacje: prąd, wodę, ogrzewanie, wentylację i wilgoć.',
|
||||
'Ustal, co dokładnie wchodzi w cenę (meble, kuchnia, miejsce postojowe).',
|
||||
'Zweryfikuj wysokość czynszu administracyjnego i co obejmuje.',
|
||||
'Sprawdź plan zagospodarowania i co może powstać w okolicy.',
|
||||
'Policz pełny koszt zakupu z podatkami i kredytem, nie tylko cenę.',
|
||||
];
|
||||
|
||||
const buyingMistakes = [
|
||||
{ title: 'Liczenie tylko ceny mieszkania', text: 'Pomijanie podatków, taksy notarialnej, kosztów kredytu i wykończenia potrafi podnieść budżet o kilkanaście procent.' },
|
||||
{ title: 'Pominięcie księgi wieczystej', text: 'Brak sprawdzenia działu III i IV grozi zakupem mieszkania z hipoteką, służebnością lub roszczeniem osoby trzeciej.' },
|
||||
{ title: 'Zakup pod wpływem emocji', text: 'Decyzja po jednym oglądaniu i „bo ktoś inny też jest zainteresowany” to najczęstsza droga do przepłacenia.' },
|
||||
{ title: 'Brak zapasu w budżecie', text: 'Kredyt na maksimum zdolności nie zostawia poduszki na wzrost rat, remont czy nagłe wydatki.' },
|
||||
{ title: 'Zaliczka zamiast zadatku', text: 'Przy zaliczce, jeśli druga strona się wycofa, trudniej dochodzić rekompensaty niż przy zadatku.' },
|
||||
{ title: 'Zignorowanie stanu technicznego', text: 'Ukryta wilgoć, zła instalacja elektryczna czy stare piony to koszty, które ujawniają się dopiero po zakupie.' },
|
||||
];
|
||||
|
||||
const buyingFaq = [
|
||||
{
|
||||
q: 'Ile własnych pieniędzy potrzebuję na start?',
|
||||
a: 'Do kredytu banki oczekują zwykle wkładu własnego na poziomie 10–20% ceny. Do tego dochodzą koszty transakcyjne: podatek, taksa notarialna, wpisy do księgi wieczystej i ewentualna prowizja pośrednika. Bezpiecznie jest założyć, że oprócz wkładu własnego potrzebujesz jeszcze kilku procent ceny na same formalności.',
|
||||
},
|
||||
{
|
||||
q: 'Czy lepiej kupić od dewelopera czy z rynku wtórnego?',
|
||||
a: 'To zależy od Twoich priorytetów. Nowe mieszkanie od dewelopera bywa energooszczędne i objęte gwarancją, ale często wymaga wykończenia i czekania na odbiór. Rynek wtórny to gotowe do zamieszkania lokale w ukształtowanych dzielnicach, za to trzeba dokładniej sprawdzić stan techniczny i stan prawny.',
|
||||
},
|
||||
{
|
||||
q: 'Czy przy zakupie pierwszego mieszkania zapłacę podatek PCC?',
|
||||
a: 'Przy zakupie z rynku wtórnego standardowo obowiązuje podatek 2% od wartości. Dla osób kupujących swoje pierwsze mieszkanie lub dom przewidziano jednak zwolnienie z tego podatku. Zawsze potwierdź aktualne warunki u notariusza, bo to on nalicza i odprowadza PCC.',
|
||||
},
|
||||
{
|
||||
q: 'Jak długo trwa cały proces zakupu?',
|
||||
a: 'Zakup za gotówkę można sfinalizować nawet w kilka tygodni. Z kredytem hipotecznym realny czas to zwykle 1,5–3 miesiące, bo dochodzi analiza wniosku, wycena nieruchomości i decyzja banku. Warto ten czas uwzględnić w umowie przedwstępnej.',
|
||||
},
|
||||
{
|
||||
q: 'Co daje umowa przedwstępna?',
|
||||
a: 'Zabezpiecza obie strony: ustala cenę, termin i warunki finalnej transakcji. Najczęściej towarzyszy jej zadatek. Jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający, zwraca go w podwójnej wysokości. To silniejsze zabezpieczenie niż zwykła zaliczka.',
|
||||
},
|
||||
{
|
||||
q: 'Czy muszę korzystać z pośrednika?',
|
||||
a: 'Nie ma takiego obowiązku. Dobry pośrednik oszczędza czas i pomaga w formalnościach, ale pobiera prowizję. Jeśli kupujesz samodzielnie, tym bardziej zadbaj o weryfikację stanu prawnego i technicznego oraz o dobrze napisane umowy.',
|
||||
},
|
||||
];
|
||||
|
||||
async function downloadBuyingChecklistPdf() {
|
||||
const unwrapModuleDefault = <T,>(module: T | { default: T }): T =>
|
||||
'default' in Object(module) ? (module as { default: T }).default : (module as T);
|
||||
const downloadBlob = (blob: Blob, fileName: string) => {
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = objectUrl;
|
||||
link.download = fileName;
|
||||
link.rel = 'noopener';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||||
};
|
||||
|
||||
type PdfMakeRuntime = {
|
||||
addFontContainer: (fontContainer: unknown) => void;
|
||||
createPdf: (definition: unknown) => { getBlob: () => Promise<Blob> };
|
||||
};
|
||||
|
||||
let pdfMake: PdfMakeRuntime;
|
||||
try {
|
||||
const pdfMakeModule = await import('pdfmake/build/pdfmake.js');
|
||||
const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js');
|
||||
pdfMake = unwrapModuleDefault(pdfMakeModule as unknown as PdfMakeRuntime | { default: PdfMakeRuntime });
|
||||
pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule as unknown as { default: unknown }));
|
||||
} catch (error) {
|
||||
console.error('Nie udało się załadować generatora PDF', error);
|
||||
window.alert('Nie udało się przygotować pliku PDF. Odśwież stronę i spróbuj ponownie.');
|
||||
return;
|
||||
}
|
||||
|
||||
const docDefinition = {
|
||||
pageSize: 'A4',
|
||||
pageMargins: [48, 48, 48, 48],
|
||||
defaultStyle: { font: 'Roboto', color: '#14223a', fontSize: 11, lineHeight: 1.35 },
|
||||
content: [
|
||||
{ text: 'PolskaLokalnie', color: '#0b9f5c', fontSize: 12, bold: true, margin: [0, 0, 0, 2] },
|
||||
{ text: 'Lista kontrolna przy zakupie mieszkania', fontSize: 20, bold: true, margin: [0, 0, 0, 4] },
|
||||
{ text: '10 rzeczy, które warto sprawdzić przed podpisaniem umowy', color: '#526171', margin: [0, 0, 0, 18] },
|
||||
{
|
||||
ol: buyingChecklist.map((item) => ({ text: item, margin: [0, 0, 0, 6] })),
|
||||
},
|
||||
{
|
||||
text: 'Materiał informacyjny. Nie stanowi porady prawnej ani podatkowej – w razie wątpliwości skonsultuj się z notariuszem lub doradcą.',
|
||||
color: '#8793a3',
|
||||
fontSize: 9,
|
||||
margin: [0, 22, 0, 0],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
try {
|
||||
const blob = await pdfMake.createPdf(docDefinition).getBlob();
|
||||
downloadBlob(blob, 'lista-kontrolna-zakup-mieszkania.pdf');
|
||||
} catch (error) {
|
||||
console.error('Nie udało się wygenerować PDF', error);
|
||||
window.alert('Nie udało się wygenerować pliku PDF. Spróbuj ponownie.');
|
||||
}
|
||||
}
|
||||
|
||||
function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
|
||||
const scrollToId = (id: string) => {
|
||||
const target = document.getElementById(id);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="guide-article" aria-label="Poradnik: kupno mieszkania">
|
||||
<header className="guide-hero">
|
||||
<img src={heroImage} alt="" />
|
||||
<div className="guide-hero-shade" />
|
||||
<div className="guides-container guide-hero-inner">
|
||||
<button className="guide-back" onClick={() => onNavigate('guides')}>
|
||||
<Icon name="arrow" />
|
||||
<span>Wróć do poradników</span>
|
||||
</button>
|
||||
<span className="guide-hero-badge">
|
||||
<Icon name="house" />
|
||||
Kupno mieszkania
|
||||
</span>
|
||||
<h1>Jak kupić mieszkanie krok po kroku</h1>
|
||||
<p className="guide-hero-lead">
|
||||
Kompletny, uczciwy przewodnik po całym procesie zakupu – od pierwszej decyzji, przez budżet,
|
||||
kredyt i formalności, aż po odbiór kluczy. Prostym językiem, z listami kontrolnymi i praktycznymi
|
||||
wskazówkami, które pomogą Ci uniknąć najczęstszych błędów.
|
||||
</p>
|
||||
<div className="guide-hero-chips">
|
||||
<span><Icon name="check" /> Aktualna wiedza na 2026 rok</span>
|
||||
<span><Icon name="shield" /> Oparte na sprawdzonych zasadach</span>
|
||||
<span><Icon name="list" /> Listy kontrolne i PDF</span>
|
||||
<span><Icon name="calculator" /> Kalkulatory kosztów</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="guides-container guide-article-layout">
|
||||
<aside className="guide-toc" aria-label="Spis treści">
|
||||
<div className="guide-toc-inner">
|
||||
<h2>Spis treści</h2>
|
||||
<ol>
|
||||
{buyingToc.map((item, index) => (
|
||||
<li key={item.id}>
|
||||
<button onClick={() => scrollToId(item.id)}>
|
||||
<span>{index + 1}</span>
|
||||
{item.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="guide-body">
|
||||
<section className="guide-process" aria-label="Proces zakupu w 12 krokach">
|
||||
<div className="guide-block-head">
|
||||
<h2>Proces zakupu mieszkania w 12 krokach</h2>
|
||||
<p>Cała droga w skrócie. Poniżej rozwijamy każdy etap dokładnie.</p>
|
||||
</div>
|
||||
<div className="guide-process-grid">
|
||||
{buyingProcessSteps.map((step, index) => (
|
||||
<article key={step.title} className="guide-process-card">
|
||||
<span className="guide-process-num">{index + 1}</span>
|
||||
<span className="guide-process-icon"><Icon name={step.icon} /></span>
|
||||
<strong>{step.title}</strong>
|
||||
<small>{step.text}</small>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<article className="guide-chapter" id="start">
|
||||
<span className="guide-chapter-index">01</span>
|
||||
<h2>Od czego zacząć zakup mieszkania?</h2>
|
||||
<p>
|
||||
Zanim zaczniesz przeglądać oferty, odpowiedz sobie na kilka pytań. To one, a nie ładne zdjęcia,
|
||||
zdecydują o trafności zakupu. Ustal, czy kupujesz dla siebie, dla rodziny, czy pod inwestycję,
|
||||
jak długo planujesz tu mieszkać i co jest dla Ciebie nienegocjowalne – metraż, liczba pokoi,
|
||||
piętro, winda, balkon czy miejsce postojowe.
|
||||
</p>
|
||||
<p>
|
||||
Rozdziel potrzeby od zachcianek. Potrzeba to np. druga sypialnia przy powiększającej się rodzinie.
|
||||
Zachcianka to konkretny kolor kuchni, który i tak zmienisz. Im lepiej rozpoznasz swoje realne potrzeby,
|
||||
tym mniej ofert będziesz musiał obejrzeć i tym rzadziej dasz się ponieść emocjom.
|
||||
</p>
|
||||
<div className="guide-callout guide-callout-tip">
|
||||
<Icon name="spark" />
|
||||
<div>
|
||||
<strong>Wskazówka</strong>
|
||||
<p>Wypisz na kartce trzy kryteria, których nie odpuścisz, i trzy, które są mile widziane. Wracaj do tej listy przy każdym oglądaniu – to najprostsza ochrona przed impulsywną decyzją.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="budzet">
|
||||
<span className="guide-chapter-index">02</span>
|
||||
<h2>Jak określić budżet?</h2>
|
||||
<p>
|
||||
Budżet to nie tylko cena mieszkania. To cena powiększona o wszystkie koszty transakcyjne oraz o to,
|
||||
co wydasz zaraz po zakupie. Zsumuj cenę, podatki, taksę notarialną, wpisy do księgi wieczystej,
|
||||
ewentualną prowizję pośrednika i koszty kredytu. Dopiero ta kwota pokazuje, na co naprawdę Cię stać.
|
||||
</p>
|
||||
<div className="guide-table-wrap">
|
||||
<table className="guide-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Koszt</th>
|
||||
<th>Kto ponosi</th>
|
||||
<th>Ile (orientacyjnie)</th>
|
||||
<th>Uwagi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{buyingCostRows.map((row) => (
|
||||
<tr key={row.name}>
|
||||
<td data-label="Koszt"><strong>{row.name}</strong></td>
|
||||
<td data-label="Kto ponosi">{row.who}</td>
|
||||
<td data-label="Ile">{row.value}</td>
|
||||
<td data-label="Uwagi">{row.note}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="guide-callout guide-callout-warn">
|
||||
<Icon name="warning" />
|
||||
<div>
|
||||
<strong>Zostaw zapas</strong>
|
||||
<p>Nie planuj zakupu na granicy możliwości. Poduszka finansowa na kilka rat, drobny remont i nieprzewidziane wydatki to nie luksus, tylko element bezpiecznego budżetu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="gotowka-kredyt">
|
||||
<span className="guide-chapter-index">03</span>
|
||||
<h2>Gotówka czy kredyt hipoteczny?</h2>
|
||||
<p>
|
||||
Zakup za gotówkę jest szybszy, prostszy i pozwala mocniej negocjować, bo sprzedający nie czeka na
|
||||
decyzję banku. Nie zawsze jednak warto zamrażać wszystkie oszczędności w jednej nieruchomości –
|
||||
tracisz płynność i poduszkę bezpieczeństwa.
|
||||
</p>
|
||||
<p>
|
||||
Kredyt hipoteczny rozkłada koszt w czasie i pozwala kupić wcześniej, ale oznacza wieloletnie
|
||||
zobowiązanie, odsetki i zależność od zmian stóp procentowych. Zanim zdecydujesz, porównaj oferty
|
||||
kilku banków i policz całkowity koszt kredytu, a nie tylko wysokość raty.
|
||||
</p>
|
||||
<div className="guide-two-col">
|
||||
<div className="guide-pro">
|
||||
<h4><Icon name="check" /> Gotówka</h4>
|
||||
<ul>
|
||||
<li>Szybka i prosta transakcja</li>
|
||||
<li>Silniejsza pozycja w negocjacjach</li>
|
||||
<li>Brak odsetek i rat</li>
|
||||
<li>Uwaga: mniejsza płynność finansowa</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="guide-con">
|
||||
<h4><Icon name="credit-card" /> Kredyt hipoteczny</h4>
|
||||
<ul>
|
||||
<li>Kupujesz, nie mając całej kwoty</li>
|
||||
<li>Oszczędności zostają jako rezerwa</li>
|
||||
<li>Uwaga: całkowity koszt rośnie o odsetki</li>
|
||||
<li>Uwaga: wieloletnie zobowiązanie</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="zdolnosc">
|
||||
<span className="guide-chapter-index">04</span>
|
||||
<h2>Jak obliczyć zdolność kredytową?</h2>
|
||||
<p>
|
||||
Zdolność kredytowa to maksymalna kwota, jaką bank jest gotów Ci pożyczyć. Wpływają na nią głównie:
|
||||
wysokość i stabilność dochodów, forma zatrudnienia, liczba osób na utrzymaniu, inne zobowiązania
|
||||
(raty, karty, limity) oraz historia w BIK. Banki liczą też bufor na wypadek wzrostu stóp, dlatego
|
||||
maksymalna kwota bywa niższa, niż wynikałoby z samej raty.
|
||||
</p>
|
||||
<p>
|
||||
Każdy bank liczy zdolność inaczej, więc warto sprawdzić kilka ofert – różnice bywają znaczne.
|
||||
Zanim złożysz wnioski, uporządkuj finanse: spłać drobne zobowiązania, zamknij nieużywane karty
|
||||
i limity, zadbaj o pozytywną historię kredytową. To realnie podnosi zdolność.
|
||||
</p>
|
||||
<div className="guide-callout guide-callout-tip">
|
||||
<Icon name="calculator" />
|
||||
<div>
|
||||
<strong>Policz orientacyjnie</strong>
|
||||
<p>Skorzystaj z naszych kalkulatorów po prawej stronie, aby oszacować budżet i porównać koszty. Ostateczną zdolność zawsze potwierdza bank na podstawie dokumentów.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="rynek">
|
||||
<span className="guide-chapter-index">05</span>
|
||||
<h2>Rynek pierwotny czy wtórny?</h2>
|
||||
<p>
|
||||
Rynek pierwotny to zakup od dewelopera – najczęściej nowe, energooszczędne mieszkanie, często jeszcze
|
||||
w budowie i do wykończenia. Rynek wtórny to zakup od dotychczasowego właściciela – zwykle mieszkanie
|
||||
gotowe do zamieszkania, w ukształtowanej okolicy. Oba mają swoje zalety; wybór zależy od tego, czy
|
||||
wolisz nowe i „pod siebie”, czy gotowe i sprawdzone.
|
||||
</p>
|
||||
<div className="guide-two-col">
|
||||
<div className="guide-market">
|
||||
<h4><Icon name="building" /> Rynek pierwotny</h4>
|
||||
<ul>
|
||||
<li>Nowy standard i niższe koszty eksploatacji</li>
|
||||
<li>Możliwość aranżacji od podstaw</li>
|
||||
<li>Gwarancja i rękojmia dewelopera</li>
|
||||
<li>Uwaga: często konieczne wykończenie i czekanie na odbiór</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="guide-market">
|
||||
<h4><Icon name="house" /> Rynek wtórny</h4>
|
||||
<ul>
|
||||
<li>Gotowe do zamieszkania od zaraz</li>
|
||||
<li>Sprawdzona lokalizacja i sąsiedztwo</li>
|
||||
<li>Możliwość zobaczenia realnego stanu</li>
|
||||
<li>Uwaga: dokładniej sprawdź stan techniczny i prawny</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="lokalizacja">
|
||||
<span className="guide-chapter-index">06</span>
|
||||
<h2>Jak wybrać lokalizację?</h2>
|
||||
<p>
|
||||
Lokalizacji nie zmienisz remontem, dlatego to jedno z najważniejszych kryteriów. Sprawdź dojazd do
|
||||
pracy i szkoły, dostęp do komunikacji, sklepów, przychodni i terenów zielonych. Odwiedź okolicę o
|
||||
różnych porach dnia – rano, po południu i wieczorem – żeby poznać hałas, ruch i realny klimat miejsca.
|
||||
</p>
|
||||
<p>
|
||||
Zajrzyj do miejscowego planu zagospodarowania przestrzennego, żeby wiedzieć, co może powstać w
|
||||
sąsiedztwie – park czy ruchliwa droga to duża różnica dla komfortu i przyszłej wartości. Zwróć uwagę
|
||||
na kierunki świata i nasłonecznienie oraz na to, czy okolica się rozwija, czy raczej podupada.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="ogladanie">
|
||||
<span className="guide-chapter-index">07</span>
|
||||
<h2>Jak oglądać mieszkanie?</h2>
|
||||
<p>
|
||||
Nie kupuj po jednym oglądaniu i nie oglądaj tylko przy pełnym słońcu. Przyjdź kilka razy, także
|
||||
wieczorem, i nie bój się zadawać pytań: o wysokość czynszu i co obejmuje, o koszty ogrzewania, o wiek
|
||||
instalacji, o plany remontowe budynku i o powód sprzedaży. Rób zdjęcia i notatki, bo po obejrzeniu
|
||||
kilku ofert łatwo je pomylić.
|
||||
</p>
|
||||
<p>
|
||||
Zwróć uwagę na to, czego nie widać na pierwszy rzut oka: ślady wilgoci w narożnikach i pod oknami,
|
||||
stan okien i drzwi, ciśnienie wody, działanie wentylacji, wygłuszenie między mieszkaniami. Sprawdź też
|
||||
części wspólne – klatkę, windę, piwnicę i otoczenie budynku mówią wiele o tym, jak zarządzana jest
|
||||
nieruchomość.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="stan-techniczny">
|
||||
<span className="guide-chapter-index">08</span>
|
||||
<h2>Jak sprawdzić stan techniczny?</h2>
|
||||
<p>
|
||||
Stan techniczny decyduje o tym, ile dołożysz po zakupie. Najważniejsze punkty to instalacja
|
||||
elektryczna (czy jest bezpieczna i o odpowiedniej mocy), instalacja wodno-kanalizacyjna i piony,
|
||||
ogrzewanie, wentylacja oraz izolacja i ślady wilgoci lub grzyba. W starszych budynkach zwróć uwagę na
|
||||
wiek instalacji i okien – ich wymiana bywa kosztowna.
|
||||
</p>
|
||||
<div className="guide-callout guide-callout-tip">
|
||||
<Icon name="hammer" />
|
||||
<div>
|
||||
<strong>Rozważ fachowca</strong>
|
||||
<p>Przy droższym zakupie lub starszym mieszkaniu warto zabrać na oględziny osobę znającą się na budownictwie. Koszt takiej konsultacji jest niewielki wobec potencjalnych ukrytych wad.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="ksiega-wieczysta">
|
||||
<span className="guide-chapter-index">09</span>
|
||||
<h2>Jak sprawdzić księgę wieczystą?</h2>
|
||||
<p>
|
||||
Księga wieczysta to dokument, który pokazuje stan prawny nieruchomości. Odpis możesz sprawdzić online,
|
||||
znając numer księgi. Zwróć uwagę na cztery działy: oznaczenie nieruchomości, właściciela, prawa i
|
||||
ograniczenia oraz hipoteki. To podstawowa ochrona przed zakupem mieszkania z niespodziankami.
|
||||
</p>
|
||||
<ul className="guide-list">
|
||||
<li><strong>Dział I</strong> – co to za nieruchomość: adres, metraż, pomieszczenia przynależne.</li>
|
||||
<li><strong>Dział II</strong> – kto jest właścicielem. Musi zgadzać się z osobą sprzedającą.</li>
|
||||
<li><strong>Dział III</strong> – prawa, ograniczenia, służebności i roszczenia osób trzecich.</li>
|
||||
<li><strong>Dział IV</strong> – hipoteki. Jeśli jest, ustal z bankiem i notariuszem sposób jej wykreślenia.</li>
|
||||
</ul>
|
||||
<div className="guide-callout guide-callout-warn">
|
||||
<Icon name="shield" />
|
||||
<div>
|
||||
<strong>Nie pomijaj tego kroku</strong>
|
||||
<p>Wpis obciążający nieruchomość może przejść na Ciebie razem z zakupem. Sprawdzenie księgi to kilka minut, a chroni przed poważnymi problemami.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="negocjacje">
|
||||
<span className="guide-chapter-index">10</span>
|
||||
<h2>Jak negocjować cenę?</h2>
|
||||
<p>
|
||||
Negocjacje zacznij od wiedzy. Sprawdź ceny podobnych mieszkań w okolicy, zobacz, jak długo oferta jest
|
||||
wystawiona i poznaj sytuację sprzedającego. Argumentem nie są emocje, tylko fakty: konieczne remonty,
|
||||
stan instalacji, wysoki czynsz czy niższe ceny porównywalnych lokali.
|
||||
</p>
|
||||
<p>
|
||||
Bądź konkretny i spokojny. Podaj kwotę, którą jesteś gotów zapłacić, wraz z uzasadnieniem, i miej
|
||||
wyznaczoną granicę, powyżej której rezygnujesz. Gotowość do szybkiej, pewnej transakcji – zwłaszcza za
|
||||
gotówkę – to często silniejszy argument niż sama presja na obniżkę.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="umowa-przedwstepna">
|
||||
<span className="guide-chapter-index">11</span>
|
||||
<h2>Umowa przedwstępna</h2>
|
||||
<p>
|
||||
Umowa przedwstępna zabezpiecza ustalenia, zanim dojdzie do finalnej transakcji. Określa cenę, termin
|
||||
zawarcia umowy właściwej, stan mieszkania i warunki, np. uzyskanie kredytu. Można ją zawrzeć zwykłą
|
||||
formą pisemną lub u notariusza – forma notarialna daje silniejszą ochronę.
|
||||
</p>
|
||||
<div className="guide-callout guide-callout-info">
|
||||
<Icon name="document" />
|
||||
<div>
|
||||
<strong>Zadatek a zaliczka</strong>
|
||||
<p>Zadatek działa dyscyplinująco: jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający – zwraca go w podwójnej wysokości. Zaliczka jest po prostu zwracana. Dla bezpieczeństwa transakcji częściej stosuje się zadatek.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="akt-notarialny">
|
||||
<span className="guide-chapter-index">12</span>
|
||||
<h2>Akt notarialny</h2>
|
||||
<p>
|
||||
Przeniesienie własności mieszkania musi mieć formę aktu notarialnego. To notariusz sprawdza tożsamość
|
||||
stron, stan prawny nieruchomości i treść umowy, a następnie składa wniosek o wpis nowego właściciela do
|
||||
księgi wieczystej. Przy akcie płacisz taksę notarialną, podatek oraz opłaty sądowe.
|
||||
</p>
|
||||
<p>
|
||||
Przed podpisaniem dokładnie przeczytaj projekt aktu – ceny, terminy, sposób i datę wydania mieszkania,
|
||||
zapisy o zadatku i o wykreśleniu ewentualnej hipoteki. Jeśli czegoś nie rozumiesz, pytaj notariusza.
|
||||
To jego rola, żeby wyjaśnić Ci każdy zapis.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="odbior">
|
||||
<span className="guide-chapter-index">13</span>
|
||||
<h2>Odbiór mieszkania</h2>
|
||||
<p>
|
||||
Odbiór to moment sprawdzenia, czy dostajesz mieszkanie w umówionym stanie. Spisz protokół zdawczo-odbiorczy:
|
||||
stany liczników (prąd, woda, gaz, ciepło), liczbę kluczy i pilotów oraz to, co zostaje w mieszkaniu.
|
||||
Przy nowym lokalu od dewelopera dokładnie sprawdź jakość wykończenia i zgłoś wszystkie usterki w protokole.
|
||||
</p>
|
||||
<div className="guide-callout guide-callout-tip">
|
||||
<Icon name="list" />
|
||||
<div>
|
||||
<strong>Wszystko na piśmie</strong>
|
||||
<p>Każdą usterkę i każdy stan licznika zapisz w protokole podpisanym przez obie strony. To Twój dowód na wypadek późniejszych rozliczeń i reklamacji.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="klucze">
|
||||
<span className="guide-chapter-index">14</span>
|
||||
<h2>Przekazanie kluczy i formalności po zakupie</h2>
|
||||
<p>
|
||||
Po odbiorze zostają formalności, o których łatwo zapomnieć w euforii. Przepisz na siebie umowy na prąd,
|
||||
gaz, wodę i internet, zgłoś zmianę właściciela do wspólnoty lub spółdzielni, rozważ ubezpieczenie
|
||||
mieszkania i zamelduj się pod nowym adresem. Zachowaj wszystkie dokumenty zakupu w jednym miejscu.
|
||||
</p>
|
||||
<ul className="guide-list">
|
||||
<li>Przepisanie liczników i umów z dostawcami mediów.</li>
|
||||
<li>Zgłoszenie nowego właściciela do zarządcy budynku.</li>
|
||||
<li>Ubezpieczenie nieruchomości (a przy kredycie – często wymagane).</li>
|
||||
<li>Zameldowanie oraz aktualizacja adresu w ważnych instytucjach.</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<section className="guide-checklist" id="checklista">
|
||||
<div className="guide-block-head">
|
||||
<h2>Checklista – 10 rzeczy do sprawdzenia przed zakupem</h2>
|
||||
<p>Wydrukuj lub pobierz w PDF i miej przy sobie podczas oglądania.</p>
|
||||
</div>
|
||||
<div className="guide-checklist-grid">
|
||||
{buyingChecklist.map((item, index) => (
|
||||
<label className="guide-checklist-item" key={index}>
|
||||
<input type="checkbox" />
|
||||
<span className="guide-check-box"><Icon name="check" /></span>
|
||||
<span>{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<button className="guide-download-btn" onClick={downloadBuyingChecklistPdf}>
|
||||
<Icon name="document" />
|
||||
Pobierz listę kontrolną (PDF)
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<article className="guide-chapter" id="bledy">
|
||||
<span className="guide-chapter-index">15</span>
|
||||
<h2>Najczęstsze błędy kupujących</h2>
|
||||
<p>Większości kosztownych pomyłek da się uniknąć, jeśli wie się, gdzie najczęściej się pojawiają.</p>
|
||||
<div className="guide-mistakes">
|
||||
{buyingMistakes.map((mistake) => (
|
||||
<article key={mistake.title} className="guide-mistake">
|
||||
<span className="guide-mistake-icon"><Icon name="warning" /></span>
|
||||
<div>
|
||||
<strong>{mistake.title}</strong>
|
||||
<p>{mistake.text}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter" id="faq">
|
||||
<span className="guide-chapter-index">16</span>
|
||||
<h2>Najczęściej zadawane pytania (FAQ)</h2>
|
||||
<div className="guide-faq">
|
||||
{buyingFaq.map((item) => (
|
||||
<details key={item.q} className="guide-faq-item">
|
||||
<summary>
|
||||
{item.q}
|
||||
<Icon name="chevron" />
|
||||
</summary>
|
||||
<p>{item.a}</p>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="guide-chapter guide-summary" id="podsumowanie">
|
||||
<span className="guide-chapter-index">17</span>
|
||||
<h2>Podsumowanie</h2>
|
||||
<p>
|
||||
Zakup mieszkania to jedna z ważniejszych decyzji finansowych w życiu, ale rozłożona na etapy przestaje
|
||||
być przytłaczająca. Zacznij od potrzeb i budżetu, świadomie wybierz sposób finansowania, dokładnie
|
||||
sprawdź stan techniczny i prawny, a formalności potraktuj poważnie. Najlepszą ochroną są wiedza,
|
||||
spokój i pisemne ustalenia – emocje zostaw na moment odbioru kluczy.
|
||||
</p>
|
||||
<div className="guide-summary-note">
|
||||
<Icon name="warning" />
|
||||
<p>Ten poradnik ma charakter informacyjny i nie stanowi porady prawnej ani podatkowej. Szczegóły dotyczące podatków, opłat i umów potwierdzaj u notariusza, doradcy kredytowego lub prawnika.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section className="guide-cta">
|
||||
<div>
|
||||
<h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
|
||||
<p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
|
||||
</div>
|
||||
<button onClick={() => onNavigate('buy')}>
|
||||
Zobacz oferty mieszkań
|
||||
<Icon name="arrow" />
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside className="guide-aside" aria-label="Narzędzia i materiały">
|
||||
<section className="guide-aside-card">
|
||||
<h3><Icon name="calculator" /> Kalkulatory</h3>
|
||||
<div className="guide-aside-list">
|
||||
<button onClick={() => scrollToId('zdolnosc')}>
|
||||
<span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
|
||||
<Icon name="chevron" />
|
||||
</button>
|
||||
<button onClick={() => onNavigate('valuation')}>
|
||||
<span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
|
||||
<Icon name="chevron" />
|
||||
</button>
|
||||
<button onClick={() => onNavigate('priceHistory')}>
|
||||
<span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
|
||||
<Icon name="chevron" />
|
||||
</button>
|
||||
<button onClick={() => onNavigate('districtRanking')}>
|
||||
<span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
|
||||
<Icon name="chevron" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="guide-aside-card">
|
||||
<h3><Icon name="document" /> Do pobrania</h3>
|
||||
<div className="guide-aside-downloads">
|
||||
<button onClick={downloadBuyingChecklistPdf}>
|
||||
<Icon name="document" />
|
||||
<span><strong>Lista kontrolna (PDF)</strong><small>10 rzeczy do sprawdzenia</small></span>
|
||||
<Icon name="upload" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="guide-aside-card guide-aside-mistakes">
|
||||
<h3><Icon name="warning" /> Najczęstsze błędy</h3>
|
||||
<ul>
|
||||
{buyingMistakes.slice(0, 5).map((mistake) => (
|
||||
<li key={mistake.title}>
|
||||
<Icon name="warning" />
|
||||
{mistake.title}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
|
||||
return (
|
||||
<section className="guides-page" aria-label="Poradniki">
|
||||
<section className="guides-hero">
|
||||
@@ -12329,16 +12991,35 @@ function GuidesPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="guide-topic-grid">
|
||||
{guideTopics.map((topic) => (
|
||||
<article className="guide-topic-card" key={topic.title}>
|
||||
<span className={`guide-topic-icon ${topic.icon}`}>
|
||||
<Icon name={topic.icon} />
|
||||
</span>
|
||||
<h3>{topic.title}</h3>
|
||||
<p>{topic.text}</p>
|
||||
<small>{topic.count}</small>
|
||||
</article>
|
||||
))}
|
||||
{guideTopics.map((topic) => {
|
||||
const isBuying = topic.title === 'Kupno mieszkania';
|
||||
return (
|
||||
<article
|
||||
className={`guide-topic-card${isBuying ? ' is-clickable' : ''}`}
|
||||
key={topic.title}
|
||||
role={isBuying ? 'button' : undefined}
|
||||
tabIndex={isBuying ? 0 : undefined}
|
||||
onClick={isBuying ? () => onNavigate('guideBuying') : undefined}
|
||||
onKeyDown={
|
||||
isBuying
|
||||
? (event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
onNavigate('guideBuying');
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<span className={`guide-topic-icon ${topic.icon}`}>
|
||||
<Icon name={topic.icon} />
|
||||
</span>
|
||||
<h3>{topic.title}</h3>
|
||||
<p>{topic.text}</p>
|
||||
<small>{topic.count}</small>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -24858,3 +24858,987 @@ svg {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Poradnik: Kupno mieszkania ===== */
|
||||
.guide-article {
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
|
||||
min-height: calc(100vh - 82px);
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.guide-hero {
|
||||
min-height: 340px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guide-hero img {
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide-hero-shade {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(248, 250, 252, 0) 72%, #f8fafc 100%),
|
||||
linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.97) 40%, rgba(248, 250, 252, 0.6) 62%, rgba(248, 250, 252, 0.06) 96%);
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.guide-hero-inner {
|
||||
min-height: 340px;
|
||||
padding: 30px 48px 46px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.guide-back {
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 999px;
|
||||
color: #14223a;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
gap: 6px;
|
||||
padding: 7px 14px 7px 10px;
|
||||
}
|
||||
|
||||
.guide-back svg {
|
||||
height: 15px;
|
||||
transform: rotate(180deg);
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.guide-hero-badge {
|
||||
align-items: center;
|
||||
background: #0b9f5c;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
gap: 7px;
|
||||
margin-top: 20px;
|
||||
padding: 7px 14px;
|
||||
}
|
||||
|
||||
.guide-hero-badge svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.guide-hero h1 {
|
||||
color: #14223a;
|
||||
font-size: clamp(38px, 3.8vw, 60px);
|
||||
line-height: 1.02;
|
||||
margin: 16px 0 0;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.guide-hero-lead {
|
||||
color: #4a5766;
|
||||
font-size: 17px;
|
||||
font-weight: 650;
|
||||
line-height: 1.5;
|
||||
margin: 16px 0 0;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.guide-hero-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.guide-hero-chips span {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
color: #33465c;
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
gap: 7px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.guide-hero-chips svg {
|
||||
color: #0b9f5c;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.guide-article-layout {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
grid-template-columns: 232px minmax(0, 1fr) 312px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
/* Spis treści */
|
||||
.guide-toc {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.guide-toc-inner {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
padding: 18px 16px;
|
||||
}
|
||||
|
||||
.guide-toc-inner h2 {
|
||||
color: #14223a;
|
||||
font-size: 15px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.guide-toc-inner ol {
|
||||
counter-reset: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-toc-inner li button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #46586c;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
gap: 10px;
|
||||
padding: 7px 8px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide-toc-inner li button span {
|
||||
align-items: center;
|
||||
background: #eef3f8;
|
||||
border-radius: 6px;
|
||||
color: #0b9f5c;
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
height: 22px;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.guide-toc-inner li button:hover {
|
||||
background: #f2f7fb;
|
||||
color: #14223a;
|
||||
}
|
||||
|
||||
/* Blok główny */
|
||||
.guide-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guide-block-head h2 {
|
||||
color: #14223a;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.guide-block-head p {
|
||||
color: #607085;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
/* Proces 12 kroków */
|
||||
.guide-process {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.guide-process-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.guide-process-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e6edf3;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guide-process-num {
|
||||
align-items: center;
|
||||
background: #0b9f5c;
|
||||
border-radius: 6px;
|
||||
color: #ffffff;
|
||||
display: grid;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.guide-process-icon {
|
||||
color: #13a360;
|
||||
}
|
||||
|
||||
.guide-process-icon svg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.guide-process-card strong {
|
||||
color: #14223a;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.guide-process-card small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Rozdziały */
|
||||
.guide-chapter {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
padding: 26px 28px;
|
||||
position: relative;
|
||||
scroll-margin-top: 20px;
|
||||
}
|
||||
|
||||
.guide-chapter-index {
|
||||
color: #d7e6dc;
|
||||
font-size: 40px;
|
||||
font-weight: 950;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.guide-chapter h2 {
|
||||
color: #14223a;
|
||||
font-size: 24px;
|
||||
margin: 8px 0 14px;
|
||||
}
|
||||
|
||||
.guide-chapter p {
|
||||
color: #3f4d5e;
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
line-height: 1.62;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.guide-chapter p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.guide-list {
|
||||
color: #3f4d5e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
list-style: none;
|
||||
margin: 4px 0 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-list li {
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
line-height: 1.5;
|
||||
padding-left: 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guide-list li::before {
|
||||
background: #0b9f5c;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.guide-list li strong {
|
||||
color: #14223a;
|
||||
}
|
||||
|
||||
/* Callouty */
|
||||
.guide-callout {
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 24px minmax(0, 1fr);
|
||||
margin-top: 6px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.guide-callout svg {
|
||||
height: 22px;
|
||||
margin-top: 2px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.guide-callout strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.guide-callout p {
|
||||
font-size: 14px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.guide-callout-tip {
|
||||
background: #edf8f1;
|
||||
border: 1px solid #c6e8d4;
|
||||
}
|
||||
|
||||
.guide-callout-tip svg,
|
||||
.guide-callout-tip strong {
|
||||
color: #0b7a47;
|
||||
}
|
||||
|
||||
.guide-callout-warn {
|
||||
background: #fef6ec;
|
||||
border: 1px solid #f6dcb6;
|
||||
}
|
||||
|
||||
.guide-callout-warn svg,
|
||||
.guide-callout-warn strong {
|
||||
color: #b9791b;
|
||||
}
|
||||
|
||||
.guide-callout-info {
|
||||
background: #eef4fd;
|
||||
border: 1px solid #cfe0f7;
|
||||
}
|
||||
|
||||
.guide-callout-info svg,
|
||||
.guide-callout-info strong {
|
||||
color: #2c62c6;
|
||||
}
|
||||
|
||||
.guide-callout p,
|
||||
.guide-callout-tip p,
|
||||
.guide-callout-warn p,
|
||||
.guide-callout-info p {
|
||||
color: #3f4d5e;
|
||||
}
|
||||
|
||||
/* Tabela kosztów */
|
||||
.guide-table-wrap {
|
||||
border: 1px solid #e2e9f0;
|
||||
border-radius: 8px;
|
||||
margin: 4px 0 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.guide-table {
|
||||
border-collapse: collapse;
|
||||
min-width: 560px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide-table th {
|
||||
background: #f4f8fb;
|
||||
border-bottom: 1px solid #e2e9f0;
|
||||
color: #52627a;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 11px 14px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.guide-table td {
|
||||
border-bottom: 1px solid #eef2f6;
|
||||
color: #3f4d5e;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.guide-table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.guide-table td strong {
|
||||
color: #14223a;
|
||||
}
|
||||
|
||||
/* Dwie kolumny (za/przeciw, rynki) */
|
||||
.guide-two-col {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.guide-pro,
|
||||
.guide-con,
|
||||
.guide-market {
|
||||
border: 1px solid #e2e9f0;
|
||||
border-radius: 8px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.guide-pro {
|
||||
background: #edf8f1;
|
||||
border-color: #c6e8d4;
|
||||
}
|
||||
|
||||
.guide-con {
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.guide-market {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.guide-pro h4,
|
||||
.guide-con h4,
|
||||
.guide-market h4 {
|
||||
align-items: center;
|
||||
color: #14223a;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.guide-pro h4 svg,
|
||||
.guide-market h4 svg {
|
||||
color: #0b9f5c;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.guide-con h4 svg {
|
||||
color: #2c62c6;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.guide-pro ul,
|
||||
.guide-con ul,
|
||||
.guide-market ul {
|
||||
color: #3f4d5e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-pro li,
|
||||
.guide-con li,
|
||||
.guide-market li {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.45;
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guide-pro li::before,
|
||||
.guide-con li::before,
|
||||
.guide-market li::before {
|
||||
color: #0b9f5c;
|
||||
content: "›";
|
||||
font-weight: 900;
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Checklista */
|
||||
.guide-checklist {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
padding: 24px 26px;
|
||||
scroll-margin-top: 20px;
|
||||
}
|
||||
|
||||
.guide-checklist-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 16px 0 18px;
|
||||
}
|
||||
|
||||
.guide-checklist-item {
|
||||
align-items: flex-start;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e6edf3;
|
||||
border-radius: 8px;
|
||||
color: #33465c;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
gap: 10px;
|
||||
line-height: 1.4;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.guide-checklist-item input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.guide-check-box {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1.5px solid #cdd7e1;
|
||||
border-radius: 5px;
|
||||
color: transparent;
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
place-items: center;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.guide-check-box svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.guide-checklist-item input:checked ~ .guide-check-box {
|
||||
background: #0b9f5c;
|
||||
border-color: #0b9f5c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.guide-checklist-item input:checked ~ span:last-child {
|
||||
color: #8a97a6;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.guide-download-btn,
|
||||
.guide-cta button {
|
||||
align-items: center;
|
||||
background: #0b9f5c;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.guide-download-btn svg {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.guide-download-btn:hover,
|
||||
.guide-cta button:hover {
|
||||
background: #0a8b50;
|
||||
}
|
||||
|
||||
/* Najczęstsze błędy */
|
||||
.guide-mistakes {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.guide-mistake {
|
||||
background: #fef6ec;
|
||||
border: 1px solid #f6dcb6;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.guide-mistake-icon {
|
||||
align-items: center;
|
||||
background: #fbe4c4;
|
||||
border-radius: 8px;
|
||||
color: #b9791b;
|
||||
display: grid;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.guide-mistake-icon svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.guide-mistake strong {
|
||||
color: #14223a;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.guide-mistake p {
|
||||
color: #4a5766 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.45 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* FAQ */
|
||||
.guide-faq {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.guide-faq-item {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e6edf3;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.guide-faq-item summary {
|
||||
align-items: center;
|
||||
color: #14223a;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.guide-faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.guide-faq-item summary svg {
|
||||
color: #0b9f5c;
|
||||
flex-shrink: 0;
|
||||
height: 18px;
|
||||
transition: transform 0.2s ease;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.guide-faq-item[open] summary svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.guide-faq-item p {
|
||||
color: #4a5766 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 550 !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 0 16px !important;
|
||||
}
|
||||
|
||||
/* Podsumowanie + CTA */
|
||||
.guide-summary {
|
||||
background: #f5faf7;
|
||||
border-color: #cfe9da;
|
||||
}
|
||||
|
||||
.guide-summary-note {
|
||||
align-items: flex-start;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e9f0;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 20px minmax(0, 1fr);
|
||||
margin-top: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.guide-summary-note svg {
|
||||
color: #8793a3;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.guide-summary-note p {
|
||||
color: #64748b !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.5 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.guide-cta {
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #0b9f5c 0%, #0c7f4c 100%);
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
justify-content: space-between;
|
||||
padding: 26px 30px;
|
||||
}
|
||||
|
||||
.guide-cta h2 {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.guide-cta p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.guide-cta button {
|
||||
background: #ffffff;
|
||||
color: #0b7a47;
|
||||
}
|
||||
|
||||
.guide-cta button:hover {
|
||||
background: #f0f5f2;
|
||||
}
|
||||
|
||||
.guide-cta button svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* Prawy sidebar */
|
||||
.guide-aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.guide-aside-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.guide-aside-card h3 {
|
||||
align-items: center;
|
||||
color: #14223a;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
gap: 8px;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.guide-aside-card h3 svg {
|
||||
color: #0b9f5c;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.guide-aside-list,
|
||||
.guide-aside-downloads {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.guide-aside-list button,
|
||||
.guide-aside-downloads button {
|
||||
align-items: center;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e6edf3;
|
||||
border-radius: 8px;
|
||||
color: #14223a;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 11px 12px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide-aside-list button:hover,
|
||||
.guide-aside-downloads button:hover {
|
||||
background: #eef4f9;
|
||||
border-color: #d3e0ea;
|
||||
}
|
||||
|
||||
.guide-aside-list button > span,
|
||||
.guide-aside-downloads button > span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guide-aside-list strong,
|
||||
.guide-aside-downloads strong {
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.guide-aside-list small,
|
||||
.guide-aside-downloads small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.guide-aside-list button > svg {
|
||||
color: #9aa5b4;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
transform: rotate(-90deg);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.guide-aside-downloads button > svg:first-child {
|
||||
color: #0b9f5c;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.guide-aside-downloads button > svg:last-child {
|
||||
color: #9aa5b4;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.guide-aside-mistakes ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-aside-mistakes li {
|
||||
align-items: center;
|
||||
color: #46586c;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
gap: 9px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.guide-aside-mistakes li svg {
|
||||
color: #d99a3a;
|
||||
flex-shrink: 0;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.guide-article-layout {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
}
|
||||
|
||||
.guide-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.guide-process-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.guide-hero-inner {
|
||||
padding: 24px 20px 34px;
|
||||
}
|
||||
|
||||
.guide-article-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.guide-aside {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.guide-process-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.guide-two-col,
|
||||
.guide-checklist-grid,
|
||||
.guide-mistakes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.guide-chapter {
|
||||
padding: 20px 18px;
|
||||
}
|
||||
|
||||
.guide-process-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.guide-cta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user