/* ═══ QRquest — wspólne style serwisu ═══ Wyciągnięte z jednoplikowego index.html (wrzesień 2026), gdy landing rozrósł się o podstrony: pięć stron nie może nieść pięciu kopii 50 kB CSS. Krytyczny arkusz (zmienne, siatka, pierwsze ekrany) został inline w każdej strony — ten plik dochodzi zaraz po nim, więc kaskada bez zmian. */ /* ═══════════════════════════════════════════════════════ Tokeny marki — te same co na stronie poczekalniowej. Wszystkie kolory pochodzą wprost ze znaku QRquest v2: moduł 1 #34265f → #44317d (indygo) moduł 2/3 #533c90 → #624d9b (fiolet) romb #7c5fa5 → #ce7fb4 (fiolet → róż = akcent) sygnatura #4a4a49 (ciepła szarość) Stąd stylistyka: gradient zamiast płaskiej plamy, miękkie narożniki (w znaku 24% boku) i różowy akcent. ═══════════════════════════════════════════════════════ */ :root { --indigo: #44317d; --indigo-deep: #34265f; --violet: #624d9b; --violet-deep: #533c90; --violet-lift: #8f78bf; /* rozjaśniony — na ciemnych tłach */ --pink: #ce7fb4; /* akcent z rombu */ --pink-deep: #a85590; /* róż czytelny na białym (tekst, ikony) */ --pink-lift: #e7b3d3; /* róż na ciemnym tle */ --ink: #4a4a49; --ink-soft: #6a6968; --ink-mute: #807e7d; --line: #e9e4f1; --line-soft: #f3eff9; --violet-line: #cfc5e3; --violet-tint: #f4f1fa; --pink-tint: #fbf0f6; --pink-line: #eed3e4; --bg: #fbfafd; --surface: #ffffff; --dark: #1d1731; --dark-2: #271f43; /* gradient marki — pełny przebieg znaku: indygo → fiolet → róż */ --grad-brand: linear-gradient(135deg, #34265f 0%, #533c90 48%, #ce7fb4 100%); /* gradient modułu — bez różu, do spokojniejszych powierzchni */ --grad-mark: linear-gradient(135deg, #34265f 0%, #624d9b 100%); --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --wrap: 1120px; --wrap-wide: 1320px; /* cennik i tabela porównania — 4 kolumny potrzebują luzu */ --radius: 26px; /* miękkość narożników znaku przeniesiona na kafle */ --radius-sm: 18px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* height:auto jest konieczne — obrazki niosą atrybuty width/height (rezerwacja miejsca, brak skoku layoutu), więc bez tego skalują się tylko w poziomie. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--violet); text-decoration: none; } a:hover { color: var(--indigo); } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* Sekcje z gęstą siatką (cennik, porównanie planów) wychodzą poza box treści — czterem kolumnom w 1120 px robi się ciasno, a poza tym szerszy blok wizualnie oddziela cennik od reszty strony. */ .wrap-wide { max-width: var(--wrap-wide); } /* tekst tylko dla czytników ekranu — znaczenie ikon ✓/— w tabeli */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } section { padding: 88px 0; } section + section { padding-top: 0; } .sec-dark + section { padding-top: 88px; } /* ── nagłówki sekcji ── */ .sec-head { max-width: 660px; margin-bottom: 44px; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); margin-bottom: 14px; } h2 { font-size: clamp(28px, 4vw, 40px); } .sec-head p { margin-top: 14px; font-size: 17px; color: var(--ink-soft); text-wrap: pretty; } /* ═══════════ pasek górny ═══════════ */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(251,250,253,0.86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .topbar.stuck { border-bottom-color: var(--line); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; } /* Znak v2 ma własne gradienty w — moduły nie są kolorowane z CSS. Sterujemy tylko sygnaturą tekstową. */ .logo { display: block; height: 32px; width: auto; } .logo .lg-word { fill: var(--ink); } .nav { display: flex; align-items: center; gap: 26px; } .nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); } .nav a:hover { color: var(--indigo); } .top-actions { display: flex; align-items: center; gap: 10px; } /* ═══════════ przyciski ═══════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s; white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex: none; } .btn-primary { background: var(--grad-brand); background-size: 140% 140%; background-position: 0% 50%; color: #fff; box-shadow: 0 14px 30px -14px rgba(52,38,95,0.65), 0 6px 20px -12px rgba(206,127,180,0.55); transition: transform 0.15s, box-shadow 0.2s, background-position 0.35s ease; } .btn-primary:hover { color: #fff; transform: translateY(-1px); background-position: 100% 50%; box-shadow: 0 18px 40px -14px rgba(52,38,95,0.7), 0 10px 28px -12px rgba(206,127,180,0.65); } .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn-ghost:hover { color: var(--indigo); border-color: var(--pink); } .btn-sm { padding: 10px 18px; font-size: 14px; } .btn-light { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff; } .btn-light:hover { background: rgba(255,255,255,0.18); color: #fff; } .btn-white { background: #fff; color: var(--indigo); } .btn-white:hover { color: var(--indigo-deep); transform: translateY(-1px); } /* ═══════════ hero ═══════════ */ .hero { position: relative; overflow: hidden; padding: 72px 0 88px; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 55% 45% at 88% 4%, rgba(206,127,180,0.20), transparent 62%), radial-gradient(ellipse 70% 60% at 72% 12%, rgba(98,77,155,0.16), transparent 60%), radial-gradient(ellipse 60% 50% at 8% 24%, rgba(52,38,95,0.09), transparent 62%); } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(68,49,125,0.11) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 72%); } /* ── ikony gier terenowych w tle hero ── Warstwa siedzi nad siatką kropek (::after), ale pod treścią — .wrap dostaje własny kontekst układania niżej. Ikony nie łapią kliknięć i są ukryte przed czytnikami ekranu (aria-hidden w znaczniku). */ .hero-icons { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bgi { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--c, var(--indigo)); /* styl kreski wspólny dla wszystkich ikon Lucide — jedno źródło prawdy */ fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.065; animation: drift var(--t) ease-in-out var(--dl) infinite; } @keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(var(--r)); } 50% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--dr))); } } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.04fr; gap: 48px; align-items: center; } /* min-width:0 — bez tego kolumna z szerokim zrzutem rozpycha siatkę (domyślne min-width:auto elementu grid) i obrazek wychodzi poza ekran. */ .hero-grid > * { min-width: 0; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 22px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse 2.4s ease-in-out infinite; } .hero h1 { font-size: clamp(38px, 5.6vw, 62px); letter-spacing: -0.038em; } .hero h1 .grad { background: linear-gradient(115deg, var(--indigo-deep) 4%, var(--violet) 46%, var(--pink) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { margin-top: 20px; font-size: 18px; line-height: 1.62; color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-mute); } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .fact { display: flex; align-items: baseline; gap: 8px; } .fact b { font-family: var(--font-display); font-size: 22px; color: var(--indigo); letter-spacing: -0.02em; } .fact span { font-size: 13.5px; color: var(--ink-mute); } /* ── kompozycja: panel + telefon ── Delikatny bleed w prawo: zrzut panelu wychodzi poza kolumnę tekstu, żeby był czytelny, a telefon zasłaniał tylko jego brzeg. */ .shot-combo { position: relative; padding-bottom: 30px; margin-right: -34px; } .shot-panel { border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; background: var(--surface); box-shadow: 0 40px 80px -40px rgba(52,38,95,0.55), 0 2px 10px rgba(52,38,95,0.06); } .phone { position: absolute; right: -30px; bottom: -6px; width: 168px; padding: 7px; background: #171226; border-radius: 34px; box-shadow: 0 30px 60px -22px rgba(23,18,37,0.62); } .phone img { border-radius: 27px; } .phone::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 46px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22); } /* ═══════════ porównanie ═══════════ */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cmp { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .cmp.win { position: relative; border-color: transparent; background: radial-gradient(ellipse 80% 70% at 100% 100%, rgba(206,127,180,0.34), transparent 62%), linear-gradient(155deg, var(--indigo-deep) 0%, var(--violet-deep) 100%); color: #efecf8; box-shadow: 0 30px 60px -34px rgba(52,38,95,0.85); } .cmp h3 { font-size: 19px; margin-bottom: 4px; } .cmp .cmp-sub { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 20px; } .cmp.win .cmp-sub { color: rgba(255,255,255,0.6); } .cmp ul { list-style: none; display: grid; gap: 11px; } .cmp li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; } .cmp li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; } .cmp.lose li { color: var(--ink-soft); } .cmp.lose li svg { color: #bcb6c8; } .cmp.win li svg { color: var(--pink-lift); } /* ═══════════ kroki ═══════════ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } /* Numery kroków to mikro-moduły znaku: te same proporcje narożnika (24%) i ten sam przebieg gradientu co w logo — indygo → fiolet → róż. */ .step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--grad-mark); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 16px; box-shadow: 0 10px 20px -12px rgba(52,38,95,0.85); } .step:nth-child(2) .step-n { background: linear-gradient(135deg, #533c90 0%, #624d9b 100%); } .step:nth-child(3) .step-n { background: linear-gradient(135deg, #7c5fa5 0%, #ce7fb4 100%); box-shadow: 0 10px 20px -12px rgba(206,127,180,0.9); } .step h3 { font-size: 18px; margin-bottom: 9px; } .step p { font-size: 14.8px; color: var(--ink-soft); } /* ═══════════ funkcje ═══════════ */ .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feat { padding: 26px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: transform 0.18s, box-shadow 0.22s, border-color 0.2s; } .feat:hover { transform: translateY(-3px); border-color: var(--violet-line); box-shadow: 0 22px 44px -26px rgba(52,38,95,0.45), 0 8px 24px -20px rgba(206,127,180,0.5); } .feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-tint) 0%, var(--pink-tint) 100%); border: 1px solid var(--line-soft); margin-bottom: 15px; } .feat-ico svg { width: 20px; height: 20px; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .feat h3 { font-size: 16.5px; margin-bottom: 7px; letter-spacing: -0.02em; } .feat p { font-size: 14.5px; color: var(--ink-soft); } /* ═══════════ sekcja ciemna (gracz) ═══════════ */ .sec-dark { background: radial-gradient(ellipse 46% 46% at 84% 96%, rgba(206,127,180,0.24), transparent 62%), radial-gradient(ellipse 60% 60% at 20% 0%, rgba(98,77,155,0.38), transparent 60%), var(--dark); color: #efecf8; padding: 88px 0; } .sec-dark h2 { color: #fff; } .sec-dark .sec-head p { color: rgba(239,236,248,0.7); } .sec-dark .eyebrow { color: var(--violet-lift); } /* ═══════════ sekcja generatora AI ═══════════ Świadomie najmocniej wyróżniona sekcja strony: ciemne tło z różem z rombu, bo to jedyna rzecz, której konkurencja nie ma. Ciemniejsza i cieplejsza od .sec-dark (tamta należy do wątku gracza), więc obie nie zlewają się w jeden pas, mimo że stoją na tej samej stronie. */ .sec-ai { background: radial-gradient(ellipse 52% 60% at 82% 4%, rgba(206,127,180,0.34), transparent 60%), radial-gradient(ellipse 64% 70% at 12% 100%, rgba(98,77,155,0.42), transparent 62%), linear-gradient(165deg, #241c3f 0%, var(--dark) 62%); color: #efecf8; padding: 92px 0; } .sec-ai h2 { color: #fff; } .sec-ai .sec-head p { color: rgba(239,236,248,0.74); } .sec-ai .eyebrow { color: var(--pink-lift); } /* znak sztucznej inteligencji — gwiazdki w kole z gradientem marki */ .ai-mark { /* flex, nie inline-flex: w .sec-head.center element inline ustawia się w jednej linii z nadtytułem, zamiast stanąć nad nim */ display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 22px; background: var(--grad-brand); box-shadow: 0 18px 40px -14px rgba(206,127,180,0.55), inset 0 1px 0 rgba(255,255,255,0.22); } .ai-mark svg { width: 30px; height: 30px; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* delikatne pulsowanie: sekcja ma przyciągać wzrok, ale nie migać */ @media (prefers-reduced-motion: no-preference) { .ai-mark { animation: ai-glow 3.6s ease-in-out infinite; } @keyframes ai-glow { 0%, 100% { box-shadow: 0 18px 40px -14px rgba(206,127,180,0.45), inset 0 1px 0 rgba(255,255,255,0.22); } 50% { box-shadow: 0 22px 52px -12px rgba(206,127,180,0.75), inset 0 1px 0 rgba(255,255,255,0.22); } } } /* kroki na ciemnym tle — szkło zamiast białej karty */ .sec-ai .step { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sec-ai .step h3 { color: #fff; } .sec-ai .step p { color: rgba(239,236,248,0.72); } .sec-ai .step-n { box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6); } .sec-ai .step:nth-child(3) .step-n { background: linear-gradient(135deg, var(--pink) 0%, #e7b3d3 100%); color: #3b2a52; } /* zrzut generatora na ciemnym tle — jasny obraz potrzebuje ramki i cienia, inaczej „pływa" na gradiencie jak wycinanka */ .ai-shot { margin: 40px auto 0; max-width: 940px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04); } .ai-shot img { display: block; width: 100%; height: auto; } .ai-shot figcaption { padding: 13px 18px 15px; background: rgba(255,255,255,0.06); font-size: 13.5px; color: rgba(239,236,248,0.66); text-align: center; } .sec-ai .rmap-foot { color: rgba(239,236,248,0.66); } .sec-ai .rmap-foot b { color: #fff; } .sec-ai .rmap-foot a { color: var(--pink-lift); text-decoration: underline; text-underline-offset: 3px; } .sec-ai .rmap-foot a:hover { color: #fff; } /* plakietka „wczesny dostęp" w kontrze */ .sec-ai .wip { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); color: #f4e7f1; } @media (max-width: 640px) { .sec-ai { padding: 60px 0; } .ai-mark { width: 58px; height: 58px; border-radius: 18px; } .ai-mark svg { width: 26px; height: 26px; } } /* ── znak w kontrze na ciemnych powierzchniach ── Na tych tłach odmiana kolorowa jest nieczytelna, i to nie „trochę": jej najciemniejszy kafel ma kolor #34265f, czyli dokładnie --indigo-deep, z którego zbudowane jest tło sekcji i CTA — kafel zlewa się z podłożem, a antracytowy napis #4a4a49 nie wyrabia kontrastu. Stąd osobny plik logo-qrquest-v2-white.svg (monochrom), a nie filtr CSS na kolorowym. Tu znak jest wyciszony do roli podpisu sekcji, w CTA gra pierwsze skrzypce. */ .sec-dark .sec-logo { display: block; height: 24px; width: auto; margin-bottom: 18px; opacity: 0.55; } .player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .player-list { list-style: none; display: grid; gap: 18px; } .player-list li { display: flex; gap: 14px; } .player-list .pico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; } .player-list .pico svg { width: 18px; height: 18px; color: var(--pink-lift); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .player-list b { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -0.02em; margin-bottom: 3px; } .player-list p { font-size: 14.5px; color: rgba(239,236,248,0.66); } .phones { display: flex; justify-content: center; align-items: flex-end; gap: 18px; } .phones .ph { width: 190px; padding: 7px; background: #120f1e; border-radius: 34px; box-shadow: 0 34px 60px -26px rgba(0,0,0,0.8); } .phones .ph img { border-radius: 27px; } .phones .ph.raise { margin-bottom: 44px; } /* ═══════════ typy zadań ═══════════ */ .tasks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .task { padding: 18px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); position: relative; } .task svg { width: 20px; height: 20px; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 11px; } .task b { display: block; font-family: var(--font-display); font-size: 14.5px; letter-spacing: -0.015em; margin-bottom: 4px; } .task span { font-size: 12.8px; color: var(--ink-mute); line-height: 1.45; display: block; } /* ═══════════ katalog typów w skrócie (strona główna) ═══════════ Strona główna pokazuje KOMPLET mechanik — pełna lista jest tu argumentem sprzedażowym („tego jest dużo"), więc kafelek zwęża się do ikony i nazwy. Opisy każdej mechaniki mieszkają na typy-zadan.html. */ .tasks-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tmini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); position: relative; transition: transform 0.16s, border-color 0.2s, box-shadow 0.2s; } .tmini svg { width: 18px; height: 18px; flex: none; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tmini b { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .tmini.pro { border-color: var(--pink-line); background: linear-gradient(150deg, var(--pink-tint) 0%, var(--surface) 70%); } .tmini.pro::after { content: 'Pro'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8e3f78; background: #f7dfec; padding: 2px 7px; border-radius: 999px; } .tmini.pro b { padding-right: 34px; } .tmini:hover { transform: translateY(-2px); border-color: var(--pink-line); box-shadow: 0 12px 24px -18px rgba(52,38,95,0.5); } /* legenda pod siatką: co znaczy plakietka */ .tasks-legend { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 13.5px; color: var(--ink-mute); } /* Plan Pro znakuje róż z rombu — dawny złoty akcent nie ma już oparcia w logo. */ .task.pro { border-color: var(--pink-line); background: linear-gradient(180deg, var(--pink-tint) 0%, var(--surface) 62%); } .task.pro::after { content: 'Pro'; position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8e3f78; background: #f7dfec; padding: 3px 8px; border-radius: 999px; } /* ═══════════ podstrony (typy zadań, dla kogo, wystawy, FAQ) ═══════════ Strona główna ma hero; podstrona otwiera się tym nagłówkiem — węższym, bez grafiki, żeby treść zaczynała się od razu pod paskiem. */ .page-head { padding: 72px 0 0; } .page-head h1 { font-size: clamp(32px, 4.8vw, 52px); letter-spacing: -0.035em; } .page-head .lead { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 720px; text-wrap: pretty; } .crumbs { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 20px; } .crumbs a { color: var(--ink-mute); } .crumbs a:hover { color: var(--indigo); } /* „zobacz więcej" pod skróconą sekcją na stronie głównej — sekcja pokazuje próbkę, pełna treść mieszka na podstronie */ .sec-more { margin-top: 34px; text-align: center; } .sec-more .btn { min-width: 260px; } /* domknięcie siatki funkcji: to, co nie dostało własnego kafla */ .feats-foot { margin-top: 26px; text-align: center; font-size: 15px; color: var(--ink-mute); max-width: 780px; margin-left: auto; margin-right: auto; text-wrap: pretty; } /* dwie karty nie mają rozjeżdżać się na całą szerokość siatki pięciu */ .tasks-2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; } /* pasek górny: pozycja aktualnej strony */ .nav a.is-active { color: var(--indigo); font-weight: 600; } /* ═══════════ galeria panelu ═══════════ */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .gal { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: 0 26px 50px -36px rgba(52,38,95,0.55); } .gal img { border-bottom: 1px solid var(--line-soft); } .gal figcaption { padding: 15px 18px 17px; } .gal b { display: block; font-family: var(--font-display); font-size: 15.5px; letter-spacing: -0.02em; margin-bottom: 3px; } .gal span { font-size: 13.5px; color: var(--ink-mute); } /* ═══════════ zrzuty z telefonu (podstrony) ═══════════ Trzy pionowe kadry obok siebie; ramka udaje obudowę telefonu, ale bez rysowania ramek urządzeń — te starzeją się szybciej niż sam produkt. */ .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 900px; margin: 0 auto; } .shot { border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: 0 26px 50px -34px rgba(52,38,95,0.55); } .shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line-soft); } .shot figcaption { padding: 13px 16px 15px; font-size: 13.5px; color: var(--ink-mute); } @media (max-width: 860px) { .shots { grid-template-columns: 1fr 1fr; max-width: 620px; } .shots .shot:last-child { display: none; } /* trzeci kadr zostawia sierotę w rzędzie */ } @media (max-width: 520px) { .shots { grid-template-columns: 1fr; max-width: 320px; } .shots .shot:last-child { display: block; } } /* ═══════════ segmenty ═══════════ */ .segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .seg { padding: 26px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .seg .tag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; } .seg h3 { font-size: 17px; margin-bottom: 8px; } .seg p { font-size: 14.5px; color: var(--ink-soft); } /* drugi akapit w kafelku zastosowania (podstrona „Dla kogo") — konkret „jak to wygląda", oddzielony kreską, żeby nie zlewał się z lidem */ .seg .seg-more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-mute); } .seg .seg-more b { color: var(--ink-soft); } /* ═══════════ cennik ═══════════ */ .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; } .plan { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); height: 100%; } .plan.best { border-color: var(--pink); box-shadow: 0 30px 60px -38px rgba(52,38,95,0.8), 0 12px 34px -26px rgba(206,127,180,0.75); position: relative; } .plan.best::before { content: 'Najczęściej wybierany'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .plan h3 { font-size: 18px; margin-bottom: 4px; } .plan .plan-for { font-size: 13px; color: var(--ink-mute); min-height: 38px; } .price { display: flex; align-items: baseline; gap: 5px; margin: 16px 0 4px; } .price b { font-family: var(--font-display); font-size: 34px; letter-spacing: -0.035em; color: var(--indigo); } .price i { font-style: normal; font-size: 13.5px; color: var(--ink-mute); } .price-note { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 20px; } .plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; } /* Nie flex — w układzie flex i tekst po myślniku stają się dwoma osobnymi elementami rozdzielonymi gapem, więc „wszystkie 16 typów zadań — z memory…" rozjeżdżało się na dwie kolumny. Ikona idzie na pozycję absolutną, tekst płynie jednym ciągiem jak zwykły akapit. */ .plan li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-soft); } .plan li svg { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; color: var(--violet); } /* Wcześniej całe miało nowrap — przez to „wszystkie 16 typów zadań" rozpychało kolumnę i reszta zdania łamała się po jednym słowie na wiersz. Teraz łamie się normalnie, a „white-label" chroni twardy łącznik w znaczniku. */ .plan li b { white-space: normal; } .plan li.off { color: var(--ink-mute); } .plan li.off svg { color: #d0ccd9; } .plan .btn { margin-top: auto; width: 100%; } .plan-foot { margin-top: 26px; padding: 18px 22px; border-radius: var(--radius-sm); background: linear-gradient(120deg, var(--violet-tint) 0%, var(--pink-tint) 100%); font-size: 14px; color: var(--ink-soft); text-align: center; } /* ═══════════ porównanie planów ═══════════ Rozwijana tabela pod kartami cennika.
daje zwijanie bez JS, więc jest ostylowany jak przycisk (nadpisuje globalne reguły details/summary z sekcji FAQ). */ .cmp { margin-top: 30px; border: 0; background: none; padding: 0; border-radius: 0; } .cmp[open] { border-color: transparent; } .cmp { text-align: center; } /* centruje inline-flex summary bez dodatkowej otoczki */ .cmp-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; padding: 13px 26px; width: auto; border: 1px solid var(--violet-line); border-radius: 999px; background: var(--surface); color: var(--violet); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s; } .cmp-toggle::after { content: none; } /* globalna strzałka z FAQ off */ .cmp-toggle::-webkit-details-marker { display: none; } .cmp-toggle:hover { color: var(--indigo); border-color: var(--pink); box-shadow: 0 14px 30px -22px rgba(52,38,95,0.6); } .cmp-toggle > svg { width: 17px; height: 17px; flex: none; } .cmp-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.22s var(--ease-out, ease); } .cmp[open] .cmp-chev { transform: rotate(225deg) translate(-2px, -2px); } .cmp[open] .cmp-label::after { content: none; } .cmp-body { margin-top: 22px; text-align: left; } .cmp-hint { display: none; max-width: none; /* nadpisuje globalne `details p` */ padding: 0; font-size: 13px; color: var(--ink-mute); text-align: center; margin-bottom: 12px; } .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .cmp-scroll:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; } .cmp-table { width: 100%; min-width: 860px; /* poniżej tej szerokości kolumny robią się nieczytelne */ border-collapse: collapse; font-size: 14px; } .cmp-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cmp-table th, .cmp-table td { text-align: left; vertical-align: middle; } /* ── nagłówek z planami ── */ .cmp-table thead th { padding: 22px 16px 18px; text-align: center; /* nagłówek w jednej osi z wartościami w kolumnie */ border-bottom: 1px solid var(--line); vertical-align: bottom; font-weight: 600; } .cmp-table thead th:first-child { text-align: left; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .cmp-plan { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; color: var(--indigo); } .cmp-price { display: block; font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-top: 2px; } .cmp-flag { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; } /* ── wiersze ── */ .cmp-table tbody th[scope="row"] { padding: 14px 18px; font-weight: 500; color: var(--ink-soft); /* pierwsza kolumna zostaje w kadrze przy przewijaniu w bok */ position: sticky; left: 0; background: var(--surface); min-width: 260px; } .cmp-table tbody td { padding: 14px 16px; color: var(--ink); text-align: center; white-space: nowrap; } .cmp-table tbody tr + tr th, .cmp-table tbody tr + tr td { border-top: 1px solid var(--line-soft); } .cmp-table tbody tr:hover th[scope="row"], .cmp-table tbody tr:hover td { background: var(--violet-tint); } .cmp-note { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-mute); white-space: normal; margin-top: 2px; } .cmp-table td .cmp-note { text-align: center; } /* nagłówki grup — dzielą długą listę na trzy czytelne bloki */ .cmp-group th { padding: 16px 18px 8px !important; background: var(--violet-tint); font-family: var(--font-display); font-size: 12px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet) !important; position: static !important; border-top: 1px solid var(--line) !important; } .cmp-table tbody tr.cmp-group:hover th { background: var(--violet-tint); } /* ── ✓ / — zamiast słów ── */ .cmp-table td.ok::before, .cmp-table td.no::before { content: ''; display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; vertical-align: middle; } .cmp-table td.ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23624d9b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .cmp-table td.no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0ccd9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } .cmp-no { color: #d0ccd9; } /* ── kolumna Pro podświetlona na całej wysokości ── */ .cmp-table .is-best { background: var(--pink-tint); } .cmp-table thead th.is-best { border-bottom-color: var(--pink-line); } .cmp-table tbody tr:hover td.is-best { background: #f8e8f1; } /* ── stopka z przyciskami ── */ .cmp-table tfoot td { padding: 20px 14px; text-align: center; border-top: 1px solid var(--line); } .cmp-table tfoot th { position: sticky; left: 0; background: var(--surface); border-top: 1px solid var(--line); } .cmp-table tfoot .btn { width: 100%; justify-content: center; } /* ═══════════ FAQ ═══════════ */ .faq { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; } details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 22px; } details[open] { border-color: var(--pink-line); } summary { list-style: none; cursor: pointer; padding: 17px 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; } details[open] summary::after { transform: rotate(225deg) translateY(-2px); } details p { padding: 0 0 20px; font-size: 15px; color: var(--ink-soft); max-width: 68ch; } /* ═══════════ CTA końcowe ═══════════ */ .cta-final { border-radius: 34px; padding: 56px 44px; text-align: center; background: radial-gradient(ellipse 58% 70% at 84% 108%, rgba(206,127,180,0.42), transparent 62%), radial-gradient(ellipse 70% 80% at 42% 0%, rgba(143,120,191,0.48), transparent 65%), linear-gradient(160deg, var(--indigo-deep) 0%, var(--violet-deep) 100%); color: #fff; box-shadow: 0 40px 80px -44px rgba(52,38,95,0.9); } /* Domknięcie marką: to ostatnia rzecz, którą widz czyta przed decyzją, więc znak dostaje pełną wagę, a nie wyciszenie jak w sekcji gracza. */ .cta-final .cta-logo { display: block; height: clamp(30px, 4.4vw, 38px); width: auto; margin: 0 auto 24px; } .cta-final h2 { font-size: clamp(28px, 4vw, 40px); color: #fff; } .cta-final p { margin: 16px auto 0; max-width: 56ch; font-size: 17px; color: rgba(255,255,255,0.78); text-wrap: pretty; } .cta-final .hero-cta { justify-content: center; } .cta-mail { margin-top: 22px; font-size: 14.5px; color: rgba(255,255,255,0.66); } .cta-mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ═══════════ stopka ═══════════ */ /* ═══════════════════════════════════════════════════════ STOPKA — trzy kolumny: marka, nawigacja, kontakt i dokumenty. Pod nimi pasek z danymi identyfikacyjnymi usługodawcy, których art. 5 ust. 2 ustawy o świadczeniu usług drogą elektroniczną wymaga w formie wyraźnej i bezpośrednio dostępnej — stąd pełna szerokość i własny wiersz, a nie odnośnik do podstrony. ═══════════════════════════════════════════════════════ */ .foot { border-top: 1px solid var(--line); margin-top: 88px; padding: 54px 0 34px; font-size: 14px; color: var(--ink-soft); } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr; gap: 44px 40px; } /* ── kolumna 1: marka ── */ .foot-logo { display: inline-block; } .foot-logo img { height: 32px; width: auto; } .foot-about { margin-top: 16px; max-width: 36ch; font-size: 13.5px; line-height: 1.7; color: var(--ink-mute); } .foot-claim { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; color: var(--violet); } /* ── kolumny 2–3: listy odnośników ── */ .foot-h { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-deep); margin-bottom: 15px; } .foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .foot-list a, .foot-list button { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0; text-align: left; text-decoration: none; cursor: pointer; } .foot-list a:hover, .foot-list button:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; } .foot-list .is-mail { color: var(--violet); font-weight: 500; } .foot-list .is-mail:hover { color: var(--indigo-deep); } /* ── pasek dolny: prawo i identyfikacja ── */ .foot-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; font-size: 12.5px; line-height: 1.75; color: var(--ink-mute); } .foot-bottom a { color: var(--ink-mute); text-decoration: none; } .foot-bottom a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .foot { padding-top: 44px; } .foot-grid { grid-template-columns: 1fr; gap: 30px; } .foot-bottom { margin-top: 34px; } } /* ═══════════════════════════════════════════════════════ PASY PEŁNEJ SZEROKOŚCI — oddzielają sekcje, żeby strona nie była ciągiem bloków tekstu. ═══════════════════════════════════════════════════════ */ .band { position: relative; width: 100%; } /* ── cienki pasek modułów QR: separator ── */ .qr-rule { height: 12px; background-image: repeating-linear-gradient(90deg, var(--indigo) 0 12px, transparent 12px 24px); opacity: 0.16; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } .qr-rule.on-dark { opacity: 0.22; background-image: repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 24px); } /* separator wchodzi w dolny oddech sekcji, żeby przerwa nie urosła dwukrotnie */ section + .qr-rule { margin-top: -40px; } /* między dwoma kolorowymi pasami potrzebuje własnego oddechu, inaczej wygląda jak szew */ .band-statement + .qr-rule { margin: 24px 0; } /* ── przewijający się pas zastosowań ── */ .band-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 19px 0; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; } .marquee-set { display: flex; gap: 44px; padding-right: 44px; } .mq { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink-soft); } .mq svg { width: 17px; height: 17px; flex: none; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes marquee { to { transform: translateX(-50%); } } /* ── ścieżka gracza: pas z węzłami ── */ .band-path { background: radial-gradient(ellipse 40% 70% at 88% 50%, rgba(206,127,180,0.16), transparent 66%), linear-gradient(180deg, var(--bg) 0%, var(--violet-tint) 48%, var(--bg) 100%); padding: 76px 0 84px; } .questline { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .questline::before { content: ''; position: absolute; left: 9%; right: 9%; top: 37px; border-top: 2px dashed var(--violet-line); } .qnode { position: relative; z-index: 1; width: 19%; display: flex; } /* cały węzeł jest przyciskiem — powierzchnia kliknięcia obejmuje ikonę i podpis */ .qbtn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 6px 4px 10px; background: none; border: 0; border-radius: 16px; font-family: inherit; text-align: center; cursor: pointer; transition: transform 0.18s var(--ease-out); } .qdot { width: 74px; height: 74px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 28px -18px rgba(68,49,125,0.6); transition: transform 0.18s var(--ease-out), box-shadow 0.22s, border-color 0.2s, background 0.2s; } /* ostatni węzeł ścieżki — meta gry — dostaje różowy akcent rombu */ .qnode:last-child .qdot { border-color: var(--pink-line); box-shadow: 0 14px 30px -16px rgba(206,127,180,0.8); } .qnode:last-child .qdot svg { color: var(--pink-deep); } .qdot svg { width: 30px; height: 30px; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color 0.2s; } .qlabel { font-size: 14.5px; font-weight: 600; color: var(--ink); font-family: var(--font-display); letter-spacing: -0.015em; } .qmore { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--violet); opacity: 0.62; transition: opacity 0.2s, color 0.2s; } .qbtn:hover .qdot, .qbtn:focus-visible .qdot { transform: translateY(-4px); border-color: var(--pink-line); box-shadow: 0 20px 36px -18px rgba(52,38,95,0.5), 0 8px 22px -16px rgba(206,127,180,0.6); } .qbtn:hover .qmore { opacity: 1; } .qbtn[aria-expanded="true"] .qdot { background: var(--grad-mark); border-color: transparent; transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(52,38,95,0.75); } .qbtn[aria-expanded="true"] .qdot svg { color: #fff; } .qnode:last-child .qbtn[aria-expanded="true"] .qdot { background: linear-gradient(135deg, #7c5fa5 0%, #ce7fb4 100%); } .qbtn[aria-expanded="true"] .qmore { opacity: 1; color: var(--pink-deep); } /* ── panele opisu ── */ .qpanels { margin-top: 26px; } .qpanel { border: 1px solid var(--violet-line); border-radius: var(--radius); background: var(--surface); padding: 26px 28px; box-shadow: 0 24px 48px -34px rgba(52,38,95,0.5); } .qpanel[hidden] { display: none; } .qpanel h3 { font-size: 19px; margin-bottom: 18px; } .qcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .qcol { padding-left: 15px; border-left: 3px solid var(--violet-line); } .qcol-host { border-left-color: var(--pink-line); } .qtag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--violet); margin-bottom: 7px; } .qcol-host .qtag { color: var(--pink-deep); } .qcol p { font-size: 14.8px; color: var(--ink-soft); text-wrap: pretty; } /* rozwinięcie wjeżdża, zamiast wyskakiwać */ @keyframes qpanel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .qpanel { animation: qpanel-in 0.28s var(--ease-out); } .path-head { max-width: 620px; margin: 0 auto 40px; text-align: center; } .path-head h2 { font-size: clamp(25px, 3.2vw, 34px); } .path-head p { margin-top: 13px; font-size: 16px; color: var(--ink-soft); text-wrap: pretty; } .path-head p b { color: var(--ink); font-weight: 600; } /* ── pas z deklaracją ── */ .band-statement { overflow: hidden; padding: 84px 0; color: #fff; background: radial-gradient(ellipse 46% 56% at 92% 96%, rgba(206,127,180,0.42), transparent 62%), radial-gradient(ellipse 60% 70% at 74% 10%, rgba(143,120,191,0.5), transparent 62%), linear-gradient(140deg, var(--indigo-deep) 0%, var(--violet-deep) 100%); } .band-statement::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%); pointer-events: none; } .st-ico { position: absolute; color: #fff; opacity: 0.09; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .statement { position: relative; text-align: center; } .statement h2 { color: #fff; font-size: clamp(28px, 4.4vw, 46px); } .statement h2 em { font-style: normal; color: var(--pink-lift); } .statement p { margin: 18px auto 0; max-width: 58ch; font-size: 17.5px; color: rgba(255,255,255,0.8); text-wrap: pretty; } .statement .hero-cta { justify-content: center; margin-top: 30px; } /* ── pas „platforma rośnie" ── */ .band-roadmap { background: linear-gradient(120deg, var(--violet-tint) 0%, var(--pink-tint) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 66px 0; } .rmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .rm { padding: 22px 18px; border-radius: var(--radius-sm); border: 1px dashed var(--violet-line); background: var(--surface); } .rm svg { width: 20px; height: 20px; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; } .rm b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.02em; margin-bottom: 5px; } .rm span { font-size: 13px; color: var(--ink-mute); line-height: 1.5; } .rmap-foot { margin-top: 26px; text-align: center; font-size: 15.5px; color: var(--ink-soft); max-width: 62ch; margin-inline: auto; } /* ═══════════ gotowe wystawy tematyczne ═══════════ */ .expo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .expo > * { min-width: 0; } .expo h2 { font-size: clamp(27px, 3.6vw, 38px); } .expo .lead { margin-top: 16px; font-size: 17px; color: var(--ink-soft); text-wrap: pretty; } .expo-list { list-style: none; display: grid; gap: 13px; margin-top: 24px; } .expo-list li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-soft); align-items: flex-start; } .expo-list svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--violet); } .expo-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); } .chip svg { width: 14px; height: 14px; color: var(--violet); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* makieta plansz wystawy — rysunek poglądowy, nie zrzut realnej wystawy */ .boards { display: flex; justify-content: center; align-items: flex-end; gap: 16px; } .board { position: relative; width: 30%; max-width: 190px; aspect-ratio: 1 / 1.414; padding: 13px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 26px 50px -28px rgba(52,38,95,0.6); display: flex; flex-direction: column; gap: 8px; } .board:nth-child(1) { transform: rotate(-4deg) translateY(10px); } .board:nth-child(2) { transform: translateY(-16px); z-index: 2; } .board:nth-child(3) { transform: rotate(4deg) translateY(10px); } .b-head { height: 7px; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--indigo-deep), var(--violet) 55%, var(--pink)); } .b-title { height: 5px; border-radius: 3px; background: #dbd5e7; } .b-title.short { width: 46%; } .b-art { flex: 1; border-radius: 5px; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5), transparent 60%), linear-gradient(150deg, var(--violet-tint), #e0d6ee 62%, #ecd7e6); position: relative; overflow: hidden; } .b-art::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(68,49,125,0.15) 1px, transparent 1px); background-size: 9px 9px; } .b-lines { display: grid; gap: 4px; } .b-line { height: 3px; border-radius: 2px; background: #e6e1ef; } .b-line.w80 { width: 80%; } .b-line.w60 { width: 60%; } .b-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .b-qr { width: 22px; height: 22px; flex: none; opacity: 0.85; } .b-badge { font-family: var(--font-display); font-size: 7.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink-deep); } .boards-note { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--ink-mute); } /* ── plakietka „w rozwoju" ── */ .wip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(120deg, var(--violet-tint) 0%, var(--pink-tint) 100%); border: 1px solid var(--pink-line); color: var(--indigo); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; } .wip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); } .sec-head .wip { margin-top: 16px; } /* „…i kolejne w drodze" zajmuje cały rząd siatki — inaczej wisiałby samotnie w rzędzie z czterema pustymi polami. */ .task.next { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border-style: dashed; border-color: var(--violet-line); background: transparent; padding: 18px 22px; } .task.next svg { color: var(--violet); margin: 0; flex: none; } .task.next b { margin-bottom: 0; white-space: nowrap; } .task.next span { display: inline; } /* ═══════════ ruch ═══════════ */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ═══════════════════════════════════════════════════════ WEJŚCIA PRZY PRZEWIJANIU Ukrywanie startowe wisi WYŁĄCZNIE pod .js-anim — klasą, którą dokłada inline'owy skrypt w . Bez JS, w druku i dla robotów nic się nie chowa: strona sprzedażowa musi być czytelna zawsze. To ta sama zasada, co wcześniej — zmienia się tylko to, że przy działającym JS treść wchodzi, zamiast po prostu być. Krzywa i dystans są celowo krótkie (14 px / 0,5 s): ruch ma dać wrażenie „strona żyje", a nie kazać czekać na tekst. ═══════════════════════════════════════════════════════ */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --rise-dur: 0.5s; } .js-anim .rise { opacity: 0; transform: translateY(14px); transition: opacity var(--rise-dur) var(--ease-out), transform var(--rise-dur) var(--ease-out); will-change: opacity, transform; } .js-anim .rise.in { opacity: 1; transform: none; } /* po wejściu zdejmujemy warstwę kompozycji — nie ma po co trzymać jej do końca sesji */ .js-anim .rise.done { will-change: auto; } /* ── siatki wchodzą kaflami, nie blokiem ── Kontener z .rise sam się nie rusza (nadpisanie niżej), animują się dzieci z narastającym opóźnieniem. Bez zmian w znaczniku — selektory celują w istniejące klasy siatek. */ .js-anim .steps > *, .js-anim .feats > *, .js-anim .tasks > *, .js-anim .gallery > *, .js-anim .segs > *, .js-anim .plans > *, .js-anim .rmap > *, .js-anim .compare > *, .js-anim .facts > *, .js-anim .player-list > li, .js-anim .expo-list > li, .js-anim .expo-chips > *, .js-anim .questline > .qnode, .js-anim .faq > details, .js-anim .boards > .board { opacity: 0; transform: translateY(12px); transition: opacity 0.46s var(--ease-out), transform 0.46s var(--ease-out); } .js-anim .steps.in > *, .js-anim .feats.in > *, .js-anim .tasks.in > *, .js-anim .gallery.in > *, .js-anim .segs.in > *, .js-anim .plans.in > *, .js-anim .rmap.in > *, .js-anim .compare.in > *, .js-anim .facts.in > *, .js-anim .player-list.in > li, .js-anim .expo-list.in > li, .js-anim .expo-chips.in > *, .js-anim .questline.in > .qnode, .js-anim .faq.in > details, .js-anim .boards.in > .board { opacity: 1; transform: none; } /* plansze wystawy mają własne przekrzywienie — nie kasujemy go wejściem */ .js-anim .boards > .board { transform: translateY(12px) rotate(0deg); } .js-anim .boards.in > .board:nth-child(1) { transform: rotate(-4deg) translateY(10px); } .js-anim .boards.in > .board:nth-child(2) { transform: translateY(-16px); } .js-anim .boards.in > .board:nth-child(3) { transform: rotate(4deg) translateY(10px); } /* kontener siatki nie dubluje ruchu swoich dzieci */ .js-anim .rise.steps, .js-anim .rise.feats, .js-anim .rise.tasks, .js-anim .rise.gallery, .js-anim .rise.segs, .js-anim .rise.plans, .js-anim .rise.rmap, .js-anim .rise.compare, .js-anim .rise.facts, .js-anim .rise.player-list, .js-anim .rise.faq, .js-anim .rise.phones { opacity: 1; transform: none; } /* stagger — 55 ms na kafel, ucięty na dziesiątym, żeby długie siatki (10 typów zadań) nie kończyły wejścia po sekundzie */ .js-anim .in > *:nth-child(1) { transition-delay: 0s; } .js-anim .in > *:nth-child(2) { transition-delay: 0.055s; } .js-anim .in > *:nth-child(3) { transition-delay: 0.11s; } .js-anim .in > *:nth-child(4) { transition-delay: 0.165s; } .js-anim .in > *:nth-child(5) { transition-delay: 0.22s; } .js-anim .in > *:nth-child(6) { transition-delay: 0.275s; } .js-anim .in > *:nth-child(7) { transition-delay: 0.33s; } .js-anim .in > *:nth-child(8) { transition-delay: 0.385s; } .js-anim .in > *:nth-child(9) { transition-delay: 0.44s; } .js-anim .in > *:nth-child(n+10) { transition-delay: 0.495s; } /* numer kroku „dochodzi" do rozmiaru — mikro-akcent na module znaku */ .js-anim .steps > * .step-n { transform: scale(0.86); transition: transform 0.42s var(--ease-out) 0.06s; } .js-anim .steps.in > * .step-n { transform: none; } /* ── ścieżka gracza: linia rysuje się od środka ── */ .js-anim .questline::before { transform: scaleX(0); transition: transform 0.7s var(--ease-out) 0.1s; } .js-anim .questline.in::before { transform: scaleX(1); } /* ── telefon w hero delikatnie unosi się w miejscu ── */ .phone { animation: floaty 6s ease-in-out infinite; } /* ── stany interakcji ── */ .step, .seg, .gal, .task, .rm, .plan, .chip { transition: transform 0.18s var(--ease-out), box-shadow 0.22s, border-color 0.2s; } .step:hover, .seg:hover, .rm:hover { transform: translateY(-3px); border-color: var(--violet-line); box-shadow: 0 20px 40px -28px rgba(52,38,95,0.45); } .gal:hover { transform: translateY(-4px); box-shadow: 0 34px 62px -34px rgba(52,38,95,0.6), 0 10px 30px -22px rgba(206,127,180,0.5); } .gal img { transition: transform 0.5s var(--ease-out); } .gal:hover img { transform: scale(1.025); } .task:not(.next):hover { transform: translateY(-2px); border-color: var(--pink-line); } .plan:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -34px rgba(52,38,95,0.5); } .chip:hover { transform: translateY(-2px); border-color: var(--pink-line); color: var(--ink); } .btn:active { transform: translateY(1px); } /* widoczny fokus klawiaturowy — hover bez tego byłby regresem dostępności */ a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; } /* ── FAQ: treść rozwija się, zamiast wyskakiwać ── */ @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } details[open] > p { animation: faq-in 0.3s var(--ease-out); } /* ── liczniki (JS podmienia tekst; tu tylko stabilizacja szerokości) ── */ .fact b, .price b { font-variant-numeric: tabular-nums; } /* Bez JS-u, w druku i przy „ogranicz ruch" nic się nie chowa i nic nie jedzie. */ @media print { .js-anim .rise, .js-anim .in > *, .js-anim [class] > * { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dot { animation: none; } .marquee-track { animation: none; } .phone { animation: none; } .bgi { animation: none; } .btn, .feat { transition: none; } .js-anim .rise, .js-anim .steps > *, .js-anim .feats > *, .js-anim .tasks > *, .js-anim .gallery > *, .js-anim .segs > *, .js-anim .plans > *, .js-anim .rmap > *, .js-anim .compare > *, .js-anim .facts > *, .js-anim .player-list > li, .js-anim .expo-list > li, .js-anim .expo-chips > *, .js-anim .questline > .qnode, .js-anim .faq > details, .js-anim .boards > .board, .js-anim .questline::before, .js-anim .steps > * .step-n { opacity: 1 !important; transition: none !important; } .js-anim .rise, .js-anim .in > * { transform: none !important; } .js-anim .boards > .board:nth-child(1) { transform: rotate(-4deg) translateY(10px) !important; } .js-anim .boards > .board:nth-child(2) { transform: translateY(-16px) !important; } .js-anim .boards > .board:nth-child(3) { transform: rotate(4deg) translateY(10px) !important; } .js-anim .questline::before { transform: scaleX(1) !important; } details[open] > p { animation: none; } .step:hover, .seg:hover, .rm:hover, .gal:hover, .task:hover, .plan:hover, .chip:hover, .gal:hover img, .btn:active { transform: none; } } /* ═══════════ responsywność ═══════════ */ /* tabela porównania zaczyna wystawać poza ekran — podpowiadamy przewijanie */ @media (max-width: 940px) { .cmp-hint { display: block; } } @media (max-width: 1000px) { .hero-grid, .player-grid { grid-template-columns: 1fr; gap: 44px; } .shot-combo { margin-right: 0; } .phone { right: 0; bottom: 0; } .steps, .feats, .segs { grid-template-columns: repeat(2, 1fr); } .tasks { grid-template-columns: repeat(3, 1fr); } .rmap { grid-template-columns: repeat(3, 1fr); } .expo { grid-template-columns: 1fr; gap: 44px; } .plans { grid-template-columns: repeat(2, 1fr); gap: 22px; } .nav { display: none; } } @media (max-width: 640px) { section { padding: 60px 0; } .sec-dark { padding: 60px 0; } .hero { padding: 44px 0 60px; } .wrap { padding: 0 18px; } .compare, .steps, .feats, .segs, .gallery, .plans { grid-template-columns: 1fr; } .tasks { grid-template-columns: repeat(2, 1fr); } .shot-combo { padding-bottom: 0; } .phone { position: static; width: 150px; margin: -34px auto 0; } .phones .ph { width: 44vw; max-width: 170px; } .phones .ph.raise { margin-bottom: 24px; } .rmap { grid-template-columns: repeat(2, 1fr); } .band-statement, .band-roadmap { padding: 52px 0; } .band-path { padding: 54px 0 60px; } .questline { flex-wrap: wrap; justify-content: center; gap: 18px 10px; } .questline::before { display: none; } .qnode { width: 45%; } .qdot { width: 62px; height: 62px; border-radius: 15px; } .qdot svg { width: 26px; height: 26px; } .qlabel { font-size: 13.5px; } .qmore { display: none; } /* na dotyku podpowiedź jest zbędna — kafel sam zaprasza */ .path-head { margin-bottom: 30px; } .qcols { grid-template-columns: 1fr; gap: 18px; } .qpanel { padding: 22px 20px; } .cta-final { padding: 42px 24px; border-radius: 26px; } .btn { width: 100%; } .hero-cta .btn, .cta-final .btn { width: 100%; } /* Znak v2 jest szerszy od v1 (proporcja 4.4:1 zamiast 3.7:1), więc na wąskich ekranach pasek dostaje mniejsze logo i ciaśniejsze przyciski — inaczej „Umów demo" wychodziłoby poza krawędź. */ .logo { height: 25px; } .topbar .wrap { gap: 12px; } .top-actions { gap: 8px; } .top-actions .btn { width: auto; padding: 9px 14px; font-size: 13.5px; } /* na wąskim ekranie zostaje rzadsza warstwa ikon — mniej szumu za tekstem */ .bgi { width: calc(var(--s) * 0.62); height: calc(var(--s) * 0.62); opacity: 0.055; } .bgi.hide-sm { display: none; } .facts { gap: 10px 20px; } .cmp-toggle { width: 100%; } .cmp-table { min-width: 700px; font-size: 13.5px; } .cmp-table tbody th[scope="row"] { min-width: 190px; padding: 12px 14px; } .cmp-table tbody td { padding: 12px 12px; } .cmp-table thead th { padding: 18px 12px 14px; } .cmp-table tfoot .btn { font-size: 13px; padding: 9px 12px; } } /* najwęższe telefony (iPhone SE i podobne) — pasek górny musi zmieścić logo i dwa przyciski bez poziomego przewijania */ @media (max-width: 380px) { .logo { height: 23px; } .top-actions { gap: 6px; } .top-actions .btn { padding: 8px 12px; font-size: 13px; } } /* ── pasek zgód (był osobnym