/* 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); } .pc-tag.tech { border-color: rgba(255,0,92,.35); color: rgba(255,0,92,.85); } /* 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; } .pc-hours-badge span { color: rgba(255,0,92,.75); 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} } /* ── Template Gallery ──────────────────────────────── */ .tmpl-tab-bar { display: flex; gap: .5rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .tmpl-tab-btn { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .55rem 1.4rem; border: 1px solid rgba(255,255,255,.15); background: transparent; color: rgba(240,237,232,.5); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .tmpl-tab-btn.is-active, .tmpl-tab-btn:hover { border-color: #ff005c; color: #ff005c; background: rgba(255,0,92,.06); } .tmpl-tab-btn span { opacity: .6; margin-left: .3em; } /* card grid */ #tmpl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; } @media (max-width: 991px) { #tmpl-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 479px) { #tmpl-grid { grid-template-columns: 1fr; } } /* Mobile slider — karty w sekcji Projekty Webflow & Shopify */ @media (max-width: 991px) { /* col-d-10 default to 83.33% flex-basis i jest centrowany w .padding-section (display:flex column + align-items:center) — bez definitywnej szerokości procentowe szerokości dzieci rozwiązują się do max-content i sekcja ucieka poza ekran. Wymuszamy 100% szerokości, by łańcuch procentowy się domknął. */ #Projekty-webflow-section .col-d-10 { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } #Projekty-webflow-section .posts_list-wrapper { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } } @media (max-width: 767px) { #tmpl-grid { display: none !important; } #tmpl-show-more { display: none !important; } #tmpl-mob-slider { overflow: hidden !important; max-width: 100%; min-width: 0; box-sizing: border-box; } #tmpl-mob-slider .mob-slider-viewport { overflow: visible !important; padding: 1rem; max-width: 100%; min-width: 0; box-sizing: border-box; } #tmpl-mob-slider .mob-slider-track { min-width: 0; } .mob-slide-tmpl { flex-shrink: 0; width: calc(100% - 2rem); min-width: 0; } .mob-slide-tmpl .tmpl-card { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .mob-slide-tmpl .tmpl-card-content, .mob-slide-tmpl .tmpl-card-text { min-width: 0; max-width: 100%; } .mob-slide-tmpl .tmpl-card-title, .mob-slide-tmpl .tmpl-card-desc { overflow-wrap: anywhere; word-wrap: break-word; } } /* mock browser preview */ .tmpl-preview { position: relative; overflow: hidden; height: 195px; } .tmpl-chrome { position: absolute; top: 0; left: 0; right: 0; height: 26px; background: rgba(8,8,8,.85); display: flex; align-items: center; gap: 6px; padding: 0 10px; z-index: 2; } .tmpl-chrome-dots { display: flex; gap: 4px; } .tmpl-chrome-dot { width: 8px; height: 8px; border-radius: 50%; } .tmpl-chrome-dot:nth-child(1) { background: #ff5f57; } .tmpl-chrome-dot:nth-child(2) { background: #febc2e; } .tmpl-chrome-dot:nth-child(3) { background: #28c840; } .tmpl-chrome-url { flex: 1; height: 15px; background: rgba(255,255,255,.08); border-radius: 3px; display: flex; align-items: center; padding: 0 8px; font-size: 9px; letter-spacing: .04em; color: rgba(255,255,255,.35); font-family: monospace; } .tmpl-page { position: absolute; top: 26px; left: 0; right: 0; bottom: 0; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 7px; } .tmpl-page-nav { height: 12px; background: rgba(255,255,255,.05); border-radius: 2px; } .tmpl-page-hero { flex: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; } .tmpl-page-hero-h { height: 8px; width: 52%; border-radius: 10px; background: var(--tc-accent, rgba(255,255,255,.5)); opacity: .75; } .tmpl-page-hero-s { height: 5px; width: 36%; border-radius: 10px; background: rgba(255,255,255,.2); } .tmpl-page-cols { display: flex; gap: 5px; padding-bottom: 12px; } .tmpl-page-col { flex: 1; height: 32px; border-radius: 2px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.04); } .tmpl-plat-badge { position: absolute; top: 34px; left: 10px; z-index: 2; font-size: 8px; font-family: monospace; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: rgba(0,0,0,.65); } .tmpl-plat-badge.wf { color: #4353ff; border: 1px solid rgba(67,83,255,.4); } .tmpl-plat-badge.sh { color: #95bf47; border: 1px solid rgba(149,191,71,.4); } .tmpl-cat-badge { position: absolute; bottom: 10px; right: 10px; z-index: 2; font-size: 8px; font-family: var(--font-family-1,'JetBrains Mono'),monospace; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: rgba(0,0,0,.55); border: 1px solid var(--tc-accent, rgba(255,255,255,.2)); color: var(--tc-accent, rgba(255,255,255,.6)); } /* card image-overlay reuse */ .tmpl-preview .post-img-overlay { background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; } /* ── bottom CTA strip ─── */ .tmpl-cta-strip { margin-top: 3rem; padding: 1.75rem 2rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .tmpl-cta-strip-title { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(.95rem,1.8vw,1.15rem); font-weight: 700; color: #f0ede8; margin: 0 0 .35rem; } .tmpl-cta-strip-sub { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .78rem; color: rgba(240,237,232,.45); margin: 0; } /* ── modal ───────────────── */ .tmpl-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 1rem; } .tmpl-modal[hidden] { display: none !important; } .tmpl-modal-box { background: #0e0e0e; border: 1px solid rgba(255,255,255,.1); width: 100%; max-width: 660px; max-height: 92vh; overflow-y: auto; position: relative; } .tmpl-modal-head { padding: 1.5rem 1.5rem .25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .tmpl-modal-close { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.45); cursor: pointer; width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: all .2s; } .tmpl-modal-close:hover { border-color: #ff005c; color: #ff005c; } .tmpl-modal-title { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(1.1rem,2.5vw,1.5rem); font-weight: 700; color: #f0ede8; margin: .6rem 0 0; } .tmpl-modal-prev { margin: 1.25rem 1.5rem; height: 230px; overflow: hidden; position: relative; } .tmpl-modal-body { padding: 0 1.5rem 1.75rem; } .tmpl-modal-tags { display: flex; gap: .45rem; flex-wrap: wrap; } .tmpl-modal-desc { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .82rem; color: rgba(240,237,232,.6); line-height: 1.8; margin: 0 0 1.25rem; } .tmpl-modal-feats { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .45rem; } .tmpl-modal-feats li { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .78rem; color: rgba(240,237,232,.7); line-height: 1.65; padding-left: 1.25rem; position: relative; } .tmpl-modal-feats li::before { content: '→'; position: absolute; left: 0; color: var(--tc-accent, #ff005c); font-size: .75rem; } .tmpl-modal-ctas { display: flex; gap: .75rem; flex-wrap: wrap; } .tmpl-btn-primary { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.35rem; border: 1px solid rgba(255,0,92,.5); color: #ff005c; background: transparent; text-decoration: none; cursor: pointer; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: background .2s; } .tmpl-btn-primary:hover { background: rgba(255,0,92,.1); } .tmpl-btn-secondary { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.35rem; border: 1px solid rgba(255,255,255,.15); color: rgba(240,237,232,.55); background: transparent; text-decoration: none; cursor: pointer; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: all .2s; } .tmpl-btn-secondary:hover { border-color: rgba(255,255,255,.4); color: #f0ede8; } /* ── Własne klasy kart (zamiast posts_list-item.grid-view) ── */ /* Unikamy opacity:0 + transform:translateY(6rem) z Webflow CSS */ .tmpl-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; border-bottom: .0625rem solid var(--grey-light-1,#131313); width: 100%; } .tmpl-card-content { cursor: pointer; width: 100%; overflow: hidden; display: flex; flex-direction: column; } .tmpl-card-content:hover .tmpl-preview .tmpl-card-overlay { opacity: 1; } .tmpl-card-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; } .tmpl-card-overlay-label { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #f0ede8; border: 1px solid rgba(240,237,232,.4); padding: .4rem .9rem; } .tmpl-card-text { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 0 1rem; } .tmpl-card-tags { display: flex; gap: .4rem; flex-wrap: wrap; } .tmpl-card-tag { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; border: 1px solid rgba(255,255,255,.15); color: rgba(240,237,232,.5); } .tmpl-card-tag.is-cat { border-color: rgba(255,0,92,.4); color: rgba(255,0,92,.8); } .tmpl-card-title { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: clamp(.9rem,1.5vw,1.1rem); font-weight: 600; color: #f0ede8; margin: 0; line-height: 1.4; } .tmpl-card-desc { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .75rem; color: rgba(240,237,232,.5); line-height: 1.7; margin: 0; } .tmpl-card-trigger { font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,237,232,.5); background: none; border: none; cursor: pointer; padding: 0; text-align: left; transition: color .15s; } .tmpl-card-trigger:hover { color: #ff005c; } .tmpl-card-foot { display: flex; justify-content: flex-end; padding: .5rem 0 .75rem; } .tmpl-card-arrow { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: rgba(240,237,232,.5); transition: color .15s; text-decoration: none; } .tmpl-card-arrow svg { display: block; width: 1.25rem; height: 1.25rem; } .tmpl-card-arrow svg path { fill: currentColor; } .tmpl-card-arrow:hover { color: #f0ede8; } .tmpl-card-arrow:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; color: #ff005c; } /* ── Pokaż więcej ── */ .tmpl-more-btn { -webkit-appearance: none; appearance: none; font-family: var(--font-family-1,'JetBrains Mono'),monospace; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: .7rem 2rem; border: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(240,237,232,.55); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .tmpl-more-btn:hover { border-color: #ff005c; color: #ff005c; background: rgba(255,0,92,.06); } .tmpl-more-btn:focus-visible { outline: 2px solid #ff005c; outline-offset: 2px; } /* ── Szerokość treści: 81.25rem, wycentrowana, nagłówek pełna szerokość ── */ @media (min-width: 992px) { /* Treść interaktywna — ograniczona do 81.25rem */ #Projekty-webflow-section .tmpl-tab-bar, #Projekty-webflow-section .realizacje-filters, #Projekty-webflow-section .posts_list-wrapper, #Projekty-webflow-section .tmpl-cta-strip { max-width: 81.25rem; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* col-d-10 normalnie = 83.33% — w tej sekcji 100% wrapera */ #Projekty-webflow-section .col-d-10 { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; } /* container-sekcja (blok z h2) — natywnie ma już max-width: 81.25rem */ #Projekty-webflow-section .container-sekcja, #Projekty-webflow-section .div-block-128 { width: 100%; max-width: 81.25rem; margin-left: auto; margin-right: auto; } } /* ── Light mode: sekcja "Przykładowe Projekty Webflow & Shopify" ── Bazowa stylistyka jest zaprojektowana pod ciemny background, więc w jasnym motywie nadpisujemy kolory tekstu, ramki, tła oraz hover i focus states. Kontrast tekstu vs tło #f0ede8 spełnia WCAG AA. */ body.light-mode .tmpl-tab-btn { border-color: rgba(0,0,0,.18); color: #3a3838; } body.light-mode .tmpl-tab-btn:hover { border-color: #e8004f; color: #e8004f; background: rgba(232,0,79,.06); } body.light-mode .tmpl-tab-btn.is-active { border-color: #e8004f; color: #e8004f; background: rgba(232,0,79,.08); } body.light-mode .tmpl-tab-btn span { opacity: .65; } body.light-mode .tmpl-card { border-bottom-color: rgba(0,0,0,.12); } body.light-mode .tmpl-card-tag { border-color: rgba(0,0,0,.18); color: #4a4848; } body.light-mode .tmpl-card-tag.is-cat { border-color: rgba(232,0,79,.5); color: #c20049; } body.light-mode .tmpl-card-title { color: #0a0909; } /* W light mode minimalnie podbijamy ciemność opisu i line-height — WCAG sugeruje min. 1.5 line-height oraz wysoki kontrast tekstu pomocniczego. */ body.light-mode .tmpl-card-desc { color: #2e2b2b; line-height: 1.75; } body.light-mode .tmpl-card-trigger { color: #3a3838; } body.light-mode .tmpl-card-trigger:hover { color: #e8004f; } body.light-mode .tmpl-card-arrow { color: #3a3838; } body.light-mode .tmpl-card-arrow:hover { color: #e8004f; } body.light-mode .tmpl-card-arrow:focus-visible { outline-color: #e8004f; color: #e8004f; } body.light-mode .tmpl-card-overlay { background: rgba(0,0,0,.6); } body.light-mode .tmpl-card-overlay-label { color: #fff; border-color: rgba(255,255,255,.55); } /* Mock browser preview (zostaje ciemny — czytelny "screenshot", poprawiamy tylko subtelne wartości pod jasne tło sekcji) */ body.light-mode .tmpl-chrome { background: rgba(20,20,20,.92); } body.light-mode #tmpl-show-more .tmpl-more-btn, body.light-mode .tmpl-more-btn { border: 1.5px solid #0a0909 !important; color: #0a0909 !important; background: transparent !important; font-weight: 600; } body.light-mode #tmpl-show-more .tmpl-more-btn:hover, body.light-mode .tmpl-more-btn:hover { border-color: #e8004f !important; color: #fff !important; background: #e8004f !important; } body.light-mode #tmpl-show-more .tmpl-more-btn:focus-visible, body.light-mode .tmpl-more-btn:focus-visible { outline-color: #e8004f; } /* 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; } body.light-mode .tmpl-cta-strip { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.03); } body.light-mode .tmpl-cta-strip-title { color: #0a0909; } body.light-mode .tmpl-cta-strip-sub { color: #5a5757; } /* Modal — w light mode jasny panel zamiast ciemnego */ body.light-mode .tmpl-modal { background: rgba(0,0,0,.55); } body.light-mode .tmpl-modal-box { background: #f5f3f0; border-color: rgba(0,0,0,.1); box-shadow: 0 12px 40px rgba(0,0,0,.18); } body.light-mode .tmpl-modal-close { border-color: rgba(0,0,0,.18); color: #3a3838; } body.light-mode .tmpl-modal-close:hover { border-color: #e8004f; color: #e8004f; } body.light-mode .tmpl-modal-title { color: #0a0909; } body.light-mode .tmpl-modal-desc { color: #3a3838; } body.light-mode .tmpl-modal-feats li { color: #2e2b2b; } body.light-mode .tmpl-modal-feats li::before{ color: #e8004f; } body.light-mode .tmpl-btn-primary { border-color: rgba(232,0,79,.55); color: #e8004f; } body.light-mode .tmpl-btn-primary:hover { background: rgba(232,0,79,.08); } body.light-mode .tmpl-btn-secondary { border-color: rgba(0,0,0,.2); color: #3a3838; } body.light-mode .tmpl-btn-secondary:hover { border-color: #0a0909; color: #0a0909; } /* ── Comparison table ────────────────────────── */ .cmp-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp-header { margin-bottom: 2rem; } .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 0.6rem; } .cmp-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; margin: 0; max-width: 58ch; } .cmp-table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; } .cmp-table thead th { padding: 0.75rem 1rem; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; } .cmp-table thead th:first-child { text-align: left; } .cmp-table thead th.cmp-highlight { color: #ff005c; background: rgba(255,0,92,0.05); border-radius: 4px 4px 0 0; } .cmp-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s; } .cmp-table tbody tr:hover { background: rgba(255,255,255,0.02); } .cmp-table tbody td { padding: 0.85rem 1rem; font-size: var(--fs-xs, 0.7rem); color: var(--text-body, #d5d1d1); text-align: center; vertical-align: middle; } .cmp-table tbody td:first-child { text-align: left; font-weight: 500; color: rgba(255,255,255,0.75); } .cmp-table tbody td.cmp-highlight { background: rgba(255,0,92,0.04); } .cmp-check { color: #ff005c; font-size: 1rem; line-height: 1; } .cmp-cross { color: rgba(255,255,255,0.2); font-size: 1rem; line-height: 1; } .cmp-partial { color: rgba(255,200,0,0.8); font-size: 0.65rem; letter-spacing: 0.04em; } .cmp-badge { display: inline-block; background: rgba(255,0,92,0.15); color: #ff005c; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 2px; margin-top: 2px; font-weight: 700; } .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, 0.875rem); color: var(--text-body, #d5d1d1); margin: 0; flex: 1; min-width: 20rem; } .cmp-footer-text strong { color: var(--text-1, #fff); } /* Light mode */ body.light-mode .cmp-title { color: #0a0a0a; } body.light-mode .cmp-table thead th { color: rgba(0,0,0,0.4); border-bottom-color: rgba(0,0,0,0.1); } body.light-mode .cmp-table thead th.cmp-highlight { background: rgba(255,0,92,0.06); } body.light-mode .cmp-table tbody tr { border-bottom-color: rgba(0,0,0,0.06); } body.light-mode .cmp-table tbody tr:hover { background: rgba(0,0,0,0.02); } body.light-mode .cmp-table tbody td { color: #302e2e; } body.light-mode .cmp-table tbody td:first-child { color: #0a0a0a; } body.light-mode .cmp-table tbody td.cmp-highlight { background: rgba(255,0,92,0.04); } body.light-mode .cmp-cross { color: rgba(0,0,0,0.15); } .cmp-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .cmp-tab { font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: none; border: none; border-bottom: 2px solid transparent; color: rgba(255,255,255,0.4); padding: 0.6rem 1.25rem 0.7rem; cursor: pointer; transition: color 0.18s, border-color 0.18s; margin-bottom: -1px; } .cmp-tab:hover { color: rgba(255,255,255,0.75); } .cmp-tab.is-active { color: #ff005c; border-bottom-color: #ff005c; } .cmp-pane { display: none; } .cmp-pane.is-active { display: block; } body.light-mode .cmp-tabs { border-bottom-color: rgba(0,0,0,0.1); } body.light-mode .cmp-tab { color: rgba(0,0,0,0.4); } body.light-mode .cmp-tab:hover { color: rgba(0,0,0,0.75); } body.light-mode .cmp-tab.is-active { color: #ff005c; } /* Legendy wad/zalet pod tabelą */ .cmp-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; font-family: var(--font-family-1, 'JetBrains Mono'), monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); } .cmp-legend span { display: flex; align-items: center; gap: 0.35rem; } body.light-mode .cmp-legend { color: rgba(0,0,0,0.35); } /* ── #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); } /* 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; } } /* ---- 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; } /* ── 2. FAQ search ───────────────────────────────────────────── */ #faq-search-wrap { margin-bottom: 1.5rem; position: relative; } #faq-search { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #f0ede8; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; padding: 0.7rem 2.6rem 0.7rem 0.9rem; outline: none; transition: border-color 0.2s, background 0.2s; box-sizing: border-box; } #faq-search::placeholder { color: rgba(240,237,232,0.3); } #faq-search:focus { border-color: #ff005c; background: rgba(255,0,92,0.04); } #faq-search-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.25); pointer-events: none; font-size: 0.85rem; } #faq-no-results { display: none; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: rgba(240,237,232,0.35); padding: 1rem 0; letter-spacing: 0.05em; } .faq-item.faq-hidden { display: none; } .faq-item .faq-highlight { color: #ff005c; } body.light-mode #faq-search { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #302e2e; } body.light-mode #faq-search::placeholder { color: rgba(48,46,46,0.35); } body.light-mode #faq-search:focus { border-color: #e8004f; background: rgba(232,0,79,0.04); } body.light-mode #faq-search-icon { color: rgba(0,0,0,0.25); } body.light-mode #faq-no-results { color: rgba(48,46,46,0.4); } /* ── 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; color: rgba(240,237,232,0.35); 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); } body.light-mode #ww-clock-wrap { color: rgba(48,46,46,0.4); } /* ── 5. Comparison table row tooltips ───────────────────────── */ .cmp-table tbody tr { position: relative; cursor: default; transition: background 0.15s; } .cmp-table tbody tr:hover { background: rgba(255,255,255,0.03); } .cmp-row-tip { display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(calc(-100% - 10px)); background: #1a1a1a; border: 1px solid rgba(255,0,92,0.25); color: rgba(240,237,232,0.8); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; line-height: 1.6; padding: 0.55rem 0.75rem; width: 200px; pointer-events: none; z-index: 10; letter-spacing: 0.02em; } .cmp-row-tip::after { content: ''; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); border: 4px solid transparent; border-left-color: rgba(255,0,92,0.3); } .cmp-table tbody tr:hover .cmp-row-tip { display: block; } @media (max-width: 768px) { .cmp-row-tip { display: none !important; } } body.light-mode .cmp-row-tip { background: #fff; border-color: rgba(232,0,79,0.2); color: #302e2e; } body.light-mode .cmp-row-tip::after { border-left-color: rgba(232,0,79,0.25); } /* ═══ 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; } }