body{ margin:0; font-family:Poppins, sans-serif; } .container{max-width:1100px;margin:auto;padding:20px} .site-header,.site-footer{background:#111;color:#fff} a{color:inherit;text-decoration:none} .btn{display:inline-block;padding:12px 20px;background:#f59e0b;color:#000} /* ================= HERO ================= */ .hero{ --heroCardW: 552px;              /* 460px + ~20% */ --heroCardShiftX: -130px;        /* przesuniÄ™cie karty w lewo na desktop */ position: relative; min-height: 680px;               /* zamiast height -> lepiej pod RWD */ color: #fff; overflow: hidden; /* WYMAGANY EFEKT: tło fixed na desktop */ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } /* Mobile: na start "scroll" (lepszy Speed Index/LCP). Po load JS może przełączyć na fixed na urządzeniach, które to realnie wspierają (Android/Chrome). */ @media (max-width: 992px){ .hero{ background-image: url("/assets/img/1-min-mobile.webp"); background-attachment: scroll; } } /* Poniżej pierwszego ekranu: nie renderuj od razu (duży boost dla Speed Index) */ @supports (content-visibility: auto){ section:not(.hero){ content-visibility: auto; contain-intrinsic-size: 900px; } } .hero::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.32); } .hero__inner{ position: relative; z-index: 2; min-height: 480px; display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; padding-top: 150px; } /* ===== LEFT ===== */ .hero__left{ flex: 0 0 620px; } .hero__kicker{ color: #ff9230; letter-spacing: 2px; font-size: 18px; margin-bottom: 8px; } .hero__title{ font-size: 82px; line-height: .92; letter-spacing: 2px; margin: 0 0 12px; } .hero__titleLine{ display:block; } .hero__titleLine:first-child{ white-space: nowrap; } .hero__titleLine--accent{ color:#ff9230; } .hero__chips{ font-size: 20px; letter-spacing: 2px; display:flex; gap: 10px; margin-bottom: 10px; } .hero__cities{ font-size: 18px; display:flex; align-items:center; gap: 10px; margin-bottom: 16px; } .hero__bullets{ font-size: 17px; line-height: 1.3; max-width: 520px; } .hero__bullets b{ color:#ff9230; } /* ===== RIGHT ===== */ .hero__right{ flex: 0 0 var(--heroCardW); display: flex; justify-content: flex-end; align-items: flex-start; position: relative; left: var(--heroCardShiftX);     /* przesuniÄ™cie w lewo */ } /* ===== CARD ===== */ .heroCard, .heroCard *{ box-sizing: border-box; } .heroCard{ width: var(--heroCardW); display: flex; flex-direction: column; gap: 12px; background: rgba(163,106,50,.75); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 18px; margin-top: 40px; box-shadow: 0 18px 40px rgba(0,0,0,.35); } .heroCard__top{ margin: 0; padding: 10px 12px 6px; text-align: center; font-size: 22px; font-weight: 400; line-height: 1.15; } /* ===== BUTTONS ===== */ .heroCard__btn{ width: 100%; max-width: 100%; display:flex; align-items:center; justify-content:center; gap: 12px; padding: 16px; border-radius: 10px; text-decoration:none; letter-spacing: .3px; font-weight: 500; margin: 0; overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease; will-change: transform; } .heroCard__btn--primary{ background:#111a2b; color:#fff; border: 1px solid rgba(0,0,0,.2); font-size: 22px; } .heroCard__phone{ display:inline-flex; align-items:center; gap: 10px; font-size: 22px; white-space: nowrap; min-width: 0; } .heroCard__phone svg{ width: 18px; height: 18px; } .heroCard__btn--ghost{ background: transparent; color:#fff; border: 1px solid rgba(255,255,255,.55); font-size: 22px; padding: 14px 16px; } /* ===== CARD FOOT ===== */ .heroCard__line{ height: 1px; background: rgba(255,255,255,.35); margin: 4px 0 0; } .heroCard__checks{ text-align:center; font-size: 14px; font-weight: 400; line-height: 1.25; opacity: .95; padding-bottom: 2px; } /* ===== HOVER BUTTONS ===== */ .heroCard__btn:hover, .heroCard__btn:focus-visible{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); } .heroCard__btn--primary:hover, .heroCard__btn--primary:focus-visible{ filter: brightness(1.06); } .heroCard__btn--ghost:hover, .heroCard__btn--ghost:focus-visible{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.85); } .heroCard__btn::after{ content:""; position:absolute; inset:0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 75%); opacity: 0; transform: translateX(-12px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; } .heroCard__btn:hover::after, .heroCard__btn:focus-visible::after{ opacity: 1; transform: translateX(0); } .heroCard__btn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(0,0,0,.22); } @media (prefers-reduced-motion: reduce){ .heroCard__btn, .heroCard__btn::after{ transition: none; } } /* ================= HERO – RESPONSIVE ================= */ /* mniejsze desktopy/laptopy */ @media (max-width: 1200px){ .hero{ --heroCardW: 520px; --heroCardShiftX: 0px;       /* nie przesuwamy, żeby nie ucinaÅ‚o */ background-attachment: scroll; /* fixed czÄ™sto psuje mobile + wydajność */ } .hero__inner{ gap: 40px; padding-top: 130px; } .hero__left{ flex: 1 1 auto; } .heroCard{ width: var(--heroCardW); } } /* tablet */ @media (max-width: 992px){ .hero{ min-height: auto; background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } .hero__inner{ min-height: auto; flex-direction: column; align-items: stretch; padding-top: 120px; padding-bottom: 40px; gap: 26px; z-index: 1 } .hero__left{ flex: 1 1 auto; } .hero__title{ font-size: 64px; } .hero__chips{ font-size: 18px; } .hero__cities{ font-size: 16px; } .hero__bullets{ font-size: 16px; max-width: 100%; } .hero__right{ flex: 1 1 auto; justify-content: center; left: 0; } .heroCard{ width: min(560px, 100%); margin-top: 10px; } } /* telefon */ @media (max-width: 576px){ .hero__inner{ padding-top: 28px; padding-bottom: 28px; } .hero__kicker{ font-size: 16px; } .hero__title{ font-size: 48px; letter-spacing: 1px; } .hero__chips{ font-size: 14px; } .hero__cities{ font-size: 14px; flex-wrap: wrap; row-gap: 6px; } .heroCard{ padding: 14px; border-radius: 12px; } .heroCard__top{ font-size: 18px; padding: 8px 10px 4px; } .heroCard__btn--primary, .heroCard__btn--ghost{ font-size: 18px; padding: 14px; } .heroCard__phone{ font-size: 18px; gap: 8px; } .heroCard__checks{ font-size: 13px; } } @media (max-width: 576px){ .hero__cities{ display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap;        /* ikona + tekst w jednym “wierszu” */ } .hero__cities .pin{ flex: 0 0 auto; margin-top: 2px;          /* delikatne wyrównanie do pierwszej linii */ } .hero__cities .pin__svg{ width: 18px; height: 18px; display: block; } /* tekst ma się zawijać obok ikony */ .hero__cities{ line-height: 1.25; } } /* ================= PROCESS INTRO ================= */ .processIntro{ background:#f6f6f6; padding: 60px 0 40px; } .processIntro__inner{ text-align:center; max-width: 1100px; margin: 0 auto; } /* nagłówek maÅ‚y */ .processIntro__kicker{ font-size: 19px; letter-spacing: 2px; text-transform: uppercase; color:#ff9230; margin-bottom: 5px; font-weight: 500; } /* nagłówek duży */ .processIntro__title{ font-size: 36px; line-height: 1.02; margin: 0 0 28px; font-weight: 800; color:#0b1320; } .processIntro__title .accent{ color:#ff9230; } /* opis */ .processIntro__lead{ margin: 0 auto; max-width: 1200px; font-size: 20px; line-height: 1.22; color:#2b3242; font-weight: 400; } .processIntro__lead b{ color:#000; font-weight: 600; } .processIntro__lead .accent{ color:#ff9230; font-weight: 600; } /* ================= STEPS (4 KROKI) ================= */ .steps{ background:#fff; padding: 60px 0 70px; } .steps__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: stretch; position: relative; } /* karty */ .stepCard{ position: relative; background:#fff; border: 1px solid #e7e7e7; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 54px 26px 18px; text-align:center; overflow: visible; } /* Å‚Ä…czniki pomiÄ™dzy kartami (jak na zrzucie) */ .stepCard:not(:last-child)::after{ content:""; position:absolute; top: 64px; right: -28px; width: 28px; height: 2px; background: #ff9230; opacity: .9; } /* badge 01/02/03/04 */ .stepCard__badge{ position:absolute; left: 22px; top: -30px; width: 74px; height: 74px; border-radius: 999px; background: #ff9230; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 26px rgba(255,146,48,.35); border: 4px solid #fff; } .stepCard__badge span{ color:#fff; font-weight: 800; font-size: 30px; letter-spacing: 1px; } /* tytuÅ‚ */ .stepCard__title{ margin: 6px 0 14px; font-size: 30px; line-height: 1.05; font-weight: 800; color:#0b1320; } /* opis */ .stepCard__text{ margin: 0 0 14px; font-size: 18px; line-height: 1.45; color:#2b3242; font-weight: 400; } .stepCard__text b{ color:#0b1320; font-weight: 800; } /* czas */ .stepCard__time{ display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 800; color:#ff9230; margin-bottom: 16px; font-size: 18px; } .stepCard__clock{ font-size: 18px; } /* ikona */ .stepCard__icon{ display:flex; justify-content:center; margin: 6px 0 18px; } .stepCard__icon img{ width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(255,146,48,.25)); } /* pomaraÅ„czowy pasek na dole */ .stepCard__bar{ width: calc(100% + 20px); margin: 0 -10px; background:#ff9230; color:#fff; font-weight: 800; font-size: 18px; padding: 12px 14px; border-radius: 10px; box-shadow: 0 8px 18px rgba(255,146,48,.25); } /* ===== RWD ===== */ @media (max-width: 1100px){ .steps__grid{ grid-template-columns: repeat(2, 1fr); } .stepCard:not(:last-child)::after{ display:none; } } @media (max-width: 640px){ .steps{ padding: 45px 0 55px; } .steps__grid{ grid-template-columns: 1fr; } .stepCard{ padding: 52px 20px 16px; } .stepCard__title{ font-size: 26px; } .stepCard__text{ font-size: 17px; } } /* ================= STEPS – FINAL ================= */ .steps{ background:#f6f6f6; padding: 60px 0 70px; } .steps__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: stretch; } /* KAFEL */ .stepCard{ position: relative; background:#fff; border: 1px solid #e6e6e6; border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.08); padding: 52px 22px 0; text-align:center; display:flex; flex-direction: column; height: 100%;                 /* RÓWNA WYSOKOŚĆ */ } /* NUMER */ .stepCard__badge{ position:absolute; top: -28px; left: 24px; width: 64px; height: 64px; border-radius: 50%; background:#ff9230; display:flex; align-items:center; justify-content:center; border:4px solid #fff; box-shadow: 0 10px 22px rgba(255,146,48,.35); } .stepCard__badge span{ color:#fff; font-size: 26px; font-weight: 800; } /* MAŁA KROPKA */ .stepCard__badge::after{ content:""; position:absolute; right:-10px; bottom:8px; width:10px; height:10px; background:#ff9230; border-radius:50%; box-shadow: 0 0 0 4px #fff; } /* TYTUŁ */ .stepCard__title{ margin: 6px 0 12px; font-size: 24px; line-height: 1.15; font-weight: 800; color:#0b1320; } /* OPIS */ .stepCard__text{ font-size: 16px; line-height: 1.45; color:#2b3242; margin: 0 0 10px; } .stepCard__text b{ color:#000; font-weight: 700; } /* CZAS */ .stepCard__time{ display:flex; align-items:center; justify-content:center; gap: 6px; font-size: 15px; font-weight: 700; color:#ff9230;               /* ZEGAREK */ margin-bottom: 12px; } .stepCard__clock{ font-size: 15px; } /* IKONA */ .stepCard__icon{ margin: auto 0 14px;         /* spycha ikonÄ™ w dół – równe karty */ } .stepCard__icon img{ width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(255,146,48,.25)); } /* DOLNY BUTTON */ .stepCard__bar{ background:#ff9230; color:#fff; font-weight: 500; font-size: 16px; padding: 12px 10px; margin: 0 -22px;             /* NA CAŁĄ SZEROKOŚĆ */ border-radius: 0;            /* BEZ RADIUS */ } /* ===== RWD ===== */ @media (max-width: 1100px){ .steps__grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .steps__grid{ grid-template-columns: 1fr; } .stepCard{ padding: 48px 20px 0; } } .stepCard__clock{ display:inline-flex; align-items:center; justify-content:center; color:#ff9230;           /* kolor jak w projekcie */ line-height:0; } .stepCard__clock .clockSvg{ display:block; } /* ===== Badge 01/02/03/04 – gradient + cieÅ„ ===== */ .stepCard__badge{ background: linear-gradient(180deg, #ffb35c 0%, #ff9230 55%, #ff7a00 100%); box-shadow: 0 14px 28px rgba(255,146,48,.35), 0 2px 0 rgba(255,255,255,.35) inset; } /* maÅ‚a kropka też z lekkim gradientem */ .stepCard__badge::after{ background: linear-gradient(180deg, #ffd1a1 0%, #ff9230 70%, #ff7a00 100%); box-shadow: 0 0 0 4px #fff, 0 10px 18px rgba(255,146,48,.25); } /* ===== Ikona – kółko gradient + ramka + cieÅ„ ===== */ .stepCard__icon{ display:flex; justify-content:center; margin: auto 0 14px; } .stepCard__icon::before{ content:""; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffd5a8 0%, #ffb35c 28%, #ff9230 62%, #ff7a00 100%); border: 5px solid #fff; box-shadow: 0 18px 28px rgba(0,0,0,.12), 0 10px 20px rgba(255,146,48,.18); position:absolute; } .stepCard__icon{ position: relative; min-height: 120px; /* żeby kółko zawsze miaÅ‚o miejsce */ } .stepCard__icon img{ width: 64px;          /* ikona mniejsza, jak w referencji */ height: 64px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 10px 12px rgba(0,0,0,.12)); } /* ===== Dolny "button" – peÅ‚na szerokość, gradient, ramka, cieÅ„ ===== */ .stepCard__bar{ background: linear-gradient(180deg, #ffb35c 0%, #ff9230 55%, #ff7a00 100%); border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 14px 26px rgba(255,146,48,.25); } /* ===== IKONY: wiÄ™ksze + idealnie wyÅ›rodkowane + kółko wyżej ===== */ /* blok ikony – rezerwuje miejsce i ustawia Å›rodek */ .stepCard__icon{ position: relative; min-height: 140px;              /* wiÄ™cej miejsca na wiÄ™ksze kółko */ display: grid; place-items: center;            /* Å›rodek */ margin: auto 0 10px;            /* trzyma ukÅ‚ad i wyrównuje wysokoÅ›ci */ } /* kółko tÅ‚a (gradient) – wiÄ™ksze i wyżej */ .stepCard__icon::before{ content:""; width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffd5a8 0%, #ffb35c 28%, #ff9230 62%, #ff7a00 100%); border: 5px solid #fff; box-shadow: 0 18px 28px rgba(0,0,0,.12), 0 10px 20px rgba(255,146,48,.18); position: absolute; left: 50%; top: 46%;                        /* PRZESUWA KÓŁKO WYÅ»EJ */ transform: translate(-50%, -50%); z-index: 0; } /* obrazek ikony – wiÄ™kszy i zawsze w Å›rodku */ .stepCard__icon img{ width: 92px;                     /* POWIĘKSZENIE */ height: 92px; object-fit: contain; position: relative; z-index: 1; display:block; filter: drop-shadow(0 10px 12px rgba(0,0,0,.12)); } .stepCard__icon{ margin: 8px 0 10px !important;   /* zamiast auto */ transform: translateY(-3px);    /* podnieÅ› (zmieÅ„ -18px wg uznania) */ } .marginmoj { margin-top: 10px; } /* ===== STEPS MOBILE FIX: brak nachodzenia kart ===== */ @media (max-width: 640px){ .steps__grid{ grid-template-columns: 1fr; gap: 92px;                 /* wiÄ™kszy odstÄ™p – mieÅ›ci badge */ } .stepCard{ padding-top: 60px;         /* miejsce na badge, żeby nie wchodziÅ‚ w treść */ } /* wyÅ‚Ä…cz Å‚Ä…czniki na mobile */ .stepCard::after{ display:none !important; } /* badge zostaje nad kartÄ…, ale nie powoduje kolizji */ .stepCard__badge{ top: -26px;                /* możesz dać -22px jeÅ›li chcesz mniej */ left: 18px; } /* kółko ikony trochÄ™ wyżej, żeby nie rozpychaÅ‚o doÅ‚u */ .stepCard__icon{ transform: translateY(-10px); min-height: 130px; } } @media (max-width: 640px){ .stepCard{ margin-top: 0px !important; } } /* ================= QUOTE FORM SECTION ================= */ .quoteForm{ position: relative; padding: 70px 0 90px; background: #f6f6f6;      /* kolor poza pasem zdjÄ™cia */ overflow: hidden; } /* PAS ZE ZDJĘCIEM (tylko na Å›rodku) */ .quoteForm::before{ content:""; position:absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 520px; /* możesz zmienić: 420-600 */ background: url("/assets/img/2-min.webp") center/cover no-repeat; z-index: 0; } /* "mleko" tylko na pasie zdjÄ™cia */ .quoteForm::after{ content:""; position:absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 520px; /* MUSI być tyle samo co ::before */ background: rgba(246,246,246,.78); z-index: 1; } /* treść nad tÅ‚em */ .quoteForm__inner{ position: relative; z-index: 1; display:flex; justify-content:center; } /* karta formularza */ .quoteFormCard{ width: min(980px, 100%); background:#fff; border: 1px solid #ececec; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.12); overflow:hidden; } /* nagłówek karty */ .quoteFormCard__head{ display:flex; align-items:center; justify-content:center; gap: 10px; padding: 18px 18px; border-bottom: 1px solid #efefef; background:#fff; } .quoteFormCard__icon{ color:#ff9230; display:inline-flex; align-items:center; justify-content:center; } .quoteFormCard__title{ margin:0; font-size: 18px; font-weight: 800; color:#0b1320; } /* placeholder na formularz */ .quoteFormCard__placeholder{ padding: 28px; } .placeholderBox{ border: 1px dashed #dcdcdc; border-radius: 10px; background: #fafafa; padding: 22px; min-height: 520px; display:flex; flex-direction: column; justify-content:center; gap: 14px; } .placeholderBox__line{ height: 14px; border-radius: 8px; background: linear-gradient(90deg, #f1f1f1 0%, #e9e9e9 50%, #f1f1f1 100%); opacity: .9; } .placeholderBox__line.short{ width: 60%; } .placeholderBox__note{ margin-top: 14px; font-size: 14px; color:#6b7280; text-align:center; } /* ===== RWD ===== */ @media (max-width: 768px){ .quoteForm{ padding: 55px 0 70px; } /* pas zdjÄ™cia niższy na mobile */ .quoteForm::before, .quoteForm::after{ height: 360px; } .quoteFormCard__head{ padding: 16px; } .quoteFormCard__title{ font-size: 16px; } .quoteFormCard__placeholder{ padding: 18px; } .placeholderBox{ min-height: 420px; } } /* usuÅ„ nakÅ‚adkÄ™ na zdjÄ™ciu */ .quoteForm::after{ display:none !important; content:none !important; } /* ================= WHAT WE BUY ================= */ .whatWeBuy{ background:#f6f6f6; padding: 60px 0 40px; } .whatWeBuy__inner{ text-align:center; max-width: 1100px; margin: 0 auto; } /* nagłówek duży */ .whatWeBuy__title{ font-size: 36px; line-height: 1.02; margin: 0 0 28px; font-weight: 800; color:#ff9230; /* jak na screenie */ } /* opis */ .whatWeBuy__lead{ margin: 0 auto; max-width: 1200px; font-size: 20px; line-height: 1.22; color:#2b3242; font-weight: 400; } .whatWeBuy__lead b{ color:#000; font-weight: 600; } .whatWeBuy__lead .accent{ color:#ff9230; font-weight: 600; } /* RWD – delikatnie w dół */ @media (max-width: 768px){ .whatWeBuy{ padding: 50px 0 34px; } .whatWeBuy__title{ font-size: 34px; margin-bottom: 18px; } .whatWeBuy__lead{ font-size: 18px; line-height: 1.28; } } /* ================= WHY AUTO-RALFI ================= */ .whyRalf{ background:#f6f6f6; padding: 60px 0 00px; } .whyRalf__inner{ text-align:center; max-width: 1100px; margin: 0 auto; } /* tytuÅ‚ */ .whyRalf__title{ font-size: 36px; line-height: 1.02; margin: 0 0 28px; font-weight: 800; color:#0b1320; } .whyRalf__title .accent{ color:#ff9230; } /* opis */ .whyRalf__lead{ margin: 0 auto; max-width: 1200px; font-size: 20px; line-height: 1.22; color:#2b3242; font-weight: 400; } .whyRalf__lead b{ color:#000; font-weight: 600; } .whyRalf__lead .accent{ color:#ff9230; font-weight: 600; } /* RWD */ @media (max-width: 768px){ .whyRalf{ padding: 50px 0 34px; } .whyRalf__title{ font-size: 34px; margin-bottom: 18px; } .whyRalf__lead{ font-size: 18px; line-height: 1.28; } } /* ================= BUY TYPES (4 kafelki) ================= */ .buyTypes{ background:#f6f6f6; padding: 45px 0 70px; } .buyTypes__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; } /* karta */ .buyTypesCard{ background:#fff; border: 1px solid #e8e8e8; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.10); padding: 22px 22px 20px; } /* nagłówek z ikonÄ… */ .buyTypesCard__head{ display:flex; align-items:flex-start; gap: 14px; margin-bottom: 14px; } .buyTypesCard__icon{ width: 58px; height: 42px; border-radius: 999px; background: #fff2e6;                 /* jasna pomaraÅ„cz jak w projekcie */ display:flex; align-items:center; justify-content:center; flex: 0 0 auto; } .buyTypesCard__icon img{ width: 36px; height: 36px; object-fit: contain; display:block; } .buyTypesCard__title{ margin: 2px 0 0; font-size: 22px; padding-top: 15px; line-height: 1.15; font-weight: 600; color:#0b1320; } /* 2 kolumny list */ .buyTypesCard__cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; } /* listy */ .buyTypesCard__list{ margin: 0; padding: 0; list-style: none; } .buyTypesCard__list li{ position: relative; padding-left: 18px; margin: 10px 0; font-size: 13px; line-height: 1.35; color:#2b3242; } .buyTypesCard__list li::before{ content:""; position:absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background:#ff9230; box-shadow: 0 2px 6px rgba(255,146,48,.35); } /* ===== RWD ===== */ @media (max-width: 980px){ .buyTypes__grid{ grid-template-columns: 1fr; } } @media (max-width: 600px){ .buyTypes{ padding: 35px 0 55px; } .buyTypesCard{ padding: 18px; } .buyTypesCard__title{ font-size: 20px; } .buyTypesCard__cols{ grid-template-columns: 1fr; gap: 6px; } .buyTypesCard__list li{ font-size: 15px; margin: 8px 0; } } /* IKONKA w nagłówku kafelka – wiÄ™ksza i w idealnym kółku */ .buyTypesCard__icon{ width: 56px;                 /* kółko */ height: 56px;                /* kółko */ border-radius: 50%; background: #fff2e6; display:flex; align-items:center; justify-content:center; flex: 0 0 56px; } .buyTypesCard__icon img{ width: 50px;                 /* wiÄ™ksza ikonka */ height: 50px; object-fit: contain; display:block; } /* ================= BENEFITS GRID (6 kafelków) ================= */ .benefitsGrid{ background:#f6f6f6; padding: 5px 0 70px; } .benefitsGrid__grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; } /* kafelek */ .benefitCard{ background:#fbfbfb; border: 1px solid #e9e9e9; border-radius: 16px; box-shadow: 0 14px 28px rgba(0,0,0,.10); padding: 34px 34px 30px; text-align:center; display:flex; flex-direction:column; min-height: 210px; /* równe wysokoÅ›ci (zapas) */ } /* kółko na ikonÄ™ */ .benefitCard__icon{ width: 84px; height: 84px; border-radius: 50%; background: #fff1e6;              /* jasne pomaraÅ„czowe tÅ‚o */ display:grid; place-items:center; margin: 0 auto 18px; box-shadow: 0 10px 18px rgba(0,0,0,.08); border: 1px solid rgba(255,146,48,.18); } .benefitCard__icon img{ width: 66px;      /* wiÄ™ksza ikona */ height: 66px; object-fit: contain; display:block; } /* tytuÅ‚ */ .benefitCard__title{ margin: 0 0 10px; font-size: 18px; font-weight: 600; color:#0b1320; } /* opis */ .benefitCard__text{ margin: 0; font-size: 13px; line-height: 1.35; color:#2b3242; font-weight: 400; } /* równe “dociÄ…gniÄ™cie” doÅ‚u */ .benefitCard__text{ ; padding-top: 6px; } /* ===== RWD ===== */ @media (max-width: 1100px){ .benefitsGrid__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .benefitsGrid{ padding: 45px 0 55px; } .benefitsGrid__grid{ grid-template-columns: 1fr; gap: 18px; } .benefitCard{ padding: 28px 22px; min-height: auto; } .benefitCard__title{ font-size: 18px; } .benefitCard__text{ font-size: 13px; } } /* ================= REVIEWS ================= */ .reviews{ background:#f6f6f6; padding: 60px 0 80px; } .reviews__grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* karta */ .reviewCard{ background:#fff; border: 1px solid #ececec; border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 10px 26px rgba(0,0,0,.10); transition: transform .18s ease, box-shadow .18s ease; will-change: transform, box-shadow; } /* hover: lekko do góry + mocniejszy cieÅ„ */ .reviewCard:hover{ transform: translateY(-10px); box-shadow: 0 22px 45px rgba(0,0,0,.18); } .reviewCard__top{ display:flex; align-items:center; gap: 14px; margin-bottom: 14px; } /* kółko z cudzysÅ‚owem */ .reviewCard__quote{ width: 54px; height: 54px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: #fff3ea; color:#ff9230; font-size: 34px; font-weight: 900; line-height: 1; } /* gwiazdki */ .reviewCard__stars{ color:#ff9230; font-size: 18px; letter-spacing: 2px; user-select:none; } .reviewCard__text{ margin: 0; color:#1f2937; font-size: 18px; line-height: 1.55; font-style: italic; } /* cienka linia */ .reviewCard__divider{ height: 1px; background: #e9e9e9; margin: 18px 0 16px; } .reviewCard__name{ font-size: 18px; font-weight: 800; color:#0b1320; } .reviewCard__city{ font-size: 15px; color:#6b7280; } /* ===== RWD ===== */ @media (max-width: 980px){ .reviews__grid{ grid-template-columns: 1fr; } .reviewCard{ padding: 22px; } .reviewCard__text{ font-size: 17px; } } /* ================= REVIEWS ================= */ .reviews{ background:#f6f6f6; padding: 10px 0 85px; } .reviews__grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; } .reviewCard{ background:#fff; border: 1px solid #ececec; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.10); padding: 26px 26px 22px; transition: transform .22s ease, box-shadow .22s ease; will-change: transform; min-height: 320px; display:flex; flex-direction: column; } .reviewCard:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,.18); } .reviewCard__top{ display:flex; align-items:center; gap: 14px; margin-bottom: 18px; } /* ikona cudzysÅ‚owia (kółko jak w projekcie) */ .reviewCard__quote{ width: 56px; height: 56px; border-radius: 999px;          /* idealne koÅ‚o */ background: #fdeee3; display:grid; place-items:center; flex: 0 0 56px; } .reviewCard__quoteSvg{ width: 30px; height: 30px; fill: #ff9230; transform: translateY(-1px); } /* gwiazdki */ .reviewCard__stars{ color:#ff9230; letter-spacing: 2px; font-size: 16px; line-height: 1; margin-top: 2px; } /* tekst opinii */ .reviewCard__text{ margin: 0; font-size: 14px; line-height: 1.55; color:#232b3b; font-style: italic; } /* divider */ .reviewCard__divider{ height: 1px; background: #e9e9e9; margin: 22px 0 18px; } /* stopka */ .reviewCard__person{ margin-top: auto; } .reviewCard__name{ font-weight: 800; font-size: 14px; color:#0b1320; margin-bottom: 3px; } .reviewCard__city{ font-size: 12px; color:#6b7280; } /* ===== RWD ===== */ @media (max-width: 1024px){ .reviews__grid{ grid-template-columns: 1fr; } .reviewCard{ min-height: auto; } } /* ====== MODULE: AUTO-RALFI CONTACT ====== */ .auto-ralfi-contact { background: #0b1b2c; /* ciemny granat jak na podglÄ…dzie */ color: #eaf0f6; padding: 56px 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .auto-ralfi-contact__container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; gap: 48px; align-items: start; } /* LEFT */ .auto-ralfi-contact__title { font-size: 38px; line-height: 1.1; margin: 0; letter-spacing: 0.5px; font-weight: 800; } .auto-ralfi-contact__subtitle { margin: 8px 0 0; font-size: 14px; letter-spacing: 1px; opacity: 0.85; text-transform: uppercase; } .auto-ralfi-contact__desc { margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: rgba(234, 240, 246, 0.9); max-width: 42ch; } .auto-ralfi-contact__social { display: flex; gap: 14px; margin-top: 26px; } .auto-ralfi-contact__social-btn { width: 54px; height: 54px; border-radius: 10px; background: #ffffff; display: grid; place-items: center; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; } .auto-ralfi-contact__social-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); } .auto-ralfi-contact__social-btn svg { width: 22px; height: 22px; fill: #0b1b2c; } /* MIDDLE */ .auto-ralfi-contact__heading { margin: 0 0 18px; font-size: 22px; font-weight: 700; } .auto-ralfi-contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .auto-ralfi-contact__item { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font-size: 16px; } .auto-ralfi-contact__icon { width: 28px; height: 28px; display: grid; place-items: center; opacity: 0.9; } .auto-ralfi-contact__icon svg { width: 20px; height: 20px; fill: rgba(234, 240, 246, 0.92); } .auto-ralfi-contact__link { color: #eaf0f6; text-decoration: none; } .auto-ralfi-contact__link:hover { text-decoration: underline; } .auto-ralfi-contact__text { color: rgba(234, 240, 246, 0.92); } /* RIGHT (MAP) */ .auto-ralfi-contact__map { width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); background: rgba(255, 255, 255, 0.06); } .auto-ralfi-contact__map iframe { display: block; width: 100%; height: 320px; border: 0; } /* ====== RESPONSIVE ====== */ @media (max-width: 1024px) { .auto-ralfi-contact__container { grid-template-columns: 1fr; gap: 28px; } .auto-ralfi-contact__desc { max-width: 65ch; } .auto-ralfi-contact__map iframe { height: 360px; } } @media (max-width: 560px) { .auto-ralfi-contact { padding: 40px 0; } .auto-ralfi-contact__container { width: min(1200px, calc(100% - 28px)); } .auto-ralfi-contact__title { font-size: 32px; } .auto-ralfi-contact__map iframe { height: 300px; } } /* 1) ZEGAREK – wiÄ™kszy i czytelniejszy */ .auto-ralfi-contact__item:last-child .auto-ralfi-contact__icon svg { width: 24px; height: 24px; fill: #ffffff;            /* peÅ‚na biel */ opacity: 1;               /* bez przygaszenia */ } /* jeÅ›li chcesz, żeby wszystkie ikony byÅ‚y odrobinÄ™ mocniejsze */ .auto-ralfi-contact__icon svg { width: 22px;              /* byÅ‚o 20px */ height: 22px; fill: rgba(255, 255, 255, 0.98); opacity: 1; } /* 2) SOCIAL – wiÄ™ksze przyciski i ikonki */ .auto-ralfi-contact__social-btn { width: 66px;              /* byÅ‚o 54px */ height: 66px; border-radius: 12px; } .auto-ralfi-contact__social-btn svg { width: 28px;              /* byÅ‚o 22px */ height: 28px; } /* opcjonalnie: wiÄ™kszy odstÄ™p */ .auto-ralfi-contact__social { gap: 18px;                /* byÅ‚o 14px */ } .auto-ralfi-contact__icon svg { width: 24px; height: 24px; fill: #fff; opacity: 1; } .popular-cities{ background:#0b1b2c; color:#eaf0f6; padding: 0px 0 54px; } .popular-cities__container{ width:min(1200px, calc(100% - 48px)); margin:0 auto; } .popular-cities__title{ margin:0 0 22px; font-size:22px; font-weight:400; letter-spacing:.2px; } .popular-cities__grid{ display:grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 18px 48px; /* row / col */ align-items:start; } .popular-cities__link{ color: rgba(234,240,246,.85); text-decoration:none; font-size:13px; line-height:1.3; display:inline-block; width: fit-content; transition: color .15s ease, transform .15s ease, text-decoration-color .15s ease; } .popular-cities__link:hover{ color:#ffffff; text-decoration: underline; text-underline-offset: 6px; } .popular-cities__link:focus-visible{ outline: 2px solid rgba(255,255,255,.75); outline-offset: 4px; border-radius: 6px; } /* RESPONSYWNOŚĆ */ @media (max-width: 1100px){ .popular-cities__grid{ grid-template-columns: repeat(4, minmax(140px, 1fr)); } } @media (max-width: 780px){ .popular-cities__grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 14px 26px; } .popular-cities__link{ font-size:16px; } } .footer-bottom{ background:#0b1b2c; color: rgba(234,240,246,.9); padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.12); /* linia u góry */ } .footer-bottom__container{ width: min(1200px, calc(100% - 48px)); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap: 28px; } .footer-bottom__left{ display:flex; flex-direction:column; gap: 6px; max-width: 70ch; } .footer-bottom__copy, .footer-bottom__meta{ margin:0; font-size: 15px; line-height: 1.5; } .footer-bottom__meta{ opacity: .9; } /* linki po prawej */ .footer-bottom__nav{ display:flex; gap: 34px; flex-wrap:wrap; justify-content:flex-end; } .footer-bottom__link{ color: rgba(234,240,246,.9); text-decoration:none; font-size:15px; line-height:1.4; transition: color .15s ease, text-decoration-color .15s ease; } .footer-bottom__link:hover{ color:#fff; text-decoration: underline; text-underline-offset: 6px; } .footer-bottom__link:focus-visible{ outline: 2px solid rgba(255,255,255,.7); outline-offset: 4px; border-radius: 6px; } /* RWD */ @media (max-width: 900px){ .footer-bottom__container{ flex-direction:column; align-items:flex-start; } .footer-bottom__nav{ justify-content:flex-start; gap: 18px 24px; } } /* ===== Trust stats module ===== */ .trust-stats { padding: 42px 0; background: linear-gradient(180deg, #f6f7fb 0%, #f3f5f9 100%); } .trust-stats__container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; } .trust-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; } .trust-card { position: relative; background: #ffffff; border-radius: 14px; padding: 36px 18px 18px; box-shadow: 0 10px 26px rgba(20, 23, 33, 0.06); border: 1px solid rgba(20, 23, 33, 0.07); overflow: visible; min-height: 122px; /* domyÅ›lny kolor ikony */ --icon-color: #ff8a1f; } .trust-card--green { --icon-color: #39b54a; } .trust-card--orange { --icon-color: #ff8a1f; } .trust-card__badge { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 999px; background: #ffffff; box-shadow: 0 10px 26px rgba(20, 23, 33, 0.08); border: 1px solid rgba(20, 23, 33, 0.07); display: grid; place-items: center; color: var(--icon-color); } .trust-card__icon { width: 34px; height: 34px; display: block; } .trust-card__body { text-align: center; } .trust-card__value { font-size: clamp(28px, 2.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #ff8a1f; margin-top: 6px; } .trust-card__label { margin-top: 8px; font-size: 18px; line-height: 1.3; color: #1f2937; font-weight: 500; } /* Hover (delikatnie) */ .trust-card { transition: transform 180ms ease, box-shadow 180ms ease; } .trust-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20, 23, 33, 0.09); } /* Responsive */ @media (max-width: 980px) { .trust-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 520px) { .trust-stats { padding: 34px 0; } .trust-stats__grid { grid-template-columns: 1fr; gap: 16px; } .trust-card { padding: 34px 16px 16px; } .trust-card__label { font-size: 16px; } } /* ===== Trust stats module ===== */ .trust-stats { padding: 42px 0; background: linear-gradient(180deg, #f6f7fb 0%, #f3f5f9 100%); } /* GRID ma dziaÅ‚ać wewnÄ…trz Twojego .container (1100px + padding) */ .trust-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; } .trust-card { position: relative; background: #ffffff; border-radius: 14px; padding: 36px 18px 18px; box-shadow: 0 10px 26px rgba(20, 23, 33, 0.06); border: 1px solid rgba(20, 23, 33, 0.07); overflow: visible; min-height: 82px; --icon-color: #ff8a1f; transition: transform 180ms ease, box-shadow 180ms ease; } .trust-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20, 23, 33, 0.09); } .trust-card--green { --icon-color: #39b54a; } .trust-card--orange { --icon-color: #ff8a1f; } .trust-card__badge { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 999px; background: #ffffff; box-shadow: 0 10px 26px rgba(20, 23, 33, 0.08); border: 1px solid rgba(20, 23, 33, 0.07); display: grid; place-items: center; color: var(--icon-color); } .trust-card__icon { width: 34px; height: 34px; display: block; } .trust-card__body { text-align: center; } .trust-card__value { font-size: clamp(28px, 2.2vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #ff8a1f; margin-top: 6px; } .trust-card__label { margin-top: 8px; font-size: 14px; line-height: 1.3; color: #1f2937; font-weight: 500; } /* Responsive */ @media (max-width: 980px) { .trust-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 520px) { .trust-stats { padding: 34px 0; } .trust-stats__grid { grid-template-columns: 1fr; gap: 16px; } .trust-card { padding: 34px 16px 16px; } .trust-card__label { font-size: 16px; } } /* BLOG sekcja jak na screenie */ .blogModule{ background: url("/assets/img/3-min.jpg") center/cover no-repeat; padding: 70px 0; } .blogModule__inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* jeśli w module są zbyt wąskie karty, dopasuj grid */ .blogModule .wpisyGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* responsywność */ @media (max-width: 1100px){ .blogModule .wpisyGrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px){ .blogModule .wpisyGrid{ grid-template-columns: 1fr; } } /* ===== HEADER (AUTO-RALFI) – DESKTOP ONLY ===== */ .topbar{ position: relative; height: 120px; color:#fff; overflow:hidden; background-image: url("/assets/img/1-min.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; padding-bottom: 10px; } .topbar::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.28); } .topbar__inner{ position: relative; z-index: 2; height: 120px; display:flex; align-items:center; justify-content:space-between; gap: 18px; } /* lewa strona */ .brand{ flex: 0 0 auto; display:flex; align-items:center; text-decoration:none; color:#fff; } .brand__logo{ height: 80px; width:auto; display:block; margin-top: -5px } /* prawa strona: CTA u góry + menu pod spodem */ .topbar__right{ flex: 1 1 auto; display:flex; flex-direction: column; align-items: flex-end;         /* jak na screenie: przycisk i menu do prawej */ justify-content: center; gap: 14px;                     /* odstęp między przyciskiem a menu */ min-width: 0; } /* CTA (mniejsze) */ .callout{ display:flex; align-items:center; gap: 12px; background:#ff9230; color:#fff; text-decoration:none; padding: 12px 16px; border-radius: 10px; font-weight: 400; white-space: nowrap; box-shadow: 0 10px 26px rgba(0,0,0,.28); margin-top: 30px; } .callout__text{ font-size: 14px; } .callout__sep{ width:1px; height: 20px; background: rgba(255,255,255,.35); } .callout__phone{ display:flex; align-items:center; gap: 10px; font-size: 20px; font-weight: 400; letter-spacing: .3px; font-size: 17px } .callout__icon{ display:block; } /* MENU pod CTA */ .menu{ display:flex; align-items:center; justify-content:flex-end; gap: 46px; flex-wrap: nowrap; min-width: 0; margin-bottom: 50px; margin-top: 5px; } .menu__link{ color:#fff; text-decoration:none; font-weight: 400; font-size: 18px; letter-spacing: .2px; white-space: nowrap; transition: color .15s ease; } .menu__link:hover{ color:#ff9230; } .menu__link.is-active{ color:#ff9230; } /* na screenie “Wycena” jest pomarańczowa */ /* HOVER/FOCUS dla CTA (callout) */ .callout{ transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease; will-change: transform; } .callout:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.35); filter: brightness(1.05); } .callout:active{ transform: translateY(0); box-shadow: 0 10px 26px rgba(0,0,0,.28); filter: brightness(0.98); } /* delikatny “ruch” telefonu i ikonki */ .callout:hover .callout__phone{ transform: translateX(2px); } .callout__phone{ transition: transform .15s ease; } /* separator niech będzie trochę bardziej widoczny na hover */ .callout:hover .callout__sep{ background: rgba(255,255,255,.55); } .callout__sep{ transition: background .15s ease; } /* focus dla klawiatury */ .callout:focus-visible{ outline: 2px solid rgba(255,255,255,.85); outline-offset: 4px; border-radius: 12px; } /* ===== MOBILE MENU ELEMENTS (domyślnie ukryte na desktopie) ===== */ .menu-toggle, .menu-overlay { display: none; } /* wrapper dla menu – na desktopie bez zmian */ .menu-wrap{ display: block; } /* ===== MOBILE (OFFCANVAS) – JEDYNA WERSJA ===== */ @media (max-width: 900px){ .topbar{ position: relative;      /* ważne */ height: auto; padding: 12px 0; background-attachment: scroll; } .topbar__inner{ height: auto; align-items: center; justify-content: space-between; gap: 12px; } .brand__logo{ height: 52px; margin-top: 0; } /* prawa strona: telefon + hamburger */ .topbar__right{ flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; } /* CTA jako kompaktowy przycisk */ .callout{ margin-top: 0; padding: 10px 12px; border-radius: 12px; } .callout__text, .callout__sep{ display: none; } .callout__phone{ font-size: 15px; gap: 8px; } .callout__icon{ width: 18px; height: 18px; } /* na mobile nie pokazujemy desktopowego menu w linii */ .menu{ margin: 70px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; justify-content: flex-start; } /* ===== HAMBURGER ===== */ .menu-toggle{ display: inline-flex; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 0; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.22); } .menu-toggle__bar{ display:block; width: 20px; height: 2px; background: rgba(255,255,255,.92); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } /* ===== OFFCANVAS PANEL ===== */ .menu-wrap{ position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 86vw); background: rgba(7, 18, 32, .98); border-left: 1px solid rgba(255,255,255,.14); box-shadow: -24px 0 60px rgba(0,0,0,.45); padding: 18px 14px; transform: translateX(110%); pointer-events: none; transition: transform .22s ease; z-index: 60; display: block; } .menu__link{ font-size: 16px; padding: 12px 12px; border-radius: 12px; background: rgba(255,255,255,.04); } .menu__link:hover{ color:#fff; background: rgba(255,146,48,.16); } .menu__link.is-active{ color:#fff; background: rgba(255,146,48,.22); } /* ===== OVERLAY – domyślnie ukryty ===== */ .menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.52); z-index: 55; } /* ===== OTWARTE ===== */ .topbar.is-menu-open .menu-wrap{ transform: translateX(0); pointer-events: auto; } .topbar.is-menu-open .menu-overlay{ display: block; } /* hamburger -> X */ .topbar.is-menu-open .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } .topbar.is-menu-open .menu-toggle__bar:nth-child(2){ opacity: 0; } .topbar.is-menu-open .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } } @media (max-width: 900px){ .topbar{ height:auto; padding: 12px 0; background-attachment: scroll; position: relative; background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } /* układ: 2 kolumny (lewo: logo+telefon, prawo: hamburger) */ .topbar__inner{ height:auto; display:grid; grid-template-columns: 1fr auto; grid-template-areas: "brand toggle" "callout toggle"; align-items:center; gap: 10px 12px; } .brand{ grid-area: brand; } .topbar__right{ display: contents; } /* pozwala ułożyć dzieci w gridzie */ /* telefon pod logo */ .callout{ grid-area: callout; margin: 0; padding: 10px 12px; border-radius: 12px; width: fit-content; } .callout__text, .callout__sep{ display:none; } .callout__phone{ font-size: 15px; gap: 8px; } /* hamburger po prawej */ .menu-toggle{ grid-area: toggle; display:inline-flex; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); align-items:center; justify-content:center; flex-direction: column; gap: 6px; padding: 0; cursor:pointer; box-shadow: 0 10px 26px rgba(0,0,0,.22); } .menu-toggle__bar{ width: 20px; height: 2px; background: rgba(255,255,255,.92); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } /* OFFCANVAS */ .menu-wrap{ position: fixed; top:0; right:0; height:100vh; width: min(320px, 86vw); background: rgba(7, 18, 32, .98); border-left: 1px solid rgba(255,255,255,.14); box-shadow: -24px 0 60px rgba(0,0,0,.45); padding: 18px 14px; transform: translateX(110%); pointer-events:none; transition: transform .22s ease; z-index: 60; } .menu{ margin: 70px 0 0; display:flex; flex-direction:column; gap: 8px; } .menu__link{ font-size: 16px; padding: 12px 12px; border-radius: 12px; background: rgba(255,255,255,.04); } /* overlay domyślnie ukryty */ .menu-overlay{ display:none; position: fixed; inset: 0; background: rgba(0,0,0,.52); z-index: 55; } /* OTWARTE */ .topbar.is-menu-open .menu-wrap{ transform: translateX(0); pointer-events:auto; } .topbar.is-menu-open .menu-overlay{ display:block; } /* hamburger -> X */ .topbar.is-menu-open .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } .topbar.is-menu-open .menu-toggle__bar:nth-child(2){ opacity: 0; } .topbar.is-menu-open .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } } .no-scroll { overflow: hidden; } @media (max-width: 900px){ /* hamburger zawsze na wierzchu */ .menu-toggle{ position: relative; z-index: 9999; } /* overlay pod panelem, nad stroną */ .menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9997; } /* panel menu */ .menu-wrap{ position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 86vw); background: rgba(7, 18, 32, .98); border-left: 1px solid rgba(255,255,255,.14); box-shadow: -24px 0 60px rgba(0,0,0,.45); padding: 72px 14px 18px;   /* miejsce u góry na “X” */ transform: translateX(110%); transition: transform .22s ease; pointer-events: none; z-index: 9998; overflow: auto; -webkit-overflow-scrolling: touch; } /* otwarte */ .topbar.is-menu-open .menu-wrap{ transform: translateX(0); pointer-events: auto; } .topbar.is-menu-open .menu-overlay{ display: block; } /* linki menu */ .menu{ margin: 0; display: flex; flex-direction: column; gap: 10px; } .menu__link{ display: block; font-size: 16px; padding: 12px 12px; border-radius: 12px; background: rgba(255,255,255,.05); } /* animacja hamburger -> X */ .topbar.is-menu-open .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } .topbar.is-menu-open .menu-toggle__bar:nth-child(2){ opacity: 0; } .topbar.is-menu-open .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } } @media (max-width: 900px){ .topbar.is-menu-open .menu-toggle{ position: fixed; top: 14px; right: 14px; z-index: 9999; background: rgba(0,0,0,.35); } } @media (max-width: 900px){ /* overlay: zawsze nad stroną */ .menu-overlay{ display: none !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.55) !important; z-index: 9997 !important; } /* panel: zawsze full height, zawsze fixed z prawej */ .menu-wrap{ position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; height: 100vh !important; width: min(320px, 86vw) !important; padding: 72px 14px 18px !important; margin: 0 !important; background: rgba(7,18,32,.98) !important; border-left: 1px solid rgba(255,255,255,.14) !important; border-radius: 0 !important; box-shadow: -24px 0 60px rgba(0,0,0,.45) !important; transform: translateX(110%) !important; opacity: 1 !important; pointer-events: none !important; transition: transform .22s ease !important; z-index: 9998 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* otwarte */ .topbar.is-menu-open .menu-wrap{ transform: translateX(0) !important; pointer-events: auto !important; } .topbar.is-menu-open .menu-overlay{ display: block !important; } /* menu w panelu */ .menu{ margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } .menu__link{ display: block !important; font-size: 16px !important; padding: 12px 12px !important; border-radius: 12px !important; background: rgba(255,255,255,.05) !important; } /* X zawsze widoczny (przycisk staje się X) */ .menu-toggle{ position: fixed !important; top: 14px !important; right: 14px !important; z-index: 9999 !important; } /* animacja do X */ .topbar.is-menu-open .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg) !important; } .topbar.is-menu-open .menu-toggle__bar:nth-child(2){ opacity: 0 !important; } .topbar.is-menu-open .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg) !important; } } /* blokada scrolla */ .no-scroll{ overflow: hidden; } /* ================= CO SKUPUJEMY (MARKI) ================= */ .brandsIntro{ padding-bottom: 40px; /* więcej miejsca na logotypy */ } .brandMarquee{ margin-top: 26px; color: #0b1320; /* kolor SVG */ overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .brandMarquee__track{ display: flex; align-items: center; gap: 56px; width: max-content; animation: brandMarqueeScroll 28s linear infinite; will-change: transform; } .brandMarquee__item{ display: inline-flex; align-items: center; justify-content: center; opacity: .9; } .brandMarquee__item svg{ width: 64px; height: 64px; display: block; fill: currentColor; } .brandMarquee__item:hover{ opacity: 1; } @keyframes brandMarqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (max-width: 768px){ .brandMarquee__track{ gap: 34px; animation-duration: 22s; } .brandMarquee__item svg{ width: 54px; height: 54px; } } @media (prefers-reduced-motion: reduce){ .brandMarquee__track{ animation: none; } .brandMarquee{ overflow-x: auto; } } .brandMarquee__item svg { display: none; } /* jeśli zostało ze starej wersji */ .brandLogo{ width: 64px; height: 64px; object-fit: contain; opacity: .9; filter: none; display: inline-block; } .brandLogo:hover{ opacity: 1; } @media (max-width: 768px){ .brandLogo{ width: 54px; height: 54px; } } /* Ikony SVG w kafelkach (kolor w URL = #ff9230) */ .whyRalf--districts .whyRalf__itemHead{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .whyRalf--districts .whyRalf__icon{ width: 30px; height: 30px; flex: 0 0 30px; display: block; } /* Siatka pod 10 kafelków (jeśli nie masz już) */ .whyRalf--districts .whyRalf__grid--districts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 992px){ .whyRalf--districts .whyRalf__grid--districts{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px){ .whyRalf--districts .whyRalf__grid--districts{ grid-template-columns: 1fr; } } .whyRalf__top { text-align: center; } /* ===== FAQ jak na screenie ===== */ .faqSection{ padding: 80px 0; background: #0b1320; /* jeśli sekcja ma być w ciemnym klimacie */ } .faqSection__title{ text-align: center; color: #fff; font-weight: 800; margin: 0 0 14px; } .faqSection__line{ width: 52px; height: 4px; background: #ff9230; margin: 0 auto 28px; border-radius: 999px; } .faqSection__lead{ max-width: 900px; margin: 0 auto 34px; text-align: center; color: rgba(255,255,255,.78); line-height: 1.6; } .faq{ max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .faq__item{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; } .faq__question{ width: 100%; padding: 22px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .faq__icon{ width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; color: #ff9230; } .faq__icon svg{ width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; } .faq__answer{ padding: 0 22px 22px; color: rgba(255,255,255,.78); line-height: 1.65; } .faq__answerInner{ padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); } /* animacja + zmiana plus na X */ .faq__item.is-open .faq__icon svg{ transform: rotate(45deg); transition: transform .2s ease; } .faq__icon svg{ transition: transform .2s ease; } @media (max-width: 640px){ .faq__question{ font-size: 16px; padding: 18px; } .faq__answer{ padding: 0 18px 18px; } } /* ========================= PRIVACY POLICY MODULE Dotyczy tylko: .policyPage ========================= */ .policyPage{ background: #f6f7fb; } /* HERO */ .policyPage .policyHero{ background: radial-gradient(1200px 600px at 20% 0%, rgba(255,146,48,.22), transparent 60%), linear-gradient(180deg, #0b1b2c 0%, #0b1320 100%); color: #fff; padding: 42px 0 36px; } .policyPage .policyHero__container{ width: min(1100px, calc(100% - 32px)); margin: 0 auto; } .policyPage .policyHero__title{ margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: .4px; line-height: 1.1; } .policyPage .policyHero__meta{ margin: 10px 0 0; font-size: 15px; color: rgba(255,255,255,.9); } /* CONTENT */ .policyPage .policyContent{ padding: 34px 0 56px; } .policyPage .policyContent__container{ width: min(1100px, calc(100% - 32px)); margin: 0 auto; } .policyPage .policyCard{ background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 18px 40px rgba(15, 23, 42, .08); border: 1px solid rgba(2, 6, 23, .06); } /* LIST (1-9) — numerowanie tylko raz (CSS counter) */ .policyPage .policyList{ margin: 0; padding-left: 0; list-style: none; counter-reset: policy; } .policyPage .policyList__item{ counter-increment: policy; padding: 18px 0; border-bottom: 1px solid rgba(2, 6, 23, .08); } .policyPage .policyList__item:last-child{ border-bottom: 0; } .policyPage .policyList__title{ margin: 0 0 10px; font-size: 18px; letter-spacing: .2px; color: #0b1320; } .policyPage .policyList__title::before{ content: counter(policy) ". "; font-weight: 700; margin-right: 6px; } /* teksty */ .policyPage .policyCard p{ margin: 0 0 10px; color: rgba(11, 19, 32, .88); line-height: 1.7; font-size: 15px; } .policyPage .policyCard p:last-child{ margin-bottom: 0; } /* wypunktowania */ .policyPage .policyBullets{ margin: 10px 0 0; padding-left: 18px; color: rgba(11, 19, 32, .9); } .policyPage .policyBullets li{ margin: 7px 0; line-height: 1.6; font-size: 15px; } /* CONTACT */ .policyPage .policyContact{ margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .policyPage .policyContact__item{ display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: rgba(11, 27, 44, .06); border: 1px solid rgba(2, 6, 23, .08); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .policyPage .policyContact__item:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 23, 42, .10); background: rgba(255,146,48,.10); } .policyPage .policyContact__item--plain:hover{ transform: none; box-shadow: none; background: rgba(11, 27, 44, .06); } .policyPage .policyContact__label{ font-size: 12px; letter-spacing: .7px; text-transform: uppercase; opacity: .75; } .policyPage .policyContact__value{ font-size: 15px; font-weight: 600; color: #0b1320; word-break: break-word; } /* BACK TO TOP */ .policyPage .policyBackTop{ display: flex; justify-content: flex-end; margin-top: 16px; } .policyPage .policyBackTop__btn{ display: inline-block; padding: 10px 14px; border-radius: 10px; background: #0b1b2c; color: #fff; text-decoration: none; font-size: 14px; transition: transform .15s ease, box-shadow .15s ease; } .policyPage .policyBackTop__btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 23, 42, .20); } /* RWD */ @media (max-width: 900px){ .policyPage .policyCard{ padding: 20px; } .policyPage .policyContact{ grid-template-columns: 1fr; } } @media (max-width: 560px){ .policyPage .policyHero{ padding: 34px 0 28px; } .policyPage .policyContent{ padding: 24px 0 44px; } .policyPage .policyList__title{ font-size: 17px; } } /* ========================= CONTACT MODULE ========================= */ .contactPage{ background: #ffffff; } /* HERO */ .contactHero{ padding: 78px 0 34px; background: #fff; } .contactHero__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; text-align: center; } .contactHero__title{ margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 600; color: #ff8a24; /* pomarańcz jak na screenie */ letter-spacing: .2px; } .contactHero__desc{ margin: 12px auto 0; max-width: 820px; font-size: 18px; line-height: 1.45; color: #1b2b43; opacity: .95; } /* CARDS GRID */ .contactCards{ padding: 18px 0 80px; } .contactCards__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } /* CARD */ .contactCard{ background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; padding: 26px 18px 22px; text-align: center; box-shadow: 0 4px 12px rgba(15, 23, 42, .06); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: block; } .contactCard:hover{ transform: translateY(-2px); border-color: rgba(255, 138, 36, .35); box-shadow: 0 10px 22px rgba(15, 23, 42, .10); } .contactCard__icon{ width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: rgba(255, 138, 36, .12); display: grid; place-items: center; color: #ff8a24; } .contactCard__title{ margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #0b1320; } .contactCard__value{ font-size: 15px; font-weight: 600; color: #ff8a24; line-height: 1.25; word-break: break-word; } .contactCard__hint{ margin-top: 10px; font-size: 14px; color: #23364f; opacity: .9; } /* “plain” cards (nie muszą być linkami) */ .contactCard--plain:hover{ transform: none; border-color: #dfe5ee; box-shadow: 0 4px 12px rgba(15, 23, 42, .06); } /* RWD */ @media (max-width: 1100px){ .contactCards__container{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .contactHero{ padding: 56px 0 22px; } .contactHero__container, .contactCards__container{ width: min(1200px, calc(100% - 28px)); } .contactHero__desc{ font-size: 16px; } .contactCards__container{ grid-template-columns: 1fr; gap: 18px; } } /* ========================================================= HERO – UNIKALNE KLASY + TŁO /assets/img/1-min.jpg ========================================================= */ .saHeroUni{ position: relative; overflow: hidden; color: #fff; /* TŁO 1:1 jak chciałeś */ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } /* overlay POD napisami */ .saHeroUni::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 1; pointer-events: none; } /* content NAD overlay */ .saHeroUni__inner{ position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; min-height: 74vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* pill */ .saHeroUni__pill{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 600; color: #ff9230; margin-bottom: 26px; } .saHeroUni__pillIcon{ width: 20px; height: 20px; display: block; } /* title */ .saHeroUni__title{ margin: 0; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; } .saHeroUni__titleTop{ display: block; font-weight: 900; font-size: clamp(36px, 5vw, 62px); color: #fff; } .saHeroUni__titleMain{ display: block; font-weight: 600; font-size: 34px ; color: #ff9230; padding-top: 15px } /* lead */ .saHeroUni__lead{ max-width: 980px; margin: 22px auto 24px; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.92); font-weight: 600; } .saHeroUni__leadAccent{ color: #ff9230; font-weight: 900; } /* badges */ .saHeroUni__badges{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 0 26px; } .saHeroUni__badge{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 400; color: #fff; } .saHeroUni__badgeIcon{ width: 18px; height: 18px; display: block; } /* CTA + hover */ .saHeroUni__cta{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; background: #ff9230; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .saHeroUni__ctaIcon{ width: 18px; height: 18px; display: block; } .saHeroUni__cta:hover{ transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 4px rgba(255,146,48,.25); background-color: #ff9f45; } .saHeroUni__cta:active{ transform: translateY(0); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .saHeroUni__cta:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,146,48,.45), 0 18px 45px rgba(0,0,0,.35); } /* MOBILE: utrzymaj tło to samo (fixed potrafi lagować na mobile -> zmieniamy na scroll, ale obraz ten sam) */ @media (max-width: 768px){ .saHeroUni{ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } .saHeroUni__inner{ padding: 110px 16px 70px; min-height: 72vh; } .saHeroUni__lead{ font-size: 16px; } .saHeroUni__pill{ font-size: 14px; } .saHeroUni__badge{ width: 100%; justify-content: center; } } /* ========================================================= SA PROCESS – "Jak wygląda skup auta?" (unikalne klasy) ========================================================= */ .saProc{ padding: 80px 0; background: #fff; } .saProc__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saProc__title{ text-align: center; font-weight: 700; font-size: clamp(34px, 4.2vw, 46px); margin: 0 0 14px; line-height: 1.1; color: #0b1320; } .saProc__accent{ color: #ff9230; } .saProc__lead{ max-width: 980px; margin: 0 auto 44px; text-align: center; color: #334155; line-height: 1.8; font-size: 18px; } .saProc__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .saProc__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 26px 22px 22px; box-shadow: 0 10px 30px rgba(11, 19, 32, .06); display: flex; flex-direction: column; min-height: 420px; transition: transform .25s ease, box-shadow .25s ease; } .saProc__card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 19, 32, .10); } .saProc__top{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 16px; } .saProc__num{ width: 56px; height: 56px; border-radius: 999px; background: #ff9230; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 18px; } .saProc__iconWrap{ width: 62px; height: 62px; border-radius: 999px; background: #fff3ea; display: flex; align-items: center; justify-content: center; } .saProc__icon{ width: 26px; height: 26px; display: block; } .saProc__cardTitle{ text-align: center; margin: 6px 0 10px; font-weight: 600; color: #0b1320; font-size: 18px; } .saProc__cardText{ text-align: center; color: #334155; line-height: 1.7; font-size: 13.5px; margin: 0 0 18px; } .saProc__time{ margin-top: auto; align-self: center; padding: 8px 16px; border-radius: 999px; background: #fff3ea; color: #ff9230; font-weight: 900; font-size: 13px; } /* RESPONSIVE */ @media (max-width: 1100px){ .saProc__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .saProc__card{ min-height: 390px; } } @media (max-width: 560px){ .saProc{ padding: 64px 0; } .saProc__lead{ font-size: 16px; margin-bottom: 30px; } .saProc__grid{ grid-template-columns: 1fr; gap: 18px; } .saProc__card{ min-height: auto; } } /* ========================= CONTACT FORM SECTION (bez formularza) ========================= */ .contactFormSection{ background: #ffffff; padding: 62px 0 90px; } .contactFormSection__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } /* header */ .contactFormSection__header{ text-align: center; margin-bottom: 46px; } .contactFormSection__title{ margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; color: #ff8a24; } .contactFormSection__desc{ margin: 12px auto 0; max-width: 860px; font-size: 18px; line-height: 1.5; color: #1b2b43; opacity: .95; } /* grid */ .contactFormGrid{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; align-items: start; } /* left column */ .contactInfoList{ display: grid; gap: 18px; } .contactInfoItem{ display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: start; } .contactInfoItem__icon{ width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 138, 36, .12); display: grid; place-items: center; color: #ff8a24; margin-top: 2px; } .contactInfoItem__title{ font-size: 20px; font-weight: 800; color: #0b1320; margin-bottom: 6px; } .contactInfoItem__desc{ font-size: 15px; line-height: 1.55; color: rgba(11, 19, 32, .78); } .contactInfoItem__link{ color: #ff8a24; font-weight: 700; text-decoration: none; } .contactInfoItem__link:hover{ text-decoration: underline; text-underline-offset: 3px; } /* call box */ .contactCallBox{ margin-top: 26px; background: #fff; border: 1px solid #dfe5ee; border-radius: 14px; padding: 30px 26px; box-shadow: 0 12px 26px rgba(15, 23, 42, .08); text-align: center; } .contactCallBox__title{ margin: 0; font-size: 26px; font-weight: 900; color: #0b1320; letter-spacing: .2px; } .contactCallBox__title span{ color: #ff8a24; } .contactCallBox__desc{ margin: 12px 0 18px; font-size: 15px; color: rgba(11, 19, 32, .78); } .contactCallBox__btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; background: #ff8a24; color: #fff; text-decoration: none; font-weight: 800; box-shadow: 0 10px 20px rgba(255, 138, 36, .22); transition: transform .15s ease, box-shadow .15s ease; } .contactCallBox__btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(255, 138, 36, .28); } .contactCallBox__btnIcon{ display: grid; place-items: center; } /* right placeholder */ .contactFormRight{ display: block; } .contactFormPlaceholder{ background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; padding: 34px 34px 28px; box-shadow: 0 12px 26px rgba(15, 23, 42, .08); min-height: 420px; /* zostawia miejsce na formularz */ } .contactFormPlaceholder__title{ font-size: 28px; font-weight: 900; color: #0b1320; margin-bottom: 10px; } .contactFormPlaceholder__desc{ font-size: 15px; color: rgba(11, 19, 32, .72); margin-bottom: 22px; } /* skeleton */ .contactFormPlaceholder__skeleton{ display: grid; gap: 18px; margin-top: 10px; } .skRow{ display: grid; gap: 14px; } .skRow--two{ grid-template-columns: 1fr 1fr; } .skLine{ height: 44px; border-radius: 8px; border: 1px solid #e6eaf2; background: linear-gradient(90deg, #f3f6fb 0%, #eef2f8 35%, #f3f6fb 70%); background-size: 200% 100%; animation: skMove 1.4s ease-in-out infinite; } .skLine--btn{ height: 48px; border-radius: 10px; } @keyframes skMove{ 0%{ background-position: 0% 0; } 100%{ background-position: 200% 0; } } /* RWD */ @media (max-width: 1100px){ .contactFormGrid{ grid-template-columns: 1fr; } .contactFormPlaceholder{ min-height: 360px; } } @media (max-width: 640px){ .contactFormSection__container{ width: min(1200px, calc(100% - 28px)); } .contactFormSection{ padding: 46px 0 70px; } .contactFormSection__desc{ font-size: 16px; } .contactFormPlaceholder{ padding: 26px 20px 22px; } .skRow--two{ grid-template-columns: 1fr; } } /* ========================================================= SA PROMO – żółty box (unikalne klasy) ========================================================= */ .saPromo{ padding: 50px 0 30px; background: transparent; } .saPromo__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saPromo__box{ background: linear-gradient(180deg, #ffb35a 0%, #ff9230 100%); border-radius: 14px; padding: 34px 28px; box-shadow: 0 26px 60px rgba(11, 19, 32, .22); text-align: center; } .saPromo__head{ display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px; } .saPromo__iconWrap{ width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; } .saPromo__icon{ width: 26px; height: 26px; display: block; } .saPromo__title{ margin: 0; font-weight: 900; font-size: clamp(22px, 2.4vw, 34px); color: #fff; } .saPromo__text{ max-width: 980px; margin: 10px auto 22px; color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.7; font-weight: 600; } .saPromo__text strong{ font-weight: 900; color: #fff; } .saPromo__btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #ff9230; text-decoration: none; font-weight: 800; padding: 14px 22px; border-radius: 10px; box-shadow: 0 16px 35px rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .saPromo__btnIcon{ width: 18px; height: 18px; display: block; } .saPromo__btn strong{ font-weight: 900; } .saPromo__btn:hover{ transform: translateY(-2px); box-shadow: 0 20px 45px rgba(0,0,0,.22); filter: brightness(.98); } .saPromo__btn:active{ transform: translateY(0); box-shadow: 0 12px 28px rgba(0,0,0,.20); } .saPromo__btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 20px 45px rgba(0,0,0,.22); } /* Responsive */ @media (max-width: 640px){ .saPromo__box{ padding: 26px 16px; } .saPromo__head{ flex-direction: column; gap: 10px; } .saPromo__text{ font-size: 16px; } .saPromo__btn{ width: 100%; } } /* ========================= FULL WIDTH MAP MODULE ========================= */ .mapFullWidth{ width: 100%; background: #fff; padding: 28px 0 64px; } /* rama na całą szerokość */ .mapFullWidth__frame{ width: 100vw;                 /* pełna szerokość ekranu */ margin-left: calc(50% - 50vw);/* wyjście poza kontener jeśli sekcja jest w containerze */ border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(15, 23, 42, .10); border: 1px solid rgba(2, 6, 23, .10); background: #fff; } /* mapa */ .mapFullWidth__frame iframe{ display: block; width: 100%; height: min(70vh, 620px); border: 0; } /* mobile */ @media (max-width: 640px){ .mapFullWidth{ padding: 18px 0 44px; } .mapFullWidth__frame{ border-radius: 14px; } .mapFullWidth__frame iframe{ height: 62vh; } } /* ========================= AREAS MODULE ========================= */ .areasSection{ background: #fff; padding: 62px 0 80px; } .areasSection__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } .areasSection__header{ text-align: center; margin-bottom: 38px; } .areasSection__title{ margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 900; color: #ff8a24; } .areasSection__desc{ margin: 12px auto 0; max-width: 900px; font-size: 18px; line-height: 1.5; color: #1b2b43; opacity: .95; } /* grid */ .areasGrid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; } /* pill */ .areaPill{ display: grid; place-items: center; height: 52px; padding: 0 12px; border-radius: 8px; background: #fff; border: 1px solid #dfe5ee; box-shadow: 0 3px 10px rgba(15, 23, 42, .06); text-decoration: none; color: #0b1320; font-weight: 700; font-size: 14px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; white-space: nowrap; } .areaPill:hover{ transform: translateY(-2px); border-color: rgba(255, 138, 36, .35); box-shadow: 0 10px 18px rgba(15, 23, 42, .10); } .areaPill:focus-visible{ outline: 3px solid rgba(255, 138, 36, .35); outline-offset: 2px; } /* jeśli potrzebujesz wersji bez linka */ .areaPill--plain{ cursor: default; } .areaPill--plain:hover{ transform: none; border-color: #dfe5ee; box-shadow: 0 3px 10px rgba(15, 23, 42, .06); } /* RWD */ @media (max-width: 1100px){ .areasGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 780px){ .areasSection__container{ width: min(1200px, calc(100% - 28px)); } .areasGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .areasSection__desc{ font-size: 16px; } .areaPill{ height: 50px; } } /* ========================================================= SA DOCS – Dokumenty i formalności (unikalne klasy) ========================================================= */ .saDocs{ padding: 90px 0 70px; background: #fff; } .saDocs__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saDocs__title{ text-align: center; font-weight: 600; font-size: clamp(34px, 4.2vw, 46px); line-height: 1.1; margin: 0 0 14px; color: #0b1320; } .saDocs__accent{ color: #ff9230; font-weight: 900; } .saDocs__lead{ max-width: 980px; margin: 0 auto 44px; text-align: center; color: #334155; line-height: 1.9; font-size: 18px; } .saDocs__lead strong{ color: #0b1320; font-weight: 900; } .saDocs__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 10px; } .saDocs__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 10px 30px rgba(11, 19, 32, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-height: 250px; } .saDocs__card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 19, 32, .10); } .saDocs__card--req:hover{ border-color: rgba(255,146,48,.45); } .saDocs__card--opt:hover{ border-color: rgba(11,19,32,.22); } .saDocs__iconWrap{ width: 62px; height: 62px; border-radius: 999px; background: #fff3ea; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .saDocs__iconWrap--opt{ background: #eef2f7; } .saDocs__icon{ width: 26px; height: 26px; display: block; } .saDocs__cardTitle{ margin: 0 0 10px; font-weight: 900; font-size: 18px; color: #0b1320; } .saDocs__tag{ display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .04em; margin-bottom: 12px; } .saDocs__tag--req{ background: rgba(255,146,48,.14); color: #ff9230; } .saDocs__tag--opt{ background: rgba(37, 99, 235, .12); color: #2563eb; } .saDocs__cardText{ margin: 0; color: #334155; line-height: 1.7; font-size: 14.5px; } /* RESPONSIVE */ @media (max-width: 1100px){ .saDocs__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px){ .saDocs{ padding: 70px 0 55px; } .saDocs__lead{ font-size: 16px; margin-bottom: 30px; } .saDocs__grid{ grid-template-columns: 1fr; gap: 16px; } .saDocs__card{ min-height: auto; } } /* ========================================================= SA SIGN – Jak przebiega podpisanie umowy? (unikalne klasy) ========================================================= */ .saSign{ padding: 40px 0 70px; background: transparent; } .saSign__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saSign__box{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 34px 24px; } .saSign__title{ text-align: center; margin: 0 0 26px; font-weight: 900; color: #0b1320; font-size: clamp(18px, 2.3vw, 26px); } .saSign__steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .saSign__step{ text-align: center; padding: 6px 10px; } .saSign__num{ width: 56px; height: 56px; border-radius: 999px; background: #ff9230; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 14px; } .saSign__stepTitle{ margin: 0 0 8px; font-weight: 900; color: #0b1320; font-size: 18px; } .saSign__stepText{ margin: 0; color: #334155; line-height: 1.7; font-size: 14.5px; } /* Responsive */ @media (max-width: 900px){ .saSign__steps{ grid-template-columns: 1fr; gap: 14px; } .saSign__box{ padding: 26px 16px; } } /* ========================================================= SA BIZ – Obsługa klientów biznesowych (unikalne klasy) ========================================================= */ .saBiz{ padding: 90px 0 65px; background: #fff; } .saBiz__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saBiz__title{ text-align: center; font-weight: 600; font-size: clamp(34px, 4.2vw, 46px); line-height: 1.1; margin: 0 0 14px; color: #0b1320; } .saBiz__accent{ color: #ff9230; font-weight: 600; } .saBiz__lead{ max-width: 980px; margin: 0 auto 44px; text-align: center; color: #334155; line-height: 1.9; font-size: 18px; } .saBiz__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .saBiz__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 28px 20px 22px; text-align: center; box-shadow: 0 10px 30px rgba(11, 19, 32, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-height: 250px; } .saBiz__card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 19, 32, .10); border-color: rgba(255,146,48,.35); } .saBiz__iconWrap{ width: 74px; height: 74px; border-radius: 999px; background: #fff3ea; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .saBiz__icon{ width: 28px; height: 28px; display: block; } .saBiz__cardTitle{ margin: 0 0 10px; font-weight: 900; font-size: 18px; color: #0b1320; } .saBiz__cardText{ margin: 0; color: #334155; line-height: 1.7; font-size: 14.5px; } /* Responsive */ @media (max-width: 1100px){ .saBiz__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px){ .saBiz{ padding: 70px 0 55px; } .saBiz__lead{ font-size: 16px; margin-bottom: 30px; } .saBiz__grid{ grid-template-columns: 1fr; gap: 16px; } .saBiz__card{ min-height: auto; } } /* ========================================================= SA CORP – Współpraca z firmami (unikalne klasy) ========================================================= */ .saCorp{ padding: 40px 0 70px; background: transparent; } .saCorp__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saCorp__box{ background: linear-gradient(180deg, #ffb35a 0%, #ff9230 100%); border-radius: 14px; padding: 40px 26px; text-align: center; box-shadow: 0 26px 60px rgba(11, 19, 32, .22); } .saCorp__head{ display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; } .saCorp__iconWrap{ width: 54px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; } .saCorp__icon{ width: 28px; height: 28px; display: block; } .saCorp__title{ margin: 0; font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); color: #fff; } .saCorp__text{ max-width: 900px; margin: 8px auto 22px; color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.8; font-weight: 650; } .saCorp__text strong{ font-weight: 900; color: #fff; } /* button */ .saCorp__btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #ff9230; text-decoration: none; font-weight: 900; padding: 14px 22px; border-radius: 10px; box-shadow: 0 16px 35px rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .saCorp__btnIcon{ width: 18px; height: 18px; display: block; } .saCorp__btn:hover{ transform: translateY(-2px); box-shadow: 0 20px 45px rgba(0,0,0,.22); filter: brightness(.98); } .saCorp__btn:active{ transform: translateY(0); box-shadow: 0 12px 28px rgba(0,0,0,.20); } .saCorp__btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 20px 45px rgba(0,0,0,.22); } /* responsive */ @media (max-width: 640px){ .saCorp__box{ padding: 28px 16px; } .saCorp__head{ flex-direction: column; gap: 10px; } .saCorp__text{ font-size: 16px; } .saCorp__btn{ width: 100%; } } /* ========================================================= SA VISIT – Co zrobić przed naszą wizytą? (unikalne klasy) ========================================================= */ .saVisit{ padding: 90px 0 70px; background: #fff; } .saVisit__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saVisit__title{ text-align: center; font-weight: 600; font-size: clamp(34px, 4.2vw, 46px); line-height: 1.1; margin: 0 0 14px; color: #0b1320; } .saVisit__accent{ color: #ff9230; font-weight: 600; } .saVisit__lead{ max-width: 980px; margin: 0 auto 44px; text-align: center; color: #334155; line-height: 1.9; font-size: 18px; } .saVisit__lead strong{ color: #0b1320; font-weight: 900; } .saVisit__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .saVisit__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 18px 18px 18px; box-shadow: 0 10px 30px rgba(11, 19, 32, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; min-height: 170px; } .saVisit__card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 19, 32, .10); border-color: rgba(255,146,48,.35); } .saVisit__iconWrap{ width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; } .saVisit__icon{ width: 22px; height: 22px; display: block; } .saVisit__cardTitle{ margin: 0 0 8px; font-weight: 900; color: #0b1320; font-size: 16px; line-height: 1.3; } .saVisit__cardText{ margin: 0; color: #334155; line-height: 1.7; font-size: 13.8px; } /* Responsive */ @media (max-width: 1100px){ .saVisit__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px){ .saVisit{ padding: 70px 0 55px; } .saVisit__lead{ font-size: 16px; margin-bottom: 30px; } .saVisit__grid{ grid-template-columns: 1fr; gap: 16px; } } /* ========================= "NIE ZNALAZŁEŚ SWOJEGO MIASTA?" MODULE ========================= */ .noCitySection{ background: #fff; padding: 44px 0 60px; } .noCitySection__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } .noCityCard{ background: #fff; border: 1px solid #dfe5ee; border-radius: 14px; padding: 46px 26px; text-align: center; box-shadow: 0 18px 40px rgba(15, 23, 42, .10); } .noCityCard__title{ margin: 0; font-size: 28px; font-weight: 900; color: #0b1320; } .noCityCard__desc{ margin: 16px auto 0; max-width: 860px; font-size: 16px; line-height: 1.65; color: rgba(11, 19, 32, .78); } .noCityCard__actions{ margin-top: 26px; display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .noCityBtn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; font-weight: 800; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; border: 2px solid transparent; } .noCityBtn__icon{ display: grid; place-items: center; } .noCityBtn--primary{ background: #ff8a24; color: #fff; box-shadow: 0 14px 28px rgba(255, 138, 36, .28); } .noCityBtn--primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 138, 36, .34); } .noCityBtn--outline{ background: #fff; color: #ff8a24; border-color: #ff8a24; } .noCityBtn--outline:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, .10); background: rgba(255, 138, 36, .06); } /* RWD */ @media (max-width: 780px){ .noCitySection__container{ width: min(1200px, calc(100% - 28px)); } .noCityCard{ padding: 34px 18px; } .noCityCard__title{ font-size: 24px; } .noCityBtn{ width: 100%; justify-content: center; } .noCityCard__actions{ width: 100%; } } /* ========================= CONTACT FORM (RIGHT BOX) ========================= */ .contactFormBox{ background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; padding: 34px 34px 28px; box-shadow: 0 12px 26px rgba(15, 23, 42, .08); } .contactFormBox__title{ margin: 0 0 10px; font-size: 34px; font-weight: 900; color: #0b1320; } .contactFormBox__desc{ margin: 0 0 22px; font-size: 15px; color: rgba(11, 19, 32, .72); } .contactForm{ display: grid; gap: 18px; } .contactForm__grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contactField{ display: grid; gap: 8px; } .contactField__label{ font-size: 14px; font-weight: 800; color: #0b1320; } .contactField__label span{ color: #ff8a24; } .contactField__input, .contactField__textarea{ width: 100%; border: 1px solid #dfe5ee; background: #fff; border-radius: 8px; padding: 14px 14px; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .contactField__textarea{ resize: vertical; min-height: 140px; } .contactField__input:focus, .contactField__textarea:focus{ border-color: rgba(255, 138, 36, .55); box-shadow: 0 0 0 4px rgba(255, 138, 36, .12); } .contactConsent{ display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: rgba(11, 19, 32, .72); } .contactConsent__checkbox{ margin-top: 2px; width: 16px; height: 16px; accent-color: #ff8a24; } .contactConsent__req{ color: #ff8a24; font-weight: 800; } .contactSubmit{ height: 48px; border: 0; border-radius: 10px; background: #ff8a24; color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 14px 28px rgba(255, 138, 36, .24); transition: transform .15s ease, box-shadow .15s ease; } .contactSubmit:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 138, 36, .30); } .contactFormStatus{ font-size: 13px; min-height: 18px; color: rgba(11, 19, 32, .72); } /* RWD */ @media (max-width: 640px){ .contactFormBox{ padding: 26px 20px 22px; } .contactFormBox__title{ font-size: 28px; } .contactForm__grid2{ grid-template-columns: 1fr; } } /* ========================================================= SA VAL HERO – Wycena (unikalne klasy) + tło 1-min.jpg fixed ========================================================= */ .saValHero{ position: relative; overflow: hidden; color: #fff; /* WYMAGANE tło – identyczne parametry także na mobile */ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } /* overlay POD treścią */ .saValHero::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 1; pointer-events: none; } /* treść NAD overlay */ .saValHero__inner{ position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 120px 16px 85px; min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* pewne centrowanie tekstu */ } /* pill */ .saValHero__pill{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 500; color: #ff9230; margin-bottom: 26px; } .saValHero__pillIcon{ width: 18px; height: 18px; display: block; } /* title */ .saValHero__title{ margin: 0; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; } .saValHero__titleTop{ display: block; font-weight: 900; font-size: clamp(40px, 5.2vw, 70px); color: #fff; } .saValHero__titleMain{ display: block; font-weight: 900; font-size: clamp(44px, 6.2vw, 82px); color: #ff9230; } /* lead */ .saValHero__lead{ max-width: 980px; margin: 18px auto 24px; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.92); font-weight: 450; } .saValHero__leadAccent{ color: #ff9230; font-weight: 600; } /* badges */ .saValHero__badges{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 10px 0 26px; } .saValHero__badge{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 500; color: #fff; } .saValHero__badgeIcon{ width: 18px; height: 18px; display: block; } /* CTA – wycentrowany + hover */ .saValHero__cta{ display: flex;           /* pewne centrowanie */ align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 0 auto;          /* środek */ padding: 14px 22px; border-radius: 12px; background: #ff9230; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .saValHero__ctaIcon{ width: 18px; height: 18px; display: block; } .saValHero__cta:hover{ transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 4px rgba(255,146,48,.25); background-color: #ff9f45; } .saValHero__cta:active{ transform: translateY(0); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .saValHero__cta:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,146,48,.45), 0 18px 45px rgba(0,0,0,.35); } /* Mobile – tło MUSI mieć te same parametry (fixed) */ @media (max-width: 768px){ .saValHero{ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } .saValHero__inner{ padding: 110px 16px 75px; min-height: 72vh; } .saValHero__lead{ font-size: 16px; } .saValHero__pill{ font-size: 14px; } .saValHero__badge{ width: 100%; justify-content: center; } } /* ========================================================= SA VAL INFO – Wycena pojazdów (unikalne klasy) ========================================================= */ .saValInfo{ padding: 70px 0 50px; background: transparent; } .saValInfo__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saValInfo__box{ background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 40px 28px; box-shadow: 0 18px 45px rgba(11, 19, 32, .08); } .saValInfo__title{ text-align: center; margin: 0 0 10px; font-weight: 900; font-size: clamp(22px, 3vw, 34px); color: #0b1320; line-height: 1.2; } .saValInfo__accent{ color: #ff9230; font-weight: 900; } .saValInfo__lead{ text-align: center; margin: 0 auto 26px; color: #475569; font-size: 16px; line-height: 1.7; max-width: 900px; } .saValInfo__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 10px; } .saValInfo__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 22px 22px 18px; } .saValInfo__cardHead{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .saValInfo__miniIcon{ width: 34px; height: 34px; border-radius: 999px; background: #fff3ea; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; } .saValInfo__miniIcon img{ width: 18px; height: 18px; display: block; } .saValInfo__cardTitle{ margin: 0; font-weight: 900; font-size: 18px; color: #0b1320; } /* list */ .saValInfo__list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .saValInfo__list li{ position: relative; padding-left: 18px; color: #334155; line-height: 1.7; font-size: 14.5px; } .saValInfo__list li::before{ content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 999px; background: #ff9230; } .saValInfo__list strong{ font-weight: 900; color: #0b1320; } /* responsive */ @media (max-width: 980px){ .saValInfo__grid{ grid-template-columns: 1fr; } .saValInfo__box{ padding: 30px 16px; } } /* ========================================================= SA RATE+AREA – box + 2 kolumny (unikalne klasy) ========================================================= */ .saRateArea{ padding: 45px 0 70px; background: transparent; } .saRateArea__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* TOP BOX */ .saRateArea__topBox{ background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 34px 28px; box-shadow: 0 18px 45px rgba(11, 19, 32, .08); text-align: center; margin-bottom: 22px; } .saRateArea__topTitle{ margin: 0 0 12px; font-weight: 900; font-size: clamp(20px, 2.6vw, 30px); color: #0b1320; line-height: 1.25; } .saRateArea__accent{ color: #ff9230; font-weight: 900; } .saRateArea__topText{ margin: 0 auto; max-width: 980px; color: #334155; line-height: 1.85; font-size: 15.5px; } /* GRID */ .saRateArea__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } /* CARD */ .saRateArea__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 24px 24px 22px; box-shadow: 0 12px 32px rgba(11, 19, 32, .06); } .saRateArea__cardTitle{ margin: 0 0 18px; font-weight: 900; font-size: 18px; color: #0b1320; } /* STEPS */ .saRateArea__steps{ display: grid; gap: 16px; } .saRateArea__step{ display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; } .saRateArea__num{ width: 28px; height: 28px; border-radius: 999px; background: #ff9230; color: #fff; font-weight: 400; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .saRateArea__stepTitle{ font-weight: 900; color: #0b1320; margin-bottom: 4px; font-size: 15px; } .saRateArea__stepText{ color: #334155; line-height: 1.7; font-size: 13.8px; } /* RIGHT SECTIONS */ .saRateArea__section{ padding: 12px 0; border-top: 1px solid #eef2f7; } .saRateArea__section:first-of-type{ border-top: 0; padding-top: 0; } .saRateArea__label{ font-weight: 900; color: #0b1320; margin-bottom: 6px; font-size: 14px; } .saRateArea__text{ color: #334155; line-height: 1.75; font-size: 14px; } /* Responsive */ @media (max-width: 980px){ .saRateArea__grid{ grid-template-columns: 1fr; } .saRateArea__topBox{ padding: 28px 16px; } .saRateArea__card{ padding: 22px 16px; } } /* ========================================================= SA DUAL LISTS – 2 karty z checklistą (unikalne klasy) ========================================================= */ .saDualLists{ padding: 40px 0 70px; background: transparent; } .saDualLists__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } .saDualLists__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .saDualLists__card{ background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 18px 45px rgba(11, 19, 32, .08); } .saDualLists__title{ margin: 0 0 16px; font-weight: 900; font-size: 22px; color: #0b1320; line-height: 1.25; text-align: center; } .saDualLists__list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .saDualLists__list li{ position: relative; padding-left: 34px; color: #334155; line-height: 1.7; font-size: 15px; } /* ikona check w kółku */ .saDualLists__list li::before{ content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 999px; background: #fff3ea; border: 1px solid rgba(255,146,48,.35); } .saDualLists__list li::after{ content: ""; position: absolute; left: 6px; top: 8px; width: 10px; height: 6px; border-left: 2.5px solid #ff9230; border-bottom: 2.5px solid #ff9230; transform: rotate(-45deg); } /* Responsive */ @media (max-width: 980px){ .saDualLists__grid{ grid-template-columns: 1fr; } .saDualLists__card{ padding: 22px 16px 18px; } .saDualLists__title{ font-size: 20px; } } /* ========================= CITY HERO (GDYNIA) ========================= */ .cityHero{ position: relative; min-height: 92vh; display: flex; align-items: center; color: #fff; background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } /* overlay wg Twojej specyfikacji */ .cityHero::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.28); z-index: 1; } .cityHero__container{ position: relative; z-index: 2; width: min(1200px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.95fr; gap: 34px; align-items: center; padding: 84px 0 64px; } /* LEWA */ .cityHero__brand{ font-weight: 500; letter-spacing: .6px; color: #ff8a24; margin-bottom: 10px; } .cityHero__title{ margin: 0; font-size: clamp(44px, 6vw, 74px); line-height: 0.98; font-weight: 700; letter-spacing: 1px; } .cityHero__title span{ color: #ff8a24; } .cityHero__location{ margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; opacity: .98; } .cityHero__location .pin__svg{ color: #ff8a24; /* currentColor w SVG */ flex: 0 0 auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); } .cityHero__locationText{ color: rgba(255,255,255,.94); } /* ✓ lista */ .cityHero__ticks{ list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; max-width: 560px; color: rgba(255,255,255,.92); font-weight: 700; } .cityHero__ticks li{ display: block; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.10); backdrop-filter: blur(2px); } /* krótki SEO */ .cityHero__seo{ margin: 18px 0 0; max-width: 620px; color: rgba(255,255,255,.86); line-height: 1.55; font-size: 15px; } /* PRAWA */ .cityCta{ background: linear-gradient(180deg, rgba(255,138,36,.98), rgba(255,138,36,.88)); border-radius: 18px; padding: 26px 26px 20px; box-shadow: 0 22px 46px rgba(0,0,0,.22); } .cityCta__title{ font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 16px; color: #fff; line-height: 1.25; } .cityCta__btn{ display: flex; justify-content: center; align-items: center; height: 46px; border-radius: 10px; text-decoration: none; font-weight: 600; margin-top: 12px; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .cityCta__btn:hover{ transform: translateY(-2px); } .cityCta__btn--white{ background: #fff; color: #ff8a24; box-shadow: 0 14px 28px rgba(255,255,255,.18); } .cityCta__btn--orange{ background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); } .cityCta__notes{ margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.92); text-align: center; line-height: 1.45; } /* scroll marker */ .cityHero__scroll{ position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.12); z-index: 2; } /* RWD */ @media (max-width: 1100px){ .cityHero__container{ grid-template-columns: 1fr; gap: 24px; padding: 86px 0 60px; z-index: 1 } .cityCta{ max-width: 680px; } } @media (max-width: 640px){ .cityHero{ background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed; } .cityHero__container{ width: min(1200px, calc(100% - 28px)); } .cityCta__title{ font-size: 20px; } .cityHero__ticks li{ border-radius: 14px; /* żeby ładniej łamało na mobile */ } } /* tylko dla podstron miast – równe opisy pod nagłówkami */ .stepCard__text--city{ min-height: calc(1.55em * 3);  /* 3 linie */ line-height: 1.55; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* ========================= FORMALITIES MODULE ========================= */ .formalSection{ background: #fff; padding: 70px 0 86px; } .formalSection__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } /* header */ .formalHeader{ text-align: center; margin-bottom: 40px; } .formalHeader__title{ margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 900; color: #0b1320; } .formalHeader__subtitle{ margin: 10px 0 0; font-size: 16px; color: rgba(11, 19, 32, .72); } /* grid */ .formalGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } /* card */ .formalCard{ background: #fff; border: 1px solid #dfe5ee; border-radius: 12px; padding: 26px 26px 22px; box-shadow: 0 14px 28px rgba(15, 23, 42, .10); } .formalCard__top{ display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .formalCard__icon{ width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 138, 36, .12); color: #ff8a24; display: grid; place-items: center; flex: 0 0 auto; } .formalCard__title{ margin: 0; font-size: 20px; font-weight: 900; color: #0b1320; } /* list */ .formalList{ margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .formalList li{ position: relative; padding-left: 16px; color: rgba(11, 19, 32, .78); line-height: 1.55; font-size: 15px; } .formalList li::before{ content: "•"; position: absolute; left: 0; top: 0; color: #0b1320; opacity: .75; } /* RWD */ @media (max-width: 900px){ .formalGrid{ grid-template-columns: 1fr; } } @media (max-width: 640px){ .formalSection__container{ width: min(1200px, calc(100% - 28px)); } .formalCard{ padding: 22px 18px 18px; } .formalCard__title{ font-size: 18px; } } /* ========================= CITY TRUST / LIDER RYNKU ========================= */ .cityTrust{ background: #fff; padding: 58px 0 80px; } .cityTrust__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } .cityTrust__card{ background: #fff; border: 1px solid #dfe5ee; border-radius: 14px; padding: 34px 34px 30px; box-shadow: 0 18px 40px rgba(15, 23, 42, .10); } .cityTrust__title{ text-align: center; margin: 0 0 24px; font-size: 30px; font-weight: 900; color: #0b1320; } .cityTrust__grid{ display: grid; grid-template-columns: 1.15fr .95fr; gap: 34px; align-items: center; } .cityTrust__heading{ margin: 0 0 12px; font-size: 22px; font-weight: 900; color: #0b1320; } .cityTrust__text{ margin: 0 0 14px; color: rgba(11, 19, 32, .78); line-height: 1.65; font-size: 15px; max-width: 620px; } .cityTrust__text:last-of-type{ margin-bottom: 18px; } /* list with check */ .cityTrust__list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .cityTrust__list li{ position: relative; padding-left: 34px; font-weight: 700; color: rgba(11, 19, 32, .86); } .cityTrust__list li::before{ content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 138, 36, .14); color: #ff8a24; font-weight: 900; } /* CTA box */ .cityTrustCta{ background: linear-gradient(180deg, rgba(255,138,36,.98), rgba(255,138,36,.88)); border-radius: 18px; padding: 28px; box-shadow: 0 18px 40px rgba(0,0,0,.14); } .cityTrustCta__title{ font-size: 26px; font-weight: 900; color: #fff; margin-bottom: 10px; } .cityTrustCta__subtitle{ font-size: 14px; color: rgba(255,255,255,.92); margin-bottom: 18px; } /* button */ .cityTrustCta__btn{ background: #fff; color: #ff8a24; text-decoration: none; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; box-shadow: 0 14px 28px rgba(255,255,255,.18); transition: transform .15s ease, box-shadow .15s ease; } .cityTrustCta__btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255,255,255,.22); } .cityTrustCta__btnIcon{ display: grid; place-items: center; } /* RWD */ @media (max-width: 980px){ .cityTrust__grid{ grid-template-columns: 1fr; } } @media (max-width: 640px){ .cityTrust__container{ width: min(1200px, calc(100% - 28px)); } .cityTrust__card{ padding: 24px 18px 20px; } .cityTrust__title{ font-size: 24px; } } /* ========================= CITY SEO TEXT MODULE ========================= */ .citySeo{ background: #fff; padding: 60px 0 86px; } .citySeo__container{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; } .citySeo__card{ background: #fff; border: 1px solid #dfe5ee; border-radius: 14px; padding: 36px 34px 30px; box-shadow: 0 18px 40px rgba(15, 23, 42, .10); } .citySeo__header{ text-align: center; margin-bottom: 26px; } .citySeo__title{ margin: 0; font-size: clamp(26px, 3.2vw, 36px); font-weight: 900; color: #0b1320; } .citySeo__lead{ margin: 14px auto 0; max-width: 900px; color: rgba(11, 19, 32, .76); line-height: 1.7; font-size: 15px; } .citySeo__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; } .citySeo__h3{ margin: 0 0 10px; font-size: 18px; font-weight: 900; color: #0b1320; } .citySeo__p{ margin: 0 0 16px; color: rgba(11, 19, 32, .76); line-height: 1.7; font-size: 15px; } .citySeo__p--note{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(2, 6, 23, .08); } .citySeo__list{ list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; } .citySeo__list li{ position: relative; padding-left: 34px; font-weight: 700; color: rgba(11, 19, 32, .86); } .citySeo__list li::before{ content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 138, 36, .14); color: #ff8a24; font-weight: 900; } /* RWD */ @media (max-width: 980px){ .citySeo__grid{ grid-template-columns: 1fr; } } @media (max-width: 640px){ .citySeo__container{ width: min(1200px, calc(100% - 28px)); } .citySeo__card{ padding: 24px 18px 20px; } } /* ===== BLOG MODULE – MOBILE FORCE FIT (IMPORTANT) ===== */ @media (max-width: 700px){ /* żeby padding nie powodował overflow */ #aktualnosci, #aktualnosci *{ box-sizing: border-box !important; } /* kontener modułu */ #aktualnosci .blogModule__inner{ width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin: 0 auto !important; overflow: hidden !important; /* ucina ewentualne wystawanie */ } /* grid na 1 kolumnę i bez rozpychania */ #aktualnosci .wpisyGrid{ display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* KARTA – NAJWAŻNIEJSZE */ #aktualnosci .wpisyCard{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 14px !important; border-radius: 14px !important; overflow: hidden !important; } /* obrazek też nie może wystawać */ #aktualnosci .wpisyCard__imgWrap{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-radius: 12px !important; overflow: hidden !important; display: block !important; } #aktualnosci .wpisyCard__img{ width: 100% !important; max-width: 100% !important; height: 180px !important; object-fit: cover !important; display: block !important; } /* przyciski często robią overflow przez inline / padding */ #aktualnosci .wpisyCard__btn{ display: flex !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; align-items: center !important; padding: 12px 14px !important; border-radius: 12px !important; white-space: normal !important; /* jakby tekst był za długi */ } } /* ========================= DROPDOWN: MIASTA (desktop + mobile) – WERSJA POPRAWNA ========================= */ /* ważne: u Ciebie header to .topbar, nie .header */ .topbar{ position: relative; z-index: 9999; } /* nic nie może ucinać dropdownu */ .topbar, .topbar__inner, .menu-wrap, .menu{ overflow: visible; } /* wrapper dropdowna */ .menu__dropdown{ position: relative; display: inline-flex; align-items: center; gap: 6px; } /* link "Miasta" */ .menu__link--parent{ display: inline-flex; align-items: center; } /* przycisk strzałki (działa na desktop i mobile) */ .menu__dropdown-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor: pointer; } /* strzałka */ .menu__caret{ width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.9); border-bottom: 2px solid rgba(255,255,255,.9); transform: rotate(45deg); } .menu__dropdown.is-open .menu__caret{ transform: rotate(-135deg); } /* panel dropdown (desktop) */ .menu__dropdown-panel{ position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, 78vw); max-height: min(60vh, 520px); overflow: auto; padding: 10px; border-radius: 14px; background: rgba(7, 18, 32, .98); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 50px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 10000; } /* desktop: hover działa */ .menu__dropdown:hover .menu__dropdown-panel{ opacity: 1; visibility: visible; transform: translateY(0); } /* desktop+mobile: klik (is-open) też działa */ .menu__dropdown.is-open .menu__dropdown-panel{ opacity: 1; visibility: visible; transform: translateY(0); } .popular-cities__link{ display:block; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.2; color: #fff; transition: background-color .15s ease, color .15s ease; } .popular-cities__link:hover{ background: rgba(255,146,48,.20); } /* ===== MOBILE: panel jako lista pod spodem (accordion) ===== */ @media (max-width: 900px){ .menu__dropdown{ display: block; } .menu__dropdown-panel{ position: static; width: 100%; max-height: none; overflow: visible; padding: 8px 0 0; margin: 0 0 6px; border: 0; background: transparent; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; } .menu__dropdown.is-open .menu__dropdown-panel{ display: block; } .popular-cities__link{ font-size: 14px; padding: 10px 12px; } } @media (max-width: 900px){ /* jeden wiersz: "Miasta" + strzałka po prawej */ .menu__dropdown{ display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .menu__link--parent{ flex: 1 1 auto; width: auto !important; justify-content: flex-start !important; } .menu__dropdown-toggle{ flex: 0 0 auto; margin-left: auto !important; } /* panel pod spodem na całą szerokość */ .menu__dropdown-panel{ flex-basis: 100%; width: 100% !important; margin-top: 6px; } } /* saDocs – wyśrodkowanie 3 kafelków po usunięciu jednego */ .saDocs__grid{ display: grid; gap: 24px; justify-content: center; /* centruje całą siatkę */ grid-template-columns: repeat(3, minmax(240px, 320px)); } /* responsywność */ @media (max-width: 1024px){ .saDocs__grid{ grid-template-columns: repeat(2, minmax(240px, 320px)); } } @media (max-width: 640px){ .saDocs__grid{ grid-template-columns: minmax(240px, 1fr); justify-content: stretch; } } /* PSI mobile: lżejsze tło formularza */ @media (max-width: 992px){ #formularz::before{ background-image: url("/assets/img/2-min-mobile-ultra.webp") !important; } } .brand{ display:block; width:350px; height:80px; background:url("/assets/img/logo-min.webp") no-repeat left center / contain; } @media (max-width: 992px){ .brand{ background-image:url("/assets/img/logo-minmob.webp"); width:260px; } } /* QuoteForm – tło tylko na środku */ section.quoteForm { background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; /* bez fixed */ background-size: auto !important;         /* tło NIE rozciąga się */ } /* jeśli chcesz, żeby było całe widoczne, ale nadal tylko na środku */ section.quoteForm.bg-contain { background-size: contain !important; } .hero{ position:relative; overflow:hidden; } .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero__inner{ position:relative; z-index:2; } .hero::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 1; pointer-events: none; } /* QuoteForm – tło po bokach, środek pusty */ section.quoteForm{ position: relative; overflow: hidden; background: none !important; /* nie tło na całej sekcji */ } /* dwa boczne panele */ section.quoteForm::before, section.quoteForm::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 50vw;                 /* lewy/prawy pas */ background-image: var(--quote-bg); background-position: center center; background-repeat: no-repeat; background-size: cover;      /* wygląda jak na screenie */ z-index: 0; } /* lewy panel */ section.quoteForm::before{ left: 0; } /* prawy panel */ section.quoteForm::after{ right: 0; } /* wszystko w środku ma być nad tłem */ section.quoteForm > *{ position: relative; z-index: 1; } section.quoteForm{ position: relative; overflow: hidden; background: none !important; } section.quoteForm::before, section.quoteForm::after{ content:""; position:absolute; top:0; bottom:0; width:50vw; background-image: var(--quote-bg); background-position:center center; background-repeat:no-repeat; background-size:cover; z-index:0; } section.quoteForm::before{ left:0; } section.quoteForm::after{ right:0; } section.quoteForm > *{ position:relative; z-index:1; } section.quoteForm{ position: relative; overflow: hidden; background: none !important; } section.quoteForm::before, section.quoteForm::after{ content:""; position:absolute; top:0; bottom:0; width:50vw; background-image: var(--quote-bg); background-position:center center; background-repeat:no-repeat; background-size:cover; z-index:0; } section.quoteForm::before{ left:0; } section.quoteForm::after{ right:0; } section.quoteForm > *{ position:relative; z-index:1; } /* FULL-BLEED sekcja pod formularzem + tło tylko po bokach */ section.quoteForm#formularz{ /* wyjście z kontenera na pełną szerokość viewportu */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; overflow: hidden; background: transparent !important; /* ustaw ile ma mieć "środek" (tam gdzie formularz) */ --center-max: 1200px; /* dopasuj jeśli formularz ma inną szerokość */ } /* boczne tła */ section.quoteForm#formularz::before, section.quoteForm#formularz::after{ content: ""; position: absolute; top: 0; bottom: 0; /* szerokość bocznych pasów = (viewport - środek)/2 */ width: calc((100vw - var(--center-max)) / 2); background-image: var(--quote-bg); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: 0; } section.quoteForm#formularz::before{ left: 0; } section.quoteForm#formularz::after { right: 0; } /* wszystko w środku nad tłem */ section.quoteForm#formularz > *{ position: relative; z-index: 1; } /* quoteForm: obraz tylko na środku */ section.quoteForm#formularz{ background-image: var(--quote-bg) !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: auto !important;     /* nie rozciąga */ background-attachment: scroll !important; } /* jeśli ma być zawsze cały widoczny, ale nadal centralnie */ section.quoteForm#formularz.bg-contain{ background-size: contain !important; } /* FIX: usuń "plaster" obrazka w lewym górnym rogu */ section.quoteForm#formularz::before, section.quoteForm#formularz::after{ content: none !important; display: none !important; }