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&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&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&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&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&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&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.