@import url('footer-main.css'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #06050A; --surface: #0F0D18; --border: #1E1B2E; --text: #FFF8F0; --muted: #94a3b8; --accent: #A78BFA; --nav-h: 80px; /* Pilot CP / nav: wspólne z branze-sidebar (--bsb-*); użycie w nav pills poniżej */ --ui-radius-chip: 0.625rem; --ui-glow-violet-soft: 0 0 18px rgba(139, 92, 246, 0.12); font-size: 16px; } /* scroll-behavior: smooth na psuje płynność kółka na długich stronach — kotwice mają smooth w JS (scrollIntoView). */ html { scroll-behavior: auto; scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } .skip-to-main { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 18px; background: #f8fafc; color: #0f172a; font-weight: 800; font-size: 14px; text-decoration: none; border-radius: 8px; border: 2px solid #6366f1; } .skip-to-main:focus { left: 12px; top: 12px; outline: none; } .scroll-mt { scroll-margin-top: calc(var(--nav-h) + 16px); } .h-0 { height: 0; margin: 0; padding: 0; border: 0; } .overflow-hidden { overflow: hidden; } /* Pakiety WWW — cena promo + przekreślona lista + pas „-50%” w tle (#pakiety, spójne z cennik.html) */ .package-price-promo { position: relative; overflow: hidden; border-radius: 12px; padding: 10px 12px 10px; margin-bottom: 0.35rem; } .package-price-promo__band { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 900; letter-spacing: 0.12em; pointer-events: none; user-select: none; } .package-price-promo--green .package-price-promo__band { color: #22c55e; opacity: 0.14; } .package-price-promo--blue .package-price-promo__band { color: #3b82f6; opacity: 0.14; } .package-price-promo--violet .package-price-promo__band { color: #a78bfa; opacity: 0.14; } .package-price-promo__inner { position: relative; z-index: 1; } .package-price-promo__list { display: block; font-size: 0.875rem; color: #94a3b8; text-decoration: line-through; margin-bottom: 4px; } .package-price-promo__sale { font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.15; font-weight: 900; color: #f8fafc; } .package-price-promo__sale small { font-size: 0.8125rem; font-weight: 600; color: #94a3b8; margin-left: 4px; } /* #gwarancja — karty dopasowują liczbę kolumn do szerokości (bez sztywnego 2×2) */ .gwarancja-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 0.875rem; } @media (min-width: 640px) { .gwarancja-features-grid { gap: 1.25rem; } } @media (min-width: 768px) { .gwarancja-features-grid { gap: 1.5rem; } } .gwarancja-features-grid > li { min-width: 0; } body { background-color: #020617; color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; } .cyber-bg { background-image: radial-gradient(circle at 10% 10%, rgba(0, 255, 255, 0.08), transparent 40%), radial-gradient(circle at 90% 20%, rgba(255, 0, 153, 0.08), transparent 45%), linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px); background-size: auto, auto, 64px 64px, 64px 64px; } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: 99999; pointer-events: none; background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa); box-shadow: 0 0 10px rgba(56,189,248,.9), 0 0 18px rgba(129,140,248,.75); transition: transform 0.08s linear; } .nav-cta-darmowa { position: relative; animation: nav-cta-glow 2.2s ease-in-out infinite; } .nav-link-blog { color: #fff !important; border-color: rgba(250, 204, 21, 0.65) !important; background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(239, 68, 68, 0.2)); box-shadow: 0 0 18px rgba(239, 68, 68, 0.18); } .nav-link-blog:hover { color: #fff !important; border-color: rgba(250, 204, 21, 0.95) !important; background: linear-gradient(135deg, rgba(248, 113, 113, 0.28), rgba(239, 68, 68, 0.36)); } @keyframes nav-cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0), 0 0 18px rgba(250, 204, 21, 0.85); } 50% { box-shadow: 0 0 0 6px rgba(250, 204, 21, 0), 0 0 30px rgba(250, 204, 21, 1); } } /* ── NAV – Tailwind override (nav jest w .tw-nav) ── */ .fa-facebook-f{color:#1877f3}.fa-linkedin-in{color:#0a66c2}.fa-instagram{color:#e1306c}.fa-x-twitter{color:#e2e8f0}.fa-lg{font-size:1.25em} /* Stała wysokość jak Tailwind h-20 — bez height:auto, bo na stronie głównej bogatszy wiersz nav (podpis przy CTA, więcej ikon) zawijał się i pasek był wyższy niż na podstronach. */ nav[aria-label="Główne menu"] > div { min-height: var(--nav-h); height: var(--nav-h); box-sizing: border-box; } nav[aria-label="Główne menu"] .nav-link, nav[aria-label="Główne menu"] .nav-cta-darmowa { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; border-radius: var(--ui-radius-chip); } @media (min-width: 1024px) { nav[aria-label="Główne menu"] .nav-link:hover { box-shadow: var(--ui-glow-violet-soft); } } @media (min-width: 1024px) { nav[aria-label="Główne menu"] .hidden.lg\:flex { flex-wrap: nowrap; } } @media (min-width: 1024px) and (max-width: 1320px) { nav[aria-label="Główne menu"] .hidden.lg\:flex { gap: 0.35rem; } nav[aria-label="Główne menu"] .nav-link, nav[aria-label="Główne menu"] .nav-cta-darmowa { font-size: 11px !important; padding: 0.34rem 0.5rem !important; } } /* ── HERO ── */ .hero { padding: 80px 24px 60px; padding-top: calc(80px + 80px); /* 80px nav-h + 80px spacing */ max-width: 1280px; margin: 0 auto; } .hero-grid { display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(320px, .95fr); gap: 28px; align-items: start; } .hero-main { min-width: 0; max-width: 860px; } .hero-side { min-width: 0; } .hero-side .segment-live { margin-bottom: 12px; min-height: 124px; padding: 12px 14px; gap: 7px; justify-content: flex-start; } .hero-side .segment-live-label { font-size: 9.5px; letter-spacing: 0.1em; line-height: 1.35; } .hero-side .segment-live .live-badge { font-size: 11px; padding: 4px 9px; } .hero-side .segment-live .live-name { font-size: 0.98rem; line-height: 1.2; min-height: calc(1.2em * 1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .hero-side .segment-live .live-tagline { font-size: 12px; color: #c9c0da; line-height: 1.35; min-height: calc(1.35em * 1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .hero-side .segment-scanner { max-width: none; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 18px; } .hero-side { order: 2; width: 100%; max-width: min(720px, 100%); margin-inline: auto; } } .hero-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); background: rgba(167,139,250,0.10); padding: 6px 14px; border-radius: 20px; margin-bottom: 20px; border: 1px solid rgba(167,139,250,0.25); } .hero-tag-ico { font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(167,139,250,0.55)); } @media (prefers-reduced-motion: reduce) { .hero-tag-ico, .stat .stat-ico { filter: none; } } /* Hub branż (/branze) — eyebrow + ikony FA (bez podwójnej warstwy emoji) */ .branze-hub-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; } /* Hub branż — zwarty hero: mniejszy padding, siatka treść + staty (lg+) */ .branze-hub-hero-inner { padding: 1.125rem 1rem 0.875rem; } @media (min-width: 640px) { .branze-hub-hero-inner { padding: 1.35rem 1.35rem 1rem; } } @media (min-width: 768px) { .branze-hub-hero-inner { padding: 1.5rem 1.75rem 1.1rem; } } .branze-hub-hero-grid { display: grid; gap: 1rem; } @media (min-width: 1024px) { .branze-hub-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(176px, 228px); align-items: start; gap: 1.35rem; } } .branze-hub-hero-title { text-shadow: 0 2px 22px rgba(167, 139, 250, 0.12); line-height: 1.08; letter-spacing: -0.03em; } .branze-hub-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; width: 100%; } @media (min-width: 1024px) { .branze-hub-stat-grid { grid-template-columns: 1fr; gap: 0.4rem; } } .branze-hub-stat-tile { border-radius: 0.65rem; padding: 0.5rem 0.3rem 0.45rem; text-align: center; } @media (min-width: 640px) { .branze-hub-stat-tile { padding: 0.6rem 0.45rem 0.5rem; } } .branze-hub-stat-tile > i:first-child { display: block; margin: 0 auto 0.2rem; font-size: 0.9rem; } @media (min-width: 640px) { .branze-hub-stat-tile > i:first-child { font-size: 1rem; margin-bottom: 0.3rem; } } .branze-hub-stat-tile strong { font-size: 1.1rem; line-height: 1; display: block; } @media (min-width: 640px) { .branze-hub-stat-tile strong { font-size: 1.3rem; } } .branze-hub-stat-label { display: block; font-size: 0.5625rem; letter-spacing: 0.05em; line-height: 1.2; margin-top: 0.2rem; color: #94a3b8; text-transform: uppercase; } @media (min-width: 640px) { .branze-hub-stat-label { font-size: 0.625rem; margin-top: 0.25rem; } } /* Hub /branze — hero: tło i bloby (bez inline style w HTML) */ .branze-hub-hero-section { background: linear-gradient(135deg, rgba(15, 13, 28, 0.95) 0%, rgba(10, 10, 22, 0.98) 100%); border: 1px solid rgba(167, 139, 250, 0.2); } .branze-hub-hero-blob-v { background: radial-gradient(circle, rgba(167, 139, 250, 0.13) 0%, transparent 65%); } .branze-hub-hero-blob-cy { background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, transparent 65%); } .branze-hub-hero-blob-e { background: radial-gradient(ellipse, rgba(124, 58, 237, 0.06) 0%, transparent 70%); } .branze-hub-eyebrow--accent { border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.1); color: #c4b5fd; } .branze-hub-hero-gradient-text { background: linear-gradient(135deg, #a78bfa, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .branze-hub-hero-lead { max-width: 52ch; } .branze-hub-benefits { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .branze-hub-benefits li { position: relative; padding-left: 1.1rem; font-size: 0.8125rem; line-height: 1.45; color: rgb(203 213 225 / 0.95); } .branze-hub-benefits li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 5px; height: 5px; border-radius: 2px; background: linear-gradient(135deg, #a78bfa, #38bdf8); box-shadow: 0 0 8px rgba(167, 139, 250, 0.35); } .branze-hub-hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 1rem; } .branze-hub-cta-primary { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #f8fafc; background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(56, 189, 248, 0.4)); border: 1px solid rgba(167, 139, 250, 0.45); box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .branze-hub-cta-primary:hover { border-color: rgba(196, 181, 253, 0.65); box-shadow: 0 6px 26px rgba(124, 58, 237, 0.3); transform: translateY(-1px); } .branze-hub-cta-secondary { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .branze-hub-cta-secondary:hover { color: #e2e8f0; border-bottom-color: rgba(148, 163, 184, 0.5); } .branze-hub-stat-tile--sky { border: 1px solid rgba(56, 189, 248, 0.28); background: rgba(56, 189, 248, 0.07); } .branze-hub-stat-tile--amber { border: 1px solid rgba(250, 204, 21, 0.28); background: rgba(250, 204, 21, 0.06); } .branze-hub-stat-tile--emerald { border: 1px solid rgba(16, 185, 129, 0.28); background: rgba(16, 185, 129, 0.07); } .branze-hub-hero-divider { background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.3), rgba(56, 189, 248, 0.2), transparent); } /* Hub /branze — opis + skaner: umiarkowany podział (nie „cała szerokość” ani mikro-kolumny). */ .branze-hub-scanner-row { align-items: stretch; } .branze-hub-scanner-row > .segment-live { position: relative; z-index: 1; min-width: 0; } .branze-hub-scanner-row > .segment-scanner { box-sizing: border-box; min-width: 0; width: 100%; max-width: min(300px, 100%); margin-left: auto; margin-right: auto; margin-top: 0; overflow: hidden; contain: none; } @media (min-width: 1024px) { .branze-hub-scanner-row { display: grid; grid-template-columns: minmax(220px, 0.4fr) minmax(260px, 0.6fr); gap: 1.25rem; align-items: start; } .branze-hub-scanner-row > .segment-live { max-width: 100%; } .branze-hub-scanner-row > .segment-scanner { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } } /* Kroki — karty z klasami; na lg+ poziomy pasek z łącznikami */ .branze-steps { display: grid; grid-template-columns: 1fr; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 1024px) { .branze-steps { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; border-radius: 1rem; border: 1px solid rgba(51, 65, 85, 0.45); overflow: hidden; background: rgba(15, 23, 42, 0.35); } .branze-step { position: relative; border-radius: 0 !important; border: none !important; border-right: 1px solid rgba(51, 65, 85, 0.5) !important; margin: 0 !important; } .branze-step:last-child { border-right: none !important; } } .branze-step { border-radius: 0.75rem; padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; background: rgba(15, 13, 24, 0.5); } .branze-step--violet { border: 1px solid rgba(167, 139, 250, 0.2); border-left: 3px solid rgba(167, 139, 250, 0.65); } .branze-step--sky { border: 1px solid rgba(56, 189, 248, 0.2); border-left: 3px solid rgba(56, 189, 248, 0.65); } .branze-step--emerald { border: 1px solid rgba(16, 185, 129, 0.2); border-left: 3px solid rgba(16, 185, 129, 0.65); } @media (min-width: 1024px) { .branze-step--violet, .branze-step--sky, .branze-step--emerald { border-left: none !important; } } .branze-step-badge { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900; } .branze-step-badge--violet { background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(124, 58, 237, 0.2)); border: 1px solid rgba(167, 139, 250, 0.3); color: #c4b5fd; } .branze-step-badge--sky { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.2)); border: 1px solid rgba(56, 189, 248, 0.3); color: #7dd3fc; } .branze-step-badge--emerald { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7; } /* Grupy branż (hub) */ .branze-cards-root { margin-top: 1.5rem; } .branze-industry-group { margin-bottom: 2.25rem; } .branze-industry-group:last-child { margin-bottom: 0; } .branze-group-head { position: relative; margin: 0 0 0.95rem; padding: 0.78rem 0.9rem 0.74rem; border-radius: 14px; border: 1px solid rgba(71, 85, 105, 0.45); background: linear-gradient( 180deg, rgba(15, 23, 42, 0.66) 0%, rgba(2, 6, 23, 0.7) 100% ); overflow: hidden; } .branze-group-head::after { content: ''; position: absolute; width: 180px; height: 180px; right: -68px; top: -88px; border-radius: 999px; background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 70%); pointer-events: none; } .branze-group-head-main { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; } .branze-group-icon { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(148, 163, 184, 0.36); background: rgba(15, 23, 42, 0.72); color: #e2e8f0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .branze-group-head--local .branze-group-icon { color: #fdba74; border-color: rgba(249, 115, 22, 0.46); background: color-mix(in srgb, #f97316 18%, rgba(15, 23, 42, 0.84)); } .branze-group-head--premium .branze-group-icon { color: #fcd34d; border-color: rgba(217, 119, 6, 0.54); background: color-mix(in srgb, #d97706 20%, rgba(15, 23, 42, 0.84)); } .branze-group-head--tech .branze-group-icon { color: #a5b4fc; border-color: rgba(129, 140, 248, 0.54); background: color-mix(in srgb, #818cf8 20%, rgba(15, 23, 42, 0.84)); } .branze-group-title { font-size: 0.86rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #f8fafc; margin: 0; text-wrap: balance; text-shadow: 0 1px 10px rgba(2, 6, 23, 0.65); } .branze-group-subtitle { margin: 0; font-size: 0.78rem; line-height: 1.45; color: rgba(226, 232, 240, 0.9); max-width: 78ch; } .branze-group-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; margin-top: 0.5rem; } .branze-group-tags span { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #dbeafe; border: 1px solid rgba(148, 163, 184, 0.34); background: rgba(15, 23, 42, 0.68); border-radius: 999px; padding: 0.18rem 0.48rem; } .branze-group-head--local .branze-group-tags span { border-color: rgba(249, 115, 22, 0.45); color: #ffedd5; background: color-mix(in srgb, #f97316 18%, rgba(15, 23, 42, 0.72)); } .branze-group-head--premium .branze-group-tags span { border-color: rgba(217, 119, 6, 0.48); color: #fef3c7; background: color-mix(in srgb, #d97706 18%, rgba(15, 23, 42, 0.72)); } .branze-group-head--tech .branze-group-tags span { border-color: rgba(129, 140, 248, 0.5); color: #e0e7ff; background: color-mix(in srgb, #818cf8 18%, rgba(15, 23, 42, 0.72)); } .branze-group-head--local::after { background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, transparent 70%); } .branze-group-head--premium::after { background: radial-gradient(circle, rgba(217, 119, 6, 0.22) 0%, transparent 70%); } .branze-group-head--tech::after { background: radial-gradient(circle, rgba(129, 140, 248, 0.24) 0%, transparent 70%); } @media (max-width: 640px) { .branze-group-head { padding: 0.72rem 0.74rem 0.68rem; } .branze-group-title { font-size: 0.78rem; letter-spacing: 0.06em; } .branze-group-subtitle { font-size: 0.74rem; } } .branze-group-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .branze-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Belka filtrów na /branze — snap + host */ .branze-page-toolbar .filters { scroll-snap-type: x proximity; scroll-padding-inline: 12px; } .branze-page-toolbar .filter-btn { scroll-snap-align: start; } .branze-empty-state { border: 1px solid rgba(99, 102, 241, 0.2); background: rgba(99, 102, 241, 0.05); } .branze-gallery-cta-primary { background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(56, 189, 248, 0.6)); border: 1px solid rgba(167, 139, 250, 0.4); box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25); } .branze-gallery-cta-secondary { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } .hero h1, .hero h1.hero-h1 { font-size: clamp(36px, 5vw, 62px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0; color: var(--text); } .hero h1 .hero-h1__kicker { display: inline; color: #f8fafc; } .hero h1 .hero-h1__dash { color: rgba(148, 163, 184, 0.75); font-weight: 700; margin: 0 0.02em; } .hero h1 .hero-h1__deck { display: inline; font-weight: 800; } .hero h1 .hero-h1__deck-muted { color: #cbd5e1; font-style: normal; } .hero h1 .hero-h1__deck-accent { font-style: normal; font-weight: 800; background: linear-gradient(100deg, #5eead4 0%, #22d3ee 28%, #a78bfa 62%, #ddd6fe 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.02em; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero h1 .hero-h1__deck-accent { color: #67e8f9; background: none; } } /* EN / inne strony z .hero — nagłówek z */ .hero h1 em { color: var(--accent); font-style: normal; } .hero p { font-size: 16px; color: #cbd5e1; line-height: 1.6; max-width: 640px; margin-bottom: 16px; } .hero .hero-sub { font-size: 15px; color: #cbd5e1; font-style: italic; max-width: 640px; margin-bottom: 24px; line-height: 1.55; } .hero-inline-links { font-size: 13px; color: #cbd5e1; max-width: 640px; margin: -6px 0 24px; line-height: 1.5; } .hero-inline-links a { color: #e2e8f0; text-decoration: underline; text-underline-offset: 3px; } .hero-inline-links a:hover { color: var(--accent); } #faq-home details summary::-webkit-details-marker { display: none; } #faq-home details summary::marker { content: ''; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .hero-cta-row a { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 24px; border-radius: 10px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .hero-cta-row a.primary { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 38%, #3b82f6 100%); color: #f8fafc; border: 1px solid rgba(96, 165, 250, 0.45); box-shadow: 0 4px 22px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .hero-cta-row a.primary:hover { border-color: rgba(147, 197, 253, 0.55); box-shadow: 0 6px 28px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .hero-cta-row a.primary:focus-visible { outline: none; box-shadow: 0 4px 22px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(59, 130, 246, 0.45); } .hero-cta-row a.secondary { border: 1px solid rgba(34, 197, 94, 0.38); color: #bbf7d0; background: rgba(22, 163, 74, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hero-cta-row a.secondary:hover { border-color: rgba(52, 211, 153, 0.55); color: #ecfdf5; background: rgba(22, 163, 74, 0.16); box-shadow: 0 4px 22px rgba(34, 197, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .hero-cta-row a.secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hero-cta-row a:hover { transform: translateY(-2px); } .hero-stats-stack { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; } .hero-stats-stack .stats { width: 100%; } .stats { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 4.5rem; } .stat .stat-ico { font-size: 1.2rem; line-height: 1; margin-bottom: 2px; filter: drop-shadow(0 0 10px rgba(129,140,248,0.35)); } .stat .stat-ico i { font-size: 1.05em; line-height: 1; } .stat:nth-child(1) .stat-ico i { color: #f8fafc; } .stat:nth-child(2) .stat-ico i { color: #e9d5ff; } .stat:nth-child(3) .stat-ico i { color: #fbbf24; } .stat:nth-child(4) .stat-ico i { color: #86efac; } .segment-live-label i { font-size: 0.95em; opacity: 0.88; color: #94a3b8; } .stat strong { font-size: 28px; font-weight: 800; color: var(--text); } .stat span:last-child { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } #hero-stat-projects { color: #F8FAFC; } #hero-stat-projects .stat-plus { color: #22D3EE; } #hero-stat-days { color: #E9D5FF; } #hero-stat-quote { color: #FBBF24; } #hero-stat-price { color: #86EFAC; } .hero-cities-row { display: block; width: 100%; clear: both; margin-top: 12px; max-width: 100%; line-height: 1.35; flex: 0 0 auto; align-self: stretch; } /* Kontekst pod leady + rotacja miast */ .hero-cities-kicker { margin: 10px 0 0; padding: 0 0 0 clamp(14px, 3.5vw, 36px); max-width: 640px; font-size: 12px; line-height: 1.45; color: var(--muted); letter-spacing: 0.02em; } .hero-city-lead-cta { display: inline-block; margin: 10px 0 18px; margin-left: clamp(14px, 3.5vw, 36px); font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(167, 139, 250, 0.45); transition: color 0.2s ease, border-color 0.2s ease; } .hero-city-lead-cta:hover { color: #c4b5fd; border-bottom-color: rgba(196, 181, 253, 0.7); } /* Miasta zaraz pod „Mamy demo dla Ciebie.” */ .hero-cities-row--underhead { margin-top: 8px; margin-bottom: 0; padding-top: 14px; max-width: 640px; border-top: 1px solid rgba(148, 163, 184, 0.14); } .hero-cities-row--underhead .hero-cities-pair { margin-inline-start: clamp(14px, 3.5vw, 36px); } .hero-cities-row--underhead #hero-city-rotator { font-size: clamp(19px, 2.55vw, 26px); } /* Jedna linia: miasto + dopisek — bez łamania „Wrocław” / „& Polska” */ .hero-cities-pair { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; max-width: 100%; } .hero-cities-row #hero-city-rotator { font-size: clamp(20px, 2.75vw, 28px); font-weight: 800; color: #FDE68A; /* domyślnie / bez JS */ line-height: 1.25; letter-spacing: -0.02em; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: color 0.5s ease; } .hero-cities-row .hero-cities-note { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; } /* ── SEKCJE kuratorskie / cennik / formularz ── */ .section-block { max-width: 1280px; margin: 0 auto; padding: 40px 24px 36px; } .section-block h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; margin-bottom: 10px; text-align: center; } .section-block .lead { text-align: center; color: var(--muted); font-size: 14px; max-width: 42rem; margin: 0 auto 16px; line-height: 1.6; } .segment-cards-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 36px; } .segment-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); align-items: stretch; } /* Tablet: 2 kolumny, trzecia wyrównana pod środkiem */ @media (min-width: 681px) and (max-width: 1100px) { .segment-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .segment-column:nth-child(3) { grid-column: 1 / -1; max-width: min(560px, 100%); margin-inline: auto; width: 100%; } } .segment-column { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; padding: 18px 16px 16px; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.12); background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 48%, transparent 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } .segment-column:nth-child(1) { border-color: rgba(74, 222, 128, 0.22); background: linear-gradient(165deg, rgba(74, 222, 128, 0.09) 0%, rgba(74, 222, 128, 0.02) 42%, transparent 72%); } .segment-column:nth-child(2) { border-color: rgba(96, 165, 250, 0.24); background: linear-gradient(165deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.03) 42%, transparent 72%); } .segment-column:nth-child(3) { border-color: rgba(251, 191, 36, 0.22); background: linear-gradient(165deg, rgba(251, 191, 36, 0.09) 0%, rgba(251, 191, 36, 0.02) 42%, transparent 72%); } .segment-column > .segment-label { margin-bottom: 0; flex-shrink: 0; align-self: stretch; text-align: center; padding: 0 4px 2px; } .segment-column .segment-card { flex: 1 1 auto; min-height: 0; } .segment-card { border: 1px solid rgba(99, 102, 241, 0.16); border-radius: 16px; padding: 16px; background: rgba(10, 0, 21, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); min-width: 0; overflow: hidden; display: flex; flex-direction: column; } .segment-card h2 { text-align: left; margin: 0 0 6px; font-size: clamp(1.02rem, 1.8vw, 1.24rem); font-weight: 800; line-height: 1.25; min-height: calc(1.25em * 2); letter-spacing: -0.02em; } .segment-column:nth-child(1) .segment-card h2 { color: #86efac; text-shadow: 0 0 28px rgba(74, 222, 128, 0.22); } .segment-column:nth-child(2) .segment-card h2 { color: #93c5fd; text-shadow: 0 0 28px rgba(96, 165, 250, 0.22); } .segment-column:nth-child(3) .segment-card h2 { color: #fcd34d; text-shadow: 0 0 28px rgba(251, 191, 36, 0.2); } .segment-card .lead { text-align: left; max-width: none; margin: 0 0 10px; font-size: 13px; line-height: 1.5; min-height: calc(1.5em * 3); } .segment-examples { text-align: left; font-size: 12px; color: var(--muted); max-width: none; margin: 0 0 10px; line-height: 1.55; min-height: calc(1.55em * 2); } .segment-examples .seg-ex-label { font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; margin-right: 8px; } .segment-examples a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(167,139,250,0.35); transition: border-color .2s, color .2s; } .segment-examples a:hover { border-bottom-color: var(--accent); color: #c4b5fd; } .segment-label { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; border: 1px solid var(--border); } .segment-label.local { color: #4ade80; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); } .segment-label.premium { color: #60a5fa; border-color: rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); } .segment-label.other { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); } /* Bardzo wąski ekran: jedna kolumna (681–1100px = 2+1 z reguły wyżej) */ @media (max-width: 680px) { .segment-cards-wrap { padding: 24px 16px 28px; } .segment-cards { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 0; overflow-x: visible; scroll-snap-type: none; } .segment-column:nth-child(3) { grid-column: auto; max-width: none; margin-inline: 0; } .segment-column { padding: 16px 14px 14px; } .segment-card { width: 100%; max-width: 100%; min-width: 0; padding: 14px; } .segment-card .segment-scanner { margin-left: -14px; margin-right: -14px; width: calc(100% + 28px); max-width: none; } } /* Średnie ekrany: trochę ciaśniej w ramce kolumny */ @media (min-width: 681px) and (max-width: 1100px) { .segment-cards-wrap { padding: 26px 20px 32px; } } .segment-live { padding: 12px 13px; border-radius: 10px; border: 1px solid var(--border); background: rgba(15,13,24,0.62); min-height: 118px; display: flex; flex-direction: column; gap: 10px; justify-content: center; transition: border-color .35s; } .segment-card .segment-live { padding: 9px 11px; gap: 6px; margin-bottom: 2px; min-height: 142px; } .segment-card .segment-live-label { font-size: 8px; } .segment-card .live-name { font-size: 0.94rem; } .segment-card .live-tagline { font-size: 11.5px; line-height: 1.4; } .segment-live-label { display: inline-flex; align-items: center; gap: 0.35em; flex-wrap: wrap; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .segment-live .live-badge { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: rgba(15, 23, 42, 0.85); color: #f8fafc; border: 1px solid rgba(167,139,250,0.55); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6) inset; transition: color .3s, border-color .3s, background .3s, box-shadow .3s; } .segment-live .live-name { font-size: 1.02rem; font-weight: 800; line-height: 1.2; min-height: calc(1.2em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .25s; } .segment-live .live-tagline { font-size: 12.5px; color: #B0A8C0; line-height: 1.45; margin: 0; min-height: calc(1.45em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .25s; } .segment-live .live-cta { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ddd6fe; text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 2px 8px 0; box-sizing: border-box; } /* Zawsze zajmuje miejsce w układzie — bez skoku strony przy pokazywaniu linku */ .segment-live .live-cta.live-cta--idle { visibility: hidden; pointer-events: none; opacity: 0; text-decoration: none; } .segment-live .live-cta:hover { color: #f5f3ff; } .segment-live .live-cta:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; border-radius: 2px; } .segment-live.is-scanning .live-name, .segment-live.is-scanning .live-tagline { opacity: 0.45; } @keyframes segScannerSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .segment-scanner .sc-loader .spinner { animation: none; opacity: 0.85; } .segment-scanner .sc-img, .segment-scanner .sc-img-bg { transition: none; } } /* Bez max-width: none — nadpisywało utility Tailwind (np. max-w-[280px] na /branze). */ .segment-scanner { position: relative; margin-top: 10px; flex-shrink: 0; contain: layout; } /* Skaner na pełną szerokość karty — bez „poduszki” paddingu wokół ramki */ .segment-card .segment-scanner { margin-top: 6px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); max-width: none; margin-top: auto; } #segment-premium .segment-scanner { padding-top: 6px; } /* Okno przeglądarki jak w .card — pasek + viewport podglądu */ .segment-scanner .sc-shell { position: relative; --card-browser-bar-h: 16px; display: grid; grid-template-columns: 1fr; grid-template-rows: var(--card-browser-bar-h) minmax(0, auto); background: #08050f; border: 1px solid rgba(18, 14, 28, 0.92); box-sizing: border-box; overflow: hidden; box-shadow: none; } .segment-scanner .sc-shell .card-browser-bar { grid-row: 1; grid-column: 1; align-self: stretch; } .segment-scanner .sc-shell .sc-view { grid-row: 2; grid-column: 1; min-height: 0; } .hero-side .segment-scanner .sc-shell { border-radius: 10px; } /* Jedna logika wysokości: aspect-ratio + min/max — bez walki height vs vw przy resize */ .segment-scanner .sc-view { position: relative; width: 100%; flex-shrink: 0; height: auto; aspect-ratio: 3 / 2; min-height: 200px; max-height: min(280px, 42vw); overflow: hidden; background: #08050f; line-height: 0; display: flex; align-items: center; justify-content: center; } /* Miniatura katalogu 3:2 — zgodnie z .card i js/gallery-cards */ .segment-scanner .sc-frame { position: relative; width: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 3 / 2; flex: 0 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: #08050f; } .hero-side .segment-scanner .sc-view { aspect-ratio: 3 / 2; min-height: 200px; max-height: min(360px, 48vh); } .segment-card .segment-scanner .sc-shell { border-radius: 10px 10px 14px 14px; } .segment-card .segment-scanner .sc-view { aspect-ratio: 3 / 2; min-height: 180px; max-height: min(280px, 42vw); } .segment-scanner .sc-img-bg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; height: 100% !important; object-fit: cover; object-position: center top; display: block; transform: none; filter: blur(12px) saturate(1.05) brightness(.62); opacity: 0; transition: opacity .35s; } .segment-scanner .sc-crt { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.1) 3px, rgba(0,0,0,.1) 4px); } .segment-scanner .sc-beam { position: absolute; left: 0; right: 0; height: 3px; top: 0; z-index: 10; pointer-events: none; background: linear-gradient(90deg, transparent 0%, #6366f1 30%, #a78bfa 50%, #6366f1 70%, transparent 100%); box-shadow: 0 0 12px 2px rgba(99,102,241,0.7); opacity: 0; } /* contain — pełna strona widoczna (nagłówek + krawędzie); sc-img-bg (blur cover) wypełnia letterbox */ .segment-scanner .sc-img { position: absolute; inset: 0; z-index: 2; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; object-position: center top; display: block; opacity: 0; transition: opacity .35s; } @media (max-width: 520px) { .hero-side .segment-scanner .sc-view { min-height: 180px; max-height: min(300px, 46vh); } .segment-card .segment-scanner .sc-view { min-height: 168px; max-height: min(240px, 58vw); } } .segment-scanner .sc-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #08050f; z-index: 4; } .segment-scanner .sc-loader .spinner { width: 36px; height: 36px; border: 2px solid rgba(99,102,241,.2); border-top-color: #818cf8; border-radius: 50%; animation: segScannerSpin .75s linear infinite; } .segment-scanner .sc-loader span { font-size: 9px; font-family: ui-monospace, monospace; color: #4c4763; letter-spacing: .1em; } .segment-scanner .sc-progbar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.06); z-index: 6; } .segment-scanner .sc-prog { height: 100%; width: 0; background: linear-gradient(90deg,#6366f1,#a78bfa); box-shadow: 0 0 6px rgba(99,102,241,.6); transition: width .05s linear; } .tailor-band { margin: 0 24px 32px; max-width: 1240px; margin-left: auto; margin-right: auto; padding: 40px 28px; border-radius: 16px; border: 1px solid rgba(167,139,250,0.25); background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(167,139,250,0.06)); text-align: center; } .tailor-band h2.tailor-band-title, .tailor-band h3, .tailor-band .tailor-band-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; } .tailor-band p { color: #cbd5e1; font-size: 14px; line-height: 1.65; max-width: 36rem; margin: 0 auto 20px; } .tailor-band a { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 28px; border-radius: 10px; background: var(--accent); color: #0F0D18; text-decoration: none; } /* Rezerwa miejsca, gdy pierwsze malowanie galerii jest odroczone (mniejszy CLS przy pustym #grid). */ #grid.grid.scroll-mt:empty { min-height: clamp(220px, 36vh, 560px); box-sizing: border-box; } .all-demos-intro { max-width: 1280px; margin: 0 auto; padding: 36px 24px 20px; text-align: center; } .all-demos-eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .all-demos-title { margin: 0; font-size: clamp(1.35rem, 2.9vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; color: #f8fafc; text-shadow: 0 2px 24px rgba(167, 139, 250, 0.25), 0 0 48px rgba(99, 102, 241, 0.15); } .all-demos-intro::after { content: ""; display: block; width: min(120px, 40%); height: 3px; margin: 20px auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.95), rgba(129, 140, 248, 0.85), transparent); box-shadow: 0 0 20px rgba(167, 139, 250, 0.45); } /* ── CO DOSTAJESZ — siatka kolumn + „rolka” przy scrollu ── */ .co-dostajesz-pyramid { perspective: 1000px; } #co-dostajesz .co-dostajesz-card--cell { align-items: flex-start; } #co-dostajesz .co-dostajesz-card { opacity: 0; transform: translate3d(0, 14px, 0) rotateX(-7deg); transform-origin: center top; transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); backface-visibility: hidden; } #co-dostajesz .co-dostajesz-card--in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .co-dostajesz-pyramid { perspective: none; } #co-dostajesz .co-dostajesz-card { opacity: 1; transform: none; transition: none; } } /* ── FORMULARZ ── */ #contact { background: var(--bg); border-top: 1px solid var(--border); } .contact-wrap { max-width: 560px; margin: 0 auto; padding: 56px 24px 72px; } .contact-wrap h2 { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 8px; } /* Kontrast na #06050A: etykiety i opis ≥ WCAG AA */ .contact-wrap .cd { text-align: center; color: #cbd5e1; font-size: 14px; margin-bottom: 28px; } .contact-wrap .cd a.contact-inline-cennik { color: #f5d0fe; text-decoration: underline; text-underline-offset: 3px; } .contact-wrap .cd a.contact-inline-cennik:hover { color: #faf5ff; } .contact-wrap .contact-stack-note { text-align: center; color: #94a3b8; font-size: 13px; line-height: 1.55; margin: 0 auto 22px; max-width: 36rem; } .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .f-grid { grid-template-columns: 1fr; } } .f-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #cbd5e1; margin-bottom: 6px; } .f-field input, .f-field select, .f-field textarea { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; } .f-field textarea { resize: vertical; min-height: 100px; } .f-field { margin-bottom: 14px; } .f-field.full { grid-column: 1 / -1; } .f-field-message .cf-msg-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .f-field-message .cf-msg-field-head label { margin-bottom: 0; display: inline-block; } .cf-voice-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(30, 41, 59, 0.9); color: #e2e8f0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .cf-voice-btn:hover, .cf-voice-btn:focus-visible { border-color: #818cf8; outline: 2px solid rgba(129, 140, 248, 0.5); outline-offset: 2px; } .cf-voice-btn--active { border-color: #f87171; color: #fecaca; background: rgba(127, 29, 29, 0.35); } .cf-voice-status { margin: 6px 0 0 0; font-size: 12px; color: #94a3b8; } .cf-voice-hint { margin: 6px 0 0 0; font-size: 11px; line-height: 1.4; color: #64748b; } .f-pay { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #cbd5e1; margin-bottom: 14px; } .f-pay label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 6px 10px; border-radius: 8px; } .f-pay label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .f-submit { width: 100%; padding: 14px; border: none; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; background: linear-gradient(135deg, #6366f1, #a78bfa); color: #fff; margin-top: 8px; } .f-submit:disabled { opacity: 0.6; cursor: not-allowed; } #cf-status { margin-top: 14px; font-size: 13px; text-align: center; display: none; } .f-fieldset-pay legend.f-legend-pay { display: block; margin-bottom: 8px; padding: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #cbd5e1; } .contact-form-trust { text-align: center; font-size: 12px; color: #cbd5e1; margin-top: 16px; } /* ── FOOTER ── */ .site-footer { border-top: 1px solid var(--border); padding: 40px 24px 32px; background: rgba(15,13,24,0.9); } .foot-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 24px; } @media (min-width: 768px) { .foot-inner { grid-template-columns: 1.2fr 1fr; } } .foot-brand { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; } .foot-brand span { color: var(--accent); } .foot-desc { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.6; } .foot-links { display: flex; flex-wrap: wrap; gap: 10px; } .foot-links a { font-size: 12px; color: var(--muted); text-decoration: none; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; } .foot-links a:hover { color: var(--accent); border-color: rgba(167,139,250,0.4); } .foot-copy { font-size: 11px; color: var(--muted); margin-top: 20px; text-align: center; grid-column: 1 / -1; } /* ── FILTERS + SEARCH (jedna lepka belka pod nav przy galerii) ── */ .demo-gallery-toolbar { position: sticky; top: var(--nav-h); /* Poniżej nav (z-50), żeby dropdown „Produkty” nie był zasłonięty przez belkę kategorii */ z-index: 40; background: rgba(8, 7, 14, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(167, 139, 250, 0.18); box-shadow: 0 10px 36px rgba(0,0,0,0.38); transition: opacity 0.2s ease, visibility 0.2s ease; } body.nav-produkty-hover .demo-gallery-toolbar { opacity: 0; visibility: hidden; pointer-events: none; } nav[aria-label="Główne menu"] { transform: translateY(0); opacity: 1; transition: transform .28s ease, opacity .2s ease; } body.toolbar-docked nav[aria-label="Główne menu"] { transform: translateY(calc(-1 * var(--nav-h))); opacity: 0; pointer-events: none; } body.toolbar-docked .demo-gallery-toolbar { top: 0; } .filters-wrap { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border-bottom: 1px solid rgba(255, 248, 240, 0.08); } .filters-scroll-host { flex: 1; min-width: 0; position: relative; } .filters { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 20px 8px 6px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.45) rgba(255, 255, 255, 0.06); -webkit-overflow-scrolling: touch; touch-action: pan-x; scroll-behavior: auto; } .filters::-webkit-scrollbar { height: 5px; } .filters::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .filters::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.45); border-radius: 4px; } .filters-nav { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 248, 240, 0.18); border-radius: 8px; background: rgba(15, 13, 24, 0.95); color: #D4CDE6; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .filters-nav:hover:not(:disabled) { color: #FFF8F0; border-color: rgba(167, 139, 250, 0.55); background: rgba(30, 27, 46, 0.98); } .filters-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filters-nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* Zajęte miejsce jak przy widocznych strzałkach — brak skoku szerokości belki przy resize */ .filters-nav.filters-nav--hidden { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* Punkt odniesienia dla dockingu belki galerii (żywa geometria zamiast offsetTop po resize) */ .gallery-dock-sentinel { height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .filter-btn { flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; padding: 8px 13px; min-height: 36px; border-radius: 999px; border: 1px solid rgba(255, 248, 240, 0.16); background: rgba(15, 13, 24, 0.85); color: #D4CDE6; cursor: pointer; transition: border-color .18s, color .18s, background .18s, box-shadow .18s; white-space: nowrap; } .filter-btn:hover { border-color: rgba(167, 139, 250, 0.55); color: #FFF8F0; background: rgba(30, 27, 46, 0.95); } .filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Aktywny filtr: jak linki w nav — obramowanie + lekki tint (bez pełnego wypełnienia) */ .filter-btn.active { font-weight: 800; filter: none; color: #c4b5fd; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 0 18px rgba(139, 92, 246, 0.22); } .filter-btn.active:hover { color: #ddd6fe; border-color: rgba(167, 139, 250, 0.72); background: rgba(139, 92, 246, 0.16); filter: none; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.32), 0 0 22px rgba(139, 92, 246, 0.3); } /* Galeria główna — kolor krawędzi wg kategorii (jak kolorowe pill-e w nagłówku) */ .filter-btn[data-cat="all"].active { color: #b8ffc4; background: rgba(22, 200, 90, 0.14); border-color: rgba(57, 255, 20, 0.52); box-shadow: 0 0 0 1px rgba(110, 255, 80, 0.32), 0 0 18px rgba(34, 255, 120, 0.24); } .filter-btn[data-cat="all"].active:hover { color: #d1ffe0; border-color: rgba(120, 255, 90, 0.72); background: rgba(22, 200, 90, 0.2); box-shadow: 0 0 0 1px rgba(130, 255, 100, 0.38), 0 0 22px rgba(34, 255, 120, 0.3); } .filter-btn[data-cat="gastronomia"].active { color: #fb923c; background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.22), 0 0 18px rgba(249, 115, 22, 0.2); } .filter-btn[data-cat="gastronomia"].active:hover { color: #fdba74; border-color: rgba(251, 146, 60, 0.72); background: rgba(249, 115, 22, 0.16); box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.28), 0 0 22px rgba(249, 115, 22, 0.28); } /* beauty: róż / fuksja (nie czerwień motoryzacji) */ .filter-btn[data-cat="beauty"].active { color: #f472b6; background: rgba(219, 39, 119, 0.12); border-color: rgba(219, 39, 119, 0.5); box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.24), 0 0 18px rgba(219, 39, 119, 0.2); } .filter-btn[data-cat="beauty"].active:hover { color: #fbcfe8; border-color: rgba(244, 114, 182, 0.72); background: rgba(219, 39, 119, 0.16); box-shadow: 0 0 0 1px rgba(251, 207, 232, 0.3), 0 0 22px rgba(219, 39, 119, 0.28); } /* motoryzacja: chłodny grafit / stal (nie czerwień) */ .filter-btn[data-cat="motoryzacja"].active { color: #d4d4d8; background: rgba(82, 82, 91, 0.18); border-color: rgba(113, 113, 122, 0.58); box-shadow: 0 0 0 1px rgba(161, 161, 170, 0.28), 0 0 18px rgba(82, 82, 91, 0.28); } .filter-btn[data-cat="motoryzacja"].active:hover { color: #f4f4f5; border-color: rgba(161, 161, 170, 0.78); background: rgba(82, 82, 91, 0.24); box-shadow: 0 0 0 1px rgba(212, 212, 216, 0.22), 0 0 22px rgba(82, 82, 91, 0.32); } /* luxury: złoto (cieplejsze niż pomarańcz gastro) */ .filter-btn[data-cat="luxury"].active { color: #fcd34d; background: rgba(202, 138, 4, 0.14); border-color: rgba(202, 138, 4, 0.52); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.26), 0 0 18px rgba(202, 138, 4, 0.22); } .filter-btn[data-cat="luxury"].active:hover { color: #fef3c7; border-color: rgba(250, 204, 21, 0.72); background: rgba(202, 138, 4, 0.2); box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.3), 0 0 22px rgba(202, 138, 4, 0.28); } /* fintech: głęboki niebieski (nie ten sam co edukacja / conceptual) */ .filter-btn[data-cat="fintech"].active { color: #93c5fd; background: rgba(30, 64, 175, 0.14); border-color: rgba(30, 64, 175, 0.55); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 18px rgba(30, 64, 175, 0.22); } .filter-btn[data-cat="fintech"].active:hover { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.75); background: rgba(30, 64, 175, 0.2); box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.32), 0 0 22px rgba(30, 64, 175, 0.3); } /* nieruchomości: cegła / brąz (nie zieleń jak „Wszystkie”) */ .filter-btn[data-cat="nieruchomosci"].active { color: #fdba74; background: rgba(120, 53, 15, 0.16); border-color: rgba(146, 64, 14, 0.52); box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.22), 0 0 18px rgba(120, 53, 15, 0.22); } .filter-btn[data-cat="nieruchomosci"].active:hover { color: #ffedd5; border-color: rgba(251, 146, 60, 0.72); background: rgba(120, 53, 15, 0.22); box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.28), 0 0 22px rgba(120, 53, 15, 0.28); } /* tech: morski teal (nie ten sam co niebieski / cyan conceptual) */ .filter-btn[data-cat="tech"].active { color: #5eead4; background: rgba(13, 148, 136, 0.14); border-color: rgba(13, 148, 136, 0.52); box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.26), 0 0 18px rgba(13, 148, 136, 0.2); } .filter-btn[data-cat="tech"].active:hover { color: #ccfbf1; border-color: rgba(45, 212, 191, 0.72); background: rgba(13, 148, 136, 0.2); box-shadow: 0 0 0 1px rgba(153, 246, 228, 0.28), 0 0 22px rgba(13, 148, 136, 0.28); } /* usługi: limonka (nie żółć jak luxury) */ .filter-btn[data-cat="uslugi"].active { color: #bef264; background: rgba(101, 163, 13, 0.14); border-color: rgba(101, 163, 13, 0.52); box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.28), 0 0 18px rgba(101, 163, 13, 0.2); } .filter-btn[data-cat="uslugi"].active:hover { color: #ecfccb; border-color: rgba(163, 230, 53, 0.75); background: rgba(101, 163, 13, 0.2); box-shadow: 0 0 0 1px rgba(217, 249, 157, 0.3), 0 0 22px rgba(101, 163, 13, 0.28); } /* edukacja: błękit nieba (nie indygo jak wcześniej) */ .filter-btn[data-cat="edukacja"].active { color: #7dd3fc; background: rgba(2, 132, 199, 0.14); border-color: rgba(2, 132, 199, 0.52); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.26), 0 0 18px rgba(2, 132, 199, 0.2); } .filter-btn[data-cat="edukacja"].active:hover { color: #e0f2fe; border-color: rgba(56, 189, 248, 0.72); background: rgba(2, 132, 199, 0.2); box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.3), 0 0 22px rgba(2, 132, 199, 0.28); } /* muzyka: purpura / magenta (nie róż beauty) */ .filter-btn[data-cat="muzyka"].active { color: #e879f9; background: rgba(147, 51, 234, 0.12); border-color: rgba(147, 51, 234, 0.52); box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.24), 0 0 18px rgba(147, 51, 234, 0.2); } .filter-btn[data-cat="muzyka"].active:hover { color: #f5d0fe; border-color: rgba(192, 132, 252, 0.75); background: rgba(147, 51, 234, 0.18); box-shadow: 0 0 0 1px rgba(233, 213, 255, 0.3), 0 0 22px rgba(147, 51, 234, 0.28); } /* conceptual: elektryczny cyjan (#22d3ee) — jaśniejszy niż morski „tech” */ .filter-btn[data-cat="conceptual"].active { color: #67e8f9; background: rgba(6, 182, 212, 0.14); border-color: rgba(6, 182, 212, 0.52); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.32), 0 0 18px rgba(6, 182, 212, 0.22); } .filter-btn[data-cat="conceptual"].active:hover { color: #cffafe; border-color: rgba(34, 211, 238, 0.75); background: rgba(6, 182, 212, 0.2); box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.32), 0 0 22px rgba(6, 182, 212, 0.28); } /* Hub /branze — chipy „Szybkie intencje” (data-intent) */ .branze-page-toolbar .filter-btn[data-intent="all"].active { color: #b8ffc4; background: rgba(22, 200, 90, 0.14); border-color: rgba(57, 255, 20, 0.52); box-shadow: 0 0 0 1px rgba(110, 255, 80, 0.32), 0 0 18px rgba(34, 255, 120, 0.24); } .branze-page-toolbar .filter-btn[data-intent="all"].active:hover { color: #d1ffe0; border-color: rgba(120, 255, 90, 0.72); background: rgba(22, 200, 90, 0.2); box-shadow: 0 0 0 1px rgba(130, 255, 100, 0.38), 0 0 22px rgba(34, 255, 120, 0.3); } .branze-page-toolbar .filter-btn[data-intent="rezerwacje"].active { color: #fb923c; background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.22), 0 0 18px rgba(249, 115, 22, 0.2); } .branze-page-toolbar .filter-btn[data-intent="rezerwacje"].active:hover { color: #fdba74; border-color: rgba(251, 146, 60, 0.72); background: rgba(249, 115, 22, 0.16); box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.28), 0 0 22px rgba(249, 115, 22, 0.28); } .branze-page-toolbar .filter-btn[data-intent="zaufanie"].active { color: #93c5fd; background: rgba(30, 64, 175, 0.14); border-color: rgba(30, 64, 175, 0.55); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 18px rgba(30, 64, 175, 0.22); } .branze-page-toolbar .filter-btn[data-intent="zaufanie"].active:hover { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.75); background: rgba(30, 64, 175, 0.2); box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.32), 0 0 22px rgba(30, 64, 175, 0.3); } .branze-page-toolbar .filter-btn[data-intent="leady"].active { color: #e879f9; background: rgba(147, 51, 234, 0.12); border-color: rgba(147, 51, 234, 0.52); box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.24), 0 0 18px rgba(147, 51, 234, 0.2); } .branze-page-toolbar .filter-btn[data-intent="leady"].active:hover { color: #f5d0fe; border-color: rgba(192, 132, 252, 0.75); background: rgba(147, 51, 234, 0.18); box-shadow: 0 0 0 1px rgba(233, 213, 255, 0.3), 0 0 22px rgba(147, 51, 234, 0.28); } .branze-page-toolbar .filter-btn[data-intent="seo"].active { color: #bef264; background: rgba(101, 163, 13, 0.14); border-color: rgba(101, 163, 13, 0.52); box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.28), 0 0 18px rgba(101, 163, 13, 0.2); } .branze-page-toolbar .filter-btn[data-intent="seo"].active:hover { color: #ecfccb; border-color: rgba(163, 230, 53, 0.75); background: rgba(101, 163, 13, 0.2); box-shadow: 0 0 0 1px rgba(217, 249, 157, 0.3), 0 0 22px rgba(101, 163, 13, 0.28); } .branze-page-toolbar .filter-btn[data-intent="premium"].active { color: #fcd34d; background: rgba(202, 138, 4, 0.14); border-color: rgba(202, 138, 4, 0.52); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.26), 0 0 18px rgba(202, 138, 4, 0.22); } .branze-page-toolbar .filter-btn[data-intent="premium"].active:hover { color: #fef3c7; border-color: rgba(250, 204, 21, 0.72); background: rgba(202, 138, 4, 0.2); box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.3), 0 0 22px rgba(202, 138, 4, 0.28); } .branze-page-toolbar .filter-btn[data-intent="mobilne"].active { color: #5eead4; background: rgba(13, 148, 136, 0.14); border-color: rgba(13, 148, 136, 0.52); box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.26), 0 0 18px rgba(13, 148, 136, 0.2); } .branze-page-toolbar .filter-btn[data-intent="mobilne"].active:hover { color: #ccfbf1; border-color: rgba(45, 212, 191, 0.72); background: rgba(13, 148, 136, 0.2); box-shadow: 0 0 0 1px rgba(153, 246, 228, 0.28), 0 0 22px rgba(13, 148, 136, 0.28); } .branze-page-toolbar .filter-btn[data-intent="produkt"].active { color: #67e8f9; background: rgba(6, 182, 212, 0.14); border-color: rgba(6, 182, 212, 0.52); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.32), 0 0 18px rgba(6, 182, 212, 0.22); } .branze-page-toolbar .filter-btn[data-intent="produkt"].active:hover { color: #cffafe; border-color: rgba(34, 211, 238, 0.75); background: rgba(6, 182, 212, 0.2); box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.32), 0 0 22px rgba(6, 182, 212, 0.28); } .filter-btn .cnt { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #94a3b8; opacity: 1; } .filter-btn:hover .cnt { color: #b8c5d4; } .filter-btn.active .cnt { color: #cbd5e1; font-weight: 800; } .filter-btn.active:hover .cnt { color: #e2e8f0; } /* ── SEARCH (wewnątrz .demo-gallery-toolbar) ── */ .search-wrap { padding: 8px 40px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .search-wrap input { flex: 1; min-width: 180px; max-width: 360px; background: #12101c; border: 1px solid rgba(255, 248, 240, 0.14); color: #FFF8F0; font-size: 14px; line-height: 1.4; padding: 11px 16px; border-radius: 10px; outline: none; transition: border-color .18s, box-shadow .18s; } .search-wrap input::placeholder { color: #94a3b8; opacity: 1; } .search-wrap input:hover { border-color: rgba(255, 248, 240, 0.22); } .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22); } /* ── GRID ── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, calc(50% - 1px)), 1fr)); gap: 4px; padding: 4px 4px 60px; } /* ── CARD ── */ .card { position: relative; overflow: hidden; aspect-ratio: 3 / 2; --card-browser-bar-h: 16px; container-type: inline-size; container-name: demo-card; cursor: pointer; /* Jedna „karta przeglądarki” — to samo tło co viewport obrazu, bez drugiej ramki */ background: #08050f; border-radius: 0; border: 1px solid rgba(18, 14, 28, 0.92); box-sizing: border-box; display: grid; grid-template-columns: 1fr; grid-template-rows: var(--card-browser-bar-h) minmax(0, 1fr); color: inherit; transition: box-shadow 0.38s ease, border-color 0.38s ease; z-index: 0; } /* Podświetlenie karty przy hover = ta sama paleta co obramowanie aktywnego filtra kategorii */ .card[data-cat] { --demo-cat-bd: rgba(139, 92, 246, 0.52); --demo-cat-ring: rgba(167, 139, 250, 0.32); --demo-cat-ambient: rgba(139, 92, 246, 0.28); --demo-cat-consult-bd: rgba(167, 139, 250, 0.82); --demo-cat-consult-bg: rgba(139, 92, 246, 0.2); --demo-cat-scroll: rgba(167, 139, 250, 0.42); } .card[data-cat="gastronomia"] { --demo-cat-bd: rgba(249, 115, 22, 0.52); --demo-cat-ring: rgba(251, 146, 60, 0.32); --demo-cat-ambient: rgba(249, 115, 22, 0.28); --demo-cat-consult-bd: rgba(251, 146, 60, 0.82); --demo-cat-consult-bg: rgba(249, 115, 22, 0.2); --demo-cat-scroll: rgba(251, 146, 60, 0.42); } .card[data-cat="beauty"] { --demo-cat-bd: rgba(219, 39, 119, 0.52); --demo-cat-ring: rgba(244, 114, 182, 0.32); --demo-cat-ambient: rgba(219, 39, 119, 0.28); --demo-cat-consult-bd: rgba(244, 114, 182, 0.82); --demo-cat-consult-bg: rgba(219, 39, 119, 0.2); --demo-cat-scroll: rgba(244, 114, 182, 0.42); } .card[data-cat="motoryzacja"] { --demo-cat-bd: rgba(113, 113, 122, 0.58); --demo-cat-ring: rgba(161, 161, 170, 0.34); --demo-cat-ambient: rgba(82, 82, 91, 0.32); --demo-cat-consult-bd: rgba(212, 212, 216, 0.78); --demo-cat-consult-bg: rgba(82, 82, 91, 0.22); --demo-cat-scroll: rgba(161, 161, 170, 0.45); } .card[data-cat="luxury"] { --demo-cat-bd: rgba(202, 138, 4, 0.52); --demo-cat-ring: rgba(250, 204, 21, 0.32); --demo-cat-ambient: rgba(202, 138, 4, 0.28); --demo-cat-consult-bd: rgba(250, 204, 21, 0.82); --demo-cat-consult-bg: rgba(202, 138, 4, 0.2); --demo-cat-scroll: rgba(250, 204, 21, 0.42); } .card[data-cat="fintech"] { --demo-cat-bd: rgba(30, 64, 175, 0.52); --demo-cat-ring: rgba(59, 130, 246, 0.32); --demo-cat-ambient: rgba(30, 64, 175, 0.28); --demo-cat-consult-bd: rgba(96, 165, 250, 0.82); --demo-cat-consult-bg: rgba(30, 64, 175, 0.2); --demo-cat-scroll: rgba(96, 165, 250, 0.42); } .card[data-cat="nieruchomosci"] { --demo-cat-bd: rgba(120, 53, 15, 0.52); --demo-cat-ring: rgba(251, 146, 60, 0.3); --demo-cat-ambient: rgba(146, 64, 14, 0.28); --demo-cat-consult-bd: rgba(251, 146, 60, 0.82); --demo-cat-consult-bg: rgba(120, 53, 15, 0.22); --demo-cat-scroll: rgba(251, 146, 60, 0.4); } .card[data-cat="tech"] { --demo-cat-bd: rgba(13, 148, 136, 0.52); --demo-cat-ring: rgba(45, 212, 191, 0.32); --demo-cat-ambient: rgba(13, 148, 136, 0.28); --demo-cat-consult-bd: rgba(45, 212, 191, 0.82); --demo-cat-consult-bg: rgba(13, 148, 136, 0.2); --demo-cat-scroll: rgba(45, 212, 191, 0.42); } .card[data-cat="uslugi"] { --demo-cat-bd: rgba(101, 163, 13, 0.52); --demo-cat-ring: rgba(163, 230, 53, 0.32); --demo-cat-ambient: rgba(101, 163, 13, 0.28); --demo-cat-consult-bd: rgba(163, 230, 53, 0.82); --demo-cat-consult-bg: rgba(101, 163, 13, 0.2); --demo-cat-scroll: rgba(163, 230, 53, 0.42); } .card[data-cat="edukacja"] { --demo-cat-bd: rgba(2, 132, 199, 0.52); --demo-cat-ring: rgba(56, 189, 248, 0.32); --demo-cat-ambient: rgba(2, 132, 199, 0.28); --demo-cat-consult-bd: rgba(56, 189, 248, 0.82); --demo-cat-consult-bg: rgba(2, 132, 199, 0.2); --demo-cat-scroll: rgba(56, 189, 248, 0.42); } .card[data-cat="muzyka"] { --demo-cat-bd: rgba(147, 51, 234, 0.52); --demo-cat-ring: rgba(192, 132, 252, 0.32); --demo-cat-ambient: rgba(147, 51, 234, 0.28); --demo-cat-consult-bd: rgba(192, 132, 252, 0.82); --demo-cat-consult-bg: rgba(147, 51, 234, 0.2); --demo-cat-scroll: rgba(192, 132, 252, 0.42); } .card[data-cat="conceptual"] { --demo-cat-bd: rgba(6, 182, 212, 0.52); --demo-cat-ring: rgba(34, 211, 238, 0.34); --demo-cat-ambient: rgba(6, 182, 212, 0.3); --demo-cat-consult-bd: rgba(34, 211, 238, 0.85); --demo-cat-consult-bg: rgba(6, 182, 212, 0.2); --demo-cat-scroll: rgba(34, 211, 238, 0.45); } /* Filtr „Wszystkie” — jeden neonowy zielony na hover (nadpisuje --demo-cat-* z branży) */ body.gallery-filter-all .card[data-cat] { --demo-cat-bd: rgba(57, 255, 20, 0.58); --demo-cat-ring: rgba(110, 255, 80, 0.45); --demo-cat-ambient: rgba(34, 255, 120, 0.34); --demo-cat-consult-bd: rgba(120, 255, 90, 0.92); --demo-cat-consult-bg: rgba(22, 200, 90, 0.22); --demo-cat-scroll: rgba(74, 255, 120, 0.52); } .card > picture, .card > .card-open-demo, .card > .card-overlay, .card > .card-hover-overlay { grid-row: 2; grid-column: 1; } .card > .card-browser-bar { grid-row: 1; grid-column: 1; } .card:hover, .card:focus-within { z-index: 2; border-color: var(--demo-cat-bd, rgba(201, 162, 64, 0.78)); /* Bez inset — nie dokładamy drugiej „ramki” świetlnej wewnątrz karty */ box-shadow: 0 0 0 1px var(--demo-cat-ring, rgba(201, 162, 64, 0.55)), 0 10px 28px var(--demo-cat-ambient, rgba(140, 100, 35, 0.32)); } @media (prefers-reduced-motion: reduce) { .card { transition-duration: 0.01ms; } } .card picture { position: absolute; inset: 0; display: block; overflow: hidden; background: #08050f; } .card-open-demo { position: absolute; inset: 0; z-index: 1; text-decoration: none; color: transparent; font-size: 0; } .card-open-demo--static { pointer-events: none; cursor: default; } .card img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center top; display: block; transform: none; transition: filter .3s ease; filter: brightness(0.96); } .card:hover img { filter: brightness(0.7); } /* Pasek „przeglądarki” — osobny wiersz nad obrazem (nie zasłania miniatury) */ .card-browser-bar { position: relative; z-index: 3; height: var(--card-browser-bar-h); background: #1a1825; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 6px; pointer-events: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .card-browser-bar .cbb-traffic { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .cbb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .cbb-dot--close { background: #FF5F57; } .cbb-dot--min { background: #FEBC2E; } .cbb-dot--max { background: #28C840; } .card-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 3px; padding: 8px 8px 9px; background: linear-gradient(to top, rgba(6,5,10,.94) 0%, rgba(6,5,10,.42) 38%, transparent 78%); opacity: 1; pointer-events: none; text-align: right; } .card-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 5px; padding: 6px 7px 7px; box-sizing: border-box; height: 100%; min-height: 0; opacity: 0; transition: opacity .3s; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .card:hover .card-hover-overlay { opacity: 1; } .card-hover-overlay .tagline-block { text-align: left; flex: 1 1 0; min-height: 0; pointer-events: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: auto; padding: 6px 7px; margin-bottom: 0; width: 100%; box-sizing: border-box; background: rgba(6, 5, 10, 0.82); border-radius: 0; border: 1px solid rgba(255, 248, 240, 0.12); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); scrollbar-width: thin; scrollbar-color: var(--demo-cat-scroll, rgba(190, 155, 70, 0.5)) rgba(15, 13, 24, 0.35); } .card-hover-overlay .tagline-block.tagline-block--wheel-through { overflow-y: visible; pointer-events: none; } .card-hover-overlay .tagline-block.tagline-block--wheel-through .card-hover-heading, .card-hover-overlay .tagline-block.tagline-block--wheel-through .tagline-detail, .card-hover-overlay .tagline-block.tagline-block--wheel-through .card-benefits, .card-hover-overlay .tagline-block.tagline-block--wheel-through .card-benefits li { pointer-events: auto; } .card-hover-overlay .tagline-block::-webkit-scrollbar { width: 5px; } .card-hover-overlay .tagline-block::-webkit-scrollbar-thumb { background: var(--demo-cat-scroll, rgba(190, 155, 70, 0.45)); border-radius: 0; } .card-hover-overlay .card-hover-heading { --card-hover-accent: #a78bfa; font-size: 12px; font-size: clamp(11px, 2.6cqw, 13px); font-weight: 800; letter-spacing: 0.02em; text-transform: none; color: #FFFCF5; line-height: 1.28; margin: 0 0 6px; width: 100%; max-width: 100%; padding: 5px 7px 5px 9px; border-radius: 0; border: 1px solid color-mix(in srgb, var(--card-hover-accent) 28%, rgba(255, 248, 240, 0.12)); background: linear-gradient( 105deg, color-mix(in srgb, var(--card-hover-accent) 16%, transparent) 0%, rgba(255, 248, 240, 0.04) 48%, transparent 88% ); box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.06), 0 6px 16px -10px rgba(0, 0, 0, 0.55); border-left: 3px solid color-mix(in srgb, var(--card-hover-accent) 72%, transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); overflow-wrap: anywhere; word-break: break-word; } .card-hover-overlay .tagline-detail { font-size: 11px; font-size: clamp(10px, 2.2cqw, 11.5px); font-weight: 500; font-style: normal; color: rgba(255, 252, 245, 0.93); line-height: 1.42; margin: 0; max-width: none; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); overflow-wrap: anywhere; word-break: break-word; } .card-hover-overlay .tagline-detail--after-heading { text-align: left; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; } .card-hover-overlay .card-benefits { list-style: none; margin: 8px 0 0; padding: 0 0 0 2px; font-size: 10px; font-size: clamp(9px, 2cqw, 11px); font-weight: 600; line-height: 1.35; color: rgba(255, 252, 245, 0.88); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); } .card-hover-overlay .card-benefits li { position: relative; padding-left: 12px; margin: 0 0 4px; overflow-wrap: anywhere; word-break: break-word; } .card-hover-overlay .card-benefits li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 5px; height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--card-hover-accent, #a78bfa) 75%, rgba(255, 248, 240, 0.5)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .card-hover-overlay .card-benefits li:last-child { margin-bottom: 0; } .card-hover-btns { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 6px; margin-top: 0; flex-shrink: 0; pointer-events: none; } .card-hover-btns a, .card-hover-btns .demo-btn, .card-hover-btns .consult-btn-wrap { pointer-events: auto; } .consult-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; } .card-hover-overlay .consult-btn-note { display: none; } .consult-btn-note { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,248,240,0.72); text-align: center; line-height: 1.2; } .card-hover-overlay .consult-btn { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 0; width: 100%; max-width: 100%; box-sizing: border-box; line-height: 1.2; border: 1px solid rgba(255,248,240,0.45); background: rgba(0,0,0,0.35); transition: border-color .2s, background .2s, color .2s; } .card-hover-overlay .consult-btn:hover { border-color: var(--demo-cat-consult-bd, rgba(201, 162, 64, 0.85)); background: var(--demo-cat-consult-bg, rgba(160, 120, 40, 0.22)); color: #fff; } .card-hover-overlay .demo-btn { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background: var(--accent); color: #0F0D18; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 0; flex: 1 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; line-height: 1.2; white-space: normal; text-align: center; transition: filter .2s, transform .2s; } .card-hover-overlay a.demo-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .card-hover-overlay .demo-btn--disabled { opacity: 0.55; cursor: default; pointer-events: none; } @container demo-card (max-width: 240px) { .card-hover-btns { flex-direction: column; } .card-hover-overlay .consult-btn, .card-hover-overlay .demo-btn { width: 100%; } } .card-badge { display: inline-block; max-width: 100%; font-size: 9px; font-size: clamp(8px, 2.2cqw, 9px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 0; margin-bottom: 0; line-height: 1.2; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .card-name { font-size: 13px; font-size: clamp(11px, 3cqw, 14px); font-weight: 700; color: var(--text); line-height: 1.2; text-align: right; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; } .card-browser-bar .card-num { position: static; font-size: 9px; font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; font-weight: 700; letter-spacing: 0.04em; color: rgba(226, 232, 240, 0.72); pointer-events: none; flex-shrink: 0; line-height: 1; user-select: none; } /* ── EMPTY ── */ .empty { grid-column: 1/-1; text-align: center; padding: 80px 20px; color: var(--muted); } .empty strong { display: block; font-size: 18px; margin-bottom: 8px; color: var(--text); } /* ── CTA SECTION ── */ .cta-section { text-align: center; padding: 80px 40px; border-top: 1px solid var(--border); background: var(--surface); } .cta-section h2 { font-size: 32px; font-weight: 800; margin-bottom: 12px; } .cta-section p { font-size: 15px; color: var(--muted); margin-bottom: 28px; } .cta-btn { display: inline-block; background: var(--accent); color: #0F0D18; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; padding: 14px 36px; border-radius: 8px; text-decoration: none; transition: opacity .2s; } .cta-btn:hover { opacity: 0.88; } .cta-sub { margin-top: 16px; font-size: 12px; color: var(--muted); } /* Dolny dock: pasek wyceny (9400) < BTT (9500) < WhatsApp (9600); safe-area iOS */ .floating-quote-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9400; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; } #backToTop { display: none; position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: calc(22px + env(safe-area-inset-right, 0px)); z-index: 9500; width: 44px; height: 44px; border-radius: 50%; border: none; background: #6366f1; color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 14px rgba(99,102,241,0.45); } .wa-float { position: fixed; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: calc(22px + env(safe-area-inset-right, 0px)); z-index: 9600; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.5); text-decoration: none; transition: transform .2s, bottom .2s ease; } .wa-float:hover { transform: scale(1.08); } /* Gdy widoczny pasek „Wycena w 24h” — unikaj nakładania z FAB po prawej */ body[data-floating-quote-visible="1"] .wa-float { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } body[data-floating-quote-visible="1"] #backToTop { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 600px) { .hero { padding: 48px 20px 40px; padding-top: calc(var(--nav-h) + 32px); } .search-wrap { padding-left: 16px; padding-right: 16px; } .filters-wrap { padding-left: 6px; padding-right: 6px; gap: 4px; } .filters-nav { width: 36px; height: 36px; font-size: 11px; } /* .nav-inner removed – replaced by Tailwind nav */ .demo-gallery-toolbar { box-shadow: 0 8px 28px rgba(0,0,0,0.42); } .filter-btn { font-size: 11px; padding: 8px 12px; min-height: 36px; } .search-wrap input { font-size: 16px; max-width: none; } } @media (min-width: 901px) { .filters-wrap { padding-left: 28px; padding-right: 28px; } } } /* ── BRANŻE PAGE V2 ──────────────────────────────────────────────── */ /* Licznik wyników przy wyszukiwarce na /branze (osobno od usuniętego licznika galerii demo) */ .branze-search-count { font-size: 13px; font-weight: 600; color: #cbd5e1; letter-spacing: 0.03em; white-space: nowrap; } @media (max-width: 600px) { .branze-search-count { font-size: 12px; } } /* Ikona branży — kolorowy box z ikoną FA */ .ic-icon-box { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: color-mix(in srgb, var(--ic-color, #818cf8) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ic-color, #818cf8) 28%, transparent); color: var(--ic-color, #818cf8); transition: transform 0.22s ease, box-shadow 0.22s ease; } .industry-card:hover .ic-icon-box { transform: scale(1.1) rotate(-3deg); box-shadow: 0 0 20px color-mix(in srgb, var(--ic-color, #818cf8) 38%, transparent); } /* Top accent bar + hover lift + tło z akcentem branży */ .industry-card { position: relative; overflow: hidden; transition: transform 0.2s ease, border-color 0.25s, box-shadow 0.25s, background 0.25s; background: radial-gradient(ellipse 95% 70% at 100% -5%, color-mix(in srgb, var(--ic-color, #818cf8) 16%, transparent) 0%, transparent 52%), linear-gradient( 168deg, color-mix(in srgb, var(--ic-color, #818cf8) 8%, rgba(15, 23, 42, 0.92)) 0%, rgba(15, 23, 42, 0.78) 48%, color-mix(in srgb, var(--ic-color, #818cf8) 4%, rgba(2, 6, 23, 0.82)) 100% ); border-color: color-mix(in srgb, var(--ic-color, #818cf8) 24%, rgb(30 41 59)) !important; } .industry-card .ic-watermark { position: absolute; right: 12px; top: 10px; width: 58px; height: 58px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--ic-color, #818cf8) 70%, #ffffff); background: color-mix(in srgb, var(--ic-color, #818cf8) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ic-color, #818cf8) 34%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 26px color-mix(in srgb, var(--ic-color, #818cf8) 18%, transparent); opacity: 0.18; pointer-events: none; transition: transform 0.24s ease, opacity 0.24s ease, box-shadow 0.24s ease; } .industry-card .ic-watermark i { font-size: 1.45rem; } .industry-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ic-color, #818cf8) 0%, transparent 80%); opacity: 0; transition: opacity 0.25s; } .industry-card:hover::before { opacity: 1; } .industry-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,0.25), 0 0 0 1px color-mix(in srgb, var(--ic-color, #818cf8) 35%, transparent); border-color: color-mix(in srgb, var(--ic-color, #818cf8) 40%, transparent) !important; } .industry-card:hover .ic-watermark, .industry-card:focus-within .ic-watermark { opacity: 0.32; transform: translateY(-1px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 32px color-mix(in srgb, var(--ic-color, #818cf8) 26%, transparent); } .industry-card:focus-within { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.24), 0 0 0 1px color-mix(in srgb, var(--ic-color, #818cf8) 38%, transparent); border-color: color-mix(in srgb, var(--ic-color, #818cf8) 45%, transparent) !important; } .industry-card a:focus-visible, .industry-card button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ic-color, #818cf8) 70%, #ffffff 30%); outline-offset: 3px; border-radius: 8px; } /* Feature bullets — panel z akcentem branży (nie „płaska” lista) */ .ic-features { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ic-features.ic-features-panel { margin-top: 14px; padding: 12px 14px 14px; border-radius: 14px; background: linear-gradient( 155deg, rgba(15, 23, 42, 0.72) 0%, color-mix(in srgb, var(--ic-color, #818cf8) 6%, rgba(15, 23, 42, 0.45)) 100% ); border: 1px solid color-mix(in srgb, var(--ic-color, #818cf8) 18%, rgba(51, 65, 85, 0.55)); border-left: 3px solid var(--ic-color, #818cf8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); gap: 8px; } .ic-features.ic-features-panel::before { content: ''; display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--ic-color, #818cf8) 75%, #f1f5f9); margin-bottom: 2px; } html[lang="pl"] .ic-features.ic-features-panel::before { content: 'W skrócie'; } html[lang="en"] .ic-features.ic-features-panel::before { content: 'Highlights'; } .ic-features li { font-size: 0.8125rem; color: #e2e8f0; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .industry-card .ic-features.ic-features-panel li:first-child { font-weight: 700; color: rgb(248 250 252 / 0.98); } .ic-features li::before { content: '✓'; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; font-size: 0.55rem; font-weight: 800; line-height: 18px; text-align: center; color: var(--ic-color, #818cf8); background: color-mix(in srgb, var(--ic-color, #818cf8) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ic-color, #818cf8) 38%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Demo count badge */ .ic-demo-count { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ic-color, #818cf8) 92%, #fff); background: linear-gradient( 135deg, color-mix(in srgb, var(--ic-color, #818cf8) 14%, transparent), color-mix(in srgb, var(--ic-color, #818cf8) 6%, rgba(15, 23, 42, 0.6)) ); border: 1px solid color-mix(in srgb, var(--ic-color, #818cf8) 32%, transparent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 0 20px color-mix(in srgb, var(--ic-color, #818cf8) 12%, transparent); } .ic-demo-count i { opacity: 0.95; } /* Nagłówek i lead karty — wyraźniejsza hierarchia niż sam text-xs */ .industry-card .ic-card-title { font-size: 1.125rem; line-height: 1.22; letter-spacing: -0.02em; } .industry-card .ic-card-lead { font-size: 0.875rem; line-height: 1.55; color: rgb(226 232 240 / 0.92); } /* CTA „Inspiracje demo dla Ciebie!” — wyróżnienie pod kolor branży */ .industry-card .ic-demo-filter-cta { color: color-mix(in srgb, var(--ic-color, #a78bfa) 78%, #ffffff) !important; border: 1px solid color-mix(in srgb, var(--ic-color, #a78bfa) 44%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--ic-color, #a78bfa) 14%, rgba(15, 23, 42, 0.65)) 0%, color-mix(in srgb, var(--ic-color, #a78bfa) 8%, rgba(2, 6, 23, 0.72)) 100% ); border-radius: 0.75rem; padding: 0.48rem 0.8rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 26px color-mix(in srgb, var(--ic-color, #a78bfa) 18%, transparent); } .industry-card .ic-demo-filter-cta i:first-child { color: color-mix(in srgb, var(--ic-color, #a78bfa) 86%, #ffffff); transition: transform 0.22s ease; } .industry-card .ic-demo-filter-cta:hover { color: #f8fafc !important; border-color: color-mix(in srgb, var(--ic-color, #a78bfa) 68%, #ffffff 15%); transform: translateY(-1px); text-shadow: 0 0 20px color-mix(in srgb, var(--ic-color, #a78bfa) 38%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 34px color-mix(in srgb, var(--ic-color, #a78bfa) 34%, transparent); } .industry-card .ic-demo-filter-cta:hover i:first-child { transform: translateX(2px); } .industry-card .ic-demo-filter-cta:focus-visible { outline: 2px solid color-mix(in srgb, var(--ic-color, #a78bfa) 72%, #ffffff 28%); outline-offset: 2px; } /* Sekcja "Jak to działa" — 3 kroki */ .ic-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 639px) { .ic-steps { grid-template-columns: 1fr; } } .ic-step { display: flex; flex-direction: column; gap: 8px; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid #1E1B2E; background: rgba(15,13,24,0.55); transition: border-color 0.2s, background 0.2s; } .ic-step:hover { border-color: rgba(99,102,241,0.35); background: rgba(15,13,24,0.8); } .ic-step-num { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; color: #6366f1; text-transform: uppercase; } .ic-step-icon { font-size: 1.4rem; color: #a78bfa; margin-top: 2px; } .ic-step-title { font-size: 0.875rem; font-weight: 700; color: #fff; margin: 0; } .ic-step-desc { font-size: 0.72rem; color: #94a3b8; line-height: 1.55; margin: 0; } /* Filter chips — ikona */ .filter-btn .fi { margin-right: 4px; font-size: 0.68rem; opacity: 0.85; } .filter-btn .fi-emoji { margin-right: 4px; font-size: 0.85em; line-height: 1; opacity: 0.95; } /* Prefill button — hover z kolorem branży */ .prefill-contact-btn { transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.2s !important; } .prefill-contact-btn:hover { background: color-mix(in srgb, var(--ic-color, #818cf8) 12%, transparent) !important; border-color: color-mix(in srgb, var(--ic-color, #818cf8) 45%, transparent) !important; color: color-mix(in srgb, var(--ic-color, #818cf8) 90%, #fff) !important; } /* CTA „Wycena w 24h” na kartach branż — secondary z kolorem sektora */ .industry-card .ic-prefill-btn { border-color: color-mix(in srgb, var(--ic-color, #818cf8) 40%, #475569) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--ic-color, #818cf8) 11%, rgba(30, 41, 59, 0.9)) 0%, color-mix(in srgb, var(--ic-color, #818cf8) 5%, rgba(15, 23, 42, 0.95)) 100% ) !important; color: #f1f5f9 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 26px color-mix(in srgb, var(--ic-color, #818cf8) 12%, transparent); } .industry-card .ic-prefill-btn:hover { background: color-mix(in srgb, var(--ic-color, #818cf8) 20%, rgba(15, 23, 42, 0.97)) !important; border-color: color-mix(in srgb, var(--ic-color, #818cf8) 52%, #64748b) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 36px color-mix(in srgb, var(--ic-color, #818cf8) 24%, transparent); } .industry-card .ic-prefill-btn:focus-visible { outline-color: color-mix(in srgb, var(--ic-color, #818cf8) 65%, #ffffff 35%); } /* ===== BRANZE PAGE ENHANCED STYLES ===== */ /* Hero section for branze pages */ .branza-hero { position: relative; } .branza-hero h1 { text-shadow: 0 2px 20px rgba(167, 139, 250, 0.3); } /* Feature cards */ .branza-feature-card { position: relative; overflow: hidden; } .branza-feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-color, #a78bfa), transparent); opacity: 0; transition: opacity 0.3s ease; } .branza-feature-card:hover::before { opacity: 1; } /* Collaboration steps */ .collab-step { position: relative; } .collab-step::after { content: ''; position: absolute; top: 50%; right: -12px; width: 24px; height: 2px; background: linear-gradient(90deg, #475569, transparent); opacity: 0; } .collab-step:last-child::after { display: none; } @media (max-width: 768px) { .collab-step::after { display: none; } } /* FAQ enhancements */ .branza-faq details { transition: all 0.3s ease; } .branza-faq details[open] { background: rgba(30, 41, 59, 0.6); } .branza-faq summary::-webkit-details-marker { display: none; } .branza-faq summary::after { content: '+'; font-size: 1.25rem; color: #64748b; transition: transform 0.3s ease; } .branza-faq details[open] summary::after { content: '−'; transform: rotate(180deg); } /* Gradient text utility */ .text-gradient { background: linear-gradient(135deg, #f472b6, #a78bfa, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Card hover glow effect */ .card-glow { transition: all 0.3s ease; } .card-glow:hover { box-shadow: 0 0 30px rgba(167, 139, 250, 0.15); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .industry-card, .industry-card::before, .industry-card .ic-watermark, .ic-icon-box, .card-glow, .branza-feature-card, .collab-step { transition: none !important; } .industry-card:hover, .industry-card:focus-within, .card-glow:hover { transform: none !important; } .industry-card:hover .ic-icon-box, .industry-card:focus-within .ic-icon-box { transform: none !important; box-shadow: none !important; } .industry-card:hover .ic-watermark, .industry-card:focus-within .ic-watermark { transform: none !important; } .industry-card .ic-demo-filter-cta:hover { text-shadow: none !important; transform: none !important; } .branze-hub-cta-primary:hover { transform: none !important; } } /* Stats section for branze pages */ .branza-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .branza-stat { text-align: center; padding: 1.5rem; background: rgba(15, 13, 24, 0.6); border-radius: 1rem; border: 1px solid rgba(99, 102, 241, 0.2); } .branza-stat-number { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #a78bfa, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .branza-stat-label { font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem; } /* CTA buttons with gradient */ .btn-gradient-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); transition: all 0.3s ease; } .btn-gradient-primary:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4); } /* Mobile responsive adjustments */ @media (max-width: 640px) { .branza-hero { padding: 2rem 1rem; } .branza-hero h1 { font-size: 1.75rem; } .branza-feature-card { padding: 1.25rem; } }