/* ========================================================================= Pasek przycisków pobierania — styl przeniesiony ze strony WordPressowej. Zmiana względem oryginału: lista wersji jest pozycjonowana względem przycisku (a nie doklejana do ), więc nie ucieka przy przewijaniu i nie wymaga zamykania na scroll. ========================================================================= */ .af-download-buttons { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px; margin: 26px 0 32px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; isolation: isolate; } .af-btn { position: relative; display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); text-decoration: none; color: #fff; min-width: 280px; transition: .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.25); cursor: pointer; overflow: visible; font: inherit; text-align: left; } .af-btn:hover { text-decoration: none; } .af-btn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .af-btn:hover::after { opacity: 1; } .af-btn:hover, .af-btn:focus-visible { z-index: 30; } .af-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .af-btn.green { background: #16a32a; } .af-btn.green:hover { box-shadow: 0 0 18px rgba(52,211,153,.55), 0 0 34px rgba(52,211,153,.28); transform: translateY(-1px); } .af-btn.green::after { box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 0 24px rgba(52,211,153,.45); } .af-btn.blue { background: #2563eb; } .af-btn.blue:hover { box-shadow: 0 0 18px rgba(96,165,250,.55), 0 0 34px rgba(96,165,250,.28); transform: translateY(-1px); } .af-btn.blue::after { box-shadow: 0 0 0 1px rgba(96,165,250,.35), 0 0 24px rgba(96,165,250,.45); } .af-btn.transparent { background: linear-gradient(135deg, #1d4ed8, #1e40af); border: 1px solid rgba(255,255,255,.18); color: #fff; } .af-btn.transparent:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 0 18px rgba(96,165,250,.55), 0 0 34px rgba(96,165,250,.28); transform: translateY(-1px); } .af-btn.transparent::after { box-shadow: 0 0 0 1px rgba(96,165,250,.35), 0 0 24px rgba(96,165,250,.45); } /* ------------------------------------------------------------------------- Ten sam zielony przycisk, w skali paska nagłówka. Świadomie modyfikator, a nie zmiana .site-cta: tamta klasa ubiera także „Zamów ofertę", „Kontakt" i „Zobacz pakiety" na pozostałych stronach — przemalowanie jej na zielono ruszyłoby cały serwis. Ten plik wpina wyłącznie integrator-ksef/, więc zmiana kończy się na tej jednej stronie. Kolor, promień, obwódka, cień i poświata przy najechaniu — jak .af-btn.green. Inna jest tylko skala: jeden wiersz zamiast dwóch i ikona 18 px, żeby przycisk zmieścił się w 72-pikselowym pasku obok menu. ------------------------------------------------------------------------- */ .site-cta--download { background: #16a32a; border-color: rgba(255,255,255,.25); color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); } .site-cta--download .af-icon-wrap { margin-right: 0; } /* odstęp daje gap */ .site-cta--download .af-icon-wrap svg { width: 18px; height: 18px; } .site-cta--download .af-title { font-size: 13.5px; } .site-cta--download:hover { background: #16a32a; box-shadow: 0 0 18px rgba(52,211,153,.55), 0 0 34px rgba(52,211,153,.28); transform: translateY(-1px); color: #fff; } .site-cta--download:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .af-icon-wrap { margin-right: 8px; display: flex; align-items: center; } .af-icon-wrap svg { width: 25px; height: 25px; } .af-text-wrap { display: flex; flex-direction: column; line-height: 1.1; } .af-title { font-size: 14px; font-weight: 600; text-transform: uppercase; } .af-subtitle { margin-top: 1px; font-size: 10px; font-weight: 300; opacity: .9; } .no-uppercase { text-transform: none; } /* ------------------------------------------------------------------------- Okno wyboru wersji — dwie połowy. Lewa jest ciemna i niesie markę: logo, nazwa produktu, znak partnera. Prawa jest jasna i niesie decyzję: lista wydań do pobrania. Kontrast między połowami robi za hierarchię — wzrok idzie od razu na jasną stronę, bo tam jest to, po co ktoś otworzył okno. Natywny : wyśrodkowanie i przyciemnione tło robi przeglądarka, a okno trafia do warstwy nad całą stroną — nie obchodzą go konteksty układania ani przycinanie overflow rodziców. ------------------------------------------------------------------------- */ .af-modal, .af-modal * { box-sizing: border-box; } .af-modal { width: min(880px, calc(100vw - 32px)); padding: 0; border: none; /* Jasna krawędź po lewej. Ciemna połowa ma niemal tę samą barwę co przyciemnione tło, więc bez tej linii okno rozmywa się z tej strony — prawa, biała, odcina się sama. Linia biegnie po łuku narożników i wygasa u góry i u dołu. */ border-left: 1px solid rgba(255,255,255,.38); border-radius: 20px; background: var(--paper, #fff); color: var(--text, #0a1628); box-shadow: 0 40px 90px rgba(2,6,23,.55); font-family: var(--sans, system-ui), sans-serif; line-height: 1.4; overflow: hidden; } .af-modal::backdrop { background: rgba(2,6,23,.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } @media (prefers-reduced-motion: no-preference) { .af-modal[open] { animation: afModalIn .2s ease-out both; } .af-modal[open]::backdrop { animation: afBackdropIn .2s ease-out both; } } @keyframes afModalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } } @keyframes afBackdropIn { from { opacity: 0; } } .af-modal-split { display: grid; grid-template-columns: 296px 1fr; } /* --- połowa ciemna: marka --- */ .af-modal-side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 38px 32px; background: var(--ink, #0a1628); overflow: hidden; } .af-modal-side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 280px at 15% 0%, rgba(29,78,216,.38), transparent 62%), radial-gradient(320px 260px at 110% 100%, rgba(56,182,240,.18), transparent 60%); pointer-events: none; } .af-modal-logo { position: relative; width: 172px; max-width: 100%; height: auto; } .af-modal-side-text { position: relative; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: #fff; } .af-modal-side-note { position: relative; margin: 0; font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(148,163,184,.92); } /* --- połowa jasna: wybór --- */ .af-modal-main { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper, #fff); } .af-modal-head { padding: 30px 32px 16px; } .af-modal-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text, #0a1628); } .af-modal-sub { margin: 8px 44px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #5a6478); } .af-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line, #e2e5ec); border-radius: 10px; background: var(--paper, #fff); color: var(--muted, #5a6478); font-size: 21px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .af-modal-close:hover { background: var(--paper-3, #f0f2f6); border-color: var(--line-strong, #c9ced8); color: var(--text, #0a1628); } .af-modal-close:focus-visible { outline: 2px solid var(--brand-2, #2563eb); outline-offset: 2px; } .af-modal-list { margin: 0; padding: 4px 18px 12px; list-style: none; overflow-y: auto; max-height: min(46vh, 360px); } .af-modal-item + .af-modal-item { margin-top: 2px; } .af-modal-list a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--text, #0a1628); text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .af-modal-list a:hover, .af-modal-list a:focus-visible { background: var(--paper-2, #f7f8fa); border-color: var(--line, #e2e5ec); transform: translateX(2px); text-decoration: none; } .af-modal-list a:focus-visible { outline: 2px solid var(--brand-2, #2563eb); outline-offset: 2px; } .af-modal-ver { font-size: 14.5px; font-weight: 600; white-space: nowrap; } .af-modal-file { font-family: var(--mono, monospace); font-size: 10.5px; text-align: right; color: var(--muted-2, #8b94a6); word-break: break-all; } /* Najnowsze wydanie wyróżnione zielenią przycisku pobierania — żeby wybór „po prostu daj mi aktualną" nie wymagał czytania całej listy. */ .af-modal-item--latest a { background: var(--good-tint, #dcfce7); border-color: rgba(22,163,74,.35); } .af-modal-item--latest a:hover, .af-modal-item--latest a:focus-visible { background: #cdf1d8; border-color: rgba(22,163,74,.55); } .af-modal-item--latest .af-modal-file { color: #3f7a53; } .af-modal-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--good, #16a34a); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .af-modal-foot { margin-top: auto; padding: 14px 32px 18px; border-top: 1px solid var(--line, #e2e5ec); background: var(--paper-2, #f7f8fa); font-size: 12.5px; } .af-modal-foot a { color: var(--brand, #1d4ed8); text-decoration: none; } .af-modal-foot a:hover { text-decoration: underline; } /* Poniżej tego progu ciemna połowa staje się paskiem nad listą — dwie kolumny na telefonie zjadłyby całą szerokość listy. */ @media (max-width: 680px) { .af-modal-split { grid-template-columns: 1fr; } .af-modal-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 18px 22px; } .af-modal-logo { width: 116px; } .af-modal-side-text { font-size: 13px; } .af-modal-side-note { display: none; } .af-modal-head { padding: 22px 22px 12px; } .af-modal-list { padding: 4px 12px 10px; max-height: min(42vh, 300px); } .af-modal-foot { padding: 12px 22px 16px; } .af-modal-list a { flex-direction: column; align-items: flex-start; gap: 4px; } .af-modal-file { text-align: left; } } @media (max-width: 500px) { .af-download-buttons { flex-direction: column; align-items: stretch; } .af-btn { min-width: 0; width: 100%; } }