/* ══════════════════════════════════════════════════════════════ HALDEN — warstwa wspólna: tokeny, strona główna, karta książki ══════════════════════════════════════════════════════════════ */ :root{ /* noc granatowa, nie szara */ --bg: #070a14; --bg-2: #0d1120; --bg-3: #141a2e; --ink: #ece3d2; --ink-hi: #fbf6ea; --ink-mute: #9c9689; --ink-faint: #635e57; --zloto: #e8b84b; --zloto-mig: #ffd679; --morze: #1d7a80; --morze-jasne:#3fbfb6; /* czterej bogowie — paleta wprost ze świata książki */ --caldo: #86c06a; --ren: #f0b33f; --arenin: #d1663a; --denvir: #6fb4d8; --linia: rgba(236,227,210,.14); --cien: 0 30px 70px -22px rgba(0,0,0,.85); --proza: "EB Garamond", "Iowan Old Style", Georgia, serif; --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --pas: min(74rem, 100% - 2.5rem); } *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; color:var(--ink); background:var(--bg); font-family:var(--ui); font-size:clamp(1rem,.96rem + .25vw,1.0625rem); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } svg{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } ::selection{ background:rgba(232,184,75,.32); color:var(--ink-hi); } .pas{ width:var(--pas); margin-inline:auto; } @media (hover:hover){ .ziarno{ opacity:.3; mix-blend-mode:overlay; } } .ziarno{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } /* ── przyciski ────────────────────────────────────────────────── */ .przycisk{ display:inline-flex; align-items:center; gap:.6em; padding:1em 1.9em; border:0; border-radius:3px; cursor:pointer; font-family:var(--ui); font-size:1rem; font-weight:600; color:#0a0d16; background:linear-gradient(160deg,var(--zloto-mig),var(--zloto)); text-decoration:none; box-shadow:0 12px 34px -14px rgba(232,184,75,.75); transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; } .przycisk:hover{ transform:translateY(-2px); box-shadow:0 18px 46px -14px rgba(232,184,75,.95); } .przycisk svg{ stroke-width:2; } .przycisk-cichy{ display:inline-flex; align-items:center; gap:.6em; padding:1em 1.7em; border:1px solid var(--linia); border-radius:3px; font-size:1rem; color:var(--ink); text-decoration:none; transition:border-color .25s, color .25s, background .25s; } .przycisk-cichy:hover{ border-color:var(--zloto); color:var(--zloto-mig); background:rgba(232,184,75,.07); } /* ── pasek czterech bogów ─────────────────────────────────────── */ .bogowie{ display:flex; height:3px; width:100%; } .bogowie i{ flex:1; } .bogowie i:nth-child(1){ background:var(--caldo); } .bogowie i:nth-child(2){ background:var(--ren); } .bogowie i:nth-child(3){ background:var(--arenin); } .bogowie i:nth-child(4){ background:var(--denvir); } /* ── górna belka ──────────────────────────────────────────────── */ .gora{ position:fixed; inset:0 0 auto 0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:1.1rem max(1.25rem, calc((100% - var(--pas))/2)); background:linear-gradient(180deg, rgba(7,10,20,.92), rgba(7,10,20,0)); } .znak{ /* Ten sam logotyp co na stronach marki, ale na ciemnym tle karty książki: obrys warstw bierze kolor tła, a warstwa „obraz" — w jasnej palecie granat — tu musi być jaśniejsza, inaczej zlewa się z tłem. */ display:inline-flex; align-items:center; gap:.55em; font-family:var(--proza); font-size:1.35rem; font-weight:400; letter-spacing:-.01em; text-decoration:none; color:var(--ink-hi); } .znak b{ font-weight:700; } .znak span{ white-space:nowrap; } .znak .m-sygnet{ width:1.6em; height:1.6em; flex:0 0 auto; display:block; } /* Globalne `svg{fill:none;stroke:currentColor}` (ikony przycisków) dziedziczy na ścieżki — warstwy muszą dostać fill i stroke wprost, na samym path. */ .znak svg.m-sygnet{ fill:none; stroke:none; } .znak svg.m-sygnet path.w1{ fill:#5fa9ae; stroke:var(--bg); stroke-width:3; paint-order:stroke; } .znak svg.m-sygnet path.w2{ fill:#8fd0d4; stroke:var(--bg); stroke-width:3; paint-order:stroke; } .znak svg.m-sygnet path.w3{ fill:#fbf6ea; stroke:var(--bg); stroke-width:3; paint-order:stroke; } .gora nav{ display:flex; align-items:center; gap:1.5rem; font-size:.9rem; } .gora nav a{ color:var(--ink-mute); text-decoration:none; transition:color .2s; } .gora nav a:hover{ color:var(--ink-hi); } .gora .mini-cta{ padding:.5em 1.1em; border:1px solid rgba(232,184,75,.5); border-radius:3px; color:var(--zloto); font-weight:500; } .gora .mini-cta:hover{ background:rgba(232,184,75,.12); color:var(--zloto-mig); } @media (max-width:600px){ .znak{ font-size:1.05rem; } .gora nav a:not(.mini-cta){ display:none; } .gora .mini-cta{ font-size:.82rem; } } /* ══════════════════════════════════════════════════ HERO ══════ */ .hero{ position:relative; min-height:100svh; display:grid; align-items:end; padding:8rem 0 3.5rem; overflow:hidden; } .hero-tlo{ position:absolute; inset:-5%; background-size:cover; background-position:center 32%; opacity:1; animation:oddech-tla 26s ease-in-out infinite alternate; } @keyframes oddech-tla{ from{ transform:scale(1) } to{ transform:scale(1.07) } } @media (prefers-reduced-motion: reduce){ .hero-tlo{ animation:none } } .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,10,20,.8) 0%, rgba(7,10,20,.05) 24%, rgba(7,10,20,.62) 62%, var(--bg) 97%), radial-gradient(90% 55% at 10% 96%, rgba(7,10,20,.92), transparent 72%); } .hero .pas{ position:relative; z-index:2; } .hero-nota{ display:inline-flex; align-items:center; gap:.6em; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--zloto); margin:0 0 1.4rem; } .hero-nota::before{ content:""; width:2.2rem; height:1px; background:var(--zloto); } .hero h1{ font-family:var(--proza); font-weight:400; font-size:clamp(2.6rem,8.4vw,5.4rem); line-height:1.04; margin:0 0 1.2rem; color:var(--ink-hi); max-width:15ch; text-wrap:balance; text-shadow:0 4px 44px rgba(0,0,0,.85); } .hero h1 em{ font-style:normal; color:var(--zloto-mig); } .hero-lead{ font-family:var(--proza); font-size:clamp(1.18rem,3.5vw,1.5rem); line-height:1.55; color:var(--ink); margin:0 0 2.2rem; max-width:34rem; text-wrap:pretty; text-shadow:0 2px 26px rgba(0,0,0,.9); } .hero-akcje{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; } .hero-drobne{ font-size:.85rem; color:var(--ink-mute); margin:1.3rem 0 0; } /* ── pasek „czytaj dalej" ─────────────────────────────────────── */ .wznow{ position:relative; z-index:6; display:none; gap:.9rem 1.2rem; flex-wrap:wrap; align-items:center; padding:1.1rem 1.3rem; border-radius:4px; background:linear-gradient(100deg, rgba(29,122,128,.4), rgba(20,26,46,.75)); border:1px solid rgba(63,191,182,.4); box-shadow:var(--cien); } .wznow.jest{ display:flex; } .wznow-tekst{ flex:1; min-width:13rem; font-size:.95rem; } .wznow-tekst b{ color:var(--morze-jasne); font-weight:600; } .wznow .przycisk{ padding:.7em 1.3em; font-size:.9rem; } .wznow-pasek{ width:100%; height:3px; background:rgba(236,227,210,.14); border-radius:2px; overflow:hidden; } .wznow-pasek i{ display:block; height:100%; background:var(--morze-jasne); } /* ══════════════════════════════════════════ O CZYM TO JEST ════ */ .zajawka{ position:relative; z-index:2; padding:6rem 0 5rem; background: radial-gradient(85% 55% at 10% 0%, rgba(29,122,128,.26), transparent 62%), radial-gradient(70% 50% at 96% 100%, rgba(232,184,75,.12), transparent 62%); } .zajawka-lead{ font-family:var(--proza); font-size:clamp(1.5rem,5vw,2.4rem); line-height:1.34; color:var(--ink-hi); max-width:26ch; margin:0 0 3.2rem; text-wrap:balance; } .beaty{ display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); } .beat{ position:relative; padding-top:1.5rem; } .beat::before{ content:""; position:absolute; top:0; left:0; width:2.6rem; height:2px; background:var(--kolor,var(--zloto)); } .beat h3{ font-family:var(--proza); font-weight:400; font-size:1.4rem; margin:0 0 .55rem; color:var(--ink-hi); } .beat p{ margin:0; color:var(--ink-mute); font-size:1rem; line-height:1.65; } /* ══════════════════════════════════════════════ KSIĄŻKA ═══════ */ .ksiazka{ position:relative; z-index:2; padding:4.5rem 0 6rem; } .ksiazka-karta{ display:grid; gap:2.5rem; align-items:center; grid-template-columns:minmax(0,1fr); } @media (min-width:52rem){ .ksiazka-karta{ grid-template-columns:minmax(0,21rem) minmax(0,1fr); gap:4rem; } } .okladka{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:2/3; box-shadow:var(--cien), 0 0 0 1px rgba(236,227,210,.1); text-decoration:none; display:block; } .okladka img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); } .okladka:hover img{ transform:scale(1.04); } /* Żywa okładka — ten sam kadr co statyczny, tylko mgła płynie. Film wjeżdża NAD obrazek dopiero, gdy naprawdę gra; statyczny zostaje spodem. */ .okladka-zywa{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; pointer-events:none; /* bez z-index: kolejność w DOM daje obrazek → film → gradient ::after → napis */ } .okladka-zywa.gra{ opacity:1; } @media (prefers-reduced-motion: reduce){ .okladka-zywa{ display:none; } } .okladka::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%, rgba(7,10,20,.94)); } .okladka-napis{ position:absolute; inset:auto 0 0 0; z-index:2; padding:1.6rem 1.3rem; text-align:center; } .okladka-napis .autor{ font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--zloto); margin:0 0 .55rem; } .okladka-napis .tytul{ font-family:var(--proza); font-size:2rem; line-height:1.05; color:var(--ink-hi); margin:0; } .ksiazka-tresc h2{ font-family:var(--proza); font-weight:400; font-size:clamp(2.1rem,6.5vw,3.2rem); line-height:1.06; margin:0 0 .5rem; color:var(--ink-hi); } .ksiazka-tresc .podtytul{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--morze-jasne); margin:0 0 1.7rem; } .ksiazka-tresc p{ font-family:var(--proza); font-size:clamp(1.08rem,3.2vw,1.26rem); line-height:1.7; color:var(--ink); margin:0 0 1.1em; max-width:38rem; } .ksiazka-tresc p.cytat{ color:var(--zloto-mig); font-size:clamp(1.22rem,4vw,1.5rem); border-left:2px solid var(--zloto); padding-left:1.2rem; margin-block:1.7rem; } .fakty{ display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; margin:1.8rem 0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); } .fakty b{ color:var(--zloto); font-weight:600; } /* ══════════════════════════════════════════════ AUTOR ═════════ */ .autor-sekcja{ position:relative; z-index:2; background:var(--bg-2); border-block:1px solid var(--linia); padding:5rem 0; } .autor-siatka{ display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr); } @media (min-width:56rem){ .autor-siatka{ grid-template-columns:13rem minmax(0,1fr); align-items:start; gap:3.5rem; } } .autor-portret{ border-radius:3px; overflow:hidden; border:1px solid var(--linia); } .autor-portret img{ aspect-ratio:4/5; object-fit:cover; width:100%; } .autor-tekst .kto{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--zloto); margin:0 0 1.1rem; } .autor-tekst p{ font-family:var(--proza); font-size:1.16rem; line-height:1.72; margin:0 0 1.05em; max-width:40rem; } .autor-tekst p:last-child{ margin-bottom:0; } .autor-tekst .podpis{ font-family:var(--proza); font-size:1.5rem; color:var(--zloto); letter-spacing:.06em; } /* ══════════════════════════════════════════════ ZAPIS ═════════ */ .zapis-sekcja{ position:relative; z-index:2; padding:5rem 0; text-align:center; } .zapis-sekcja h2{ font-family:var(--proza); font-weight:400; font-size:clamp(1.7rem,5.5vw,2.4rem); margin:0 0 .7rem; color:var(--ink-hi); } .zapis-sekcja > .pas > p{ color:var(--ink-mute); max-width:34rem; margin:0 auto 1.8rem; } .zapis{ display:flex; gap:.5rem; max-width:26rem; margin-inline:auto; } .zapis input{ flex:1; min-width:0; padding:.9em 1em; border-radius:3px; font-family:var(--ui); font-size:.95rem; color:var(--ink-hi); background:var(--bg-3); border:1px solid var(--linia); } .zapis input:focus{ outline:none; border-color:rgba(232,184,75,.65); } .zapis button{ padding:.9em 1.4em; border:0; border-radius:3px; cursor:pointer; font-family:var(--ui); font-size:.95rem; font-weight:600; background:var(--zloto); color:#0a0d16; } .zapis-nota{ font-size:.78rem; color:var(--ink-faint); margin:1rem 0 0; } /* ══════════════════════════════════════════════ STOPKA ════════ */ .dol{ position:relative; z-index:2; padding:2.5rem 0 3.5rem; border-top:1px solid var(--linia); } .dol .pas{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center; } .dol p{ margin:0; font-size:.85rem; color:var(--ink-faint); } .dol nav{ display:flex; gap:1.4rem; font-size:.85rem; } .dol nav a{ color:var(--ink-mute); text-decoration:none; } .dol nav a:hover{ color:var(--zloto); } /* ══════════════════════════════════════════ SPIS ROZDZIAŁÓW ═══ */ .spis{ position:relative; z-index:2; padding:3.5rem 0 5.5rem; } .naglowek-sekcji{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.8rem; } .naglowek-sekcji h2{ font-family:var(--proza); font-weight:400; font-size:clamp(1.6rem,4.5vw,2.2rem); margin:0; color:var(--ink-hi); } .naglowek-sekcji .kreska{ flex:1; height:1px; background:var(--linia); } .naglowek-sekcji .stan{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zloto); border:1px solid rgba(232,184,75,.4); padding:.25em .7em; border-radius:2px; } .spis ol{ list-style:none; margin:0; padding:0; max-width:46rem; } .spis li{ border-top:1px solid var(--linia); } .spis li:last-child{ border-bottom:1px solid var(--linia); } .spis a, .spis .wkrotce{ display:flex; align-items:baseline; gap:1.2rem; padding:1.5rem .4rem; text-decoration:none; color:inherit; transition:background .25s, padding-left .25s; } .spis a:hover{ background:rgba(232,184,75,.06); padding-left:1rem; } .spis .numer{ font-family:var(--proza); font-size:1.5rem; color:var(--zloto); min-width:2.2rem; } .spis .tytul{ font-family:var(--proza); font-size:1.32rem; color:var(--ink-hi); flex:1; } .spis .czas{ font-size:.8rem; color:var(--ink-mute); white-space:nowrap; } .spis .wkrotce, .spis .wkrotce .tytul{ color:var(--ink-faint); } /* ══════════════════════════════════════════════════════════════ MARKA STORYMI — strona główna Świadomie INNA niż książka: książka jest nocna i ciężka, marka ma być jasna, ciepła i wesoła. Kontrast działa jak próg: klikasz „czytaj" i wchodzisz w inny świat. Wszystko pod .marka, żeby nie dotknąć czytnika ani karty książki. ══════════════════════════════════════════════════════════════ */ body.marka{ --m-tlo: #fdf6e9; /* papier, nie ekran */ --m-tlo-2: #f6e8cf; --m-tlo-3: #ffffff; --m-atrament: #16233f; /* granat z okładki, ale na jasnym */ --m-atrament-2:#43516f; --m-zloto: #d9891f; --m-rdza: #c85a34; --m-morze: #1c7f86; --m-linia: rgba(22,35,63,.14); --m-cien: 0 22px 50px -24px rgba(22,35,63,.45); background:var(--m-tlo); color:var(--m-atrament); } body.marka .pas{ width:min(1180px, 92vw); margin-inline:auto; } /* ── belka górna ─────────────────────────────────────────────── */ /* Belka marki: FreelyRead dokładnie na środku, hamburger z prawej, z lewej pusta kolumna tej samej szerokości co guzik — żeby środek był środkiem. Linki żyją tylko w szufladzie (decyzja autora, 22.08.2026). */ .m-gora{ position:sticky; top:0; z-index:50; display:grid; grid-template-columns:2.7rem minmax(0,1fr) 2.7rem; align-items:center; gap:1rem; padding:.9rem clamp(1rem,4vw,2.5rem); background:rgba(253,246,233,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--m-linia); } .m-znak{ /* Sygnet + nazwa. Logotyp nie jest już wersalikami z rozstrzelonym światłem — marka ma teraz własny znak, więc słowo może wrócić do naturalnej postaci: „Freely" grubsze niż „Read", różnica wagi robi robotę koloru. */ display:inline-flex; align-items:center; gap:.55em; font-family:var(--proza); font-size:1.35rem; font-weight:400; letter-spacing:-.01em; text-decoration:none; color:var(--m-atrament); } .m-znak b{ font-weight:700; } .m-znak span{ white-space:nowrap; font-weight:400; } .m-sygnet{ /* wysokość równa wielkiej literze obok — sygnet siedzi na tej samej linii */ width:1.6em; height:1.6em; flex:0 0 auto; display:block; } /* Trzy warstwy w trzech kolorach z palety: dźwięk — morze, obraz — granat, tekst — bursztyn. Obrys w kolorze tła odcina każdą od tej pod spodem; to on daje głębię, nie przezroczystość. */ svg.m-sygnet{ fill:none; stroke:none; } /* Zestaw kolorów znaku — wybrany 22.08.2026: „3 · morze i papier". Inne zestawy (do podmiany, gdy klimat tego zażąda — zmień trzy wartości): 1 atrament w tonach #9fb0cc / #4d6186 / #16233f 2 zachód #e8b86a / #c85a34 / #16233f 3 morze i papier #7fb8bd / #1c7f86 / #16233f ← aktywny 4 sepia #d9c3a0 / #a8793f / #3b2a18 5 jeden kolor #16233f ×3 z kryciem .35 / .65 / 1 6 zieleń i ochra #b9c9a3 / #6f8f5c / #16233f Pełne pliki SVG każdego zestawu leżą w Logo/kolory/. */ :root{ --znak-1:#7fb8bd; --znak-2:#1c7f86; --znak-3:#16233f; } svg.m-sygnet path.w1{ fill:var(--znak-1); stroke:var(--m-tlo); stroke-width:3; paint-order:stroke; } svg.m-sygnet path.w2{ fill:var(--znak-2); stroke:var(--m-tlo); stroke-width:3; paint-order:stroke; } svg.m-sygnet path.w3{ fill:var(--znak-3); stroke:var(--m-tlo); stroke-width:3; paint-order:stroke; } .m-gora nav{ display:none; } .m-gora .m-znak{ grid-column:2; justify-self:center; } .m-gora .menu-przycisk{ grid-column:3; margin-left:0; } .m-gora nav a{ color:var(--m-atrament-2); text-decoration:none; transition:color .2s; } .m-gora nav a:hover{ color:var(--m-atrament); } .m-cta{ padding:.5rem 1.05rem; border-radius:999px; background:var(--m-atrament); color:var(--m-tlo) !important; font-weight:600; } .m-cta:hover{ background:var(--m-rdza); } /* ── hero ────────────────────────────────────────────────────── */ .m-hero{ position:relative; } .m-hero-obraz{ display:block; width:100%; height:min(58svh, 30rem); object-fit:cover; object-position:center 62%; } .m-hero-tresc{ position:relative; margin-top:-3.5rem; padding:2.4rem clamp(1.3rem,4vw,3rem) 2.6rem; background:var(--m-tlo-3); border-radius:20px; box-shadow:var(--m-cien); border:1px solid var(--m-linia); } .m-nadtytul{ display:flex; align-items:center; gap:.7rem; margin:0 0 .9rem; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--m-zloto); } .m-nadtytul::before{ content:""; width:2rem; height:2px; background:var(--m-zloto); border-radius:2px; } .m-hero h1{ font-family:var(--proza); font-weight:600; margin:0 0 1.1rem; font-size:clamp(2rem, 1.2rem + 3.6vw, 3.6rem); line-height:1.08; letter-spacing:-.01em; } .m-hero h1 em{ font-style:normal; color:var(--m-rdza); } .m-lead{ max-width:44rem; margin:0 0 1.8rem; font-size:clamp(1rem, .95rem + .25vw, 1.16rem); line-height:1.62; color:var(--m-atrament-2); } .m-akcje{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; } /* ── przyciski marki ─────────────────────────────────────────── */ .m-przycisk, .m-przycisk-cichy{ display:inline-flex; align-items:center; gap:.55rem; padding:.82rem 1.5rem; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; transition:transform .18s, background .2s, color .2s; } .m-przycisk{ background:var(--m-atrament); color:var(--m-tlo); box-shadow:0 10px 24px -14px rgba(22,35,63,.9); } .m-przycisk:hover{ background:var(--m-rdza); transform:translateY(-2px); } .m-przycisk svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .m-przycisk-cichy{ color:var(--m-atrament); border:1.5px solid var(--m-linia); background:transparent; } .m-przycisk-cichy:hover{ border-color:var(--m-atrament); transform:translateY(-2px); } /* ── pasek „czytaj dalej" ────────────────────────────────────── */ .m-wznow-pas{ margin-top:2rem; } body.marka .wznow{ background:var(--m-tlo-2); border:1px solid var(--m-linia); color:var(--m-atrament); border-radius:16px; box-shadow:none; } body.marka .wznow-tekst{ color:var(--m-atrament-2); } body.marka .wznow-tekst b{ color:var(--m-atrament); } body.marka .wznow-pasek{ background:rgba(22,35,63,.12); } body.marka .wznow-pasek i{ background:var(--m-zloto); } /* ── trzy obietnice ──────────────────────────────────────────── */ .m-obietnice{ padding:4rem 0 1rem; } .m-trzy{ display:grid; gap:2rem; grid-template-columns:minmax(0,1fr); } .m-obietnica img{ width:5.6rem; height:5.6rem; object-fit:contain; margin:0 0 .8rem; } .m-obietnica h3{ font-family:var(--proza); font-size:1.32rem; font-weight:600; margin:0 0 .5rem; } .m-obietnica p{ margin:0; color:var(--m-atrament-2); line-height:1.6; } /* ── półka z książkami ───────────────────────────────────────── */ .m-polka{ padding:4rem 0 5rem; } .m-naglowek{ margin:0 0 2.2rem; } .m-naglowek h2{ font-family:var(--proza); font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem); font-weight:600; margin:0 0 .35rem; } .m-naglowek p{ margin:0; color:var(--m-atrament-2); } .m-karty{ display:grid; gap:2rem; grid-template-columns:minmax(0,1fr); } .m-karta{ display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr); background:var(--m-tlo-3); border:1px solid var(--m-linia); border-radius:20px; padding:1.4rem; box-shadow:var(--m-cien); } .m-okladka{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:2/3; box-shadow:0 16px 34px -18px rgba(22,35,63,.7); } .m-okladka img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); } .m-okladka:hover img{ transform:scale(1.04); } .m-karta-tresc{ display:flex; flex-direction:column; gap:.75rem; } .m-cykl{ margin:0; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--m-morze); } .m-karta-tresc h3{ font-family:var(--proza); font-size:2rem; font-weight:600; margin:0; line-height:1.1; } .m-karta-tresc h3 a{ color:inherit; text-decoration:none; } .m-karta-tresc h3 a:hover{ color:var(--m-rdza); } .m-cytat{ margin:0; padding-left:1rem; border-left:3px solid var(--m-zloto); font-family:var(--proza); font-style:italic; font-size:1.1rem; color:var(--m-atrament); } .m-opis{ margin:0; color:var(--m-atrament-2); line-height:1.65; } .m-fakty{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:.2rem 0 .4rem; } .m-fakty li{ padding:.4rem .85rem; border-radius:999px; background:var(--m-tlo-2); font-size:.86rem; color:var(--m-atrament-2); } .m-fakty b{ color:var(--m-atrament); } .m-karta-pusta{ background:transparent; box-shadow:none; border-style:dashed; } .m-okladka-pusta{ aspect-ratio:2/3; border-radius:12px; border:2px dashed var(--m-linia); display:grid; place-items:center; } .m-okladka-pusta span{ font-family:var(--proza); font-size:3.5rem; color:var(--m-linia); } /* ── autor ───────────────────────────────────────────────────── */ .m-autor{ background:var(--m-atrament); color:var(--m-tlo); padding:4.5rem 0; } .m-autor-tekst{ max-width:46rem; } .m-autor-tekst p{ line-height:1.72; color:rgba(253,246,233,.82); margin:0 0 1rem; } .m-kto{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--m-zloto) !important; margin:0 0 1.2rem !important; } .m-mocne{ font-family:var(--proza); font-size:1.28rem; color:var(--m-tlo) !important; font-style:italic; } .m-podpis{ font-family:var(--proza); color:var(--m-zloto) !important; } /* ── zapis i stopka ──────────────────────────────────────────── */ .m-zapis{ padding:4.5rem 0; text-align:center; background:var(--m-tlo-2); } .m-zapis h2{ font-family:var(--proza); font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem); font-weight:600; margin:0 0 .5rem; } .m-zapis > .pas > p{ margin:0 0 1.6rem; color:var(--m-atrament-2); } body.marka .zapis{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; } body.marka .zapis input[type=email]{ padding:.8rem 1.1rem; min-width:min(20rem,80vw); border-radius:999px; border:1.5px solid var(--m-linia); background:var(--m-tlo-3); color:var(--m-atrament); font-family:inherit; font-size:.95rem; } body.marka .zapis input[type=email]:focus{ outline:none; border-color:var(--m-atrament); } body.marka .zapis button{ padding:.8rem 1.5rem; border-radius:999px; border:none; cursor:pointer; background:var(--m-atrament); color:var(--m-tlo); font-weight:600; font-size:.95rem; font-family:inherit; transition:background .2s; } body.marka .zapis button:hover{ background:var(--m-rdza); } .m-drobne{ margin:1rem 0 0; font-size:.85rem; color:var(--m-atrament-2); } .m-dol{ padding:2.4rem 0; border-top:1px solid var(--m-linia); } .m-dol .pas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; } .m-dol p{ margin:0; font-size:.88rem; color:var(--m-atrament-2); } .m-dol nav{ display:flex; gap:1.3rem; font-size:.88rem; } .m-dol nav a{ color:var(--m-atrament-2); text-decoration:none; } .m-dol nav a:hover{ color:var(--m-atrament); } @media (min-width:52rem){ .m-trzy{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:2.6rem; } .m-karta{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:2.4rem; padding:1.8rem; align-items:center; } .m-karty{ gap:2.4rem; } .m-hero-obraz{ height:min(66svh, 34rem); } .m-hero-tresc{ margin-top:-5rem; } } @media (max-width:640px){ .m-gora{ padding:.7rem 1rem; gap:.8rem; } .m-znak{ font-size:1.08rem; } .m-gora nav{ gap:.8rem; } .m-gora nav a:not(.m-cta){ display:none; } /* na telefonie liczy się jeden przycisk */ .m-cta{ padding:.48rem 1rem; font-size:.86rem; white-space:nowrap; } .m-hero-obraz{ height:44svh; } .m-hero-tresc{ margin-top:-2.5rem; border-radius:16px; } .m-obietnica img{ width:4.6rem; height:4.6rem; } } /* ══════════════════════════════════════════════════════════════ SPIS ROZDZIAŁÓW — karta książki Czytelnik z innego urządzenia ma w trzy sekundy znaleźć swój rozdział: numer, tytuł, zdanie-hak i zakres stron z symulacji. ══════════════════════════════════════════════════════════════ */ .rozdzialy{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; } .rozdzialy > li > a, .rozdzialy > li > span{ display:grid; gap:.4rem 1.2rem; align-items:center; grid-template-columns:auto minmax(0,1fr); padding:1.15rem 1.3rem; border-radius:5px; border:1px solid var(--linia); background:rgba(20,26,46,.5); text-decoration:none; color:inherit; transition:border-color .25s, background .25s, transform .25s; } .rozdzialy > li > a:hover{ border-color:rgba(232,184,75,.55); background:rgba(20,26,46,.9); transform:translateY(-2px); } .r-numer{ font-family:var(--proza); font-size:1.6rem; color:var(--zloto); min-width:2.2rem; text-align:center; line-height:1; } .r-tresc{ display:grid; gap:.25rem; min-width:0; } .r-tytul{ font-family:var(--proza); font-size:1.35rem; color:var(--ink-hi); line-height:1.2; } .r-hak{ font-size:.9rem; color:var(--ink-mute); line-height:1.5; } .r-meta{ grid-column:1 / -1; display:flex; gap:.9rem; align-items:baseline; font-size:.82rem; color:var(--ink-faint); padding-top:.5rem; border-top:1px solid var(--linia); } .r-meta b{ color:var(--morze-jasne); font-weight:600; } .r-meta i{ font-style:normal; } .r-wkrotce > span{ opacity:.55; border-style:dashed; } .r-wkrotce .r-numer{ color:var(--ink-faint); } @media (min-width:46rem){ .rozdzialy > li > a, .rozdzialy > li > span{ grid-template-columns:auto minmax(0,1fr) auto; } .r-meta{ grid-column:auto; flex-direction:column; gap:.2rem; text-align:right; padding-top:0; border-top:0; border-left:1px solid var(--linia); padding-left:1.2rem; } } /* ══════════════════════════════════════════════════════════════ MENU BOCZNE — wysuwana szuflada Działa na obu skórach: jasnej marce i ciemnej karcie książki. Kolory bierze ze zmiennych, więc na stronie głównej jest kremowa, a przy książce granatowa — bez duplikowania reguł. ══════════════════════════════════════════════════════════════ */ .menu-przycisk{ display:grid; gap:5px; place-content:center; width:2.7rem; height:2.7rem; margin-left:.4rem; flex:none; border:1px solid var(--m-linia, var(--linia)); border-radius:999px; background:transparent; cursor:pointer; z-index:70; } .menu-przycisk span{ display:block; width:1.05rem; height:2px; border-radius:2px; background:var(--m-atrament, var(--ink-hi)); transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .2s; } .menu-przycisk.jest span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-przycisk.jest span:nth-child(2){ opacity:0; } .menu-przycisk.jest span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .menu-zaslona{ position:fixed; inset:0; z-index:80; opacity:0; pointer-events:none; background:rgba(9,14,28,.55); backdrop-filter:blur(3px); transition:opacity .32s ease; } .menu-zaslona.jest{ opacity:1; pointer-events:auto; } .menu-szuflada{ position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(20rem, 84vw); padding:1.4rem 1.5rem 2rem; display:flex; flex-direction:column; gap:1.5rem; background:var(--m-tlo, var(--bg-2)); color:var(--m-atrament, var(--ink)); border-left:1px solid var(--m-linia, var(--linia)); box-shadow:-30px 0 60px -30px rgba(0,0,0,.6); transform:translateX(102%); transition:transform .34s cubic-bezier(.2,.8,.3,1); overflow-y:auto; } .menu-szuflada.jest{ transform:none; } @media (prefers-reduced-motion: reduce){ .menu-szuflada, .menu-zaslona, .menu-przycisk span{ transition:none; } } .menu-naglowek{ display:flex; align-items:center; justify-content:space-between; } .menu-znak{ font-family:var(--proza); font-size:1.15rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; } .menu-zamknij{ width:2.2rem; height:2.2rem; border:0; border-radius:999px; cursor:pointer; background:transparent; color:inherit; font-size:1.7rem; line-height:1; } .menu-zamknij:hover{ background:var(--m-tlo-2, var(--bg-3)); } .menu-szuflada ul{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; } .menu-szuflada ul a{ display:block; padding:.85rem .9rem; border-radius:10px; font-family:var(--proza); font-size:1.28rem; text-decoration:none; color:inherit; transition:background .2s, padding-left .2s; } .menu-szuflada ul a:hover{ background:var(--m-tlo-2, var(--bg-3)); padding-left:1.3rem; } .menu-szuflada ul a.teraz{ background:var(--m-tlo-2, var(--bg-3)); box-shadow:inset 3px 0 0 var(--m-zloto, var(--zloto)); } .menu-cta{ display:block; text-align:center; padding:.85rem 1.2rem; border-radius:999px; background:var(--m-atrament, var(--zloto)); color:var(--m-tlo, #0a0d16); font-weight:600; text-decoration:none; transition:background .2s; } .menu-cta:hover{ background:var(--m-rdza, var(--zloto-mig)); } .menu-stopka{ margin:auto 0 0; font-size:.85rem; line-height:1.6; color:var(--m-atrament-2, var(--ink-mute)); } /* na książce (ciemna skóra) kreska hamburgera musi być jasna */ body:not(.marka) .menu-przycisk span{ background:var(--ink-hi); } body:not(.marka) .menu-przycisk{ border-color:var(--linia); } @media (max-width:640px){ .m-gora nav a:not(.m-cta){ display:none; } } /* ══════════════════════════════════════════════════════════════ PODSTRONY MARKI — wsparcie, współpraca ══════════════════════════════════════════════════════════════ */ .m-strona{ padding:3.5rem 0 2rem; } .m-waska{ max-width:52rem; } .m-strona h1{ font-family:var(--proza); font-weight:600; margin:0 0 1.2rem; font-size:clamp(1.9rem, 1.2rem + 3vw, 3.1rem); line-height:1.1; } .m-strona h1 em{ font-style:normal; color:var(--m-rdza); } .m-wsparcie{ padding:2rem 0 4rem; } .m-kafle{ display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr); } .m-kafel{ background:var(--m-tlo-3); border:1px solid var(--m-linia); border-radius:18px; padding:1.6rem; box-shadow:var(--m-cien); display:flex; flex-direction:column; gap:.7rem; } .m-kafel img{ /* Ilustracje są kwadratowe, rysowane na kremowym tle — tym samym co kafel. Nie wolno ich przycinać: `cover` w niskim pasie zjadał kałamarz i statek, zostawiając sam łuk jaskółek. Pokazujemy CAŁY obraz (`contain`), a kremowe tło ilustracji zlewa się z kaflem, więc nie ma żadnych pustych pasków. */ width:100%; max-width:14rem; aspect-ratio:1/1; height:auto; object-fit:contain; display:block; margin:0 auto 1rem; border-radius:0; } .m-kafel h2{ font-family:var(--proza); font-size:1.5rem; font-weight:600; margin:0; } .m-kafel p{ margin:0; color:var(--m-atrament-2); line-height:1.6; } .m-kafel .m-przycisk, .m-kafel .m-przycisk-cichy{ margin-top:auto; align-self:flex-start; } .m-konto{ margin-top:auto; padding:.9rem 1.1rem; border-radius:12px; background:var(--m-tlo-2); border:1px dashed var(--m-linia); } .m-konto-etykieta{ margin:0 0 .25rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--m-morze); } .m-konto-numer{ margin:0; font-family:var(--ui); font-size:1.02rem; letter-spacing:.04em; word-break:break-all; } /* ── formularz zgłoszenia książki ────────────────────────────── */ .m-formularz{ display:grid; gap:1rem; text-align:left; margin:0 0 1.2rem; } .m-formularz label{ display:grid; gap:.35rem; font-size:.9rem; color:var(--m-atrament-2); } .m-formularz input[type=text], .m-formularz input[type=email], .m-formularz input[type=url], .m-formularz textarea{ padding:.75rem .95rem; border-radius:12px; font-family:inherit; font-size:1rem; border:1.5px solid var(--m-linia); background:var(--m-tlo-3); color:var(--m-atrament); } .m-formularz input:focus, .m-formularz textarea:focus{ outline:none; border-color:var(--m-atrament); } .m-formularz textarea{ resize:vertical; } .m-zgoda{ display:flex !important; flex-direction:row; align-items:flex-start; gap:.6rem; } .m-zgoda input{ /* Pole zgody miało 13 px — w palec nie do trafienia. Minimum dotykowe to 24 px samego kwadratu, a klikalny jest cały wiersz razem z tekstem. */ width:1.5rem; height:1.5rem; flex:0 0 auto; margin-top:.1rem; accent-color:var(--atrament,#1d2b3a); } .m-zgoda{ cursor:pointer; padding:.5rem 0; } .m-formularz button{ justify-self:start; padding:.85rem 1.7rem; border:none; border-radius:999px; cursor:pointer; background:var(--m-atrament); color:var(--m-tlo); font-weight:600; font-size:1rem; font-family:inherit; transition:background .2s, transform .18s; } .m-formularz button:hover{ background:var(--m-rdza); transform:translateY(-2px); } @media (min-width:52rem){ .m-kafle{ grid-template-columns:repeat(3, minmax(0,1fr)); } } /* ── Udostępnianie: arkusz, prośba, podziękowanie ────────────────────── Jeden zestaw stylów dla strony i dla czytnika, bo okna są te same. Kolory biorą się ze zmiennych motywu, jeśli są; jeśli nie — z wartości zapasowych, żeby arkusz nie wyglądał inaczej na czarnej stronie czytnika niż na kremowej stronie marki. */ .dziel-tlo{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:1.2rem; /* Bez backdrop-filter. Rozmycie tła sprawiało, że silnik rysował zawartość spod spodu NA arkuszu — okładka rozdziału przebijała przez nieprzezroczyste tło i całość była nieczytelna. Mocniejsze przyciemnienie robi to samo zadanie i nie ma z czym kolidować. */ background:rgba(10,14,20,.88); opacity:0; transition:opacity .26s ease; } .dziel-tlo.jest{ opacity:1; } .dziel-arkusz{ position:relative; width:min(30rem,100%); max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#fdf6e9; color:#1d2b3a; border-radius:1.1rem; padding:2rem 1.6rem 1.7rem; box-shadow:0 30px 80px rgba(0,0,0,.45); transform:translateY(14px) scale(.98); transition:transform .26s cubic-bezier(.2,.8,.3,1); text-align:center; } .dziel-tlo.jest .dziel-arkusz{ transform:none; } .dziel-zamknij{ position:absolute; top:.5rem; right:.6rem; width:2.4rem; height:2.4rem; border:0; background:none; font-size:1.7rem; line-height:1; color:#8b98a6; cursor:pointer; border-radius:50%; } .dziel-zamknij:hover{ background:rgba(0,0,0,.06); color:#1d2b3a; } .dziel-nad{ margin:0 0 .5rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#b4762f; font-weight:600; } .dziel-arkusz h2{ margin:0 0 .9rem; font-family:'EB Garamond',Georgia,serif; font-size:1.6rem; line-height:1.22; font-weight:600; } .dziel-slowo{ margin:0 0 .8rem; font-size:1rem; line-height:1.62; color:#42505f; } .dziel-podpis{ margin:1.1rem 0 0; font-family:'EB Garamond',Georgia,serif; font-style:italic; font-size:1.05rem; color:#1d2b3a; } /* Wielki przycisk — najważniejszy element całej strony pod względem tego, czy ta książka gdziekolwiek dotrze. Ma się w niego trafić kciukiem bez celowania. */ .dziel-wielki{ display:block; width:100%; margin:1.2rem 0 .7rem; padding:1.15rem 1.4rem; border:0; border-radius:.85rem; background:linear-gradient(135deg,#c2622a,#a34e1f); color:#fff; font-size:1.14rem; font-weight:700; letter-spacing:.01em; cursor:pointer; box-shadow:0 12px 26px rgba(163,78,31,.34); transition:transform .16s ease, box-shadow .16s ease; } .dziel-wielki:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(163,78,31,.42); } .dziel-wielki:active{ transform:translateY(0); } .dziel-cicho{ display:inline-block; margin-top:.3rem; font-size:.92rem; color:#6b7a8c; text-decoration:underline; text-underline-offset:3px; } /* Kanały — tylko na komputerze; telefon dostaje okno systemowe */ .dziel-gdzie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(7.4rem,1fr)); gap:.55rem; margin:1.1rem 0 .9rem; } .dziel-kanal{ padding:.85rem .6rem; border-radius:.7rem; text-align:center; background:var(--kolor,#333); color:#fff; font-weight:600; font-size:.94rem; text-decoration:none; transition:filter .16s ease, transform .16s ease; } .dziel-kanal:hover{ filter:brightness(1.12); transform:translateY(-1px); } .dziel-kopiuj{ width:100%; padding:.9rem 1rem; border:1.5px solid #d8cbb4; border-radius:.75rem; background:#fff; color:#1d2b3a; font-size:1rem; font-weight:600; cursor:pointer; transition:background .16s ease, border-color .16s ease; } .dziel-kopiuj:hover{ background:#f6efe1; border-color:#c2622a; } .dziel-kopiuj.udalo{ background:#e8f5e9; border-color:#66a06b; color:#2e5f33; } .dziel-link{ margin:.6rem 0 0; font-size:.78rem; color:#8b98a6; word-break:break-all; } /* Pasek udostępniania na końcu rozdziału — stoi w treści, nie w oknie, więc widzi go także ktoś, kto okno zamknął. */ .koniec-dziel{ margin:2rem auto 0; max-width:26rem; text-align:center; } .koniec-dziel p{ margin:0 0 .8rem; font-size:.96rem; opacity:.75; } .koniec-dziel .dziel-wielki{ margin-top:0; } @media (max-width:480px){ .dziel-arkusz{ padding:1.8rem 1.15rem 1.4rem; } .dziel-arkusz h2{ font-size:1.42rem; } } /* ── Strona wspierających: ostatnia karta powieści ───────────────────── Ma wyglądać jak kartka z książki, nie jak lista subskrybentów — bo w wydaniu papierowym te nazwiska staną dokładnie w tym miejscu. */ .wsp-karta{ padding:2.5rem 0 4rem; background:linear-gradient(180deg,#f3ead9,#fdf6e9 40%); } .wsp-papier{ background:#fffdf7; border:1px solid #e6dbc4; border-radius:.4rem; padding:3rem 2rem 2.4rem; box-shadow:0 18px 50px rgba(70,50,20,.10); } .wsp-numer-strony{ margin:0 0 2rem; text-align:center; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#b09a72; } .wsp-naglowek{ margin:0 0 .8rem; text-align:center; font-family:'EB Garamond',Georgia,serif; font-weight:500; font-size:clamp(2.1rem,7vw,3rem); letter-spacing:.06em; } .wsp-podtytul{ margin:0 auto 2.2rem; max-width:30rem; text-align:center; font-size:.98rem; line-height:1.62; color:#6b5c45; } .wsp-szukaj{ position:relative; max-width:24rem; margin:0 auto 1rem; } .wsp-lupa{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); width:1.15rem; height:1.15rem; fill:none; stroke:#a8916b; stroke-width:2; stroke-linecap:round; pointer-events:none; } .wsp-szukaj input{ width:100%; padding:.9rem 1rem .9rem 2.9rem; border:1.5px solid #e0d3b8; border-radius:2rem; background:#fff; font-size:1rem; font-family:inherit; color:#1d2b3a; } .wsp-szukaj input:focus{ outline:none; border-color:#c2622a; box-shadow:0 0 0 3px rgba(194,98,42,.14); } .wsp-licznik{ margin:0 0 1.4rem; text-align:center; font-size:.84rem; color:#8c7a5c; } .wsp-licznik b{ font-size:1.05rem; color:#1d2b3a; } .wsp-lista{ list-style:none; margin:0; padding:0; columns:2; column-gap:2rem; font-family:'EB Garamond',Georgia,serif; } .wsp-osoba{ display:flex; align-items:baseline; gap:.55rem; padding:.34rem 0; break-inside:avoid; border-bottom:1px dotted #ece0c9; } .wsp-nr{ flex:0 0 auto; font-family:'Inter',system-ui,sans-serif; font-size:.7rem; color:#bfa87f; letter-spacing:.04em; min-width:2.1rem; } .wsp-imie{ flex:1 1 auto; font-size:1.06rem; color:#2b3a49; } .wsp-kraj{ flex:0 0 auto; font-size:.95rem; } .wsp-osoba.znaleziony{ background:#fff4d9; box-shadow:0 0 0 .45rem #fff4d9; border-radius:.2rem; } .wsp-wolne .wsp-imie{ color:#c3b393; font-style:italic; } .wsp-nic{ margin:1.4rem auto 0; max-width:26rem; text-align:center; font-size:.92rem; line-height:1.6; color:#8c7a5c; } .wsp-dopisz{ margin:2.6rem auto 0; max-width:24rem; text-align:center; padding-top:1.8rem; border-top:1px solid #ece0c9; } .wsp-dopisz p{ margin:0 0 .9rem; font-size:1rem; color:#5a4c39; } .wsp-dopisz .dziel-kopiuj{ margin-top:.6rem; } @media (max-width:640px){ .wsp-papier{ padding:2.2rem 1.15rem 1.8rem; } .wsp-lista{ columns:1; } } /* wybór książki na ogólnej stronie wsparcia */ .wsp-polka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin-top:1.6rem; } .wsp-poz{ display:block; padding:1.2rem; border:1px solid #e6dbc4; border-radius:.9rem; background:#fffdf7; text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease; } .wsp-poz:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(70,50,20,.12); } /* Pozycja książki w wyborze wsparcia: to OKŁADKA, więc proporcja 2:3 jak na półce — nie niski pas, który ciął obraz w połowie. */ .wsp-poz{ display:grid; grid-template-columns:minmax(0,7.5rem) 1fr; gap:1rem; align-items:center; } .wsp-poz img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:.45rem; margin:0; box-shadow:var(--m-cien); } .wsp-poz-tytul, .wsp-poz-autor{ grid-column:2; } .wsp-poz-tytul{ display:block; font-family:'EB Garamond',Georgia,serif; font-size:1.3rem; font-weight:600; } .wsp-poz-autor{ display:block; margin-top:.25rem; font-size:.86rem; color:#8c7a5c; } /* zapowiedź ostatniej strony */ .wsp-zapowiedz{ margin:2.4rem auto 0; max-width:34rem; padding:1.6rem 1.4rem; text-align:center; background:#fffdf7; border:1px solid #e6dbc4; border-radius:.9rem; } .wsp-zapowiedz-nad{ margin:0 0 .6rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#b4762f; font-weight:600; } .wsp-zapowiedz p{ margin:0 0 1.1rem; font-size:1rem; line-height:1.6; color:#5a4c39; } /* ── Półka książek (ksiazki.html) ───────────────────────────────────── */ .m-kafel-ksiazka{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,11rem) 1fr; gap:1.6rem; align-items:start; } .m-kafel-ksiazka > a img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:.55rem; margin:0; box-shadow:var(--m-cien); } .m-kafel-ksiazka h2 a{ color:inherit; text-decoration:none; } .m-kafel-ksiazka h2 a:hover{ text-decoration:underline; text-underline-offset:4px; } @media (max-width:600px){ .m-kafel-ksiazka{ grid-template-columns:1fr; } .m-kafel-ksiazka > a img{ max-width:12rem; } } /* ── Strona O mnie: obraz obok tekstu ───────────────────────────────── */ .m-autor-strona .pas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:3rem; align-items:start; } .m-autor-obraz{ width:100%; height:auto; border-radius:.8rem; box-shadow:var(--m-cien); } @media (max-width:820px){ .m-autor-strona .pas{ grid-template-columns:1fr; } .m-autor-obraz{ max-width:24rem; margin-inline:auto; } } .wsp-znaczek{ font-style:normal; color:#b4762f; margin-left:.3rem; font-size:.8em; } .wsp-druk .wsp-imie{ font-weight:500; } /* Ten sam wygląd niezależnie od tego, czy to , czy