nie powinna rysować obrysu po kliknięciu. */ .site-main:focus { outline: none; } /* =========== Tło strony – promienie w duchu obrazu „Jezu ufam Tobie” =========== Rysunek jest z obrazu: z jednego punktu tuż nad środkiem górnej krawędzi okna biją dwa snopy światła – blady w dół i w prawo, czerwony w dół i w lewo – a w środku każdego z nich płyną i migoczą włókna światła. Warstwy, od najgłębszej (kolejność wymusza ujemny z-index): 1. tło – ciepły gradient, trafia na kanwę okna, 2. body::after – pływające plamy ciepłego światła, 3. .bg-rays – dwa strumienie: blady (woda) i czerwony (krew), 4. body::before – oddychające halo w źródle obu strumieni. Wszystkie warstwy są `fixed`, więc źródło światła zostaje na miejscu przy przewijaniu, a nie ucieka razem z treścią. =========== */ html, body { min-height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at 0% 0%, var(--page-glow-1), transparent 60%), radial-gradient(circle at 100% 0%, var(--page-glow-2), transparent 65%), linear-gradient(180deg, var(--page-1) 0%, var(--page-2) 45%, var(--page-3) 100%); background-attachment: fixed; background-size: cover; position: relative; } /* Halo w źródle obu strumieni. Leży najwyżej ze wszystkich warstw tła, więc przykrywa miejsce, z którego światło wychodzi – tam włókna i tak zlewają się w plamę. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(46vmax 30vmax at 50% -5vmax, var(--ray-core), transparent 72%); opacity: .8; animation: haloBreath 9s ease-in-out infinite; will-change: opacity, transform; z-index: -1; } /* dodatkowe „plamy” światła, lekko pływające */ body::after { content: ""; position: fixed; inset: -15%; pointer-events: none; background: radial-gradient(circle at 20% 20%, var(--spot-1), transparent 60%), radial-gradient(circle at 80% 80%, var(--spot-2), transparent 55%), radial-gradient(circle at 10% 80%, var(--spot-3), transparent 60%); /* Bez `mix-blend-mode`: blend pełnoekranowej, przyklejonej warstwy każe kompozytorowi odczytywać tło pod nią przy każdej klatce przewijania. Plamy są na tyle rzadkie, że zwykłe krycie wygląda tak samo. */ opacity: .55; animation: floatGlow 26s ease-in-out infinite alternate; will-change: transform; z-index: -3; } /* Kontener obu strumieni –

z base.html. Trzyma tylko wspólne krycie i przycięcie do okna; cały rysunek jest w dwóch dzieciach. */ .bg-rays { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; contain: layout paint; opacity: var(--ray-opacity); } /* Pojedynczy strumień. Podział na dwa poziomy jest tu istotny: .bg-ray – KSZTAŁT. Maska stożkowa wycina klin, w którym strumień w ogóle istnieje. Klin stoi (kołysze się ledwie o stopień). .bg-ray::before – ŚWIATŁO. Włókna, które płyną wewnątrz tego klina własnym tempem: obracają się, pulsują i migoczą. Gdyby kształt i światło siedziały na jednym elemencie, cały strumień machałby jak wskazówka. Tak wygląda to, o co chodzi na obrazie: snop światła stoi, a w środku coś się w nim mieni. Element wystaje 10vh poza okno, żeby kołysanie nie odsłoniło rogów – dlatego źródło światła wypada 10vh od jego górnej krawędzi, a nie w 0. Ten sam punkt powtarza się w każdym gradiencie i w `transform-origin`. */ .bg-ray { position: absolute; inset: -10vh; transform-origin: 50% 10vh; will-change: rotate; } .bg-ray::before { content: ""; position: absolute; inset: 0; transform-origin: 50% 10vh; /* Rozmycie zamienia prążki w światło. W vh, żeby na dużym ekranie nie zrobiło się nieproporcjonalnie ostre. */ filter: blur(0.5vh); will-change: opacity, rotate, scale; /* Wygaszanie z odległością od źródła. Maska jest kołowa i wyśrodkowana dokładnie w źródle, więc obrót włókien nic w niej nie zmienia – rusza nią tylko pulsowanie, i to jest właśnie ten „oddech” snopu. */ -webkit-mask-image: radial-gradient(circle 128vh at 50% 10vh, transparent 0, transparent 3%, #000 15%, rgba(0,0,0,.92) 40%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.28) 87%, transparent 100%); mask-image: radial-gradient(circle 128vh at 50% 10vh, transparent 0, transparent 3%, #000 15%, rgba(0,0,0,.92) 40%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.28) 87%, transparent 100%); } /* Kąty liczone jak w `conic-gradient`: 0° w górę, rosną zgodnie z ruchem wskazówek. 180° to prosto w dół, więc klin 106–178° idzie w dół i w prawo, a 190–258° w dół i w lewo. Między nimi zostaje ok. 12° przerwy – na obrazie w tym miejscu stoi postać, a na stronie akurat tamtędy biegnie kolumna treści, więc nic pod nią nie świeci. Strona lewa/prawa jest z obrazu, nie z przypadku: blady strumień (woda) po prawej, czerwony (krew) po lewej. */ /* Blady strumień – woda. Rdzeń biały, w cieniu między włóknami chłodny błękit; stąd bierze się to zimne mienienie, które ma obraz. */ .bg-ray--mercy { -webkit-mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 106deg, rgba(0,0,0,.3) 118deg, #000 130deg, #000 154deg, rgba(0,0,0,.32) 166deg, transparent 178deg); mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 106deg, rgba(0,0,0,.3) 118deg, #000 130deg, #000 154deg, rgba(0,0,0,.32) 166deg, transparent 178deg); animation: beamSway 70s ease-in-out infinite; } /* Dwa zestawy włókien o niewspółmiernych okresach (5.4° i 8.9°). Same w sobie są regularne, ale nałożone dudnią – jedne wpadają w drugie i gasną – więc snop nigdzie nie wygląda na tapetę w paski. Obrót przeciąga ten rysunek przez nieruchomy klin i to widać jako mienienie. */ .bg-ray--mercy::before { background: repeating-conic-gradient(from 0deg at 50% 10vh, var(--beam-mercy-dim) 0deg, var(--beam-mercy) 2.2deg, var(--beam-mercy-dim) 4.4deg, var(--beam-mercy-dim) 5.4deg), repeating-conic-gradient(from 3.5deg at 50% 10vh, transparent 0deg, var(--beam-mercy) 3.4deg, transparent 6.8deg, transparent 8.9deg); animation: rayDrift 41s ease-in-out infinite, rayPulse 13s ease-in-out infinite, rayFlicker 8.5s ease-in-out infinite; } /* Czerwony strumień – krew. Węższy i słabszy od bladego; na obrazie też jest drugoplanowy, a na jasnej stronie czerwień szybko robi się natrętna. */ .bg-ray--blood { -webkit-mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 190deg, rgba(0,0,0,.32) 202deg, #000 214deg, #000 236deg, rgba(0,0,0,.3) 246deg, transparent 258deg); mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 190deg, rgba(0,0,0,.32) 202deg, #000 214deg, #000 236deg, rgba(0,0,0,.3) 246deg, transparent 258deg); animation: beamSwayAlt 86s ease-in-out infinite; } .bg-ray--blood::before { background: repeating-conic-gradient(from 1.5deg at 50% 10vh, var(--beam-blood-dim) 0deg, var(--beam-blood) 2.6deg, var(--beam-blood-dim) 5.2deg, var(--beam-blood-dim) 6.3deg), repeating-conic-gradient(from 5deg at 50% 10vh, transparent 0deg, var(--beam-blood) 4.1deg, transparent 8.2deg, transparent 10.7deg); animation: rayDriftAlt 53s ease-in-out infinite, rayPulseAlt 17s ease-in-out infinite, rayFlicker 6.2s ease-in-out -2.4s infinite; } /* Kąty klinów są policzone pod ekran szerszy niż wyższy. W układzie pionowym snop rozłożony o 40° od pionu wychodzi bokiem okna jakieś 200 px pod nagłówkiem – i przez resztę ekranu widać już tylko przerwę między strumieniami, czyli nic. Na wąskim ekranie zbliżamy więc oba snopy do pionu i niemal je stykamy; wtedy schodzą przez całą wysokość i mieszczą się w wąskich marginesach obok kart, bo tylko tam tło jest w ogóle widoczne. Warunek jest na proporcje, nie na szerokość: decyduje to, czy okno jest wysokie, a nie ile ma pikseli. */ @media (max-aspect-ratio: 4/5) { .bg-ray--mercy { -webkit-mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 146deg, rgba(0,0,0,.3) 156deg, #000 164deg, #000 175deg, rgba(0,0,0,.34) 179deg, transparent 182deg); mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 146deg, rgba(0,0,0,.3) 156deg, #000 164deg, #000 175deg, rgba(0,0,0,.34) 179deg, transparent 182deg); } .bg-ray--blood { -webkit-mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 178deg, rgba(0,0,0,.34) 181deg, #000 185deg, #000 196deg, rgba(0,0,0,.3) 204deg, transparent 214deg); mask-image: conic-gradient(from 0deg at 50% 10vh, transparent 178deg, rgba(0,0,0,.34) 181deg, #000 185deg, #000 196deg, rgba(0,0,0,.3) 204deg, transparent 214deg); } } /* `background-attachment: fixed` każe przeglądarce przemalować tło przy każdym przewinięciu – na telefonach daje to wyraźne szarpanie. Na małych ekranach tło przewija się więc razem z treścią, a strumienie zostają, tylko nieruchome. UWAGA: ten blok MUSI stać poniżej deklaracji `body`, `body::before`, `body::after`, `.bg-rays` i `.bg-ray`. Wcześniej był powyżej, a przy tej samej specyficzności wygrywa reguła późniejsza – więc wyłączenie animacji dla ::before i ::after nie działało i na telefonie chodziła pełnoekranowa animacja tła, czyli dokładnie to, czemu blok miał zapobiec. */ @media (max-width: 991.98px), (hover: none) { body { background-attachment: scroll; } body::before { animation: none; opacity: .5; } body::after { animation: none; } .bg-rays { opacity: calc(var(--ray-opacity) * .9); } /* Nieruchoma warstwa nie musi czekać w pamięci kompozytora – a to akurat te urządzenia, na których tej pamięci jest najmniej. */ .bg-ray, .bg-ray::before { animation: none; will-change: auto; } } /* Kołysanie samego klina – ledwie stopień w każdą stronę i przez ponad minutę, więc czyta się jako oddech, a nie jako ruch. */ @keyframes beamSway { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } } @keyframes beamSwayAlt { 0%, 100% { rotate: 1.8deg; } 50% { rotate: -1.8deg; } } /* Wędrówka włókien w poprzek klina. Amplituda jest większa od podziałki włókien (5.4°), więc każde z nich przechodzi przez całą szerokość snopu – bez tego rysunek tylko by drgał w miejscu. */ @keyframes rayDrift { 0%, 100% { rotate: -3.6deg; } 50% { rotate: 3.6deg; } } @keyframes rayDriftAlt { 0%, 100% { rotate: 3deg; } 50% { rotate: -3deg; } } /* Pulsowanie wzdłuż snopu: włókna odjeżdżają od źródła i wracają. Skalujemy względem źródła, więc punkt wyjścia światła stoi w miejscu. */ @keyframes rayPulse { 0%, 100% { scale: 1 1; } 50% { scale: 1.055 1.03; } } @keyframes rayPulseAlt { 0%, 100% { scale: 1.045 1.025; } 50% { scale: 1 1; } } /* Migotanie: nierówne odstępy między klatkami, żeby światło „oddychało” jak płomień, a nie pulsowało metronomicznie. Oba strumienie mają inny okres, więc nigdy nie gasną i nie rozbłyskują razem. */ @keyframes rayFlicker { 0% { opacity: .64; } 11% { opacity: .90; } 19% { opacity: .72; } 31% { opacity: 1; } 43% { opacity: .68; } 54% { opacity: .87; } 67% { opacity: .62; } 78% { opacity: .94; } 89% { opacity: .74; } 100% { opacity: .64; } } /* oddech halo w źródle obu strumieni */ @keyframes haloBreath { 0%, 100% { opacity: .55; transform: scale(1); } 40% { opacity: .95; transform: scale(1.06); } 70% { opacity: .72; transform: scale(1.02); } } /* ========= Ellipsis for truncated snippets ========= */ .readmore-ellipsis { color: var(--brand); font-weight: 700; letter-spacing: 0.06em; padding-left: 0.15rem; text-shadow: 0 0 0 rgba(0,0,0,0); /* keep crisp */ } /* Pływanie plam światła. Sam `transform` – dawne `filter: saturate()` w klatkach kazało przeglądarce przemalowywać warstwę co klatkę. */ @keyframes floatGlow { 0% { transform: translate3d(0, 0, 0) scale(1); } 40% { transform: translate3d(-4%, -2%, 0) scale(1.03); } 70% { transform: translate3d(3%, 5%, 0) scale(1.05); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.02); } } /* Szacunek dla osób wrażliwych na ruch. Poprzednia wersja wyciszała tylko tło i sekcje – w ruchu zostawały jeszcze halo i „iskrzenie” przypiętych kart, pulsowanie Ewangelii, wjazd kart oraz animacje ogłoszeń (animate-pulse / animate-float / animate-shake). Reguła poniżej wygasza wszystko, łącznie z płynnym przewijaniem. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body { background-attachment: scroll; } body::before { opacity: .35; } body::after { opacity: .25; } section::before { opacity: .6; } /* Strumienie zostają – to rysunek tła, nie animacja – ale nieruchome i słabsze. Reguła `*` powyżej zatrzymuje je na pierwszej klatce. */ .bg-rays { opacity: calc(var(--ray-opacity) * .75); } .bg-ray, .bg-ray::before { will-change: auto; } /* Elementy, które bez animacji startowej pozostałyby przezroczyste. */ .gospel-conclusion, .carousel-item.active .gospel-card-animated, .carousel-item.active .welcome-card-animated, .carousel-item.active .liturgy-card { opacity: 1 !important; transform: none !important; } .pinned-card::before { opacity: .85; } .pinned-card::after { opacity: 0; } /* Hover nie powinien już przesuwać kart. */ .card-announce:hover, .announcement-card:hover, .intention-week-link:hover, .office-hours-card-animated:hover, .announcement-masonry .pinned-card:hover, .announcement-masonry .pinned-card:focus-within { transform: none; } } /* =========== Layout =========== */ .site-main { position: relative; z-index: 1; } section { position: relative; } /* lekkie rozświetlenie każdej sekcji + delikatne „oddychanie” */ section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--section-glow), transparent 70%); opacity: .7; pointer-events: none; z-index: -1; animation: sectionGlow 32s ease-in-out infinite alternate; } /* rozjaśnienie pierwszej sekcji pod headerem */ .site-hero + section::before { background: radial-gradient(circle at 50% -10%, var(--section-glow-strong), transparent 70%); } @keyframes sectionGlow { 0% { opacity: .5; transform: translate3d(0, -6px, 0); } 40% { opacity: .9; transform: translate3d(0, 4px, 0); } 70% { opacity: .65; transform: translate3d(0, 0, 0); } 100% { opacity: .85; transform: translate3d(0, 8px, 0); } } /* =========== Nawigacja =========== */ .navbar-elegant { background: linear-gradient(90deg, var(--brand-700), var(--brand-600)); border-bottom: 1px solid rgba(224,177,68,.35); backdrop-filter: blur(12px); } .navbar-elegant .navbar-brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f9fafb; } .navbar-elegant .navbar-brand:hover { color: #ffffff; } .navbar-elegant .navbar-toggler { border-color: rgba(255,255,255,.4); } .navbar-elegant .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(224,177,68,.4); } .navbar-elegant .navbar-nav { gap: .4rem; } .navbar-elegant .nav-link { color: rgba(255,255,255,.9); padding: .45rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); line-height: 1.2; transition: all .18s ease; font-size: .95rem; } .navbar-elegant .nav-link:hover, .navbar-elegant .nav-link:focus { color: var(--brand-700); background: linear-gradient(180deg, #fde68a, #fbbf24); border-color: transparent; box-shadow: 0 0 0 .18rem rgba(224,177,68,.28); text-decoration: none; } .navbar-elegant .nav-link.active, .navbar-elegant .nav-link[aria-current="page"] { color: var(--brand-700); background: linear-gradient(180deg, #fde68a, #fbbf24); border-color: transparent; } /* =========== Hero – zdjęcie jako tło całego headera =========== */ /* Zdjęcie hero było jednym plikiem JPEG 1600 px (264 kB) – 64% wagi strony głównej, i to na zdjęciu, które w ~96% zasłaniają gradienty poniżej. Teraz są dwa warianty WebP: 800 px (24 kB) na telefony i 1600 px (82 kB) od breakpointu lg. Oryginalny JPEG został tylko dla og:image, bo crawlery społecznościowe nie zawsze radzą sobie z WebP. */ .site-hero { padding: 2.5rem 0 2.75rem; background: /* mocniejsza „zasłona” pod tekstem po lewej */ radial-gradient(circle at 15% 50%, rgba(15,23,42,.96), rgba(15,23,42,.85) 40%, transparent 70%), /* delikatne złoto i błękit */ radial-gradient(circle at 0% 0%, rgba(224,177,68,.35), transparent 60%), radial-gradient(circle at 100% 0%, rgba(59,130,246,.35), transparent 60%), /* zdjęcie z kościoła */ url("header-800.8c5aab69760c.webp"); background-repeat: no-repeat; background-size: 110% 110%, 80% 80%, 80% 80%, cover; background-position: center, 0% 0%, 100% 0%, center; color: #f9fafb; border-bottom: 1px solid rgba(224,177,68,.4); } @media (min-width: 992px) { .site-hero { background-image: radial-gradient(circle at 15% 50%, rgba(15,23,42,.96), rgba(15,23,42,.85) 40%, transparent 70%), radial-gradient(circle at 0% 0%, rgba(224,177,68,.35), transparent 60%), radial-gradient(circle at 100% 0%, rgba(59,130,246,.35), transparent 60%), url("header-1600.08861492d119.webp"); } } /* Na podstronach ten sam baner zajmował ok. 70% pierwszego ekranu telefonu, spychając właściwy tytuł strony poniżej zgięcia. Treść zostaje, znika tylko nadmiarowa przestrzeń. */ .site-hero--compact { padding: 1.25rem 0 1.5rem; } @media (max-width: 767.98px) { .site-hero--compact .container { padding-top: .5rem !important; padding-bottom: .5rem !important; } .site-hero--compact .display-6 { font-size: 1.5rem; margin-bottom: .5rem !important; } .site-hero--compact .lead { font-size: .95rem; } } .site-hero h1 { letter-spacing: .03em; } .text-hero-subtitle { color: rgba(241,245,249,.96); } .intention-card { background: radial-gradient(circle at 0 0, var(--card-tint), transparent 55%), var(--surface); border-radius: 1.2rem; border: 1px solid var(--border-subtle); } /* kartka z intencjami w headerze */ .hero-intentions { border-radius: 1.2rem; border: 1px solid var(--border-subtle); backdrop-filter: blur(14px); background: var(--surface-raised); box-shadow: var(--shadow-lg); max-width: 440px; margin-left: auto; } /* Nagłówek karty w hero jest teraz akapitem (patrz includes/header.html), więc celujemy w klasę, a nie w element. */ .hero-intentions-title { letter-spacing: .08em; font-weight: 700; color: var(--brand); } /* lista intencji – eleganckie wypunktowanie */ .hero-intentions ul { list-style: none; padding-left: 0; margin-bottom: 0; } .hero-intentions li { position: relative; padding-left: 1.1rem; font-size: .95rem; color: var(--text-main); } .hero-intentions li + li { margin-top: .15rem; } .hero-intentions li::before { content: ""; position: absolute; left: 0; top: .55em; width: .42rem; height: .42rem; border-radius: 999px; background: linear-gradient(180deg, #fde68a, #fbbf24); box-shadow: 0 0 0 1px rgba(15,23,42,.06); } /* złoty, bardziej „parafialny” przycisk */ .btn-intentions { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #1f2937; border: none; font-weight: 600; padding-inline: 1.1rem; box-shadow: 0 6px 16px rgba(15,23,42,.18); } .btn-intentions:hover, .btn-intentions:focus { background: linear-gradient(135deg, #facc15, #fbbf24); color: #111827; box-shadow: 0 8px 20px rgba(15,23,42,.25); } @media (max-width: 991.98px) { .hero-intentions { max-width: 100%; margin-left: 0; margin-top: 1.75rem; } } /* =========== Karty, ogłoszenia, treść =========== */ .card { border-radius: 1rem; border: 1px solid rgba(15,23,42,.04); background-color: var(--surface-soft); box-shadow: var(--shadow-sm); } .card-announce, .announcement-card { border-radius: 1.1rem; border: 1px solid var(--border-strong); background: radial-gradient(circle at 0 0, var(--card-tint), transparent 65%), var(--surface); box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card-announce::before, .announcement-card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 0 0, rgba(224,177,68,.5), transparent 55%); opacity: 0; transform: translate3d(-12px, -12px, 0); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } .card-announce:hover, .announcement-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(224,177,68,.6); } .card-announce:hover::before, .announcement-card:hover::before { opacity: 1; transform: translate3d(0, 0, 0); } .badge-cat { background: var(--brand-600); color: #e5f0ff; font-weight: 500; border-radius: 999px; padding: .25rem .5rem; } /* linia meta pod tytułem ogłoszenia */ .announcement-meta { font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; } .announcement-meta .dot { width: .35rem; height: .35rem; border-radius: 999px; background: rgba(148,163,184,.9); display: inline-block; } /* Rich text */ .rich-content p { margin-bottom: .75rem; } .rich-content h2, .rich-content h3 { margin-top: 1.25rem; margin-bottom: .5rem; } /* =========== Chips (kategorie) =========== */ .cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--brand-soft); color: var(--brand-chip-text); text-decoration: none; font-weight: 500; line-height: 1.2; transition: all .16s ease; font-size: .9rem; } .chip:hover { background: var(--surface); border-color: var(--chip-border-hover); box-shadow: 0 1px 8px rgba(15,23,42,.08); text-decoration: none; } .chip.active { color: var(--brand-700); background: linear-gradient(180deg, #fde68a, #fbbf24); border-color: transparent; box-shadow: 0 1px 12px rgba(224,177,68,.4); } /* Wybrany filtr kategorii. Kolor kategorii jest wstawiany inline i wygrywał z `.chip.active`, przez co nie było widać, który filtr jest włączony. Zaznaczenie rysujemy więc obwódką, która nie koliduje z tłem. */ .chip-selected { font-weight: 700; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand), 0 2px 10px rgba(15,23,42,.2); } /* =========== Intencje / listy =========== */ .intention-week-link { border-radius: .9rem; border: 1px solid var(--border-subtle); background: var(--surface-soft); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; } .intention-week-link:hover { transform: translateY(-2px); background: var(--surface); border-color: rgba(13,59,102,.32); box-shadow: 0 16px 32px rgba(15,23,42,.1); } .intention-day { border-radius: 1rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); } .intention-day h2 { font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); } .intention-day small { color: var(--text-muted); } .intention-day ul { margin-bottom: 0; padding-left: 1.1rem; } /* =========== Stopka =========== */ /* Usunięto reguły `.footer`, `.footer h6`, `.footer a` – element