/* ============================================================ SHERGAR — wspólny arkusz stylów (wszystkie podstrony) Tokeny marki przeniesione z palety Kadence (stara strona WP). Sekcje oznaczone [index] / [oferta] dotyczą tylko danych stron. ============================================================ */ :root{ /* === TOKENY MARKI SHERGAR === */ --ink:#354866; /* stalowy granat — kolor logo, ciemne sekcje */ --ink-deep:#1c2733; /* najgłębszy ton — tła, tekst na złocie */ --ink-mid:#25334a; /* pośredni granat */ --slate:#5c6b80; /* tekst drugorzędny na jasnym */ --slate-soft:#8d96a6; /* wyciszone detale */ --paper:#fbfaf8; /* ciepła biel */ --paper-tint:#EDF2F7; /* chłodny jasny pas — rozdziela jasne sekcje */ --signal:#b9863f; /* karmelowe złoto — CTA / akcent */ --gold-soft:#d9a441; /* złoto jaśniejsze — hover na ciemnym */ --gold-deep:#8f6526; /* złoto przyciemnione — drobny tekst na jasnym (WCAG) */ --green:#3f6e4f; /* akcent naturalny — potwierdzenia */ --line:#42577a; /* obrys na granatowych sekcjach */ --line-light:#dde5ee; /* obrys na jasnych sekcjach */ --illu-bg:#42516a; /* tło ilustracji liniowych usług — zmierzone z plików, używane pod object-fit:contain, żeby nie było szwu */ --font-display:'Josefin Sans', sans-serif; --font-body:'Nunito', sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{ scroll-behavior:smooth; max-width:100vw; overflow-x:clip; overscroll-behavior-x:none; } body{ font-family:var(--font-body); font-size:17px; background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; max-width:100vw; overflow-x:clip; overscroll-behavior-x:none; } .site-wrapper{width:100%;position:relative;overflow-x:clip;} /* height:auto jest konieczne — atrybuty width/height w HTML (dobre dla CLS) bez tego trzymają sztywną wysokość, gdy max-width zmniejszy szerokość */ img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;} h1,h2,h3{font-family:var(--font-display);line-height:1.15;letter-spacing:.005em;font-weight:600;} .container{max-width:1180px;margin:0 auto;padding:0 24px;} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} } /* Blokada scrolla przy otwartym menu mobilnym. Klasa na I ; touch-action:none konieczne (iOS ignoruje overflow:hidden dla gestów). Header na fixed, bo overflow:hidden na wyłącza position:sticky. */ html.menu-open, body.menu-open{overflow:hidden;touch-action:none;} body.menu-open header{position:fixed;top:0;left:0;right:0;} /* ---------- NAGŁÓWEK ---------- */ /* ⚠️ backdrop-filter NIE może stać na samym

— tworzy containing block dla position:fixed i menu mobilne liczyłoby top/bottom względem nagłówka, nie viewportu (wykryte w testach). Blur idzie na pseudoelement. */ header{ position:sticky;top:0;z-index:100; border-bottom:1px solid var(--line-light); } header::before{ content:'';position:absolute;inset:0;z-index:-1; background:rgba(251,250,248,.92); backdrop-filter:blur(10px); } .nav-inner{ display:flex;align-items:center;justify-content:space-between; min-height:72px;gap:24px; } .nav-logo{display:flex;align-items:center;gap:12px;} .nav-logo img{height:48px;width:auto;} .nav-logo span{ font-family:var(--font-display);font-weight:700;font-size:1.35rem; letter-spacing:.06em;text-transform:uppercase;color:var(--ink); padding-top:4px; /* Josefin Sans siedzi optycznie wysoko */ } .nav-links{display:flex;align-items:center;gap:26px;font-weight:700;font-size:.98rem;} .nav-links > li > a{padding:8px 2px;position:relative;} .nav-links > li > a::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--signal);transform:scaleX(0);transform-origin:left; transition:transform .22s ease; } .nav-links > li > a:hover::after, .nav-links > li > a:focus-visible::after{transform:scaleX(1);} .nav-cta{ background:var(--signal);color:#fff; padding:11px 22px;border-radius:999px;font-weight:800; transition:background .2s ease, transform .2s ease; white-space:nowrap; } .nav-cta:hover{background:var(--gold-deep);transform:translateY(-1px);} .nav-cta::after{display:none !important;} /* Rozwijana „Oferta" — desktop :hover + :focus-within */ .has-dropdown{position:relative;} .nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;} .nav-dd-toggle .dd-arrow{ width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;flex:none; } .nav-dropdown{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px); min-width:270px;background:var(--ink);border-radius:14px; box-shadow:0 18px 40px rgba(28,39,51,.28); padding:10px;opacity:0;visibility:hidden;transition:opacity .18s ease, transform .18s ease; } /* „mostek" — żeby ruch myszy między linkiem a kartą nie zamykał menu */ .has-dropdown::before{ content:'';position:absolute;left:-10px;right:-10px;top:100%;height:16px; } .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px); } .has-dropdown:hover .dd-arrow, .has-dropdown:focus-within .dd-arrow{transform:rotate(225deg) translateY(-2px);} .nav-dropdown a{ display:block;padding:10px 14px;border-radius:9px;color:var(--paper); font-weight:700;font-size:.93rem; } .nav-dropdown a:hover,.nav-dropdown a:focus-visible{background:var(--ink-mid);color:var(--gold-soft);} /* Hamburger */ .burger{ display:none;flex-direction:column;gap:5px;background:none;border:0; cursor:pointer;padding:10px; } .burger span{width:26px;height:3px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .25s ease;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* ---------- HERO [index] ---------- */ .hero{ position:relative;min-height:92vh;display:flex;align-items:center; color:var(--paper);overflow:hidden;background:var(--ink-deep); } .hero-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; } .hero::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg, rgba(28,39,51,.82) 0%, rgba(28,39,51,.55) 45%, rgba(28,39,51,.18) 100%); } .hero-content{position:relative;z-index:2;max-width:640px;padding:120px 0 90px;} .hero-pill{ display:inline-flex;align-items:center;gap:8px; background:rgba(251,250,248,.12);border:1px solid rgba(251,250,248,.3); padding:7px 16px;border-radius:999px;font-size:.88rem;font-weight:700; letter-spacing:.02em;backdrop-filter:blur(4px); } .hero h1{font-size:clamp(2.1rem, 5vw, 3.4rem);margin:22px 0 18px;font-weight:700;} .hero-lead{font-size:1.12rem;max-width:540px;color:#e8ebef;} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 30px;border-radius:999px;font-weight:800;font-size:1rem; font-family:var(--font-body);cursor:pointer;border:0; transition:background .2s ease, transform .2s ease, border-color .2s ease; } .btn-gold{background:var(--signal);color:#fff;} .btn-gold:hover{background:var(--gold-soft);color:var(--ink-deep);transform:translateY(-2px);} .btn-ghost{background:transparent;color:var(--paper);border:2px solid rgba(251,250,248,.55);} .btn-ghost:hover{border-color:var(--paper);background:rgba(251,250,248,.1);transform:translateY(-2px);} .btn-ink{background:var(--ink);color:var(--paper);} .btn-ink:hover{background:var(--ink-mid);transform:translateY(-2px);} /* ---------- SEKCJE — wspólne ---------- */ section{padding:88px 0;} .section-tag{ display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px; } .section-title{font-size:clamp(1.7rem, 3.4vw, 2.5rem);margin-bottom:18px;} .section-lead{max-width:640px;color:var(--slate);font-size:1.05rem;} .on-dark .section-tag{color:var(--gold-soft);} .on-dark .section-lead{color:#c3cbd6;} /* ---------- O MAGDZIE [index] ---------- */ /* overflow:hidden = krawędź sekcji ucina zdjęcie instruktorki. Postać wchodzi nogami pod następną sekcję, więc kolor sekcji poniżej „odcina" ją naturalnie, zamiast zostawiać figurę wiszącą w powietrzu. */ .about{background:var(--paper);overflow:hidden;} .about-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:64px;align-items:center;} /* Zdjęcie instruktorki to WYCINKA z przezroczystym tłem (alpha 0 na krawędziach). Dlatego żadnego border-radius ani box-shadow — cień rysowałby się wokół niewidzialnego prostokąta. Cień musi iść po sylwetce (drop-shadow), a pod postacią stoi miękka plama w kolorze marki. */ /* Zejście postaci za krawędź sekcji — NA KAŻDEJ szerokości. Na mobile zdjęcie stoi POD tekstem (order:2 w media query niżej), więc ujemny margines niczego nie przykrywa, a nogi Magdy i konia „skleją się" z kolorem następnej sekcji tak samo jak na desktopie. --secpad musi się zgadzać z padding-bottom sekcji (88px, mobile 64px) — bez odjęcia paddingu zdjęcie zatrzymałoby się nad krawędzią. */ .about{--secpad:88px;} .about-photo{ --bleed:64px; position:relative; display:flex;align-items:flex-end;justify-content:center; align-self:end; margin-bottom:calc(-1*var(--secpad) - var(--bleed)); } .about-photo::before{ /* okrągła plama-tło za postacią */ content:'';position:absolute;z-index:0; left:50%;top:4%;transform:translateX(-50%); width:92%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(185,134,63,.26) 0%, rgba(185,134,63,.13) 52%, rgba(185,134,63,0) 72%); } /* Bez elipsy „gruntu" — postać nie stoi na podłożu, tylko schodzi za krawędź. */ .about-photo img{ position:relative;z-index:1; filter:drop-shadow(0 14px 20px rgba(28,39,51,.16)); } .about-quote{ margin-top:22px;padding-left:18px;border-left:3px solid var(--signal); font-style:italic;color:var(--slate); } .about-name{margin-top:18px;font-weight:800;color:var(--ink);} .about-name small{display:block;font-weight:400;color:var(--slate);} /* ---------- USŁUGI [index] ---------- */ .services{background:var(--paper-tint);} .services-grid{ display:grid;grid-template-columns:repeat(3, 1fr);gap:26px;margin-top:44px; } .svc-card{ background:#fff;border-radius:16px;overflow:hidden; border:1px solid var(--line-light); box-shadow:0 10px 26px rgba(28,39,51,.07); display:flex;flex-direction:column; transition:transform .22s ease, box-shadow .22s ease; } .svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(28,39,51,.14);} /* Zdjęcia usług to ILUSTRACJE LINIOWE 1080×1350 (proporcja 4:5) na tle #42516a, nie fotografie. Dlatego kwadratowy kafelek + object-fit:contain — `cover` obcinałby kompozycję (koniowi znikały nogi i rekwizyty pod linią ziemi). */ .svc-photo{aspect-ratio:1/1;overflow:hidden;background:var(--illu-bg);} .svc-photo img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .4s ease;} .svc-card:hover .svc-photo img{transform:scale(1.05);} .svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;} .svc-body h3{font-size:1.22rem;margin-bottom:10px;} .svc-body p{color:var(--slate);font-size:.96rem;flex:1;} .svc-link{ margin-top:16px;font-weight:800;color:var(--gold-deep);font-size:.95rem; display:inline-flex;align-items:center;gap:6px; } .svc-link::after{content:'→';transition:transform .2s ease;} .svc-card:hover .svc-link::after{transform:translateX(4px);} .services-soon{ margin-top:36px;text-align:center;color:var(--slate);font-size:.97rem; background:#fff;border:1px dashed var(--line-light);border-radius:12px; padding:16px 22px; } .services-soon strong{color:var(--gold-deep);} /* ---------- FILOZOFIA [index] ---------- */ .philosophy{ position:relative;color:var(--paper);background:var(--ink-deep);overflow:hidden; } .philosophy-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; opacity:.35; } .philosophy::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, rgba(28,39,51,.55), rgba(28,39,51,.82)); } .philosophy .container{position:relative;z-index:2;} .philosophy-grid{display:grid;grid-template-columns:1fr minmax(0,360px);gap:64px;align-items:center;} .philosophy-eye{border-radius:50%;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4);border:5px solid rgba(251,250,248,.15);} .philosophy p{color:#dfe4ea;max-width:600px;margin-bottom:16px;} /* ---------- WIDEO [index] ---------- */ .video-section{background:var(--paper);} .video-frame{ position:relative;max-width:880px;margin:44px auto 0;aspect-ratio:16/9; border-radius:18px;overflow:hidden;background:var(--ink-deep); box-shadow:0 24px 48px rgba(28,39,51,.2); } .video-frame iframe{width:100%;height:100%;border:0;display:block;} .video-placeholder{ position:absolute;inset:0;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; background:linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%); color:var(--paper);cursor:pointer;border:0;font-family:var(--font-body); } .video-placeholder .play-ring{ width:78px;height:78px;border-radius:50%;background:var(--signal); display:flex;align-items:center;justify-content:center; transition:transform .2s ease, background .2s ease; } .video-placeholder:hover .play-ring{transform:scale(1.08);background:var(--gold-soft);} .play-ring svg{width:26px;height:26px;fill:#fff;margin-left:4px;} .video-placeholder strong{font-size:1.05rem;} .video-note{font-size:.82rem;color:var(--slate-soft);max-width:420px;text-align:center;} /* ---------- DOJAZD / MAPA [index] ---------- */ .area{background:var(--paper-tint);} .area-grid{display:grid;grid-template-columns:1fr minmax(0,520px);gap:56px;align-items:start;margin-top:12px;} .area-address{ background:#fff;border:1px solid var(--line-light);border-radius:14px; padding:22px 24px;margin-top:24px; } .area-address strong{display:block;font-size:1.05rem;margin-bottom:6px;} .area-address p{color:var(--slate);font-size:.97rem;} .area-address a{color:var(--gold-deep);font-weight:800;} .area-map{ position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden; background:var(--ink);box-shadow:0 18px 40px rgba(28,39,51,.16); } .area-map iframe{width:100%;height:100%;border:0;display:block;} .area-map-placeholder{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;color:var(--paper); background: radial-gradient(circle at 62% 38%, rgba(185,134,63,.28), transparent 42%), linear-gradient(150deg, var(--ink) 0%, var(--ink-deep) 100%); padding:24px;text-align:center; } .area-map-pin{width:46px;height:46px;fill:var(--gold-soft);} .area-map-btn{ background:var(--signal);color:#fff;border:0;border-radius:999px; padding:12px 26px;font-weight:800;font-size:.97rem;cursor:pointer; font-family:var(--font-body);transition:background .2s ease; } .area-map-btn:hover{background:var(--gold-soft);color:var(--ink-deep);} .area-map-note{font-size:.78rem;color:var(--slate-soft);max-width:340px;} /* ---------- KONTAKT [index] ---------- */ .contact{background:var(--ink);color:var(--paper);} .contact-grid{display:grid;grid-template-columns:1fr minmax(0,520px);gap:64px;align-items:start;} .contact-info h2{color:var(--paper);} .contact-phone{ display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display); font-size:1.9rem;font-weight:700;color:var(--gold-soft);margin:20px 0 8px; } .contact-mail{color:#c3cbd6;font-weight:700;} .contact-mail:hover{color:var(--gold-soft);} .contact-hint{margin-top:22px;color:#c3cbd6;font-size:.97rem;max-width:420px;} .contact-form{ background:#fff;border-radius:18px;padding:32px;color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.25); } .contact-form h3{margin-bottom:18px;font-size:1.3rem;} .form-field{margin-bottom:16px;} .form-field label{display:block;font-weight:800;font-size:.9rem;margin-bottom:6px;} .form-field input,.form-field select,.form-field textarea{ width:100%;padding:12px 14px;border:1.5px solid var(--line-light);border-radius:10px; font-family:var(--font-body);font-size:.98rem;color:var(--ink);background:var(--paper); transition:border-color .2s ease; } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none;border-color:var(--signal); } .form-field textarea{min-height:110px;resize:vertical;} .form-rodo{font-size:.78rem;color:var(--slate);margin-top:12px;line-height:1.5;} .form-rodo a{color:var(--gold-deep);text-decoration:underline;} .form-status{margin-top:12px;font-weight:700;font-size:.95rem;min-height:1.4em;} .form-status.ok{color:var(--green);} .form-status.err{color:#a8392c;} /* ---------- STOPKA ---------- */ footer{background:var(--ink-deep);color:var(--slate-soft);padding:56px 0 32px;font-size:.93rem;} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:36px;} /* Stopka używa logo-light.svg (biały koń, przezroczyste tło) — bez filtrów. ⚠️ NIE stosować brightness(0) invert(1) na pełnym logo: ma granatowy kwadrat w tle i filtr zamieniał całość w jednolity biały kwadrat. */ .footer-brand img{height:56px;margin-bottom:14px;opacity:.92;} .footer-col h4{ color:var(--paper);font-family:var(--font-display);font-size:1rem; letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px; } .footer-col a{display:block;padding:4px 0;transition:color .2s ease;} .footer-col a:hover{color:var(--gold-soft);} .footer-bottom{ border-top:1px solid rgba(141,150,166,.2);padding-top:22px; display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem; } /* ---------- MODAL (szybki kontakt) ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(28,39,51,.6);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:20px; opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:200; } .modal-overlay.open{opacity:1;visibility:visible;} .modal-box{ background:#fff;border-radius:18px;padding:34px;max-width:440px;width:100%; position:relative;transform:translateY(14px);transition:transform .25s ease; max-height:90vh;overflow-y:auto; } .modal-overlay.open .modal-box{transform:translateY(0);} .modal-close{ position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer; font-size:1.5rem;line-height:1;color:var(--slate);padding:6px; } .modal-close:hover{color:var(--ink);} .modal-box h3{margin-bottom:8px;font-size:1.35rem;} .modal-box .modal-sub{color:var(--slate);font-size:.95rem;margin-bottom:18px;} /* ---------- PŁYWAJĄCY TELEFON ---------- */ .sticky-phone{position:fixed;right:22px;bottom:22px;z-index:150;} .sticky-phone-btn{ width:60px;height:60px;border-radius:50%;background:var(--signal); display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(28,39,51,.3); transition:transform .2s ease, background .2s ease;border:0;cursor:pointer; } .sticky-phone-btn:hover{transform:scale(1.07);background:var(--gold-soft);} .sticky-phone-btn svg{width:26px;height:26px;fill:#fff;} .phone-tooltip{ position:absolute;right:70px;bottom:8px;background:var(--ink-deep);color:var(--paper); padding:10px 18px;border-radius:10px;font-weight:800;white-space:nowrap; opacity:0;visibility:hidden;transform:translateX(6px); transition:opacity .2s ease, transform .2s ease; } .phone-tooltip.show{opacity:1;visibility:visible;transform:translateX(0);} /* ============================================================ [oferta] PODSTRONY OFERTOWE ============================================================ */ /* ---------- HERO PODSTRONY ---------- */ .offer-hero{ position:relative;background:var(--ink-deep);color:var(--paper); overflow:hidden;padding:0; } .offer-hero-grid{ display:grid;grid-template-columns:1fr minmax(0,440px);gap:56px;align-items:center; padding:76px 0 84px; } .offer-hero-photo{ position:relative;border-radius:18px;overflow:hidden; box-shadow:0 26px 56px rgba(0,0,0,.4); border:1px solid rgba(251,250,248,.14); background:var(--illu-bg); } /* contain, nie cover — ilustracja ma proporcję 4:5 i całą kompozycję trzeba pokazać (koń, rekwizyty, linia ziemi) */ .offer-hero-photo img{width:100%;height:100%;object-fit:contain;aspect-ratio:4/5;} .breadcrumb{font-size:.85rem;color:#9fb0c4;margin-bottom:16px;} .breadcrumb a{font-weight:700;} .breadcrumb a:hover{color:var(--gold-soft);} .breadcrumb span{margin:0 8px;opacity:.5;} .offer-hero h1{font-size:clamp(1.9rem, 3.8vw, 2.9rem);margin-bottom:16px;} .offer-hero-lead{font-size:1.1rem;color:#dfe4ea;max-width:560px;} .offer-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;} /* ---------- TREŚĆ GŁÓWNA ---------- */ .offer-intro{background:var(--paper);} .offer-prose{max-width:760px;} .offer-prose p{margin-bottom:18px;color:var(--slate);font-size:1.03rem;} .offer-prose p:last-child{margin-bottom:0;} /* Zastrzeżenie prawne („to nie jest hipoterapia / psychoterapia"). Wyróżnione celowo — to informacja chroniąca prowadzącą. */ .notice{ margin-top:28px;background:#fff;border:1px solid var(--line-light); border-left:4px solid var(--signal);border-radius:12px; padding:20px 24px;max-width:760px; box-shadow:0 8px 20px rgba(28,39,51,.06); } .notice strong{display:block;margin-bottom:6px;color:var(--ink);} .notice p{color:var(--slate);font-size:.98rem;margin:0;} /* ---------- DLA KOGO ---------- */ .audience{background:var(--paper-tint);} .audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;} .audience-card{ background:#fff;border:1px solid var(--line-light);border-radius:14px; padding:26px 24px;box-shadow:0 8px 22px rgba(28,39,51,.06); } .audience-card h3{font-size:1.12rem;margin-bottom:10px;color:var(--ink);} .audience-card p{color:var(--slate);font-size:.96rem;} /* ---------- JAK WYGLĄDA (kroki) ---------- */ .steps{background:var(--paper);} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:38px;} .step{position:relative;padding-top:14px;} .step-num{ width:42px;height:42px;border-radius:50%;background:var(--signal);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:14px; } .step h3{font-size:1.05rem;margin-bottom:8px;} .step p{color:var(--slate);font-size:.94rem;} /* ---------- FAQ ---------- */ .faq{background:var(--paper-tint);} .faq-grid{display:grid;grid-template-columns:1fr minmax(0,340px);gap:56px;align-items:start;margin-top:38px;} .faq-list{display:flex;flex-direction:column;gap:12px;} .faq-item{ background:#fff;border:1px solid var(--line-light);border-radius:12px; overflow:hidden;transition:box-shadow .2s ease; } .faq-item[open]{box-shadow:0 10px 26px rgba(28,39,51,.08);} .faq-item summary{ padding:18px 22px;font-weight:800;cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:16px; font-size:1rem;color:var(--ink); } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:'';flex:none;width:10px;height:10px; border-right:2px solid var(--signal);border-bottom:2px solid var(--signal); transform:rotate(45deg) translateY(-3px);transition:transform .2s ease; } .faq-item[open] summary::after{transform:rotate(225deg) translateY(-3px);} .faq-item summary:hover{color:var(--gold-deep);} .faq-answer{padding:0 22px 20px;color:var(--slate);font-size:.98rem;} .faq-aside{position:sticky;top:96px;} /* Karta kontaktowa zamiast zdjęcia — mamy tylko jedno zdjęcie na usługę i jest już użyte w hero; powtórka wyglądałaby na brak materiału. */ .faq-card{ background:var(--ink);color:var(--paper);border-radius:16px;padding:28px 26px; box-shadow:0 16px 36px rgba(28,39,51,.18); } .faq-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--paper);} .faq-card p{color:#c3cbd6;font-size:.95rem;margin-bottom:18px;} .faq-card .faq-phone{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--gold-soft); } .faq-card .faq-phone:hover{color:#fff;} .faq-card .btn{margin-top:18px;width:100%;} /* ---------- CTA KOŃCOWE ---------- */ .offer-cta{background:var(--ink);color:var(--paper);text-align:center;} .offer-cta h2{color:var(--paper);margin-bottom:14px;} .offer-cta p{color:#c3cbd6;max-width:600px;margin:0 auto 28px;} .offer-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;} /* ---------- LINKI DO POZOSTAŁYCH USŁUG ---------- */ .related{background:var(--paper);} .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px;} .related-card{ display:block;background:var(--paper-tint);border:1px solid var(--line-light); border-radius:12px;padding:18px 20px;transition:transform .2s ease, border-color .2s ease; } .related-card:hover{transform:translateY(-4px);border-color:var(--signal);} .related-card strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.03rem;} .related-card span{font-size:.88rem;color:var(--slate);} @media (max-width:1020px){ .offer-hero-grid{grid-template-columns:1fr;gap:38px;padding:56px 0 64px;} .offer-hero-photo{max-width:400px;} .audience-grid{grid-template-columns:1fr;} .steps-grid{grid-template-columns:repeat(2,1fr);} .faq-grid{grid-template-columns:1fr;gap:36px;} .faq-aside{position:static;max-width:400px;} .faq-aside{order:-1;} /* na wąskich ekranach zdjęcie NAD listą pytań */ } @media (max-width:700px){ .steps-grid{grid-template-columns:1fr;} } /* ============================================================ [polityka] + [404] ============================================================ */ .legal{background:var(--paper);padding-top:56px;} .breadcrumb--light{color:var(--slate);} .breadcrumb--light a{color:var(--gold-deep);} .legal-date{color:var(--slate-soft);font-size:.9rem;margin-bottom:36px;} .legal-body{max-width:780px;} .legal-body h2{ font-size:1.25rem;margin:36px 0 12px;color:var(--ink); padding-bottom:8px;border-bottom:2px solid var(--line-light); } .legal-body h2:first-child{margin-top:0;} .legal-body p{color:var(--slate);margin-bottom:14px;} .legal-body a{color:var(--gold-deep);text-decoration:underline;} .legal-body strong{color:var(--ink);} .legal-list{margin:0 0 16px 0;} .legal-list li{ color:var(--slate);margin-bottom:8px;padding-left:22px;position:relative; } .legal-list li::before{ content:'';position:absolute;left:4px;top:11px; width:7px;height:7px;border-radius:50%;background:var(--signal); } .legal-highlight{ background:#fff;border:1px solid var(--line-light);border-left:4px solid var(--green); border-radius:12px;padding:18px 22px; } .err-page{background:var(--paper);text-align:center;padding-top:72px;} .err-code{ display:block;font-family:var(--font-display);font-weight:700; font-size:clamp(4rem, 14vw, 8rem);line-height:1;color:var(--signal);opacity:.25; } .err-page .section-title{margin-top:-8px;} .err-page .section-lead{margin:0 auto;} .err-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:30px 0 8px;} .err-grid{text-align:left;max-width:900px;margin-left:auto;margin-right:auto;} /* ---------- ANIMACJE WEJŚCIA (data-anim) ---------- 3 warstwy zabezpieczeń przed pustą sekcją (wzorzec z PROSM): 1) ukrycie tylko po .anim-ready (dodaje JS), 2) bezpiecznik czasowy w JS, 3) zdjęcie .anim-ready po czasie animacji. NIE używać animation-fill-mode:backwards. */ @media (prefers-reduced-motion: no-preference){ .anim-ready{opacity:0;} .reveal-in{animation:revealUp .7s ease forwards;} @keyframes revealUp{ from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:translateY(0);} } } /* ---------- RESPONSYWNOŚĆ ---------- */ @media (max-width:1020px){ .services-grid{grid-template-columns:repeat(2,1fr);} .about-grid,.philosophy-grid,.contact-grid,.area-grid{grid-template-columns:1fr;gap:44px;} .philosophy-grid{text-align:left;} .philosophy-eye{max-width:300px;} /* po zwinięciu do jednej kolumny zdjęcia nie mogą rozjechać się na całą szerokość */ /* jedna kolumna: TEKST na górze, zdjęcie pod nim (order) — dzięki temu ujemny margines zdjęcia ucina nogi krawędzią sekcji także na mobile */ .about-photo{max-width:420px;order:2;justify-self:center;} } @media (max-width:860px){ .burger{display:flex;} .nav-links{ position:fixed;inset:0;top:72px;background:var(--paper); flex-direction:column;align-items:flex-start;gap:4px; padding:26px 28px;font-size:1.05rem; transform:translateX(100%);visibility:hidden; transition:transform .28s ease, visibility .28s ease; overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain; z-index:99; } .nav-links.open{transform:translateX(0);visibility:visible;} .nav-links > li{width:100%;} .nav-links > li > a{display:block;padding:12px 0;} .nav-cta{display:inline-block;margin-top:14px;text-align:center;} /* Mobile: pod-linki „Oferty" widoczne od razu jako wcięta lista */ .has-dropdown::before{display:none;} .dd-arrow{display:none;} .nav-dropdown{ position:static;transform:none;opacity:1;visibility:visible; background:transparent;box-shadow:none;padding:0 0 4px 16px;min-width:0; border-left:3px solid var(--signal);border-radius:0;margin:2px 0 6px 4px; } .nav-dropdown a{color:var(--ink);padding:9px 10px;font-size:.98rem;} .nav-dropdown a:hover{background:var(--paper-tint);color:var(--gold-deep);} } @media (max-width:700px){ section{padding:64px 0;} /* HERO mobile: zdjęcie to zbliżenie dwojga oczu (koń + Magda) w środkowym pasie kadru. Tekst idzie NAD nie (góra), gradient przyciemnia tylko górę — dzięki temu oczy zostają widoczne, a przyciski mieszczą się w 1. ekranie. ⚠️ Android często renderuje czcionki 120–130% (ustawienia systemowe) — dlatego KOLEJNOŚĆ na mobile: pigułka → H1 → PRZYCISKI → opis. CTA jest widoczne nawet przy powiększonym tekście; opis może spaść pod zgięcie. */ /* Rozmiary czcionek = jak w wersji bazowej (decyzja użytkownika) — miejsce odzyskujemy mniejszym paddingiem u góry i ciaśniejszymi marginesami, nie zmniejszaniem tekstu. */ .hero{min-height:92svh;align-items:flex-start;} .hero-content{padding:40px 0 40px;display:flex;flex-direction:column;align-items:flex-start;} .hero-pill{order:0;} .hero h1{order:1;margin:16px 0 16px;} .hero-actions{order:2;margin-top:4px;} .hero-lead{order:3;margin-top:22px;} .hero::after{ background:linear-gradient(180deg, rgba(28,39,51,.92) 0%, rgba(28,39,51,.72) 38%, rgba(28,39,51,.22) 62%, rgba(28,39,51,0) 78%, rgba(28,39,51,.30) 100%); /* delikatna winieta u dołu — przejście w sekcję */ } .services-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;gap:30px;} .contact-form{padding:26px 20px;} .sticky-phone{right:14px;bottom:14px;} .about-photo{max-width:380px;} .about{--secpad:64px;} /* padding sekcji na mobile to 64px — bleed musi to wiedzieć */ }