/* MØKA. - mokacieplice.pl Paleta i typografia zgodne z marka. Warstwy pogodowe i pory roku sterowane atrybutami data-* na , ustawianymi przez assets/scena.js. */ :root { --tusz: #321E19; --papier: #FBF7F1; --papier-cieply: #F5EDE2; --kawa: #6F4E37; --zloto: #C9A227; --latte: #CDBFAE; --tekst: #4A3830; --tekst-jasny: #8A7566; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maks: 1180px; --rytm: clamp(4rem, 9vw, 8rem); --przejscie: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); /* Stopka ma WLASNE kolory, bo jako jedyna jest ciemna o kazdej porze. Reszta strony odwraca sie w nocy: --papier robi sie ciemny, --tusz jasny. Stopka odwrocic sie nie moze, wiec gdy brala tekst z --papier, w nocy dostawala ciemny napis na ciemnym tle - zmierzony kontrast 1.06 przy zdaniu "Damy znac, kiedy ruszamy". Te trzy zmienne zmieniaja sie razem z motywem, ale zawsze zostaja jasne. */ --stopka-tlo: #321E19; --stopka-tekst: #FBF7F1; --stopka-cichy: #CDBFAE; } /* pora roku zmienia temperature papieru - subtelnie, marka zostaje ta sama */ [data-pora="wiosna"] { --papier: #FBF9F2; --papier-cieply: #F2F1E4; } [data-pora="lato"] { --papier: #FDFAF3; --papier-cieply: #F7EFE0; } [data-pora="jesien"] { --papier: #FBF5EC; --papier-cieply: #F3E7D6; } [data-pora="zima"] { --papier: #F8F8F7; --papier-cieply: #EDEFF0; } /* noc - ciemniejszy wariant, czytelny i nadal markowy */ [data-dzien="noc"] { --papier: #1E1512; --papier-cieply: #271B17; --tusz: #F3E8DC; --tekst: #E8DACB; --tekst-jasny: #A58F7D; --latte: #5A4739; /* obwodki i linie musza byc widoczne na ciemnym */ --kawa: #D8BFA6; /* zdania i cytaty */ --zloto: #E0BC55; /* stopka ciemnieje razem ze strona, ale jej napisy zostaja jasne */ --stopka-tlo: #150E0C; --stopka-tekst: #F3E8DC; --stopka-cichy: #A58F7D; } /* placeholdery zdjec i mapa w nocy */ [data-dzien="noc"] .fotka-pusta { background: var(--papier-cieply); } [data-dzien="noc"] .ramka-mapy iframe { filter: grayscale(1) invert(0.92) sepia(0.18) contrast(0.92); } /* tlo i napisy stopki ida teraz przez --stopka-*, wiec nie ma tu czego latac */ *, *::before, *::after { box-sizing: border-box; } /* Sklad tekstu: przegladarka sama unika samotnego slowa w ostatnim wierszu (text-wrap: pretty) i wyrownuje dlugosc wierszy w naglowkach. Tam, gdzie ta wlasciwosc jeszcze nie dziala, robi to tresc.js twardymi spacjami. */ p, li, figcaption, .zdanie, .dopisek, .fotka-wskazowka { text-wrap: pretty; } h1, h2, h3, .cytat, .hero-tytul { text-wrap: balance; } /* UWAGA: przy aktywnym Lenisie scroll-behavior MUSI byc auto, inaczej przegladarka i biblioteka animuja te sama pozycje naraz i scroll szarpie. Lenis dokleja klase .lenis do , wiec plynne kotwice zostawiamy tylko wtedy, gdy Lenis sie nie uruchomil (dotyk, ograniczony ruch, brak JS). */ html { scroll-behavior: auto; } html:not(.lenis) { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--papier); color: var(--tekst); font-family: var(--sans); font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; transition: background var(--przejscie), color var(--przejscie); } /* Zaden odnosnik nie moze wyjsc domyslnie niebieski. Paleta strony to tusz i papier, wiec przegladarkowe #0000EE czyta sie jak usterka, a w nocy dodatkowo znika: zmierzony kontrast 1.91 na ciemnym tle. Do tej pory kazdy link mial wlasna regule z kolorem i dzialalo to dopoty, dopoki ktos nie dolozyl nowego - swiezy "Polityka prywatnosci" w dolnej stopce wyszedl wlasnie niebieski. Kolor bierzemy wiec z otoczenia, a afordancje niesie podkreslenie, ktore przegladarka daje sama. */ a { color: inherit; } .tylko-dla-czytnikow { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } a.pomin-do-tresci { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--tusz); color: var(--papier); padding: 0.75rem 1.25rem; } a.pomin-do-tresci:focus { left: 0; } .srodek { width: min(100% - 2.5rem, var(--maks)); margin-inline: auto; } /* ---------------------------------------------------------------- naglowek */ .gora { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 4vw, 2.5rem); pointer-events: none; } .gora > * { pointer-events: auto; } /* Cztery jezyki w rzedzie robily z belki pasek skrotow, wiec chowamy je pod jednym przyciskiem. Lista rozwija sie pod nim i zamyka klikiem obok, Escapem albo ponownym kliknieciem. */ .jezyki { position: relative; } .jezyk-przycisk { display: flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: transparent; border: 1px solid var(--latte); color: var(--tekst); padding: 0.45rem 0.7rem; border-radius: 999px; min-height: 34px; transition: color 0.3s, border-color 0.3s, background 0.3s; } .jezyk-przycisk:hover { color: var(--tusz); border-color: var(--tusz); } .jezyk-strzalka { width: 0.42rem; height: 0.42rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; translate: 0 -0.1rem; transition: rotate 0.3s ease, translate 0.3s ease; } .jezyk-przycisk[aria-expanded="true"] .jezyk-strzalka { rotate: -135deg; translate: 0 0.1rem; } .jezyk-lista { position: absolute; right: 0; top: calc(100% + 0.45rem); margin: 0; padding: 0.3rem; list-style: none; min-width: 9.5rem; background: var(--papier); border: 1px solid var(--latte); box-shadow: 0 10px 34px rgba(50,30,25,0.12); z-index: 60; } .jezyk-lista[hidden] { display: none; } .jezyk-lista a { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.04em; text-decoration: none; color: var(--tekst); padding: 0.5rem 0.6rem; transition: background 0.25s, color 0.25s; } .jezyk-lista a:hover { background: color-mix(in srgb, var(--latte) 26%, transparent); color: var(--tusz); } .jezyk-lista a[aria-current="true"] { color: var(--tusz); font-weight: 500; } .jezyk-kod { font-size: 0.58rem; letter-spacing: 0.16em; color: var(--tekst-jasny); min-width: 1.6rem; } .jezyk-lista a[aria-current="true"] .jezyk-kod { color: var(--kawa); } /* ------------------------------------------------------------------- hero */ .hero { /* pomniejszone o dolny pasek nawigacji, zeby nic sie pod nim nie chowalo */ min-height: calc(100svh - 4.2rem); display: grid; grid-template-rows: 1fr auto; padding: 6rem 0 clamp(2rem, 6vw, 4rem); position: relative; overflow: hidden; } .scena { position: relative; width: min(100% - 2.5rem, 940px); margin: auto auto 0; height: clamp(190px, 38svh, 330px); align-self: end; } /* front lokalu - ilustracja z ChatGPT, obrobiona na przezroczystosc */ .scena .lokal { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: 100%; display: block; } /* postac wchodzaca do lokalu */ .scena .ludzik { position: absolute; bottom: 4%; left: 6%; height: 62%; width: auto; transform: translateX(-140%); opacity: 0; } .animacja-gotowa .scena .ludzik { animation: wejscie 24s linear 1.2s infinite; } @keyframes wejscie { 0% { transform: translateX(-260%); opacity: 0; } 2% { transform: translateX(-260%); opacity: 1; } 22% { transform: translateX(612%); opacity: 1; } /* dochodzi do drzwi */ 26% { transform: translateX(648%) scale(0.96); opacity: 1; } 30% { transform: translateX(660%) scale(0.9); opacity: 0; } /* wchodzi */ 100% { transform: translateX(-260%); opacity: 0; } /* przerwa przed kolejnym */ } @media (prefers-reduced-motion: reduce) { .scena .ludzik { transform: translateX(612%); opacity: 1; animation: none; } } .hero-tresc { text-align: center; margin-bottom: clamp(1.5rem, 5vw, 3rem); } .znak { font-family: var(--serif); font-weight: 300; font-size: clamp(3.6rem, 13vw, 7.5rem); line-height: 0.95; letter-spacing: 0.06em; color: var(--tusz); margin: 0; } .znak .kropka { color: var(--zloto); } .podznak { font-family: var(--sans); font-size: clamp(0.6rem, 1.6vw, 0.72rem); letter-spacing: 0.42em; text-transform: uppercase; color: var(--tekst-jasny); margin: 1rem 0 0; } .motto { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2.6vw, 1.35rem); color: var(--kawa); margin: 1.5rem 0 0; } .odznaka { display: inline-block; margin-top: 2rem; border: 1px solid var(--latte); padding: 0.7rem 1.8rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--kawa); } /* ------------------------------------------------------- warstwy pogodowe */ .pogoda { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .pogoda span { position: absolute; display: block; will-change: transform; } /* deszcz */ .pogoda .kropla { width: 1px; height: 16px; background: linear-gradient(to bottom, transparent, var(--kawa)); opacity: 0.32; animation: pada linear infinite; } @keyframes pada { from { transform: translate3d(0, -20vh, 0) rotate(12deg); } to { transform: translate3d(-6vw, 115vh, 0) rotate(12deg); } } /* snieg */ .pogoda .platek { width: 5px; height: 5px; border-radius: 50%; background: var(--kawa); opacity: 0.22; animation: sypie linear infinite; } @keyframes sypie { from { transform: translate3d(0, -12vh, 0); } to { transform: translate3d(4vw, 112vh, 0); } } /* mgla */ .pogoda .pasmo { left: -10%; width: 120%; height: 1px; background: linear-gradient(90deg, transparent, var(--latte), transparent); opacity: 0.5; animation: snuje 18s ease-in-out infinite alternate; } @keyframes snuje { from { transform: translateX(-4%); } to { transform: translateX(4%); } } /* slonce */ .pogoda .blask { top: 8%; right: 8%; width: clamp(120px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,0.20), transparent 68%); animation: pulsuje 9s ease-in-out infinite alternate; } @keyframes pulsuje { from { transform: scale(0.92); opacity: 0.75; } to { transform: scale(1.06); opacity: 1; } } /* liscie */ .pogoda .lisc { width: 9px; height: 5px; border-radius: 0 60% 0 60%; background: var(--kawa); opacity: 0.3; animation: leci linear infinite; } @keyframes leci { from { transform: translate3d(0, -10vh, 0) rotate(0deg); } to { transform: translate3d(-14vw, 110vh, 0) rotate(420deg); } } /* ---------------------------------------------------------------- sekcje */ .sekcja { padding-block: var(--rytm); } .sekcja-cieply { background: var(--papier-cieply); transition: background var(--przejscie); } h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.15; color: var(--tusz); margin: 0 0 1.5rem; } .naglowek-sekcji { font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--tekst-jasny); margin: 0 0 1rem; } p { margin: 0 0 1.25rem; max-width: 62ch; } /* bloki hero sa wysrodkowane w pelnej szerokosci - ograniczenie 62ch dotyczy wylacznie akapitow z trescia */ .hero-tytul, .hero-tytul-dol, .hero-meta, .cytat, .stopka p, .stopka-dol, .naglowek-sekcji { max-width: none; } .dwie-kolumny { display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: 1fr; } @media (min-width: 900px) { .dwie-kolumny { grid-template-columns: 1fr 1fr; align-items: center; } } .ilustracja { width: 100%; height: auto; display: block; } .ilustracja-mala { max-width: 320px; margin-inline: auto; } @media (max-width: 620px) { .ilustracja-mala { max-width: 170px; } } .dane dt { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tekst-jasny); margin-top: 1.75rem; } .dane dd { margin: 0.4rem 0 0; font-family: var(--serif); font-size: 1.4rem; color: var(--tusz); } /* adres e-mail jest dluzszy niz reszta danych - mniejszy stopien, zeby na telefonie nie wychodzil poza kolumne */ .dane dd a { color: inherit; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--latte); transition: border-color 0.3s ease; overflow-wrap: anywhere; } .dane dd a:hover { border-color: var(--tusz); } .przycisk { display: inline-block; margin-top: 2rem; background: var(--tusz); color: var(--papier); text-decoration: none; padding: 0.95rem 2rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; transition: opacity 0.3s, transform 0.3s; } .przycisk:hover { opacity: 0.86; transform: translateY(-2px); } .przycisk-obrys { background: transparent; color: var(--tusz); border: 1px solid var(--latte); } .cytat { text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3.6vw, 2.2rem); line-height: 1.5; color: var(--kawa); max-width: 24ch; margin-inline: auto; } /* stopka */ .stopka { background: var(--stopka-tlo); color: var(--stopka-tekst); padding-block: var(--rytm); text-align: center; } .stopka a { color: var(--stopka-tekst); } .stopka strong { color: var(--stopka-tekst); } .stopka .kanaly { display: grid; gap: 1.5rem; justify-items: center; margin-top: 2rem; } .stopka .kanal { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; } .stopka .kanal span { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-top: 0.3rem; } /* Wypelnienie boczne, bo bez niego linijka na telefonie dotyka obu krawedzi ekranu - zmierzone przy 390 px: 374 px tekstu w 375 px akapitu. */ .stopka-dol { padding: 2rem 1.25rem; text-align: center; font-size: 0.7rem; color: var(--tekst-jasny); } /* Na telefonie napis dzieli sie na dwie linie w miejscu, ktore ma sens - nazwa i motto osobno, prawa autorskie osobno. Zostawiony sam sobie lamal sie tam, gdzie akurat zabraklo miejsca: przy 320 px w drugiej linii zostawaly trzy slowa. Kropka rozdzielajaca znika razem z laczeniem, bo na poczatku nowej linii wisialaby bez sensu. */ @media (max-width: 620px) { .stopka-dol .stopka-czesc { display: block; } .stopka-dol .stopka-rozdziel { display: none; } } /* Podpis autora strony - osobna linijka pod nazwa lokalu, drobniejsza i bledsza od niej. Stopka nalezy do MØKA., wiec podpis ma byc do znalezienia, a nie do zauwazenia w pierwszej kolejnosci. Podkreslenie dopiero pod kursorem, zeby linia nie ciela linijki na dwoje. */ /* Odnosniki w dolnej linijce (polityka prywatnosci) - w kolorze otoczenia, z podkresleniem odsunietym od tekstu, zeby nie sklejalo sie z ogonkami. */ .stopka-dol a { text-underline-offset: 0.22em; transition: color 0.3s ease; } .stopka-dol a:hover, .stopka-dol a:focus-visible { color: var(--tusz); } .stopka-autor { display: block; margin-top: 0.35rem; font-size: 0.66rem; letter-spacing: 0.06em; } /* Odnosnik dostaje wlasne wypelnienie, bo sama linijka tekstu ma 13 px wysokosci i na telefonie trudno w nia trafic palcem. Podkreslenie jest z text-decoration, a nie z obwodki: obwodka usiadlaby na krawedzi wypelnienia, czyli kilka pikselow pod tekstem. */ .stopka-autor a { display: inline-block; padding: 0.4rem 0.3rem; margin: -0.4rem -0.3rem; color: inherit; text-decoration: none; text-underline-offset: 0.25em; transition: color 0.3s ease; } .stopka-autor a:hover, .stopka-autor a:focus-visible { color: var(--tusz); text-decoration: underline; } /* pojawianie sie sekcji przy scrollu */ .odslon { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; } .odslon.widoczny { opacity: 1; transform: none; } /* ----------------------------------------------- przelacznik do podgladu */ .podglad { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; background: var(--papier); border: 1px solid var(--latte); padding: 0.75rem; font-size: 0.66rem; display: none; gap: 0.35rem; flex-wrap: wrap; max-width: 260px; box-shadow: 0 6px 30px rgba(50,30,25,0.12); } .podglad.aktywny { display: flex; } .podglad button { font: inherit; font-family: var(--sans); cursor: pointer; background: transparent; border: 1px solid var(--latte); color: var(--tekst); padding: 0.3rem 0.6rem; } .podglad button[aria-pressed="true"] { background: var(--tusz); color: var(--papier); border-color: var(--tusz); } .podglad strong { flex-basis: 100%; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6rem; color: var(--tekst-jasny); } /* Panel da sie zwinac krzyzykiem, a wraca malym uchwytem w rogu. Uchwyt odslania dopiero skrypt, wiec zwykly gosc go nie widzi. */ .podglad { padding-right: 1.8rem; } .podglad .podglad-zamknij { position: absolute; top: 0.2rem; right: 0.3rem; border: 0; padding: 0.1rem 0.35rem; font-size: 0.95rem; line-height: 1; color: var(--tekst-jasny); } .podglad .podglad-zamknij:hover { color: var(--tusz); } .podglad-uchwyt { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: var(--papier); color: var(--tekst-jasny); border: 1px solid var(--latte); border-radius: 999px; padding: 0.35rem 0.8rem; box-shadow: 0 4px 18px rgba(50,30,25,0.10); } .podglad-uchwyt:hover { color: var(--tusz); } .podglad-uchwyt[hidden] { display: none; } /* ========================================================================== Ekran wejscia - animacja ladowania strony. Tresc strony jest w DOM od razu (wazne dla Google), ekran tylko ja przykrywa i sam sie zdejmuje. Pokazuje sie raz na sesje i da sie go pominac. ========================================================================== */ .wejscie { position: fixed; inset: 0; z-index: 90; background: var(--papier); display: grid; place-items: center; transition: opacity 0.8s ease, visibility 0.8s; } .wejscie.zdjety { opacity: 0; visibility: hidden; pointer-events: none; } .wejscie[hidden] { display: none; } .wejscie-scena { position: relative; width: min(88vw, 760px); aspect-ratio: 1499 / 937; /* zgodnie z aktualna ilustracja frontu */ } .wejscie-scena .lokal { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto; opacity: 0; animation: wejscie-lokal 0.9s ease 0.15s forwards; } @keyframes wejscie-lokal { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .wejscie-scena .ludzik { position: absolute; bottom: 8%; left: 3%; height: 25%; width: auto; transform: translateX(-200%); animation: wejscie-marsz 3.1s cubic-bezier(0.42, 0, 0.6, 1) 0.5s forwards; } /* Skala z pomiaru: otwor drzwi ma ok. 36% wysokosci kadru, wiec postac przy 25% jest od niego nizsza i swobodnie miesci sie w wejsciu - przy 33% byla wyzsza i szersza od drzwi, wiec nie mogla przez nie wejsc. Przesuniecia sa w procentach szerokosci postaci, wiec po zmianie skali trzeba je bylo przeliczyc od nowa: srodek drzwi wypada na 68% czasu animacji. */ @keyframes wejscie-marsz { 0% { transform: translateX(-125%); opacity: 0; } 8% { transform: translateX(-100%); opacity: 1; } 68% { transform: translateX(278%); opacity: 1; } /* przy drzwiach */ 84% { transform: translateX(314%) scale(0.94); opacity: 0.8; }/* wchodzi w otwor */ 92% { transform: translateX(326%) scale(0.86); opacity: 0; } /* weszla */ 100% { transform: translateX(326%) scale(0.86); opacity: 0; } } /* imitacja kroku: lekkie unoszenie i przechylanie sylwetki w rytm marszu */ .wejscie-scena .ludzik { animation-name: wejscie-marsz, wejscie-krok; animation-duration: 3.1s, 0.46s; animation-iteration-count: 1, 7; animation-timing-function: cubic-bezier(0.42,0,0.6,1), ease-in-out; } @keyframes wejscie-krok { 0%,100% { translate: 0 0; rotate: -0.6deg; } 50% { translate: 0 -2.5%; rotate: 0.6deg; } } .wejscie-pomin { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tekst-jasny); background: transparent; border: 1px solid var(--latte); cursor: pointer; padding: 0.6rem 1.4rem; opacity: 0; animation: pokaz 0.4s ease 1.2s forwards; } @keyframes pokaz { to { opacity: 1; } } .wejscie-pomin:hover { color: var(--tusz); } @media (prefers-reduced-motion: reduce) { .wejscie { display: none; } } /* ========================================================================== Hero w ukladzie TAB: wielki serif rozbity nad i pod ilustracja w ramce ========================================================================== */ .gora { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; } .gora-znak { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.08em; color: var(--tusz); text-decoration: none; justify-self: start; } .gora-znak .kropka { color: var(--zloto); } .gora-menu a { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tekst-jasny); text-decoration: none; transition: color 0.3s; } .gora-menu a:hover { color: var(--tusz); } .jezyki { justify-self: end; } /* nawigacja siedzi w dolnym pasku, w naglowku zostaje znak, profile i jezyki */ /* Ikony spolecznosciowe rysowane kreska, nie wypelnieniem - dzieki temu trzymaja styl reszty ilustracji i same sie odwracaja w trybie nocnym, bo biora kolor z tekstu. */ .gora-prawa { justify-self: end; display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 0.9rem); } .spolecznosci { display: flex; align-items: center; gap: 0.15rem; } .spolecznosci a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--tekst-jasny); transition: color 0.3s ease, background 0.3s ease; } .spolecznosci a:hover { color: var(--tusz); background: color-mix(in srgb, var(--latte) 30%, transparent); } .spolecznosci svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .spolecznosci .kropka-ig { fill: currentColor; stroke: none; } /* Na telefonie ikony ida na srodek belki - miedzy znak a jezyki. Grupa prawej strony rozpada sie wtedy na osobne komorki siatki (display: contents), wiec kazda z nich moze usiasc we wlasnym miejscu. */ @media (max-width: 620px) { .gora { grid-template-columns: auto 1fr auto; } .gora-prawa { display: contents; } .spolecznosci { justify-self: center; gap: 0.35rem; } .jezyki { justify-self: end; } /* na telefonie celujemy palcem, wiec pole dotyku ma pelne 44 px */ .spolecznosci a { width: 44px; height: 44px; } .spolecznosci svg { width: 24px; height: 24px; } } .hero { /* pomniejszone o dolny pasek nawigacji, zeby nic sie pod nim nie chowalo */ min-height: calc(100svh - 4.2rem); display: flex; flex-direction: column; padding: clamp(3.6rem, 7.5vh, 5.2rem) 0 clamp(1rem, 2.4vh, 1.8rem); position: relative; overflow: hidden; } .hero-uklad { text-align: center; position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(0.4rem, 1.4vh, 1rem); } .hero-tytul { font-family: var(--serif); font-weight: 300; font-size: clamp(1.35rem, 3.4vw, 2.7rem); line-height: 1.14; letter-spacing: 0.01em; color: var(--tusz); margin: 0; } .hero-tytul-dol { margin: clamp(0.4rem, 1.4vh, 1rem) auto 0; max-width: none; } /* odslanianie tekstu liniami spod maski */ .wers { display: block; overflow: hidden; padding-bottom: 0.06em; } .wers > span { display: block; transform: translateY(105%); transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .gotowe .wers > span { transform: translateY(0); } .gotowe .wers:nth-child(2) > span { transition-delay: 0.1s; } .hero-tytul-dol .wers > span { transition-delay: 0.2s; } /* ramka z ilustracja - luk, jak witryna lokalu */ .rama { margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0; transform: scale(0.97); transition: opacity 1.1s ease 0.25s, transform 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.25s; } .gotowe .rama { opacity: 1; transform: scale(1); } /* kadr trzyma proporcje ilustracji i kurczy sie od wysokosci, nie od szerokosci - dzieki temu na niskim ekranie laptopa reszta hero zostaje widoczna, a procentowe wspolrzedne hotspotu nadal sa dokladne */ .rama-kadr { position: relative; aspect-ratio: 1499 / 937; width: min(100%, 940px); max-width: 100%; max-height: 46svh; /* zostawia miejsce na status, zdanie i adres */ margin-inline: auto; } .rama-obraz { width: 100%; height: 100%; object-fit: contain; display: block; } .hero-meta { margin: clamp(0.6rem, 2vh, 1.4rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: clamp(0.4rem, 1.2vh, 0.8rem); width: 100%; } .hero-adres { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-jasny); } .hero-meta .odznaka { margin-top: 0; } /* W hero zamiast bladej odznaki stoi mocny przycisk do karty - ma sie wyrozniac, wiec bierze pelne wypelnienie tuszem i jasny napis. */ .hero-meta .przycisk-hero { margin-top: 0; padding: 0.75rem 1.9rem; font-size: 0.66rem; letter-spacing: 0.26em; } /* ------------------------------------------------------------------ menu */ .wstep { max-width: 54ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .karta { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .karta { grid-template-columns: repeat(3, 1fr); } } .karta-grupa h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--tusz); margin: 0 0 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--latte); } .dania { list-style: none; margin: 0; padding: 0; } .dania li { margin-bottom: 1.1rem; } .danie { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--tusz); } .opis { display: block; font-size: 0.8rem; color: var(--tekst-jasny); line-height: 1.6; } .dopisek { margin-top: clamp(2rem, 5vw, 3rem); font-size: 0.72rem; color: var(--tekst-jasny); font-style: italic; } .placeholder { opacity: 0.7; } /* --------------------------------------------------------------- kontakt */ .ramka-mapy { border: 1px solid var(--latte); border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papier-cieply); } .ramka-mapy iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) sepia(0.25) contrast(0.95); } .stopka-wstep { margin: 0 auto 1.5rem; } .stopka .naglowek-sekcji { color: var(--stopka-cichy); } /* ========================================================================== Ikony marki: plywajace elementy, pas przewijany, ikony kategorii ========================================================================== */ .gotowe /* pas przewijany - "hipsterski" element rytmu strony */ .pas { border-top: 1px solid var(--latte); border-bottom: 1px solid var(--latte); overflow: hidden; padding: 1.1rem 0; background: var(--papier); } .pas-tor { display: flex; width: max-content; animation: pas-jedzie 42s linear infinite; --przesuw: 50%; } .pas-grupa { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); padding-right: clamp(1.4rem, 4vw, 3rem); } .pas-grupa span { font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: var(--tusz); white-space: nowrap; font-style: italic; } .pas-grupa img { height: clamp(26px, 3.2vw, 40px); width: auto; opacity: 0.75; } @keyframes pas-jedzie { from { transform: translateX(0); } to { transform: translateX(calc(var(--przesuw) * -1)); } } .pas:hover .pas-tor { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pas-tor { animation: none; } } /* ikona przy kategorii menu */ .karta-grupa h3 { display: flex; align-items: center; gap: 0.7rem; } .ikona-grupy { height: 32px; width: auto; opacity: 0.8; } /* delikatne uniesienie kart menu przy najechaniu */ .karta-grupa { transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1); } @media (hover: hover) { .karta-grupa:hover { transform: translateY(-6px); } } /* ========================================================================== Zdanie o dzisiejszej pogodzie + galeria z miejscami na zdjecia ========================================================================== */ .dzis { font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 2vw, 1.15rem); color: var(--kawa); opacity: 0; transition: opacity 1s ease 0.6s; } .gotowe .dzis { opacity: 1; } .dzis[hidden] { display: none; } .galeria { display: grid; gap: clamp(0.8rem, 2vw, 1.4rem); grid-template-columns: repeat(2, 1fr); } @media (min-width: 800px) { .galeria { grid-template-columns: repeat(4, 1fr); } } .fotka { margin: 0; } .fotka-duza { grid-column: span 2; } @media (min-width: 800px) { .fotka-duza { grid-column: span 2; grid-row: span 2; } } .fotka-pusta { position: relative; height: 100%; min-height: 190px; border: 1px dashed var(--latte); border-radius: 3px; background: var(--papier-cieply); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem; padding: 1.2rem; text-align: center; transition: border-color 0.4s, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); } .fotka-duza .fotka-pusta { min-height: 320px; } @media (hover: hover) { .fotka-pusta:hover { border-color: var(--kawa); transform: translateY(-4px); } } .fotka-opis { font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.3rem); color: var(--tusz); } .fotka-wskazowka { font-size: 0.72rem; color: var(--tekst-jasny); line-height: 1.5; max-width: 24ch; } .fotka-pusta::after { content: attr(data-format); position: absolute; top: 0.6rem; left: 0.7rem; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tekst-jasny); opacity: 0.75; } /* canvas pogodowy - warstwa nad tlem, pod trescia */ .pogoda-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; display: block; } /* ========================================================================== Wiatr: typografia ozdobna lekko sie kolysze. Nawigacja, akapity i pozycje menu celowo pominiete - kolysanie czytanego tekstu meczy wzrok. ========================================================================== */ :root { --wiatr-amp: 0deg; --wiatr-przesuw: 0px; --wiatr-czas: 7s; } .kolysze { animation: powiew var(--wiatr-czas) ease-in-out infinite alternate; animation-delay: var(--wiatr-op, 0s); transform-origin: 50% 100%; will-change: transform; } @keyframes powiew { from { transform: rotate(calc(var(--wiatr-amp) * -1)) translateX(calc(var(--wiatr-przesuw) * -1)); } to { transform: rotate(var(--wiatr-amp)) translateX(var(--wiatr-przesuw)); } } /* przy silnym wietrze dokladamy odrobine wiecej ruchu pasowi z ikonami */ [data-wiatr="silny"] .pas-grupa img { animation: powiew calc(var(--wiatr-czas) * 0.7) ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .kolysze { animation: none; } } /* zdanie kontekstowe w hero - zmienia sie z pogoda i pora dnia */ .zdanie { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2.2vw, 1.28rem); color: var(--kawa); max-width: 34ch; transition: opacity 0.32s ease; } /* status lokalu zmienia kolor obwodki zaleznie od fazy dnia */ [data-status="otwarte"] .odznaka { border-color: var(--kawa); color: var(--tusz); } [data-status="zamkniete"] .odznaka, [data-status="przed-otwarciem-dzis"] .odznaka { opacity: 0.7; } /* ========================================================================== Lewa witryna na ilustracji prowadzi do menu - tak jak w prawdziwym lokalu, gdzie karta wisi w oknie pod numerem 21. ========================================================================== */ .rama { position: relative; } .witryna-menu { position: absolute; left: 26%; top: 55%; width: 6.2%; height: 23%; border-radius: 2px; display: grid; place-items: center; text-decoration: none; background: transparent; transition: background 0.45s ease; } .witryna-menu::before { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: 2px; transition: border-color 0.45s ease; } .witryna-etykieta { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tusz); opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; background: var(--papier); padding: 0.25rem 0.4rem; } @media (hover: hover) { .witryna-menu:hover { background: rgba(201,162,39,0.10); } .witryna-menu:hover::before { border-color: var(--zloto); } .witryna-menu:hover .witryna-etykieta { opacity: 1; transform: none; } } .witryna-menu:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; } .witryna-menu:focus-visible .witryna-etykieta { opacity: 1; transform: none; } /* na telefonie zadnej ramki ani napisu na ilustracji - zostaje samo pole dotyku, a do menu prowadzi pasek nawigacji pod hero */ @media (max-width: 860px) { .witryna-etykieta { display: none; } .witryna-menu, .witryna-menu::before { background: transparent; border-color: transparent; } } /* ------------------------------------------------- hero na malych ekranach */ @media (max-width: 620px) { .hero { padding-top: clamp(3.6rem, 9vh, 5rem); } .hero-tytul { font-size: clamp(1.25rem, 5.6vw, 1.75rem); } .zdanie { font-size: 0.95rem; max-width: 30ch; } .hero-adres { font-size: 0.58rem; letter-spacing: 0.14em; } .odznaka { padding: 0.55rem 1.2rem; font-size: 0.58rem; letter-spacing: 0.2em; } /* na telefonie przybliżamy sie na front lokalu - sasiednie kamienice wychodza poza kadr, zeby MOKA byla wieksza. Kadr zachowuje proporcje obrazka, wiec wspolrzedne hotspotu z menu nadal sie zgadzaja. */ .rama { width: 100%; overflow: hidden; } .rama-kadr { width: 152%; max-width: none; max-height: 48svh; margin-inline: -26%; } .gora { padding: 0.7rem 1rem; } .gora-znak { font-size: 1.05rem; } } @media (max-height: 700px) and (min-width: 621px) { .hero-tytul { font-size: clamp(1.2rem, 2.8vw, 1.9rem); } .zdanie { font-size: 1rem; } } /* niskie ekrany (laptopy, przegladarka z paskami) */ @media (max-height: 820px) and (min-width: 621px) { .rama-kadr { max-height: 40svh; } .hero-tytul { font-size: clamp(1.15rem, 2.4vw, 1.8rem); } .zdanie { font-size: 0.98rem; } .hero { padding-top: clamp(3.2rem, 6vh, 4.4rem); } } @media (max-height: 680px) { .rama-kadr { max-height: 32svh; } .hero-meta { gap: 0.35rem; } } /* ========================================================================== Dolny pasek nawigacji na telefonie - wzorzec znany z Instagrama. Matowe szklo, kciuk ma blisko, uwzglednia pasek gestow iPhone'a. ========================================================================== */ /* Pasek chowa sie na gorze strony i przy przewijaniu w gore, a wraca, gdy ktos zjezdza w dol - w hero nic nie zaslania, a pod reka jest wtedy, kiedy gosc faktycznie wedruje po tresci. */ .pasek-dolny { translate: 0 130%; opacity: 0; visibility: hidden; transition: translate 0.4s cubic-bezier(0.22,0.61,0.36,1), opacity 0.35s ease, visibility 0.4s; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: space-around; align-items: stretch; padding: 0.55rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--papier) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-top: 1px solid color-mix(in srgb, var(--latte) 60%, transparent); } .pasek-dolny.widoczny { translate: 0 0; opacity: 1; visibility: visible; } .pasek-dolny a { flex: 1; text-align: center; /* napisy w pasku byly za blade - ciemniejszy kolor i grubszy krój, bo to jedyna nawigacja na telefonie i musi byc czytelna na szklanym tle */ font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; white-space: nowrap; /* "O NAS" nie ma sie lamac na dwie linie */ color: var(--tekst); text-decoration: none; padding: 0.5rem 0.2rem; border-radius: 6px; transition: color 0.3s ease, background 0.3s ease; min-height: 44px; /* wygodny cel dla kciuka */ display: flex; align-items: center; justify-content: center; } .pasek-dolny a[aria-current="true"] { color: var(--tusz); background: color-mix(in srgb, var(--latte) 34%, transparent); } /* Piata pozycja (nawigacja) zjadla powietrze miedzy napisami - na waskich ekranach zwezamy kroj zamiast skracac etykiety. */ @media (max-width: 480px) { .pasek-dolny { padding-inline: 0.25rem; } .pasek-dolny a { font-size: 0.58rem; letter-spacing: 0.06em; padding-inline: 0.1rem; } } @media (max-width: 360px) { .pasek-dolny a { font-size: 0.54rem; letter-spacing: 0.03em; } } /* tresc nie moze chowac sie pod paskiem */ body { padding-bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px)); } .podglad, .podglad-uchwyt { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } /* na wiekszych ekranach pasek unosi sie nad dolem jako pigulka */ @media (min-width: 860px) { .pasek-dolny { left: 50%; right: auto; bottom: 1.4rem; transform: translateX(-50%); width: auto; min-width: 520px; /* piata pozycja potrzebowala miejsca */ padding: 0.4rem 0.5rem; border: 1px solid color-mix(in srgb, var(--latte) 60%, transparent); border-radius: 999px; box-shadow: 0 10px 40px rgba(50, 30, 25, 0.10); gap: 0.2rem; } .pasek-dolny a { padding: 0.55rem 1.2rem; border-radius: 999px; font-size: 0.68rem; } body { padding-bottom: 5.5rem; } } /* ------------------------------------------- szklana belka gorna po scrollu */ .gora { transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .gora.przypieta { background: color-mix(in srgb, var(--papier) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border-bottom-color: color-mix(in srgb, var(--latte) 55%, transparent); } /* ilustracje marki w sekcjach */ .ilustracja-sekcji { margin: clamp(2rem, 5vw, 3.5rem) 0 0; text-align: center; } .ilustracja-sekcji img { width: min(240px, 60%); height: auto; } .ilustracja-kontakt { display: block; width: min(230px, 55%); height: auto; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); } /* ========================================================================== Znak pogody w hero - prawdziwa ilustracja zamiast poswiaty z gradientu. Podmieniany przez JS zaleznie od stanu pogody i pory dnia. ========================================================================== */ .pogoda-znak { position: absolute; top: clamp(4.5rem, 12vh, 7rem); right: clamp(1.5rem, 6vw, 5rem); width: clamp(58px, 8vw, 116px); height: auto; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity 1s ease 0.4s, transform 1s ease 0.4s; animation: unosi 7s ease-in-out infinite alternate; } .gotowe .pogoda-znak { opacity: 0.9; transform: none; } @keyframes unosi { from { translate: 0 0; } to { translate: 0 -7px; } } @media (prefers-reduced-motion: reduce) { .pogoda-znak { animation: none; } } @media (max-width: 620px) { .pogoda-znak { top: 4.2rem; right: 1rem; width: 54px; } } /* ========================================================================== Otwierane drzwi w ekranie wejscia. Druga wersja frontu (z otwartymi drzwiami) lezy dokladnie na pierwszej i pojawia sie w momencie, gdy postac dochodzi do wejscia. Oba obrazki maja ten sam kadr, wiec przenikanie wyglada jak otwarcie skrzydla. ========================================================================== */ .wejscie-scena .lokal-otwarte { opacity: 0; animation: drzwi 3.1s linear 0.5s forwards; } @keyframes drzwi { 0%, 58% { opacity: 0; } 68% { opacity: 1; } /* dochodzi do drzwi - otwieraja sie */ 88% { opacity: 1; } /* wchodzi do srodka */ 100% { opacity: 0; } /* drzwi sie zamykaja */ } @media (prefers-reduced-motion: reduce) { .wejscie-scena .lokal-otwarte { animation: none; } } /* ========================================================================== Strona bledu 404. Ma byc krotka i przyjazna: rysunek zagubionej postaci, jedno zdanie z przymruzeniem oka i dwa wyjscia - na strone glowna albo do karty. ========================================================================== */ /* na stronie bledu nie ma dolnego paska, wiec rezerwa miejsca pod niego tylko dokladalaby niepotrzebny scroll */ body:has(.blad) { padding-bottom: 0; } .blad { min-height: 100svh; display: grid; place-items: center; padding: 6rem 1.5rem clamp(3rem, 8vh, 5rem); } .blad-srodek { text-align: center; max-width: 34rem; } .blad-rysunek { height: clamp(180px, 34svh, 300px); width: auto; margin: 0 auto clamp(1.2rem, 3vh, 2rem); display: block; } .blad-kod { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tekst-jasny); margin: 0 0 0.9rem; } .blad-tytul { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.25; color: var(--tusz); margin: 0 0 1rem; } .blad-tekst { font-size: 1rem; color: var(--tekst); margin: 0 auto; max-width: 30rem; } .blad-przyciski { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: clamp(1.5rem, 4vh, 2.4rem); } .blad-przyciski .przycisk { margin-top: 0; } /* ========================================================================== Zycie w witrynie. W godzinach otwarcia przy stoliku siedza goscie i lekko sie poruszaja, jakby rozmawiali; po zmroku pali sie swiatlo. Po zamknieciu lokal jest pusty, a w nocy ciemny. Stanem steruje tresc.js przez data-lokal na . Wszystkie wspolrzedne sa procentami kadru ilustracji frontu i wynikaja z pomiaru pliku lokal-front.png (1499x937): otwor witryny to 54.9-73.4% szerokosci i 53.3-75.6% wysokosci, krzesla stoja na 60.7% i 67.4%. ========================================================================== */ /* Warstwa musi lezec dokladnie na ilustracji, a nie na kadrze. Kadr bywa szerszy od obrazka - przy niskim ekranie ogranicza go max-height, a obrazek (object-fit: contain) zostaje wysrodkowany z marginesami po bokach. Dlatego warstwa bierze wysokosc kadru i wlasne proporcje pliku, tak jak obrazek. Z tej samej ramki korzysta hotspot menu - wczesniej liczyl procenty od kadru i na niskim ekranie wedrowal w bok od tablicy z menu. */ .zycie, .kadr-warstwa { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; aspect-ratio: 1499 / 937; pointer-events: none; } .kadr-warstwa > * { pointer-events: auto; } /* Goscie nie sa doklejani osobno - doklejane figury nigdy nie usiadly rowno na narysowanych krzeslach. Zamiast tego jest druga wersja calej ilustracji frontu (lokal-front-goscie.png), w ktorej ludzie sa narysowani od razu przy stoliku; scena.js podmienia plik zaleznie od data-lokal. Tu zostaje juz tylko swiatlo, bo tego zadna ilustracja nie zalatwi. */ /* ========================================================================== Pogoda na chodniku. Czastki lecace w powietrzu rysuje canvas, ale slad, ktory pogoda zostawia na ziemi, musi byc narysowany reka - inaczej nie trzyma stylu ilustracji. Elementy leza w tej samej ramce co reszta nakladek, wiec ich procenty odnosza sie do pikseli pliku frontu. Chodnik zaczyna sie na 88.5% wysokosci kadru i tam wlasnie siedzi zaspa; slady i kaluze sa nizej, blizej widza. ========================================================================== */ .ziemia > * { pointer-events: none; } .ziemia img { position: absolute; height: auto; /* bez tego atrybut height z HTML rozciaga rysunek */ opacity: 0; transition: opacity 1.4s ease; } /* Kazda pogoda to jeden gotowy pas chodnika, nie zestaw naklejek - snieg ze sladami odcisnietymi juz na rysunku siada inaczej niz slady doklejane osobno, ktore laduja na murze. Pas jest kryjacy ponizej swojej gornej krawedzi, wiec zaslania plyty chodnika z ilustracji frontu. */ .ziemia .chodnik { left: 0; bottom: 0; width: 100%; } [data-pogoda="snieg"] .ziemia .chodnik-zima, [data-pogoda="deszcz"] .ziemia .chodnik-deszcz { opacity: 1; } /* Przy mgle chodnik jest wilgotny, ale nikt nie widzi rozbryzgow - bierzemy ten sam pas co przy deszczu, tylko slabiej, wiec kaluze sa ledwie znaczone. */ [data-pogoda="mgla"] .ziemia .chodnik-deszcz { opacity: 0.45; } /* Swiatlo w srodku - tylko wieczorem i tylko gdy lokal jest otwarty. Poswiata siedzi pod obiema lampami z ilustracji (24% i 62% szerokosci witryny) i bardzo powoli oddycha, zeby nie wygladala jak statyczna plama. */ .zycie .swiatlo { position: absolute; left: 54.9%; top: 53.3%; width: 18.5%; height: 22.3%; opacity: 0; transition: opacity 1.6s ease; background: radial-gradient(58% 52% at 24% 32%, rgba(201,162,39,0.34), rgba(201,162,39,0) 72%), radial-gradient(58% 52% at 62% 32%, rgba(201,162,39,0.34), rgba(201,162,39,0) 72%), linear-gradient(180deg, rgba(201,162,39,0.08), rgba(201,162,39,0.15)); } [data-dzien="noc"][data-lokal="zyje"] .zycie .swiatlo { opacity: 1; animation: swiatlo-oddech 9s ease-in-out infinite; } @keyframes swiatlo-oddech { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-dzien="noc"][data-lokal="zyje"] .zycie .swiatlo { animation: none; } }