/* ===== 00-variables.css ===== */ :root { --bg: #fff; --text: #111827; --muted: #4b5563; --line: #e5e7eb; --soft: #f9fafb; --accent: #ff7a18; --accent2: #ffb000; --hero: #0b1220; --hero2: #111c33; --radius: 16px; --max: 1120px; --shadow: 0 12px 28px rgba(17, 24, 39, 0.1); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ===== 01-base.css ===== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); } html { -webkit-tap-highlight-color: rgba(255, 122, 24, 0.18); scroll-behavior: smooth; } body { min-height: 100vh; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 18px; } /* ========================================================= Scroll reveal — bezpieczny także bez JavaScript ========================================================= */ /* Bez JavaScript wszystkie elementy pozostają widoczne. */ .reveal { opacity: 1; transform: none; } /* main.js dodaje klasę "js" do elementu . */ html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Szanuje systemowe ograniczenie animacji. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ===== 02-a11y.css ===== */ /* ========================================================= DOSTĘPNOŚĆ — fokus klawiatury i treści dla czytników ekranu ========================================================= */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; border-radius: 10px; } /* * Ukrywa element wizualnie, ale pozostawia go dostępnego * dla czytników ekranu. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* * Link „Przejdź do treści głównej” staje się widoczny, * gdy użytkownik przechodzi po stronie klawiszem Tab. */ .sr-only:focus, .sr-only:focus-visible { position: fixed !important; top: 12px !important; left: 12px !important; z-index: 10000 !important; width: auto !important; height: auto !important; padding: 10px 14px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; border: 2px solid #b45309 !important; border-radius: 10px !important; background: #fff !important; color: #111827 !important; font-weight: 800 !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important; } /* Lepsza widoczność fokusu w trybie wysokiego kontrastu systemu. */ @media (forced-colors: active) { a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline-color: Highlight; } } /* ===== 10-header-nav.css ===== */ /* ========================================================= TOPBAR / HEADER / MENU ========================================================== */ .topbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; flex-wrap:nowrap; /* nie łam na 2 linie */ } .brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto; } .logo{ width:38px;height:38px;border-radius:12px; display:grid;place-items:center; overflow:hidden; background:transparent; flex:0 0 auto; } .logo img{ width:100%;height:100%; object-fit:contain; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); } .brand b{display:block;font-size:16px;line-height:1.1} .brand span{display:block;font-size:13px;color:var(--muted);margin-top:2px} /* Desktop menu */ .menu.classic{flex:1 1 auto; min-width:0;} .menu.classic ul{ list-style:none; margin:0;padding:0; display:flex; gap:6px; align-items:center; flex-wrap:nowrap; /* kluczowe */ white-space:nowrap; /* kluczowe */ } .menu.classic li{position:relative} .menu.classic a{ display:inline-flex;align-items:center;gap:8px; padding:9px 10px;border-radius:10px; color:#1f2937; border:1px solid transparent; font-weight:800;font-size:13px; transition: color .15s ease, background .15s ease, border-color .15s ease; } /* Hover/Focus/Active: tylko pomarańczowy underline */ .menu.classic a:hover, .menu.classic li:focus-within > a, .menu.classic a.is-active{ background:transparent !important; border-color:transparent !important; color:inherit !important; text-decoration: underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color: var(--accent); } /* Dropdown */ .menu.classic li:hover > .sub-menu, .menu.classic li:focus-within > .sub-menu{display:block} .menu.classic .sub-menu{ display:none; position:absolute; top:100%; left:0; min-width:280px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(17,24,39,.12); padding:8px; transform: translateY(8px); z-index:9999; } .menu.classic .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .menu.classic .sub-menu a{ display:block; width:100%; padding:10px 12px; border-radius:12px; color:#111; border:1px solid transparent; background:transparent; text-decoration:none; } .menu.classic .sub-menu a:hover, .menu.classic .sub-menu a:focus, .menu.classic .sub-menu a.is-active, .menu.classic .sub-menu a[aria-current="page"]{ background:transparent !important; border-color:transparent !important; color:var(--accent) !important; text-decoration: underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color: var(--accent); } .menu.classic .sub-menu{ margin-top: 2px; } /* Actions / Buttons */ .actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; white-space:nowrap; flex:0 0 auto; } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:11px 14px;border-radius:12px;border:1px solid var(--line); background:#fff;color:#111;font-weight:900;cursor:pointer; transition:.2s transform,.2s box-shadow,.2s background; user-select:none; white-space:nowrap; } .btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(17,24,39,.10)} .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111} .btn.primary:hover{background:linear-gradient(135deg,#ff8a33,#ffc233)} .btn.small{padding:10px 12px;border-radius:10px;font-size:13px} .btn-ico{ width:16px; height:16px; flex:0 0 auto; } .phone-btn .btn-ico{ width:14px; height:14px; } /* Burger */ .burger{ display:none; width:42px;height:42px;border-radius:12px; border:1px solid var(--line); background:#fff; align-items:center;justify-content:center; } .burger-lines{width:18px;height:12px;position:relative} .burger-lines span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#111;top:0} .burger-lines span:nth-child(2){top:5px} .burger-lines span:nth-child(3){top:10px} /* ========================================================= RESPONSIVE HEADER ========================================================== */ @media (max-width: 980px){ .menu.classic{display:none} .burger{display:inline-flex} .actions .btn{display:none} .burger{margin-left:auto} } /* ========================================================= MOBILE NAV + BACKDROP (PANEL) +
estetyka (FINAL: jedna wersja, bez duplikatów) ========================================================= */ .nav-backdrop{ position: fixed; inset: 0; background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px); z-index: 80; } .nav-backdrop[hidden]{ display:none !important; } .mobile-nav{ position: fixed; left: 12px; right: 12px; top: 76px; /* dopasuj do wysokości topbara */ z-index: 90; max-height: calc(100vh - 92px); overflow: auto; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 0 0 16px 16px; /* góra prosta, dół zaokrąglony */ box-shadow: 0 18px 48px rgba(17,24,39,.18); padding: 10px; transform-origin: top right; animation: mobileNavIn .14s ease-out; } .mobile-nav[hidden]{ display:none !important; } @keyframes mobileNavIn{ from{ opacity:0; transform: translateY(-6px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } } /* główne linki */ .mobile-nav > a{ display:block; padding: 12px 12px; border-radius: 12px; font-weight: 900; } /* hover ogólny */ .mobile-nav a:hover{ background: rgba(17,24,39,.04); text-decoration: none; } /* aktywny link */ .mobile-nav a.is-active{ background: rgba(255,122,24,.10); border: 1px solid rgba(255,122,24,.25); color: #111 !important; text-decoration: none; } /* grupy
jako sekcje */ .mobile-group{ margin: 8px 0; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: rgba(17,24,39,.02); overflow: hidden; } /* nagłówek sekcji */ .mobile-group > summary{ list-style: none; cursor: pointer; user-select: none; display:flex; align-items:center; justify-content: space-between; padding: 12px 12px; font-weight: 1000; letter-spacing: .02em; } .mobile-group > summary::-webkit-details-marker{ display:none; } /* chevron */ .mobile-group > summary::after{ content:""; width: 10px; height: 10px; border-right: 2px solid rgba(17,24,39,.55); border-bottom: 2px solid rgba(17,24,39,.55); transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease; margin-left: 10px; } .mobile-group[open] > summary::after{ transform: rotate(225deg); } .mobile-group > summary:hover{ background: rgba(255,122,24,.06); } /* wnętrze sekcji */ .mobile-group-links{ padding: 6px 8px 10px; border-top: 1px solid rgba(0,0,0,.06); background:#fff; } /* sublinki */ .mobile-group-links a.subitem{ display:block; padding: 10px 10px 10px 18px; border-radius: 12px; font-weight: 850; position: relative; } /* mała kreska zamiast myślnika-tekstu */ .mobile-group-links a.subitem::before{ content:""; position:absolute; left:10px; top:50%; width: 6px; height: 2px; background: rgba(156,163,175,.9); transform: translateY(-50%); border-radius: 2px; } /* przyciski na dole */ .mobile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } /* body lock gdy menu otwarte */ body.nav-open{ overflow: hidden; } /* ========================================================= AKTYWNA GRUPA W MENU MOBILNYM Klasa .has-active-item jest dodawana przez js/main.js. ========================================================= */ .mobile-group.has-active-item{ border-color:rgba(255,122,24,.35); background:rgba(255,122,24,.07); } .mobile-group.has-active-item > summary{ background:rgba(255,122,24,.10); color:#111; } .mobile-group.has-active-item > summary::after{ border-color:var(--accent); } /* ========================================================= POPRAWKA FOKUSU DLA NADRZĘDNYCH SUBMENU () ========================================================== */ /* Sprawiamy, że aktywny pod kątem klawiatury summary zawsze jest na wierzchu */ .mobile-group > summary:focus-visible { outline: 3px solid var(--accent, #ff7900) !important; outline-offset: -3px; /* Przesunięcie ramki minimalnie do wewnątrz, by overflow: hidden jej nie ucinało */ background: rgba(255, 122, 24, 0.08) !important; position: relative; z-index: 2; /* Wynosi element nad biały blok z linkami poniżej */ } /* ===== 30-content.css ===== */ /* ========================================================= CONTENT ========================================================== */ .section{ padding:20px 0; } @media (max-width: 900px){ .section{ padding:56px 0; } } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 24px rgba(17,24,39,.06); padding:18px; display:flex; flex-direction:column; } .grid{ display:grid; gap:18px; } .cols2{ grid-template-columns:1fr 1fr; } h2{ margin:0 0 10px; font-size:24px; line-height:1.15; } h3{ margin:0 0 8px; font-size:16px; line-height:1.25; } p{ margin:0; color:var(--muted); line-height:1.75; } .mini{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } /* ========================================================= TAG — premium (spójne z pill i SVG) ========================================================= */ .tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#111; font-weight:800; font-size:12px; line-height:1; transition: transform .15s ease, box-shadow .15s ease; } @media (hover:hover){ .tag:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(17,24,39,.08); } } /* ========================================================= CONTACT helpers ========================================================= */ .contact-box strong{ color:#111; } .contact-line{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; } .contact-box a[href^="mailto:"]{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .separator{ margin:22px 0; height:1px; background:linear-gradient(to right, transparent, var(--line), transparent); } /* ========================================================= FOOTER ========================================================= */ footer{ padding:22px 0; border-top:1px solid var(--line); color:var(--muted); background:#fff; } @media (max-width: 980px){ .cols2{ grid-template-columns:1fr; } } /* Mobile */ @media (max-width: 900px){ .faq-panel{ grid-template-columns: 1fr; } } @media (max-width:768px){ .faq-panel summary::after{ width:24px; height:24px; font-size:16px; } } /* ========================================================= FAQ – czystsza, lżejsza wersja (FINAL) ========================================================= */ .faq-panel .faq-list{ margin-top: 10px; } .faq-panel details{ border-top:1px solid var(--line); padding:14px 0; } .faq-panel details:first-of-type{ border-top:none; } .faq-panel summary{ list-style:none; cursor:pointer; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .faq-panel summary::-webkit-details-marker{ display:none; } .faq-panel summary::after{ content:"+"; font-size:18px; font-weight:900; color:var(--accent); transition:transform .2s ease; } .faq-panel details[open] summary::after{ content:"\2013"; /* półpauza */ } /* WAŻNE: tylko odpowiedź, a nie każdy div w details */ .faq-panel .faq-answer{ margin-top:8px; color:var(--muted); line-height:1.6; font-size:14px; } /* ========================================================= Kontakt — delikatne tło sekcji ========================================================= */ #kontakt{ scroll-margin-top:90px; background:linear-gradient(180deg, #fafafa, #fff); } /* CONTACT (lewa karta) tytuł + meta badge */ .contact-title{ display:flex; align-items:center; gap:10px; margin:0 0 8px; } .contact-title-ico{ width:20px; height:20px; flex:0 0 auto; color:var(--accent); } .contact-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; } /* ========================================================= KONTAKT — wspólne style formularza i danych kontaktowych ========================================================= */ .contact-subtitle{ margin:0 0 10px; color:#111; font-size:15px; font-weight:950; } .contact-steps{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .steps{ display:grid; gap:10px; } .step{ padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; } .step b{ display:block; margin:0 0 4px; color:#111; font-size:14px; font-weight:950; letter-spacing:.01em; } .step p{ margin:0; color:var(--muted); font-size:13px; line-height:1.55; } .contact-box{ display:flex; flex-direction:column; } .contact-box .mini{ margin-top:auto; } #kontakt .grid.cols2{ align-items:start; } #kontakt .card{ height:auto; } #kontakt .contact-box p{ margin:8px 0; } #kontakt .contact-line{ margin-top:12px; } #kontakt .separator{ height:1px; margin:14px 0; background:var(--line); } .contact-phone{ margin:14px 0 0; font-size:22px; font-weight:900; } .contact-phone a{ color:var(--accent); text-decoration:none; } .contact-muted{ margin-top:8px; color:var(--muted); font-size:13px; } .contact-mini{ margin-top:12px; } .trust-mini{ margin-top:10px; } .trust-badge{ display:inline-flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid rgba(17,24,39,.10); border-radius:14px; background:rgba(255,122,24,.06); color:#111; font-size:13px; font-weight:800; line-height:1.35; } .quote-form{ margin-top:12px; } .quote-form input, .quote-form textarea{ width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; } .quote-form textarea{ min-height:180px; resize:vertical; } .form-footnote{ margin-top:6px; color:var(--muted); font-size:12px; } .form-error{ display:block; margin-top:6px; color:#b91c1c; font-size:13px; } .to-top{ position:fixed; right:14px; bottom:86px; /* nad sticky-bar */ width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:#fff; box-shadow:0 10px 24px rgba(17,24,39,.08); cursor:pointer; z-index:9999; display:none; } .to-top.is-visible{ display:grid; place-items:center; } @media (max-width: 900px){ .to-top{ bottom:92px; right:12px; } } /* ========================================================= KONTAKT – HERO (bez slidera) ========================================================= */ .page-hero{ padding:18px 0 14px; background: radial-gradient(900px 420px at 15% 0%, rgba(255,122,24,.10), transparent 60%), radial-gradient(900px 520px at 85% 0%, rgba(255,176,0,.08), transparent 60%), linear-gradient(135deg, #0b1220, #111c33); } .page-hero .hero-card{ border-radius: var(--radius); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); box-shadow: var(--shadow); padding:18px; color:#fff; backdrop-filter: blur(8px); } .page-hero .kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,176,0,.92)); color:#111; font-weight:1000; letter-spacing:.06em; text-transform:uppercase; font-size:12px; } .page-hero h1{ margin:12px 0 10px; font-size:34px; line-height:1.05; font-weight:800; } .page-hero .lead{ margin:0; color:rgba(255,255,255,.92); line-height:1.65; font-size:16px; } .page-hero .cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } @media (max-width: 900px){ .page-hero h1{font-size:28px} } .muted { color: var(--muted); } /* ========================================================= HERO – KONTAKT ========================================================= */ .contact-hero { background: #081223; } .page-hero .contact-hero-card{ background: linear-gradient( 90deg, rgba(8,18,35,.84) 0%, rgba(8,18,35,.68) 36%, rgba(8,18,35,.42) 64%, rgba(8,18,35,.14) 100% ), url("/img/hero-kontakt.webp"); background-size:cover; background-position:70% center; } .contact-hero-content{ position:relative; z-index:2; max-width:620px; padding:10px; } .contact-hero h1{ margin:14px 0 12px; font-size:54px; line-height:1.02; font-weight:950; letter-spacing:-0.04em; color:#fff; } .contact-hero .lead{ font-size:18px; line-height:1.75; color:rgba(255,255,255,.92); max-width:58ch; } .contact-hero .cta{ margin-top:22px; } .hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .hero-tags span{ display:inline-flex; align-items:center; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(5px); color:#fff; font-size:13px; font-weight:800; } /* Tablet */ @media (max-width: 980px){ .contact-hero-card{ min-height:380px; background-position:center right; } .contact-hero h1{ font-size:42px; } } /* Mobile */ @media (max-width: 768px){ .page-hero .contact-hero-card{ min-height:auto; padding:18px; background: linear-gradient( 180deg, rgba(8,18,35,.52) 0%, rgba(8,18,35,.64) 36%, rgba(8,18,35,.80) 68%, rgba(8,18,35,.92) 100% ), url("/img/hero-kontakt.webp"); background-size:cover; background-position:70% center; } .contact-hero h1{ font-size:30px; line-height:1.05; } .contact-hero .lead{ font-size:16px; line-height:1.65; } .hero-tags{ gap:8px; } .hero-tags span{ font-size:11px; padding:7px 9px; } } /* ========================================================= OPINIE KLIENTÓW ========================================================= */ #opinie .reviews-section{ gap:16px; } #opinie .reviews-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; } #opinie .reviews-head .btn{ white-space:nowrap; } #opinie .reviews-head h2{ margin-bottom:4px; } #opinie .rating-bar{ display:inline-flex; align-items:center; gap:8px; margin-bottom:0; } #opinie .rating-source{ font-weight:700; color:#1a73e8; } #opinie .stars{ display:inline-block; font-size:14px; color:#f5a623; line-height:1; } #opinie .stars::before{ content:"\2605 \2605 \2605 \2605 \2605"; } #opinie .reviews-grid{ display:grid; gap:16px; align-items:stretch; } @media (min-width:768px){ #opinie .reviews-grid{ grid-template-columns:repeat(3, 1fr); } } #opinie .opinia{ height:100%; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:#fff; padding:18px; box-shadow:0 8px 20px rgba(17,24,39,.04); } #opinie .opinia p{ color:#2b2b2b; line-height:1.65; } #opinie .opinia footer{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:#667085; } #opinie .service-area{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; } #opinie .service-area strong{ color:#111827; margin-right:4px; } #opinie .service-area span{ display:inline-flex; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:700; color:#111827; } @media (max-width:760px){ #opinie .reviews-head .btn{ width:100%; justify-content:center; } } .contact-email { margin-top: -8px; font-weight: 700; } .contact-email a { color: var(--accent, #ff7a18); text-decoration: none; } .contact-email a:hover { text-decoration: underline; } .company-mini { margin: 18px 0; padding: 14px 16px; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; background: #fff; font-size: 13px; color:#667085; line-height: 1.6; } .company-mini strong{ color:#111827; font-size:14px; } /* Wspólna stopka */ footer.site-footer { padding: 30px 0 20px; } footer.site-footer .footer-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 36px !important; } footer.site-footer nav.footer-links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin-top: 8px !important; } footer.site-footer nav.footer-links a, footer.site-footer nav.footer-links span { display: block !important; width: 100% !important; min-height: 36px !important; padding: 7px 0 !important; margin: 0 !important; line-height: 1.4 !important; white-space: normal !important; } footer.site-footer p { margin: 10px 0 0 !important; line-height: 1.7 !important; } footer.site-footer .footer-bottom { display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 18px !important; margin-top: 30px !important; padding-top: 18px !important; border-top: 1px solid var(--line) !important; } @media (max-width: 700px) { footer.site-footer .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; } footer.site-footer .footer-bottom { flex-direction: column !important; justify-content: flex-start !important; gap: 4px !important; } footer.site-footer .wrap { width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } .breadcrumbs { padding: 12px 0 0; padding-block: 0; background: #081223; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; } .breadcrumbs a { color: rgba(255, 255, 255, 0.88); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; } .breadcrumbs [aria-current="page"] { color: #fff; } /* ========================================================= MAPA — STRONA KONTAKTOWA ========================================================= */ .contact-map-embed { overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: #f3f4f6; } .contact-map-embed iframe { display: block; width: 100%; height: 280px; border: 0; } .contact-map-link { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 16px; border-top: 1px solid var(--line); background: #fff; color: var(--text); font-size: 0.92rem; font-weight: 800; text-align: center; text-decoration: none; } .contact-map-link::before { content: "\2197"; margin-right: 8px; color: #b45309; font-size: 1rem; font-weight: 900; } .contact-map-link:hover { background: rgba(255, 138, 0, 0.07); color: var(--text); } .contact-map-link:focus-visible { outline: 3px solid rgba(255, 138, 0, 0.4); outline-offset: -3px; } @media (max-width: 700px) { .contact-map-embed iframe { height: 230px; } } /* Ciemniejszy akcent dla tekstu i ikon na jasnym tle */ .contact-phone a, .contact-email a, .rating-bar .stars, .opinia .stars, .stars::before { color: #b45309; } .contact-phone a:hover, .contact-email a:hover { color: #92400e; text-decoration: underline; text-underline-offset: 3px; } .breadcrumbs .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; min-height: 44px; padding-block: 0.55rem; } .breadcrumbs a, .breadcrumbs span { line-height: 1.25; }