@charset "UTF-8"; body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background-color: var(--bg-color); color: var(--main-color); line-height: 1.6; } /* klasa dla w folderze /siedzimysobie/ */ body.special-bg { background-color: #80767d; } body.special-bg1 { background-color: #542f3a; } /* ---------------------------------------- Klasy użytkowe ---------------------------------------- */ /* Podpis wyrównany do prawej */ div.podpis { text-align: right; } /* Wymuszone wyrównanie nagłówków w main */ main.h1, main.h2 { text-align: left; } /* LVH: link, visited, hover — na ciemnym tle */ .darkbackground a:link { color: #eac2c2; } .darkbackground a:visited { color: #a793b6; } .darkbackground a:hover { color: #6a6363; } /* ---------------------------------------- Stopka ---------------------------------------- */ footer { background: #372c33; text-align: center; padding: 1rem; font-size: 0.9rem; color: #eee; } /* ---------------------------------------- Przycisk od ciasteczek ---------------------------------------- */ #open_preferences_center { position: fixed; bottom: 10px; left: 10px; background: #f5f5f5; padding: 6px 10px; border: 1px solid #c1bdbd; border-radius: 4px; font-size: 14px; text-decoration: none; color: #3a3535; z-index: 9999; } a { color: #451622; font-weight: bold; text-decoration: none; } a:hover { color: #d81b60; text-decoration: underline; transition: color 200ms ease-in, text-decoration-color 200ms ease-in; } a:visited { color: #82005b; } /* ---------------------------------------- Dymki dialogowe / narracyjne ---------------------------------------- */ /* Podstawowe ustawienia dla wszystkich dymków */ .bubbleDialog, .bubbleDialog1, .bubbleThought, .bubbleNarration { position: absolute; top: 10px; max-width: 250px; min-width: 100px; padding: 10px 15px; font-size: 14px; border-radius: 5px; background: rgba(255, 251, 234, 0.9); color: #2d2b2b; border: 2px solid #c2185b; } /* --- 1. bubbleDialog: góra z lewej strony --- */ .bubbleDialog { left: 10px; } .bubbleDialog.bottom-left::after, .bubbleDialog.bottom-right::after, .bubbleDialog.side-right::after { content: ""; position: absolute; border-style: solid; } .bubbleDialog.bottom-left::after { bottom: -15px; left: 20px; border-width: 15px 15px 0; border-color: #c2185b transparent transparent; } .bubbleDialog.bottom-right::after { bottom: -15px; right: 20px; border-width: 15px 15px 0; border-color: #c2185b transparent transparent; } .bubbleDialog.side-right::after { top: 20px; right: -15px; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #c2185b; } /* --- 2. bubbleDialog1: góra z prawej strony --- */ .bubbleDialog1 { right: 10px; } .bubbleDialog1.bottom-left::after, .bubbleDialog1.bottom-right::after, .bubbleDialog1.side-left::after { content: ""; position: absolute; border-style: solid; } .bubbleDialog1.bottom-left::after { bottom: -15px; left: 20px; border-width: 15px 15px 0; border-color: #c2185b transparent transparent; } .bubbleDialog1.bottom-right::after { bottom: -15px; right: 20px; border-width: 15px 15px 0; border-color: #c2185b transparent transparent; } .bubbleDialog1.side-left::after { top: 20px; left: -15px; border-width: 12px 15px 15px 0; border-color: transparent #c2185b transparent transparent; } /* --- 3. bubbleThought: myślowy, góra z lewej --- */ .bubbleThought { left: 10px; border-radius: 50%; text-align: center; /* Ogonek z kółek — trzy warianty */ } .bubbleThought.bottom-left::before, .bubbleThought.bottom-left::after, .bubbleThought.bottom-right::before, .bubbleThought.bottom-right::after, .bubbleThought.side-right::before, .bubbleThought.side-right::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 251, 234, 0.9); border: 2px solid #c2185b; } .bubbleThought.bottom-left::before { width: 20px; height: 20px; bottom: -30px; left: 20px; } .bubbleThought.bottom-left::after { width: 10px; height: 10px; bottom: -50px; left: 30px; } .bubbleThought.bottom-right::before { width: 20px; height: 20px; bottom: -30px; right: 20px; } .bubbleThought.bottom-right::after { width: 10px; height: 10px; bottom: -50px; right: 30px; } .bubbleThought.side-right::before { width: 20px; height: 20px; top: 20px; right: -30px; } .bubbleThought.side-right::after { width: 10px; height: 10px; top: 40px; right: -50px; } /* --- 4. bubbleNarration: narracja, góra z lewej --- */ .bubbleNarration { left: 10px; border-radius: 4px; font-family: Georgia, serif; font-size: 14px; background: rgba(255, 251, 234, 0.9); border: 1px solid #c2185b; } /* ---------------------------------------- KONIEC ---------------------------------------- */ .grid-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; } .grid-gallery .grid-item { background: rgb(208, 197, 203); color: rgb(38, 37, 37); border-radius: 5px; padding: 0.5rem; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .grid-gallery .grid-item img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; } .grid-gallery .grid-item a { display: block; margin-top: 0.5rem; color: var(--accent-color); text-decoration: none; font-weight: bold; } .grid-gallery .grid-item a:hover { text-decoration: underline; transition: color 200ms ease-in, text-decoration-color 200ms ease-in; } .character-container { position: fixed; top: 50%; left: -600px; transform: translateY(-50%); height: 400px; animation: ride 6s linear forwards; z-index: 99999; } .character-container img { height: 100%; width: auto; } @keyframes ride { from { left: -400px; } to { left: 100vw; } } .flipped { transform: scaleX(-1); } .author-list { list-style: none; padding: 0; margin: 20px 0; } .author-list li { display: flex; align-items: center; margin-bottom: 15px; } .author-list .avatar { width: 60px; height: 60px; object-fit: contain; margin-right: 15px; } .author-list .note { font-size: 16px; color: #4f4c4c; } /* ---------------------------------------- Drobne elementy UI ---------------------------------------- */ /* Podpis pod obrazkami / elementami */ .caption { text-align: center; font-size: 14px; color: #fff5f5; margin-bottom: 40px; } /* Styl dla komunikatu "ładowania" */ .loading { text-align: center; font-size: 16px; color: #fff5f5; padding: 20px; } /* Prosty dymek tekstowy */ .bubble { display: inline-block; position: relative; background: #fff; border: 0.2px solid #2d2b2b; border-radius: 12px; padding: 10px 15px; max-width: 300px; font-family: Arial, sans-serif; font-size: 14px; color: #3a3939; } nav.topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } nav.topics a { background: var(--accent-color); color: white; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-size: 0.95rem; } nav.topics a:hover { background: #d56f34; } header { background-color: var(--accent-color); color: white; padding: 1rem; text-align: center; } header h1 { margin: 0; font-size: 2rem; } header .subtitle { margin: 0.25rem 0 0.5rem; font-style: italic; } header nav a { color: white; text-decoration: none; margin: 0 0.5rem; } header nav a:hover { text-decoration: underline; } header nav a:visited { color: #d81b60; } main, article { max-width: 800px; margin: auto; padding: 1.5rem; } main h2 { color: var(--accent-color); margin-top: 1.5rem; text-align: center; } :root { color-scheme: light dark; --main-color: #1a1615; --accent-color: #c2185b; --bg-color: #f8e6ec; }