/* Polak w Lizbonie - przewodnik po przeprowadzce do Portugalii */ /* Paleta ciepła i ziemista, świadomie inna niż niebiesko-pomarańczowe pracawlizbonie.pl. Oba serwisy prowadzę ja i linkują do siebie, więc muszą dać się odróżnić na pierwszy rzut oka, łącznie z faviconą w pasku kart. */ :root{ --paper:#f2e9db; --paper-2:#eaded0; --card:#fffdf8; --ink:#2b2318; --body:#4f4539; --muted:#87795f; --bark:#463a2d; --bark-2:#5a4a39; --olive:#79825a; --olive-d:#5c6544; --terra:#c2643c; --terra-d:#9d4d2a; --line:#ddcfb6; --line-2:#ece1cd; --night:#100e0b; --radius:18px; /* dwuwarstwowy cień zamiast twardej ramki: lżejsze i nowocześniejsze */ --ring:0 0 0 1px rgba(120,100,72,.16); --shadow:var(--ring),0 1px 2px rgba(70,58,45,.04),0 12px 28px -16px rgba(70,58,45,.4); --sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } /* Kolor działu. Ta sama klasa siedzi na kadrze na stronie głównej i na podstrony, więc dział ma jeden kolor w obu miejscach i nie da się ich rozjechać. */ .t-formalnosci{--tone:#4a3d2f} .t-mieszkanie{--tone:#8a4a30} .t-praca{--tone:#5c6544} .t-transport{--tone:#3f5257} .t-zakupy{--tone:#7a5a25} .t-kuchnia{--tone:#8c3f2e} .t-codziennosc{--tone:#6b5f4d} .t-spolecznosc{--tone:#3f5340} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--paper);color:var(--ink);line-height:1.65; -webkit-font-smoothing:antialiased;text-wrap:pretty; } h1,h2,h3,.ptitle{text-wrap:balance} .wrap{max-width:760px;margin:0 auto;padding:0 20px} ::selection{background:rgba(121,130,90,.26)} :focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:4px} /* ---------- pasek górny ---------- */ /* półprzezroczysty z rozmyciem: kadry pod spodem przesuwają się, a pasek zostaje czytelny */ .topbar{ background:rgba(70,58,45,.86);backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid rgba(255,255,255,.09); color:var(--paper);position:sticky;top:0;z-index:60; transition:background .25s ease,border-color .25s ease; } @supports not (backdrop-filter:blur(2px)){.topbar{background:var(--bark)}} /* na stronie głównej pasek leży na pierwszym kadrze, a nie nad nim: bez tła, bez własnej wysokości w układzie. Tło wraca dopiero po zjechaniu z kadru, bo nad kolejnymi zdjęciami sama biel przestaje wystarczać. */ .home .topbar{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none} .home .topbar.solid{ background:rgba(70,58,45,.86);border-bottom-color:rgba(255,255,255,.09); backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px); } @supports not (backdrop-filter:blur(2px)){.home .topbar.solid{background:var(--bark)}} .topbar .wrap{display:flex;align-items:center;gap:14px;min-height:58px} .brand{font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fdf8ee;text-decoration:none} .brand span{color:#d8b98a} /* hamburger */ .navtoggle{ margin-left:auto;width:42px;height:36px;display:flex;flex-direction:column; justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0 8px; } .navtoggle span{display:block;height:2px;background:#fdf8ee;border-radius:2px;transition:transform .2s ease,opacity .2s ease} .navtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle[aria-expanded=true] span:nth-child(2){opacity:0} .navtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* rozwijane menu */ .mainnav{ position:absolute;top:100%;right:0;left:0;background:rgba(90,74,57,.96); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 16px 34px rgba(43,35,24,.3); display:none; } .mainnav.open{display:block} .mainnav ul{list-style:none;margin:0 auto;padding:8px 0;max-width:760px} .mainnav li{margin:0} .mainnav a{ display:block;padding:11px 20px;color:#e6dac6;text-decoration:none; font-size:15.5px;font-weight:600; } .mainnav a:hover{background:rgba(255,255,255,.07);color:#fff} .mainnav a[aria-current=page]{color:#d8b98a} /* ---------- strona główna: przewijanie całymi ekranami ---------- */ /* Przewijaczem zostaje dokument, a nie osobny kontener: dzięki temu odnośnik #dzialy, pasek górny i klawiatura działają tak jak wcześniej. Zaczepienia ustawia się na , bo to ono przewija dokument, stąd :has() zamiast .home. scroll-padding odsuwa punkt zaczepienia o wysokość paska, żeby nie zasłaniał pierwszego wiersza listy. */ /* scroll-behavior:auto celowo: przy mandatory snap płynne przewijanie z :root walczy z zaczepieniami i Chrome przerywa skok z #dzialy, wracając na górę. Sam przeskok między ekranami i tak jest animowany przez mechanizm snapowania. */ html:has(body.home){scroll-snap-type:y mandatory;scroll-padding-top:58px;scroll-behavior:auto} .panel.lead,.screen{scroll-snap-align:start} /* Ekran ma wysokość widoku pomniejszoną o pasek; stopka domyka go od dołu. */ .screen{min-height:calc(100svh - 58px);display:flex;flex-direction:column} .screen > .index{flex:1 1 auto;min-height:0} /* ---------- strona główna: pierwszy ekran ---------- */ /* svh, żeby pasek adresu w telefonie nie ucinał dołu kadru */ .panel{ position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff; min-height:100vh;min-height:100svh; } .panel img{ position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 55%; } /* przyciemnienie góry i dołu: tekst musi być czytelny na dowolnym zdjęciu, także jasnym, bo zdjęcia będą podmieniane pojedynczo */ .panel::before{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(24,17,10,.5) 0%,rgba(24,17,10,.1) 34%,rgba(24,17,10,.86) 100%); } .pbody{ position:absolute;z-index:2;left:50%;transform:translateX(-50%); bottom:clamp(26px,4.5vh,46px);width:100%;max-width:760px;padding:0 20px; } .kicker{ display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:#e6c69c;margin-bottom:9px; } .ptitle{ display:block;font-size:clamp(29px,5.4vw,46px);line-height:1.03;font-weight:800; letter-spacing:-.03em;color:#fff;text-shadow:0 2px 26px rgba(12,7,2,.5); } .plede{ margin:13px 0 0;font-size:16px;color:rgba(255,255,255,.9);max-width:44ch; text-shadow:0 1px 14px rgba(12,7,2,.6); } .btn{ display:inline-flex;align-items:center;gap:9px;margin-top:20px; background:#fdf8ee;color:var(--bark);text-decoration:none;font-weight:700;font-size:15px; border-radius:999px;padding:12px 22px;box-shadow:0 6px 18px rgba(12,7,2,.28); transition:transform .15s ease,background .15s ease; } .btn:hover{background:#fff;transform:translateY(-1px)} .btn::after{content:'↓';font-size:15px;opacity:.6} /* wejście kadru: animowane jest translate, żeby nie zjadało transformu z .btn */ @media (prefers-reduced-motion:no-preference){ .panel{animation:rise .6s cubic-bezier(.2,.7,.3,1) both} } @keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} /* ---------- strona główna: drugi ekran, spis ośmiu działów ---------- */ /* Osiem wierszy dzieli między siebie ekran, który zostaje po stopce, więc po przeskoku w dół cała lista jest widoczna naraz. subgrid: nazwy i słowa klucze stoją w jednej kolumnie we wszystkich wierszach. */ .index{ display:grid; grid-template-columns:auto max-content minmax(0,1fr) auto; grid-auto-rows:minmax(0,1fr); background:var(--paper); } .row{ grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center; gap:0 clamp(14px,3.4vw,44px); padding-inline:clamp(20px,5vw,56px); border-top:1px solid var(--line); text-decoration:none;color:var(--ink); transition:background-color .18s ease,color .18s ease; } .row:last-child{border-bottom:1px solid var(--line)} .rnum{ font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted); font-variant-numeric:tabular-nums;transition:color .18s ease; } .rtitle{font-size:clamp(20px,3.1vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.05} .rkeys{font-size:clamp(12px,1.3vw,14px);line-height:1.45;color:var(--muted);transition:color .18s ease} .rkeys span:not(:last-child)::after{content:' · ';color:var(--line)} .rgo{ font-size:19px;color:var(--muted);opacity:0;translate:-8px 0; transition:opacity .18s ease,translate .18s ease,color .18s ease; } /* najechany wiersz bierze kolor swojego działu, ten sam co nagłówek podstrony */ :is(.row:hover,.row:focus-visible){background:var(--tone,var(--bark));color:#fdf8ee} :is(.row:hover,.row:focus-visible) :is(.rnum,.rkeys,.rgo){color:rgba(255,255,255,.82)} :is(.row:hover,.row:focus-visible) .rkeys span::after{color:rgba(255,255,255,.4)} :is(.row:hover,.row:focus-visible) .rgo{opacity:1;translate:0 0} /* bez subgrid kolumny nie zgrają się między wierszami, ale układ zostaje czytelny */ @supports not (grid-template-columns:subgrid){ .index{display:flex;flex-direction:column} .row{flex:1 1 0;display:flex;flex-wrap:wrap} } /* na wąskim ekranie nazwa i słowa klucze idą w dwie linie, numer schodzi z drogi */ @media(max-width:679px){ .index{display:flex;flex-direction:column} .row{ flex:1 1 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px; padding:8px clamp(18px,5vw,28px); } .rnum,.rgo{display:none} .rtitle{font-size:clamp(19px,5.2vw,26px)} .rkeys{font-size:12.5px} } /* ---------- nagłówek podstron ---------- */ /* pasmo w kolorze działu, ten sam co na kadrze na stronie głównej; rozjaśnienie robi warstwa bieli, żeby nie trzymać drugiego odcienia dla każdego działu */ header.hero{ background-color:var(--tone,var(--bark)); background-image:linear-gradient(155deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 62%); color:var(--paper);padding:40px 0 36px; border-radius:0 0 26px 26px;margin-bottom:26px; } /* przezroczysta biel zamiast oliwki: czytelna na każdym z ośmiu kolorów */ .eyebrow{ display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; background:rgba(255,255,255,.18);color:#fdf8ee;font-weight:700;padding:4px 11px;border-radius:999px;margin-bottom:14px; } header.hero h1{ font-size:clamp(27px,5vw,40px);line-height:1.1;font-weight:800; letter-spacing:-.03em;max-width:19ch;color:#fdf8ee; } header.hero p.lede{margin-top:13px;font-size:16.5px;color:#e0d3bd;max-width:52ch} /* ---------- treść ---------- */ section{padding:32px 0;border-bottom:1px solid var(--line)} section:last-of-type{border-bottom:none} h2{font-size:24px;font-weight:800;letter-spacing:-.025em;margin-bottom:8px;scroll-margin-top:76px} h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;margin:22px 0 6px} h4{font-size:15.5px;font-weight:700;margin-bottom:4px} p{font-size:16px;color:var(--body);margin-bottom:11px} p:last-child{margin-bottom:0} .sub{color:var(--muted);font-size:15.5px;margin-bottom:18px} ul,ol{margin:0 0 11px 0;padding-left:20px} li{font-size:16px;color:var(--body);margin-bottom:5px} li:last-child{margin-bottom:0} li::marker{color:var(--terra)} a{color:var(--terra-d)} a:hover{text-decoration:none} strong{color:var(--ink)} /* link wychodzący poza serwis - otwiera się w nowej karcie, więc to zapowiada */ a.ext::after{content:'\2197';font-size:.85em;margin-left:3px;text-decoration:none;display:inline-block} /* ---------- fakty w linii (zamiast kart z pustką) ---------- */ .meta{margin:14px 0;border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow)} .meta > div{display:flex;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line-2);align-items:baseline} .meta > div:last-child{border-bottom:none} .meta dt{flex:0 0 96px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .meta dd{flex:1 1 auto;margin:0;font-size:15.5px;color:var(--body)} .meta dd b{color:var(--ink)} /* blok treści z nagłówkiem, bez zbędnej ramki dookoła pustki */ .card{border-top:1px solid var(--line-2);padding:14px 0 2px;margin:0} .card:first-of-type{border-top:0} .card h3{margin:0 0 5px;font-size:17px} .card p:last-child,.card ul:last-child{margin-bottom:0} .pron{font-weight:400;font-size:14px;color:var(--muted);white-space:nowrap} /* ---------- dania ---------- */ .dishgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:18px 0 0} .dish{ display:flex;flex-direction:column;background:var(--card); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); } /* .ph trzyma proporcje zanim pojawi się zdjęcie; podmiana na nie rusza layoutu */ .dish img,.dish .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line-2)} .dish .ph{ position:relative;background-color:#e3d6bd; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.6) 0 1.5px,transparent 1.5px 22px), repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 1.5px,transparent 1.5px 22px); } /* numer w żetonie, żeby przetrwał wstawienie zdjęcia pod spodem */ .dish .ph::after{ content:attr(data-n);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:10px; background:rgba(253,248,238,.93);color:var(--bark); font-size:13px;font-weight:800;letter-spacing:-.01em; display:flex;align-items:center;justify-content:center; box-shadow:0 1px 4px rgba(43,35,24,.2); } .dish .txt{padding:15px 17px 17px;display:flex;flex-direction:column} .dish h3{margin:0 0 6px;font-size:17.5px} .dish p{font-size:15.5px} .dish p:last-child{margin-bottom:0} .dish .tags{margin-top:11px} /* etykiety z konkretami */ .tags{display:flex;flex-wrap:wrap;gap:5px} .tags span{ font-size:11.5px;font-weight:600;line-height:1.5;color:var(--muted); background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px; } /* karta wyróżniona, np. ścieżka wejścia na rynek pracy */ .jobcard{ background:var(--card);border-left:4px solid var(--olive); border-radius:var(--radius);padding:18px 20px;margin:18px 0;box-shadow:var(--shadow); } .jobcard p{margin-bottom:10px} .jobcard p:last-child{margin-bottom:0} .jobcard-cta{border-top:1px solid var(--line-2);padding-top:12px;margin-top:14px;font-size:15.5px;color:var(--muted)} .jobcard-cta a{font-weight:700} .callout{background:#f6e7d3;border-left:4px solid var(--terra);border-radius:0 12px 12px 0;padding:14px 17px;margin:16px 0} .callout p,.callout li{color:#6d4526;font-size:15.5px} .callout b,.callout strong{color:var(--terra-d)} .callout p:last-child{margin-bottom:0} /* kroki */ .steps{display:grid;gap:9px;margin:14px 0} .step{display:flex;gap:13px;align-items:flex-start} .step .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--olive);color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px} .step p{font-size:15.5px;margin-bottom:0} /* tabele */ .tablewrap{overflow-x:auto;margin:16px 0;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)} table{border-collapse:collapse;width:100%;min-width:430px} th,td{text-align:left;padding:10px 14px;font-size:15px;border-bottom:1px solid var(--line-2)} th{background:var(--paper-2);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap} tr:last-child td{border-bottom:none} td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} th.num{text-align:right} tr.total td{font-weight:700;background:#f7efe1} /* metryczka źródła */ .stamp{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)} .stamp b{color:var(--ink);font-weight:600} /* łańcuch formalności */ .chain{list-style:none;padding:0;margin:16px 0 0} .chain li{position:relative;padding:0 0 16px 28px;border-left:2px solid var(--line);font-size:16px;margin:0} .chain li:last-child{border-left-color:transparent;padding-bottom:0} .chain li::before{content:'';position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 3px var(--paper)} .chain b{display:block} .chain small{display:block;color:var(--muted);font-size:14px;margin-top:1px} /* mapa */ figure{margin:16px 0} .mapbox{height:min(70vh,520px);min-height:360px;border-radius:var(--radius);background:var(--paper-2);box-shadow:var(--shadow);z-index:0} .mapbox .leaflet-container{font-family:inherit} .leaflet-tooltip{font-family:inherit;font-size:13px} .svgwrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)} .svgwrap svg{display:block;width:100%;min-width:560px;height:auto} figcaption{font-size:12.5px;color:var(--muted);margin-top:7px} /* legenda mapy */ .maplegend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:11px 2px 0;margin:0} .maplegend li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--body);margin:0} .maplegend i{flex:0 0 auto;display:block} .maplegend .sw{width:11px;height:11px;border-radius:50%} .maplegend .ln-ferry{width:24px;height:0;border-top:3px dashed #2b6e8f} /* linia metra w tekście: kolory są urzędowe, nie brandowe, więc zostają jak są */ .ln{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap} .ln::before{content:'';width:10px;height:10px;border-radius:50%;flex:0 0 auto} .ln.azul::before{background:#1d5bb0} .ln.amarela::before{background:#e0a815} .ln.verde::before{background:#2f8a56} .ln.vermelha::before{background:#c94334} /* nawigacja między stronami */ .pagenav{display:grid;gap:12px;margin:30px 0 0} @media(min-width:620px){.pagenav{grid-template-columns:1fr 1fr}} .pagenav a{ display:block;background:var(--card);border-radius:var(--radius);padding:14px 17px; text-decoration:none;color:var(--ink);box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease; } .pagenav a:hover{transform:translateY(-2px);box-shadow:var(--ring),0 10px 24px -12px rgba(70,58,45,.5)} .pagenav small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px} .pagenav b{font-size:16.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)} /* spis treści */ .toc{background:var(--card);border-radius:var(--radius);padding:15px 19px;margin:0 0 22px;box-shadow:var(--shadow)} .toc h2{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-weight:700} .toc ul{list-style:none;padding:0;margin:0;display:grid;gap:2px} .toc li{margin:0;font-size:15.5px;position:relative;padding-left:15px} .toc li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:1.5px;background:var(--tone,var(--olive))} .toc a{text-decoration:none;color:var(--body)} .toc a:hover{color:var(--terra-d);text-decoration:underline} /* wąski czarny pasek: domyka stronę, nie zabierając miejsca ekranowi nad nim */ footer{ margin-top:40px;padding:15px 0 17px;text-align:center; background:var(--night);border-radius:20px 20px 0 0; color:rgba(255,255,255,.62);font-size:12.5px; } .home footer{margin-top:0;border-radius:0} footer .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 14px} footer p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);margin:0} footer a{color:#e7cfa6;text-decoration:underline;text-underline-offset:3px} footer a:hover{color:#fff} /* Niski ekran (telefon w poziomie, okno przycięte w pionie): osiem wierszy nie zmieści się czytelnie, więc lista wraca do naturalnej wysokości, a przeskoki ekranami się wyłączają, żeby nie chowały treści poza zaczepieniami. */ @media(max-height:520px){ html:has(body.home){scroll-snap-type:none;scroll-padding-top:0} .screen{min-height:0} .index{grid-auto-rows:auto} .row{padding-block:11px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .navtoggle span,.panel img,.pagenav a,.btn{transition:none} }