:root{ --bg:#0b0f17; --text:#e9eefc; --muted:#aab6d6; --radius:18px; --shadow: 0 8px 28px rgba(0,0,0,.35); --max:1120px; --pad:18px; /* jeśli dodasz Inter w , to będzie 1:1 bardziej jak Lovable */ --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:var(--font); color:var(--text); background: radial-gradient(1200px 600px at 20% -10%, #1a2c60 0%, transparent 60%), radial-gradient(900px 500px at 95% 10%, #4a1f2b 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, #070a10 100%); } a{ color:inherit; text-decoration:none; } .container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); } /* ===== TOPBAR (jak Lovable: logo w kwadracie + tel + CTA) ===== */ .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: linear-gradient(180deg, rgba(15,23,34,.95), rgba(15,23,34,.80)); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); } .topbar__inner{ height: 72px; display:flex; align-items:center; gap: 22px; } .topbar__logo{ width: 42px; height: 42px; background:#fff; border-radius: 12px; display:flex; align-items:center; justify-content:center; flex: 0 0 auto; } .topbar__logo img{ width: 22px; height: 22px; display:block; } .topbar__nav{ display:flex; gap: 18px; align-items:center; } .topbar__nav a{ color: rgba(255,255,255,.82); font-size: 14px; padding: 8px 8px; border-radius: 10px; } .topbar__nav a:hover{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); } .topbar__right{ margin-left:auto; display:flex; align-items:center; gap: 12px; } .topbar__phone{ display:inline-flex; align-items:center; gap: 8px; color: rgba(255,255,255,.88); font-size: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .topbar__phone:hover{ background: rgba(255,255,255,.09); } .topbar__cta{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; background:#2dd4bf; color:#0f172a; border: 1px solid rgba(0,0,0,.08); } @media (max-width: 820px){ .topbar__nav{ display:none; } } /* ===== HERO (zdjęcie + overlay + panel) ===== */ .hero{ padding-top: 72px; /* kompensacja fixed topbar */ } .hero--photo{ position: relative; min-height: 72vh; display:flex; align-items:center; background: url("./assets/hero.jpg") center/cover no-repeat; } .hero__overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,12,20,.85) 0%, rgba(8,12,20,.55) 45%, rgba(8,12,20,.25) 100%); } .hero__content{ position: relative; z-index: 2; padding: 56px 0; } .hero__panel{ max-width: 680px; background: rgba(10,14,22,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px; backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.35); } .hero__title{ font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; } .hero__lead{ margin: 0 0 18px; max-width: 58ch; color: rgba(255,255,255,.88); line-height: 1.6; } .hero__ctaRow{ display:flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; transition: transform .08s ease, background .2s ease, border-color .2s ease; } .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.28); } .btn--primary{ background: linear-gradient(180deg, #ff8a2a, #ff6a00); color: #1f1306; border: none; box-shadow: 0 10px 24px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.35); } .btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(255,106,0,.45), inset 0 1px 0 rgba(255,255,255,.45); } .btn--ghost{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color:#fff; } .hero__proof{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.78); } @media (max-width: 820px){ .hero__title{ font-size: 34px; } .hero--photo{ min-height: 64vh; } } /* ===== Sekcja 5 kart (białe tło) ===== */ .values{ padding: 70px 0; background: #ffffff; color: #0b1220; } .values__title{ font-size: 44px; line-height: 1.15; margin: 0 0 34px; text-align: center; letter-spacing: -0.02em; font-weight: 800; } .values__grid{ display:grid; gap: 22px; margin: 0 auto; } .values__grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; } .values__grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-top: 22px; } .valueCard{ background:#fff; border: 1px solid rgba(11,18,32,.10); border-radius: 18px; padding: 28px 26px 26px; box-shadow: 0 8px 30px rgba(11,18,32,.06); text-align:center; } .valueCard__icon{ width: 42px; height: 42px; margin: 0 auto 14px; color: #10b5b0; display:grid; place-items:center; } .valueCard__icon svg{ width: 34px; height: 34px; } .valueCard__headline{ font-size: 18px; margin: 8px 0 10px; font-weight: 800; } .valueCard__text{ margin: 0; color: rgba(11,18,32,.72); line-height: 1.6; font-size: 15px; } .values__note{ margin: 34px 0 0; text-align:center; color: rgba(11,18,32,.78); font-weight: 700; } @media (max-width: 980px){ .values__title{ font-size: 34px; } .values__grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .values__grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .values{ padding: 54px 0; } .values__title{ font-size: 28px; } .values__grid--3, .values__grid--2{ grid-template-columns: 1fr; max-width: 520px; } } /* ===== Sekcja „jasność w 3 sprawach” ===== */ .clarity{ padding: 78px 0; background: #eef2f5; color: #0b1220; } .clarity__title{ font-size: 44px; line-height: 1.15; margin: 0 0 34px; text-align:center; letter-spacing: -0.02em; font-weight: 900; } .clarity__grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1120px; margin: 0 auto; } .clarityCard{ background:#fff; border: 1px solid rgba(11,18,32,.10); border-radius: 22px; padding: 26px 26px 24px; box-shadow: 0 10px 28px rgba(11,18,32,.08); } .clarityCard__icon{ width: 56px; height: 56px; border-radius: 16px; background: rgba(16,181,176,.10); color:#10b5b0; display:grid; place-items:center; margin-bottom: 18px; } .clarityCard__icon svg{ width: 28px; height: 28px; } .clarityCard__headline{ font-size: 18px; margin: 0 0 10px; font-weight: 900; } .clarityCard__text{ margin: 0; color: rgba(11,18,32,.70); line-height: 1.7; font-size: 15px; } @media (max-width: 980px){ .clarity__title{ font-size: 34px; } .clarity__grid{ grid-template-columns: 1fr; max-width: 680px; } }/* ===== PROCESS (timeline jak w Lovable) ===== */ .process { padding: 100px 0; background: #f4f6f8; color: #0b1220; } .process__header { text-align: center; margin-bottom: 64px; } .process__header h2 { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; } .process__timeline { position: relative; max-width: 900px; margin: 0 auto; } .process__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #cfd8df; transform: translateX(-50%); } .process__item { position: relative; display: flex; align-items: center; margin-bottom: 42px; } .process__item.left { justify-content: flex-start; } .process__item.right { justify-content: flex-end; } .process__card { width: 360px; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 26px rgba(11,18,32,.08); } .process__card h3 { font-size: 15px; margin: 0 0 6px; } .process__card p { margin: 0; font-size: 14px; color: rgba(11,18,32,.7); line-height: 1.5; } .process__dot { position: absolute; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 999px; background: #10b5b0; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(16,181,176,.35); } .process__footer { text-align: center; margin-top: 48px; font-weight: 600; color: rgba(11,18,32,.75); } /* ===== RESPONSIVE ===== */ @media (max-width: 820px) { .process__line { left: 16px; } .process__item { justify-content: flex-start !important; padding-left: 48px; } .process__dot { left: 16px; transform: none; } .process__card { width: 100%; } } /* ===== ONE CALL ===== */ .onecall { padding: 110px 0; background: linear-gradient( 180deg, #14253d 0%, #13233a 100% ); color: #ffffff; } .onecall__header { text-align: center; max-width: 640px; margin: 0 auto 56px; } .onecall__header h2 { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; } .onecall__header p { font-size: 15px; color: rgba(255,255,255,.75); } .onecall__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 860px; margin: 0 auto; } @media (max-width: 720px) { .onecall__grid { grid-template-columns: 1fr; } } .onecall__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 22px 24px; backdrop-filter: blur(6px); } .onecall__icon { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; /* KLUCZ */ width: 32px; height: 32px; } .onecall__card h3 { font-size: 16px; margin: 0 0 6px; } .onecall__card--call .onecall__note { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); } .onecall__footer { margin-top: 42px; text-align: center; font-weight: 600; color: rgba(255,255,255,.85); } .onecall__icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; } /* Rozmowa = ciepły akcent */ .onecall__card--call .onecall__icon { color: #ff7a1a; } /* Formularz = spokojny akcent */ .onecall__card--form .onecall__icon { color: #0ea5a4; } .onecall__card--form .onecall__icon { margin-left: auto; margin-right: auto; } /* ============================= */ /* SPECJALNE WYKONANIA – LAYOUT */ /* ============================= */ .custom { padding: 90px 0; background: #f4f7f9; color: #0b1220; } .custom__header { text-align: center; max-width: 720px; margin: 0 auto 56px; } .custom__header h2 { font-size: 40px; font-weight: 800; margin-bottom: 12px; } .custom__header p { font-size: 16px; color: #5b6b84; } /* === GRID GŁÓWNY (lewa + prawa kolumna) === */ .custom__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; } /* === LEWA STRONA: kafle === */ .custom__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } /* pojedynczy kafel */ .customCard { background: #ffffff; border-radius: 18px; padding: 22px 22px 24px; box-shadow: 0 12px 28px rgba(11,18,32,.06); display: flex; gap: 14px; } .customCard__icon { width: 42px; height: 42px; border-radius: 12px; background: #e6f7f7; color: #12b5b0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .customCard h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; } .customCard p { margin: 0; font-size: 14px; color: #5b6b84; line-height: 1.5; } /* === PRAWA STRONA: standard współpracy === */ /* ===== STANDARD WSPÓŁPRACY (PRAWA KOLUMNA) ===== */ .customStandard{ background:#ffffff; border-radius:20px; padding:28px 26px; box-shadow:0 10px 28px rgba(11,18,32,.08); height: fit-content; } .customStandard h3{ margin:0 0 16px; font-size:18px; font-weight:800; } .customStandard ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } .customStandard li{ position:relative; padding-left:28px; font-size:15px; line-height:1.5; color:#334155; } /* check icon */ .customStandard li::before{ content:""; position:absolute; left:0; top:4px; width:18px; height:18px; background:#e6f7f6; border-radius:6px; } .customStandard li::after{ content:""; position:absolute; left:4px; top:8px; width:10px; height:6px; border-left:2px solid #10b5b0; border-bottom:2px solid #10b5b0; transform:rotate(-45deg); } /* ===== DOLNA BELKA INFO ===== */ .customNote{ margin-top:40px; background:#eaf6f7; border:1px solid #ccecee; border-radius:16px; padding:20px 24px; display:flex; align-items:flex-start; gap:16px; } .customNote__icon{ width:40px; height:40px; flex-shrink:0; border-radius:12px; background:#d6f0f2; color:#10b5b0; display:flex; align-items:center; justify-content:center; } .customNote__icon svg{ width:22px; height:22px; } .customNote__text{ display:flex; flex-direction:column; gap:4px; } .customNote__text strong{ font-size:15px; font-weight:700; color:#0f172a; } .customNote__text span{ font-size:14px; color:#475569; line-height:1.5; } /* === RESPONSIVE === */ @media (max-width: 980px) { .custom__layout { grid-template-columns: 1fr; } .custom__cards { grid-template-columns: 1fr; } .custom__note { flex-direction: column; align-items: flex-start; } } /* ===== GALERIA REALIZACJI ===== */ /* ===== GALERIA – styl Lovable ===== */ .gallery { padding: 36px 16px; background: #f6f8fb; text-align: center; } .gallery h2 { font-size: 32px; margin-bottom: 12px; color:#0ea5a4; } .gallery p { color: #6b7280; margin-bottom: 40px; } /* viewport */ .gallery__viewport { position: relative; max-width: 1100px; margin: 0 auto; overflow: hidden; border-radius: 20px; } /* track */ .gallery__track { display: flex; transition: transform 0.5s ease; } .gallery__track img { width: 100%; flex: 0 0 100%; object-fit: cover; } /* strzałki */ .gallery__prev, .gallery__next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,.15); cursor: pointer; font-size: 22px; z-index: 10; } .gallery__prev { left: 16px; } .gallery__next { right: 16px; } /* kropki */ .gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .gallery__dots button { width: 8px; height: 8px; border-radius: 999px; border: none; background: #d1d5db; } .gallery__dots button.is-active { width: 28px; background: #0ea5a4; } /* ===== ONECALL – mikro-interakcje (bez nadpisywania) ===== */ .onecall__card{ transition: transform .25s ease, box-shadow .25s ease; } .onecall__card:hover{ transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.35); } /* ===== ONECALL – mikro-interakcje (bez nadpisywania) ===== */ /* ===== ONECALL – focus formularza ===== */ .onecall__card--form input, .onecall__card--form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #dbe3ee; background: #ffffff; color: #0f172a; font-size: 14px; font-family: inherit; } .onecall__card--form input::placeholder, .onecall__card--form textarea::placeholder { color: #64748b; } .onecall__card--form input:focus, .onecall__card--form textarea:focus { outline: none; border-color: #0ea5a4; box-shadow: 0 0 0 3px rgba(14,165,164,.18); } /* ===== CTA – subtelny glow ===== */ .btn--primary{ position: relative; } .btn--primary::after{ content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: 0 0 0 rgba(255,122,26,0); transition: box-shadow .25s ease; } .btn--primary:hover::after{ box-shadow: 0 0 18px rgba(255,122,26,.45); } /* ===== ONECALL – rytm formularza ===== */ .onecall form{ display: grid; gap: 12px; } .onecall__card--form button.btn { width: 100%; padding: 14px 16px; border-radius: 14px; font-weight: 800; background: linear-gradient(180deg, #ffffff, #f1f5f9); color: #0f172a; border: 1px solid rgba(15,23,42,.15); box-shadow: 0 6px 14px rgba(15,23,42,.12); } .onecall__card--form .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,.18); } .onecall__card:hover .onecall__icon { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.35); } /* ========================= */ /* ONECALL – karta formularza (Lovable style) */ /* ========================= */ .onecall__card--call { background: #ffffff; color: #0f172a; border-radius: 22px; padding: 28px; box-shadow: 0 20px 40px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08); } .onecall__card--form .onecall__icon { background: transparent; box-shadow: none; color: #0ea5a4; } .onecall__card--form { position: relative; } .onecall__card--form::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); pointer-events: none; } .onecall__card:not(.onecall__card--form) { opacity: .92; } .onecall__card--form h3 { font-size: 18px; font-weight: 800; } .onecall__card--call { display: flex; flex-direction: column; align-items: center; justify-content: center; /* TO JEST KLUCZ */ text-align: center; } .onecall__card--call h3 { margin-bottom: 18px; } .onecall__card--call .btn--primary { margin: 0 0 14px; /* przycisk → opis */ padding: 16px 26px; font-size: 16px; border-radius: 14px; } .onecall__card--call .onecall__note { margin: 0; font-size: 14px; color: #64748b; max-width: 34ch; } /* Ikona – OPCJA 1 (Rozmowa) */ .onecall__card--call .onecall__icon { background: transparent; box-shadow: none; color: #ff7a1a; } /* ========================= */ /* FAQ */ /* ========================= */ .faq { padding: 90px 0; background: #f6f8fb; color: #0b1220; } .faq .h2 { text-align: center; font-size: 38px; font-weight: 800; margin-bottom: 40px; } .faq__item { max-width: 820px; margin: 0 auto 14px; background: #ffffff; border-radius: 14px; box-shadow: 0 10px 26px rgba(11,18,32,.08); overflow: hidden; } .faq__item summary { cursor: pointer; padding: 18px 22px; font-size: 16px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; } .faq__item summary::-webkit-details-marker { display: none; } /* strzałka */ .faq__item summary::after { content: "›"; font-size: 22px; transform: rotate(90deg); transition: transform .25s ease; color: #0ea5a4; } .faq__item[open] summary::after { transform: rotate(-90deg); } .faq__item p { padding: 0 22px 20px; margin: 0; font-size: 15px; line-height: 1.6; color: #475569; } /* hover */ .faq__item summary:hover { background: #f1f5f9; } /* mobile */ @media (max-width: 720px) { .faq { padding: 64px 0; } .faq .h2 { font-size: 30px; } .faq__item summary { font-size: 15px; } } /* ========================= */ /* FOOTER */ /* ========================= */ .footer { background: #0b1220; color: rgba(255,255,255,.78); padding: 36px 0; font-size: 14px; } .footer__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .footer strong { color: #ffffff; font-weight: 800; } .footer a { color: #2dd4bf; text-decoration: none; } .footer a:hover { text-decoration: underline; } .footer__links { display: flex; gap: 18px; } /* mobile */ @media (max-width: 720px) { .footer__row { flex-direction: column; text-align: center; } }