/* ============================================================ PAWEŁ SOCZOMSKI — PODSTRONY USŁUG Komponenty tylko dla /uslugi/*.html — dziedziczą tokeny i bazę ze style.css (kolory, nav, btn, footer, contact, lightbox). Akcent usługi sterowany zmienną --acc na . ============================================================ */ :root { --acc: var(--cyan); } /* ---------- HERO USŁUGI (krótszy niż na głównej) ---------- */ .svc-hero { min-height: auto; padding-top: var(--nav-h); } .svc-hero .hero-bg { inset: 0; } .svc-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 20%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%); mix-blend-mode: screen; pointer-events: none; } @media (min-width: 1025px) { .svc-hero .hero-bg { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); } } .svc-hero .hero-content { padding: clamp(120px, 20vh, 190px) 0 clamp(70px, 10vh, 120px); } /* wariant kadru: odbicie w poziomie + kadr tak, by drukarka (w oryginale po lewej) trafiła na prawą, wolną od tekstu stronę, a Paweł został widoczny */ .svc-hero.hero--shift .hero-bg video { object-position: 20% 44%; } @media (min-width: 1025px) { .svc-hero.hero--shift .hero-bg { left: 42%; } } .svc-hero .hero-title { font-size: clamp(38px, 5.4vw, 74px); max-width: 15ch; } .svc-hero .hero-lead { max-width: 560px; } .svc-hero .h-line-in.grad { background: linear-gradient(92deg, var(--acc) 10%, color-mix(in srgb, var(--acc) 55%, #fff) 46%, var(--orange) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- BREADCRUMB ---------- */ .breadcrumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; } .breadcrumb a { transition: color 0.25s; border-bottom: 1px solid transparent; } .breadcrumb a:hover { color: var(--acc); border-color: var(--acc); } .breadcrumb .sep { color: color-mix(in srgb, var(--acc) 60%, transparent); } .breadcrumb .cur { color: var(--text); } .breadcrumb .tag { color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; } /* akcent na przyciskach hero podstrony */ .svc-accent-cta.btn-wa { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 78%, #fff), var(--acc) 55%, color-mix(in srgb, var(--acc) 70%, #000)); color: #06121a; box-shadow: 0 6px 26px -8px color-mix(in srgb, var(--acc) 55%, transparent); } .svc-accent-cta.btn-wa:hover { box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--acc) 75%, transparent); } /* ---------- SEKCJA: ZAKRES USŁUG ---------- */ .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .scope-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 2.6vw, 32px); overflow: hidden; transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s; } .scope-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--acc), transparent); opacity: 0; transition: opacity 0.4s; } .scope-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--acc) 40%, transparent); } .scope-card:hover::before { opacity: 1; } .scope-ico { width: 46px; height: 46px; color: var(--acc); margin-bottom: 18px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); border-radius: 12px; background: rgba(10, 10, 11, 0.4); } .scope-ico svg { width: 24px; height: 24px; } .scope-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 10px; line-height: 1.2; } .scope-card p { color: var(--muted); font-size: 14.5px; } /* ---------- SEKCJA: PROCES (kroki numerowane) ---------- */ .steps { counter-reset: step; } .steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 22px); } .step { position: relative; padding: clamp(22px, 2.4vw, 30px) clamp(16px, 1.8vw, 22px); border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); } .step-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--acc); margin-bottom: 14px; display: block; } .step h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; } .step p { color: var(--muted); font-size: 13.5px; } .step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--acc) 70%, transparent); font-size: 16px; z-index: 2; } /* ---------- SEKCJA: DLACZEGO (reużywa .why-row ze style.css) ---------- */ .svc-why .why-row:hover .why-num { -webkit-text-stroke-color: var(--acc); } .svc-why .why-row:hover .why-arr { color: var(--acc); } /* ---------- SEKCJA: FAQ (akordeon) ---------- */ .faq-wrap { max-width: 860px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; gap: 18px; padding: clamp(20px, 2.4vw, 28px) 4px; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.7vw, 20px); letter-spacing: 0.005em; transition: color 0.3s; } .faq-q:hover { color: var(--acc); } .faq-q .faq-ix { font-family: var(--font-mono); font-size: 12px; color: var(--acc); flex-shrink: 0; width: 34px; } .faq-q .faq-plus { margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; position: relative; } .faq-q .faq-plus::before, .faq-q .faq-plus::after { content: ""; position: absolute; background: var(--acc); border-radius: 2px; transition: transform 0.35s var(--ease-out), opacity 0.3s; } .faq-q .faq-plus::before { left: 0; right: 0; top: 10px; height: 2px; } .faq-q .faq-plus::after { top: 0; bottom: 0; left: 10px; width: 2px; } .faq-item.open .faq-plus::after { transform: scaleY(0); opacity: 0; } .faq-a { overflow: hidden; height: 0; transition: height 0.4s var(--ease-out); } .faq-a-inner { padding: 0 4px clamp(20px, 2.2vw, 26px) 52px; } .faq-a-inner p { color: var(--muted); font-size: 15px; max-width: 62ch; } /* ---------- SEKCJA: POWIĄZANE USŁUGI ---------- */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); } .related-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); min-height: 190px; display: flex; align-items: flex-end; transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s; } .related-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.66); z-index: 0; transition: transform 0.9s var(--ease-out), filter 0.5s; } .related-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,11,0.1) 30%, rgba(10,10,11,0.9) 100%); } .related-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 24px 54px -28px color-mix(in srgb, var(--rc) 45%, transparent); } .related-card:hover img { transform: scale(1.06); filter: saturate(1) brightness(0.78); } .related-body { position: relative; z-index: 2; padding: clamp(18px, 2vw, 24px); width: 100%; } .related-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--rc); display: block; margin-bottom: 6px; } .related-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); text-transform: uppercase; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; } .related-card h3 span { transition: transform 0.3s var(--ease-out); color: var(--rc); } .related-card:hover h3 span { transform: translateX(5px); } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .scope-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: repeat(3, 1fr); } .step:nth-child(3)::after { display: none; } .related-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .scope-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; gap: 12px; } .step::after { display: none !important; } .related-grid { grid-template-columns: 1fr; } .svc-hero .hero-title { font-size: clamp(24px, 7vw, 42px); } .faq-a-inner { padding-left: 4px; } }