:root{ --ink:#07182B; --ink-2:#0B2640; --ink-3:#103657; --cyan:#6FD3FF; --cyan-2:#38B6F0; --cyan-deep:#1E7FB8; --font-sans:"Space Grotesk", "Segoe UI", Arial, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } *{ box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Tło trzyma , a zostaje przezroczyste — inaczej globalna warstwa heksagonów (z-index:-1) schowałaby się pod tłem body. */ html { background: #ffffff; } body { position: relative; font-family: "Segoe UI", Arial, sans-serif; color: #1c2430; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } .page-content{ max-width: 1180px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 24px) 90px; } .wrap{ width:min(1180px, calc(100% - 40px)); margin:0 auto; } /* ===== Pasek górny ===== */ .topbar{ background:var(--ink); color:rgba(215,240,255,0.85); font-size:13px; border-bottom:1px solid rgba(255,255,255,0.06); } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 0; flex-wrap:wrap; } .topbar-left, .topbar-right{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; } .topbar a{ color:inherit; text-decoration:none; transition:color .15s ease; } .topbar a:hover{ color:var(--cyan); } .topbar .dot{ width:4px; height:4px; border-radius:50%; background:var(--cyan); opacity:.6; } /* ===== Nagłówek ===== */ .site-header{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color:#fff; } .site-header .wrap{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; flex-wrap:wrap; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; } .brand-logo{ width:28px; height:auto; display:block; filter:drop-shadow(0 2px 6px rgba(111,211,255,0.35)); } .brand-name{ font-family:var(--font-sans); font-weight:600; letter-spacing:-0.01em; font-size:17px; color:#fff; } .brand-tag{ font-family:var(--font-mono); font-size:10.5px; color:rgba(215,240,255,0.65); letter-spacing:0.06em; margin-top:2px; } .header-cta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:10px; border:1px solid transparent; font-family:var(--font-sans); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .15s ease, border-color .15s ease, transform .12s ease; } .btn-ghost{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); color:#fff; } .btn-ghost:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); } .btn-primary{ background:linear-gradient(180deg, var(--cyan) 0%, var(--cyan-2) 100%); color:var(--ink); border-color:var(--cyan-2); box-shadow:0 8px 20px rgba(56,182,240,0.30); } .btn-primary:hover{ transform:translateY(-1px); } /* ===== Baner tytułowy (hero) ===== */ .hero{ position:relative; overflow:hidden; background: radial-gradient(900px 500px at 80% 10%, rgba(56,182,240,0.18), transparent 60%), radial-gradient(700px 420px at 10% 90%, rgba(111,211,255,0.10), transparent 60%), linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 100%); color:#fff; border-bottom:3px solid var(--cyan-2); } .hero .wrap{ position:relative; z-index:1; padding:48px 0 52px; } /* Strona tytułowa: logo aplikacji + treść obok siebie */ .cover{ display:flex; align-items:center; gap:clamp(20px, 4vw, 40px); flex-wrap:wrap; } /* drop-shadow, nie box-shadow — cień ma iść za zaokrągleniem samego znaku, a nie za prostokątnym pudełkiem obrazka. */ /* Maks. 128 px — plik ma 256 px, więc na ekranach 2x znak zostaje ostry. */ .cover-mark{ flex:0 0 auto; width:clamp(88px, 12vw, 128px); height:auto; display:block; filter:drop-shadow(0 16px 36px rgba(7,24,43,.55)); } .cover-text{ flex:1 1 420px; min-width:0; } .cover-partner{ display:flex; align-items:center; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.10); } .cover-partner img{ height:26px; width:auto; display:block; opacity:.9; } .cover-partner span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:rgba(215,240,255,0.62); } /* ===== Tło heksagonalne (jak w pozostałych serwisach www) ===== */ .hex-bg-global{ position:absolute; inset:0; width:100%; z-index:-1; pointer-events:none; overflow:hidden; } /* Słabsze niż na stronie głównej — tam heksagony widać w przerwach między sekcjami, a tu tekst dokumentacji leży wprost na tej warstwie. */ .hex-bg-global .hex-cluster{ position:absolute; pointer-events:none; opacity:.45; } .hex-bg-banner{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .hex-bg-banner .hex-cluster{ position:absolute; pointer-events:none; opacity:.6; } .hex-bg-hero{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .hex-bg-hero .hex-cluster{ position:absolute; pointer-events:none; opacity:.7; } .hex-bg-footer{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .hex-bg-footer .hex-cluster{ position:absolute; pointer-events:none; opacity:.55; } .year-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:6px; background:rgba(111,211,255,0.10); border:1px solid rgba(111,211,255,0.30); color:var(--cyan); font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.04em; } .year-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .hero h1{ font-family:var(--font-sans); font-weight:600; font-size:clamp(28px, 4vw, 42px); line-height:1.1; letter-spacing:-0.02em; margin:16px 0 8px; color:#fff; } .hero .subtitle{ font-size:15px; color:rgba(232,244,255,0.82); max-width:66ch; } .hero-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; } .meta-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); font-size:12.5px; color:rgba(232,244,255,0.88); } .meta-chip svg{ color:var(--cyan); flex-shrink:0; } h2 { font-family:var(--font-sans); color: var(--ink); border-left: 4px solid var(--cyan-2); padding-left: 10px; font-size: 19px; margin-top: 42px; } p { max-width: 72ch; } a { color: var(--cyan-deep); } /* Akapit wprowadzający — na pełną szerokość kontenera, jak siatka kart pod nim. */ .lead-text{ max-width: none; margin: 4px 0 0; font-size: 15px; color: #33415a; } /* ===== Karty obszarów dokumentacji ===== */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 20px; } .card { position: relative; display: flex; gap: 14px; border: 1px solid #d7dee8; border-left: 4px solid var(--cyan-2); border-radius: 8px; padding: 18px 20px; background: #ffffff; transition: box-shadow .15s ease, transform .15s ease; } .card:hover { box-shadow: 0 10px 24px rgba(7,24,43,.10); transform: translateY(-2px); } .card-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #e7f6fc; color: var(--cyan-deep); display: flex; align-items: center; justify-content: center; } .card-icon svg { width: 22px; height: 22px; } .card-body h3 { margin: 0 0 6px 0; font-size: 16px; font-family:var(--font-sans); } .card-body h3 a { color: var(--ink); text-decoration: none; } .card-body h3 a::after { content: ""; position: absolute; inset: 0; } .card-body h3 a:hover { text-decoration: underline; } .card-body p { margin: 0; font-size: 13.5px; color: #4a5568; } .extra { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; } .extra svg { width: 18px; height: 18px; color: var(--cyan-deep); flex: 0 0 auto; } /* ===================================================================== KOMUNIKATY I INFORMACJE Jeden zestaw klas dla wszystkich stron dokumentacji — nie dodawać lokalnych wariantów w pojedynczych plikach. ===================================================================== */ .callout{ display:flex; gap:14px; align-items:flex-start; margin:18px 0; padding:16px 18px; border:1px solid; border-left-width:4px; border-radius:8px; font-size:13.5px; } .callout-icon{ flex:0 0 auto; width:20px; height:20px; margin-top:2px; } .callout-body{ min-width:0; } .callout-body > *:first-child{ margin-top:0; } .callout-body > *:last-child{ margin-bottom:0; } .callout p{ max-width:none; margin:0 0 8px; } .callout-title{ display:block; margin-bottom:4px; font-family:var(--font-sans); font-weight:600; color:var(--ink); } .callout--info{ background:#f2f9fd; border-color:#c9e6f5; border-left-color:var(--cyan-2); } .callout--info .callout-icon{ color:var(--cyan-deep); } .callout--warn{ background:#fff8ed; border-color:#f7dfb6; border-left-color:#e0a03c; } .callout--warn .callout-icon{ color:#b4761c; } .callout--danger{ background:#fdf4f3; border-color:#f2d2ce; border-left-color:#d4564f; } .callout--danger .callout-icon{ color:#b03a33; } .callout--ok{ background:#f3fbf6; border-color:#cbe9d5; border-left-color:#33a061; } .callout--ok .callout-icon{ color:#1f7a45; } /* Panel podsumowania / wyróżnionej sekcji */ .panel{ margin:32px 0 0; padding:22px 24px; border:1px solid #d7dee8; border-radius:10px; background:#f7fafc; } .panel > h2{ margin:0 0 10px; border-left:0; padding-left:0; } .panel > *:last-child{ margin-bottom:0; } /* Lista cech / checklisty — jeden wzór dla „✓" */ ul.feature-list{ list-style:none; padding:0; margin:16px 0; } ul.feature-list li{ position:relative; margin:0; padding:10px 0 10px 28px; border-bottom:1px solid #e3e8ef; font-size:13.5px; } ul.feature-list li:last-child{ border-bottom:0; } ul.feature-list li::before{ content:"✓"; position:absolute; left:0; top:10px; color:var(--cyan-deep); font-weight:700; } /* Kroki / działania */ .step-list{ display:grid; gap:10px; margin:18px 0; } .step-item{ padding:13px 16px; font-size:13.5px; border:1px solid #d7dee8; border-left:4px solid var(--cyan-2); border-radius:8px; background:#ffffff; } .step-label{ display:inline-block; min-width:88px; margin-right:10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--cyan-deep); font-weight:600; text-transform:uppercase; } /* Ilustracja / zrzut ekranu */ .figure{ margin:20px 0; padding:12px; border:1px solid #d7dee8; border-radius:10px; background:#f7fafc; } .figure img{ border-radius:6px; } .figure figcaption{ margin-top:10px; font-size:12px; color:#64748b; text-align:center; font-style:italic; } /* Okruszki */ nav.breadcrumb{ font-size:12.5px; color:#4a5568; margin:0 0 20px; } nav.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; } nav.breadcrumb li:not(:last-child)::after{ content:"\203A"; margin-left:6px; color:#9aa5b1; } nav.breadcrumb li[aria-current="page"]{ color:var(--ink); font-weight:600; } /* Powiązane dokumenty */ .doc-related{ margin-top:44px; padding:18px 20px; background:#f7fafc; border:1px solid #d7dee8; border-left:4px solid var(--cyan-2); border-radius:8px; } .doc-related h2{ margin:0 0 10px; border-left:0; padding:0; font-size:15px; } .doc-related ul{ margin:0; padding-left:18px; } .doc-related li{ margin-bottom:5px; font-size:13.5px; } /* Pigułka statusu (np. „Wkrótce") */ .badge{ display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(111,211,255,0.12); border:1px solid rgba(111,211,255,0.32); color:var(--cyan); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; } /* Treść artykułu dokumentacji */ .doc-body h3{ font-family:var(--font-sans); color:var(--ink); font-size:15px; margin-top:26px; } .doc-body p, .doc-body li{ font-size:13.5px; } /* ===== Stopka ===== */ .site-footer{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); color:rgba(215,240,255,0.78); border-top:3px solid var(--cyan-2); } .site-footer .wrap{ position:relative; z-index:1; padding:30px 0; font-size:12.5px; } .site-footer a{ color:var(--cyan); text-decoration:none; } .site-footer a:hover{ text-decoration:underline; } .site-footer strong{ color:#fff; font-weight:600; } @media (max-width: 760px) { .hero h1 { font-size: 24px; } .card { padding: 16px; } }