/* Dostepny roz POD BIALYM TEKSTEM (przyciski/badge). #ff005c z biela = 3.88:1 (ponizej WCAG AA); #e60052 = 4.68:1, wizualnie prawie identyczny. Roz jako TEKST zostaje #ff005c (na ciemnym tle 5.34:1). Light mode: #e8004f (juz uzywany). */ :root{--highlight-btn:#e60052} body.light-mode{--highlight-btn:#e8004f} /* Chip numeru sekcji (_0_informacje-2) w dark mode ma JASNE tlo (background:var(--white)), a rozowy tekst #ff005c dawal na nim 2.98:1. #c2003f = 4.79:1. Tylko dark — light mode ma wlasny override (kolor #e8004f na przezroczystym tle). */ body:not(.light-mode) ._0_informacje-2{color:#c2003f !important} /* Style strony głównej — wyniesione z index.html (2026-07-11). Powód: 114 KB CSS w HTML nie było cache'owane i blokowało parsowanie przy każdej wizycie. Kolejność bloków = kolejność z dokumentu — NIE zmieniać, kaskada od niej zależy. */ /* ── kontener ── */ #topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1800; background-color: var(--black); } /* ── rząd linków ── */ #topnav-links { display: flex; width: 100%; border-top: 1px solid rgba(255,255,255,0.14); } .tnl { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 4px 16px; text-decoration: none; text-align: center; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,0.72); transition: color .2s, background-color .2s; white-space: nowrap; } .tnl:hover { color: #000; background-color: #fff; } .tnl.is-active { color: #fff; font-weight: 600; } /* ── pasek postępu ── */ #topnav-track { position: relative; width: 100%; height: 1px; background: rgba(255,255,255,0.12); overflow: visible; } #topnav-bar { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--highlight-btn, #e60052); transform: scaleX(0); transform-origin: left center; overflow: visible; will-change: transform; } /* etykieta aktywnej sekcji — unosi się nad paskiem */ #topnav-label { position: absolute; top: -22px; left: 0; transform: translateX(-50%); background: var(--highlight-btn, #e60052); color: #fff; font-family: "JetBrains Mono", monospace; font-size: 0.44rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 7px; white-space: nowrap; line-height: 1.5; pointer-events: none; user-select: none; transition: left .05s linear; } #topnav-label::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 3px solid transparent; border-top-color: var(--highlight); } /* ── light mode ── */ body.light-mode #topnav { background-color: rgba(240,237,232,.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.08); } body.light-mode #topnav-links { border-top-color: rgba(0,0,0,.12); } body.light-mode .tnl { color: #3a3535; } body.light-mode .tnl.is-active { color: var(--highlight); font-weight: 600; } body.light-mode .tnl:hover { color: var(--highlight); background: rgba(232,0,79,.06); } body.light-mode #topnav-track { background: rgba(0,0,0,.09); } body.light-mode #topnav-label { background: var(--highlight-btn, #e60052); color: #fff; } body.light-mode #topnav-label::after { border-top-color: var(--highlight); } /* ── mobile — ukryj topnav ── */ @media (max-width: 991px) { #topnav { display: none; } } /* ===== Elementy ozdobne: plakietka statusu + pasek „miarki" ===== */ .ww-status-wrap{display:flex;justify-content:center;margin-top:.35rem} .ww-status-pill{ display:inline-flex;align-items:center;gap:.6rem; padding:.45rem .95rem; border:1px solid var(--bg-border,rgba(255,255,255,.14)); background:rgba(255,255,255,.025); font-family:var(--font-family-1,'JetBrains Mono',monospace); font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--text-body,#d5d1d1);white-space:nowrap; } .ww-status-pill .dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#2bd18a;box-shadow:0 0 0 3px rgba(43,209,138,.16)} @media (prefers-reduced-motion:no-preference){ .ww-status-pill .dot{animation:wwPulse 2.6s ease-in-out infinite} @keyframes wwPulse{0%,100%{box-shadow:0 0 0 3px rgba(43,209,138,.18)}50%{box-shadow:0 0 0 6px rgba(43,209,138,.05)}} } body.light-mode .ww-status-pill{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.02);color:#302e2e} /* Pasek „miarki" mieszka teraz we wspólnym arkuszu miarki (link w ) */ /* Hero: ciaśniejszy pion — elementy bliżej siebie od góry do dołu */ .hero-content-div{grid-row-gap:1rem;row-gap:1rem} .div-block-103{margin-top:.75rem} @media (max-width:600px){ .ww-status-pill{font-size:.6rem;letter-spacing:.09em;white-space:normal;text-align:center} } /* ===== PRICING STYLES ===== */ .pricing-header { margin-bottom: 2.5rem; } .pricing-desc { font-family: var(--font-family-1); font-size: var(--fs-sm); color: var(--text-body); max-width: 58ch; line-height: 1.75; margin: 0.75rem 0 1.75rem; } /* Custom tabs */ .pricing-tabs-nav { display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid var(--grey-light-1); margin-bottom: 2.5rem; } .pricing-tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: var(--font-family-1); font-size: var(--fs-xs); padding: 0.6rem 1rem 0.65rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.07em; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .pricing-tab-btn:hover { color: var(--white); } .pricing-tab-btn.is-active { color: var(--highlight); border-bottom-color: var(--highlight); } .pricing-tab-count { background: var(--grey-light-1); color: var(--text-muted); font-size: 0.6rem; padding: 0.1rem 0.4rem; } .pricing-tab-btn.is-active .pricing-tab-count { background: var(--highlight-btn, #e60052); color: #fff; } .pricing-pane { display: none; } .pricing-pane.is-active { display: block; } /* Grid */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; margin-bottom: 3rem; } /* Card */ .pc { border: 1px solid var(--grey-light-1); background: #080808; display: flex; flex-direction: column; padding: 1.5rem; position: relative; transition: border-color 0.25s; } .pc:hover { border-color: #252525; } .pc.pc-featured { border-color: var(--highlight); } /* Featured badge */ .pc-badge { position: absolute; top: -1px; right: 1.25rem; background: var(--highlight-btn, #e60052); color: #fff; font-family: var(--font-family-1); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.55rem; } /* Tags */ .pc-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.65rem; } .pc-tag { font-family: var(--font-family-1); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border: 1px solid var(--grey-light-1); color: var(--text-5); } /* pełna alfa zamiast .85 — przy .85 plakietka miała 3,91:1 (próg 4,5). Podnosimy krycie, nie rozjaśniamy odcienia: marka zostaje dokładnie #ff005c. */ .pc-tag.tech { border-color: rgba(255,0,92,.35); color: #ff005c; } /* Name & subtitle */ .pc-name { font-family: var(--font-family-1); font-size: var(--fs-lg); color: var(--text-1); font-weight: 700; line-height: 1.2; margin-bottom: 0.3rem; } .pc-subtitle { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; } /* Price block */ .pc-price-block { margin: 1.1rem 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--grey-light-1); } .pc-price { font-family: var(--font-family-1); font-size: var(--fs-xl); color: var(--text-1); font-weight: 700; line-height: 1; margin-bottom: 0.35rem; } .pc-price sup { font-size: var(--fs-sm); font-weight: 400; } .pc-price-row { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); flex-wrap: wrap; } .pc-discount { background: rgba(255,0,92,.1); border: 1px solid rgba(255,0,92,.3); color: var(--highlight); font-size: 0.58rem; padding: 0.1rem 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; } .pc-time { font-family: var(--font-family-1); font-size: 0.63rem; color: var(--text-5); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: .35rem; } .pc-time svg, .pc-hours-badge svg { width: 11px; height: 11px; flex-shrink: 0; stroke-width: 1.6; color: var(--highlight, #ff005c); } .pricing-calc-title svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.6; color: var(--highlight, #ff005c); margin-right: .35rem; vertical-align: -2px; } /* Feature list */ .pc-features { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.45rem; } .pc-feature { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-body); line-height: 1.5; } .pc-feature img { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; } .pc-feature.muted { color: var(--text-muted); } /* Rozwijany opis pakietu. Natywny

, a nie własny JS: działa bez skryptu, jest dostępny z klawiatury i nie wymaga inline'owego onclick (CSP na tej stronie jest EGZEKWOWANA). */ .pc-more { margin: 0 0 1.25rem; border-top: 1px solid var(--grey-light-1); } .pc-more > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0 0.75rem; font-family: var(--font-family-1); font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; transition: color 0.2s; } .pc-more > summary::-webkit-details-marker { display: none; } .pc-more > summary:hover { color: var(--text-1); } .pc-more > summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; } .pc-more-ico { flex-shrink: 0; color: var(--highlight); font-size: 1.05rem; line-height: 1; transition: transform 0.25s; } .pc-more[open] > summary { color: var(--text-1); } .pc-more[open] .pc-more-ico { transform: rotate(45deg); } .pc-more-body { padding-bottom: 0.35rem; display: flex; flex-direction: column; gap: 0.9rem; } .pc-grp h5 { font-family: var(--font-family-1); font-size: 0.63rem; font-weight: 700; color: var(--highlight); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.4rem; } .pc-grp ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .pc-grp li { position: relative; padding-left: 0.85rem; font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-body); line-height: 1.55; } .pc-grp li::before { content: "·"; position: absolute; left: 0.15rem; color: var(--highlight); } /* Pozycja, za którą klient w tym pakiecie i tak dopłaci — musi się odróżniać wizualnie. */ .pc-grp li.pc-li-paid { color: var(--text-muted); font-style: italic; } .pc-grp li.pc-li-paid::before { content: "+"; color: var(--text-muted); } /* Notka pod siatką pakietów (wariant bez abonamentu) */ .pc-note { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7; border-left: 2px solid var(--highlight); padding: 0.15rem 0 0.15rem 0.9rem; margin: -1.75rem 0 3rem; } .pc-note a { color: var(--text-2); text-decoration: underline; } .pc-note a:hover { color: var(--highlight); } /* CTA */ .pc-cta { margin-top: auto; } .pc-cta-sub { font-family: var(--font-family-1); font-size: 0.6rem; color: var(--text-muted); text-align: center; margin-top: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; } .pc-cta-sub a { color: inherit; text-decoration: underline; } /* Przycisk kalkulatora na kartach cennika */ .pc-kalc-btn { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.55rem; padding:.55rem .75rem; border:1px solid rgba(255,255,255,.1); background:transparent; font-family:var(--font-family-1); font-size:.7rem; color:var(--text-muted); letter-spacing:.05em; text-decoration:none; transition:border-color .18s, color .18s; } .pc-kalc-btn:hover { border-color:var(--highlight); color:var(--highlight); } /* FAQ */ .pricing-faq { border-top: 1px solid var(--grey-light-1); padding-top: 2rem; margin-top: 0.5rem; } .pricing-faq-label { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } #Cena .faq-item { border-bottom: 1px solid var(--grey-light-1); } #Cena .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; cursor: pointer; font-family: var(--font-family-1); font-size: var(--fs-sm); color: var(--text-2); background: none; border: none; width: 100%; text-align: left; transition: color 0.2s; } #Cena .faq-q:hover { color: var(--white); } #Cena .faq-icon { flex-shrink: 0; color: var(--highlight); font-size: 1.1rem; transition: transform 0.25s; } #Cena .faq-item.open .faq-icon { transform: rotate(45deg); } #Cena .faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height 0.32s ease; } #Cena .faq-item.open .faq-a { max-height: 600px; } #Cena .faq-a-body { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-body); line-height: 1.75; padding-bottom: 1rem; } /* Bottom CTA */ .pricing-cta-bottom { border-top: 1px solid var(--grey-light-1); padding-top: 2rem; margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .pricing-cta-bottom h3 { font-family: var(--font-family-1); font-size: var(--fs-md); color: var(--text-1); margin-bottom: 0.3rem; } .pricing-cta-bottom p { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); } .pricing-cta-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 767px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-cta-bottom { flex-direction: column; align-items: flex-start; } .pricing-tab-btn { font-size: 0.6rem; padding: 0.5rem 0.65rem 0.55rem; } /* Tabs nav — poziomy scroll zamiast zawijania */ .pricing-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 1rem; padding-bottom: 0; } .pricing-tabs-nav::-webkit-scrollbar { display: none; } } /* ===== KALKULATOR STAWKI GODZINOWEJ ===== */ .pricing-calc { border: 1px solid var(--grey-light-1); background: rgba(255,255,255,.025); padding: 1.5rem 1.75rem; margin-bottom: 2.25rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .pricing-calc-left { min-width: 0; } .pricing-calc-title { font-family: var(--font-family-1); font-size: 0.6rem; color: var(--highlight); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.85rem; } .pricing-calc-types { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .calc-type-btn { display: flex; flex-direction: column; align-items: flex-start; padding: 0.55rem 1rem; cursor: pointer; background: transparent; border: 1px solid var(--grey-light-1); font-family: var(--font-family-1); color: var(--text-muted); transition: border-color .2s, color .2s; text-align: left; } .calc-type-btn:hover { border-color: rgba(255,0,92,.4); } .calc-type-btn.is-active { border-color: var(--highlight); color: var(--text-1); } .calc-type-name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; } .calc-type-rate { font-size: 0.6rem; color: var(--text-5); margin-top: 0.1rem; } .calc-type-btn.is-active .calc-type-rate { color: var(--highlight); } .pricing-calc-hours-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .pricing-calc-hours-label { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } .pricing-calc-hours-label strong { color: var(--text-1); font-size: var(--fs-sm); } .pricing-calc-slider { flex: 1; min-width: 140px; height: 3px; accent-color: var(--highlight); cursor: pointer; } .pricing-calc-hours-input { width: 64px; padding: 0.3rem 0.5rem; background: transparent; border: 1px solid var(--grey-light-1); color: var(--text-1); font-family: var(--font-family-1); font-size: var(--fs-sm); text-align: center; transition: border-color .2s; } .pricing-calc-hours-input:focus { outline: none; border-color: var(--highlight); } .pricing-calc-result { border-left: 1px solid var(--grey-light-1); padding-left: 1.75rem; min-width: 210px; display: flex; flex-direction: column; gap: 0.3rem; } .calc-result-label { font-family: var(--font-family-1); font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .calc-result-netto { font-family: var(--font-family-1); font-size: 1.65rem; font-weight: 700; color: var(--highlight); line-height: 1.1; margin-bottom: 0.15rem; } .calc-result-brutto { font-family: var(--font-family-1); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; } .calc-result-formula { font-family: var(--font-family-1); font-size: 0.6rem; color: var(--text-5); margin-top: 0.45rem; border-top: 1px solid var(--grey-light-1); padding-top: 0.5rem; line-height: 1.6; } /* Hours estimate badge on pricing cards */ .pc-hours-badge { font-family: var(--font-family-1); font-size: 0.6rem; color: var(--text-5); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; } /* zakres godzin („15–40 h") przy .75 dawał 3,22:1 — pełna alfa, ten sam odcień */ .pc-hours-badge span { color: #ff005c; font-weight: 600; } /* Light mode overrides */ body.light-mode .pricing-calc { background: rgba(0,0,0,.02); } @media (max-width: 900px) { .pricing-calc { grid-template-columns: 1fr; gap: 1.25rem; } .pricing-calc-result { border-left: none; border-top: 1px solid var(--grey-light-1); padding-left: 0; padding-top: 1.1rem; min-width: 0; } .pricing-calc-slider { min-width: 0; flex-basis: 100%; } } /* Header */ .realizacje-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; } .pricing-aside{flex:0 0 300px;max-width:340px;align-self:flex-start;border:1px solid var(--grey-light-1);background:#080808;padding:1.4rem 1.5rem} .pricing-aside-h{font-family:var(--font-family-1);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--highlight);margin-bottom:.9rem} .pricing-aside-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;font-size:var(--fs-sm);color:var(--text-body);line-height:1.45} .pricing-aside-list li{display:flex;gap:.55rem} .pricing-aside-list li span{color:var(--highlight);font-weight:700} .pricing-aside-foot{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--grey-light-1);font-size:var(--fs-sm);color:var(--text-body);line-height:1.6} .pricing-aside-foot b{color:var(--white)} .pricing-aside-foot a{color:var(--highlight);text-decoration:underline} @media(max-width:900px){.pricing-aside{flex:1 1 100%;max-width:none}} /* .pricing-aside jest ciemna karta w DARK mode; w LIGHT mode staje sie JASNA karta z ciemnym tekstem (pelny zestaw regul w ww-interactions.css). */ body.light-mode .pricing-aside{background:#ffffff;border-color:#dcd8d1} body.light-mode .pricing-aside-list, body.light-mode .pricing-aside-foot{color:#2a2828} body.light-mode .pricing-aside-foot b{color:#0a0909} body.light-mode .pricing-aside-h, body.light-mode .pricing-aside-list li span, body.light-mode .pricing-aside-foot a{color:#b3003a} .realizacje-desc { color: var(--text-body); font-size: var(--fs-sm); max-width: 52ch; line-height: 1.75; margin: 0.75rem 0 1.5rem; font-family: var(--font-family-1); } .realizacje-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .realizacje-stat { display: flex; flex-direction: column; gap: 0.2rem; } .realizacje-stat-num { font-size: var(--fs-2xl); font-family: var(--font-family-1); color: var(--highlight); font-weight: 700; line-height: 1; } .realizacje-stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-family-1); } .realizacje-stat-divider { width: 1px; height: 2rem; background: var(--grey-light-1); flex-shrink: 0; } /* Filter buttons */ .realizacje-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; } .filter-btn { background: transparent; border: 1px solid var(--grey-light-1); color: var(--text-muted); font-family: var(--font-family-1); font-size: var(--fs-xs); padding: 0.375rem 0.875rem; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; text-transform: uppercase; letter-spacing: 0.06em; } .filter-btn:hover { border-color: var(--highlight); color: var(--white); } .filter-btn.is-active { background: var(--highlight-btn, #e60052); border-color: var(--highlight); color: #fff; } /* View toggle button */ .view-toggle-btn { width: auto !important; position: relative; flex-shrink: 0; align-self: flex-start; } .view-toggle-btn .button-inner { gap: 0.5rem; } .view-toggle-btn .w-embed svg { display: block; transition: color 0.2s; } /* Project tags */ .project-tags { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .project-tag { font-size: 0.6rem; font-family: var(--font-family-1); text-transform: uppercase; letter-spacing: 0.07em; padding: 0.15rem 0.45rem; border: 1px solid var(--grey-light-1); color: var(--text-5); line-height: 1.6; } .project-tag.tag-cat { border-color: var(--highlight); color: var(--highlight); } /* Project description */ .project-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.65; margin-top: 0.4rem; font-family: var(--font-family-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Image hover overlay */ .post-img-wrapper { position: relative; overflow: hidden; } .post-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,2,2,0.88) 0%, rgba(2,2,2,0.1) 55%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1rem; pointer-events: none; } .post-img-overlay-label { font-size: 0.65rem; color: #fff; font-family: var(--font-family-1); text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: center; gap: 0.4rem; } .post-img-overlay-label::after { content: '→'; color: var(--highlight); font-size: 0.9rem; } .posts_list-item.grid-view:hover .post-img-overlay { opacity: 1; } .posts_list-item.grid-view .posts_list-item_img { transition: transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1); } .posts_list-item.grid-view:hover .posts_list-item_img { transform: scale(1.04); } /* Filtered-out */ .posts_list-item.rl-hidden { display: none !important; } /* Extra items — hidden beyond first 6 */ .posts_list-item.rl-extra { display: none !important; } /* Show-more button */ .rl-show-more-wrap { display: flex; justify-content: center; margin-top: 2rem; } @media (max-width: 991px) { .rl-show-more-wrap { display: none !important; } /* Na mobile slider pokazuje wszystkie projekty — rl-extra nie obowiązuje */ .posts_list-item.rl-extra { display: block !important; } } #rl-show-more { background: transparent; border: 1px solid var(--grey-light-1); color: var(--text-muted); font-family: var(--font-family-1); font-size: var(--fs-xs); padding: 0.6rem 1.75rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.5rem; } #rl-show-more:hover { border-color: var(--highlight); color: var(--white); } #rl-show-more svg { transition: transform 0.25s; } #rl-show-more:hover svg { transform: translateY(2px); } /* Prevent grid overflow beyond container */ .posts_list-grid { max-width: 100%; overflow: hidden; } .posts_list-item { min-width: 0; max-width: 100%; } .posts_list-item_content { display: grid !important; min-width: 0; max-width: 100%; width: 100% !important; } .posts_list-item_img-wrapper, .posts_list-item_img { min-width: 0; max-width: 100%; } /* Bottom CTA */ .realizacje-cta-area { border-top: 1px solid var(--grey-light-1); padding-top: 2rem; margin-top: 0.5rem; } .realizacje-cta-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-family-1); margin-bottom: 1.25rem; } .realizacje-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 767px) { .realizacje-header { flex-direction: column; gap: 1.25rem; } .realizacje-meta { gap: 1rem; } .realizacje-stat-num { font-size: var(--fs-xl); } } .posts_list-item_img{aspect-ratio:1.5/1;} /* Stagger — 3-kolumnowy grid (Realizacje) */ .posts_list-grid .posts_list-item:nth-child(3n + 1) { transition-delay: 0ms; } .posts_list-grid .posts_list-item:nth-child(3n + 2) { transition-delay: 90ms; } .posts_list-grid .posts_list-item:nth-child(3n + 3) { transition-delay: 180ms; } /* Stagger — 2-kolumnowy grid (Case Study) */ .posts_list-grid.grid-2 .posts_list-item:nth-child(2n + 1) { transition-delay: 0ms; } .posts_list-grid.grid-2 .posts_list-item:nth-child(2n + 2) { transition-delay: 100ms; } .wf-design-mode .posts_list-item { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.wf-design-mode):not(.wf-editor) .posts_list-grid .w-dyn-item, .posts_list-grid .w-dyn-item.is-visible { animation: none !important; opacity: 1 !important; transform: none !important; } .posts_list-item.grid-view { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Panel klienta ───────────────────────────────────── Sekcja "bento": funkcje zebrane w grupy tematyczne zamiast listy jednakowych kafelków. Zrzuty ekranu usunięte celowo — panel opisujemy treścią, nie obrazkami. */ .pnl-section{padding:4.5rem 0 6rem;position:relative} .pnl-wrap{max-width:81.5rem;width:95%;margin:0 auto} .pnl-head{max-width:900px;margin:0 0 2.6rem;text-align:left} .pnl-eyebrow{display:inline-block;font-family:var(--font-family-1);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#ff005c;border:1px solid rgba(255,0,92,.35);border-radius:2px;padding:.4rem .75rem;margin:0 0 1.1rem} .pnl-title{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.25;font-weight:700;color:#f4f2f4;margin:0 0 .9rem;letter-spacing:-.01em} .pnl-accent{color:#ff005c} .pnl-lead{font-family:var(--font-family-1);font-size:var(--fs-sm);line-height:1.75;color:var(--text-body);opacity:.92;max-width:70ch;margin:0} .pnl-stats{list-style:none;display:flex;flex-wrap:wrap;gap:2.4rem;margin:1.9rem 0 0;padding:0} .pnl-stats li{display:flex;flex-direction:column;gap:.15rem} .pnl-stats b{font-size:1.5rem;font-weight:700;color:#f4f2f4;line-height:1} .pnl-stats span{font-family:var(--font-family-1);font-size:.8rem;color:#a8a6a8} /* Bento na 6 kolumnach: 5 kart mieści się w DWÓCH rzędach — dwie szerokie (span 3) u góry, trzy węższe (span 2) pod nimi. */ .pnl-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem} .pnl-group{position:relative;overflow:hidden;grid-column:span 2;border:1px solid rgba(255,255,255,.09);border-radius:3px;padding:1.7rem 1.6rem;background:rgba(255,255,255,.025);transition:border-color .2s,transform .2s,background .2s} .pnl-group.is-wide{grid-column:span 3} .pnl-group:hover{border-color:rgba(255,0,92,.4);transform:translateY(-3px);background:rgba(255,255,255,.04)} .pnl-group header{margin:0 0 1.1rem;padding:0 0 1rem;border-bottom:1px solid rgba(255,255,255,.07)} .pnl-ico{font-size:1.5rem;line-height:1} .pnl-group h3{font-size:1.08rem;font-weight:700;color:#f4f2f4;margin:.6rem 0 .3rem} .pnl-group-sub{font-family:var(--font-family-1);font-size:.85rem;line-height:1.55;color:#a8a6a8;margin:0} .pnl-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem} .pnl-group.is-wide .pnl-list{grid-template-columns:1fr 1fr;gap:.85rem 1.6rem} .pnl-list li{position:relative;padding-left:1.15rem;font-family:var(--font-family-1);font-size:.87rem;line-height:1.6;color:#a8a6a8} /* Znacznik listy rysowany CSS-em — nie zależy od fontu ani emoji. */ .pnl-list li::before{content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background: var(--highlight-btn, #e60052);opacity:.75} .pnl-list b{color:#f4f2f4;font-weight:600} .pnl-cta{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:680px;margin:3.4rem auto 0} .pnl-cta .border-button{width:100%} body.light-mode .pnl-title,body.light-mode .pnl-group h3,body.light-mode .pnl-list b,body.light-mode .pnl-stats b{color:#1a1818} body.light-mode .pnl-lead,body.light-mode .pnl-group-sub,body.light-mode .pnl-list li,body.light-mode .pnl-stats span{color:#4a4646} body.light-mode .pnl-group{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.1)} body.light-mode .pnl-group:hover{background:rgba(0,0,0,.035)} body.light-mode .pnl-group header{border-bottom-color:rgba(0,0,0,.08)} body.light-mode .pnl-eyebrow,body.light-mode .pnl-accent{color:#e8004f} body.light-mode .pnl-eyebrow{border-color:rgba(232,0,79,.35)} body.light-mode .pnl-list li::before{background:#e8004f} @media(prefers-reduced-motion:reduce){.pnl-group{transition:none}} @media(max-width:1024px){ /* Dwie kolumny: karty po jednej, ostatnia (nieparzysta) na pełną szerokość. */ .pnl-bento{grid-template-columns:1fr 1fr} .pnl-group,.pnl-group.is-wide{grid-column:span 1} .pnl-group:last-child{grid-column:span 2} .pnl-group.is-wide .pnl-list{grid-template-columns:1fr} } @media(max-width:760px){ .pnl-section{padding:4rem 0} .pnl-bento{grid-template-columns:1fr} .pnl-group,.pnl-group.is-wide,.pnl-group:last-child{grid-column:span 1} .pnl-group.is-wide .pnl-list{grid-template-columns:1fr} .pnl-stats{gap:1.6rem} .pnl-cta{grid-template-columns:1fr;max-width:420px} } /* ── 4_ SZABLONY WG BRANŻY (#Projekty-webflow-section) ───────────── Przebudowa 2026-08-15. Co się zmieniło i dlaczego: • podgląd karty NIE udaje już zrzutu ekranu (chrome przeglądarki + gradientowa plama był ozdobnikiem, który niósł zero informacji). Zamiast tego rysujemy SCHEMAT UKŁADU strony danego typu — sklep ma siatkę produktów, artykuł kolumnę tekstu, rezerwacja panel z polami. Grafika koduje treść, a nie ją dekoruje; • modal wyleciał — cała treść (opis + moduły) jest na karcie, więc cała karta jest jednym linkiem: bez focus-trapa, bez zagnieżdżonych przycisków, bez blokowania scrolla; • slider mobilny wyleciał — jedna kolumna zamiast wyjmowania kart z siatki i przesuwania transformem; • kolor marki (--pw-ac) żyje tylko w schemacie i cienkiej kresce karty; nagłówki i CTA zostają na akcencie strony, żeby siatka sześciu kart nie zamieniła się w tęczę. ──────────────────────────────────────────────────────────────── */ #Projekty-webflow-section { --pw-line: rgba(255,255,255,.09); --pw-line-2: rgba(255,255,255,.2); --pw-ink: var(--text-1,#f2f0f2); --pw-body: var(--text-body,#cac8ca); --pw-dim: var(--text-muted,#969496); --pw-acc: var(--highlight,#ff005c); --pw-pole: rgba(255,255,255,.035); --pw-ease: cubic-bezier(.16,1,.3,1); } body.light-mode #Projekty-webflow-section { --pw-line: rgba(0,0,0,.13); --pw-line-2: rgba(0,0,0,.28); --pw-pole: rgba(0,0,0,.035); } #Projekty-webflow-section .pw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── nagłówek ── */ #Projekty-webflow-section .pw-top { max-width: 62ch; } #Projekty-webflow-section .pw-tytul { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; line-height: 1.25; color: var(--pw-ink); margin: 0 0 .85rem; text-wrap: balance; } #Projekty-webflow-section .pw-lead { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: var(--fs-base,.9375rem); line-height: 1.8; color: var(--pw-body); margin: 0; } /* ── sterowanie: platforma + branża ── */ #Projekty-webflow-section .pw-ster { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 2.25rem 0 1rem; } #Projekty-webflow-section .pw-plat { display: flex; gap: .5rem; } #Projekty-webflow-section .pw-plat-btn { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1.3rem; min-height: 40px; border: 1px solid var(--pw-line); background: transparent; color: var(--pw-dim); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } #Projekty-webflow-section .pw-plat-btn:hover { border-color: var(--pw-line-2); color: var(--pw-ink); } #Projekty-webflow-section .pw-plat-btn[aria-pressed="true"] { border-color: var(--pw-acc); color: var(--pw-acc); background: color-mix(in srgb, var(--pw-acc) 8%, transparent); } #Projekty-webflow-section .pw-plat-n { opacity: .55; margin-left: .45em; font-variant-numeric: tabular-nums; } #Projekty-webflow-section .pw-branze { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; } #Projekty-webflow-section .pw-br-btn { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .68rem; letter-spacing: .06em; padding: .4rem .85rem; min-height: 34px; border: 1px solid var(--pw-line); background: transparent; color: var(--pw-dim); cursor: pointer; transition: border-color .2s, color .2s; } #Projekty-webflow-section .pw-br-btn:hover { border-color: var(--pw-line-2); color: var(--pw-ink); } #Projekty-webflow-section .pw-br-btn[aria-pressed="true"] { border-color: var(--pw-acc); color: var(--pw-acc); } #Projekty-webflow-section .pw-plat-btn:focus-visible, #Projekty-webflow-section .pw-br-btn:focus-visible, #Projekty-webflow-section .pw-wiecej:focus-visible, #Projekty-webflow-section .pw-karta a:focus-visible { outline: 2px solid var(--pw-acc); outline-offset: 2px; } /* ── siatka kart ── */ #Projekty-webflow-section .pw-siatka { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--pw-line); border: 1px solid var(--pw-line); } @media (max-width: 991px) { #Projekty-webflow-section .pw-siatka { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 599px) { #Projekty-webflow-section .pw-siatka { grid-template-columns: minmax(0,1fr); } } #Projekty-webflow-section .pw-karta { background: var(--black,#020202); min-width: 0; } body.light-mode #Projekty-webflow-section .pw-karta { background: var(--black,#f0ede8); } #Projekty-webflow-section .pw-karta > a { display: flex; flex-direction: column; height: 100%; padding: 1.25rem 1.25rem 1.4rem; text-decoration: none; color: inherit; position: relative; transition: background .25s var(--pw-ease); } #Projekty-webflow-section .pw-karta > a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pw-ac,var(--pw-acc)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--pw-ease); } #Projekty-webflow-section .pw-karta > a:hover::before, #Projekty-webflow-section .pw-karta > a:focus-visible::before { transform: scaleX(1); } #Projekty-webflow-section .pw-karta > a:hover { background: var(--pw-pole); } /* ── schemat układu (zamiast udawanego zrzutu) ── */ #Projekty-webflow-section .pw-szkic { position: relative; margin-bottom: 1.15rem; border: 1px solid var(--pw-line); background: var(--pw-pole); /* stała wysokość, nie aspect-ratio — bloki mają wymiary w px, więc rozciąganie ramki zostawiałoby na szerokiej karcie pustkę */ padding: 12px; height: 190px; overflow: hidden; display: grid; grid-template-columns: repeat(12,1fr); gap: 6px; align-content: start; color: var(--pw-ink); } #Projekty-webflow-section .pw-b { display: block; height: var(--h,12px); align-self: start; background: currentColor; opacity: .1; } /* blok tekstu — linijki rysowane gradientem, nie kolejnymi divami */ #Projekty-webflow-section .pw-b.b-txt { background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 7px); opacity: .22; } #Projekty-webflow-section .pw-b.b-pole { background: transparent; border: 1px solid currentColor; opacity: .16; } #Projekty-webflow-section .pw-b.b-hero, #Projekty-webflow-section .pw-b.b-cta { background: var(--pw-ac,var(--pw-acc)); opacity: .5; } #Projekty-webflow-section .pw-b.b-hero { opacity: .22; } #Projekty-webflow-section .pw-szkic-tag { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-dim); /* bez opacity — podpis musi trzymać 4.5:1 */ } /* podpis leży na przyciemnionym polu szkicu — --pw-dim dawał tam 4.45:1, tuż pod progiem; o pół tonu ciemniej wychodzi 5.2:1 */ body.light-mode #Projekty-webflow-section .pw-szkic-tag { color: #5f5c5c !important; } /* ── treść karty ── */ #Projekty-webflow-section .pw-meta { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-dim); display: block; margin-bottom: .5rem; } #Projekty-webflow-section .pw-meta .pw-kropka { color: var(--pw-ac,var(--pw-acc)); margin: 0 .5em; } #Projekty-webflow-section .pw-nazwa { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(.95rem,1.6vw,1.1rem); font-weight: 600; line-height: 1.4; color: var(--pw-ink); margin: 0 0 .55rem; overflow-wrap: anywhere; } #Projekty-webflow-section .pw-opis { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .78rem; line-height: 1.75; color: var(--pw-body); margin: 0 0 1rem; } #Projekty-webflow-section .pw-mod { list-style: none; padding: 0; margin: 0 0 1.15rem; display: flex; flex-direction: column; gap: .3rem; } #Projekty-webflow-section .pw-mod li { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; line-height: 1.6; color: var(--pw-body); padding-left: 1rem; position: relative; } #Projekty-webflow-section .pw-mod li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--pw-ac,var(--pw-acc)); } #Projekty-webflow-section .pw-idz { margin-top: auto; display: flex; align-items: center; gap: .5rem; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-dim); transition: color .2s; } #Projekty-webflow-section .pw-karta > a:hover .pw-idz, #Projekty-webflow-section .pw-karta > a:focus-visible .pw-idz { color: var(--pw-acc); } /* strzałka „w nowej karcie" rysowana kreską — bez glifu ↗ */ #Projekty-webflow-section .pw-strz { width: 10px; height: 10px; position: relative; flex: 0 0 auto; transition: transform .3s var(--pw-ease); } /* trzon: przekątna z lewego dołu do prawego górnego rogu */ #Projekty-webflow-section .pw-strz::before { content: ''; position: absolute; left: 0; bottom: 0; width: 13px; height: 1.3px; background: currentColor; transform: rotate(-45deg); transform-origin: left bottom; } /* grot: mały narożnik przy końcu trzonu (pełna ramka czytała się jak nawias) */ #Projekty-webflow-section .pw-strz::after { content: ''; position: absolute; right: 0; top: 0; width: 6px; height: 6px; border-top: 1.3px solid currentColor; border-right: 1.3px solid currentColor; } #Projekty-webflow-section .pw-karta > a:hover .pw-strz { transform: translate(2px,-2px); } /* ── pusto / pokaż więcej / stopka ── */ #Projekty-webflow-section .pw-wiecej-wrap { display: flex; justify-content: center; margin-top: 1.75rem; } #Projekty-webflow-section .pw-wiecej { -webkit-appearance: none; appearance: none; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .75rem 2rem; min-height: 44px; border: 1px solid var(--pw-line-2); background: transparent; color: var(--pw-ink); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } #Projekty-webflow-section .pw-wiecej:hover { border-color: var(--pw-acc); color: var(--pw-acc); background: color-mix(in srgb, var(--pw-acc) 7%, transparent); } #Projekty-webflow-section .pw-wiecej-n { opacity: .6; font-variant-numeric: tabular-nums; } #Projekty-webflow-section .pw-stopka { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--pw-line); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; } #Projekty-webflow-section .pw-stopka-t { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(.95rem,1.8vw,1.15rem); font-weight: 700; color: var(--pw-ink); margin: 0 0 .35rem; } #Projekty-webflow-section .pw-stopka-s { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .78rem; color: var(--pw-dim); margin: 0; } /* lightmode.css wymusza kolor na p/li — bez tego podpisy tracą rolę */ body.light-mode #Projekty-webflow-section .pw-stopka-s { color: var(--pw-dim) !important; } /* .border-button z Webflow jest width:100% — w stopce ma stać OBOK tekstu, nie zawijać się na własny wiersz jako pasek przez całą szerokość */ @media (min-width: 600px) { #Projekty-webflow-section .pw-stopka .border-button { width: auto; flex: 0 0 auto; min-width: 17rem; } } /* ── ruch: karta wjeżdża, a schemat „składa się" blok po bloku ── Jeden moment: strona buduje się na oczach użytkownika. Klasa .pw-anim nadawana z JS dopiero, gdy prefers-reduced-motion nie jest ustawione, więc domyślny (bezruchowy) stan jest w pełni widoczny. */ #Projekty-webflow-section.pw-anim .pw-karta { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--pw-ease), transform .6s var(--pw-ease); transition-delay: calc(var(--pw-i,0) * 55ms); } #Projekty-webflow-section.pw-anim .pw-karta.is-in { opacity: 1; transform: none; } #Projekty-webflow-section.pw-anim .pw-karta .pw-b { opacity: 0; transform: translateY(5px); transition: opacity .45s var(--pw-ease), transform .45s var(--pw-ease); } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b { transform: none; transition-delay: calc(var(--pw-i,0) * 55ms + var(--b-i,0) * 45ms + 120ms); } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b { opacity: .1; } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b.b-txt { opacity: .22; } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b.b-pole { opacity: .16; } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b.b-hero { opacity: .22; } #Projekty-webflow-section.pw-anim .pw-karta.is-in .pw-b.b-cta { opacity: .5; } /* ── szerokość treści: 81.25rem, wycentrowana ── */ @media (min-width: 992px) { #Projekty-webflow-section .pw-top, #Projekty-webflow-section .pw-ster, #Projekty-webflow-section .pw-branze, #Projekty-webflow-section .pw-siatka, #Projekty-webflow-section .pw-wiecej-wrap, #Projekty-webflow-section .pw-stopka { max-width: 81.25rem; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } } /* WCAG 1.4.1 Use of Color — linki w treściach blogowych/case study muszą być rozróżnialne nie tylko kolorem. Dodajemy podkreślenie z offsetem dla lepszej czytelności. Wykluczamy linki nawigacyjne, brand i CTA. */ .uui-text-rich-text a, .blog-content a, .faq-a-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: currentColor; } .uui-text-rich-text a:hover, .blog-content a:hover, .faq-a-body a:hover { text-decoration-color: #ff005c; } body.light-mode .uui-text-rich-text a:hover, body.light-mode .blog-content a:hover, body.light-mode .faq-a-body a:hover { text-decoration-color: #e8004f; } /* ── 4.5_ PORÓWNANIE ───────────────────────────────────────────── Przebudowa 2026-08-15. Co się zmieniło i dlaczego: • znaczniki tak/nie/zależy RYSOWANE w CSS (jedna grubość kreski --cmp-stroke) zamiast glifów ✓ ✗ ~ — glify to nie system ikon, renderują się różnie i nie da się ich zestroić z typografią; • w każdej komórce jest SŁOWO, więc legenda (dotąd aria-hidden, choć niosła klucz do tabeli) jest zbędna — usunięta; • kolumna kryterium przyklejona przy przewijaniu w bok — na telefonie widać, czego dotyczy wiersz, którego się czyta; • kolor komunikuje CZYJA to kolumna (akcent = moja oferta), kształt znacznika komunikuje wynik — bez sygnalizacji świetlnej; • wyjaśnienia jako rozwijany wiersz zamiast tooltipa na hover (tamten był ucinany przez overflow i nie istniał na dotyku). */ #Porownanie { --cmp-line: rgba(255,255,255,.09); --cmp-line-soft: rgba(255,255,255,.055); --cmp-surface: rgba(255,255,255,.028); --cmp-acc: #ff005c; --cmp-acc-soft: rgba(255,0,92,.07); --cmp-acc-line: rgba(255,0,92,.3); --cmp-ink: #0a0505; --cmp-no: var(--text-muted, #969496); --cmp-mid: #e0a83c; --cmp-stroke: 1.6px; --cmp-ease: cubic-bezier(.16,1,.3,1); } body.light-mode #Porownanie { --cmp-line: rgba(0,0,0,.12); --cmp-line-soft: rgba(0,0,0,.07); --cmp-surface: rgba(0,0,0,.025); --cmp-acc: #b3003a; --cmp-acc-soft: rgba(179,0,58,.06); --cmp-acc-line: rgba(179,0,58,.28); --cmp-ink: #fff; --cmp-no: var(--text-muted, #6a6767); --cmp-mid: #8a5a00; } /* Nagłówek */ .cmp-header { margin-bottom: 1.75rem; } .cmp-title { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: var(--text-1, #fff); margin: 0 0 .7rem; letter-spacing: -.01em; text-wrap: balance; } .cmp-desc { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-sm, .875rem); color: var(--text-body, #d5d1d1); line-height: 1.75; margin: 0; max-width: 58ch; } /* Zakładki — wskaźnik jedzie pod aktywną (dwie równe zakładki: flex:1) */ .cmp-tabs { position: relative; display: flex; margin-bottom: 1.5rem; max-width: 34rem; border-bottom: 1px solid var(--cmp-line); } .cmp-tabs::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 50%; height: 2px; background: var(--cmp-acc); transform: translateX(calc(var(--cmp-i, 0) * 100%)); transition: transform .42s var(--cmp-ease); } .cmp-tab { flex: 1 1 0; min-width: 0; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; color: var(--cmp-no); padding: .7rem .75rem .8rem; cursor: pointer; transition: color .18s; } .cmp-tab:hover { color: var(--text-1, #fff); } .cmp-tab.is-active { color: var(--text-1, #fff); } .cmp-tab:focus-visible { outline: 2px solid var(--cmp-acc); outline-offset: -2px; } .cmp-pane { display: none; } .cmp-pane.is-active { display: block; } /* Tabela */ .cmp-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; } .cmp-table th, .cmp-table td { text-align: left; } .cmp-table thead th { padding: .8rem 1rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cmp-no); font-weight: 500; border-bottom: 1px solid var(--cmp-line); vertical-align: bottom; } /* Uwaga: lightmode.css ma zbiorczą regułę `body.light-mode span:not(…) { color: inherit }` o wysokiej specyficzności. Każdy w tej sekcji, któremu nadajemy kolor, musi więc iść przez #Porownanie. */ #Porownanie .cmp-table thead th .cmp-sub { display: block; font-size: .58rem; letter-spacing: .08em; color: var(--cmp-no); opacity: .75; margin-top: .15rem; } /* Kolumna kryterium — przyklejona, żeby nie zniknęła przy przewijaniu */ .cmp-table th:first-child, .cmp-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--black, #020202); border-right: 1px solid var(--cmp-line-soft); width: 15rem; } .cmp-table tbody td { padding: .9rem 1rem; font-size: .8rem; line-height: 1.5; color: var(--text-body, #d5d1d1); border-bottom: 1px solid var(--cmp-line-soft); vertical-align: middle; } .cmp-table tbody td.cmp-crit { font-weight: 500; color: var(--text-1, #fff); } .cmp-r { transition: background .15s; } .cmp-r:hover td:not(:first-child) { background: var(--cmp-surface); } /* Wyróżniona kolumna — ciągły „podest” przez całą wysokość tabeli */ .cmp-table th.cmp-highlight { color: var(--text-1, #fff); background: var(--cmp-acc-soft); border-top: 2px solid var(--cmp-acc); border-radius: 5px 5px 0 0; box-shadow: inset 1px 0 0 var(--cmp-acc-line), inset -1px 0 0 var(--cmp-acc-line); } .cmp-table td.cmp-highlight { background: var(--cmp-acc-soft); box-shadow: inset 1px 0 0 var(--cmp-acc-line), inset -1px 0 0 var(--cmp-acc-line); } .cmp-table tbody tr:last-child td.cmp-highlight { border-radius: 0 0 5px 5px; box-shadow: inset 1px 0 0 var(--cmp-acc-line), inset -1px 0 0 var(--cmp-acc-line), inset 0 -1px 0 var(--cmp-acc-line); } #Porownanie .cmp-badge { display: block; width: fit-content; margin-top: .35rem; background: var(--cmp-acc); color: var(--cmp-ink); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 2px; font-weight: 700; } /* Znaczniki rysowane kreską o stałej grubości */ .cmp-v { display: inline-flex; align-items: center; gap: .55rem; } .cmp-m { position: relative; display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; } .cmp-m::before, .cmp-m::after { content: ""; position: absolute; } /* Stany muszą iść przez #Porownanie: samo [data-v="…"] przegrywa z `.cmp-table tbody td { color: … }`, a na dodatkowo z zbiorczą regułą z lightmode.css. */ #Porownanie [data-v="tak"] { color: var(--text-1, #fff); } #Porownanie [data-v="tak"] .cmp-m::before { left: 2px; top: 0; width: 6px; height: 11px; border: solid currentColor; border-width: 0 var(--cmp-stroke) var(--cmp-stroke) 0; transform: rotate(43deg); } #Porownanie [data-v="nie"] { color: var(--cmp-no); } #Porownanie [data-v="nie"] .cmp-m::before, #Porownanie [data-v="nie"] .cmp-m::after { top: 50%; left: 1px; width: 11px; height: var(--cmp-stroke); margin-top: calc(var(--cmp-stroke) / -2); background: currentColor; border-radius: 1px; } #Porownanie [data-v="nie"] .cmp-m::before { transform: rotate(45deg); } #Porownanie [data-v="nie"] .cmp-m::after { transform: rotate(-45deg); } /* „zależy" — bursztyn tylko na kresce, nie na całym tekście: inaczej kolumny konkurencji świecą mocniej niż moja. */ #Porownanie [data-v="zalezy"] .cmp-m { color: var(--cmp-mid); } #Porownanie [data-v="zalezy"] .cmp-m::before { top: 50%; left: 1px; width: 11px; height: var(--cmp-stroke); margin-top: calc(var(--cmp-stroke) / -2); background: currentColor; border-radius: 1px; } /* W mojej kolumnie znacznik „tak" nosi akcent — to jedyne miejsce, gdzie kolor mówi „to jest to" */ #Porownanie td.cmp-highlight[data-v="tak"] { color: var(--cmp-acc); } #Porownanie td.cmp-highlight[data-v="tak"] .cmp-v { color: var(--text-1, #fff); } #Porownanie td.cmp-highlight[data-v="tak"] .cmp-m { color: var(--cmp-acc); } /* „Dlaczego to ważne" — rozwijany wiersz pod kryterium */ /* Nie flex: przy zawijanym kryterium znak „?" ma iść zaraz za ostatnim słowem, a nie odjechać na prawą krawędź komórki. */ .cmp-why { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; } .cmp-why > span:first-child { border-bottom: 1px dotted var(--cmp-line); } .cmp-why:hover > span:first-child { border-bottom-color: var(--cmp-acc); } .cmp-why:focus-visible { outline: 2px solid var(--cmp-acc); outline-offset: 3px; } #Porownanie .cmp-why-i { display: inline-block; vertical-align: middle; margin-left: .4rem; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--cmp-line); color: var(--cmp-no); font-size: .58rem; line-height: 12px; text-align: center; transition: transform .3s var(--cmp-ease), border-color .18s, color .18s; } #Porownanie .cmp-why[aria-expanded="true"] .cmp-why-i { transform: rotate(180deg); border-color: var(--cmp-acc); color: var(--cmp-acc); } .cmp-note > td { padding: 0 1rem .95rem 1rem; font-size: .74rem; line-height: 1.7; color: var(--text-body, #d5d1d1); border-bottom: 1px solid var(--cmp-line-soft); } .cmp-note > td > span { display: block; max-width: 60ch; border-left: 2px solid var(--cmp-acc-line); padding-left: .8rem; } .cmp-hint { display: none; margin: .7rem 0 0; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cmp-no); } .cmp-footer { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .cmp-footer-text { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-sm, .875rem); line-height: 1.7; color: var(--text-body, #d5d1d1); margin: 0; flex: 1; min-width: 20rem; } .cmp-footer-text strong { color: var(--text-1, #fff); } /* Jeden zaplanowany moment ruchu: wiersze wchodzą kaskadą przy wjeździe sekcji i przy zmianie zakładki. Klasę .cmp-anim dokłada JS, więc bez JS-a (i przy prefers-reduced-motion) wszystko jest widoczne od razu. */ #Porownanie.cmp-anim .cmp-pane .cmp-r { opacity: 0; transform: translateY(9px); } #Porownanie.cmp-anim .cmp-pane.is-in .cmp-r { opacity: 1; transform: none; transition: opacity .5s var(--cmp-ease) var(--cmp-d, 0s), transform .5s var(--cmp-ease) var(--cmp-d, 0s); } @media (prefers-reduced-motion: reduce) { #Porownanie.cmp-anim .cmp-pane .cmp-r { opacity: 1 !important; transform: none !important; transition: none !important; } .cmp-tabs::after, .cmp-why-i { transition: none; } } @media (max-width: 700px) { .cmp-hint { display: block; } .cmp-table { min-width: 560px; } .cmp-table th:first-child, .cmp-table td:first-child { width: 9.5rem; } .cmp-table thead th, .cmp-table tbody td { padding: .7rem .75rem; } .cmp-table tbody td { font-size: .74rem; } .cmp-footer-text { min-width: 0; } } /* ── #warto-wybrac — animacje i UX ─────────────────────────────── */ /* Zdjęcia w kaflach: .image-15 miało tylko height:100%, więc kwadratowy obraz (np. 1200×1200 z autem) rozpychał się poza box i był przycinany po bokach. object-fit:contain mieści cały kadr. */ .div-block-170 { overflow: hidden; } .image-15 { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; } /* Reveal animation (fade-in + slide-up) */ .benefit-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--reveal-delay, 0s); } .benefit-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .benefit-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Mobile slider — klony kart mają benefit-reveal bez is-visible, więc byłyby niewidoczne */ @media (max-width: 767px) { .mob-slide-card .benefit-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Card hover lift — consistent z design tokenami */ #warto-wybrac .main_card_contain { position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; } #warto-wybrac .main_card_contain:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,0,92,0.2); } @media (prefers-reduced-motion: reduce) { #warto-wybrac .main_card_contain { transition: box-shadow 0.3s ease; } #warto-wybrac .main_card_contain:hover { transform: none; } } /* Numer porządkowy karty */ .benefit-num { position: absolute; top: 0.9rem; right: 1rem; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,0,92,0.4); line-height: 1; pointer-events: none; user-select: none; z-index: 2; transition: color 0.3s ease; } #warto-wybrac .main_card_contain:hover .benefit-num { color: rgba(255,0,92,0.75); } body.light-mode .benefit-num { color: rgba(255,0,92,0.3); } body.light-mode #warto-wybrac .main_card_contain:hover .benefit-num { color: rgba(255,0,92,0.6); } /* Summary bar — pasek z kluczowymi komunikatami nad kartami */ .benefit-summary-bar { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; margin-bottom: 2.25rem; } .benefit-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border: 1px solid rgba(255,0,92,0.22); border-radius: 2px; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); background: rgba(255,0,92,0.04); white-space: nowrap; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .benefit-pill:hover { border-color: rgba(255,0,92,0.5); color: rgba(255,255,255,0.85); background: rgba(255,0,92,0.08); } .benefit-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--highlight-btn, #e60052); flex-shrink: 0; } body.light-mode .benefit-pill { border-color: rgba(255,0,92,0.18); background: rgba(255,0,92,0.03); color: rgba(0,0,0,0.5); } body.light-mode .benefit-pill:hover { border-color: rgba(255,0,92,0.45); color: rgba(0,0,0,0.8); background: rgba(255,0,92,0.07); } /* ── Odstępy w kartach: button → h3 → p ─────────────────────── */ #warto-wybrac .main_card_contain .button-5, #warto-wybrac .main_card_contain a.button-5.w-button { margin-bottom: 1rem; } #warto-wybrac h3.benefit-h3, #warto-wybrac .benefit-h3 { margin-bottom: 0.85rem; line-height: 1.45; } #warto-wybrac .main_card_contain p { line-height: 1.7; margin-top: 0; } #warto-wybrac .div-contain > div + div { margin-top: 1.25rem; } @media (max-width: 767px) { #warto-wybrac .main_card_contain .button-5, #warto-wybrac .main_card_contain a.button-5.w-button { margin-bottom: 0.85rem; } #warto-wybrac h3.benefit-h3, #warto-wybrac .benefit-h3 { margin-bottom: 0.7rem; } } /* ══════════════════════════════════════════════════════════════════ #Opinie — Video Testimonials + Written Reviews ══════════════════════════════════════════════════════════════════ */ #Opinie { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; } /* ── 2-col layout ── */ .vtest-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 900px) { .vtest-wrap { grid-template-columns: 1fr; gap: 2.5rem; } } /* ── Left column ── */ .vtest-left { display: flex; flex-direction: column; gap: 2rem; } .vtest-intro { display: flex; flex-direction: column; gap: 0.75rem; } .vtest-badge { display: inline-block; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ff005c; border: 1px solid rgba(255,0,92,.35); padding: 0.3rem 0.75rem; width: fit-content; } .vtest-h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; color: var(--text-1, #f2f0f2); margin: 0; } .vtest-h3 em { color: #ff005c; font-style: normal; } .vtest-desc { font-size: var(--fs-sm, 0.875rem); color: var(--text-body, #cac8ca); line-height: 1.8; margin: 0; } .vtest-disclaimer { font-size: 0.65rem; opacity: .4; } /* Offer card */ .vtest-offer { border: 1px solid rgba(255,0,92,.25); background: rgba(255,0,92,.04); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .vtest-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .vtest-offer-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; margin: 0; } .vtest-discount { font-size: 1.6rem; font-weight: 700; color: #ff005c; line-height: 1; border: 1px solid rgba(255,0,92,.4); padding: 0.3rem 0.9rem; white-space: nowrap; } .vtest-offer-body { font-size: 0.72rem; color: rgba(255,255,255,.55); line-height: 1.7; margin: 0; } .vtest-steps { display: flex; flex-direction: column; gap: 0.55rem; } .vtest-step { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.72rem; color: rgba(255,255,255,.6); line-height: 1.5; } .vtest-step-num { flex-shrink: 0; font-size: 0.6rem; color: #ff005c; border: 1px solid rgba(255,0,92,.35); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: 700; } .vtest-submit-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.75rem 1.5rem; background: var(--highlight-btn, #e60052); color: #fff; cursor: pointer; transition: background .18s; width: fit-content; } .vtest-submit-btn:hover { background: #d4004d; color: #fff; } /* Consent block */ .vtest-consent { border-top: 1px solid rgba(255,255,255,.07); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.65rem; } .vtest-consent-row { display: flex; align-items: flex-start; gap: 0.65rem; } .vtest-consent-icon { flex-shrink: 0; color: rgba(255,0,92,.6); margin-top: 1px; } .vtest-consent-label { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: 0.04em; margin: 0 0 0.2rem; } .vtest-consent-sub { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.25); margin: 0; } .vtest-consent-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .vtest-consent-dl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ff005c; text-decoration: none; border: 1px solid rgba(255,0,92,.3); padding: 0.3rem 0.7rem; transition: background .15s; } .vtest-consent-dl:hover { background: rgba(255,0,92,.08); } .vtest-consent-sep { font-size: 0.55rem; color: rgba(255,255,255,.18); } .vtest-consent-alt { font-size: 0.62rem; color: rgba(255,255,255,.3); font-style: italic; line-height: 1.4; } /* ── Right column (slider) ── */ .vtest-right { display: flex; flex-direction: column; gap: 1rem; } .vtest-count-bar { display: flex; align-items: center; justify-content: space-between; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 0.75rem; gap: 1rem; } .vtest-count-label { flex: 1; } .vtest-nav-row { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .vtest-nav-counter { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255,255,255,.35); min-width: 2.5rem; text-align: center; } .vtest-nav-btn { width: 32px; height: 32px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; } .vtest-nav-btn:hover:not(:disabled) { background: rgba(255,0,92,.12); border-color: rgba(255,0,92,.4); color: #ff005c; } .vtest-nav-btn:disabled { opacity: .25; cursor: default; } .vtest-nav-btn:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; } .vtest-slider-outer { position: relative; } .vtest-slider-viewport { overflow: hidden; } .vtest-slider-track { display: flex; gap: 0.75rem; will-change: transform; transition: transform 0.38s cubic-bezier(.4,0,.2,1); user-select: none; touch-action: pan-y; } .vtest-card { position: relative; aspect-ratio: 9 / 16; flex-shrink: 0; width: calc(50% - 0.375rem); background: #0c0c0c; border: 1px solid rgba(255,255,255,.07); overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; } .vtest-card:hover { border-color: rgba(255,0,92,.4); transform: translateY(-3px); } .vtest-card:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; } .vtest-placeholder { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; } .vtest-ph-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); } .vtest-ph-label { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.18); text-align: center; } .vtest-ph-soon { font-size: 0.45rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,0,92,.4); } .vtest-dots-wrap { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; } .vtest-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.15); cursor: pointer; transition: background .2s, transform .2s; flex-shrink: 0; } .vtest-dot.active { background: var(--highlight-btn, #e60052); transform: scale(1.4); } .vtest-dot:focus-visible { outline: 2px solid #ff005c; outline-offset: 3px; } /* ── Stats bar ── */ .vtest-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.07); margin-top: 3.5rem; } @media (max-width: 600px) { .vtest-stats { grid-template-columns: repeat(2, 1fr); } } .vtest-stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.75rem 1rem; gap: 0.4rem; border-right: 1px solid rgba(255,255,255,.07); } .vtest-stat-item:last-child { border-right: none; } @media (max-width: 600px) { .vtest-stat-item:nth-child(2) { border-right: none; } .vtest-stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,.07); } .vtest-stat-item:nth-child(1), .vtest-stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.07); } } .vtest-stat-val { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: #fff; line-height: 1; } .vtest-stat-star { color: #ff005c; font-size: 0.8em; vertical-align: super; } .vtest-stat-label { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.3); text-align: center; } /* ── Reviews section header ── */ .vtest-rev-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 2.5rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.07); margin-top: 3rem; } .vtest-rev-heading { display: flex; align-items: baseline; gap: 0.75rem; } .vtest-rev-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.3); } .vtest-rev-count { font-size: 0.55rem; letter-spacing: 0.15em; color: rgba(255,0,92,.6); } /* Filter tabs */ .vtest-filters { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .vtest-filter-btn { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.35); padding: 0.35rem 0.85rem; cursor: pointer; transition: all .15s; font-family: inherit; } .vtest-filter-btn:hover { border-color: rgba(255,0,92,.3); color: rgba(255,255,255,.7); } .vtest-filter-btn.active { border-color: rgba(255,0,92,.5); color: #ff005c; background: rgba(255,0,92,.06); } .vtest-filter-btn:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; } /* Reviews grid */ .vtest-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .vtest-reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .vtest-reviews-grid { grid-template-columns: 1fr; } } /* ── Google Reviews-style cards ── */ .vtest-review-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08); padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0; transition: box-shadow .2s, transform .2s; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: #202124; } .vtest-review-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); transform: translateY(-2px); } .vtest-review-card[hidden] { display: none !important; } .vtest-gr-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; } .vtest-gr-user { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; } .vtest-gr-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 500; color: #fff; flex-shrink: 0; font-family: inherit; } .vtest-gr-user-info { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .vtest-gr-name { font-size: 0.82rem; font-weight: 600; color: #202124; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vtest-gr-meta { font-size: 0.68rem; color: #70757a; } .vtest-gr-rating { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.55rem; } .vtest-gr-stars { display: flex; gap: 1px; } .vtest-gr-star { font-size: 0.82rem; color: #FBBC04; line-height: 1; } .vtest-gr-time { font-size: 0.72rem; color: #70757a; } .vtest-gr-text { font-size: 0.78rem; color: #3c4043; line-height: 1.65; margin: 0 0 0.3rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .vtest-gr-text.expanded { -webkit-line-clamp: unset; overflow: visible; } .vtest-gr-expand { display: none; font-size: 0.75rem; color: #1a73e8; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; margin-bottom: 0.5rem; } .vtest-gr-expand:hover { text-decoration: underline; } .vtest-gr-expand[data-visible="true"] { display: inline; } .vtest-gr-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.65rem; border-top: 1px solid #f1f3f4; } .vtest-gr-cat { font-size: 0.6rem; color: #70757a; border: 1px solid #e8eaed; padding: 0.15rem 0.6rem; border-radius: 100px; } .vtest-gr-source { display: flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; color: #70757a; } /* Empty state */ .vtest-rev-empty { display: none; grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.2); } .vtest-reviews-grid.is-empty .vtest-rev-empty { display: block; } /* CTA row */ .vtest-rev-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border: 1px solid rgba(255,255,255,.07); padding: 1.5rem 2rem; margin-top: 2rem; } .vtest-rev-cta-left { display: flex; flex-direction: column; gap: 0.3rem; } .vtest-rev-cta-title { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,.7); margin: 0; } .vtest-rev-cta-sub { font-size: 0.58rem; color: rgba(255,255,255,.3); margin: 0; } .vtest-rev-cta-right { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .vtest-cta-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.6rem 1.25rem; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.55); transition: all .15s; font-family: inherit; background: none; cursor: pointer; } .vtest-cta-btn:hover { border-color: rgba(255,0,92,.4); color: #ff005c; background: rgba(255,0,92,.05); } .vtest-cta-btn.primary { background: var(--highlight-btn, #e60052); border-color: #ff005c; color: #fff; } .vtest-cta-btn.primary:hover { background: #d4004d; border-color: #d4004d; } /* ── Modals ── */ #vtest-coming-soon { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.88); align-items: center; justify-content: center; } #vtest-coming-soon.open { display: flex; } .vtest-cs-box { border: 1px solid rgba(255,0,92,.25); background: #0c0c0c; padding: 2.5rem 2rem; max-width: 360px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .vtest-cs-icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,0,92,.35); display: flex; align-items: center; justify-content: center; color: #ff005c; } .vtest-cs-title { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0; } .vtest-cs-text { font-size: 0.72rem; color: rgba(255,255,255,.5); line-height: 1.7; margin: 0; } .vtest-cs-close { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff005c; background: none; border: 1px solid rgba(255,0,92,.3); padding: 0.5rem 1.25rem; cursor: pointer; transition: background .18s; font-family: inherit; } .vtest-cs-close:hover { background: rgba(255,0,92,.1); } #vtest-modal { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.92); align-items: center; justify-content: center; padding: 1rem; } #vtest-modal.open { display: flex; } #vtest-modal-inner { position: relative; width: 100%; max-width: 360px; aspect-ratio: 9/16; background: #000; } #vtest-modal-inner video { width: 100%; height: 100%; object-fit: contain; } #vtest-modal-close { position: absolute; top: -2.5rem; right: 0; background: none; border: none; color: rgba(255,255,255,.6); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; font-family: inherit; } #vtest-modal-close:hover { color: #fff; } /* ── Light mode ── */ body.light-mode .vtest-h3 { color: #0a0a0a; } body.light-mode .vtest-desc { color: #4a4646; } body.light-mode .vtest-offer { background: rgba(255,0,92,.03); border-color: rgba(255,0,92,.2); } body.light-mode .vtest-offer-title { color: #0a0a0a; } body.light-mode .vtest-offer-body { color: rgba(0,0,0,.5); } body.light-mode .vtest-step { color: rgba(0,0,0,.6); } body.light-mode .vtest-card { background: #f0ede8; border-color: rgba(0,0,0,.1); } body.light-mode .vtest-card:hover { border-color: rgba(255,0,92,.4); } body.light-mode .vtest-ph-label { color: rgba(0,0,0,.25); } body.light-mode .vtest-count-bar { color: rgba(0,0,0,.35); border-bottom-color: rgba(0,0,0,.08); } body.light-mode .vtest-nav-counter { color: rgba(0,0,0,.35); } body.light-mode .vtest-nav-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.5); } body.light-mode .vtest-nav-btn:hover:not(:disabled) { background: rgba(255,0,92,.08); } body.light-mode .vtest-dot { background: rgba(0,0,0,.15); } body.light-mode .vtest-dot.active { background: var(--highlight-btn, #e60052); } body.light-mode #vtest-coming-soon { background: rgba(0,0,0,.7); } body.light-mode .vtest-cs-box { background: #f0ede8; border-color: rgba(255,0,92,.2); } body.light-mode .vtest-cs-title { color: #0a0a0a; } body.light-mode .vtest-cs-text { color: rgba(0,0,0,.55); } body.light-mode .vtest-consent { border-top-color: rgba(0,0,0,.08); } body.light-mode .vtest-consent-label { color: rgba(0,0,0,.6); } body.light-mode .vtest-consent-sub { color: rgba(0,0,0,.3); } body.light-mode .vtest-consent-sep { color: rgba(0,0,0,.2); } body.light-mode .vtest-consent-alt { color: rgba(0,0,0,.35); } body.light-mode .vtest-stat-val { color: #0a0a0a; } body.light-mode .vtest-stats { border-color: rgba(0,0,0,.08); } body.light-mode .vtest-stat-item { border-right-color: rgba(0,0,0,.08); } body.light-mode .vtest-rev-header { border-top-color: rgba(0,0,0,.08); } body.light-mode .vtest-rev-cta { border-color: rgba(0,0,0,.08); } body.light-mode .vtest-rev-cta-title { color: rgba(0,0,0,.7); } body.light-mode .vtest-rev-cta-sub { color: rgba(0,0,0,.4); } body.light-mode .vtest-filter-btn { border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.4); } body.light-mode .vtest-rev-tag { color: rgba(0,0,0,.3); } body.light-mode .vtest-rev-empty { color: rgba(0,0,0,.25); } /* ===== SERVICES SECTION ===== */ .svc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; } .svc-header-left { flex: 1 1 32rem; } .svc-title { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--text-1, #fff); font-weight: 700; margin: 0 0 0.75rem; } .svc-desc { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-sm, 0.875rem); color: var(--text-body, #d5d1d1); line-height: 1.75; max-width: 58ch; margin: 0 0 1.5rem; } .svc-stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .svc-stat { display: flex; flex-direction: column; gap: 0.2rem; } .svc-stat-num { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-2xl, 1.75rem); color: var(--highlight, #ff005c); font-weight: 700; line-height: 1; } .svc-stat-label { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-xs, 0.7rem); color: var(--text-muted, rgba(255,255,255,0.4)); text-transform: uppercase; letter-spacing: 0.08em; } .svc-stat-divider { width: 1px; height: 2rem; background: var(--grey-light-1, rgba(255,255,255,0.1)); flex-shrink: 0; } /* Grid */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); } .svc-card { position: relative; background: var(--_theme---background, #111); padding: 1.75rem; display: flex; flex-direction: column; gap: 0; transition: background 0.2s; } .svc-card:hover { background: rgba(255,255,255,0.04); } .svc-card-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .svc-icon-wrap { color: var(--highlight, #ff005c); flex-shrink: 0; line-height: 0; } .svc-cat { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-xs, 0.7rem); color: var(--text-muted, rgba(255,255,255,0.4)); text-transform: uppercase; letter-spacing: 0.1em; } .svc-card-title { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-lg, 1.0625rem); color: var(--text-1, #fff); font-weight: 700; margin: 0; line-height: 1.3; } .svc-card-line { height: 1px; background: rgba(255,255,255,0.08); margin: 1rem 0; } .svc-card-desc { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-sm, 0.875rem); color: var(--text-body, #d5d1d1); line-height: 1.7; margin: 0 0 1rem; } .svc-feat-list { list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; } .svc-feat-item { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-xs, 0.7rem); color: var(--text-body, #d5d1d1); line-height: 1.4; } .svc-feat-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--highlight-btn, #e60052); flex-shrink: 0; } .svc-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06); } .svc-price { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-xs, 0.7rem); color: var(--highlight, #ff005c); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .svc-link { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-xs, 0.7rem); color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.18s; white-space: nowrap; } .svc-link:hover { color: var(--highlight, #ff005c); } /* Bottom CTA */ .svc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .svc-bottom-text { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: var(--fs-sm, 0.875rem); color: var(--text-body, #d5d1d1); margin: 0; } .svc-bottom-text strong { color: var(--text-1, #fff); } .svc-bottom-btns { display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 991px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .svc-header { flex-direction: column; margin-bottom: 1.5rem; } .svc-header-left { width: 100%; min-width: 0; flex: 1 1 100%; } .svc-grid { grid-template-columns: 1fr !important; width: 100%; } .svc-card { width: 100%; box-sizing: border-box; } } .posts_list-item_img{ aspect-ratio: 1.5/1; } .kalc-cta-section { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; } .kalc-cta-heading { font-family:var(--font-family-1,'JetBrains Mono'),monospace; font-size:clamp(1.2rem,2.5vw,1.75rem); font-weight:700; color:var(--text-1,#fff); margin:0 0 .5rem; line-height:1.2; } .kalc-cta-sub { font-family:var(--font-family-1,'JetBrains Mono'),monospace; font-size:.875rem; color:var(--text-body,#d5d1d1); opacity:.9; margin:0; } .kalc-cta-btns { display:flex; gap:1rem; flex-wrap:wrap; flex-shrink:0; } @media(max-width:767px){ .kalc-cta-section { flex-direction:column; align-items:center; text-align:center; } .kalc-cta-btns { flex-direction:column; align-items:stretch; gap:.75rem; } .kalc-cta-btns .border-button { align-self:stretch; } } .footer-about-grid { display: flex; justify-content: center; width: 100%; padding: 2.5rem 0; border-top: 1px solid var(--transparency-25); } .footer-about-grid .footer-03-content { max-width: 560px; width: 100%; align-items: center; text-align: center; } .footer-about-tags { justify-content: center; } .footer-about-tag { font-size: var(--fs-xs); letter-spacing: .08em; color: var(--text-5); border: 1px solid var(--transparency-25); border-radius: 2px; padding: .2rem .65rem; white-space: nowrap; } .footer-about-tags { display: flex; flex-wrap: wrap; gap: .375rem; } @media screen and (max-width: 991px) { .footer-about-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-services-grid { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { .footer-about-grid { padding: 2rem 1.25rem; } .footer-about-grid .footer-03-content { max-width: 100%; width: 100%; align-items: center !important; text-align: center !important; } .footer-about-grid .footer-03-content .display-m, .footer-about-grid .footer-03-content .normal-text, .footer-about-grid .footer-03-content p, .footer-about-grid .footer-03-content .sub_text { width: 100%; text-align: center !important; } .footer-about-grid .footer-about-tags { justify-content: center; width: 100%; } .footer-about-grid .footer-list { width: 100%; align-items: center; } } @media screen and (max-width: 479px) { .footer-services-grid { grid-template-columns: 1fr; } .footer-about-grid { padding: 1.75rem 1rem; } } .grain { pointer-events: none; } /* ===== PROJECT MODAL ELEMENTS ===== */ .ww-proj-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 1.5rem; } .ww-proj-tag { font-family: 'JetBrains Mono', monospace; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.12); padding: .22rem .55rem; } body.light-mode .ww-proj-tag { color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.14); } .ww-proj-sections { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .ww-proj-section { padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); } .ww-proj-section:last-child { border-bottom: none; padding-bottom: 0; } body.light-mode .ww-proj-section { border-bottom-color: rgba(0,0,0,.08); } .ww-proj-lbl { font-family: 'JetBrains Mono', monospace; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff005c; margin-bottom: .45rem; } .ww-proj-section p { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: rgba(255,255,255,.52); line-height: 1.75; margin: 0; } body.light-mode .ww-proj-section p { color: rgba(0,0,0,.52); } /* Project card trigger */ .ww-proj-trigger { display: inline-flex; align-items: center; gap: .3rem; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #ff005c; background: none; border: none; padding: 0; cursor: pointer; margin-top: .6rem; transition: opacity .18s; } .ww-proj-trigger:hover { opacity: .65; } /* ===== TOOLTIP ===== */ #ww-tip { position: fixed; top: 0; left: 0; z-index: var(--z-tooltip, 580); background: rgba(4,4,4,.97); border: 1px solid rgba(255,255,255,.1); border-left: 2px solid #ff005c; color: rgba(255,255,255,.78); font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .03em; line-height: 1.65; padding: .55rem .95rem; max-width: 240px; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(0, 0); transition: opacity .13s, visibility .13s; white-space: normal; } #ww-tip.ww-tip-visible { opacity: 1; visibility: visible; } [data-tip] { cursor: help; } body.light-mode #ww-tip { background: rgba(240,237,232,.98); border-color: rgba(0,0,0,.1); border-left-color: #ff005c; color: rgba(0,0,0,.7); } /* ===== MODALS ===== */ .ww-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-modal, 500); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .ww-modal-overlay.is-open { opacity: 1; visibility: visible; } .ww-modal { background: #0d0d0d; border: 1px solid rgba(255,255,255,.1); border-top: 2px solid #ff005c; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 2rem 2rem 1.5rem; position: relative; transform: translateY(24px); transition: transform .32s cubic-bezier(.16,1,.3,1); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; } .ww-modal-overlay.is-open .ww-modal { transform: translateY(0); } .ww-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s, color .18s; } .ww-modal-close:hover { border-color: #ff005c; color: #ff005c; } .ww-modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: #ff005c; margin-bottom: .75rem; } .ww-modal-title { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 700; color: #f0ede8; margin: 0 0 .6rem; line-height: 1.35; } .ww-modal-intro { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: rgba(255,255,255,.45); line-height: 1.75; margin: 0 0 1.75rem; } .ww-steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0; } .ww-step { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.06); } .ww-step:first-child { padding-top: 0; } .ww-step:last-child { border-bottom: none; } .ww-step-num { font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: #ff005c; min-width: 22px; padding-top: 3px; } .ww-step-name { font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; color: #f0ede8; margin-bottom: .3rem; } .ww-step-desc { font-family: 'JetBrains Mono', monospace; font-size: .67rem; color: rgba(255,255,255,.48); line-height: 1.7; } .ww-modal-footer { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); text-align: right; } .ww-modal-cta { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ff005c; text-decoration: none; transition: opacity .18s; } .ww-modal-cta:hover { opacity: .7; } /* Process trigger button */ .ww-process-trigger { display: inline-flex; align-items: center; gap: .45rem; font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); background: none; border: 1px solid rgba(255,255,255,.2); padding: .38rem .8rem; cursor: pointer; transition: color .18s, border-color .18s; white-space: nowrap; } .ww-process-trigger:hover { color: #ff005c; border-color: rgba(255,0,92,.4); } /* Wejście do ankiety stoi obok bliźniaczego „Jak wygląda projekt?" — bez własnego koloru ginęło jako drugi szary przycisk w rzędzie. Selektor po atrybucie, żeby nie dokładać klasy. */ .ww-process-trigger[data-ankieta-open] { color: #ff005c; border-color: rgba(255,0,92,.45); background: rgba(255,0,92,.08); transition: color .18s, border-color .18s, background-color .18s, box-shadow .18s; } .ww-process-trigger[data-ankieta-open]:hover { color: #fff; border-color: #ff005c; background: rgba(255,0,92,.28); box-shadow: 0 4px 16px rgba(255,0,92,.3); } body.light-mode .ww-process-trigger[data-ankieta-open] { color: #e8004f; border-color: rgba(232,0,79,.45); background: rgba(232,0,79,.07); } body.light-mode .ww-process-trigger[data-ankieta-open]:hover { color: #fff; background: #e8004f; border-color: #e8004f; } /* Light mode */ body.light-mode .ww-modal { background: #f5f2ee; border-color: rgba(0,0,0,.1); border-top-color: #ff005c; } body.light-mode .ww-modal-close { border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.4); } body.light-mode .ww-modal-close:hover { border-color: #ff005c; color: #ff005c; } body.light-mode .ww-modal-title { color: #1e1c1c; } body.light-mode .ww-modal-intro { color: rgba(0,0,0,.48); } body.light-mode .ww-step { border-bottom-color: rgba(0,0,0,.08); } body.light-mode .ww-step-name { color: #1e1c1c; } body.light-mode .ww-step-desc { color: rgba(0,0,0,.5); } body.light-mode .ww-modal-footer { border-top-color: rgba(0,0,0,.1); } body.light-mode .ww-process-trigger { color: rgba(0,0,0,.65); border-color: rgba(0,0,0,.25); } body.light-mode .ww-process-trigger:hover { color: #ff005c; border-color: rgba(255,0,92,.35); } @media (max-width: 479px) { .ww-modal { padding: 1.5rem 1.25rem 1.25rem; } } /* ===== ANKIETA (modal ze strony głównej) ===================================== Korzysta z tego samego pudełka co pozostałe modale (.ww-modal-overlay/.ww-modal), więc dziedziczy tło, obramowanie, animację wejścia i tryb jasny. Poniżej tylko to, czego formularz potrzebuje ponad zwykły modal treściowy. Wybory to PRAWDZIWE ukryte pod wizualnym „chipem": klawiatura, czytnik ekranu i autouzupełnianie działają same, bez atrybutów ARIA, których i tak nikt nie utrzyma. Stan zaznaczenia rysuje `input:checked ~ span`. */ /* `overscroll-behavior: contain` — dojechanie kółkiem do końca ankiety nie przenosi przewijania na stronę pod spodem (scroll chaining). */ #ww-modal-ankieta .ww-modal { max-width: 680px; overscroll-behavior: contain; } /* Dymek chatbota i jego powitanie stoją na z-index 99990/99991 — na domyślnym 500 ankieta miała ucięty prawy bok. Modal ma być na wierzchu wszystkiego. */ #ww-modal-ankieta { z-index: 99995; } /* Ankieta to formularz do czytania i klikania, nie karta z tekstem — dostaje własną, większą skalę pisma niż zwykły modal treściowy (tam .72rem, tu .8rem+). Mono przy 10–11 px czytało się jak przypis, a przy siedmiu pytaniach z rzędu to męczy. */ #ww-modal-ankieta .ww-modal-title { font-size: clamp(1.15rem, 3.2vw, 1.5rem); } #ww-modal-ankieta .ww-modal-intro { font-size: .8rem; color: rgba(255,255,255,.62); margin-bottom: 1.4rem; } /* Pasek postępu — 3 kroki. Bez cyfr „1/3" w tekście: kreska mówi to samo szybciej. */ .ank-pasek { display: flex; gap: 4px; margin: 0 0 1.5rem; } .ank-pasek i { flex: 1; height: 3px; background: rgba(255,255,255,.12); transition: background .3s; } .ank-pasek i.is-on { background: #ff005c; } .ank-krok { display: none; } .ank-krok.is-active { display: block; } .ank-pyt { margin: 0 0 1.9rem; } .ank-pyt:last-child { margin-bottom: 0; } .ank-pyt-tytul { font-family: 'JetBrains Mono', monospace; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.45; margin: 0 0 .25rem; } .ank-pyt-sub { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0 0 .8rem; } .ank-pyt-tytul + .ank-opcje { margin-top: .85rem; } .ank-opcje { display: flex; flex-wrap: wrap; gap: .5rem; } .ank-chip { position: relative; display: inline-flex; cursor: pointer; } /* Input nie może mieć display:none — wtedy wypada z kolejności tabulacji. */ .ank-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .ank-chip span { font-family: 'JetBrains Mono', monospace; font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.8); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.2); padding: .6rem .9rem; transition: color .16s, border-color .16s, background-color .16s, transform .16s, box-shadow .16s; } /* Hover musi być widoczny od razu, bez wpatrywania się: pełna biel, akcentowa ramka, różowa poświata i milimetr uniesienia. Przy 30 chipach subtelność = brak sygnału. */ .ank-chip:hover span { color: #fff; border-color: #ff005c; background: rgba(255,0,92,.14); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(255,0,92,.18); } /* Zaznaczone = wypełnione na akcent. Ramka w kolorze akcentu (tak jak na hoverze) nie wystarczała: po najechaniu chip wyglądał identycznie jak wybrany i nie było wiadomo, co się właściwie kliknęło. Wypełnienie widać z drugiego końca pokoju. */ .ank-chip input:checked ~ span { color: #fff; border-color: #ff005c; background: #ff005c; box-shadow: 0 2px 10px rgba(255,0,92,.35); } .ank-chip:hover input:checked ~ span { background: #ff1a6d; border-color: #ff1a6d; } .ank-chip input:focus-visible ~ span { outline: 2px solid #ff005c; outline-offset: 2px; } /* Pola tekstowe: „Inne", adres strony, e-mail, telefon. */ .ank-pole { width: 100%; display: block; font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: #fff; line-height: 1.6; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.2); padding: .7rem .8rem; transition: border-color .16s, background-color .16s; } .ank-pole:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); } /* Bez tego pole adresu strony nie da się schować: własne `display:block` bije regułę `[hidden]` z arkusza przeglądarki. */ .ank-pole[hidden] { display: none; } .ank-pole::placeholder { color: rgba(255,255,255,.38); } .ank-pole:focus { outline: none; border-color: #ff005c; background: rgba(255,0,92,.06); } textarea.ank-pole { resize: vertical; min-height: 74px; } .ank-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } /* Oferta (audyt / konsultacja) — wyróżniona ramką z lewej, żeby czytało się jak propozycja ode mnie, a nie kolejne pytanie ankiety. */ .ank-oferta { border: 1px solid rgba(255,255,255,.14); border-left: 3px solid #ff005c; padding: .95rem 1rem; margin: 0 0 .9rem; background: rgba(255,255,255,.03); transition: background-color .16s, border-color .16s; } .ank-oferta:hover { background: rgba(255,0,92,.07); border-color: rgba(255,0,92,.4); border-left-color: #ff005c; } .ank-oferta[hidden] { display: none; } .ank-oferta-h { font-family: 'JetBrains Mono', monospace; font-size: .88rem; font-weight: 700; color: #fff; margin: 0 0 .35rem; } .ank-oferta-p { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0 0 .7rem; } .ank-check { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; } .ank-check input { margin: .2rem 0 0; accent-color: #ff005c; flex: 0 0 auto; width: 15px; height: 15px; } .ank-check span { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.5; transition: color .16s; } .ank-check:hover span { color: #fff; } .ank-check + .ank-pole { margin-top: .6rem; } .ank-zgoda { font-family: 'JetBrains Mono', monospace; font-size: .66rem; color: rgba(255,255,255,.42); line-height: 1.6; margin: .8rem 0 0; } .ank-zgoda a { color: rgba(255,255,255,.62); text-decoration: underline; } .ank-zgoda a:hover { color: #ff005c; } .ank-blad { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: #ff005c; line-height: 1.6; margin: .8rem 0 0; } .ank-blad[hidden] { display: none; } /* Stopka nawigacji: „Wstecz" po lewej, akcja po prawej — jak w każdym kreatorze. */ .ank-stopka { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); } .ank-btn { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7); padding: .7rem 1.3rem; cursor: pointer; transition: color .16s, border-color .16s, background-color .16s, opacity .16s, box-shadow .16s; } .ank-btn:hover { color: #fff; border-color: #ff005c; background: rgba(255,0,92,.12); } .ank-btn.prim { background: var(--highlight-btn, #e60052); border-color: var(--highlight-btn, #e60052); color: #fff; } .ank-btn.prim:hover { background: #ff1a6d; border-color: #ff1a6d; color: #fff; box-shadow: 0 4px 18px rgba(255,0,92,.35); } .ank-btn[disabled] { opacity: .45; cursor: default; } .ank-btn.cicho { border-color: transparent; color: rgba(255,255,255,.45); padding-left: 0; } .ank-btn.cicho:hover { color: #fff; border-color: transparent; background: none; } .ank-btn:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; } /* Ekran podziękowania — zastępuje formularz w tym samym pudełku. */ .ank-dzieki { text-align: center; padding: 1rem 0 .25rem; } .ank-dzieki-ikona { width: 44px; height: 44px; margin: 0 auto 1rem; border: 1px solid #ff005c; color: #ff005c; display: flex; align-items: center; justify-content: center; } .ank-dzieki .ww-modal-title { text-align: center; } .ank-dzieki .ww-modal-intro { text-align: center; margin-bottom: 1.25rem; } .ank-dzieki-akcje { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } /* Pigułka wracająca po zamknięciu modalu bez wypełnienia. Lewa krawędź jest ciasna, więc pozycja jest wyliczona, a nie „na oko": #cc-reopen (badge cookie) — bottom 16px, wys. 28px → zajęte 16–44px, ZAWSZE #section-toast — bottom 5rem, wys. ~24px → zajęte 80–104px, tylko ≥992px Stąd na telefonie pigułka siada nad badgem cookie (54px), a na desktopie ponad toastem sekcji (128px). Prawa strona odpada — tam są #back-to-top i czat, środek zajmuje #sticky-cta. */ .ank-pill { position: fixed; left: .75rem; bottom: 3.4rem; z-index: var(--z-modal, 500); display: inline-flex; align-items: center; gap: .5rem; font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; background: #0d0d0d; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.14); border-left: 2px solid #ff005c; padding: .55rem .8rem; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s, color .16s, border-color .16s; } .ank-pill.is-on { opacity: 1; transform: translateY(0); } .ank-pill:hover { color: #fff; background: rgba(255,0,92,.2); border-color: #ff005c; border-left-color: #ff005c; box-shadow: 0 4px 16px rgba(255,0,92,.28); } .ank-pill-x { background: none; border: none; color: rgba(255,255,255,.3); font-size: .8rem; line-height: 1; padding: 0 0 0 .2rem; cursor: pointer; } .ank-pill-x:hover { color: #ff005c; } /* Odnośnik tekstowy do ankiety (stopka strony) — wygląda jak reszta drobnych linków. */ /* Wejście do ankiety w stopce. Wygląda jak sąsiednie wiersze .sub_text (ten sam rozmiar, ta sama przygaszona biel), więc nie krzyczy — ale podkreślenie i kursor mówią, że to klikalne. Ikona dostaje kolor akcentu jak pozostałe ikony stopki. */ .ww-ankieta-link { display: flex; align-items: center; gap: .4rem; /* NIE „color: inherit" — .main_category_wrapp w stopce dziedziczy w dół rgba(18,18,18,0) (alfa 0), przez co w trybie ciemnym przycisk był całkowicie przezroczysty (1,00:1). Sąsiednie wiersze tego nie widzą, bo .sub_text nadpisuje kolor własną regułą — tu robimy to samo. */ font-family: inherit; font-size: var(--fs-xs); color: var(--untitled-ui--white, #e3e1e1); background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; opacity: .7; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.25); transition: opacity .16s, color .16s, text-decoration-color .16s; } .ww-ankieta-link svg { width: 12px; height: 12px; stroke-width: 1.6; flex-shrink: 0; color: var(--highlight, #ff005c); } .ww-ankieta-link:hover { opacity: 1; color: #ff005c; text-decoration-color: currentColor; } .ww-ankieta-link:focus-visible { outline: 2px solid #ff005c; outline-offset: 3px; border-radius: 3px; opacity: 1; } /* w jasnym przycisk dziedziczył --text-1 i był czytelny (6,8:1) — zapisujemy to wprost, żeby powyższy kolor dla ciemnego nie przeciekł na jasny */ body.light-mode .ww-ankieta-link { color: var(--text-1, #0a0909); text-decoration-color: rgba(0,0,0,.25); } body.light-mode .ww-ankieta-link:hover { color: #e8004f; } /* Wiersze stopki niosą inline `opacity:.7`, więc czerwień #b3003a z ww-interactions.css dochodzi do oka wygaszona i daje 3,76:1 — a podniesienie alfy nie wchodzi w grę, bo krycie ustawia HTML. Zostaje przyciemnienie odcienia, ale TYLKO w stopce: globalna reguła obsługuje też karty bloga, gdzie tego wygaszenia nie ma. */ body.light-mode .footer-list .sub_text { color: #7a0028 !important; } /* Tryb jasny */ body.light-mode .ank-pasek i { background: rgba(0,0,0,.12); } body.light-mode .ank-pasek i.is-on { background: #e8004f; } body.light-mode #ww-modal-ankieta .ww-modal-intro { color: rgba(0,0,0,.6); } body.light-mode .ank-pyt-tytul { color: #1e1c1c; } body.light-mode .ank-pyt-sub { color: rgba(0,0,0,.55); } body.light-mode .ank-chip span { color: rgba(0,0,0,.78); border-color: rgba(0,0,0,.24); background: rgba(0,0,0,.02); } body.light-mode .ank-chip:hover span { color: #1e1c1c; border-color: #e8004f; background: rgba(232,0,79,.1); box-shadow: 0 3px 12px rgba(232,0,79,.16); } /* Id w selektorze nie jest ozdobą: tryb jasny ma globalną regułę `body.light-mode span:not(...) { color: inherit }` o wyższej wadze niż sama klasa — bez #ww-modal-ankieta zaznaczony chip miał czarny napis na różowym tle. */ body.light-mode #ww-modal-ankieta .ank-chip input:checked ~ span { color: #fff; border-color: #e8004f; background: #e8004f; box-shadow: 0 2px 10px rgba(232,0,79,.3); } body.light-mode .ank-chip:hover input:checked ~ span { background: #ff1a6d; border-color: #ff1a6d; } body.light-mode .ank-pole { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.2); color: #1e1c1c; } body.light-mode .ank-pole::placeholder { color: rgba(0,0,0,.38); } body.light-mode .ank-pole:hover { border-color: rgba(0,0,0,.4); background: rgba(0,0,0,.04); } body.light-mode .ank-pole:focus { border-color: #e8004f; background: rgba(232,0,79,.05); } body.light-mode .ank-oferta { border-color: rgba(0,0,0,.12); border-left-color: #e8004f; background: rgba(0,0,0,.02); } body.light-mode .ank-oferta:hover { background: rgba(232,0,79,.06); border-color: rgba(232,0,79,.4); border-left-color: #e8004f; } body.light-mode .ank-oferta-h { color: #1e1c1c; } body.light-mode .ank-oferta-p { color: rgba(0,0,0,.6); } body.light-mode .ank-check span { color: rgba(0,0,0,.82); } body.light-mode .ank-check:hover span { color: #1e1c1c; } body.light-mode .ank-zgoda { color: rgba(0,0,0,.5); } body.light-mode .ank-zgoda a { color: rgba(0,0,0,.66); } body.light-mode .ank-zgoda a:hover { color: #e8004f; } body.light-mode .ank-blad { color: #e8004f; } body.light-mode .ank-stopka { border-top-color: rgba(0,0,0,.1); } body.light-mode .ank-btn { color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.24); } body.light-mode .ank-btn:hover { color: #1e1c1c; border-color: #e8004f; background: rgba(232,0,79,.1); } body.light-mode .ank-btn.prim { color: #fff; } body.light-mode .ank-btn.prim:hover { color: #fff; background: #ff1a6d; border-color: #ff1a6d; } body.light-mode .ank-btn.cicho { color: rgba(0,0,0,.45); border-color: transparent; } body.light-mode .ank-btn.cicho:hover { color: #1e1c1c; background: none; border-color: transparent; } body.light-mode .ank-dzieki-ikona { border-color: #e8004f; color: #e8004f; } body.light-mode .ank-pill { background: #f5f2ee; color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.12); border-left-color: #e8004f; } body.light-mode .ank-pill:hover { color: #1e1c1c; background: rgba(232,0,79,.12); border-color: #e8004f; border-left-color: #e8004f; } body.light-mode .ank-pill-x { color: rgba(0,0,0,.3); } @media (min-width: 992px) { .ank-pill { left: 1.75rem; bottom: 8rem; } } @media (max-width: 479px) { .ank-dwa { grid-template-columns: 1fr; } /* Chipy na telefonie muszą być klikalne kciukiem, nie kursorem. */ .ank-chip span { padding: .65rem .85rem; font-size: .78rem; } .ank-pyt-tytul { font-size: .88rem; } } /* Kto wyłączył animacje, ten nie chce też wjeżdżającej pigułki ani skaczących chipów. */ @media (prefers-reduced-motion: reduce) { .ank-pill { transition: opacity .01ms; transform: none; } .ank-chip:hover span { transform: none; } } /* ---- 1. Scroll progress ---- */ #page-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--highlight-btn, #e60052); box-shadow: 0 0 8px rgba(255,0,92,.55); z-index: var(--z-progress, 550); pointer-events: none; transform-origin: left center; transform: scaleX(0); will-change: transform; } /* ---- 2. Back-to-top ---- */ #back-to-top { position: fixed; bottom: 5rem; right: 1.75rem; width: 40px; height: 40px; background: rgba(4,4,4,.9); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s, border-color .18s, color .18s, background .18s; z-index: var(--z-sticky, 570); -webkit-tap-highlight-color: transparent; } #back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } #back-to-top:hover { border-color: #ff005c; color: #ff005c; background: rgba(255,0,92,.07); } /* ---- 3. Sticky CTA ---- */ #sticky-cta { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(72px); background: var(--highlight-btn, #e60052); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .6rem 1.3rem; display: flex; align-items: center; gap: .5rem; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, transform .35s cubic-bezier(.34,1.56,.64,1), background .18s; z-index: var(--z-sticky, 570); white-space: nowrap; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 22px rgba(255,0,92,.28); } #sticky-cta.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } #sticky-cta:hover { background: #cc004d; } /* ---- 4. Section toast ---- */ #section-toast { position: fixed; bottom: 5rem; left: 1.75rem; background: rgba(4,4,4,.93); border: 1px solid rgba(255,255,255,.08); border-left: 2px solid #ff005c; color: rgba(255,255,255,.6); font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; padding: .42rem .8rem; opacity: 0; visibility: hidden; transform: translateX(-14px); transition: opacity .22s, visibility .22s, transform .22s; z-index: var(--z-toast, 560); pointer-events: none; } #section-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(0); } /* Mobile: hide sticky CTA + toast */ @media (max-width: 991px) { #sticky-cta { display: none !important; } #section-toast { display: none !important; } #back-to-top { right: 29px; bottom: 84px; width: 36px; height: 36px; } } @media (max-width: 480px) { /* Mobile: strzalka nad chmurka czatu (launcher 46px @ right16/bottom16) */ #back-to-top { right: 21px; bottom: 72px; width: 36px; height: 36px; } } /* Light mode */ body.light-mode #back-to-top { background: rgba(240,237,232,.95); border-color: rgba(0,0,0,.14); color: rgba(0,0,0,.45); } body.light-mode #back-to-top:hover { border-color: #ff005c; color: #ff005c; background: rgba(255,0,92,.05); } body.light-mode #section-toast { background: rgba(240,237,232,.96); border-color: rgba(0,0,0,.1); border-left-color: #ff005c; color: rgba(0,0,0,.55); } #page-loader { position: fixed; inset: 0; z-index: 1999; background: #080808; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } #page-loader.is-active { opacity: 1; visibility: visible; pointer-events: all; } #page-loader-ring { width: 32px; height: 32px; border: 2px solid rgba(255,255,255,0.08); border-top-color: #ff005c; border-radius: 50%; animation: pl-spin 0.65s linear infinite; } @keyframes pl-spin { to { transform: rotate(360deg); } } html.html-light-mode #page-loader { background: #f0ede8; } html.html-light-mode #page-loader-ring { border-color: rgba(0,0,0,0.07); border-top-color: #ff005c; } /* ══════════════════════════════════════════════════════════════ SEKCJA „6_ FAQ" — przebudowa 2026-08-15 ────────────────────────────────────────────────────────────── Tryb czytania: człowiek ma ZROZUMIEĆ, a nie dać się przekonać. Stąd dwie kolumny — lewa szyna (szukanie + kategorie + licznik) zostaje w zasięgu wzroku, gdy prawa lista jedzie w dół. WAŻNE dla każdej reguły niżej: `css/lightmode.css` ma zbiorczą regułę `body.light-mode span:not(…) { color: inherit }` o wysokiej specyficzności, a `css/lm-fixes.css` dokłada `!important` na `.faq-q` i `.faq-q span`. Dlatego (a) każdy selektor idzie przez `#FAQ` (id wygrywa z dowolną liczbą klas), (b) przebudowana sekcja ma WŁASNE nazwy klas `fq-*` — `faq-*` zostaje przy akordeonie w cenniku (`#Cena`) i nie może się z tym mieszać. ══════════════════════════════════════════════════════════════ */ #FAQ { --fq-line: rgba(255,255,255,.09); --fq-line-2: rgba(255,255,255,.18); --fq-ink: var(--text-1, #f2f0f2); --fq-body: var(--text-body, #cac8ca); --fq-dim: var(--text-muted, #969496); --fq-acc: var(--highlight, #ff005c); --fq-pole: rgba(255,255,255,.035); --fq-ease: cubic-bezier(.16, 1, .3, 1); } body.light-mode #FAQ { --fq-line: rgba(0,0,0,.13); --fq-line-2: rgba(0,0,0,.26); --fq-pole: rgba(0,0,0,.035); } /* ── układ ── */ #FAQ .fq-uklad { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; margin-top: 2.25rem; } #FAQ .fq-szyna { position: sticky; top: 104px; } @media (max-width: 991px) { #FAQ .fq-uklad { grid-template-columns: 1fr; gap: 1.5rem; } #FAQ .fq-szyna { position: static; } } #FAQ .fq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── nagłówek sekcji ── */ #FAQ .fq-top { margin-bottom: .5rem; } #FAQ .fq-tytul { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 700; color: var(--fq-ink); margin: 0 0 .7rem; text-wrap: balance; } #FAQ .fq-lead { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm, .875rem); line-height: 1.7; color: var(--fq-body); margin: 0; max-width: 46ch; } /* ── szukanie ── */ #FAQ .fq-pole-wrap { position: relative; } #FAQ .fq-pole { width: 100%; box-sizing: border-box; background: var(--fq-pole); border: 1px solid var(--fq-line); color: var(--fq-ink); font-family: 'JetBrains Mono', monospace; font-size: .8rem; padding: .72rem 2.4rem .72rem 2.3rem; outline: none; transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none; } #FAQ .fq-pole::placeholder { color: var(--fq-dim); } #FAQ .fq-pole::-webkit-search-cancel-button { display: none; } #FAQ .fq-pole:focus-visible { border-color: var(--fq-acc); background: color-mix(in srgb, var(--fq-acc) 5%, transparent); } /* Lupa rysowana CSS-em: kółko + trzonek. Żadnych znaków Unicode w roli ikony. */ #FAQ .fq-lupa { position: absolute; left: .85rem; top: 50%; width: 11px; height: 11px; margin-top: -6px; pointer-events: none; color: var(--fq-dim); } #FAQ .fq-lupa::before { content: ''; position: absolute; inset: 0 3px 3px 0; border: 1.4px solid currentColor; border-radius: 50%; } #FAQ .fq-lupa::after { content: ''; position: absolute; right: 0; bottom: 0; width: 5px; height: 1.4px; background: currentColor; transform: rotate(45deg); transform-origin: right center; } #FAQ .fq-czysc { position: absolute; right: .5rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--fq-dim); opacity: 0; visibility: hidden; transition: opacity .18s, color .18s; } #FAQ .fq-czysc.is-on { opacity: 1; visibility: visible; } #FAQ .fq-czysc:hover { color: var(--fq-acc); } #FAQ .fq-czysc::before, #FAQ .fq-czysc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.4px; margin: -.7px 0 0 -5.5px; background: currentColor; } #FAQ .fq-czysc::before { transform: rotate(45deg); } #FAQ .fq-czysc::after { transform: rotate(-45deg); } /* ── kategorie ── */ #FAQ .fq-kat { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; } #FAQ .fq-kat-btn { background: none; border: 1px solid var(--fq-line); color: var(--fq-dim); font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: .42rem .62rem; cursor: pointer; transition: color .18s, border-color .18s, background .18s; } #FAQ .fq-kat-btn:hover { color: var(--fq-ink); border-color: var(--fq-line-2); } #FAQ .fq-kat-btn[aria-pressed="true"] { color: var(--fq-acc); border-color: var(--fq-acc); background: color-mix(in srgb, var(--fq-acc) 7%, transparent); } #FAQ .fq-kat-n { opacity: .55; margin-left: .3rem; font-variant-numeric: tabular-nums; } #FAQ .fq-licznik { margin: 1rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fq-dim); } /* lightmode.css wali `body.light-mode p{color:…!important}` — bez tego licznik krzyczy tak samo jak treść odpowiedzi i traci rolę podpisu */ body.light-mode #FAQ .fq-licznik { color: var(--fq-dim) !important; } /* ── lista pytań ── */ #FAQ .fq-lista { border-top: 1px solid var(--fq-line); } #FAQ .fq-poz { border-bottom: 1px solid var(--fq-line); position: relative; padding-left: 0; transition: padding-left .38s var(--fq-ease); } /* Kreska akcentu wyjeżdża z lewej dopiero po otwarciu — jeden sygnał „to jest to, co teraz czytasz", bez malowania całego wiersza. */ #FAQ .fq-poz::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fq-acc); transform: scaleY(0); transform-origin: top; transition: transform .38s var(--fq-ease); } #FAQ .fq-poz.is-open { padding-left: 1rem; } #FAQ .fq-poz.is-open::before { transform: scaleY(1); } #FAQ .fq-poz.is-hidden { display: none; } #FAQ .fq-head { display: flex; align-items: flex-start; gap: 1rem; width: 100%; padding: 1.05rem 0; background: none; border: 0; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base, .9375rem); line-height: 1.5; color: var(--fq-ink); text-align: left; transition: color .18s; } #FAQ .fq-head:hover { color: var(--fq-acc); } #FAQ .fq-head:focus-visible { outline: 1px solid var(--fq-acc); outline-offset: 3px; } #FAQ .fq-q { flex: 1 1 auto; min-width: 0; } /* Znacznik +/× rysowany dwiema kreskami; obrót o 135° zamienia jedno w drugie. */ #FAQ .fq-ico { flex: 0 0 auto; position: relative; width: 13px; height: 13px; margin-top: .32rem; color: var(--fq-dim); transition: transform .42s var(--fq-ease), color .22s; } #FAQ .fq-ico::before, #FAQ .fq-ico::after { content: ''; position: absolute; background: currentColor; } #FAQ .fq-ico::before { left: 0; top: 50%; width: 13px; height: 1.4px; margin-top: -.7px; } #FAQ .fq-ico::after { top: 0; left: 50%; width: 1.4px; height: 13px; margin-left: -.7px; } #FAQ .fq-head:hover .fq-ico { color: var(--fq-acc); } #FAQ .fq-poz.is-open .fq-ico { transform: rotate(135deg); color: var(--fq-acc); } #FAQ .fq-a { max-height: 0; overflow: hidden; transition: max-height .42s var(--fq-ease); } #FAQ .fq-a-in { padding: 0 1.5rem 1.5rem 0; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm, .875rem); line-height: 1.8; color: var(--fq-body); max-width: 68ch; } #FAQ .fq-a-in p { margin: 0 0 .85rem; } #FAQ .fq-a-in p:last-child { margin-bottom: 0; } #FAQ .fq-a-in strong { color: var(--fq-ink); font-weight: 600; } #FAQ .fq-a-in a { color: var(--fq-acc); text-decoration: underline; text-underline-offset: 3px; } /* Lista „co dostajesz" — ptaszek rysowany CSS-em, nie znakiem ✓ */ #FAQ .fq-ul { list-style: none; margin: 0 0 .85rem; padding: 0; } #FAQ .fq-ul li { position: relative; padding-left: 1.35rem; margin-bottom: .3rem; } #FAQ .fq-ul li::before { content: ''; position: absolute; left: .15rem; top: .55em; width: 5px; height: 9px; border: solid var(--fq-acc); border-width: 0 1.4px 1.4px 0; transform: rotate(43deg); } /* Widełki cenowe — nazwa po lewej, kwota po prawej, cyfry w kolumnie */ #FAQ .fq-tab { display: grid; gap: .1rem; margin: 0 0 .9rem; } #FAQ .fq-tab-w { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; border-bottom: 1px dotted var(--fq-line); } #FAQ .fq-tab-w > span:first-child { flex: 1 1 auto; } #FAQ .fq-kwota { flex: 0 0 auto; color: var(--fq-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Podświetlenie trafienia w wyszukiwarce */ #FAQ mark.fq-mark { background: color-mix(in srgb, var(--fq-acc) 20%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; } /* Plakietka „trafienie w odpowiedzi" — mówi, dlaczego pozycja została na liście */ #FAQ .fq-w-odp { display: inline-block; margin-left: .5rem; vertical-align: 1px; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fq-acc); border: 1px solid color-mix(in srgb, var(--fq-acc) 45%, transparent); padding: .1rem .3rem; } /* Pusty stan */ #FAQ .fq-pusto { padding: 2rem 0; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm, .875rem); color: var(--fq-body); } #FAQ .fq-pusto button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fq-acc); font: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Stopka sekcji — jedyne miejsce, gdzie FAQ o coś prosi */ #FAQ .fq-stopka { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--fq-line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; justify-content: space-between; } #FAQ .fq-stopka-t { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm, .875rem); color: var(--fq-ink); margin: 0; } #FAQ .fq-stopka-p { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--fq-dim); margin: .3rem 0 0; } /* ── ruch: wiersze wjeżdżają po kolei, ale TYLKO gdy JS to włączy ── Domyślnie wszystko jest widoczne — brak JS albo `prefers-reduced-motion` nie może zostawić pustej sekcji. */ #FAQ.fq-anim .fq-poz { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--fq-ease), transform .55s var(--fq-ease), padding-left .38s var(--fq-ease); transition-delay: calc(var(--fq-i, 0) * 42ms); } #FAQ.fq-anim .fq-poz.is-in { opacity: 1; transform: none; } /* ── 3. Availability badge ───────────────────────────────────── */ #ww-availability { display: flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,237,232,0.6); margin-bottom: 0.75rem; margin-left: auto; margin-right: auto; padding: 0.35rem 0.75rem 0.35rem 0.5rem; border: 1px solid rgba(255,255,255,0.08); width: fit-content; } #ww-availability .avail-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } #ww-availability.is-available .avail-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); animation: avail-pulse 2.2s ease-in-out infinite; } #ww-availability.is-busy .avail-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.4); } @keyframes avail-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } body.light-mode #ww-availability { color: rgba(48,46,46,0.55); border-color: rgba(0,0,0,0.1); } /* ── 4. Warsaw clock ─────────────────────────────────────────── */ #ww-clock-wrap { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; /* 0.35 dawało 2,75:1 — sam kolor jest dobry (przy pełnym kryciu 17,8:1), gasiła go alfa. 0.5 to minimum, które przechodzi próg (4,5:1), a zegar dalej pozostaje przygaszony względem reszty nagłówka. */ color: rgba(240,237,232,0.5); letter-spacing: 0.05em; } #ww-clock-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #ww-clock-dot.open { background: #22c55e; } #ww-clock-dot.closed { background: rgba(255,255,255,0.2); } /* w jasnym tło jest jaśniejsze, więc ta sama alfa gasi mocniej: 0.4 dawało 2,17:1 (najgorszy wynik na stronie). 0.7 to próg — bierzemy 0.72 na zapas. */ body.light-mode #ww-clock-wrap { color: rgba(48,46,46,0.72); } /* 5. Podpowiedzi wierszy tabeli porównania — zastąpione rozwijanym wierszem .cmp-note (styl w bloku „4.5_ PORÓWNANIE"). Tooltip na hover był ucinany przez overflow-x tabeli i nie istniał na dotyku. */ /* ═══ SECTION TOOLTIP CLOUDS v3 ═══ */ /* ── Keyframes ── */ @keyframes stcPop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.15); } 80% { transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes stcOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.75); } } @keyframes stcContentIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes stcBtnIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } /* ── Container — pointer-events: none żeby nie blokować scrollowania pod spodem ── */ #stc-cloud { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 890; pointer-events: none; } /* ── Mini-clouds (trail) ── */ .stc-tb { position: absolute; border-radius: 50%; background: rgba(12, 12, 12, 0.94); border: 1px solid rgba(255, 0, 92, 0.30); box-shadow: 0 2px 8px rgba(0,0,0,0.5); opacity: 0; transform: scale(0); transform-origin: center center; pointer-events: none; } .stc-tb-1 { width: 8px; height: 8px; bottom: -28px; right: 5px; } .stc-tb-2 { width: 14px; height: 14px; bottom: -20px; right: 21px; } .stc-tb-3 { width: 22px; height: 22px; bottom: -10px; right: 44px; } /* ── Główna chmurka — ostre krawędzie, jednolite tło (bez gradientów) ── */ .stc-bubble { position: relative; width: 244px; background: #0b0a0a; /* jednolity kolor, jak tło strony */ border: 1px solid rgba(255, 0, 92, 0.38); border-radius: 0; /* ostre obramowanie */ padding: 16px 18px 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8); opacity: 0; transform: scale(0); transform-origin: right bottom; pointer-events: none; /* klik przechodzi przez bąbelek; nawigacja włącza go u siebie */ } /* Pasek akcentowy na górze — pełna szerokość, jednolity kolor */ .stc-bubble::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--highlight-btn, #e60052); } /* Ogon → prawy bok */ .stc-bubble::after { content: ''; position: absolute; right: -9px; bottom: 30px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 9px; border-color: transparent transparent transparent #0b0a0a; filter: drop-shadow(1px 0 0 rgba(255, 0, 92, 0.38)); } /* ── Treść ── */ .stc-content { opacity: 0; } .stc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .stc-emoji { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255, 0, 92, 0.45); background: rgba(255, 0, 92, 0.06); color: #ff2070; line-height: 1; } .stc-emoji svg { width: 18px; height: 18px; stroke-width: 1.5; } /* Licznik „03 / 10" */ .stc-count { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.38); white-space: nowrap; } .stc-title { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: #ff2070; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; line-height: 1.3; } .stc-body { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: rgba(225, 220, 220, 0.90); line-height: 1.75; margin-bottom: 12px; } /* Pasek postępu — która to sekcja z wszystkich */ .stc-prog { height: 2px; background: rgba(255, 255, 255, 0.10); margin-bottom: 11px; } .stc-prog-bar { display: block; height: 100%; width: 0; background: var(--highlight-btn, #e60052); transition: width 0.45s cubic-bezier(.16, 1, .3, 1); } @media (prefers-reduced-motion: reduce) { .stc-prog-bar { transition: none; } } .stc-nav { border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 9px; display: flex; flex-direction: column; gap: 2px; } /* Wiersze nawigacji są przyciskami — muszą przyjmować kliknięcia, mimo że sam bąbelek ma pointer-events: none */ .stc-nav-row { pointer-events: auto; display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-left: 2px solid transparent; padding: 4px 6px 4px 7px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: rgba(255, 255, 255, 0.42); line-height: 1.45; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .stc-nav-row:hover { color: #fff; background: rgba(255, 0, 92, 0.10); border-left-color: #ff005c; } .stc-nav-row:focus-visible { outline: 2px solid #ff005c; outline-offset: 1px; } .stc-nav-row[data-dir="up"]::before { content: '↑ '; color: #ff2070; } .stc-nav-row[data-dir="down"]::before { content: '↓ '; color: #ff2070; } /* ── Przycisk zamknięcia — POZA bąbelkiem, własna pozycja w #stc-cloud ── Nie jest dotknięty przez transform: scale() bąbelka. pointer-events: auto wyłączone domyślnie, włączamy po animacji wejścia. ── */ .stc-close { position: absolute; top: -2px; right: -2px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(20, 18, 18, 0.96); color: rgba(255,255,255,0.50); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; outline: none; z-index: 2; pointer-events: none; /* aktywny dopiero gdy stc-in */ opacity: 0; transform: scale(0.5); transition: background 0.18s, color 0.18s, border-color 0.18s; } .stc-close:hover { background: rgba(255, 0, 92, 0.20); border-color: rgba(255, 0, 92, 0.55); color: #ff005c; } /* Włącz przycisk PO zakończeniu animacji bąbelka (delay 0.95s) */ #stc-cloud.stc-in .stc-close { animation: stcBtnIn 0.28s cubic-bezier(0.34,1.56,0.64,1) 0.95s both; pointer-events: auto; } /* Wyłącz podczas wyjścia */ #stc-cloud.stc-out .stc-close { pointer-events: none !important; animation: stcOut 0.15s ease both !important; } /* ══ ANIMACJA WEJŚCIA ══ */ #stc-cloud.stc-in .stc-tb-1 { animation: stcPop 0.36s cubic-bezier(0.34,1.56,0.64,1) 0.00s both; } #stc-cloud.stc-in .stc-tb-2 { animation: stcPop 0.38s cubic-bezier(0.34,1.56,0.64,1) 0.13s both; } #stc-cloud.stc-in .stc-tb-3 { animation: stcPop 0.40s cubic-bezier(0.34,1.56,0.64,1) 0.27s both; } #stc-cloud.stc-in .stc-bubble { animation: stcPop 0.48s cubic-bezier(0.34,1.56,0.64,1) 0.44s both; } #stc-cloud.stc-in .stc-content { animation: stcContentIn 0.36s ease 0.78s both; } /* ══ ANIMACJA WYJŚCIA ══ */ #stc-cloud.stc-out .stc-tb, #stc-cloud.stc-out .stc-bubble, #stc-cloud.stc-out .stc-content { animation: stcOut 0.22s ease both !important; } /* ── Light mode ── */ body.light-mode .stc-tb { background: rgba(246, 243, 239, 0.98); border-color: rgba(232, 0, 79, 0.25); } /* Tło ciemniejsze niż strona (#f0ede8) — wcześniej bąbelek był jaśniejszy od tła i „znikał". Jednolity kolor, bez gradientu, mocniejsza ramka. */ body.light-mode .stc-bubble { background: #e4ded4; border-color: rgba(232, 0, 79, 0.40); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.20); } body.light-mode .stc-bubble::before { background: #e8004f; } body.light-mode .stc-bubble::after { border-left-color: #e4ded4; filter: drop-shadow(1px 0 0 rgba(232, 0, 79, 0.40)); } body.light-mode .stc-count { color: rgba(48, 44, 44, 0.72); } /* 4,7:1 — WCAG AA */ body.light-mode .stc-title { color: #b00042; } /* 5,37:1 na #e4ded4 — WCAG AA */ body.light-mode .stc-body { color: rgba(30, 27, 27, 0.92); } body.light-mode .stc-prog { background: rgba(0, 0, 0, 0.12); } body.light-mode .stc-prog-bar { background: #e8004f; } body.light-mode .stc-nav { border-top-color: rgba(0, 0, 0, 0.14); } body.light-mode .stc-nav-row { color: rgba(40, 37, 37, 0.68); } body.light-mode .stc-nav-row:hover { color: #1b1818; background: rgba(232, 0, 79, 0.10); border-left-color: #e8004f; } body.light-mode .stc-nav-row:focus-visible { outline-color: #e8004f; } body.light-mode .stc-nav-row[data-dir="up"]::before, body.light-mode .stc-nav-row[data-dir="down"]::before { color: #e8004f; } body.light-mode .stc-close { background: rgba(247,244,240,0.98); border-color: rgba(0,0,0,0.14); color: rgba(48,46,46,0.50); } body.light-mode .stc-close:hover { background: rgba(232,0,79,0.12); border-color: rgba(232,0,79,0.40); color: #e8004f; } /* ── Tylko desktop ── */ @media (max-width: 991px) { #stc-cloud { display: none !important; } } /* ── Logo w stopce: wymiary w HTML rezerwują miejsce (bez skoku układu), ale bez height:auto atrybut height=183 wymusiłby stałą wysokość i rozciągnął logo na wąskim ekranie (webflow.css daje tylko max-width:100%). ── */ .image-12 { height: auto; }