PageSourceSearch

https://pogoda.city/blog/

html pogoda.city collected 2026-10-02 00:45:03 UTC 34,774 bytes, 1,545 lines download raw bytes

1<!DOCTYPE html>
2<html lang="pl-PL">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Blog o pogodzie | Pogoda.city</title>
7  <meta name="description" content="Teksty o pogodzie w Polsce: jak się ubrać, odczuwalna, AQI, kiedy otwierać IMGW. Bez reklam i bez sezonowej wróżby.">
8  <link rel="canonical" href="https://pogoda.city/blog/">
9  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
10  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
11  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
12  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
13  <link rel="preconnect" href="https://fonts.googleapis.com">
14  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15  <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,650;1,6..72,500&display=swap" rel="stylesheet">
vendor: 66 bytes, lines 15-16
15
16  <script async src="https://www.googletagmanager.com/gtag/js?id=
16G-XHSXD8DB95
vendor: 16 bytes, lines 16-17
16"></script>
17    
17<script>
18      
vendor: 145 bytes, lines 18-21
18window.dataLayer = window.dataLayer || [];
19      function gtag(){dataLayer.push(arguments);}
20      gtag('js', new Date());
21      gtag('config', '
21G-XHSXD8DB95
vendor: 8 bytes, lines 21-22
21');
22    
22</script>
22
23  
24  <style>:root {
25  --ink: #1d3a58;
26  --muted: #4a6a86;
27  --line: #c5dff0;
28  --paper: #eef7fd;
29  --card: #f7fbfe;
30  --rust: #e86a33;
31  --sage: #3db4e6;
32  --sky: #4facfe;
33}
34
35* { box-sizing: border-box; }
36html { scroll-behavior: smooth; }
37
38body {
39  margin: 0;
40  min-height: 100vh;
41  font-family: "Segoe UI", system-ui, sans-serif;
42  color: var(--ink);
43  line-height: 1.55;
44  background:
45    radial-gradient(900px 520px at 0% 0%, rgba(79, 172, 254, 0.28) 0%, transparent 58%),
46    radial-gradient(760px 460px at 100% 8%, rgba(255, 176, 110, 0.22) 0%, transparent 52%),
47    radial-gradient(900px 580px at 50% 100%, rgba(0, 198, 251, 0.18) 0%, transparent 58%),
48    linear-gradient(180deg, #f4fbff 0%, #e7f4fc 48%, #dceef8 100%);
49}
50
51.bg-anim {
52  position: fixed;
53  inset: 0;
54  z-index: 0;
55  overflow: hidden;
56  pointer-events: none;
57}
58
59.bg-anim span {
60  position: absolute;
61  border-radius: 50%;
62  filter: blur(48px);
63  opacity: 0.48;
64  animation: drift 16s ease-in-out infinite;
65}
66
67.bg-anim span:nth-child(1) {
68  width: 520px;
69  height: 520px;
70  background: #7ec8ff;
71  top: -140px;
72  left: -100px;
73}
74
75.bg-anim span:nth-child(2) {
76  width: 420px;
77  height: 420px;
78  background: #ffb07a;
79  right: -110px;
80  top: 12%;
81  animation-delay: -5s;
82}
83
84.bg-anim span:nth-child(3) {
85  width: 560px;
86  height: 560px;
87  background: #9ee7ff;
88  bottom: -200px;
89  left: 22%;
90  animation-delay: -10s;
91}
92
93.bg-anim span:nth-child(4) {
94  width: 300px;
95  height: 300px;
96  background: #ffd59a;
97  right: 16%;
98  bottom: 6%;
99  animation-delay: -2s;
100}
101
102@keyframes drift {
103  0%, 100% { transform: translate(0, 0) scale(1); }
104  50% { transform: translate(36px, -28px) scale(1.12); }
105}
106
107.site-header,
108main,
109.site-footer { position: relative; z-index: 1; }
110
111img { max-width: 100%; }
112a { color: var(--rust); }
113
114.sr-only {
115  position: absolute;
116  width: 1px;
117  height: 1px;
118  overflow: hidden;
119  clip: rect(0, 0, 0, 0);
120}
121
122.site-header {
123  position: sticky;
124  top: 0;
125  z-index: 40;
126  display: flex;
127  align-items: center;
128  justify-content: space-between;
129  gap: 16px;
130  padding: 16px 28px;
131  background: rgba(244, 251, 255, 0.82);
132  backdrop-filter: blur(16px);
133  border-bottom: 1px solid var(--line);
134}
135
136.brand {
137  display: flex;
138  align-items: baseline;
139  gap: 12px 16px;
140  min-width: 0;
141  flex: 1;
142}
143
144.logo {
145  font-weight: 800;
146  font-size: 1.4rem;
147  color: var(--ink);
148  text-decoration: none;
149  letter-spacing: -0.03em;
150  flex-shrink: 0;
151}
152
153.logo span { color: var(--rust); }
154
155.header-h1 a {
156  color: inherit;
157  text-decoration: none;
158}
159
160.header-h1 {
161  margin: 0;
162  font-size: 0.95rem;
163  font-weight: 650;
164  color: var(--muted);
165  letter-spacing: -0.02em;
166  line-height: 1.25;
167  padding-left: 16px;
168  border-left: 1px solid var(--line);
169  white-space: nowrap;
170  overflow: hidden;
171  text-overflow: ellipsis;
172}
173
174.nav-toggle {
175  display: none;
176  border: 1px solid var(--line);
177  background: var(--card);
178  border-radius: 12px;
179  width: 42px;
180  height: 42px;
181  cursor: pointer;
182}
183
184.nav-toggle span,
185.nav-toggle span:before,
186.nav-toggle span:after {
187  display: block;
188  width: 18px;
189  height: 2px;
190  background: var(--ink);
191  margin: 0 auto;
192  position: relative;
193}
194
195.nav-toggle span:before,
196.nav-toggle span:after {
197  content: "";
198  position: absolute;
199  left: 0;
200}
201
202.nav-toggle span:before { top: -6px; }
203.nav-toggle span:after { top: 6px; }
204
205.site-nav {
206  display: flex;
207  align-items: center;
208  gap: 6px 20px;
209}
210
211.site-nav a {
212  color: var(--ink);
213  text-decoration: none;
214  font-weight: 650;
215  font-size: 0.95rem;
216}
217
218.site-nav a:hover,
219.site-nav a.is-active { color: var(--rust); }
220
221.nav-cta {
222  background: var(--rust);
223  color: #fff !important;
224  padding: 9px 16px;
225  border-radius: 999px;
226}
227
228.lang-switcher {
229  position: relative;
230  display: inline-flex;
231  align-items: center;
232}
233
234.lang-btn {
235  display: inline-flex;
236  align-items: center;
237  gap: 6px;
238  padding: 7px 12px;
239  background: var(--card);
240  border: 1px solid var(--line);
241  border-radius: 999px;
242  color: var(--ink);
243  font-size: 0.88rem;
244  font-weight: 650;
245  cursor: pointer;
246  transition: border-color 0.2s, background 0.2s;
247}
248
249.lang-btn:hover,
250.lang-btn:focus-visible {
251  border-color: var(--rust);
252}
253
254.lang-dropdown {
255  display: none;
256  position: absolute;
257  top: calc(100% + 8px);
258  right: 0;
259  min-width: 145px;
260  background: rgba(247, 251, 254, 0.95);
261  backdrop-filter: blur(14px);
262  border: 1px solid var(--line);
263  border-radius: 14px;
264  padding: 6px;
265  box-shadow: 0 12px 32px rgba(29, 58, 88, 0.14);
266  z-index: 100;
267  flex-direction: column;
268  gap: 2px;
269}
270
271.lang-dropdown.is-open {
272  display: flex;
273  animation: langFadeIn 0.18s ease-out;
274}
275
276@keyframes langFadeIn {
277  from { opacity: 0; transform: translateY(-4px); }
278  to { opacity: 1; transform: translateY(0); }
279}
280
281.lang-option {
282  display: flex;
283  align-items: center;
284  gap: 8px;
285  padding: 8px 12px;
286  border-radius: 9px;
287  font-size: 0.88rem;
288  font-weight: 600;
289  color: var(--ink) !important;
290  text-decoration: none;
291  transition: background 0.15s, color 0.15s;
292}
293
294.lang-option:hover {
295  background: rgba(61, 180, 230, 0.12);
296  color: var(--rust) !important;
297}
298
299.lang-option.is-active {
300  background: rgba(232, 106, 51, 0.12);
301  color: var(--rust) !important;
302  font-weight: 750;
303}
304
305.lang-flag {
306  font-size: 1.1rem;
307  line-height: 1;
308}
309
310.hero { padding: 28px 20px 12px; }
311
312.hero-inner,
313.wrap {
314  width: min(1180px, calc(100% - 16px));
315  margin: 0 auto;
316}
317
318.hero-inner {
319  display: flex;
320  flex-direction: column;
321  align-items: center;
322  gap: 10px;
323  text-align: center;
324}
325
326.hero-copy {
327  max-width: 62ch;
328}
329
330.hero-copy .lead,
331.widget-stage .lead {
332  margin: 0 auto 16px;
333  font-size: 1.05rem;
334  max-width: 46ch;
335  color: var(--muted);
336}
337
338.widget-stage {
339  width: min(760px, 100%);
340  margin: 0 auto;
341  text-align: center;
342}
343
344.widget-stage h1 {
345  margin: 0 0 14px;
346  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
347  line-height: 1.15;
348  letter-spacing: -0.04em;
349}
350
351.hero-actions {
352  display: flex;
353  justify-content: center;
354  gap: 12px;
355  flex-wrap: wrap;
356  margin-top: 14px;
357}
358
359.page h1 {
360  margin: 0 0 16px;
361  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
362  line-height: 1.08;
363  letter-spacing: -0.045em;
364}
365
366.lead {
367  margin: 0 0 24px;
368  font-size: 1.12rem;
369  max-width: 46ch;
370  color: var(--muted);
371}
372
373.cta-row {
374  display: flex;
375  gap: 12px;
376  flex-wrap: wrap;
377}
378
379.btn {
380  display: inline-flex;
381  align-items: center;
382  justify-content: center;
383  text-decoration: none;
384  font-weight: 750;
385  border-radius: 999px;
386  padding: 13px 20px;
387  border: 0;
388  cursor: pointer;
389}
390
391.btn-primary {
392  background: var(--rust);
393  color: #fff;
394  box-shadow: 0 8px 20px rgba(232, 106, 51, 0.28);
395}
396
397.btn-ghost {
398  background: rgba(255, 255, 255, 0.78);
399  color: var(--ink);
400  border: 1px solid #9ad0ea;
401}
402
403.widget-shell {
404  width: min(720px, 100%);
405  margin: 0 auto;
406}
407
408.page { padding: 28px 20px 8px; }
409.section { padding: 10px 20px 18px; }
410
411.glass {
412  background: rgba(255, 255, 255, 0.86);
413  border: 1px solid var(--line);
414  border-radius: 28px;
415  padding: 28px 30px;
416  box-shadow: 0 12px 40px rgba(40, 110, 160, 0.08);
417}
418
419.section h2,
420.prose h2,
421.glass h2 {
422  font-size: 1.4rem;
423  line-height: 1.2;
424  margin: 0 0 12px;
425  letter-spacing: -0.03em;
426}
427
428.prose p,
429.note,
430.info-card p,
431details p,
432ol { color: var(--muted); }
433
434.prose p { margin: 0 0 14px; }
435.prose a, .info-card a, details a { font-weight: 700; }
436
437.grid-2 {
438  display: grid;
439  grid-template-columns: 1.15fr 0.85fr;
440  gap: 28px;
441  align-items: start;
442}
443
444.card-list,
445.topics {
446  display: grid;
447  gap: 14px;
448}
449
450.topics { grid-template-columns: repeat(3, 1fr); }
451
452.how-grid {
453  display: grid;
454  grid-template-columns: 1fr 1fr;
455  gap: 36px;
456  align-items: start;
457}
458
459.city-links {
460  display: flex;
461  flex-wrap: wrap;
462  gap: 8px;
463  margin: 14px 0 4px;
464}
465
466.city-links a {
467  background: #f3f9fd;
468  border: 1px solid var(--line);
469  border-radius: 999px;
470  padding: 7px 13px;
471  text-decoration: none;
472  color: var(--ink);
473  font-weight: 650;
474  font-size: 0.9rem;
475}
476
477.city-links a:hover { background: #fff; }
478
479.info-card {
480  background: #f3f9fd;
481  border: 1px solid var(--line);
482  border-radius: 20px;
483  padding: 18px;
484}
485
486.info-card h3 {
487  margin: 0 0 8px;
488  font-size: 1.02rem;
489}
490
491ol { padding-left: 1.15rem; }
492ol li { margin: 8px 0; }
493
494table {
495  width: 100%;
496  border-collapse: collapse;
497  background: var(--card);
498  border-radius: 18px;
499  overflow: hidden;
500  border: 1px solid var(--line);
501}
502
503th, td {
504  text-align: left;
505  padding: 13px 14px;
506  border-bottom: 1px solid var(--line);
507  vertical-align: top;
508}
509
510th {
511  background: #dff1fb;
512  font-size: 0.82rem;
513  letter-spacing: 0.04em;
514  text-transform: uppercase;
515}
516
517.compare td:first-child { font-weight: 800; width: 22%; }
518
519.faq { display: grid; gap: 10px; }
520
521details {
522  background: #f3f9fd;
523  border: 1px solid var(--line);
524  border-radius: 16px;
525  padding: 14px 16px;
526}
527
528summary { cursor: pointer; font-weight: 800; }
529details p { margin: 10px 0 2px; }
530
531.final-cta {
532  margin: 8px auto 36px;
533  width: min(1180px, calc(100% - 40px));
534  background: linear-gradient(135deg, #e86a33 0%, #f4a261 100%);
535  color: #fff;
536  border-radius: 28px;
537  padding: 36px 28px;
538  text-align: center;
539  box-shadow: 0 16px 40px rgba(232, 106, 51, 0.25);
540}
541
542.final-cta h2 { margin: 0 0 8px; }
543.final-cta p { color: #fff6ea; margin: 0 0 18px; }
544.final-cta .btn-primary {
545  background: #fff;
546  color: #c45c26;
547}
548
549.site-footer {
550  padding: 28px 20px 40px;
551  background: rgba(186, 224, 245, 0.42);
552  border-top: 1px solid var(--line);
553}
554
555.footer-inner {
556  width: min(1180px, 100%);
557  margin: 0 auto;
558  display: grid;
559  grid-template-columns: 1.3fr 1fr 1fr;
560  gap: 24px;
561}
562
563.site-footer a {
564  display: block;
565  margin: 6px 0;
566  color: var(--muted);
567  text-decoration: none;
568}
569
570.site-footer strong { display: block; margin-bottom: 8px; }
571.note { font-size: 0.9rem; margin-top: 10px; }
572
573body.landing-dark {
574  --ink: #eaf5ff;
575  --muted: #9db6c9;
576  --line: #2c4a62;
577  --card: #152433;
578  color: var(--ink);
579  background:
580    radial-gradient(900px 520px at 0% 0%, rgba(79, 172, 254, 0.18) 0%, transparent 58%),
581    radial-gradient(760px 460px at 100% 8%, rgba(232, 106, 51, 0.12) 0%, transparent 52%),
582    linear-gradient(180deg, #0c1822 0%, #122433 55%, #0e1c28 100%);
583}
584
585body.landing-dark .site-header {
586  background: rgba(12, 24, 34, 0.86);
587}
588
589body.landing-dark .glass,
590body.landing-dark .info-card,
591body.landing-dark details,
592body.landing-dark table {
593  background: rgba(21, 36, 51, 0.88);
594}
595
596body.landing-dark .btn-ghost {
597  background: rgba(255, 255, 255, 0.08);
598  color: var(--ink);
599  border-color: #3a6a88;
600}
601
602body.landing-dark .lang-btn {
603  background: var(--card);
604  border-color: var(--line);
605  color: var(--ink);
606}
607
608body.landing-dark .lang-dropdown {
609  background: rgba(21, 36, 51, 0.96);
610  border-color: var(--line);
611  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
612}
613
614body.landing-dark .lang-option {
615  color: var(--ink) !important;
616}
617
618body.landing-dark .lang-option:hover {
619  background: rgba(61, 180, 230, 0.18);
620}
621
622body.landing-dark th { background: #1d3548; }
623
624@media (max-width: 920px) {
625  .hero-inner,
626  .grid-2,
627  .topics,
628  .how-grid,
629  .footer-inner { grid-template-columns: 1fr; }
630  .hero-copy { text-align: center; }
631  .lead { margin-left: auto; margin-right: auto; }
632  .cta-row { justify-content: center; }
633  .widget-shell { max-width: 720px; margin: 0 auto; }
634}
635
636@media (max-width: 820px) {
637  .brand { flex-direction: column; gap: 2px; }
638  .header-h1 {
639    padding-left: 0;
640    border-left: 0;
641    font-size: 0.82rem;
642    white-space: normal;
643  }
644  .nav-toggle { display: block; }
645  .site-nav {
646    display: none;
647    position: absolute;
648    top: 72px;
649    left: 12px;
650    right: 12px;
651    background: var(--card);
652    border: 1px solid var(--line);
653    border-radius: 18px;
654    padding: 14px;
655    flex-direction: column;
656    align-items: stretch;
657  }
658  .site-nav.is-open { display: flex; }
659  .nav-cta { text-align: center; }
660}
661
662@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,650;1,6..72,500&display=swap');
663
664body.landing-shell {
665  background:
666    radial-gradient(900px 520px at 0% 0%, rgba(79, 172, 254, 0.28) 0%, transparent 58%),
667    radial-gradient(760px 460px at 100% 8%, rgba(255, 176, 110, 0.22) 0%, transparent 52%),
668    linear-gradient(180deg, #f4fbff 0%, #e7f4fc 48%, #dceef8 100%) !important;
669  color: #1d3a58 !important;
670}
671
672.header-h1 a {
673  color: inherit;
674  text-decoration: none;
675}
676
677.header-h1 a:hover { color: var(--ink); }
678
679/* ----- Blog index ----- */
680
681.blog-index {
682  width: min(1040px, calc(100% - 16px));
683  padding-bottom: 36px;
684}
685
686.blog-index-head {
687  max-width: 40rem;
688  margin: 0 0 28px;
689}
690
691.blog-index-head h1 {
692  margin: 0 0 10px;
693  font-family: Newsreader, Georgia, serif;
694  font-size: clamp(2rem, 4vw, 2.7rem);
695  font-weight: 650;
696  letter-spacing: -0.03em;
697  line-height: 1.15;
698}
699
700.blog-index-head .lead {
701  margin: 0;
702  font-size: 1.08rem;
703  line-height: 1.55;
704  color: var(--muted);
705}
706
707.blog-feature {
708  display: grid;
709  grid-template-columns: 1.15fr 0.85fr;
710  overflow: hidden;
711  margin: 0 0 22px;
712  background: rgba(255, 255, 255, 0.9);
713  border: 1px solid var(--line);
714  border-radius: 28px;
715  text-decoration: none;
716  color: inherit;
717  box-shadow: 0 16px 40px rgba(40, 110, 160, 0.08);
718  transition: transform 0.2s ease, box-shadow 0.2s ease;
719}
720
721.blog-feature:hover {
722  transform: translateY(-3px);
723  box-shadow: 0 22px 48px rgba(40, 110, 160, 0.12);
724}
725
726.blog-feature img {
727  width: 100%;
728  height: 100%;
729  min-height: 280px;
730  object-fit: cover;
731}
732
733.blog-feature-copy {
734  padding: 28px 30px 26px;
735  display: flex;
736  flex-direction: column;
737  justify-content: center;
738}
739
740.blog-feature-copy h2 {
741  margin: 12px 0 10px;
742  font-family: Newsreader, Georgia, serif;
743  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
744  font-weight: 650;
745  letter-spacing: -0.03em;
746  line-height: 1.2;
747  color: var(--ink);
748}
749
750.blog-feature-copy p {
751  margin: 0;
752  color: var(--muted);
753  line-height: 1.55;
754}
755
756.blog-grid {
757  display: grid;
758  grid-template-columns: 1fr 1fr;
759  gap: 18px;
760}
761
762.article-card {
763  background: rgba(255, 255, 255, 0.9);
764  border: 1px solid var(--line);
765  border-radius: 24px;
766  overflow: hidden;
767  box-shadow: 0 10px 28px rgba(40, 110, 160, 0.06);
768  transition: transform 0.2s ease, box-shadow 0.2s ease;
769}
770
771.article-card:hover {
772  transform: translateY(-3px);
773  box-shadow: 0 16px 36px rgba(40, 110, 160, 0.1);
774}
775
776.article-card a {
777  display: flex;
778  flex-direction: column;
779  height: 100%;
780  color: inherit;
781  text-decoration: none;
782}
783
784.article-card img {
785  width: 100%;
786  height: 190px;
787  object-fit: cover;
788}
789
790.article-card .card-body {
791  padding: 16px 18px 18px;
792  display: flex;
793  flex-direction: column;
794  gap: 8px;
795  flex: 1;
796}
797
798.article-card h2 {
799  margin: 0;
800  font-family: Newsreader, Georgia, serif;
801  font-size: 1.22rem;
802  font-weight: 650;
803  line-height: 1.25;
804  letter-spacing: -0.02em;
805  color: var(--ink);
806}
807
808.article-card p {
809  margin: 0;
810  color: var(--muted);
811  font-size: 0.95rem;
812  line-height: 1.5;
813}
814
815.article-category {
816  display: inline-block;
817  width: fit-content;
818  background: #e86a33;
819  color: #fff;
820  padding: 4px 11px;
821  border-radius: 999px;
822  font-size: 0.7rem;
823  font-weight: 700;
824  letter-spacing: 0.06em;
825  text-transform: uppercase;
826}
827
828.article-meta {
829  display: flex;
830  flex-wrap: wrap;
831  gap: 6px 14px;
832  margin-top: auto;
833  padding-top: 6px;
834  font-size: 0.82rem;
835  color: var(--muted);
836}
837
838.article-meta span + span,
839.article-meta time + span {
840  position: relative;
841}
842
843.article-meta span + span::before,
844.article-meta time + span::before {
845  content: "";
846  position: absolute;
847  left: -9px;
848  top: 0.55em;
849  width: 3px;
850  height: 3px;
851  border-radius: 50%;
852  background: #9ab6c9;
853}
854
855/* ----- Article ----- */
856
857.story {
858  padding: 12px 0 48px;
859}
860
861.story-head,
862.story-hero,
863.story-paper,
864.story-related {
865  width: min(760px, calc(100% - 32px));
866  margin-left: auto;
867  margin-right: auto;
868}
869
870.story-hero { width: min(920px, calc(100% - 24px)); }
871
872.story-head { padding: 18px 0 8px; }
873
874.story-title {
875  margin: 14px 0 12px;
876  font-family: Newsreader, Georgia, serif;
877  font-size: clamp(2rem, 4.6vw, 3.05rem);
878  font-weight: 650;
879  letter-spacing: -0.035em;
880  line-height: 1.12;
881  color: var(--ink);
882}
883
884.story-dek {
885  margin: 0 0 16px;
886  font-size: 1.18rem;
887  line-height: 1.5;
888  color: var(--muted);
889}
890
891.story-head .article-meta { margin: 0; }
892
893.story-hero {
894  margin-top: 8px;
895  margin-bottom: 0;
896}
897
898.story-hero img,
899.article-hero {
900  display: block;
901  width: 100%;
902  height: min(52vw, 420px);
903  object-fit: cover;
904  border-radius: 24px;
905  box-shadow: 0 22px 50px rgba(40, 110, 160, 0.16);
906}
907
908.story-paper {
909  margin-top: 28px;
910  padding: 36px 40px 28px;
911  background: rgba(255, 255, 255, 0.92);
912  border: 1px solid var(--line);
913  border-radius: 28px;
914  box-shadow: 0 16px 40px rgba(40, 110, 160, 0.07);
915}
916
917.article-body {
918  font-size: 1.08rem;
919  line-height: 1.75;
920  color: #23445f;
921}
922
923.article-body h2 {
924  margin: 2em 0 0.55em;
925  padding-top: 0.85em;
926  border-top: 1px solid #d7ebf6;
927  font-family: Newsreader, Georgia, serif;
928  font-size: 1.55rem;
929  font-weight: 650;
930  letter-spacing: -0.03em;
931  line-height: 1.25;
932  color: var(--ink);
933}
934
935.article-body h2:first-child {
936  margin-top: 0;
937  padding-top: 0;
938  border-top: 0;
939}
940
941.article-body h3 {
942  margin: 1.6em 0 0.4em;
943  font-size: 1.12rem;
944  font-weight: 750;
945  color: var(--ink);
946}
947
948.article-body p { margin: 0 0 1.15em; color: inherit; }
949
950.article-body a {
951  color: var(--rust);
952  font-weight: 650;
953  text-decoration: underline;
954  text-decoration-thickness: 1px;
955  text-underline-offset: 3px;
956}
957
958.article-body ul {
959  margin: 0 0 1.3em;
960  padding: 0;
961  list-style: none;
962  color: inherit;
963}
964
965.article-body li {
966  position: relative;
967  margin: 0.55em 0;
968  padding-left: 1.35rem;
969  line-height: 1.65;
970}
971
972.article-body li::before {
973  content: "";
974  position: absolute;
975  left: 0;
976  top: 0.7em;
977  width: 7px;
978  height: 7px;
979  border-radius: 50%;
980  background: var(--rust);
981}
982
983.article-body table {
984  width: 100%;
985  margin: 0 0 1.4em;
986  overflow: hidden;
987  border-radius: 14px;
988}
989
990.author-box {
991  display: flex;
992  gap: 16px;
993  align-items: center;
994  margin-top: 32px;
995  padding: 18px 20px;
996  background: linear-gradient(180deg, #f4fbff 0%, #eaf5fb 100%);
997  border: 1px solid var(--line);
998  border-radius: 20px;
999}
1000
1001.author-box img,
1002.author-avatar {
1003  width: 56px;
1004  height: 56px;
1005  border-radius: 50%;
1006  object-fit: cover;
1007  background: #d7f1ff;
1008  flex-shrink: 0;
1009}
1010
1011.author-box strong {
1012  font-size: 1rem;
1013  color: var(--ink);
1014}
1015
1016.story-related {
1017  margin-top: 36px;
1018}
1019
1020.story-related > h2 {
1021  margin: 0 0 16px;
1022  font-family: Newsreader, Georgia, serif;
1023  font-size: 1.45rem;
1024  font-weight: 650;
1025  letter-spacing: -0.03em;
1026}
1027
1028.related-grid {
1029  display: grid;
1030  grid-template-columns: repeat(3, 1fr);
1031  gap: 14px;
1032}
1033
1034.related-card {
1035  display: flex;
1036  flex-direction: column;
1037  overflow: hidden;
1038  background: rgba(255, 255, 255, 0.9);
1039  border: 1px solid var(--line);
1040  border-radius: 20px;
1041  text-decoration: none;
1042  color: inherit;
1043  box-shadow: 0 10px 24px rgba(40, 110, 160, 0.06);
1044  transition: transform 0.2s ease;
1045}
1046
1047.related-card:hover { transform: translateY(-3px); }
1048
1049.related-card img {
1050  width: 100%;
1051  height: 120px;
1052  object-fit: cover;
1053}
1054
1055.related-card .article-category,
1056.related-card strong {
1057  margin: 10px 14px 0;
1058}
1059
1060.related-card strong {
1061  display: block;
1062  margin-bottom: 14px;
1063  font-family: Newsreader, Georgia, serif;
1064  font-size: 1.02rem;
1065  font-weight: 650;
1066  line-height: 1.3;
1067  color: var(--ink);
1068}
1069
1070.story-back {
1071  margin: 22px 0 0;
1072  text-align: center;
1073}
1074
1075.wx-now {
1076  margin: 0 0 18px;
1077  padding: 18px 20px;
1078  background: rgba(255, 255, 255, 0.86);
1079  border: 1px solid var(--line);
1080  border-radius: 20px;
1081}
1082
1083.wx-now-main {
1084  display: flex;
1085  align-items: center;
1086  flex-wrap: wrap;
1087  gap: 12px;
1088}
1089
1090.wx-now-main img {
1091  width: 80px;
1092  height: 80px;
1093}
1094
1095.wx-now-temp {
1096  font-size: 2.6rem;
1097  font-weight: 800;
1098  letter-spacing: -0.04em;
1099  line-height: 1;
1100}
1101
1102.wx-now-grid {
1103  display: grid;
1104  grid-template-columns: 1fr 1fr;
1105  gap: 8px 16px;
1106  margin-top: 12px;
1107  color: var(--muted);
1108}
1109
1110.city-hero {
1111  width: 100%;
1112  height: 240px;
1113  object-fit: cover;
1114  border-radius: 20px;
1115  margin: 0 0 18px;
1116}
1117
1118.seo-block {
1119  margin: 0 0 14px;
1120  padding: 16px 18px;
1121  background: #f3f9fd;
1122  border: 1px solid var(--line);
1123  border-radius: 16px;
1124}
1125
1126.seo-block h3 { margin: 0 0 8px; font-size: 1.02rem; }
1127.seo-block p { margin: 0; color: var(--muted); }
1128
1129.pager {
1130  display: flex;
1131  justify-content: center;
1132  align-items: center;
1133  gap: 12px;
1134  flex-wrap: wrap;
1135  margin: 28px 0 8px;
1136}
1137
1138.header-h1 {
1139  white-space: normal;
1140  max-width: min(42ch, 100%);
1141}
1142
1143.pager a, .pager span, .pager button {
1144  padding: 10px 16px;
1145  border-radius: 999px;
1146  text-decoration: none;
1147  font-weight: 700;
1148}
1149
1150.pager button {
1151  background: #fff;
1152  border: 1px solid var(--line);
1153  color: var(--ink);
1154  cursor: pointer;
1155}
1156
1157.pager button:disabled {
1158  opacity: 0.45;
1159  cursor: default;
1160}
1161
1162.pager a {
1163  background: #fff;
1164  border: 1px solid var(--line);
1165  color: var(--ink);
1166}
1167
1168.narrow { width: min(820px, calc(100% - 24px)); margin: 0 auto; padding: 24px 0 12px; }
1169
1170body.landing-dark .story-paper,
1171body.landing-dark .blog-feature,
1172body.landing-dark .article-card,
1173body.landing-dark .related-card,
1174body.landing-dark .author-box {
1175  background: rgba(21, 36, 51, 0.88);
1176}
1177
1178body.landing-dark .article-body h2 { border-top-color: #2c4c64; }
1179
1180/* ----- City pages ----- */
1181
1182.city-story {
1183  width: min(1080px, calc(100% - 16px));
1184  margin: 0 auto;
1185  padding-bottom: 40px;
1186}
1187
1188.city-story .story-head,
1189.city-story .story-paper,
1190.city-story .story-related,
1191.city-story .city-carousel,
1192.city-story .city-board,
1193.city-story .city-cta,
1194.city-story .city-trivia {
1195  width: 100%;
1196}
1197
1198.city-carousel {
1199  margin: 6px 0 20px;
1200}
1201
1202.city-carousel-stage {
1203  position: relative;
1204}
1205
1206.city-carousel-viewport {
1207  position: relative;
1208  height: min(54vw, 460px);
1209  overflow: hidden;
1210  background: #d5e7f3;
1211  border-radius: 24px;
1212  box-shadow: 0 22px 50px rgba(40, 110, 160, 0.16);
1213}
1214
1215.city-slide {
1216  margin: 0;
1217  height: 100%;
1218}
1219
1220.city-slide[hidden] { display: none !important; }
1221
1222.city-slide img {
1223  display: block;
1224  width: 100%;
1225  height: 100%;
1226  object-fit: cover;
1227}
1228
1229.city-carousel-btn {
1230  position: absolute;
1231  top: 50%;
1232  z-index: 2;
1233  width: 44px;
1234  height: 44px;
1235  transform: translateY(-50%);
1236  border: 0;
1237  border-radius: 999px;
1238  background: rgba(255, 255, 255, 0.92);
1239  box-shadow: 0 8px 20px rgba(20, 60, 90, 0.18);
1240  color: var(--ink);
1241  font-size: 1.7rem;
1242  line-height: 1;
1243  cursor: pointer;
1244}
1245
1246.city-carousel-btn.prev { left: 14px; }
1247.city-carousel-btn.next { right: 14px; }
1248
1249.city-carousel-dots {
1250  position: absolute;
1251  right: 0;
1252  bottom: 16px;
1253  left: 0;
1254  z-index: 2;
1255  display: flex;
1256  justify-content: center;
1257  gap: 7px;
1258}
1259
1260.city-carousel-dots button {
1261  width: 8px;
1262  height: 8px;
1263  padding: 0;
1264  border: 0;
1265  border-radius: 999px;
1266  background: rgba(255, 255, 255, 0.55);
1267  cursor: pointer;
1268}
1269
1270.city-carousel-dots button.is-on {
1271  width: 22px;
1272  background: #fff;
1273}
1274
1275.city-carousel-credit {
1276  margin: 8px 6px 0;
1277  color: var(--muted);
1278  font-size: 0.82rem;
1279}
1280
1281.city-board {
1282  display: grid;
1283  grid-template-columns: 1.2fr 0.8fr;
1284  gap: 14px;
1285  align-items: stretch;
1286  margin: 0 0 10px;
1287}
1288
1289.city-board .wx-now {
1290  margin: 0;
1291  height: 100%;
1292}
1293
1294.city-facts {
1295  display: grid;
1296  grid-template-columns: 1fr 1fr;
1297  gap: 10px;
1298}
1299
1300.city-fact {
1301  display: flex;
1302  flex-direction: column;
1303  justify-content: center;
1304  padding: 14px 16px;
1305  background: rgba(255, 255, 255, 0.9);
1306  border: 1px solid var(--line);
1307  border-radius: 16px;
1308}
1309
1310.city-fact span {
1311  display: block;
1312  margin-bottom: 4px;
1313  color: var(--muted);
1314  font-size: 0.78rem;
1315}
1316
1317.city-fact strong {
1318  font-size: 1.02rem;
1319  font-weight: 750;
1320}
1321
1322.city-cta {
1323  margin: 0 0 8px;
1324  text-align: center;
1325}
1326
1327.city-trivia {
1328  margin: 18px 0 8px;
1329  padding: 22px 24px 18px;
1330  background: #fff8ef;
1331  border: 1px solid var(--line);
1332  border-radius: 22px;
1333}
1334
1335.city-trivia h2 {
1336  margin: 0 0 14px;
1337  font-family: Newsreader, Georgia, serif;
1338  font-size: 1.35rem;
1339  font-weight: 650;
1340}
1341
1342.city-trivia ul {
1343  display: grid;
1344  grid-template-columns: 1fr 1fr;
1345  gap: 10px;
1346  margin: 0;
1347  padding: 0;
1348  list-style: none;
1349}
1350
1351.city-trivia li {
1352  margin: 0;
1353  padding: 14px 16px;
1354  background: rgba(255, 255, 255, 0.72);
1355  border: 1px solid var(--line);
1356  border-radius: 14px;
1357  line-height: 1.45;
1358}
1359
1360body.landing-dark .city-fact,
1361body.landing-dark .city-trivia,
1362body.landing-dark .city-trivia li {
1363  background: rgba(21, 36, 51, 0.88);
1364}
1365
1366@media (max-width: 820px) {
1367  .blog-feature { grid-template-columns: 1fr; }
1368  .blog-feature img { min-height: 200px; height: 220px; }
1369  .blog-grid,
1370  .related-grid { grid-template-columns: 1fr; }
1371  .story-paper { padding: 24px 20px 20px; }
1372  .story-hero img,
1373  .article-hero { height: 220px; }
1374  .city-board { grid-template-columns: 1fr; }
1375  .city-carousel-viewport { height: 240px; }
1376  .city-trivia ul { grid-template-columns: 1fr; }
1377}
1378
1379@media (max-width: 640px) {
1380  .article-card img, .city-hero { width: 100%; height: 180px; }
1381  .wx-now-grid { grid-template-columns: 1fr; }
1382  .story-title { font-size: 1.85rem; }
1383}
1384</style>
1385</head>
1386<body>
1387  <div class="bg-anim" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
1388    <header class="site-header">
1389      <div class="brand">
1390        <a class="logo" href="/">Pogoda<span>.city</span></a>
1391        <p class="header-h1"><a href="/blog/">Blog</a></p>
1392      </div>
1393      <button class="nav-toggle" type="button" aria-label="Otwórz menu" aria-expanded="false"><span></span></button>
1394      <nav class="site-nav">
1395        <a href="/">Pogoda</a>
1396        <a href="/jak-sie-ubrac/">Jak się ubrać</a>
1397        <a href="/rozszerzenie-chrome/">Rozszerzenie Chrome</a>
1398        <a href="/aplikacja-pogoda-bez-reklam/">Bez reklam</a>
1399        <a class="is-active" href="/blog/">Blog</a>
1400        <div class="lang-switcher">
1401          <button class="lang-btn" type="button" aria-label="Wybierz język">
1402            <span class="lang-flag">🇵🇱</span> PL ▾
1403          </button>
1404          <div class="lang-dropdown">
1405            <a class="lang-option is-active" href="/" data-lang="pl"><span class="lang-flag">🇵🇱</span> Polski</a>
1406            <a class="lang-option" href="/en/" data-lang="en"><span class="lang-flag">🇬🇧</span> English</a>
1407            <a class="lang-option" href="/es/" data-lang="es"><span class="lang-flag">🇪🇸</span> Español</a>
1408            <a class="lang-option" href="/it/" data-lang="it"><span class="lang-flag">🇮🇹</span> Italiano</a>
1409            <a class="lang-option" href="/ru/" data-lang="ru"><span class="lang-flag">🇷🇺</span> Русский</a>
1410          </div>
1411        </div>
1412        <a class="nav-cta" href="https://chromewebstore.google.com/detail/pogodacity-szybka-prognoz/phcbldhpdabpmjphgocglhcllfefcjma">Dodaj do Chrome</a>
1413      </nav>
1414    </header>
1415  <main>
1416    <section class="page">
1417    <div class="wrap blog-index">
1418      <header class="blog-index-head">
1419        <h1>Blog o pogodzie</h1>
1420        <p class="lead">Ubiór, odczuwalna, smog, radar IMGW, mikroklimaty miast. Bez radaru na pół ekranu i bez wróżby na maj.</p>
1421      </header>
1422      
1423    <a class="blog-feature" href="/blog/temperatura-odczuwalna-co-to-jest/">
1424      <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1425      <div class="blog-feature-copy">
1426        <span class="article-category">Poradnik</span>
1427        <h2>Temperatura odczuwalna: czemu 12 stopni kłamie</h2>
1428        <p>Termometr pokazuje 12°C, a Ty marzniesz. Odczuwalna bierze wiatr i to, jak skóra traci ciepło. Po polsku, bez wzoru na tablicy.</p>
1429        <div class="article-meta">20.08.2026 · 11 min</div>
1430      </div>
1431    </a>
1432      <div class="blog-grid">
1433    <article class="article-card">
1434      <a href="/blog/jakosc-powietrza-aqi-kiedy-nie-biegac/">
1435        <img src="https://images.unsplash.com/photo-1518005020951-ec7bfe95ce72?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1436        <div class="card-body">
1437          <span class="article-category">Zdrowie</span>
1438          <h2>Jakość powietrza w mieście: kiedy AQI mówi „zostań w domu”</h2>
1439          <p>Zimą w kotlinach powietrze stoi. AQI nie jest ozdobą aplikacji. Kiedy bieganie na zewnątrz ma tyle sensu co trening w garażu.…</p>
1440          <div class="article-meta">18.08.2026 · 10 min</div>
1441        </div>
1442      </a>
1443    </article>
1444    <article class="article-card">
1445      <a href="/blog/jak-sie-ubrac-warstwowo-w-polskiej-pogodzie/">
1446        <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1447        <div class="card-body">
1448          <span class="article-category">Poradnik</span>
1449          <h2>Jak ubierać się warstwowo, gdy Polska zmienia pogodę trzy razy dziennie</h2>
1450          <p>Cebula nie jest metaforą z bloga lifestylowego. Rano 4°C, w południe 14°C, wieczór deszcz. Co zostaje na sobie, a co ląduje w plecaku.…</p>
1451          <div class="article-meta">16.08.2026 · 9 min</div>
1452        </div>
1453      </a>
1454    </article>
1455    <article class="article-card">
1456      <a href="/blog/kiedy-sprawdzac-imgw-a-kiedy-wystarczy-pogoda-city/">
1457        <img src="https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1458        <div class="card-body">
1459          <span class="article-category">Poradnik</span>
1460          <h2>Kiedy otwierać IMGW, a kiedy wystarczy Pogoda.city</h2>
1461          <p>Nie konkurujemy z radarami i alertami. Rozpisujemy, do czego jest która strona, żeby nie szukać burzy w asystencie ubioru.…</p>
1462          <div class="article-meta">14.08.2026 · 8 min</div>
1463        </div>
1464      </a>
1465    </article>
1466    <article class="article-card">
1467      <a href="/blog/godzinowka-pogody-kiedy-wystarczy-piec-dni/">
1468        <img src="https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1469        <div class="card-body">
1470          <span class="article-category">Poradnik</span>
1471          <h2>Godzinówka czy 5 dni: na co starczy prognoza, a na co nie</h2>
1472          <p>Ikona na środę kłamie częściej niż słupek na 15:00. Kiedy patrzeć godzinowo, kiedy wystarczy piątek-niedziela, a kiedy to już horoskop.…</p>
1473          <div class="article-meta">12.08.2026 · 8 min</div>
1474        </div>
1475      </a>
1476    </article>
1477    <article class="article-card">
1478      <a href="/blog/parasol-czy-kurtka-kiedy-naprawde-pada/">
1479        <img src="https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?w=1600&amp;q=80" alt="" onerror="this.style.display='none'">
1480        <div class="card-body">
1481          <span class="article-category">Poradnik</span>
1482          <h2>Parasol, kurtka czy nic: kiedy godzinówka kłamie w sprawie deszczu</h2>
1483          <p>0,2 mm to nie ulewa. 8 mm w 20 minut zmoczy dżinsy na wylot. Jak czytać opad, wilgotność i wiatr, żeby nie nosić parasola dla zasady.…</p>
1484          <div class="article-meta">10.08.2026 · 8 min</div>
1485        </div>
1486      </a>
1487    </article></div>
1488      <div class="pager"><span>Poprzednia</span><span>Strona 1 z 4</span><a href="/blog/page/2/">Następna</a></div>
1489    </div>
1490  </section>
1491  </main>
1492  <footer class="site-footer">
1493      <div class="footer-inner">
1494        <div>
1495          <a class="logo" href="/">Pogoda<span>.city</span></a>
1496          <p class="note">Minimalistyczna pogoda bez reklam. Asystent ubioru i rozszerzenie Chrome.</p>
1497        </div>
1498        <div>
1499          <strong>Strony</strong>
1500          <a href="/">Minimalistyczna pogoda</a>
1501          <a href="/jak-sie-ubrac/">Jak się ubrać do pogody</a>
1502          <a href="/rozszerzenie-chrome/">Rozszerzenie Chrome</a>
1503          <a href="/aplikacja-pogoda-bez-reklam/">Pogoda bez reklam</a>
1504          <a href="/blog/">Blog</a>
1505        </div>
1506        <div>
1507          <strong>Pobierz</strong>
1508          <a href="https://chromewebstore.google.com/detail/pogodacity-szybka-prognoz/phcbldhpdabpmjphgocglhcllfefcjma">Chrome Web Store</a>
1509          <a href="https://play.google.com/store/apps/details?id=city.pogoda.twa">Google Play</a>
1510          <a href="https://pogoda.city/privacy">Polityka prywatności</a>
1511        </div>
1512      </div>
1513    </footer>
1514    
1514<script>
1515      const toggle = document.querySelector('.nav-toggle');
1516      const nav = document.querySelector('.site-nav');
1517      if (toggle && nav) {
1518        toggle.addEventListener('click', () => {
1519          const open = nav.classList.toggle('is-open');
1520          toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
1521        });
1522      }
1523      document.querySelectorAll('.lang-switcher').forEach((switcher) => {
1524        const btn = switcher.querySelector('.lang-btn');
1525        const dropdown = switcher.querySelector('.lang-dropdown');
1526        if (!btn || !dropdown) return;
1527        btn.addEventListener('click', (e) => {
1528          e.stopPropagation();
1529          dropdown.classList.toggle('is-open');
1530        });
1531        dropdown.querySelectorAll('.lang-option').forEach((opt) => {
1532          opt.addEventListener('click', () => {
1533            const lang = opt.getAttribute('data-lang');
1534            if (lang) {
1535              try { localStorage.setItem('user_lang', lang); } catch (_) {}
1536            }
1537          });
1538        });
1539      });
1540      document.addEventListener('click', () => {
1541        document.querySelectorAll('.lang-dropdown.is-open').forEach((d) => d.classList.remove('is-open'));
1542      });
1543    </script>
1543
1544</body>
1545</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.