/* atrakcjeturystyczne.eu — jeden arkusz, bez bundlera. Kolory z faviconu: grafit prowadzi, bursztyn tylko na akcje i uwagę. */ :root { color-scheme: light; --papier: #ffffff; --kosc: #f7f4ed; --grafit: #14120f; --tekst: #3a372f; --wyciszony: #7a746a; --linia: #e6e2d8; --bursztyn: #f0b400; --bursztyn-ciemny: #e0a400; --bursztyn-jasny: #fdf3d4; --ciemna: #14120f; /* zostaje ciemna w obu motywach */ --na-ciemnym: #ffffff; --na-ciemnym-cichy: #c9c3b6; --na-ciemnym-cichszy: #8f887b; --plakietka: rgba(255,255,255,.93); --uwaga: #9a3b12; --woda: #1d4e89; --na-bursztynie: #14120f; /* tekst NA bursztynie — zawsze prawie czarny, 10:1 */ --bursztyn-tekst: #6b5310; /* bursztynowy tekst NA papierze */ --szer: 1180px; --promien: 3px; } /* Fonty z własnego serwera — bez Google Fonts, żeby nie wysyłać IP gości do trzeciej strony i nie czekać na obce połączenie. Wersje zmiennoosiowe. */ @font-face { font-family: 'Bricolage'; src: url('/assets/fonty/bricolage-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage'; src: url('/assets/fonty/bricolage-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Czytanka'; src: url('/assets/fonty/newsreader-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Czytanka'; src: url('/assets/fonty/newsreader-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* — motyw nocny — „auto" idzie za ustawieniem systemu, wybór ręczny zapisuje `data-motyw` na i wygrywa nad systemem w obie strony. */ @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { color-scheme: dark; --papier: #16140f; --kosc: #1e1b16; --grafit: #f1ece2; --tekst: #cfc8ba; --wyciszony: #9a9184; --linia: #2e2a24; --bursztyn: #f0b400; --bursztyn-ciemny: #ffc21f; --bursztyn-jasny: #33290f; --plakietka: rgba(22,20,15,.88); --uwaga: #ff9a63; --woda: #8fb4e0; --na-bursztynie: #14120f; --bursztyn-tekst: #f0b400; } } :root[data-motyw="ciemny"] { color-scheme: dark; --papier: #16140f; --kosc: #1e1b16; --grafit: #f1ece2; --tekst: #cfc8ba; --wyciszony: #9a9184; --linia: #2e2a24; --bursztyn: #f0b400; --bursztyn-ciemny: #ffc21f; --bursztyn-jasny: #33290f; --plakietka: rgba(22,20,15,.88); --uwaga: #ff9a63; --woda: #8fb4e0; --na-bursztynie: #14120f; --bursztyn-tekst: #f0b400; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--papier); color: var(--grafit); font-family: 'Czytanka', Georgia, 'Times New Roman', serif; font-size: 17.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; } h1, h2, h3, .ui { font-family: 'Bricolage', 'Segoe UI', system-ui, sans-serif; letter-spacing: -0.02em; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; text-wrap: balance; } p { margin: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--grafit); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 2px; } .pomijacz { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ciemna); color: var(--na-ciemnym); padding: 12px 18px; } .pomijacz:focus { left: 0; } .srodek { max-width: var(--szer); margin: 0 auto; padding: 0 24px; } /* — nagłówek — Przyklejony przy przewijaniu: na stronie atrakcji tekst ma ponad 900 słów, a menu z wyszukiwarką i licznikiem planu ma sens dopiero wtedy, gdy jest pod ręką przez cały czas. Tło półprzezroczyste z rozmyciem, żeby zdjęcia przejeżdżające pod spodem było widać, ale nie przeszkadzały w czytaniu. Bez `backdrop-filter` (starsze przeglądarki) zostaje pełne tło — dlatego kolor bazowy jest nieprzezroczysty, a przezroczystość dokłada @supports. */ .gora { background: var(--papier); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 40; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .gora { background: color-mix(in srgb, var(--papier) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } /* Nagłówek zasłaniałby cel skoku po kliknięciu w kotwicę albo w okruszek. */ :target, [id] { scroll-margin-top: 84px; } .gora__srodek { max-width: var(--szer); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .znak { display: flex; align-items: center; gap: 10px; } .znak span { font-family: 'Bricolage', system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; } .znak:hover { text-decoration: none; } .menu { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; color: var(--tekst); line-height: 1.2; } .menu > * { display: inline-flex; align-items: center; } .menu__tresc { display: flex; align-items: center; gap: 26px; } .menu__akcje { display: flex; align-items: center; gap: 10px; } /* Bieżąca sekcja podkreślona bursztynem. `/atrakcje` obejmuje kategorie i strony miejsc, więc podświetlenie nie gaśnie tam, gdzie ludzie siedzą. */ .menu__tresc a { position: relative; padding: 6px 0; } .menu__tresc a[aria-current] { color: var(--grafit); font-weight: 600; } .menu__tresc a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--bursztyn); border-radius: 2px; } .pigula { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--linia); border-radius: 999px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: border-color .15s ease, background .15s ease; } .pigula:hover { text-decoration: none; border-color: var(--bursztyn); background: var(--bursztyn-jasny); } .pigula svg { color: var(--wyciszony); } .pigula:hover svg { color: var(--bursztyn-ciemny); } /* Planer niesie stan użytkownika, więc ma się wyróżniać — ale bursztyn na całej pigułce krzyczał głośniej niż cokolwiek na stronie. Zostaje bursztynowa obwódka i jasne tło; pełny kolor wraca dopiero w liczniku, czyli wtedy, gdy w planie naprawdę coś jest. */ .pigula--plan { border-color: var(--bursztyn); background: var(--bursztyn-jasny); color: var(--grafit); font-weight: 600; } .pigula--plan svg { color: var(--bursztyn-ciemny); } .pigula--plan:hover { background: var(--bursztyn); border-color: var(--bursztyn); } .pigula--plan:hover svg { color: var(--na-bursztynie); } .pigula__licznik { background: var(--bursztyn); color: var(--na-bursztynie); border-radius: 999px; padding: 1px 7px; font-size: 12.5px; font-weight: 700; } /* — pasek kategorii pod nagłówkiem (tylko listingi) — */ .pas-kategorii { border-top: 0; } /* jeden blok z rzędem menu, jak w makiecie */ .pas-kategorii__srodek { max-width: var(--szer); margin: 0 auto; padding: 0 24px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .pas-kategorii__srodek::-webkit-scrollbar { display: none; } .pas-kategorii a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--tekst); } .pas-kategorii a:hover { text-decoration: none; border-bottom-color: var(--linia); } .pas-kategorii a[aria-current] { border-bottom-color: var(--bursztyn); color: var(--grafit); font-weight: 600; } .pas-kategorii__licz { color: var(--wyciszony); font-size: 12.5px; } /* Kolory kategorii: w dzień jak w katalogu, w nocy rozjaśnione, bo ciemne odcienie giną na ciemnym tle. */ .ikona-kat { --kat-kolor: var(--kat-baza); } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .ikona-kat { --kat-kolor: color-mix(in oklab, var(--kat-baza) 62%, #ffffff); } } :root[data-motyw="ciemny"] .ikona-kat { --kat-kolor: color-mix(in oklab, var(--kat-baza) 62%, #ffffff); } /* — przełącznik motywu — Jeden przycisk zamiast trzech: klik przechodzi auto → jasny → ciemny. Ikona pokazuje stan, `aria-label` go nazywa. */ .motyw { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linia); border-radius: 999px; background: transparent; color: var(--tekst); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .motyw:hover { border-color: var(--wyciszony); color: var(--grafit); } .motyw svg { display: none; } .motyw[data-motyw-stan="auto"] .motyw__auto, .motyw[data-motyw-stan="jasny"] .motyw__jasny, .motyw[data-motyw-stan="ciemny"] .motyw__ciemny { display: block; } /* — przyciski — */ .btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; font-family: 'Bricolage', system-ui, sans-serif; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: var(--promien); cursor: pointer; } .btn:hover { text-decoration: none; } /* Tekst na bursztynie: prawie czarny, w obu motywach. Wcześniej brał `--grafit`, który w nocy się odwraca (jasny na jasnym), a potem przez chwilę złotobrązowy `#6b5310` — czytelny w 3,9:1, czyli za słabo jak na przycisk. Biały dałby 1,9:1, więc odpada mimo że wygląda „czysto". */ .btn--glowny { background: var(--bursztyn); color: var(--na-bursztynie); } .btn--glowny:hover { background: var(--bursztyn-ciemny); } .btn--cichy { background: transparent; color: var(--tekst); border-color: var(--linia); } .btn--cichy:hover { border-color: var(--wyciszony); } /* — okładka strony głównej — */ .oklad { position: relative; height: 500px; overflow: hidden; } .oklad__slajd { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; } .oklad__slajd.jest { opacity: 1; pointer-events: auto; } .oklad img { width: 100%; height: 500px; object-fit: cover; } .oklad__slajd figcaption { position: absolute; right: 16px; bottom: 74px; z-index: 3; } .oklad__slajd figcaption a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(20,18,15,.55); color: #fff; font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; backdrop-filter: blur(3px); } .oklad__slajd figcaption a:hover { background: rgba(20,18,15,.75); text-decoration: none; } .oklad__kropki { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 3; display: flex; justify-content: center; gap: 8px; } .oklad__kropki button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: background .2s ease, transform .2s ease; } .oklad__kropki button[aria-selected="true"] { background: var(--bursztyn); transform: scale(1.25); } .oklad__cien { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(20,18,15,.62) 0%, rgba(20,18,15,.28) 46%, rgba(20,18,15,.10) 70%, rgba(20,18,15,.45) 100%), linear-gradient(90deg, rgba(20,18,15,.45) 0%, rgba(20,18,15,0) 62%); } .oklad__tresc { position: absolute; left: 0; right: 0; top: 54px; z-index: 3; max-width: var(--szer); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; color: var(--na-ciemnym); } .oklad__nadtytul { font-family: 'Bricolage', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e8e3d4; } .oklad h1 { font-size: clamp(32px, 5vw, 60px); max-width: 14ch; color: var(--na-ciemnym); } .oklad__lead { font-size: 18px; max-width: 46ch; color: #f2eee5; text-shadow: 0 1px 12px rgba(20,18,15,.5); } /* — wyszukiwarka wchodząca na okładkę — */ .szukajka { position: relative; margin-top: -46px; z-index: 2; background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; box-shadow: 0 12px 34px rgba(20,18,15,.10); } .szukajka--strona { margin-top: 8px; box-shadow: none; } .szukajka--strona .podpowiedzi { top: 66px; } .szukajka__pole { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--kosc); border-radius: var(--promien); color: var(--wyciszony); } .szukajka__pole input { border: 0; background: transparent; font: inherit; color: var(--grafit); width: 100%; outline: none; font-size: 17px; } .szukajka__pole input::placeholder { color: var(--wyciszony); } .szukajka__skroty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; } .skrot { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; cursor: pointer; border: 1px solid var(--linia); border-radius: 999px; color: var(--tekst); background: var(--papier); font: inherit; } .skrot:hover { border-color: var(--wyciszony); background: var(--kosc); text-decoration: none; } .skrot span { color: var(--wyciszony); font-size: 12.5px; } .skrot--pogoda { border-color: var(--bursztyn); background: var(--bursztyn-jasny); } .skrot--pogoda svg { color: var(--bursztyn-ciemny); } .skrot--deszcz svg { color: #5f7f9a; } /* — panel filtrów w lewej kolumnie — */ .z-filtrami { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 34px; align-items: start; } .z-filtrami__wyniki { min-width: 0; } .karty.karty--waskie { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel-filtrow { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--linia); border-radius: var(--promien); padding: 20px; } .panel-filtrow__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .panel-filtrow__glowa h2 { font-family: 'Bricolage', system-ui, sans-serif; font-size: 17px; font-weight: 600; margin: 0; } .panel-filtrow__wyczysc { font-size: 13.5px; color: var(--wyciszony); text-decoration: underline; } .grupa-filtrow { display: flex; flex-direction: column; gap: 10px; } .grupa-filtrow h3 { font-family: 'Bricolage', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wyciszony); margin: 0; display: flex; align-items: center; gap: 7px; } .grupa-filtrow h3 svg { flex-shrink: 0; } /* — blisko mnie i suwak odległości — */ .grupa-filtrow--blisko { padding-bottom: 18px; border-bottom: 1px solid var(--linia); } .blisko__wlacz { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); cursor: pointer; color: var(--grafit); font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; font-weight: 500; } .blisko__wlacz:hover { border-color: var(--bursztyn); background: var(--bursztyn-jasny); } .blisko__wlacz[disabled] { opacity: .6; cursor: default; } .blisko__nota { font-size: 12.5px; line-height: 1.45; color: var(--wyciszony); margin: 0; } .blisko { display: flex; flex-direction: column; gap: 8px; } .blisko__suwak { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; } .blisko__suwak span { font-size: 14px; color: var(--tekst); } .blisko__suwak output { font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; font-weight: 600; } .blisko__suwak input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--bursztyn-ciemny); } .blisko__wylacz { font-size: 13px; color: var(--wyciszony); text-decoration: underline; align-self: flex-start; } .wiersz__odleglosc { font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--grafit); } .grupa-filtrow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .filtr { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 3px; font-size: 14.5px; color: var(--tekst); } .filtr__nazwa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filtr__ikona { display: flex; color: var(--wyciszony); flex-shrink: 0; } .filtr--wlaczony .filtr__ikona { color: var(--grafit); } .filtr--kategoria .filtr__ikona { opacity: .9; } /* przełącznik — czytelniej niż pole wyboru mówi „włączone / wyłączone" */ .przelacznik { width: 32px; height: 18px; border-radius: 999px; background: var(--linia); display: inline-flex; align-items: center; padding: 2px; flex-shrink: 0; transition: background .18s ease; } .przelacznik > span { width: 14px; height: 14px; border-radius: 50%; background: var(--papier); display: block; transition: transform .18s ease; box-shadow: 0 1px 2px rgba(20,18,15,.25); } .filtr--wlaczony .przelacznik { background: var(--bursztyn); } .filtr--wlaczony .przelacznik > span { transform: translateX(14px); } .filtr:hover .przelacznik { background: var(--wyciszony); } .filtr--wlaczony:hover .przelacznik { background: var(--bursztyn-ciemny); } .filtr:hover { background: var(--kosc); text-decoration: none; } .filtr__znacznik { width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid var(--linia); border-radius: 3px; background: var(--papier); } .filtr--wlaczony { color: var(--grafit); font-weight: 500; } .filtr--wlaczony .filtr__znacznik { background: var(--ciemna); border-color: var(--ciemna); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } .filtr__nazwa { flex-grow: 1; } .filtr__ile { margin-right: 2px; } .filtr__ile { color: var(--wyciszony); font-size: 13px; font-variant-numeric: tabular-nums; } .filtr--pusty { opacity: .45; } /* — dawny pasek pigułek (zostaje dla zgodności) — */ .filtry { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 22px; } .filtry__rzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filtry__etykieta { font-family: 'Bricolage', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wyciszony); min-width: 88px; } .pigulka { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--linia); border-radius: 999px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; color: var(--tekst); } .pigulka:hover { border-color: var(--wyciszony); text-decoration: none; background: var(--kosc); } .pigulka--wlaczona { background: var(--ciemna); color: var(--na-ciemnym); border-color: var(--ciemna); } .pigulka--wlaczona:hover { background: var(--ciemna); } .pigulka--wlaczona svg { stroke: currentColor; } .pigulka--wyczysc { color: var(--wyciszony); border-style: dashed; } .wyniki__ile { margin-bottom: 6px; } /* — podpowiedzi pod polem wyszukiwania — */ .szukajka { position: relative; } .podpowiedzi { position: absolute; left: 18px; right: 18px; top: 74px; z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: 0 14px 38px rgba(20,18,15,.14); max-height: 380px; overflow-y: auto; } .podpowiedzi li a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--promien); color: var(--grafit); } .podpowiedzi li a:hover, .podpowiedzi li.wybrana a { background: var(--kosc); text-decoration: none; } .podpowiedzi img, .podpowiedzi__brak { width: 54px; height: 42px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: var(--kosc); display: block; } .podpowiedzi__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .podpowiedzi__opis strong { font-family: 'Bricolage', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .podpowiedzi__opis small { font-size: 13px; color: var(--wyciszony); } /* — drobne fakty na kafelku — */ .karta__fakty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .karta__fakt { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: var(--kosc); border-radius: 999px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 12.5px; color: var(--tekst); } /* — nagłówek kategorii — */ .glowa-kategorii { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding: 8px 0 26px; } .glowa-kategorii__tekst { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; } .glowa-kategorii h1 { font-size: clamp(30px, 4vw, 44px); } .glowa-kategorii__wstep { font-size: 17.5px; line-height: 1.65; color: var(--tekst); } .glowa-kategorii__bok { border: 1px solid var(--linia); border-radius: var(--promien); padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--kosc); } .glowa-kategorii__liczba { font-family: 'Bricolage', system-ui, sans-serif; font-size: 34px; font-weight: 600; line-height: 1; } .glowa-kategorii__inne { display: flex; flex-direction: column; gap: 7px; } .glowa-kategorii__inne a { display: flex; align-items: center; gap: 9px; font-size: 15px; } .glowa-kategorii__inne span { color: var(--wyciszony); margin-left: auto; font-size: 13.5px; } /* — pas z mapą — */ .pas { background: var(--kosc); margin-top: 48px; } .pas__srodek { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-top: 40px; padding-bottom: 40px; flex-wrap: wrap; } .pas__tekst { max-width: 620px; display: flex; flex-direction: column; gap: 10px; } .pas__tekst h2 { font-size: clamp(24px, 3vw, 32px); } .pas__tekst p { color: var(--tekst); } /* — tekst o regionie plus panel z liczbami po prawej — */ .oregionie { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } .tekst-regionu { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; } .liczby { border: 1px solid var(--linia); border-radius: var(--promien); padding: 22px; display: flex; flex-direction: column; gap: 16px; background: var(--kosc); } .liczby ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .liczby li { font-size: 15.5px; color: var(--tekst); display: flex; align-items: baseline; gap: 9px; } .liczby strong { font-family: 'Bricolage', system-ui, sans-serif; font-size: 22px; font-weight: 600; color: var(--grafit); min-width: 2.4ch; } .liczby .btn { justify-content: center; } /* — planer: filtry, lista do wyboru, plan — */ /* Kolumny boczne oddały po kilkadziesiąt pikseli środkowi: filtry to lista pojedynczych słów, a „Twój plan" przy pustym stanie i tak stoi pusty. Tekst wiersza rośnie o 56 px — tyle, żeby długi tytuł zmieścił się w jednej linii, a nazwy kategorii w filtrach dalej nie ucinały się wielokropkiem. */ /* — cechy trasy i udogodnienia w terenie — Cechy stoją pod paskiem liczb jako chipy: odpowiadają na „jaka jest ta trasa". Udogodnienia idą do panelu bocznego, bo odpowiadają na co innego — „co zastanę na miejscu" — i to one decydują, czy da się tam spędzić pół dnia. */ .cechy-trasy { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } .cecha-trasy { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--linia); border-radius: 999px; background: var(--papier); font-size: 14px; color: var(--tekst); } .cecha-trasy svg { color: var(--wyciszony); flex: none; } /* Plakietki na kadrze trasy: długość z „pętlą" po lewej, trudność po prawej. Odpowiadają na dwa różne pytania — „ile tego jest" i „czy dam radę" — więc stoją osobno, ale w jednej linii, bliżej tytułu. Pasek liczb pod kadrem był i tak pełny, a dół zdjęcia stał pusty. To jeden rząd, a nie dwie niezależnie ustawione plakietki: obie dzielą szerokość kadru, więc długa lewa ustępuje miejsca prawej zamiast wejść pod nią. Trudność wpisuje się w panelu ręcznie, a nazwy tras rosną. */ .karta__plakietki { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; } .karta__nakadrze { padding: 5px 11px; border-radius: 999px; background: var(--plakietka); color: var(--grafit); font-family: 'Bricolage', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; } /* ustępuje wielokropkiem, gdy zabraknie miejsca */ .karta__nakadrze--liczby { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* `auto` zamiast `space-between`: sama trudność, bez liczb, ma zostać po prawej */ .karta__nakadrze--trudnosc { margin-left: auto; flex: none; } /* Cechy na kafelku listingu — ten sam chip, tylko mniejszy. Pierwsza cecha jedzie w nadtytule kafelka, więc tutaj stoi reszta. */ .karta__cechy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .cecha-trasy--drobna { padding: 4px 10px; gap: 6px; font-size: 12.5px; } .udogodnienia { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .udogodnienia li { display: flex; align-items: center; gap: 10px; font-size: 15px; } .udogodnienia svg { color: var(--bursztyn-ciemny); flex: none; } .planer-uklad { display: grid; grid-template-columns: 244px minmax(0, 1fr) 288px; gap: 24px; align-items: start; } .planer-lista { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .planer-plan { position: sticky; top: 84px; } .planer-plan .panel { display: flex; flex-direction: column; gap: 12px; } /* Zdjęcie i tekst obok siebie, stopka pod obojgiem — przez całą szerokość, nie tylko pod kolumną tekstu. Dzięki temu wszystko, co w niej stoi, mieści się w jednej linii nawet przy wąskiej środkowej kolumnie. */ .wiersz { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 12px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); } .wiersz:not(:has(.wiersz__foto)) { grid-template-columns: minmax(0, 1fr); } .wiersz__foto img { width: 168px; height: 118px; object-fit: cover; border-radius: 3px; display: block; } .wiersz__opis { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .wiersz__opis h3 { font-family: 'Bricolage', system-ui, sans-serif; font-size: 17px; font-weight: 600; } .wiersz__opis p { font-size: 15px; line-height: 1.5; color: var(--wyciszony); } .wiersz__opis h3 a { display: block; } .wiersz__stopka { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--linia); } .wiersz__stopka .karta__fakt { flex: none; } /* Pogoda dosunięta do prawej razem z przyciskiem — stan nieba i decyzja „biorę" należą do siebie, a fakty po lewej czyta się jako jedną grupę. */ .wiersz__stopka .wiersz__pogoda { margin-left: auto; flex: none; } .wiersz__stopka .karta__plan { flex: none; margin: 0; } .wiersz__pogoda { display: inline-flex; align-items: center; gap: 5px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; color: var(--wyciszony); } .plan--waski .plan__przystanek { padding: 10px; gap: 10px; } .plan--waski .plan__opis h3 { font-family: 'Bricolage', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; } .plan--waski .plan__meta, .plan--waski .plan__pogoda { font-size: 13px; } .plan--waski .plan__przejazd { padding: 6px 0 6px 40px; font-size: 13px; } .plan__suma { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; color: var(--tekst); } @media (max-width: 1200px) { .planer-uklad { grid-template-columns: 258px minmax(0, 1fr); } .planer-plan { grid-column: 1 / -1; position: static; } } @media (max-width: 800px) { .planer-uklad { grid-template-columns: minmax(0, 1fr); } .wiersz { grid-template-columns: 110px minmax(0, 1fr); } .wiersz__foto img { width: 110px; height: 82px; } /* Na telefonie stopka nie zmieści się w jednej linii — łamiemy ją, ale przycisk zostaje na końcu i dalej dosunięty do prawej. */ .wiersz__stopka { flex-wrap: wrap; gap: 7px; } .wiersz__stopka .wiersz__pogoda { margin-left: auto; } } /* — planer: przyciski — (licznik siedzi teraz w pigułce w nagłówku) */ .do-planu { cursor: pointer; background: var(--papier); font: inherit; } .do-planu.w-planie { background: var(--bursztyn); border-color: var(--bursztyn); color: var(--na-bursztynie); } .karta__plan { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--linia); border-radius: 999px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; color: var(--tekst); margin-top: 4px; } .karta__plan:hover { border-color: var(--wyciszony); } .plan { display: flex; flex-direction: column; } .plan__przystanek { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); } .plan__numer { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--ciemna); color: var(--na-ciemnym); display: flex; align-items: center; justify-content: center; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; font-weight: 600; } .plan__przystanek img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--promien); flex-shrink: 0; } .plan__opis { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 0; } .plan__opis h2 { font-size: 20px; } .plan__meta { font-size: 14.5px; color: var(--wyciszony); } .plan__pogoda { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--tekst); } .plan__pogoda--uwaga { color: var(--uwaga); } .plan__akcje { display: flex; flex-direction: column; gap: 4px; } .plan__ruch { width: 30px; height: 26px; border: 1px solid var(--linia); background: var(--papier); border-radius: var(--promien); cursor: pointer; color: var(--tekst); font-size: 14px; line-height: 1; } .plan__ruch:hover:not([disabled]) { border-color: var(--wyciszony); } .plan__ruch[disabled] { opacity: .35; cursor: default; } .plan__ruch--usun:hover { border-color: #c1121f; color: #c1121f; } .plan__przejazd { display: flex; align-items: center; gap: 9px; padding: 10px 0 10px 46px; color: var(--wyciszony); font-size: 14px; } /* — pogoda — */ .panel__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pogoda__zrodlo { font-size: 12px; color: var(--wyciszony); } .pogoda__teraz { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .pogoda__ikona { color: var(--bursztyn-ciemny); display: flex; } .pogoda__stopnie { font-family: 'Bricolage', system-ui, sans-serif; font-size: 28px; font-weight: 600; display: block; line-height: 1.1; } .pogoda__opis { font-size: 14.5px; color: var(--tekst); } .pogoda__dni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linia); } .pogoda__dzien { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--wyciszony); } .pogoda__dzien svg { color: var(--wyciszony); } .pogoda__nazwa-dnia { font-size: 13px; } .pogoda__temp-dnia { font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--grafit); } .pogoda__deszcz { font-size: 11.5px; color: var(--woda); } /* — parkingi i szlaki — */ .parkingi { display: flex; flex-direction: column; gap: 10px; } .parking { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--linia); border-radius: var(--promien); color: var(--wyciszony); } .parking--zalecany { border-color: var(--bursztyn); background: var(--bursztyn-jasny); } .parking__opis { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; } .parking__nazwa { font-family: 'Bricolage', system-ui, sans-serif; font-size: 16px; font-weight: 600; color: var(--grafit); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .parking__meta { font-size: 14.5px; color: var(--wyciszony); } .parking__nawiguj { font-family: 'Bricolage', system-ui, sans-serif; font-size: 14px; font-weight: 500; padding: 9px 16px; border: 1px solid var(--linia); border-radius: var(--promien); color: var(--grafit); background: var(--papier); white-space: nowrap; } .parking__nawiguj:hover { border-color: var(--wyciszony); text-decoration: none; } .plakietka { font-family: 'Bricolage', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bursztyn-tekst); background: var(--papier); border-radius: 999px; padding: 3px 9px; } .szlaki { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .szlak { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--linia); border-radius: var(--promien); } .szlak__kolor { width: 12px; height: 12px; border-radius: 50%; display: block; flex-shrink: 0; } .szlak__nazwa { font-family: 'Bricolage', system-ui, sans-serif; font-size: 15.5px; font-weight: 500; } .szlak__meta { color: var(--wyciszony); font-size: 14.5px; margin-left: auto; } .dojscie { margin-top: 16px; font-size: 16px; color: var(--tekst); } /* — listy punktowane w treści tras — */ .punkty { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .punkty li { font-size: 17px; line-height: 1.6; color: var(--tekst); position: relative; padding-left: 22px; } /* Własny znacznik zamiast kropki przeglądarki: równa się z pierwszym wierszem także wtedy, gdy punkt łamie się na kilka linii. */ .punkty li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--wyciszony); } .tekst-regionu p, .akapit-szeroki { font-size: 17.5px; line-height: 1.7; color: var(--tekst); max-width: 68ch; } .akapit-szeroki a { text-decoration: underline; text-underline-offset: 2px; } /* — chmurka miejscowości — */ .chmurka { display: flex; flex-wrap: wrap; gap: 8px; } .chmurka a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border: 1px solid var(--linia); border-radius: 999px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; } .chmurka a span { color: var(--wyciszony); font-size: 12.5px; } .chmurka a:hover { border-color: var(--wyciszony); background: var(--bursztyn-jasny); text-decoration: none; } /* — sekcje — */ .sekcja { padding: 44px 0 8px; } .sekcja__glowa { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; } .sekcja h2 { font-size: clamp(24px, 3vw, 34px); } .sekcja__podpis { font-size: 16px; color: var(--wyciszony); margin-top: 6px; } /* — kategorie — */ .kategorie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .kafel { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 16px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--grafit); } .kafel:hover { border-color: var(--wyciszony); text-decoration: none; } .kafel__nazwa { font-family: 'Bricolage', system-ui, sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.2; } .kafel__ile { font-size: 13px; color: var(--wyciszony); } /* — karty miejsc — */ .karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .karta { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); } /* Kafelek unosi się przy najechaniu. Cień w nocy prawie nie istnieje (ciemne na ciemnym), więc motyw nocny dostaje jaśniejszą obwódkę — inaczej ruch byłby, a informacji zwrotnej nie. */ .karta { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .karta:hover { border-color: var(--wyciszony); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20, 18, 15, .09); } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .karta:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } } :root[data-motyw="ciemny"] .karta:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } .karta > a { display: block; } /* tylko link ze zdjęciem, nie każdy link w kafelku */ .karta__zdjecie { position: relative; } .karta__pogoda { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--plakietka); font-family: 'Bricolage', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--grafit); backdrop-filter: blur(2px); } .karta__pogoda svg { color: var(--bursztyn-ciemny); } /* Odległość na kadrze, nie w tekście — „7,2 km stąd" jest odpowiedzią na pytanie „czy to po drodze", a taką odpowiedź czyta się wzrokiem, nie zdaniem. Prawy górny róg, bo lewy zajmuje plakietka pogodowa. Ciemne tło zamiast jasnego: musi być czytelne na każdym zdjęciu. */ /* — kafelek: wariant „na zdjęciu" — Tekst leży na kadrze, więc musi mieć własne tło: gradient od dołu. Bez niego napis znika na jasnym niebie, a takich kadrów mamy sporo. */ .karta--foto { border: 0; background: transparent; } .karta--foto .karta__zdjecie { display: block; position: relative; border-radius: var(--promien); overflow: hidden; } .karta--foto img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .35s ease; } .karta--foto:hover img { transform: scale(1.04); } .karta__na-zdjeciu { position: absolute; inset: auto 0 0 0; padding: 52px 16px 14px; display: flex; flex-direction: column; gap: 7px; /* ramp zaczyna się wysoko nad pierwszym wierszem, bo kategoria stała na samej górze zasłony i ginęła na jasnym niebie */ background: linear-gradient(rgba(12, 11, 9, 0), rgba(12, 11, 9, .62) 34%, rgba(12, 11, 9, .93) 72%); color: #fff; } .karta--foto .karta__kat { color: rgba(255, 255, 255, .9); } .karta__tytul { font-family: 'Bricolage', system-ui, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.15; } .karta--foto .karta__fakt { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .karta__plan--na-zdjeciu { margin-top: 10px; } .karta__odleglosc { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(20, 18, 15, .72); color: #fff; font-family: 'Bricolage', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(3px); } .karta__pogoda em { font-style: normal; color: var(--woda); font-size: 11.5px; } .karta img { width: 100%; height: 190px; object-fit: cover; } .karta__tresc { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; } .karta__kat { display: flex; align-items: center; gap: 7px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--wyciszony); } .karta h3 { font-size: 21px; } .karta p { font-size: 15.5px; line-height: 1.55; color: var(--tekst); } /* — strona atrakcji — */ .okruszki { display: flex; gap: 9px; flex-wrap: wrap; padding: 22px 0 0; font-size: 14.5px; color: var(--wyciszony); } .tytul { padding: 16px 0 24px; display: flex; flex-direction: column; gap: 14px; } .tytul--waski { padding-top: 0; } .tytul h1 { font-size: clamp(30px, 4.4vw, 52px); } .znacznik { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 13px; border-radius: 999px; background: var(--bursztyn-jasny); font-family: 'Bricolage', system-ui, sans-serif; font-size: 13px; font-weight: 500; } .metryczka { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 16px; color: var(--tekst); } /* Galeria dopasowuje się do liczby zdjęć — przy jednym nie zostawiamy dziury. */ .galeria { display: grid; gap: 10px; margin: 0; } .galeria img { border-radius: var(--promien); width: 100%; object-fit: cover; } .galeria--jedno { grid-template-columns: 1fr; } .galeria--jedno .galeria__duze img { height: clamp(280px, 38vw, 460px); } .galeria--dwa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria--dwa img { height: clamp(220px, 26vw, 330px); } .galeria--wiele { grid-template-columns: 2fr 1fr; } .galeria--wiele .galeria__duze img { height: 400px; } .galeria--wiele .galeria__male { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; } .galeria--wiele .galeria__male img { height: 195px; } .galeria__podpis, .galeria__wiecej { grid-column: 1 / -1; margin: 0; } .galeria__wiecej { font-size: 14px; color: var(--wyciszony); } /* Podpis autora — obowiązkowy przy zdjęciach na licencjach CC. */ .podpis { font-size: 12.5px; line-height: 1.5; color: var(--wyciszony); margin: 0; text-wrap: pretty; } .podpis a { white-space: nowrap; } /* Na kafelku podpis musi zmieścić się w jednej linii — przy dwóch wyglądał jak urwany akapit. Pełna treść zostaje w atrybucie title i na stronie miejsca. */ .karta__tresc .podpis { padding-top: 4px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .galeria__podpis .podpis { padding: 4px 0 0; } .podpis a { color: var(--wyciszony); text-decoration: underline; } /* Mapa Google wciągana na kliknięcie. */ .panel--mapa { margin-top: 0; } .mapka { margin-top: 14px; border-radius: var(--promien); overflow: hidden; background: var(--kosc); } .mapka iframe { display: block; width: 100%; height: 260px; border: 0; } .mapka { min-height: 260px; } /* Pasek dalszych kadrów pod głównym zdjęciem. */ .galeria__pasek { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .galeria__pasek a { position: relative; display: block; } .galeria__pasek img { height: 110px; } .galeria__duze a, .galeria__male a, .galeria__pasek a { display: block; overflow: hidden; border-radius: var(--promien); } .galeria__duze a img, .galeria__male a img, .galeria__pasek a img { transition: transform .35s ease; } .galeria__duze a:hover img, .galeria__male a:hover img, .galeria__pasek a:hover img { transform: scale(1.055); } .galeria__reszta::after { content: ''; position: absolute; inset: 0; background: rgba(20,18,15,.62); border-radius: var(--promien); } .galeria__reszta span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; color: #fff; font-family: 'Bricolage', system-ui, sans-serif; font-size: 20px; font-weight: 600; } /* Powiększenie zdjęcia. */ body.bez-przewijania { overflow: hidden; } .lupa { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(12,11,9,.94); padding: 32px 60px; align-items: center; justify-content: center; } .lupa.otwarta { display: flex; animation: lupa-wejscie .18s ease-out; } @keyframes lupa-wejscie { from { opacity: 0; } to { opacity: 1; } } .lupa__ramka { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 12px; } .lupa img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border-radius: var(--promien); opacity: 0; transition: opacity .25s ease; } .lupa img.jest { opacity: 1; } .lupa figcaption { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; color: #cfc9bd; font-size: 13.5px; } .lupa figcaption .podpis { padding: 0; color: #cfc9bd; } .lupa figcaption .podpis a { color: #e6e0d4; } .lupa__licznik { font-family: 'Bricolage', system-ui, sans-serif; white-space: nowrap; } .lupa__zamknij, .lupa__strzalka { position: absolute; background: rgba(255,255,255,.10); border: 0; color: #fff; cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; } .lupa__zamknij:hover, .lupa__strzalka:hover { background: rgba(255,255,255,.2); } .lupa__zamknij { top: 18px; right: 18px; font-size: 30px; } .lupa__strzalka--wstecz { left: 12px; top: 50%; transform: translateY(-50%); } .lupa__strzalka--dalej { right: 12px; top: 50%; transform: translateY(-50%); } /* Film i wirtualny spacer. */ .wideo { position: relative; border-radius: var(--promien); overflow: hidden; cursor: pointer; } .wideo img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; filter: brightness(.78); } .wideo iframe { width: 100%; height: clamp(220px, 34vw, 420px); border: 0; display: block; } .wideo__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--bursztyn); color: var(--grafit); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; } .wideo:hover .wideo__play { transform: scale(1.08); } .wideo__nota { position: absolute; left: 14px; bottom: 12px; color: #f3efe6; font-size: 13px; background: rgba(20,18,15,.55); padding: 5px 10px; border-radius: 999px; } .spacer iframe { width: 100%; height: clamp(260px, 40vw, 460px); border: 0; border-radius: var(--promien); display: block; } /* Pytania — zwijane, ale treść siedzi w HTML od razu. */ /* Jak w makiecie: pytania jako karty, a nie wiersze oddzielone kreską. */ .faq__pozycja { border: 1px solid var(--linia); border-radius: var(--promien); background: var(--kosc); padding: 14px 18px; transition: border-color .15s ease; } .faq__pozycja[open] { background: var(--papier); border-color: var(--wyciszony); } .faq__pozycja:hover { border-color: var(--wyciszony); } .faq__pozycja summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq__pozycja summary::-webkit-details-marker { display: none; } .faq__pozycja summary::after { content: '+'; font-family: 'Bricolage', system-ui, sans-serif; font-size: 22px; color: var(--wyciszony); line-height: 1; flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--papier); border: 1px solid var(--linia); } .faq__pozycja[open] summary::after { background: var(--bursztyn); border-color: var(--bursztyn); color: var(--na-bursztynie); } .faq__pozycja[open] summary::after { content: '\2212'; } .faq__pozycja summary:hover .faq__pytanie { color: var(--bursztyn-ciemny); } .faq__pozycja .faq__odpowiedz { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--linia); } /* Pasek czterech faktów pod galerią. To pierwsza rzecz po zdjęciach, bo odpowiada na pytanie, które człowiek zadaje przed przeczytaniem czegokolwiek: ile to trwa i czy dam radę. */ .pasek-faktow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; padding: 18px 20px; background: var(--kosc); border: 1px solid var(--linia); border-radius: var(--promien); } .fakt-glowny { display: flex; align-items: center; gap: 12px; min-width: 0; } .fakt-glowny__ikona { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--papier); border: 1px solid var(--linia); color: var(--grafit); } .fakt-glowny__nazwa { display: block; font-family: 'Bricolage', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wyciszony); } .fakt-glowny__wartosc { display: block; font-family: 'Bricolage', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; color: var(--grafit); line-height: 1.3; } /* — trasy — Zdjęcia z tras to w większości pionowe kadry 1080×1440. Poprzedni szablon wciskał je w poziome pasy 1200×460 i 480×140, więc były przycięte i zgniecione. Okładka trzyma proporcje z ograniczoną wysokością, a galeria to siatka kwadratów, w których kadr jest przycięty świadomie. */ .okladka-trasy { margin: 26px 0 0; } .okladka-trasy img { width: 100%; max-height: 520px; object-fit: cover; object-position: center; border-radius: var(--promien); } .kadry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kadry__jedno { display: block; border-radius: var(--promien); overflow: hidden; } .kadry__jedno img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .35s ease; } .kadry__jedno:hover img { transform: scale(1.055); } /* Ślad i profil rysujemy sami z GPX — bez kafelków, kluczy i cudzych skryptów. */ :root { --slad-cien: #e6e2d8; } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --slad-cien: #2e2a24; } } :root[data-motyw="ciemny"] { --slad-cien: #2e2a24; } .slad-ramka { background: var(--kosc); border-radius: var(--promien); padding: 6px; margin-top: 12px; } .slad { display: block; width: 100%; height: auto; } .profil-ramka { background: var(--kosc); border-radius: var(--promien); padding: 10px 12px; } .profil { display: block; width: 100%; height: 130px; } /* Mapa trasy w prawej kolumnie: do kliknięcia leży tu nasz szkic, potem wchodzi MapLibre z kafelkami OpenFreeMap. */ .panel--mapa { padding: 16px; } .mapa-trasy { position: relative; margin-top: 12px; background: var(--kosc); border-radius: var(--promien); overflow: hidden; } .mapa-trasy__szkic { padding: 6px; } /* Przyciski pod szkicem, nie na nim — w wąskiej kolumnie zasłaniały pętlę. */ .panel__przyciski { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .panel__przyciski .btn { width: 100%; justify-content: center; } /* Mapa otwiera się w oknie na przyciemnionym tle — tak samo jak powiększone zdjęcia. Pełny ekran był przesadą: mapa zajmowała wszystko, a i tak patrzy się na środek kadru. `100dvh`, nie `100vh`, bo na telefonie pasek adresu chowa się i zabiera ze sobą dolną krawędź. */ .mapa-okno { position: fixed; inset: 0; z-index: 95; display: none; background: rgba(12, 11, 9, .94); padding: 32px 60px; align-items: center; justify-content: center; } .mapa-okno.otwarta { display: flex; animation: lupa-wejscie .18s ease-out; } .mapa-okno__ramka { /* własne tło: zanim wejdą kafelki, ma być neutralna płaszczyzna, a nie przeświecająca strona pod spodem */ background: var(--kosc); width: min(1100px, 100%); height: min(720px, 100dvh - 130px); height: min(720px, calc(100dvh - 130px)); border-radius: var(--promien); overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); } .mapa-okno__plotno { width: 100%; height: 100%; } .mapa-okno__plotno .maplibregl-map { height: 100%; font: inherit; } .mapa-okno__zamknij { position: absolute; top: 18px; right: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 0; background: rgba(255, 255, 255, .10); color: #fff; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; } .mapa-okno__zamknij:hover { background: rgba(255, 255, 255, .2); } /* —————————————————————————————————————————————————————————————— Kolumna treści, panele boczne i stopka. Ten fragment został odtworzony 2026-08-20 po tym, jak podmiana bloku z mapą wycięła go razem ze sobą (regex sięgnął do następnego @media). Wartości odpowiadają temu, co było wcześniej; komentarze mówią dlaczego. —————————————————————————————————————————————————————————————— */ /* — układ „podział" na stronie atrakcji — Tytuł, metryczka i fakty po lewej, zdjęcia po prawej. Czas, wstęp i dojście widać wtedy razem z kadrem, bez przewijania. */ .podzial { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 40px; align-items: start; margin-top: 8px; } .podzial__tekst { display: flex; flex-direction: column; gap: 4px; } .pasek-faktow--pion { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; } .podzial__duze { display: block; border-radius: var(--promien); overflow: hidden; } .podzial__duze img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform .35s ease; } .podzial__duze:hover img { transform: scale(1.045); } .podzial__miniatury { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .podzial__miniatury a { display: block; position: relative; border-radius: var(--promien); overflow: hidden; } .podzial__miniatury img { width: 100%; height: 76px; object-fit: cover; display: block; transition: transform .35s ease; } .podzial__miniatury a:hover img { transform: scale(1.055); } /* Trzy dzieci, dwa rzędy: artykuł i blok treści pokrewnej jeden pod drugim w lewej kolumnie, panel boczny obok nich przez oba rzędy. W kodzie panel stoi POŚRODKU, między artykułem a treścią pokrewną — dzięki temu po złożeniu kolumn na telefonie pogoda i mapa wychodzą przed linkami do innych miejsc, a nie na samym końcu strony. Odstęp między rzędami taki sam jak między sekcjami artykułu, żeby szew między nimi nie był widoczny. */ .kolumny { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 44px; padding: 36px 0 48px; align-items: start; } .kolumny > .artykul, .kolumny__dalej { grid-column: 1; } .kolumny > aside { grid-column: 2; } /* Rozciągnięcie na oba rzędy tylko tam, gdzie ten drugi w ogóle jest — strona trasy i wpisu mają same dwie kolumny i dostałyby pusty rząd na dole. Bez obsługi `:has()` panel po prostu nie jedzie sticky przez blok pod artykułem; układ zostaje ten sam. */ .kolumny:has(.kolumny__dalej) > aside { grid-row: 1 / span 2; } .kolumny__dalej { display: flex; flex-direction: column; gap: 20px; } /* Kolumna opisu ma około 66 znaków w wierszu. Bez tego ograniczenia tekst rozlewał się na całe 796 px kolumny — blisko 90 znaków w linii, przy których oko gubi początek następnej i najlepiej napisany akapit czyta się jak płachta. Zdjęcia, karty i FAQ zostają szerokie: kontrast wąskiego tekstu i pełnego kadru robi za rytm strony. */ .artykul { display: flex; flex-direction: column; gap: 20px; } .artykul > p, .artykul > .punkty, .artykul > .uwaga, .artykul > .ciekawostka { max-width: 66ch; } .artykul > .faq { max-width: 72ch; } /* karty pytań szersze niż tekst, ale nie na całą kolumnę */ /* Nagłówek należy do sekcji POD sobą: dużo powietrza nad, mało pod. Przy równych odstępach nie było widać, gdzie kończy się jedna myśl. */ .artykul h2 { font-size: 27px; max-width: 26ch; margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--linia); } .artykul h2:first-of-type { margin-top: 6px; } .artykul p { font-size: 17px; line-height: 1.72; color: var(--tekst); } .artykul .lead { font-size: 20px; line-height: 1.6; color: var(--grafit); max-width: 60ch; } .artykul a { text-decoration: underline; text-underline-offset: 2px; } /* Uwaga: jedna rzecz, którą trzeba wiedzieć przed wyjazdem. Bursztyn wolno tu użyć — paleta rezerwuje go dla akcji i ostrzeżeń, a to jest ostrzeżenie. */ .uwaga { display: flex; gap: 12px; align-items: flex-start; background: var(--kosc); border-left: 3px solid var(--bursztyn); border-radius: 0 var(--promien) var(--promien) 0; padding: 14px 18px; } .uwaga svg { color: var(--bursztyn-ciemny); flex: none; margin-top: 3px; } .uwaga p { font-size: 16.5px; line-height: 1.6; } /* Ciekawostka to odwrotność uwagi: nie ostrzega, tylko nagradza czytanie. Dlatego bez bursztynu — kolor akcji zostaje przy tym, co wymaga reakcji. Ramka zamiast paska z boku, żeby dwa wyróżnienia dało się odróżnić kątem oka, a nie dopiero po przeczytaniu. */ .ciekawostka { display: flex; gap: 12px; align-items: flex-start; background: var(--kosc); border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px 18px; } .ciekawostka svg { color: var(--wyciszony); flex: none; margin-top: 2px; } .ciekawostka__etykieta { display: block; margin-bottom: 4px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wyciszony); } .ciekawostka p { font-size: 16.5px; line-height: 1.6; } /* Prawa kolumna jedzie razem ze stroną — przy długim opisie fakty i mapa zostają pod ręką zamiast uciekać na górę. 84 px, bo tyle zajmuje przyklejony nagłówek. */ .kolumny > aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; } /* Pytania i odpowiedzi — treść widoczna od razu, bez zwijania, żeby wyszukiwarka i człowiek czytali to samo. */ .faq { display: flex; flex-direction: column; gap: 10px; } .faq__pytanie { font-family: 'Bricolage', system-ui, sans-serif; font-size: 18px; font-weight: 600; margin: 0; } .faq__odpowiedz { font-size: 16.5px; line-height: 1.65; color: var(--tekst); margin: 0; } /* — panele boczne — */ .panel { border: 1px solid var(--linia); border-radius: var(--promien); padding: 20px; } .panel__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .panel__tytul { font-family: 'Bricolage', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wyciszony); } .panel__nota { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia); font-size: 13.5px; line-height: 1.55; color: var(--wyciszony); } .panel__nota a { color: var(--tekst); text-decoration: underline; text-underline-offset: 2px; } .panel__akcja { margin-top: 14px; text-align: center; } .panel__akcja .btn { width: 100%; justify-content: center; } .metryczka__link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; font-weight: 500; padding: 7px 13px; border: 1px solid var(--linia); border-radius: 999px; } .metryczka__link:hover { border-color: var(--wyciszony); text-decoration: none; background: var(--bursztyn-jasny); } /* Fakty trwałe: dwie kolumny, bo to krótkie pary nazwa–wartość. */ .fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 16px; } .fakt { min-width: 0; } .fakt__nazwa { display: block; font-size: 13px; color: var(--wyciszony); } .fakt__wartosc { display: block; font-family: 'Bricolage', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; color: var(--grafit); line-height: 1.35; } /* — pogoda w panelu — */ .panel--pogoda .pogoda__zrodlo { font-size: 12px; color: var(--wyciszony); } .pogoda__teraz { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .pogoda__ikona { color: var(--bursztyn-ciemny); flex: none; } .pogoda__stopnie { display: block; font-family: 'Bricolage', system-ui, sans-serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--grafit); } .pogoda__opis { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tekst); } .pogoda__dni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linia); } .pogoda__dzien { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pogoda__dzien svg { color: var(--wyciszony); } .pogoda__nazwa-dnia { font-size: 12px; color: var(--wyciszony); text-transform: lowercase; } .pogoda__temp-dnia { font-family: 'Bricolage', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; color: var(--grafit); } .pogoda__deszcz { font-size: 12px; color: var(--woda); } /* — w okolicy — */ .okolica { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .okolica__karta { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--linia); border-radius: var(--promien); padding: 12px; } .okolica__karta:hover { border-color: var(--wyciszony); text-decoration: none; } .okolica__karta img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--promien); } .okolica__karta strong { font-family: 'Bricolage', system-ui, sans-serif; font-size: 16px; font-weight: 600; } /* W wąskiej kolumnie karty idą jedna pod drugą, ze zdjęciem z boku — trzy w rzędzie łamały nazwy po jednej literze. */ .okolica--pionowa { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; } .okolica--pionowa .okolica__karta { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; } .okolica--pionowa .okolica__karta img { width: 76px; height: 62px; } .okolica--pionowa .okolica__karta strong { font-size: 15px; line-height: 1.25; display: block; } /* — strona mapy — */ .mapa-glowa { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; margin-bottom: 26px; } .mapa-wstep { display: flex; flex-direction: column; gap: 14px; max-width: 66ch; } .mapa-wstep p { font-size: 17px; line-height: 1.7; color: var(--tekst); } .mapa-bok { border: 1px solid var(--linia); border-radius: var(--promien); padding: 20px; } .mapa-bok__lista { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .mapa-bok__lista a { display: flex; align-items: center; gap: 9px; font-size: 15px; } .mapa-bok__lista a span:last-child { margin-left: auto; color: var(--wyciszony); font-size: 13.5px; } .mapa-bok__kropka { width: 10px; height: 10px; border-radius: 50%; flex: none; } .mapa-bok .btn { width: 100%; justify-content: center; } .mapa-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; margin-top: 30px; } .mapa-legenda__pozycja { display: flex; gap: 14px; align-items: flex-start; } .mapa-legenda__ikona { width: 44px; height: 44px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .mapa-legenda h3 { font-size: 17px; display: flex; align-items: baseline; gap: 8px; } .mapa-legenda__ile { color: var(--wyciszony); font-size: 13.5px; font-weight: 400; } .mapa-legenda p { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--tekst); } /* — pasy w treści (planer, widget) — Pasy na całą szerokość mają w środku `.pas__srodek`, który robi za rząd i wypełnienie. Te dwa w treści strony głównej mają tekst i przyciski bezpośrednio w sobie, więc to one muszą być rzędem — bez tego tekst kleił się do krawędzi, a przycisk wychodził poza blok. */ .pas--w-tresci { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-top: 44px; padding: 34px 36px; border-radius: var(--promien); } .pas--w-tresci .pas__tekst { flex: 1 1 460px; } .pas--widget { background: var(--ciemna); color: var(--na-ciemnym-cichy); } .pas--widget h2 { color: var(--na-ciemnym); } /* Akapit dziedziczył `--tekst`, czyli kolor pisany pod jasne tło — na ciemnym pasie dawało to około 2:1 i tekst praktycznie znikał. */ .pas--widget .pas__tekst p { color: var(--na-ciemnym-cichy); } .pas--widget .btn--cichy { border-color: rgba(255,255,255,.3); color: var(--na-ciemnym); } .pas--widget .btn--cichy:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); } .pas__akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 0 0 auto; } .pas__przyklad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .pas__przyklad span { font-family: 'Bricolage', system-ui, sans-serif; font-size: 13.5px; padding: 5px 11px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linia); color: var(--tekst); } .pas--widget .pas__przyklad span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--na-ciemnym-cichy); } /* — strona kontaktu — */ .kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; } .kontakt__karta { border: 1px solid var(--linia); border-radius: var(--promien); padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .kontakt__karta p { font-size: 15.5px; line-height: 1.6; color: var(--tekst); } .kontakt__duzy { font-family: 'Bricolage', system-ui, sans-serif; font-size: 19px; font-weight: 600; color: var(--grafit); text-decoration: underline; text-underline-offset: 3px; } .kontakt__drobne { font-size: 14px; color: var(--wyciszony); text-decoration: underline; text-underline-offset: 2px; } /* Profile: na ekranie sam znak, nazwa zostaje w `aria-label` — tak samo jak w stopce, żeby oba miejsca wyglądały jak jeden serwis. */ .kontakt__spoleczne { display: flex; gap: 10px; margin-top: 2px; } .kontakt__spoleczne a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linia); border-radius: 999px; color: var(--grafit); transition: border-color .15s ease, background .15s ease, color .15s ease; } .kontakt__spoleczne a:hover { border-color: var(--bursztyn); background: var(--bursztyn-jasny); } .kontakt__spoleczne a:focus-visible { outline: 2px solid var(--bursztyn-ciemny); outline-offset: 2px; } /* — pusty wynik, strony prawne, kafelek wpisu — */ .pustka { border: 1px dashed var(--linia); border-radius: var(--promien); padding: 34px 24px; text-align: center; color: var(--wyciszony); } .pustka p { margin-bottom: 12px; } .tekst-prawny { max-width: 70ch; } .karta--wpis .karta__zdjecie img { height: 168px; } /* — taśma z Instagrama — Sekcja wychodzi poza kolumnę treści: nagłówek zostaje w kolumnie, a zdjęcia idą od krawędzi do krawędzi. */ .instagram-pas { margin-top: 56px; padding-top: 8px; padding-bottom: 0; } .instagram-pas__glowa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .instagram-pas__glowa h2 { font-size: clamp(24px, 3vw, 34px); } .instagram { overflow: hidden; } /* Wysokość ramki ustawia skrypt LightWidget; `min-height` tylko po to, żeby strona nie skakała, zanim to zrobi. */ .instagram iframe { width: 100%; min-height: 300px; border: 0; display: block; } /* — stopka — Nie pasek prawny, tylko mapa serwisu. Kilkanaście linków w głąb katalogu na każdej podstronie robi za linkowanie wewnętrzne, którego stronie brakowało; prawne schodzą do wąskiego pasa na dole. */ .dol { background: var(--ciemna); color: var(--na-ciemnym-cichy); margin-top: 56px; } /* Taśma ze zdjęciami ma dotykać stopki. Decyduje o tym strona, przekazując flagę do stopka() — selektor sąsiedztwa nie mógł tu działać, bo taśma siedzi w
, a stopka jest rodzeństwem
, nie taśmy. */ .dol--przy-tasmie { margin-top: 0; } .dol__srodek { max-width: var(--szer); margin: 0 auto; padding: 44px 24px 22px; } .dol a { color: var(--na-ciemnym-cichy); } .dol a:hover { color: var(--na-ciemnym); } /* `.dol a` (0-2-0) bije `.btn--glowny` (0-1-0), więc przycisk w stopce dostawał jasnoszary tekst z linków — na bursztynie dawało to 2:1 i napis znikał. Przyciski muszą tu wygrać z kolorem linków. */ .dol .btn--glowny, .dol .btn--glowny:hover { color: var(--na-bursztynie); } .dol .btn--obrys, .dol .btn--obrys:hover { color: var(--na-ciemnym); } .dol__wezwanie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 34px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--promien); } .dol__wezwanie p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 54ch; } .dol__wezwanie strong { color: var(--na-ciemnym); } .dol__wezwanie .btn--glowny { margin-left: auto; } .btn--obrys { border-color: rgba(255, 255, 255, .3); color: var(--na-ciemnym); background: transparent; } .btn--obrys:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); } .dol__kolumny { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; } .dol__marka p { margin: 0; font-size: 14.5px; line-height: 1.62; max-width: 38ch; } .dol__znak { display: inline-flex; align-items: center; gap: 10px; color: var(--na-ciemnym); margin-bottom: 12px; } .dol__znak span { font-family: 'Bricolage', system-ui, sans-serif; font-weight: 700; font-size: 17px; } .dol h2 { font-family: 'Bricolage', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--na-ciemnym-cichszy); margin: 0 0 14px; } .dol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; } .dol ul a { display: inline-flex; align-items: baseline; gap: 7px; } .dol ul a span { color: var(--na-ciemnym-cichszy); font-size: 12.5px; } .dol__spod { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 13px; color: var(--na-ciemnym-cichszy); } .dol__spoleczne { display: flex; gap: 6px; margin-left: auto; } .dol__spoleczne a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; transition: border-color .15s ease, background .15s ease; } .dol__spoleczne a:hover { border-color: var(--bursztyn); background: rgba(255, 255, 255, .06); } /* — baner zgody — Domyślnie `display: none`, pokazuje go klasa `.widoczna`. Atrybut `hidden` przegrywał z `display: flex` z klasy, więc baner nie znikał po kliknięciu. */ .zgoda { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; display: none; gap: 20px; align-items: center; flex-wrap: wrap; max-width: 720px; margin: 0 auto; padding: 18px 22px; background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: 0 12px 34px rgba(20, 18, 15, .16); } .zgoda.widoczna { display: flex; } .zgoda__tekst { font-size: 14.5px; line-height: 1.55; color: var(--tekst); flex: 1 1 320px; margin: 0; } .zgoda__tekst a { text-decoration: underline; text-underline-offset: 2px; } .zgoda__przyciski { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; } [hidden] { display: none !important; } /* Układy dwukolumnowe składają się na wąskim ekranie. Ten blok też zniknął razem z wyciętym fragmentem — bez niego prawa kolumna ściskała treść aż do 620 px. */ @media (max-width: 1000px) { .kolumny { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 36px; } /* jedna kolumna: panel wraca do naturalnej kolejności z kodu */ .kolumny > aside { position: static; grid-column: auto; grid-row: auto; } .oregionie { grid-template-columns: minmax(0, 1fr); gap: 28px; } .glowa-kategorii { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mapa-glowa { grid-template-columns: minmax(0, 1fr); gap: 24px; } .podzial { grid-template-columns: minmax(0, 1fr); gap: 22px; } .podzial__duze img { height: 320px; } .z-filtrami { grid-template-columns: minmax(0, 1fr); gap: 22px; } .z-filtrami > aside { position: static; } .dol__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .okolica { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { body { font-size: 16.5px; } .szukajka { grid-template-columns: 1fr; margin-top: -24px; } .oklad__kropki { bottom: 40px; } .oklad__slajd figcaption { right: 12px; bottom: 40px; } /* Nagłówek na telefonie: sam znak i menu w jednym rzędzie, przewijane w poziomie. Wcześniej nazwa łamała się na dwie linie, a menu na dwa rzędy. */ .gora__srodek { gap: 12px; padding: 12px 16px; } .znak span { display: none; } .menu { flex-wrap: nowrap; overflow-x: auto; gap: 18px; font-size: 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .menu::-webkit-scrollbar { display: none; } .menu a { white-space: nowrap; } .srodek { padding: 0 16px; } .dol__srodek { padding: 30px 16px 20px; } .dol__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .dol__marka { grid-column: 1 / -1; } .dol__wezwanie { padding: 18px; } .dol__wezwanie .btn--glowny { margin-left: 0; } .dol__spoleczne { margin-left: 0; width: 100%; } /* Menu jedzie w poziomie, więc kolejność decyduje o tym, co widać bez przewijania. Akcje idą pierwsze: Szukaj i Planer z licznikiem są tym, po co ktoś sięga w trakcie zwiedzania. Rozdziały serwisu doczekają. */ .menu__akcje { order: -1; gap: 8px; } .menu__tresc { gap: 18px; } .pigula { padding: 6px 12px; } .pigula--plan { padding: 6px 12px; } .pas-kategorii__srodek { padding: 0 16px; } .kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pasek-faktow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; } .kadry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .karta--foto img { height: 230px; } .pasek-faktow--pion { grid-template-columns: minmax(0, 1fr); } /* Na telefonie 36 px wypełnienia zjadałoby jedną piątą szerokości ekranu. */ .pas--w-tresci { padding: 24px 20px; gap: 20px; } .pas__akcje { width: 100%; } .pas__akcje .btn { flex: 1 1 auto; justify-content: center; } .kontakt { grid-template-columns: minmax(0, 1fr); } .mapa-glowa { grid-template-columns: minmax(0, 1fr); gap: 22px; } .mapa-legenda { grid-template-columns: minmax(0, 1fr); } .okolica--pionowa .okolica__karta { grid-template-columns: 68px minmax(0, 1fr); } .okladka-trasy img { max-height: 380px; } .fakt-glowny__ikona { width: 36px; height: 36px; } .karty, .okolica { grid-template-columns: minmax(0, 1fr); } .oklad, .oklad img { height: 380px; } .oklad__tresc { top: 28px; } .menu { gap: 16px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ——— blog ——— */ /* W kolumnie z treścią jest miejsce na dwa kafelki, nie trzy — przy trzech zostaje po ~150 px i tekst łamie się co drugie słowo. */ .artykul .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 700px) { .artykul .karty { grid-template-columns: 1fr; } } .wpis__meta { margin: 8px 0 0; font-size: 14.5px; color: var(--cichy); font-family: 'Bricolage', system-ui, sans-serif; } .wpis__meta em { font-style: normal; color: var(--uwaga); } /* pasek z gotowym planem — jedyny mocny akcent we wpisie */ .wpis__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 34px 0 6px; padding: 20px 22px; border: 1px solid var(--bursztyn); border-radius: var(--promien); background: var(--bursztyn-jasny); } .wpis__plan strong { display: block; font-family: 'Bricolage', system-ui, sans-serif; font-size: 17px; color: var(--grafit); } .wpis__plan p { margin: 5px 0 0; max-width: 52ch; font-size: 15.5px; color: var(--tekst); } /* poprzedni / następny */ .wpis__sasiedzi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 40px; } .wpis__sasiedzi > a { display: block; padding: 16px 18px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: inherit; text-decoration: none; } .wpis__sasiedzi > a:hover { border-color: var(--wyciszony); } .wpis__sasiedzi span { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--cichy); } .wpis__sasiedzi strong { display: block; margin-top: 5px; font-family: 'Bricolage', system-ui, sans-serif; font-size: 16px; line-height: 1.35; color: var(--grafit); } .wpis__sasiedzi--nowszy { text-align: right; } /* spis miejsc w bocznym panelu */ .panel__spis { margin: 14px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; } .panel__spis li { font-size: 15px; line-height: 1.45; } /* stronicowanie listingu */ .stronicowanie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 34px 0 8px; } .stronicowanie a, .stronicowanie__tu { min-width: 40px; padding: 9px 12px; text-align: center; border: 1px solid var(--linia); border-radius: var(--promien); font-family: 'Bricolage', system-ui, sans-serif; font-size: 15px; text-decoration: none; } .stronicowanie a { color: var(--tekst); } .stronicowanie a:hover { border-color: var(--wyciszony); } .stronicowanie__tu { background: var(--grafit); border-color: var(--grafit); color: var(--na-ciemnym); } /* ——— lokalna lista szkiców (nie renderuje się na produkcji) ——— */ .szkice { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; } .szkic { border: 1px solid var(--linia); border-left: 4px solid var(--bursztyn); border-radius: var(--promien); padding: 18px 20px; background: var(--papier); } .szkic--blokada { border-left-color: var(--usun); } .szkic__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .szkic__glowa h2 { font-size: 21px; } .szkic__stan { font-family: 'Bricolage', system-ui, sans-serif; font-size: 13px; color: var(--wyciszony); white-space: nowrap; } .szkic--blokada .szkic__stan { color: var(--usun); } .szkic__uwagi { margin-top: 12px; } .szkic__uwagi li { font-size: 15px; color: var(--wyciszony); } .szkic__blad { color: var(--usun); } .szkic__polecenie { margin-top: 12px; font-size: 14.5px; color: var(--wyciszony); } .szkic code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--kosc); padding: 2px 6px; border-radius: 5px; } /* zdjęcie przełamujące tekst — wpisy bloga i opisy atrakcji */ .foto-w-tresci { margin: 6px 0; } .foto-w-tresci img { width: 100%; height: auto; border-radius: var(--promien); display: block; } .foto-w-tresci figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: 14px; color: var(--wyciszony); } .foto-w-tresci figcaption a { color: var(--wyciszony); text-decoration: underline; text-underline-offset: 2px; } .foto-w-tresci figcaption .podpis { margin: 0; }