/* TRACZ — kopia robocza. Paleta: grafit + stal + pomarańcz firmowy. */ :root { --ink: #1c2430; --ink-soft: #4b5563; --steel: #e8ebef; --bg: #f7f8fa; --card: #ffffff; --accent: #e8620c; --accent-dark: #c85207; --line: #dfe3e8; --radius: 12px; --shadow: 0 1px 2px rgba(28, 36, 48, .06), 0 8px 24px rgba(28, 36, 48, .07); } * { margin: 0; padding: 0; box-sizing: border-box; } /* atrybut hidden musi zawsze wygrywać z regułami display — inaczej ukryte nakładki pozostają aktywne i przechwytują kliknięcia */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } /* ---------- zgody na pliki cookie (Consent Mode v2) ---------- Baner pokazuje się tylko przy pierwszej wizycie; później zastępuje go mały bąbelek, którym można wrócić do wyboru. Stoi w lewym dolnym rogu, żeby nie kolidować z bąbelkiem zapytania ofertowego po prawej. */ .zgody { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 999; max-width: 520px; margin: 0 auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 34px rgba(28, 36, 48, .18), 0 2px 8px rgba(28, 36, 48, .10); padding: 22px 24px; line-height: 1.5; } .zgody-tytul { font-weight: 800; font-size: 16px; margin-bottom: 8px; } .zgody-tresc { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; } .zgody-tresc a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; } .zgody-tresc a:hover { color: var(--accent); } .zgody-btns { display: flex; gap: 10px; flex-wrap: wrap; } /* Przyciski muszą być równorzędnie czytelne — odmowa nie może być trudniejsza od zgody. Wariant „ghost" z reszty strony ma jasny tekst pod ciemne tło hero, więc na białym banerze definiujemy go od nowa: ciemny napis na bieli. */ .zgody-btns .btn { padding: 11px 16px; font-size: 14px; } .zgody-btns .btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); } .zgody-btns .btn-ghost:hover { background: var(--steel); border-color: var(--ink-soft); color: var(--ink); } /* Ciemniejszy odcień akcentu: biały napis na podstawowym pomarańczu daje kontrast 3,4:1, poniżej normy 4,5:1. Na banerze zgód czytelność jest wymogiem, nie kwestią gustu. */ .zgody-btns .btn-primary { background: var(--accent-dark); } .zgody-btns .btn-primary:hover { background: #b34a06; } .zgody-bbl { position: fixed; left: 16px; bottom: 16px; z-index: 998; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(28, 36, 48, .18); font-size: 21px; line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .zgody-bbl:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(28, 36, 48, .26); } .zgody-bbl::after { content: attr(data-tip); position: absolute; left: 54px; top: 50%; transform: translateY(-50%); background: var(--ink); color: #fff; font-size: 12px; line-height: 1.3; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; } .zgody-bbl:hover::after { opacity: 1; visibility: visible; } @media (max-width: 600px) { .zgody { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 18px 16px; } .zgody-btns { flex-direction: column; } /* pole dotyku 44 px — dotyczy tak samo odmowy, jak zgody */ .zgody-btns .btn { width: 100%; padding: 13px 16px; } .zgody-bbl { width: 40px; height: 40px; font-size: 19px; left: 12px; bottom: 12px; } .zgody-bbl::after { display: none; } } /* ---------- preloader ---------- Pokazywany tylko przy pierwszym wejściu w sesji (przy kolejnych kliknięciach ekran ładowania irytuje bardziej niż pomaga — klasę prel-off ustawia krótki skrypt w , dzięki czemu nie ma nawet mgnienia). Animacja prelAuto to bezpiecznik: jeśli JS nie wystartuje, nakładka i tak zniknie. */ .preloader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: linear-gradient(160deg, #141b25 0%, #1e2836 55%, #26334a 100%); animation: prelAuto .4s ease 3s forwards; } .prel-off .preloader { display: none; } .preloader.is-done { opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility 0s .38s; } .preloader__in { text-align: center; } .preloader__mark { display: block; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: .3em; text-indent: .3em; } .preloader__bar { display: block; width: 168px; height: 4px; margin: 16px auto 0; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; } .preloader__bar i { display: block; width: 45%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), #ffab63); animation: prelBar 1.05s cubic-bezier(.65, 0, .35, 1) infinite; } @keyframes prelBar { from { transform: translateX(-115%); } to { transform: translateX(245%); } } @keyframes prelAuto { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .preloader { animation-delay: 2.2s; } .preloader__bar i { width: 100%; animation: none; } .preloader.is-done { transition: none; } } body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; } .logo { display: flex; align-items: center; margin-right: auto; } .logo-img { height: 40px; width: auto; display: block; } .footer-logo { height: 36px; width: auto; margin-bottom: 28px; } .nav { display: flex; gap: 22px; font-weight: 600; font-size: 15px; align-items: center; } .nav a { padding: 6px 2px; border-bottom: 2px solid transparent; } .nav a:hover, .nav a.active { border-bottom-color: var(--accent); color: var(--accent-dark); } /* rozwijane menu */ .nav-drop { position: relative; } .nav-drop .caret { font-size: 11px; opacity: .55; } .nav-drop .drop-menu { position: absolute; top: 100%; left: -10px; padding-top: 10px; display: none; z-index: 70; } .nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: block; } .drop-menu-inner, .nav-drop .drop-menu > a:first-child { border-top-left-radius: 10px; } .nav-drop .drop-menu > a { display: block; background: #fff; border: 1px solid var(--line); border-top: none; padding: 10px 16px; min-width: 250px; white-space: nowrap; font-size: 14px; } .nav-drop .drop-menu > a:first-child { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; } .nav-drop .drop-menu > a:last-child { border-radius: 0 0 10px 10px; box-shadow: var(--shadow); } .nav-drop .drop-menu > a:hover { background: var(--steel); color: var(--accent-dark); border-bottom-color: var(--line); } .lang-switch { font-size: 13px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 14px; color: var(--ink-soft); } .lang-switch:hover { border-color: var(--accent); color: var(--accent-dark); } /* ---------- hero ---------- */ .hero { /* zdjęcie wjazdu na plac (stróżówka TRACZ) pod ciemną nakładką — tekst musi pozostać czytelny */ background-color: #161d27; background-image: linear-gradient(135deg, #161d27 0%, #263140 55%, #31405a 100%); background-repeat: no-repeat, no-repeat; color: #fff; padding: 84px 0 72px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px); } .hero .wrap { position: relative; } .hero .kicker { color: var(--accent); font-weight: 800; letter-spacing: .22em; font-size: 13px; text-transform: uppercase; } .hero h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; margin: 14px 0 18px; max-width: 720px; } .hero p.lead { font-size: 18px; color: #c3ccd8; max-width: 640px; } .cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .hero .cta-row { margin-top: 32px; } .btn { display: inline-block; font-weight: 700; border-radius: 8px; padding: 13px 26px; border: 2px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-ghost { border-color: #5b6b80; color: #e8ecf1; } .btn-ghost:hover { border-color: #fff; } /* liczby w hero — również na podstronach (np. „O firmie") */ .stats { display: flex; gap: 44px; margin-top: 48px; flex-wrap: wrap; } .stats div b { display: block; font-size: 28px; color: #fff; } .stats div span { font-size: 13.5px; color: #9aa7b6; } @media (max-width: 560px) { .stats { gap: 24px 32px; } } /* ---------- animacja hero: projekt → cięcie → spawanie → gotowy wózek ---------- */ .hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 44px; align-items: center; } .hero-anim { margin: 0; } .hero-anim svg { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 26px; } .hero-anim { max-width: 460px; margin: 0 auto; } /* na telefonie treść zaczyna się wyżej — mniej pustej przestrzeni nad nagłówkiem */ .hero { padding: 54px 0 56px; } .hero .stats { margin-top: 34px; gap: 26px 34px; } .page-hero { padding: 40px 0 36px; } } /* cykl: 0-24% rysunek | 26-46% cięcie | 48-62% spawanie | 62-76% materializacja | 80-92% połysk */ .ha-grid { opacity: 0; animation: haGrid 9s linear infinite; } @keyframes haGrid { 0% { opacity: 0; } 4% { opacity: 1; } 60% { opacity: 1; } 74% { opacity: .25; } 94% { opacity: .25; } 100% { opacity: 0; } } .ha-outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: haDraw 9s linear infinite; } .ha-o2 { animation-name: haDraw2; } .ha-o3 { animation-name: haDraw3; } .ha-o4 { animation-name: haDraw4; } @keyframes haDraw { 0% { stroke-dashoffset: 1; stroke: #7fa6c8; } 3% { stroke-dashoffset: 1; } 11% { stroke-dashoffset: 0; } 46% { stroke: #7fa6c8; } 54% { stroke: #dfe9f2; } 72% { opacity: 1; } 80% { opacity: .25; } 96% { opacity: .25; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } @keyframes haDraw2 { 0% { stroke-dashoffset: 1; stroke: #7fa6c8; } 8% { stroke-dashoffset: 1; } 15% { stroke-dashoffset: 0; } 46% { stroke: #7fa6c8; } 54% { stroke: #dfe9f2; } 72% { opacity: 1; } 80% { opacity: .25; } 96% { opacity: .25; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } @keyframes haDraw3 { 0% { stroke-dashoffset: 1; stroke: #7fa6c8; } 12% { stroke-dashoffset: 1; } 19% { stroke-dashoffset: 0; } 46% { stroke: #7fa6c8; } 54% { stroke: #dfe9f2; } 72% { opacity: 1; } 80% { opacity: .25; } 96% { opacity: .25; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } @keyframes haDraw4 { 0% { stroke-dashoffset: 1; stroke: #7fa6c8; } 16% { stroke-dashoffset: 1; } 24% { stroke-dashoffset: 0; } 46% { stroke: #7fa6c8; } 54% { stroke: #dfe9f2; } 72% { opacity: 1; } 80% { opacity: .25; } 96% { opacity: .25; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .ha-dims { opacity: 0; animation: haDims 9s linear infinite; } @keyframes haDims { 0% { opacity: 0; } 17% { opacity: 0; } 22% { opacity: .85; } 58% { opacity: .85; } 66% { opacity: 0; } 100% { opacity: 0; } } .ha-laser { opacity: 0; transform: translateX(110px); animation: haLaser 9s cubic-bezier(.45,.05,.55,.95) infinite; } @keyframes haLaser { 0% { opacity: 0; transform: translateX(110px); } 25% { opacity: 0; transform: translateX(110px); } 27% { opacity: 1; } 44% { opacity: 1; transform: translateX(450px); } 46% { opacity: 0; transform: translateX(450px); } 100% { opacity: 0; transform: translateX(450px); } } .ha-weld { opacity: 0; animation: haWeld 9s linear infinite; } .ha-w2 { animation-name: haWeld2; } .ha-w3 { animation-name: haWeld3; } .ha-w4 { animation-name: haWeld4; } @keyframes haWeld { 0%, 47% { opacity: 0; transform: scale(.4); } 48% { opacity: 1; transform: scale(1.15); } 49% { opacity: .25; } 50% { opacity: 1; transform: scale(.95); } 51.5% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } } @keyframes haWeld2 { 0%, 51% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.15); } 53% { opacity: .25; } 54% { opacity: 1; transform: scale(.95); } 55.5% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } } @keyframes haWeld3 { 0%, 55% { opacity: 0; transform: scale(.4); } 56% { opacity: 1; transform: scale(1.15); } 57% { opacity: .25; } 58% { opacity: 1; transform: scale(.95); } 59.5% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } } @keyframes haWeld4 { 0%, 58% { opacity: 0; transform: scale(.4); } 59% { opacity: 1; transform: scale(1.15); } 60% { opacity: .25; } 61% { opacity: 1; transform: scale(.95); } 62.5% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } } .ha-fill { opacity: 0; animation: haFill 9s linear infinite; } @keyframes haFill { 0% { opacity: 0; } 61% { opacity: 0; } 74% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } .ha-shine-r { animation: haShine 9s linear infinite; } @keyframes haShine { 0%, 79% { transform: skewX(-18deg) translateX(0); } 91% { transform: skewX(-18deg) translateX(560px); } 100% { transform: skewX(-18deg) translateX(560px); } } /* wypalanie logo: odsłanianie od lewej + błysk, potem stygnie do subtelnego graweru */ .ha-logo { opacity: 0; clip-path: inset(0 100% 0 0); animation: haLogo 9s linear infinite; } @keyframes haLogo { 0%, 74.5% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(2.4) saturate(.4); } 75.5% { opacity: 1; } 81% { clip-path: inset(0 0 0 0); filter: brightness(2.1) saturate(.5); opacity: 1; } 85% { filter: grayscale(1) brightness(.52); opacity: .48; } 95% { filter: grayscale(1) brightness(.52); opacity: .48; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } } .ha-logo-beam { opacity: 0; transform: translateX(232px); animation: haLogoBeam 9s linear infinite; } @keyframes haLogoBeam { 0%, 75% { opacity: 0; transform: translateX(232px); } 75.6% { opacity: 1; } 80.4% { opacity: 1; transform: translateX(328px); } 81% { opacity: 0; transform: translateX(328px); } 100% { opacity: 0; transform: translateX(328px); } } /* dostępność: bez animacji pokazujemy gotowy wózek z konturem technicznym */ @media (prefers-reduced-motion: reduce) { .ha-grid, .ha-outline, .ha-dims, .ha-laser, .ha-weld, .ha-fill, .ha-shine-r, .ha-logo, .ha-logo-beam { animation: none; } .ha-grid { opacity: .5; } .ha-outline { stroke-dashoffset: 0; stroke: #dfe9f2; opacity: .5; } .ha-fill { opacity: 1; } .ha-logo { opacity: .48; clip-path: inset(0 0 0 0); filter: grayscale(1) brightness(.52); } .ha-dims, .ha-laser, .ha-weld, .ha-logo-beam { opacity: 0; } } /* ---------- sekcje ---------- */ section.block { padding: 64px 0; } section.block.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .block h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin-bottom: 10px; } .block .sub { color: var(--ink-soft); max-width: 760px; margin-bottom: 34px; } .accent-bar { width: 56px; height: 4px; background: var(--accent); border-radius: 2px; margin-bottom: 18px; } .grid { display: grid; gap: 22px; } .grid.c4 { grid-template-columns: repeat(4, 1fr); } .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .grid.c2 { grid-template-columns: 1fr; } } @media (max-width: 980px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid.c4, .grid.c3 { grid-template-columns: 1fr; } } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: none; transition: .18s; } .tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .tile h3 { font-size: 18px; margin-bottom: 8px; } .tile p { font-size: 14.5px; color: var(--ink-soft); } .tile .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .14em; } /* ---------- karty produktów ---------- */ .pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .18s; } .pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .pcard .ph { background: #fff; aspect-ratio: 1/1; display: grid; place-items: center; padding: 14px; border-bottom: 1px solid var(--line); } .pcard .ph img { max-height: 100%; object-fit: contain; } .pcard .pb { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pcard .cat { font-size: 12px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .08em; } .pcard h3 { font-size: 16.5px; line-height: 1.3; } .pcard p { font-size: 13.5px; color: var(--ink-soft); flex: 1; } .pcard .more { font-size: 14px; font-weight: 700; color: var(--accent-dark); } /* ---------- katalog: filtry ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; } .chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .12s; } .chip:hover { border-color: var(--accent); } .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); } .searchbox { width: 100%; max-width: 420px; padding: 12px 16px; font-size: 15px; border: 1.5px solid var(--line); border-radius: 8px; margin-top: 18px; } .searchbox:focus { outline: none; border-color: var(--accent); } .count-note { font-size: 14px; color: var(--ink-soft); margin: 14px 0 20px; } /* ---------- strona produktu ---------- */ .crumbs { font-size: 13.5px; color: var(--ink-soft); padding: 18px 0 0; } .crumbs a:hover { color: var(--accent-dark); } .product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 28px 0 20px; align-items: start; } @media (max-width: 860px) { .product { grid-template-columns: 1fr; } } .gallery .main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1/1; display: grid; place-items: center; padding: 20px; } .gallery .main img { max-height: 100%; object-fit: contain; } .gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .gallery .thumbs button { width: 76px; height: 76px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; padding: 6px; cursor: pointer; } .gallery .thumbs button.on { border-color: var(--accent); } .gallery .thumbs img { width: 100%; height: 100%; object-fit: contain; } .pinfo .cat { font-size: 13px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .08em; } .pinfo h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.18; margin: 6px 0 12px; } .pinfo .teaser { font-size: 16.5px; color: var(--ink-soft); } table.specs { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; } table.specs td { padding: 10px 14px; border: 1px solid var(--line); } table.specs td:first-child { font-weight: 700; background: var(--steel); width: 42%; } table.specs tr:nth-child(even) td:last-child { background: #fbfcfd; } .contact-box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 20px 24px 22px; margin-top: 20px; font-size: 15px; box-shadow: 0 2px 10px rgba(28, 36, 48, .05); } .contact-box b { display: block; margin-bottom: 8px; font-size: 15.5px; } .contact-box a { color: var(--accent-dark); font-weight: 700; } .contact-box a:hover { text-decoration: underline; } .contact-box .btn-primary, .contact-box .btn-primary:hover { color: #fff; text-decoration: none; } .contact-box .btn-primary { margin-top: 6px; padding: 14px 30px; font-size: 15.5px; box-shadow: 0 4px 14px rgba(232, 98, 12, .28); } .contact-box .btn-primary:hover { box-shadow: 0 8px 22px rgba(232, 98, 12, .38); } .prose { padding: 10px 0 40px; max-width: 860px; } .prose h2 { font-size: 24px; margin: 30px 0 14px; } .prose p { margin-bottom: 14px; color: #303a48; } .related { padding-bottom: 70px; } .related h2 { font-size: 24px; margin-bottom: 22px; } /* ---------- kontakt / stopka ---------- */ .footer { background: #161d27; color: #b9c3cf; padding: 60px 0 26px; margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px 34px; align-items: start; } @media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } .footer-brand p { font-size: 14px; line-height: 1.6; max-width: 330px; } .footer-logo { height: 34px; width: auto; margin-bottom: 16px; } .footer-reg { font-size: 12.5px; color: #8794a4; margin-top: 12px; } .footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; } .footer h4::after { content: ""; display: block; width: 30px; height: 3px; background: var(--accent); border-radius: 2px; margin-top: 8px; } .footer-col { display: flex; flex-direction: column; gap: 9px; } .footer-col a { font-size: 14.5px; width: fit-content; } .footer-col p { font-size: 14px; line-height: 1.55; margin: 0; } .footer-col p strong { color: #dfe5ec; font-weight: 700; } .footer-note { font-size: 12.5px; color: #8794a4; margin-top: -4px; } .footer p { font-size: 14.5px; margin-bottom: 8px; } .footer a { color: #e4e9ef; } .footer a:hover { color: var(--accent); } .footer .bottom { border-top: 1px solid #2b3648; margin-top: 44px; padding-top: 22px; font-size: 13px; color: #7f8b9a; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 26px; } .footer-credit a { color: #b9c3cf; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .footer-credit a:hover { color: var(--accent); } .policy-link { margin-bottom: 22px; font-size: 14.5px; } .policy-link a { color: var(--accent-dark); font-weight: 700; } .policy-link a:hover { text-decoration: underline; } /* ---------- linki prawne w stopce ---------- */ .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer-legal a { color: #b9c3cf; text-decoration: underline; text-underline-offset: 3px; } .footer-legal a:hover { color: var(--accent); } /* ---------- pływający przycisk zapytania ofertowego ---------- */ .qbubble { position: fixed; right: 22px; bottom: 22px; z-index: 110; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .qbubble-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 14px 22px; font: inherit; font-weight: 700; font-size: 15px; box-shadow: 0 10px 26px rgba(232, 98, 12, .38); transition: background .18s ease, box-shadow .18s ease; /* wjazd po chwili od wczytania, potem rzadki impuls przyciągający wzrok */ opacity: 0; animation: qbEnter .45s cubic-bezier(.2, .9, .3, 1.2) 1.1s forwards, qbNudge 7s ease-in-out 2.4s infinite; } .qbubble-btn:hover { background: var(--accent-dark); box-shadow: 0 14px 32px rgba(232, 98, 12, .46); } /* pierścień — ten sam motyw co przycisk CTA na stronie głównej */ .qbubble-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: qbRing 7s cubic-bezier(.4, 0, .6, 1) 2.4s infinite; } @keyframes qbEnter { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes qbNudge { 0%, 84%, 100% { transform: translateY(0); } 89% { transform: translateY(-6px); } 94% { transform: translateY(-1px); } } @keyframes qbRing { 0%, 84% { box-shadow: 0 0 0 0 rgba(232, 98, 12, .45); } 95% { box-shadow: 0 0 0 14px rgba(232, 98, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 98, 12, 0); } } /* po pierwszym otwarciu panelu bąbelek się uspokaja — cel osiągnięty */ .qbubble.is-seen .qbubble-btn { animation: none; opacity: 1; } .qbubble.is-seen .qbubble-btn::after { animation: none; } .qbubble.is-seen .qbubble-btn:hover { transform: translateY(-2px); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } /* ikona jako SVG, nie znak Unicode — pewne wymiary i brak ryzyka, że system podmieni znak na kolorowe emoji */ .qbubble-ico { display: grid; place-items: center; flex: none; } .qbubble-ico svg { display: block; width: 20px; height: 20px; } .qbubble.is-open .qbubble-btn { background: var(--ink); box-shadow: 0 10px 26px rgba(28, 36, 48, .34); } .qbubble-panel { width: 320px; max-width: calc(100vw - 44px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 18px 46px rgba(28, 36, 48, .22); animation: qbIn .18s ease-out; } @keyframes qbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .qbubble-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 2px 0 12px 4px; } .qbubble-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; transition: background .15s ease; } .qbubble-item:hover { background: var(--steel); } .qbubble-item .qi { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(232, 98, 12, .12); color: var(--accent-dark); font-size: 17px; } .qbubble-item b { display: block; font-size: 14.5px; color: var(--ink); } .qbubble-item em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; } .qbubble-primary { background: rgba(232, 98, 12, .07); border: 1px solid rgba(232, 98, 12, .22); margin-bottom: 6px; } .qbubble-primary:hover { background: rgba(232, 98, 12, .13); } .qbubble-primary .qi { background: var(--accent); color: #fff; } @media (max-width: 560px) { .qbubble { right: 14px; bottom: 14px; } .qbubble-label { display: none; } /* równa szerokość i wysokość — inaczej sam padding daje owal, nie koło */ .qbubble-btn { width: 54px; height: 54px; padding: 0; display: grid; place-items: center; gap: 0; } .qbubble-ico svg { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .qbubble-btn { animation: none; opacity: 1; } .qbubble-btn::after { animation: none; } .qbubble-btn:hover { transform: none; } .qbubble-panel { animation: none; } } .badge-dev { position: fixed; bottom: 14px; right: 14px; z-index: 99; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; opacity: .85; } /* ---------- hero podstron ---------- */ .page-hero { background: linear-gradient(135deg, #161d27 0%, #263140 60%, #31405a 100%); color: #fff; padding: 56px 0 46px; } .page-hero .kicker { color: var(--accent); font-weight: 800; letter-spacing: .2em; font-size: 12.5px; text-transform: uppercase; } .page-hero h1 { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.15; margin: 10px 0 12px; max-width: 860px; } .page-hero .lead { color: #c3ccd8; max-width: 720px; font-size: 16.5px; } /* ---------- karty bloga ---------- */ .bcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .18s; } .bcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .bcard .bimg { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--steel); } .bcard .bimg img { width: 100%; height: 100%; object-fit: cover; } .bcard .bb { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .bcard h3 { font-size: 16.5px; line-height: 1.35; } .bcard p { font-size: 13.5px; color: var(--ink-soft); flex: 1; } .bcard .more { font-size: 14px; font-weight: 700; color: var(--accent-dark); } .bmeta { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; } .link-more { color: var(--accent-dark); font-weight: 700; } /* ---------- artykuł ---------- */ /* Kolumna czytelna: blok wyśrodkowany w kontenerze, tekst wyrównany do lewej. Ograniczona szerokość utrzymuje ~70–80 znaków w wierszu — optimum dla czytania. */ .prose-narrow { max-width: 860px; margin-left: auto; margin-right: auto; } .page-prose { max-width: 860px; margin-left: auto; margin-right: auto; } .policy-link { max-width: 860px; margin-left: auto; margin-right: auto; } .contact-form { margin-left: auto; margin-right: auto; } /* Tekst wprowadzający nad siatką: dwie szpalty na pełnej szerokości — krawędzie pokrywają się z kaflami poniżej, a wiersz zostaje w czytelnej długości. */ .prose-cols { max-width: none; columns: 2; column-gap: 52px; margin-bottom: 34px; padding-bottom: 0; } .prose-cols p { break-inside: avoid; margin-bottom: 14px; } .prose-cols p:last-child { margin-bottom: 0; } @media (max-width: 820px) { .prose-cols { columns: 1; } } .article { max-width: 860px; margin-left: auto; margin-right: auto; padding-top: 6px; } .article-head { margin: 10px 0 22px; } .article-head .cat { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .08em; } .article-head h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; margin: 8px 0 10px; } .article-featured { border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 26px; width: 100%; } .article-prose, .page-prose { font-size: 16.5px; } .prose h2 { font-size: 25px; margin: 34px 0 14px; } .prose h3 { font-size: 20px; margin: 26px 0 10px; } .prose h4 { font-size: 17px; margin: 20px 0 8px; } .prose ul, .prose ol { margin: 0 0 16px 24px; color: #303a48; } .prose li { margin-bottom: 6px; } .prose img { border-radius: 10px; border: 1px solid var(--line); margin: 20px auto; } .prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; } .prose table td, .prose table th { padding: 9px 12px; border: 1px solid var(--line); text-align: left; } .prose table th { background: var(--steel); } .prose table tr:nth-child(even) { background: #fbfcfd; } .prose a { color: var(--accent-dark); font-weight: 600; } .prose a:hover { text-decoration: underline; } .prose blockquote { border-left: 4px solid var(--accent); padding: 6px 18px; margin: 18px 0; background: #fff; border-radius: 0 8px 8px 0; color: var(--ink-soft); } /* ---------- wstawki produktowe w artykułach ---------- */ .embed-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 26px; } @media (max-width: 560px) { .embed-products { grid-template-columns: 1fr; } } .epcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: .15s; font-weight: 600; } .epcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; } .epcard .ph { aspect-ratio: 16/10; display: grid; place-items: center; padding: 12px; border-bottom: 1px solid var(--line); } .epcard .ph img { max-height: 100%; max-width: 100%; object-fit: contain; border: none; margin: 0; border-radius: 0; } .epcard .ept { padding: 10px 14px 12px; font-size: 14.5px; color: var(--ink); line-height: 1.35; } .prose .epcard { color: var(--ink); } /* ---------- strony ofertowe (branże) ---------- */ .crumbs-hero { color: #8c99a9; padding: 0 0 18px; font-size: 13px; } .crumbs-hero a { color: #b9c3cf; } .crumbs-hero a:hover { color: #fff; } .offer-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } @media (max-width: 860px) { .offer-intro { grid-template-columns: 1fr; gap: 26px; } } .offer-photo { margin: 0; position: sticky; top: 96px; } .offer-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } .offer-prose > h2:first-child { margin-top: 4px; } .offer-prose h2 { position: relative; padding-left: 18px; } .offer-prose h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--accent); border-radius: 2px; } .offer-prose p { font-size: 16.5px; color: #303a48; } .offer-prose > h2:first-child + p { font-size: 18px; color: var(--ink); line-height: 1.65; } /* mini-animacja w hero podstron usługowych — cichy cykl 7 s */ .hero-mini { flex: none; width: 216px; margin: 0; } .hero-mini svg { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .hero-mini { display: none; } } .ma-outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: maDraw 7s linear infinite; } @keyframes maDraw { 0% { stroke-dashoffset: 1; stroke: rgba(170,198,222,.75); } 4% { stroke-dashoffset: 1; } 22% { stroke-dashoffset: 0; } 56% { stroke: rgba(170,198,222,.75); } 64% { stroke: rgba(228,240,250,.9); } 92% { opacity: 1; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .ma-dims { opacity: 0; animation: maDims 7s linear infinite; } @keyframes maDims { 0%, 20% { opacity: 0; } 26% { opacity: .8; } 60% { opacity: .8; } 68% { opacity: 0; } 100% { opacity: 0; } } .ma-laser { opacity: 0; transform: translateX(34px); animation: maLaser 7s cubic-bezier(.45,.05,.55,.95) infinite; } @keyframes maLaser { 0%, 30% { opacity: 0; transform: translateX(34px); } 32% { opacity: .9; } 56% { opacity: .9; transform: translateX(186px); } 58% { opacity: 0; transform: translateX(186px); } 100% { opacity: 0; transform: translateX(186px); } } .ma-spark { opacity: 0; animation: maSpark 7s linear infinite; } @keyframes maSpark { 0%, 57% { opacity: 0; transform: scale(.4); } 58.5% { opacity: 1; transform: scale(1.1); } 59.5% { opacity: .3; } 60.5% { opacity: .9; transform: scale(.9); } 62% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } } .ma-fill { opacity: 0; animation: maFill 7s linear infinite; } @keyframes maFill { 0%, 62% { opacity: 0; } 74% { opacity: .3; } 93% { opacity: .3; } 100% { opacity: 0; } } /* --- Baza wiedzy: arkusz dokumentacji --- */ .mk-sheet { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkDraw 7s linear infinite; } @keyframes mkDraw { 0% { stroke-dashoffset: 1; } 4% { stroke-dashoffset: 1; } 22% { stroke-dashoffset: 0; } 92% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .mk-lines line, .mk-lines2 line { stroke-dasharray: 120; stroke-dashoffset: 120; animation: mkLine 7s linear infinite; } .mk-l2 { animation-delay: .5s; } .mk-l3 { animation-delay: 1s; } .mk-l4 { animation-delay: 3.2s; } @keyframes mkLine { 0%, 18% { stroke-dashoffset: 120; opacity: 0; } 20% { opacity: 1; } 32% { stroke-dashoffset: 0; opacity: 1; } 90% { opacity: 1; stroke-dashoffset: 0; } 98% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 120; } } .mk-c, .mk-ax { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkDrawTech 7s linear infinite; } .mk-ax { animation-delay: .35s; } @keyframes mkDrawTech { 0%, 42% { stroke-dashoffset: 1; opacity: 0; } 44% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 92% { opacity: 1; stroke-dashoffset: 0; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .mk-tab { opacity: 0; transform: translateX(16px); animation: mkTab 7s cubic-bezier(.3,.8,.4,1) infinite; } @keyframes mkTab { 0%, 66% { opacity: 0; transform: translateX(16px); } 74% { opacity: 1; transform: translateX(0); } 92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } } .mk-fill { opacity: 0; animation: mkFill 7s linear infinite; } @keyframes mkFill { 0%, 24% { opacity: 0; } 40% { opacity: .16; } 92% { opacity: .16; } 100% { opacity: 0; } } /* --- O firmie: zakład rosnący od 1987 --- */ .mf-ground { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfGround 7s linear infinite; } @keyframes mfGround { 0% { stroke-dashoffset: 1; } 12% { stroke-dashoffset: 0; } 92% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .mf-out > *, .mf-fill > * { transform-box: fill-box; transform-origin: bottom center; } .mf-out > * { transform: scaleY(0); animation: mfGrow 7s cubic-bezier(.25,.9,.35,1) infinite; } .mf-b2 { animation-delay: .45s; } .mf-b3 { animation-delay: .9s; } @keyframes mfGrow { 0%, 12% { transform: scaleY(0); opacity: 0; } 14% { opacity: 1; } 32% { transform: scaleY(1); opacity: 1; } 92% { transform: scaleY(1); opacity: 1; } 99% { opacity: 0; } 100% { transform: scaleY(0); opacity: 0; } } .mf-fill { opacity: 0; animation: mfFill 7s linear infinite; } @keyframes mfFill { 0%, 44% { opacity: 0; } 58% { opacity: .22; } 92% { opacity: .22; } 100% { opacity: 0; } } .mf-year, .mf-arrow { opacity: 0; animation: mfYear 7s linear infinite; } .mf-arrow { animation-name: mfArrow; } @keyframes mfYear { 0%, 58% { opacity: 0; } 68% { opacity: .95; } 92% { opacity: .95; } 100% { opacity: 0; } } @keyframes mfArrow { 0%, 66% { opacity: 0; transform: translateX(-10px); } 78% { opacity: .8; transform: translateX(0); } 92% { opacity: .8; } 100% { opacity: 0; } } /* --- Kontakt: pinezka i sygnał --- */ .mp-pin { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mpDraw 7s linear infinite; } @keyframes mpDraw { 0% { stroke-dashoffset: 1; } 6% { stroke-dashoffset: 1; } 28% { stroke-dashoffset: 0; } 92% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } } .mp-fill { opacity: 0; animation: mpFill 7s linear infinite; } @keyframes mpFill { 0%, 28% { opacity: 0; } 40% { opacity: .9; } 92% { opacity: .9; } 100% { opacity: 0; } } .mp-dot { opacity: 0; animation: mpDot 7s linear infinite; } @keyframes mpDot { 0%, 34% { opacity: 0; } 44% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } } .mp-base { opacity: 0; animation: mpBase 7s linear infinite; } @keyframes mpBase { 0%, 24% { opacity: 0; } 34% { opacity: .8; } 92% { opacity: .8; } 100% { opacity: 0; } } .mp-waves circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mpWave 7s ease-out infinite; } .mp-w2 { animation-delay: .8s; } .mp-w3 { animation-delay: 1.6s; } @keyframes mpWave { 0%, 44% { transform: scale(.35); opacity: 0; } 48% { opacity: .55; } 74% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ma-outline, .ma-dims, .ma-laser, .ma-spark, .ma-fill, .mk-sheet, .mk-lines line, .mk-lines2 line, .mk-c, .mk-ax, .mk-tab, .mk-fill, .mf-ground, .mf-out > *, .mf-fill, .mf-year, .mf-arrow, .mp-pin, .mp-fill, .mp-dot, .mp-base, .mp-waves circle { animation: none; } .ma-outline, .mk-sheet, .mp-pin { stroke-dashoffset: 0; opacity: .7; } .ma-fill { opacity: .25; } .mk-lines line, .mk-lines2 line, .mk-c, .mk-ax { stroke-dashoffset: 0; opacity: .8; } .mk-tab, .mp-fill, .mp-dot, .mf-year { opacity: .85; transform: none; } .mk-fill { opacity: .16; } .mf-out > * { transform: scaleY(1); opacity: .8; } .mf-fill { opacity: .22; } .mf-ground, .mp-base { opacity: .8; } .ma-dims, .ma-laser, .ma-spark, .mf-arrow, .mp-waves circle { opacity: 0; } } /* strony usługowe */ .hero-flex { display: flex; align-items: center; justify-content: space-between; gap: 34px; } .hero-icon { flex: none; width: 128px; height: 128px; background: rgba(255, 255, 255, .94); border-radius: 18px; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); } .hero-icon img { max-width: 84px; max-height: 84px; width: auto; height: auto; } @media (max-width: 640px) { .hero-icon { display: none; } } .service-photos { display: grid; gap: 16px; align-content: start; align-self: start; position: sticky; top: 96px; max-width: 360px; justify-self: end; width: 100%; } .service-photos figure { margin: 0; } .service-photos img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } @media (max-width: 860px) { .service-photos { position: static; max-width: 100%; grid-template-columns: 1fr 1fr; } } .scard-icon { display: grid; place-items: center; height: 152px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(232, 98, 12, .18) 0%, rgba(232, 98, 12, .06) 55%, transparent 78%), linear-gradient(160deg, #eef1f5 0%, #dfe5ec 100%); } .scard-icon img { max-height: 82px; max-width: 120px; width: auto; height: auto; } .scard-letter { width: 82px; height: 82px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 38px; font-weight: 900; font-style: italic; } .tile.service-link { justify-content: space-between; gap: 12px; } .tile.service-link h3 { font-size: 16.5px; } .tile.service-link .more { font-size: 14px; font-weight: 700; color: var(--accent-dark); } .offer-tiles .tile { display: flex; flex-direction: column; gap: 8px; padding: 28px; } .offer-tiles .tile h3 { font-size: 17.5px; line-height: 1.35; } .offer-tiles .tile-body p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 10px; } .offer-tiles .tile-body p:last-child { margin-bottom: 0; } .offer-tiles .tile-body ul { margin: 0 0 10px 18px; font-size: 14.5px; color: var(--ink-soft); } /* ---------- opinie Google ---------- */ .rev-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 28px; box-shadow: var(--shadow); } .rev-score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rev-score b { font-size: 40px; line-height: 1; color: var(--ink); } .stars { color: #f5a623; font-size: 19px; letter-spacing: 2px; } .rev-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; margin: 0; } .rev-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); } .rev-card blockquote::before { content: "„"; } .rev-card blockquote::after { content: "”"; } .rev-card figcaption { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-top: auto; } /* ---------- „Dlaczego TRACZ" na stronie głównej ---------- */ .why-tile { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; } /* ikony sekcji są czarne na przezroczystym tle — pracują na jasnym podkładzie */ .why-ico { width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(232, 98, 12, .22), rgba(232, 98, 12, .09)); border: 1px solid rgba(232, 98, 12, .22); margin-bottom: 6px; } .why-ico img { width: 40px; height: 40px; object-fit: contain; display: block; } .why-tile h3 { font-size: 18px; } .why-tile p { font-size: 14.5px; color: var(--ink-soft); } /* ---------- strona „O firmie" ---------- */ .about-stats { margin-top: 38px; } .about-stats div b { font-size: 30px; } .pillar-tile { display: flex; flex-direction: column; gap: 10px; padding: 0 0 26px; overflow: hidden; } /* ikony filarów są białe na przezroczystym tle — wymagają ciemnego podkładu */ .pillar-img { position: relative; display: grid; place-items: center; height: 168px; overflow: hidden; background: linear-gradient(135deg, #161d27 0%, #263140 60%, #31405a 100%); } .pillar-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 10px); } /* ikona ma 100×100 px — nie powiększamy jej, żeby nie zmiękła */ .pillar-img img { position: relative; z-index: 1; width: 88px; height: 88px; object-fit: contain; display: block; } .pillar-tile h3 { font-size: 19px; padding: 4px 26px 0; } .pillar-tile p { font-size: 14.5px; color: var(--ink-soft); padding: 0 26px; } .about-building { margin: 0; } .about-building img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } /* ---------- strona kontaktu ---------- */ .contact-tile { display: flex; flex-direction: column; gap: 6px; } .contact-tile .ct-ico { font-size: 20px; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px; background: rgba(232, 98, 12, .1); color: var(--accent-dark); display: grid; place-items: center; } .contact-tile h3 { font-size: 16px; margin-bottom: 4px; } .contact-tile p { font-size: 15.5px; margin: 0 0 4px; } .contact-tile a { font-weight: 700; color: var(--ink); } .contact-tile a:hover { color: var(--accent-dark); } .ct-note { font-size: 13px; color: var(--ink-soft); font-weight: 400; } .loc-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px; } .loc-tile.loc-main { border-color: rgba(232, 98, 12, .45); box-shadow: var(--shadow); } .loc-badge { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; margin-bottom: 6px; } .loc-badge-soft { background: var(--steel); color: var(--ink-soft); } .loc-tile h3 { font-size: 19px; } .loc-addr { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 2px 0 6px; } .specs-compact { margin: 8px 0 0; font-size: 14px; } .specs-compact td { padding: 7px 12px; } .map-box { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 440px; display: grid; place-items: center; /* podkład: zrzut mapy (public/img/mapa-tracz.jpg) + przyciemnienie pod tekst. Gdy pliku brak, zostaje samo przyciemnienie na stalowym tle — też czytelne. */ background-color: #2b3648; /* przyciemnienie + zrzut mapy; webp ma pierwszeństwo, jpg to zapas */ background-image: linear-gradient(rgba(20, 27, 37, .58), rgba(20, 27, 37, .58)), url('/img/mapa-tracz.webp'), url('/img/mapa-tracz.jpg'); background-size: cover, cover, cover; background-position: center, center, center; } .map-box iframe { width: 100%; height: 470px; border: 0; display: block; } .map-box.map-loaded { display: block; min-height: 0; background: none; } .map-ph { text-align: center; padding: 44px 24px; max-width: 500px; } .map-ph-addr { font-size: 17px; line-height: 1.55; margin-bottom: 20px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); } .map-ph-note { font-size: 12.5px; color: #cdd6e0; margin-top: 18px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } @media (max-width: 640px) { .map-box { min-height: 360px; } .map-box iframe { height: 380px; } } /* konta bankowe */ .bank-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-top: 22px; } .bank-box h3 { font-size: 17px; margin-bottom: 12px; } .bank-table code { font-family: "Consolas", "SF Mono", monospace; font-size: 15px; letter-spacing: .02em; color: var(--ink); } .bank-table td:first-child { width: 46%; } /* formularz kontaktowy */ .contact-form { max-width: 820px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } @media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } } .contact-form label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } .contact-form .req { color: var(--accent-dark); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-weight: 400; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .contact-form textarea { resize: vertical; min-height: 130px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 98, 12, .14); } .form-full { margin-top: 16px; } .form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 20px; font-weight: 400; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .form-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; } .form-consent a { color: var(--accent-dark); font-weight: 700; } .contact-form button { border: none; cursor: pointer; font: inherit; font-weight: 700; } .form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- pasek CTA ---------- */ .cta-strip { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: linear-gradient(135deg, #161d27 0%, #253040 58%, #30405a 100%); color: #fff; border-radius: 14px; padding: 34px 38px; margin: 46px 0 10px; box-shadow: 0 10px 30px rgba(28, 36, 48, .13); } /* delikatna tekstura w tle — ten sam motyw co w hero */ .cta-strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 10px); } /* miękka pomarańczowa poświata w prawym rogu */ .cta-strip::after { content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(232, 98, 12, .22) 0%, transparent 68%); pointer-events: none; } .cta-strip > * { position: relative; z-index: 1; } .cta-text { max-width: 560px; } .cta-bar { display: block; width: 42px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 14px; } .cta-strip h3 { font-size: 21px; line-height: 1.3; margin-bottom: 6px; } .cta-strip p { color: #b9c3cf; font-size: 14.5px; margin: 0; } .cta-strip .cta-row { flex-shrink: 0; } .btn-dark { border: 2px solid #5b6b80; color: #e8ecf1; } .btn-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .06); } .btn-primary:hover { box-shadow: 0 8px 20px rgba(232, 98, 12, .32); } /* delikatny, wolny „oddech" przycisku głównego — pierścień, nie ruch */ .btn-pulse { position: relative; } .btn-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: cta-breathe 5s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes cta-breathe { 0% { box-shadow: 0 0 0 0 rgba(232, 98, 12, .42); } 55% { box-shadow: 0 0 0 11px rgba(232, 98, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 98, 12, 0); } } .btn-pulse:hover::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .btn-pulse::after { animation: none; } .btn:hover { transform: none; } } @media (max-width: 620px) { .cta-strip { padding: 26px 24px; } .cta-strip .cta-row { width: 100%; } .cta-strip .cta-row .btn { flex: 1 1 auto; text-align: center; } } /* ---------- menu mobilne (hamburger) ---------- */ .nav-toggle { display: none; } .nav-backdrop { display: none; } .nav-foot { display: none; } @media (max-width: 900px) { /* backdrop-filter tworzy własny układ odniesienia dla elementów position:fixed, przez co panel menu pozycjonowałby się względem nagłówka, a nie całego ekranu. Nagłówek musi też stać ponad przyciemnieniem — panel menu jest jego dzieckiem i dziedziczy poziom nakładania nagłówka, a nie własny z-index. */ .site-header { backdrop-filter: none; background: #fff; z-index: 96; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; flex: none; background: none; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--accent); background: rgba(232, 98, 12, .07); } .nav-bars { position: relative; display: block; width: 20px; height: 14px; } .nav-bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease, top .25s ease; } .nav-bars i:nth-child(1) { top: 0; } .nav-bars i:nth-child(2) { top: 6px; } .nav-bars i:nth-child(3) { top: 12px; } .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* pełnoekranowy panel w firmowym granacie — spójny z hero */ .nav { position: fixed; top: 68px; right: 0; left: 0; bottom: 0; z-index: 95; width: auto; color: #fff; background: linear-gradient(160deg, #141b25 0%, #1e2836 55%, #26334a 100%); flex-direction: column; align-items: stretch; gap: 0; padding: 26px 26px 34px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-10px); transition: opacity .26s ease, transform .3s cubic-bezier(.25, .9, .35, 1); visibility: hidden; } .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; } .nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 10px); } .nav > *, .nav-foot { position: relative; z-index: 1; } /* pozycje główne — duża typografia, łatwa do trafienia palcem */ .nav > a { padding: 16px 0; font-size: 21px; font-weight: 700; color: #fff; border: none; border-bottom: 1px solid rgba(255, 255, 255, .08); } .nav > a.active { color: var(--accent); border-bottom-color: rgba(232, 98, 12, .5); } /* grupy: etykieta jak nagłówek sekcji, pod nią lista bez ramek */ .nav-drop { position: static; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 8px 0 14px; } .nav-drop > a { /* etykieta wygląda jak nagłówek, ale jest linkiem — stąd pole dotyku 44 px */ display: block; padding: 10px 0 14px; border: none; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .nav-drop.active-drop > a { color: var(--accent); } .nav-drop .caret { display: none; } .nav-drop .drop-menu { display: block; position: static; padding: 0; box-shadow: none; background: none; border-left: 1px solid rgba(255, 255, 255, .14); margin-left: 2px; } .nav-drop .drop-menu > a { display: block; min-width: 0; white-space: normal; border: none; background: none; padding: 11px 0 11px 18px; font-size: 17px; font-weight: 600; color: #cfd8e3; border-radius: 0; } .nav-drop .drop-menu > a:hover, .nav-drop .drop-menu > a:active { background: none; color: #fff; } /* zdejmujemy obramowania i cień odziedziczone po wersji desktopowej */ .nav-drop .drop-menu > a:first-child, .nav-drop .drop-menu > a:last-child { border: none; border-radius: 0; box-shadow: none; background: none; } /* stopka menu — domyka ścieżkę: od przeglądania do kontaktu */ .nav-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; } .nav-foot .btn { text-align: center; padding: 15px 20px; font-size: 16px; margin-bottom: 10px; } /* .nav a ma wyzsza specyficznosc — stad selektor z .nav-foot */ .nav .nav-foot-line { color: #dfe5ec; font-size: 16px; font-weight: 600; padding: 12px 0; line-height: 20px; } .nav .nav-foot-line:hover { color: var(--accent); } .nav-foot-note { color: #8794a4; font-size: 13px; margin-top: 8px; } /* wejście pozycji jedna po drugiej */ .nav.is-open > *, .nav.is-open .nav-foot { animation: navIn .34s ease-out backwards; } .nav.is-open > *:nth-child(1) { animation-delay: .05s; } .nav.is-open > *:nth-child(2) { animation-delay: .10s; } .nav.is-open > *:nth-child(3) { animation-delay: .15s; } .nav.is-open > *:nth-child(4) { animation-delay: .20s; } .nav.is-open > *:nth-child(5) { animation-delay: .25s; } .nav.is-open > *:nth-child(6) { animation-delay: .30s; } .nav.is-open > *:nth-child(7) { animation-delay: .35s; } @keyframes navIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* panel zakrywa cały ekran, więc przyciemnienie tła jest zbędne */ body.nav-open { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .nav, .nav-backdrop, .nav-bars i { transition: none; } }