/* ========================================================================== Firma Wodecki — wspolny arkusz stylow (nawigacja, stopka, reset) Ladowany na KAZDEJ podstronie. Edytuj tylko tutaj. ========================================================================== */ /* --- Font Montserrat serwowany z wlasnego serwera --- Wczesniej byl pobierany z fonts.googleapis.com: arkusz blokowal renderowanie, a plik fontu lezal na drugiej domenie (fonts.gstatic.com) — dwa dodatkowe polaczenia DNS + TLS przed pokazaniem tekstu. Plik to jeden font zmienny (os wagi 200-800, zakres latin + latin-ext, czyli komplet polskich znakow). Zastepuje dwa pliki, ktore serwowal Google. font-display: swap — tekst jest widoczny od razu krojem systemowym. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/montserrat-var.woff2') format('woff2-variations'), url('/assets/fonts/montserrat-var.woff2') format('woff2'); } /* --- Reset: blokada poziomego przewijania --- */ html { overflow-x: hidden; } body { margin: 0; max-width: 100%; } /* --- Nawigacja glowna --- */ #fw-nav { --fw-green: #49680f; --fw-green-dark: #34490b; --fw-lime: #c9f089; --fw-ink: #14170f; --fw-muted: #4a5040; --fw-line: rgba(20,23,15,.08); display: block; /* Uwaga: 100vw wlicza szerokosc paska przewijania, wiec pasek nawigacji bywal szerszy od widocznego obszaru — stad drganie prawej krawedzi przy przewijaniu (tlo jest rozmywane). Pasek jest bezposrednim dzieckiem , wiec 100% daje dokladnie te szerokosc, o ktora chodzi. */ width: 100%; font-family: 'Montserrat', sans-serif; position: sticky; top: 0; z-index: 1000; isolation: isolate; background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--fw-line); } #fw-nav, #fw-nav *, #fw-nav *::before, #fw-nav *::after { box-sizing: border-box; font-family: 'Montserrat', sans-serif; font-style: normal; } #fw-nav ul, #fw-nav li, #fw-nav p, #fw-nav h1 { margin: 0; padding: 0; list-style: none; } #fw-nav a { text-decoration: none; color: inherit; } #fw-nav svg { display: block; flex-shrink: 0; } #fw-nav.fw-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 16px 40px -22px rgba(20,23,15,.4); } #fw-nav .fw-nav-bar { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 82px; transition: height .25s ease; } #fw-nav.fw-scrolled .fw-nav-bar { height: 66px; } /* --- logo --- */ #fw-nav .fw-nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity .25s ease; } #fw-nav .fw-nav-logo:hover, #fw-nav .fw-nav-logo:focus-visible { opacity: .72; } #fw-nav .fw-nav-logo img { height: 34px; width: auto; display: block; transition: height .25s ease; } #fw-nav.fw-scrolled .fw-nav-logo img { height: 27px; } /* --- menu (desktop) --- */ #fw-nav .fw-nav-menu { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 14px); flex: 1; justify-content: flex-end; } #fw-nav .fw-menu-list { display: flex; align-items: center; gap: 2px; } #fw-nav .fw-menu-list > li { position: relative; } #fw-nav .fw-menu-list > li > a, #fw-nav .fw-sub-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--fw-ink); border: none; background: none; cursor: pointer; transition: color .25s ease; white-space: nowrap; } #fw-nav .fw-menu-list > li > a::after, #fw-nav .fw-sub-toggle::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--fw-lime); transform: scaleX(0); transform-origin: center; transition: transform .3s ease; } #fw-nav .fw-menu-list > li > a:hover, #fw-nav .fw-menu-list > li > a:focus-visible, #fw-nav .fw-sub-toggle:hover, #fw-nav .fw-sub-toggle:focus-visible, #fw-nav .fw-has-sub.fw-sub-open .fw-sub-toggle, #fw-nav .fw-has-sub:focus-within .fw-sub-toggle { color: var(--fw-green); } #fw-nav .fw-menu-list > li > a:hover::after, #fw-nav .fw-menu-list > li > a:focus-visible::after, #fw-nav .fw-sub-toggle:hover::after, #fw-nav .fw-sub-toggle:focus-visible::after, #fw-nav .fw-has-sub.fw-sub-open .fw-sub-toggle::after, #fw-nav .fw-has-sub:focus-within .fw-sub-toggle::after { transform: scaleX(1); } #fw-nav .fw-sub-toggle svg { width: 12px; height: 12px; color: currentColor; transition: transform .25s ease; } #fw-nav .fw-has-sub.fw-sub-open .fw-sub-toggle svg, #fw-nav .fw-has-sub:hover .fw-sub-toggle svg, #fw-nav .fw-has-sub:focus-within .fw-sub-toggle svg { transform: rotate(180deg); } /* --- mega dropdown "Oferta" --- */ #fw-nav .fw-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); width: min(500px, 92vw); background: #ffffff; border: 1px solid var(--fw-line); border-radius: 22px; padding: 20px; box-shadow: 0 30px 60px -24px rgba(20,23,15,.32); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } #fw-nav .fw-has-sub:hover .fw-submenu, #fw-nav .fw-has-sub:focus-within .fw-submenu, #fw-nav .fw-has-sub.fw-sub-open .fw-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } #fw-nav .fw-submenu-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-green); margin: 2px 6px 12px; } /* --- polecane kategorie ze zdjęciem (Pergole tarasowe / Tarasy kompozytowe) --- */ #fw-nav .fw-submenu-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; } #fw-nav .fw-feature-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--fw-line); } #fw-nav .fw-feature-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #fw-nav .fw-feature-card:hover img, #fw-nav .fw-feature-card:focus-visible img { transform: scale(1.07); } #fw-nav .fw-feature-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,23,15,.88) 0%, rgba(20,23,15,.2) 55%, rgba(20,23,15,0) 78%); } #fw-nav .fw-feature-label { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; color: #ffffff; font-size: .8rem; font-weight: 700; line-height: 1.25; } #fw-nav .fw-submenu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } #fw-nav .fw-submenu-grid a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; transition: background-color .2s ease; } #fw-nav .fw-submenu-grid a:hover, #fw-nav .fw-submenu-grid a:focus-visible { background: rgba(73,104,15,.08); } #fw-nav .fw-sm-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(73,104,15,.12), rgba(201,240,137,.4)); color: var(--fw-green); } #fw-nav .fw-sm-icon svg { width: 19px; height: 19px; } #fw-nav .fw-sm-text { font-size: .84rem; font-weight: 600; color: var(--fw-ink); line-height: 1.25; } #fw-nav .fw-submenu-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fw-line); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-green); transition: color .2s ease; } #fw-nav .fw-submenu-more svg { width: 13px; height: 13px; transition: transform .25s ease; } #fw-nav .fw-submenu-more:hover, #fw-nav .fw-submenu-more:focus-visible { color: var(--fw-green-dark); } #fw-nav .fw-submenu-more:hover svg { transform: translateX(3px); } /* --- CTA --- */ #fw-nav .fw-nav-cta { display: inline-flex; align-items: center; gap: 9px; /* Jednolita limonka. Tekst MUSI byc ciemny — bialy dawalby na tym tle kontrast 1,29:1, czyli napis praktycznie niewidoczny (norma WCAG: 4,5:1). Ciemny atrament daje 14:1. */ background: var(--fw-lime); color: var(--fw-ink) !important; padding: 13px 26px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; white-space: nowrap; flex-shrink: 0; margin-left: 6px; box-shadow: 0 12px 26px -10px rgba(73,104,15,.45); transition: filter .25s ease, transform .25s ease, box-shadow .25s ease; } #fw-nav .fw-nav-cta svg { width: 14px; height: 14px; transition: transform .25s ease; } #fw-nav .fw-nav-cta:hover, #fw-nav .fw-nav-cta:focus-visible { /* Limonka jest juz jasna — rozjasnianie zbliza ja do bieli i przycisk ginie. Dlatego przy najechaniu delikatnie PRZYCIEMNIAMY. */ filter: brightness(.94); transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(73,104,15,.55); } #fw-nav .fw-nav-cta:hover svg { transform: translateX(3px); } /* Waski zakres tuz nad progiem menu mobilnego (typowe laptopy 1024-1152 px): logo + pozycje menu + przycisk sa tu najciasniej upakowane, wiec delikatnie zmniejszamy odstepy, zeby nic na siebie nie nachodzilo. */ @media (min-width: 981px) and (max-width: 1180px) { #fw-nav .fw-nav-bar { gap: 12px; } #fw-nav .fw-menu-list > li > a, #fw-nav .fw-sub-toggle { padding: 12px 10px; } #fw-nav .fw-nav-cta { padding: 12px 18px; letter-spacing: .06em; } } /* --- hamburger (mobile) --- */ #fw-nav .fw-nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--fw-line); background: #ffffff; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; flex-shrink: 0; } #fw-nav .fw-nav-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--fw-ink); transition: transform .3s ease, opacity .3s ease, background-color .3s ease; } #fw-nav .fw-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #fw-nav .fw-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #fw-nav .fw-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- responsive --- */ @media (max-width: 980px) { #fw-nav .fw-nav-bar { height: 66px; padding: 0 20px; } #fw-nav.fw-scrolled .fw-nav-bar { height: 60px; } #fw-nav .fw-nav-logo img { height: 28px; } #fw-nav .fw-nav-toggle { display: inline-flex; order: 3; } #fw-nav .fw-nav-menu { position: fixed; inset: 66px 0 0 0; height: calc(100dvh - 66px); background: #ffffff; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 18px 20px 32px; gap: 4px; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; border-top: 1px solid var(--fw-line); } #fw-nav.fw-menu-open .fw-nav-menu { transform: translateX(0); } #fw-nav .fw-menu-list { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; } #fw-nav .fw-menu-list > li > a, #fw-nav .fw-sub-toggle { width: 100%; padding: 15px 6px; border-radius: 0; border-bottom: 1px solid var(--fw-line); font-size: 1rem; justify-content: space-between; } #fw-nav .fw-menu-list > li > a::after, #fw-nav .fw-sub-toggle::after { display: none; } #fw-nav .fw-submenu { position: static; transform: none; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease; } #fw-nav .fw-has-sub.fw-sub-open .fw-submenu { max-height: 700px; padding: 8px 0 16px; } #fw-nav .fw-submenu-eyebrow { display: none; } #fw-nav .fw-submenu-grid { grid-template-columns: 1fr; } #fw-nav .fw-submenu-more { margin-top: 6px; } #fw-nav .fw-nav-cta { margin: 18px 0 0; width: 100%; justify-content: center; padding: 16px 24px; } } @media (prefers-reduced-motion: reduce) { #fw-nav, #fw-nav * { transition: none !important; } } /* --- Stopka --- */ /* ── Footer ── */ .footer *, .footer *::before, .footer *::after { font-family: 'Montserrat', sans-serif !important; } .footer { box-sizing: border-box; width: 100%; position: relative; left: auto; margin-left: 0; border-top: 1px solid rgba(57, 57, 57, 0.15); background-color: #1c1b1b; font-family: 'Montserrat', sans-serif !important; color: #e5e2e1; } .footer-grid { box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 4rem 2rem; max-width: 80rem; margin: 0 auto; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-brand { grid-column: auto; } } /* Brand */ .footer-brand { box-sizing: border-box; display: flex; flex-direction: column; gap: 2rem; } .footer-logo-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background-color: #91b556; border-radius: 0.5rem; padding: 0.25rem 1rem; text-decoration: none; align-self: flex-start; } .footer-logo-link img { box-sizing: border-box; height: 3.5rem; width: auto; object-fit: contain; display: block; } .footer-desc { box-sizing: border-box; font-size: 0.875rem; line-height: 1.625; color: rgba(229, 226, 225, 0.7); padding-right: 1rem; margin: 0; } /* Columns */ .footer-col { box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5rem; } .footer-col-title { box-sizing: border-box; font-family: 'Montserrat', sans-serif !important; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #e5e2e1; margin: 0; display: block; } .footer-col ul { box-sizing: border-box; list-style: none !important; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .footer-col ul li { box-sizing: border-box; list-style: none !important; } .footer-col ul a { box-sizing: border-box; font-size: 0.875rem; color: rgba(229, 226, 225, 0.6); text-decoration: none; transition: color 0.5s; } .footer-col ul a:hover { color: #add370; } /* Kontakt */ .footer-kontakt { box-sizing: border-box; display: flex; flex-direction: column; gap: 2rem; } .footer-kontakt-inner { box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5rem; } .footer-contact-items { box-sizing: border-box; display: flex; flex-direction: column; gap: 0.75rem; } .footer-contact-item { box-sizing: border-box; display: flex; align-items: center; gap: 0.75rem; } .footer-contact-item .footer-icon { width: 1.125rem; height: 1.125rem; color: #91b556; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .footer-contact-item .contact-text { font-size: 0.875rem; color: rgba(229, 226, 225, 0.7); line-height: 1.5; text-decoration: none; } .footer-contact-item a.contact-text:hover { color: #add370; } /* CTA Button */ .footer-cta { box-sizing: border-box; display: inline-block; background-color: #91b556; color: #233600; padding: 0.75rem 1.5rem; font-family: 'Montserrat', sans-serif !important; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; border-radius: 0.125rem; transition: filter 0.3s; } .footer-cta:hover { filter: brightness(0.75); color: #233600 !important; } /* Krótki opis firmy */ .footer-about { box-sizing: border-box; max-width: 80rem; margin: 0 auto; padding: 0 2rem 2rem; font-size: 0.8rem; line-height: 1.6; color: rgba(229, 226, 225, 0.72); } .footer-about p { margin: 0; } .footer-about-title { display: block; margin-bottom: 0.5rem !important; color: #e5e2e1; font-weight: 700; letter-spacing: 0.04em; } /* Subfooter */ .footer-subfooter { box-sizing: border-box; border-top: 1px solid rgba(57, 57, 57, 0.1); padding: 2rem; } .footer-subfooter-inner { box-sizing: border-box; max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1.5rem; } @media (min-width: 768px) { .footer-subfooter-inner { flex-direction: row; } } .footer-copyright { box-sizing: border-box; font-size: 0.75rem; color: rgba(229, 226, 225, 0.62); text-transform: uppercase; letter-spacing: 0.1em; } .footer-subfooter-links { box-sizing: border-box; display: flex; gap: 2rem; } .footer-subfooter-links a { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(229, 226, 225, 0.6); text-decoration: none; transition: color 0.5s; } .footer-subfooter-links a:hover { color: #add370; } /* ========================================================================== Opinie klientow (sekcja wstawiana znacznikiem ) Uklad kolumnowy dobiera liczbe kolumn sam, wiec karty o roznej wysokosci ukladaja sie bez luk i bez potrzeby JavaScriptu. ========================================================================== */ #fw-opinie { --op-green: #49680f; --op-ink: #14170f; --op-muted: #5c6350; --op-line: rgba(20,23,15,.10); font-family: 'Montserrat', sans-serif; background: #f6f7f1; padding: clamp(3.5rem, 7vw, 6rem) 1.25rem; } #fw-opinie *, #fw-opinie *::before, #fw-opinie *::after { box-sizing: border-box; } #fw-opinie .fw-op-wrap { max-width: 1320px; margin: 0 auto; } #fw-opinie .fw-op-naglowek { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } #fw-opinie .fw-op-etykieta { margin: 0 0 .75rem; color: var(--op-green); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } #fw-opinie .fw-op-naglowek h2 { margin: 0; color: var(--op-ink); font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } /* --- siatka kart --- */ #fw-opinie .fw-op-siatka { columns: 340px 3; column-gap: 1.5rem; } #fw-opinie .fw-op-karta { break-inside: avoid; margin: 0 0 1.5rem; padding: 1.75rem; background: #ffffff; border: 1px solid var(--op-line); border-radius: 1rem; box-shadow: 0 10px 30px -22px rgba(20,23,15,.45); } #fw-opinie .fw-op-gwiazdki { display: flex; gap: .18rem; margin-bottom: 1rem; } #fw-opinie .fw-op-gwiazdki svg { width: 1.05rem; height: 1.05rem; fill: #f0a500; flex-shrink: 0; } #fw-opinie .fw-op-karta blockquote { margin: 0; } #fw-opinie .fw-op-karta blockquote p { margin: 0 0 .85rem; color: var(--op-muted); font-size: .95rem; font-weight: 400; line-height: 1.65; } #fw-opinie .fw-op-karta blockquote p:last-child { margin-bottom: 0; } #fw-opinie .fw-op-autor { display: block; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--op-line); color: var(--op-ink); font-size: .88rem; font-weight: 600; } /* --- zdjecia dolaczone do opinii --- */ #fw-opinie .fw-op-foto { margin-top: 1.15rem; display: grid; gap: .5rem; } #fw-opinie .fw-op-foto--2 { grid-template-columns: 1fr 1fr; } #fw-opinie .fw-op-foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: .6rem; background: #eceee6; } #fw-opinie .fw-op-foto:not(.fw-op-foto--2) img { aspect-ratio: 16 / 10; } /* --- zwijanie listy opinii --- Domyslnie widoczne sa trzy pierwsze opinie, reszta chowa sie za przyciskiem. Klasa .fw-op-zwiniete siedzi w HTML, wiec nie ma przeskoku ukladu przy ladowaniu strony (gdyby chowal je dopiero JavaScript, karty mrugnelyby). Tresc ukrytych opinii pozostaje w kodzie strony - wyszukiwarki ja widza. */ #fw-opinie.fw-op-zwiniete .fw-op-ukryta { display: none; } #fw-opinie .fw-op-wiecej { margin: clamp(1.2rem, 2.5vw, 2rem) 0 0; text-align: center; } #fw-opinie .fw-op-wiecej button { display: inline-flex; align-items: center; gap: .55rem; font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--op-green); background: #ffffff; border: 1px solid rgba(73,104,15,.35); border-radius: 999px; padding: .7rem 1.4rem; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } #fw-opinie .fw-op-wiecej button:hover { background: var(--op-green); border-color: var(--op-green); color: #ffffff; } #fw-opinie .fw-op-wiecej button:focus-visible { outline: 2px solid var(--op-green); outline-offset: 3px; } #fw-opinie .fw-op-wiecej svg { width: 1rem; height: 1rem; transition: transform .25s ease; } #fw-opinie:not(.fw-op-zwiniete) .fw-op-wiecej svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { #fw-opinie .fw-op-wiecej button, #fw-opinie .fw-op-wiecej svg { transition: none; } } /* --- odnosnik do wizytowki --- */ #fw-opinie .fw-op-cta { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; text-align: center; } #fw-opinie .fw-op-cta a { display: inline-flex; align-items: center; gap: .5rem; color: var(--op-green); font-size: .9rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(73,104,15,.35); padding-bottom: .15rem; transition: color .25s ease, border-color .25s ease; } #fw-opinie .fw-op-cta a svg { width: .95rem; height: .95rem; transition: transform .25s ease; } #fw-opinie .fw-op-cta a:hover { color: #34490b; border-color: #34490b; } #fw-opinie .fw-op-cta a:hover svg { transform: translateX(3px); } #fw-opinie .fw-op-cta a:focus-visible { outline: 3px solid #aecb7d; outline-offset: 3px; } @media (max-width: 640px) { #fw-opinie .fw-op-karta { padding: 1.35rem; } #fw-opinie .fw-op-foto--2 { grid-template-columns: 1fr; } } /* --- Opinie: zdjecie jako przycisk powiekszania --- */ #fw-opinie .fw-op-zoom { display: block; padding: 0; border: 0; margin: 0; background: none; cursor: zoom-in; border-radius: .6rem; overflow: hidden; -webkit-tap-highlight-color: transparent; } #fw-opinie .fw-op-zoom img { transition: transform .35s ease; } #fw-opinie .fw-op-zoom:hover img { transform: scale(1.04); } #fw-opinie .fw-op-zoom:focus-visible { outline: 3px solid #aecb7d; outline-offset: 3px; } /* ========================================================================== Podglad zdjecia (lightbox) — wspolny dla sekcji opinii. Selektory z ID, bo na czesci podstron kontener tresci ma wlasne resety oparte na identyfikatorze i wygralby z regulami klasowymi. ========================================================================== */ #fw-lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 3vw, 2.5rem); font-family: 'Montserrat', sans-serif; } #fw-lb[hidden] { display: none; } #fw-lb .fw-lb__tlo { position: absolute; inset: 0; background: rgba(12,14,10,.9); cursor: zoom-out; } #fw-lb .fw-lb__panel { position: relative; z-index: 1; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; } #fw-lb img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: .5rem; background: #1b1d17; } #fw-lb .fw-lb__podpis { margin: 0; max-width: 60ch; text-align: center; color: rgba(255,255,255,.82); font-size: .85rem; font-weight: 400; line-height: 1.5; } #fw-lb .fw-lb__licznik { margin: 0; color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 600; letter-spacing: .12em; } /* przyciski: zamkniecie i nawigacja */ #fw-lb button { position: absolute; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(20,23,15,.55); color: #ffffff; cursor: pointer; transition: background-color .2s ease, transform .2s ease; } #fw-lb button svg { width: 1.15rem; height: 1.15rem; } #fw-lb button:hover { background: rgba(73,104,15,.85); } #fw-lb button:focus-visible { outline: 3px solid #aecb7d; outline-offset: 2px; } #fw-lb .fw-lb__x { top: -.35rem; right: -.35rem; } #fw-lb .fw-lb__nav { top: 50%; transform: translateY(-50%); } #fw-lb .fw-lb__nav--prev { left: -3.5rem; } #fw-lb .fw-lb__nav--next { right: -3.5rem; } #fw-lb .fw-lb__nav:hover { transform: translateY(-50%) scale(1.06); } #fw-lb button[hidden] { display: none; } @media (max-width: 900px) { #fw-lb .fw-lb__nav--prev { left: .25rem; } #fw-lb .fw-lb__nav--next { right: .25rem; } #fw-lb .fw-lb__x { top: -.25rem; right: .25rem; } #fw-lb img { max-height: calc(100vh - 11rem); } } /* ====================================================================== Bloki wyciagniete z plikow HTML (byly powtarzane na wielu podstronach). Trzymane tutaj, bo arkusz jest cache'owany miedzy podstronami, a HTML nie - kazde wejscie pobieralo te same reguly od nowa. ====================================================================== */ #bp-hero { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; /* miejsce na zdjęcie, które nachodzi z dołu */ padding-bottom: clamp(9rem, 16vw, 14rem); } /* smugi słońca przez lamele */ #bp-hero .bp-hero-slatlight { position: absolute; inset: 0; background: repeating-linear-gradient( 112deg, transparent 0px, transparent 110px, rgba(201,240,137,.05) 110px, rgba(201,240,137,.05) 140px ); pointer-events: none; } #bp-hero .bp-hero-glow { position: absolute; width: 48rem; height: 48rem; right: -14rem; top: -20rem; border-radius: 50%; background: radial-gradient(circle, rgba(201,240,137,.14) 0%, rgba(201,240,137,0) 65%); filter: blur(50px); pointer-events: none; } #bp-hero .bp-hero-inner { position: relative; z-index: 1; } /* okruszki */ #bp-hero .bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: 2rem 0 0; font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-faint); } #bp-hero .bp-crumbs a { text-decoration: none; transition: color .3s; } #bp-hero .bp-crumbs a:hover { color: var(--lime); } #bp-hero .bp-crumbs svg { width: .7rem; height: .7rem; opacity: .5; flex-shrink: 0; } #bp-hero .bp-crumbs .bp-crumb-here { color: var(--cream-dim); font-weight: 600; letter-spacing: .14em; text-transform: none; } #bp-hero .bp-hero-main { max-width: 54rem; padding: clamp(3rem, 6vw, 4.6rem) 0 0; } #bp-hero .bp-hero-main .bp-label { color: var(--lime); display: block; margin-bottom: 1.5rem; } #bp-hero h1 { font-size: clamp(2.2rem, 5.2vw, 4.1rem); font-weight: 200; line-height: 1.1; letter-spacing: .01em; margin-bottom: 2.2rem; } #bp-hero h1 strong { font-weight: 600; } #bp-hero h1 em { font-style: italic; font-weight: 200; color: var(--lime-soft); } /* metryka: autor, data, czas czytania */ #bp-hero .bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2.2rem; padding: 1.6rem 0 0; border-top: 1px solid var(--line-inv); } #bp-hero .bp-meta-author { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; } #bp-hero .bp-meta-avatar { width: 2.9rem; height: 2.9rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--lime); padding: 2px; background: var(--ink); flex-shrink: 0; } #bp-hero .bp-meta-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } #bp-hero .bp-meta-author b { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; transition: color .3s; } /* Blok autora jest odnosnikiem do /autor/piotr-wodecki/ — kolor dziedziczy po #bp-page a { color: inherit }, wiec wyglad spoczynkowy sie nie zmienia. */ #bp-hero a.bp-meta-author:hover b, #bp-hero a.bp-meta-author:focus-visible b { color: var(--lime); } #bp-hero a.bp-meta-author:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 6px; } #bp-hero .bp-meta-author span { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-faint); margin-top: .25rem; } #bp-hero .bp-meta-item { display: inline-flex; align-items: center; gap: .55rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); } #bp-hero .bp-meta-item svg { width: .95rem; height: .95rem; color: var(--lime); flex-shrink: 0; } @media (max-width: 640px) { #bp-hero .bp-meta { gap: 1rem 1.4rem; } } #bp-recent { background: var(--paper-2); border-top: 1px solid var(--line-soft); padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(4.5rem, 8vw, 7rem); } #bp-recent .bp-recent-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } #bp-recent .bp-recent-head .bp-label { display: block; margin-bottom: 1.1rem; } #bp-recent h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 200; line-height: 1.14; color: var(--ink); } #bp-recent h2 strong { font-weight: 600; } #bp-recent .bp-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } #bp-recent .bp-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } #bp-recent .bp-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(20,23,13,.35); border-color: var(--line); } #bp-recent .bp-card:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; } #bp-recent .bp-card-media { overflow: hidden; aspect-ratio: 16 / 11; } #bp-recent .bp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } #bp-recent .bp-card:hover .bp-card-media img { transform: scale(1.06); } #bp-recent .bp-card-body { display: flex; flex-direction: column; flex: 1; gap: 1.1rem; padding: 1.4rem 1.5rem 1.6rem; } #bp-recent .bp-card h3 { font-size: .92rem; font-weight: 600; line-height: 1.5; color: var(--ink); transition: color .3s; } #bp-recent .bp-card:hover h3 { color: var(--olive); } #bp-recent .bp-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: .55rem; font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); } #bp-recent .bp-card-more svg { width: .85rem; height: .85rem; transition: transform .35s; } #bp-recent .bp-card:hover .bp-card-more svg { transform: translateX(4px); } /* karta artykułu, który właśnie czytasz */ #bp-recent .bp-card--current { pointer-events: none; } #bp-recent .bp-card--current .bp-card-media { position: relative; } #bp-recent .bp-card--current .bp-card-now { position: absolute; top: 1rem; left: 1rem; z-index: 1; padding: .5rem .9rem; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .58rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } @media (max-width: 1100px) { #bp-recent .bp-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #bp-recent .bp-recent-grid { grid-template-columns: minmax(0, 1fr); } } /* --- brak poziomego paska przewijania --- Nawigacja, treść i stopka są pełnoszerokościowe (width: 100vw), a jednostka 100vw wlicza szerokość pionowego paska przewijania — stąd nadmiarowe ~15px w poziomie i pasek scrolla lewo-prawo. `clip` przycina ten nadmiar, a w odróżnieniu od `hidden` nie tworzy kontenera przewijania, więc przyklejona (sticky) nawigacja działa dalej. `margin: 0` jest tu konieczne: `clip` przycina do krawędzi elementu, a domyślny margines `body` (8px) zostawiłby białe paski po bokach i na dole. */ html, body { margin: 0; overflow-x: clip; } #pp-page { --white: #ffffff; --paper: #faf7f2; --paper-2: #f2ece2; --ink: #211a12; --ink-dim: rgba(33,26,18,.68); --ink-faint: rgba(33,26,18,.42); --amber: #49680f; --amber-soft: #5a7f14; --amber-deep: #35510a; --green-mid: #5a7f14; --line: rgba(33,26,18,.12); --radius: 28px; display: block; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); background-color: var(--white); color: var(--ink); font-family: 'Montserrat', sans-serif; overflow-x: clip; } #pp-page *, #pp-page *::before, #pp-page *::after { box-sizing: border-box; font-family: 'Montserrat', sans-serif; } #pp-page h1, #pp-page h2, #pp-page h3, #pp-page p, #pp-page ul, #pp-page ol, #pp-page li { margin: 0; padding: 0; } #pp-page ul, #pp-page ol { list-style: none; } #pp-page a { color: var(--amber-deep); text-decoration: none; border-bottom: 1px solid rgba(73,104,15,.35); transition: color .2s ease, border-color .2s ease; } #pp-page a:hover, #pp-page a:focus-visible { color: var(--green-mid); border-color: var(--green-mid); } #pp-page strong { font-weight: 700; } #pp-page .pp-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; } /* ---------- HERO ---------- */ #pp-page .pp-hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(32px, 5vw, 56px); background: radial-gradient(1100px 460px at 82% -18%, rgba(73,104,15,.16), transparent 62%), radial-gradient(720px 380px at 6% 8%, rgba(73,104,15,.08), transparent 60%), var(--white); overflow: hidden; } #pp-page .pp-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } #pp-page .pp-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid rgba(73,104,15,.45); border-radius: 999px; background: rgba(255,255,255,.7); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 22px; } #pp-page .pp-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(73,104,15,.18); } #pp-page .pp-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 26px; } #pp-page .pp-hero h1 strong { font-weight: 700; } #pp-page .pp-lead { max-width: 76ch; font-size: clamp(.95rem, 1.5vw, 1.02rem); font-weight: 400; line-height: 1.85; color: var(--ink-dim); } #pp-page .pp-lead + .pp-lead { margin-top: 16px; } /* ---------- SPIS TREŚCI ---------- */ #pp-page .pp-toc { margin: clamp(34px, 5vw, 56px) 0 0; padding: clamp(24px, 3.4vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } #pp-page .pp-toc h2 { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px; } #pp-page .pp-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 26px; counter-reset: pp-toc; } #pp-page .pp-toc li { counter-increment: pp-toc; } #pp-page .pp-toc a { display: flex; gap: 10px; font-size: .89rem; font-weight: 500; line-height: 1.5; color: var(--ink); border: none; padding: 6px 0; } #pp-page .pp-toc a::before { content: '§' counter(pp-toc); flex-shrink: 0; min-width: 30px; font-weight: 700; color: var(--amber-deep); } #pp-page .pp-toc a:hover, #pp-page .pp-toc a:focus-visible { color: var(--amber-deep); } /* ---------- SEKCJE ---------- */ #pp-page .pp-body { padding: clamp(44px, 6vw, 78px) 0 clamp(64px, 8vw, 108px); } #pp-page .pp-section { scroll-margin-top: 110px; padding: clamp(26px, 3.6vw, 38px) clamp(22px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 24px 60px -48px rgba(33,26,18,.55); } #pp-page .pp-section + .pp-section { margin-top: 20px; } #pp-page .pp-section > h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.15rem, 2.3vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 22px; } #pp-page .pp-section > h2 .pp-num { flex-shrink: 0; font-size: .82em; font-weight: 700; color: var(--amber-deep); } #pp-page .pp-section p { font-size: .95rem; line-height: 1.85; color: var(--ink-dim); } #pp-page .pp-section > p + p, #pp-page .pp-section > p + ul, #pp-page .pp-section > ul + p, #pp-page .pp-section > p + h3, #pp-page .pp-section > ul + h3 { margin-top: 16px; } #pp-page .pp-section h3 { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ink); margin-bottom: 12px; } #pp-page .pp-section > h3:not(:first-child) { margin-top: 28px; } /* listy */ #pp-page .pp-list > li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.85; color: var(--ink-dim); } #pp-page .pp-list > li + li { margin-top: 12px; } #pp-page .pp-list > li::before { content: ''; position: absolute; left: 4px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); } #pp-page .pp-list > li strong { color: var(--ink); } /* lista definicji / opisów — pogrubiony termin w osobnej linii */ #pp-page .pp-defs > li > strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } /* lista zagnieżdżona */ #pp-page .pp-sub { margin-top: 10px; padding-left: 2px; } #pp-page .pp-sub > li { position: relative; padding-left: 20px; font-size: .92rem; line-height: 1.8; color: var(--ink-dim); } #pp-page .pp-sub > li + li { margin-top: 7px; } #pp-page .pp-sub > li::before { content: ''; position: absolute; left: 2px; top: .82em; width: 8px; height: 1px; background: rgba(73,104,15,.75); } /* podstawy prawne — cytat artykułu */ #pp-page .pp-quote { display: block; margin-top: 4px; font-size: .9rem; font-style: italic; font-weight: 300; line-height: 1.75; color: var(--ink-faint); } /* karta kontaktowa */ #pp-page .pp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 6px; } #pp-page .pp-contact-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); } #pp-page .pp-contact-card span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } #pp-page .pp-contact-card p { font-size: .95rem; line-height: 1.7; color: var(--ink); } /* wyróżniona notka */ #pp-page .pp-note { margin-top: 18px; padding: 20px 24px; border-left: 3px solid var(--amber); border-radius: 0 16px 16px 0; background: var(--paper); } #pp-page .pp-note p { color: var(--ink-dim); } /* animacja wejścia */ #pp-page .pp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } #pp-page .pp-reveal.pp-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #pp-page .pp-reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 640px) { #pp-page .pp-wrap { padding: 0 18px; } #pp-page .pp-section { padding: 24px 20px; border-radius: 22px; } #pp-page .pp-toc ol { grid-template-columns: 1fr; } } #bp-cover { position: relative; z-index: 2; } #bp-cover .bp-cover-frame { max-width: 1260px; margin-left: auto; margin-right: auto; margin-top: clamp(-9rem, -10vw, -5.5rem); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(20,23,13,.55); border: 1px solid var(--line-inv); } #bp-cover img { width: 100%; aspect-ratio: 1260 / 600; object-fit: cover; } @media (max-width: 640px) { #bp-cover img { aspect-ratio: 16 / 9; } } #bp-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 999; pointer-events: none; } #bp-progress .bp-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--olive) 0%, var(--lime) 100%); transition: width .1s linear; }