/* ============================================================ NAUKOWE PLACE ZABAW - v4 · BLUEPRINT NA PAPIERZE Budowa, typografia i animacje z kierunku A (Blueprint), przełożone z ciemnego ekranu na JASNE tło (papier techniczny). Tokeny z :root przechodzą 1:1 do theme.json (WP FSE). ============================================================ */ :root{ /* --- Kolory marki (oficjalna paleta) --- */ --green:#68b42d; /* GŁÓWNY - grafika, obrysy, duże napisy */ --green-deep:#3f7318; /* zieleń do TEKSTU na jasnym tle - zdaje WCAG AA także na tłach podbarwionych (5,1:1 na --bg-2) */ --green-vivid:#6ece24; --green-light:#9fe34a; /* tylko na ciemnym (hero na wideo) */ --green-pale:#eaf6e0; --forest:#14301a; --fuchsia:#dd19b2; /* uzupełniający - CTA, akcenty */ --fuchsia-deep:#c80e92; /* fuksja do TEKSTU na jasnym tle */ --fuchsia-pale:#fdeaf8; --plum:#910f66; /* karta „Pobierz katalog" na każdej stronie (Marta 2026-09-29, makieta V2) - też .pdp-catalog w styles-produkt.css */ --katalog-karta:linear-gradient(125deg,#c41a9c 0%,#9c1a78 38%,#7a1560 70%,#520f38 100%); --navy:#0f123e; /* granat - nagłówki */ --ink:#353738; --paper:#F2F6F4; /* --- Substrat JASNY (odpowiednik --bg-0/--bg-1 z kierunku A) --- */ --bg-0:#ffffff; --bg-1:#f7fbf4; --bg-2:#eef5e9; --surface:#ffffff; /* --- Plaster miodu (kształt sześciokąta z logo NPZ) - zamiast kratki --- */ /* WARIANT B (wybór Marty): sześciokąt jak w logo - z OTWARTYM bokiem górno-prawym, bez łuków (wariant C z łukami okazał się za mocny). Sześciokąty rozsunięte do 86% rastra - w zwartym plastrze sąsiad domykałby przerwę. Warianty do porównania: explore/plaster-warianty.html */ --honeycomb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%2368b42d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25.8,-14.91 25.8,14.91 0,29.81 -25.8,14.91 -25.8,-14.91 0,-29.81'/%3E%3Cpath d='M85.8,-14.91 85.8,14.91 60,29.81 34.2,14.91 34.2,-14.91 60,-29.81'/%3E%3Cpath d='M55.8,37.09 55.8,66.91 30,81.81 4.2,66.91 4.2,37.09 30,22.19'/%3E%3Cpath d='M25.8,89.09 25.8,118.91 0,133.81 -25.8,118.91 -25.8,89.09 0,74.19'/%3E%3Cpath d='M85.8,89.09 85.8,118.91 60,133.81 34.2,118.91 34.2,89.09 60,74.19'/%3E%3C/g%3E%3C/svg%3E"); --honeycomb-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%239fe34a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25.8,-14.91 25.8,14.91 0,29.81 -25.8,14.91 -25.8,-14.91 0,-29.81'/%3E%3Cpath d='M85.8,-14.91 85.8,14.91 60,29.81 34.2,14.91 34.2,-14.91 60,-29.81'/%3E%3Cpath d='M55.8,37.09 55.8,66.91 30,81.81 4.2,66.91 4.2,37.09 30,22.19'/%3E%3Cpath d='M25.8,89.09 25.8,118.91 0,133.81 -25.8,118.91 -25.8,89.09 0,74.19'/%3E%3Cpath d='M85.8,89.09 85.8,118.91 60,133.81 34.2,118.91 34.2,89.09 60,74.19'/%3E%3C/g%3E%3C/svg%3E"); /* maska kaskady dla plastra w hero (schodki w dół i w prawo) */ --kaskada:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon filter='url(%23b)' fill='%23000' points='0,15 16,15 16,30 32,30 32,41 46,41 46,52 56,52 56,61 64,61 64,84 0,84'/%3E%3C/svg%3E"); /* --- 9 TAGÓW TEMATYCZNYCH z matrycy 2026.02 --- Paleta dopasowana do marki: blade tło + ciemny tekst, wszystkie zdają WCAG AA (najniższy 5,04:1). Trzy wpadają wprost w kolory NPZ: eko=zieleń, nauki=fuksja, kosmos=granat, personalizowane=śliwka. ZMIANA KOLORU TAGU = zmiana tutaj i nigdzie indziej. Porównanie z obecną paletą: explore/tagi-kolory.html */ /* Tła 1:1 z palety Marty (2026-07-22). Tekst PRZYCIEMNIONY w tym samym odcieniu, bo w oryginale 6 z 9 nie zdawało progu 4,5:1 - identyczność koloru zachowana, zmieniona tylko głębia napisu. */ /* Odcienie rozsunięte na kole barw, bo trzy błękity i dwie zielenie zlewały się przy pigułce 10 px. Kolejność hue: pomarańcz → zieleń → morski → błękit → lazur → indygo → fiolet → karmin, plus neutralna szarość dla iluzji. */ --tag-sensoryczne-bg:#FCE8D6; --tag-sensoryczne-tx:#9C4F0E; /* pomarańcz 30° */ --tag-ekologiczne-bg:#E4F2D8; --tag-ekologiczne-tx:#3D6A20; /* zieleń 95° */ --tag-terapeutyczne-bg:#D3F0E4; --tag-terapeutyczne-tx:#0F6552; /* morski 165° */ --tag-religijne-bg:#D6EFF6; --tag-religijne-tx:#0F6076; /* lazur 193° */ --tag-nauki-bg:#D6E6F9; --tag-nauki-tx:#12508F; /* błękit 212° */ --tag-kosmiczne-bg:#DCDCF5; --tag-kosmiczne-tx:#2E3193; /* indygo 240° */ --tag-muzyczne-bg:#EADAF6; --tag-muzyczne-tx:#6C34A8; /* fiolet 276° */ --tag-personalizowane-bg:#FBE0E8;--tag-personalizowane-tx:#A81450; /* karmin 340° */ --tag-iluzja-bg:#E6E4EC; --tag-iluzja-tx:#524C5F; /* neutralna */ --hair:rgba(15,18,62,.12); --hair-green:rgba(104,180,45,.38); /* --- Tekst --- */ --text:#353738; --text-soft:rgba(53,55,56,.74); --text-mute:rgba(53,55,56,.72); /* .55 dawało 3,16:1 - za mało dla etykiet 9-11px */ --head:#0f123e; /* --- Cienie (zamiennik neonowej poświaty z kierunku A) --- */ --sh-sm:0 2px 10px rgba(15,18,62,.05); --sh-md:0 14px 34px rgba(15,18,62,.09); --sh-green:0 20px 44px rgba(104,180,45,.24); --sh-fuchsia:0 18px 40px rgba(221,25,178,.28); /* --- Typografia marki --- */ --mono:'Oswald','Oswald zapas',sans-serif; --body:'Montserrat','Montserrat zapas',sans-serif; --btn:'Nunito','Nunito zapas',sans-serif; --hand:'Caveat',cursive; /* --- Ruch --- */ --ease:cubic-bezier(.2,.7,.2,1); --t:.28s var(--ease); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:120px} body{ font-family:var(--body); background:var(--bg-0); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--fuchsia);color:#fff} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .mono{font-family:var(--mono);font-weight:300;letter-spacing:.28em;text-transform:uppercase} /* ============================================================ 1 · HEADER (sticky, logo zmniejsza się przy scrollu) Nad hero: przezroczysty, biały tekst na wideo. Po scrollu: papier + granatowy tekst. ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:80; transition:background .35s,box-shadow .35s,border-color .35s; background:linear-gradient(180deg, rgba(6,10,20,.62) 0%, rgba(6,10,20,.18) 62%, rgba(6,10,20,0) 100%); border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); box-shadow:0 10px 34px rgba(15,18,62,.10); } /* --- górny pasek: linki po lewej, O NAS / KONTAKT + język po prawej --- */ .topbar{border-bottom:1px solid rgba(255,255,255,.14);transition:border-color .35s} .scrolled .topbar{border-bottom-color:var(--hair)} .topbar__inner{max-width:1680px;margin:0 auto;display:flex;justify-content:space-between;align-items:center; gap:20px;padding:8px clamp(20px,5vw,64px)} .topbar__links,.topbar__right{display:flex;align-items:center;gap:26px;flex-wrap:wrap} /* --- sklep w pasku: strzałka „wychodzisz z serwisu" --- */ .topbar__sklep{display:inline-flex;align-items:center;gap:7px} .topbar__sklep svg{width:10px;height:10px;opacity:.6;flex:none} /* --- telefon i mail w pasku (2026-07-24) --- ŚWIADOMIE bez wersalików i bez trackingu .24em, którym chodzi reszta paska. Powód jest mierzalny: „+48 881 215 360" i „biuro@npz.edu.pl" w wersalikach z takim rozstrzeleniem zajmują ~270 px i pasek zawija się już przy 1280. Poza tym to dane do przeczytania i kliknięcia, a nie etykieta nawigacji. */ .topbar__kontakt{display:inline-flex;align-items:center;gap:8px; text-transform:none !important;letter-spacing:.02em !important;font-size:11.5px !important; font-weight:400 !important} .topbar__kontakt svg{width:13px;height:13px;opacity:.72;flex:none} .topbar__kontakt:hover svg{opacity:1} .topbar__links a,.topbar__right a{ font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase; color:rgba(255,255,255,.72);transition:color .25s} .scrolled .topbar__links a,.scrolled .topbar__right a{color:var(--text-mute)} .topbar__links a:hover,.topbar__right a:hover{color:var(--green-light)} .scrolled .topbar__links a:hover,.scrolled .topbar__right a:hover{color:var(--green-deep)} .topbar__lang{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em; padding-left:26px;border-left:1px solid rgba(255,255,255,.18);transition:border-color .35s} .scrolled .topbar__lang{border-left-color:var(--hair)} .topbar__lang a{color:rgba(255,255,255,.6)} .scrolled .topbar__lang a{color:var(--text-mute)} .topbar__lang a.is-active{color:var(--fuchsia)} .scrolled .topbar__lang a.is-active{color:var(--fuchsia-deep)} .topbar__lang span{color:rgba(255,255,255,.3)} .scrolled .topbar__lang span{color:var(--hair)} /* --- pasek główny --- */ .mainbar__inner{max-width:1680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:15px clamp(20px,5vw,64px);transition:padding .35s} .scrolled .mainbar__inner{padding-top:9px;padding-bottom:9px} .brand{display:flex;align-items:center;flex:none;position:relative} .brand__logo{height:64px;width:auto;transition:height .35s,opacity .3s} .scrolled .brand__logo{height:52px} /* logo z nazwą „NAUKOWE PLACE ZABAW” (wersja przejściowa, Ela/Marta 2026-10-07): na telefonie mniejsze */ @media (max-width:720px){.brand__logo{height:52px}.scrolled .brand__logo{height:44px}} .brand__logo--dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0} .scrolled .brand__logo--light{opacity:0} .scrolled .brand__logo--dark{opacity:1} .mainnav{display:flex;align-items:center;gap:28px} .mainnav a:not(.mainnav__cta){ font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.9);position:relative;padding:5px 0;transition:color .25s} .scrolled .mainnav a:not(.mainnav__cta){color:var(--head)} .mainnav a:not(.mainnav__cta)::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px; background:var(--green);transition:width .3s var(--ease)} .mainnav a:not(.mainnav__cta):hover::after{width:100%} .mainnav a:not(.mainnav__cta):hover{color:#fff} .scrolled .mainnav a:not(.mainnav__cta):hover{color:var(--green-deep)} .mainnav__cta{ font-family:var(--btn);font-weight:700;font-size:.82rem;padding:12px 22px;border-radius:10px; background:var(--fuchsia);color:#fff;box-shadow:0 8px 24px rgba(221,25,178,.34); transition:background var(--t),transform var(--t),box-shadow var(--t);white-space:nowrap} .mainnav__cta:hover{background:var(--fuchsia-deep);transform:translateY(-2px); box-shadow:0 14px 32px rgba(221,25,178,.46)} /* --- hamburger --- */ .hamburger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:11px; background:rgba(255,255,255,.12);cursor:pointer;position:relative;flex:none;transition:.25s} .scrolled .hamburger{border-color:var(--hair);background:var(--bg-1)} .hamburger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;transition:.3s} .scrolled .hamburger span{background:var(--green-deep)} .hamburger span:nth-child(1){top:15px} .hamburger span:nth-child(2){top:22px} .hamburger span:nth-child(3){top:29px} /* --- szuflada mobilna --- */ /* Zamknięta szuflada musi być NIEWIDOCZNA dla przeglądarki, nie tylko odsunięta - inaczej Tab wchodzi w 14 niewidocznych linków (naruszenie WCAG 4.1.2). */ .mobilenav{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.985); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transform:translateX(100%);visibility:hidden;pointer-events:none; transition:transform .42s var(--ease),visibility 0s .42s; display:flex;flex-direction:column;padding:26px clamp(22px,7vw,40px);overflow-y:auto} .mobilenav.open{transform:translateX(0);visibility:visible;pointer-events:auto; transition:transform .42s var(--ease),visibility 0s 0s} .mobilenav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .mobilenav__close{width:46px;height:46px;border:1px solid var(--hair);border-radius:11px;background:var(--bg-1);cursor:pointer;position:relative} .mobilenav__close::before,.mobilenav__close::after{content:"";position:absolute;left:12px;right:12px;top:22px;height:2px;background:var(--green-deep)} .mobilenav__close::before{transform:rotate(45deg)} .mobilenav__close::after{transform:rotate(-45deg)} .mobilenav__links{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--hair)} .mobilenav__links a{font-family:var(--mono);font-weight:400;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase; color:var(--head);padding:18px 0;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:14px;transition:.25s} .mobilenav__links a .idx{font-family:var(--mono);font-weight:300;font-size:11px;color:var(--green-deep);letter-spacing:.2em} .mobilenav__links a:hover{color:var(--green-deep);padding-left:8px} .mobilenav__sub{display:flex;flex-wrap:wrap;gap:16px 22px;margin:22px 0} .mobilenav__sub a{font-family:var(--mono);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute)} .mobilenav__cta{margin-top:auto;width:100%;justify-content:center} /* ============================================================ 2 · HERO - wideo (zostaje ciemne), elementy z kierunku D ============================================================ */ .hero{ position:relative;min-height:100vh;min-height:100svh; display:flex;flex-direction:column;overflow:hidden;isolation:isolate; background:linear-gradient(160deg,#0a1a12 0%,#0a1226 55%,#060916 100%); } .hero__video{position:absolute;inset:0;z-index:0;overflow:hidden} /* wideo rozjaśnione (uwaga Marty) - ma być dobrze widoczne */ /* Jak w kierunku D: wideo praktycznie bez przyciemniania - czytelność tekstu robi CIEŃ, nie filtr na całym kadrze. */ /* Plan 88: rozjaśnienie saturate(1.06) contrast(1.02) brightness(1.06) jest WYPALONE w plikach hero-1080/720.mp4 - filtr CSS na wideo kazał przeliczać każdą klatkę (zacinanie na słabszych komputerach). Nie przywracać. */ .hero__video video{width:100%;height:100%;object-fit:cover} /* Plan 95 (PS2): Safari bez autoodtwarzania (tryb niskiego zużycia energii) rysuje systemowy okrągły przycisk - film to tło, więc zostaje czysty plakat */ .hero__video video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none} .hero__video video::-webkit-media-controls{display:none!important} /* scrim: lekki, tylko tyle, ile trzeba pod biały tekst po lewej + zachowane ciemniejsze dno ekranu (kierunek D) */ .hero__scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; /* CIEŃ 1:1 z kierunku D: granatowa poświata od dolnego-lewego rogu (tam, gdzie siedzi tekst) + wygaszenie dna ekranu. Bez pasa przez środek, więc prawa strona kadru zostaje czysta. */ background: radial-gradient(105% 130% at 4% 88%, rgba(15,18,62,.94) 0%, rgba(15,18,62,.44) 48%, transparent 78%), linear-gradient(180deg, rgba(15,18,62,.55) 0%, rgba(15,18,62,.05) 30%, rgba(20,48,26,.15) 60%, rgba(0,0,0,.78) 100%); } /* plaster miodu w hero TYLKO pod kolumną tekstu - reszta kadru czysta (uwaga Marty) */ .hero__grid{ position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.063; background-image:var(--honeycomb-light); background-size:120px 208px; /* kaskada schodkowa obrysowana po linii Marty - plaster tylko po lewej stronie kadru, krawędź schodzi stopniami w prawo im niżej (lekko zmiękczona, żeby nie ciąć na ostro) */ mask-image:var(--kaskada); -webkit-mask-image:var(--kaskada); mask-size:100% 100%;-webkit-mask-size:100% 100%; mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat; } /* --- „układ planetarny" z kierunku D, prosta wersja --- */ .orbits{ position:absolute;top:42%;right:-6vw;transform:translateY(-50%); width:min(50vw,600px);aspect-ratio:1;z-index:2;pointer-events:none; mix-blend-mode:screen;opacity:.85; } .orbit{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(159,227,74,.26)} .orbit::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%; top:-7px;left:calc(50% - 7px);background:var(--green-light);box-shadow:0 0 18px 4px rgba(159,227,74,.7)} .orbit--1{animation:spin 26s linear infinite} .orbit--2{inset:14%;border-color:rgba(221,25,178,.30);animation:spin 18s linear infinite reverse} .orbit--2::after{background:var(--fuchsia);box-shadow:0 0 18px 4px rgba(221,25,178,.75);width:11px;height:11px;top:-5.5px;left:calc(50% - 5.5px)} .orbit--3{inset:28%;border-color:rgba(110,206,36,.34);animation:spin 12s linear infinite} .orbit--3::after{background:var(--green-vivid);box-shadow:0 0 14px 3px rgba(110,206,36,.7);width:9px;height:9px;top:-4.5px;left:calc(50% - 4.5px)} .orbit--core{inset:41%;border:none;background:radial-gradient(circle,rgba(159,227,74,.32),transparent 68%); animation:corepulse 4.5s ease-in-out infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes corepulse{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.15);opacity:1}} /* --- treść hero --- */ .hero__inner{position:relative;z-index:4;flex:1;display:flex;align-items:center; padding:min(6vh,60px) clamp(20px,5vw,64px) 0} .hero__content{max-width:860px} /* rezerwa na przypięty nagłówek: na ekranach niższych niż ok. 850 px wyśrodkowana treść wchodziła pod menu (zmierzone 07.10: 1366x768 -9 px, 1280x720 -32 px; z nazwą marki gorzej). Telefon ma własne 120 px niżej. */ @media (min-width:721px){.hero__inner{padding-top:140px}} .eyebrow{display:inline-flex;align-items:center;gap:12px;margin-top:0;margin-bottom:22px; font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.34em;text-transform:uppercase; color:#dff3d3;border:1px solid rgba(159,227,74,.28);border-radius:999px; padding:8px 16px 8px 12px;background:rgba(10,18,32,.4)} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green-vivid); box-shadow:0 0 0 0 rgba(110,206,36,.7);animation:blink 2.2s ease-out infinite} @keyframes blink{0%{box-shadow:0 0 0 0 rgba(110,206,36,.6)}70%{box-shadow:0 0 0 8px rgba(110,206,36,0)}100%{box-shadow:0 0 0 0 rgba(110,206,36,0)}} /* Nazwa marki nad tytułem (Marta 07.10): krój logo Jost 400 */ .hero__brand{font-family:"Jost","Jost zapas",sans-serif;font-weight:400;font-size:clamp(22px,2.4vw,34px); line-height:1.15;letter-spacing:.01em;color:#fff;margin:0 0 6px;text-shadow:0 2px 12px rgba(6,10,20,.72)} /* Tytuł: TREŚĆ i WIELKOŚĆ z wersji głównej (uwaga Marty), oprawa z kierunku A */ .hero__title{ font-family:var(--mono);font-weight:700; font-size:clamp(2.4rem,1.4rem + 4vw,4rem);line-height:1.08;letter-spacing:0; color:#fff;margin-bottom:22px; /* wideo jest jaśniejsze - tekst potrzebuje własnej czytelności */ text-shadow:0 2px 12px rgba(6,10,20,.72),0 1px 34px rgba(6,10,20,.5); } .hl{position:relative;white-space:nowrap;display:inline-block} .hl--green{color:var(--green-light)} .hl--fuchsia{color:var(--fuchsia)} .hl svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.34em;overflow:visible} .hl--green svg path{stroke:var(--green-light)} .hl--fuchsia svg path{stroke:var(--fuchsia)} .hl svg path{fill:none;stroke-width:4;stroke-linecap:round; stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s ease .5s forwards} @keyframes draw{to{stroke-dashoffset:0}} /* Akapit + znaczek QR+ - jak w kierunku A (uwaga Marty) */ .hero__sub{max-width:620px;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.65; color:rgba(240,248,238,.94);font-weight:400;margin-bottom:34px; text-shadow:0 1px 10px rgba(6,10,20,.7)} .hero__sub strong{color:#fff;font-weight:600} .qr-inline{display:inline-flex;align-items:center;gap:6px;color:var(--green-light);font-weight:600} .qr-inline b{font-family:var(--mono);letter-spacing:.06em} /* --- przyciski (animacja z kierunku A) --- */ .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:34px} .btn{font-family:var(--btn);font-weight:700;font-size:.98rem; display:inline-flex;align-items:center;gap:11px;padding:15px 28px;border-radius:12px; cursor:pointer;border:1px solid transparent;transition:.28s var(--ease);position:relative;overflow:hidden} .btn svg{width:17px;height:17px;transition:transform .28s ease} .btn--primary{background:var(--fuchsia);color:#fff; box-shadow:0 8px 30px rgba(221,25,178,.4),inset 0 0 0 1px rgba(255,255,255,.12)} .btn--primary:hover{background:var(--fuchsia-deep);transform:translateY(-3px);box-shadow:0 14px 40px rgba(221,25,178,.55)} .btn--primary:hover svg{transform:translateX(4px)} .btn--ghost{background:rgba(10,18,32,.35);color:#eafbe0;border-color:rgba(159,227,74,.3)} .btn--ghost:hover{border-color:var(--green-light);color:#fff;transform:translateY(-3px); box-shadow:0 10px 30px rgba(110,206,36,.22),inset 0 0 26px rgba(110,206,36,.08)} .btn--ghost:hover svg{transform:translateY(2px)} /* warianty na jasnym tle (sekcje) */ .btn--primary-light{background:var(--fuchsia);color:#fff;box-shadow:0 8px 26px rgba(221,25,178,.30)} .btn--primary-light:hover{background:var(--fuchsia-deep);transform:translateY(-3px);box-shadow:var(--sh-fuchsia)} .btn--primary-light:hover svg{transform:translateX(4px)} .btn--outline{background:transparent;color:var(--head);border-color:var(--hair)} .btn--outline:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-3px);box-shadow:0 12px 30px rgba(104,180,45,.18)} .btn--outline:hover svg{transform:translateX(4px)} /* --- readout zaufania --- */ .trust{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:0;align-items:stretch; border-top:1px solid rgba(159,227,74,.22);margin:0 clamp(20px,5vw,64px)} .trust__item{flex:1;min-width:150px;padding:18px 22px 20px 0;position:relative} .trust__item + .trust__item{padding-left:30px} .trust__item + .trust__item::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:rgba(159,227,74,.22)} .trust__k{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.32em;color:rgba(159,227,74,.66); text-transform:uppercase;margin-bottom:8px;display:block} .trust__v{font-family:var(--mono);font-weight:600;font-size:clamp(1.35rem,2.3vw,1.95rem);color:#fff;line-height:1;display:block} .trust__v em{font-style:normal;color:var(--green-light)} .trust__v .u{font-size:.46em;color:rgba(228,240,225,.55);letter-spacing:.1em;margin-left:4px} /* --- pasek słów-kluczy z kierunku D --- */ .marquee{position:relative;z-index:4; border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13); padding:13px 0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite} .marquee__track a{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.24em;text-transform:uppercase; color:rgba(255,255,255,.74);padding:0 24px;white-space:nowrap;display:inline-flex;align-items:center;gap:24px; text-decoration:none;transition:color .2s} .marquee__track a:hover,.marquee__track a:focus-visible{color:#fff} .marquee__track a:focus-visible{outline:2px solid var(--green-light);outline-offset:4px;border-radius:4px} .marquee__track a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fuchsia);flex:none} .marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} /* --- „scroll" z kierunku D (ruchomy pasek) --- */ .scroll-cue{position:absolute;bottom:clamp(150px,19vh,205px);left:clamp(20px,5vw,64px);z-index:5; display:flex;align-items:center;gap:12px; font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.66)} .scroll-cue__bar{width:34px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden} .scroll-cue__bar::after{content:"";position:absolute;inset:0;background:var(--green-light);animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* ============================================================ 3 · SYSTEM SEKCJI (jasny odpowiednik kierunku A) ============================================================ */ .section{position:relative;overflow:hidden;padding:clamp(70px,10vh,120px) clamp(20px,5vw,64px)} .section__inner{max-width:1680px;margin:0 auto;position:relative;z-index:2} /* Karta produktu NIETKNIĘTA: belka/mega/stopka wracają do 1480 (treść .wrap karty = 1480), reszta serwisu 1680 */ .single-produkt .topbar__inner, .single-produkt .mainbar__inner, .single-produkt .mega__inner, .single-produkt .foot__inner, .single-produkt .foot__bar, .single-produkt .foot__sisters{max-width:1480px} .section--plain{background:var(--bg-0)} .section--mid{background: radial-gradient(85% 60% at 12% 0%, rgba(104,180,45,.10) 0%, transparent 58%), linear-gradient(180deg,#f8fcf5 0%,#eef5e9 100%)} /* jasne tło zielonkawe - sekcja produktów */ .section--soft{background: radial-gradient(90% 60% at 88% 0%, rgba(104,180,45,.09) 0%, transparent 58%), linear-gradient(180deg,var(--bg-2) 0%,#e8f1e2 100%)} /* ---- SEKCJE CIEMNE (kontrapunkt dla jasnej bazy) ---- */ .section--forest{background: radial-gradient(95% 70% at 10% 0%, rgba(110,206,36,.16) 0%, transparent 58%), linear-gradient(165deg,#14301a 0%,#0d2415 55%,#0f123e 100%)} .section--deep{background: radial-gradient(100% 80% at 82% 8%, rgba(221,25,178,.22) 0%, transparent 58%), linear-gradient(165deg,#0f123e 0%,#160e33 60%,#2a0a34 100%)} /* wspólna typografia na ciemnym tle */ .section--forest,.section--deep,.foot{color:rgba(233,244,229,.82)} .section--forest .sec-title,.section--deep .sec-title{color:#fff} .section--forest .sec-title em,.section--deep .sec-title em{color:var(--green-light)} .section--forest .sec-eyebrow,.section--deep .sec-eyebrow{color:var(--green-light)} .section--forest .sec-note,.section--deep .sec-note{color:rgba(233,244,229,.74)} .section--forest .sec-foot,.section--deep .sec-foot{border-top-color:rgba(159,227,74,.22);color:rgba(233,244,229,.62)} .section--forest .sec-foot em,.section--deep .sec-foot em{color:var(--green-light)} /* plaster na ciemnym tle - jaśniejszy obrys, wyższe krycie */ .gridbg--light{background-image:var(--honeycomb-light);opacity:.075} /* ============================================================ 5 · LICZBY ============================================================ */ /* --- zdjęcia z produkcji w sekcji „O nas" --- Dwa kadry 3:2 obok siebie. Sztywna proporcja w CSS, nie width/height w HTML, bo zdjęcia są z aparatu i mają różne wymiary - bez tego rząd byłby postrzępiony. */ .prodfoto{position:relative;z-index:2;margin:0 0 clamp(26px,4vh,40px)} .prodfoto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)} .prodfoto__grid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block; border-radius:16px;box-shadow:var(--sh-sm)} .prodfoto figcaption{margin-top:12px;font-family:var(--mono);font-weight:300;font-size:11px; letter-spacing:.1em;color:var(--text-mute)} @media (max-width:680px){ .prodfoto__grid{grid-template-columns:1fr} } .nums{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .numcard{border:1px solid var(--hair);border-radius:18px;background:var(--surface); padding:30px 26px 26px;box-shadow:var(--sh-sm); transition:transform .4s var(--ease),border-color .3s,box-shadow .4s} .numcard:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .numcard__v{font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:1; color:var(--green-deep);display:flex;align-items:baseline;gap:6px} .numcard__plus{color:var(--fuchsia-deep)} .numcard__u{font-size:.34em;font-weight:500;letter-spacing:.06em;color:var(--text-mute)} .numcard__k{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--head);margin:14px 0 10px} .numcard__d{font-size:.88rem;line-height:1.55;color:var(--text-soft)} .numcard--fx .numcard__v{color:var(--fuchsia-deep)} .numcard--fx:hover{border-color:var(--fuchsia);box-shadow:var(--sh-fuchsia)} /* ============================================================ 6 · REFERENCJE ============================================================ */ .refs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* 4 kafle (R04, Marta 12.10) */ .refcard{border:1px solid var(--hair);border-radius:18px;background:var(--surface);overflow:hidden; box-shadow:var(--sh-sm);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s; display:flex;flex-direction:column} .refcard:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .refcard__thumb{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center; background-color:var(--bg-2)} .refcard__tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-weight:500;font-size:9.5px; letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(15,18,62,.78); padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px)} .refcard__play{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%; background:#fff;color:var(--forest);display:grid;place-items:center;box-shadow:var(--sh-md);transition:.3s} .refcard__play svg{width:18px;height:18px;margin-left:2px} .refcard:hover .refcard__play{background:var(--green);color:#fff;transform:scale(1.08)} .refcard__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .refcard__who{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.15rem; line-height:1.1;color:var(--head)} .refcard__role{font-size:.88rem;line-height:1.5;color:var(--text-soft);margin:8px 0 18px} .refcard .actcard__go{margin-top:auto} /* ============================================================ 7 · OSIEM ŚWIATÓW TEMATYCZNYCH ============================================================ */ .prodlayout{position:relative;z-index:2;display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,3vw,34px);align-items:start} .worlds{display:flex;flex-direction:column;gap:8px;position:sticky;top:130px} .world{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px; border:1px solid transparent;background:var(--surface);box-shadow:var(--sh-sm); font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--head);transition:.25s var(--ease)} .world__dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;transition:.25s} .world__n{margin-left:auto;font-weight:300;font-size:11px;letter-spacing:.12em;color:var(--text-mute)} .world:hover{border-color:var(--green);transform:translateX(4px)} .world.is-active{border-color:var(--green);background:var(--green-pale)} .world.is-active .world__dot{background:var(--fuchsia)} .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .prod{border:1px solid var(--hair);border-radius:18px;background:var(--surface);overflow:hidden; box-shadow:var(--sh-sm);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s; display:flex;flex-direction:column} .prod:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .prod__img{position:relative;aspect-ratio:3/2;background-size:cover;background-position:center; background-color:var(--bg-2)} /* znacznik QR+ w stylu kierunku A (nie pigułka z v3) */ .prod__qr{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px; padding:6px 12px 6px 10px;border-radius:999px;color:#fff;background:rgba(15,18,62,.82); border:1px solid rgba(159,227,74,.5);backdrop-filter:blur(5px);transition:.3s} .prod__qr svg{width:14px;height:14px;color:var(--green-light)} .prod__qr b{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.1em} .prod:hover .prod__qr{background:var(--green);border-color:var(--green-light)} .prod:hover .prod__qr svg{color:#fff} .prod__badge{position:absolute;top:12px;right:12px;font-family:var(--mono);font-weight:500;font-size:9.5px; letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--fuchsia); padding:6px 11px;border-radius:999px} .prod__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .prod__title{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.12rem; line-height:1.1;color:var(--head);margin-bottom:12px} .prod__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .prod__tags span{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--green-deep);background:var(--green-pale); padding:5px 10px;border-radius:999px} .prod .actcard__go{margin-top:auto} /* ============================================================ 8 · PLATFORMA QR+ ============================================================ */ .qrblock{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px);align-items:center} .qrblock__lead{font-size:1.02rem;line-height:1.65;color:var(--text-soft);margin:20px 0 22px;max-width:56ch} .qrblock__list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px} .qrblock__list li{position:relative;padding-left:30px;font-size:.94rem;line-height:1.55;color:var(--text-soft)} .qrblock__list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px; border:1.5px solid var(--green);border-radius:4px} .qrblock__list li::after{content:"";position:absolute;left:4.5px;top:.62em;width:5px;height:9px; border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)} .qrblock__list b{color:var(--head);font-weight:700} .qrblock__vis{display:grid;place-items:center} .qrcard{position:relative;width:min(100%,320px);aspect-ratio:1;border-radius:26px; background:var(--surface);border:1px solid var(--hair);box-shadow:var(--sh-md); display:grid;place-items:center} /* duży, czytelny znacznik QR (uwaga Marty: poprzedni był nieczytelny) */ .qrcard__code{width:58%;height:58%;color:var(--green-deep)} .qrcard__hand{position:absolute;right:-6px;bottom:26px;font-family:var(--hand);font-weight:700; font-size:1.7rem;color:var(--fuchsia-deep);transform:rotate(-7deg)} /* ============================================================ 9 · FINANSOWANIE ============================================================ */ .steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .step{border:1px solid rgba(159,227,74,.24);border-radius:18px;background:rgba(255,255,255,.05); padding:32px 28px 28px;backdrop-filter:blur(3px); transition:transform .4s var(--ease),border-color .3s,background .3s} .step:hover{transform:translateY(-7px);border-color:var(--green-light);background:rgba(255,255,255,.09)} .step__n{font-family:var(--mono);font-weight:700;font-size:3.2rem;line-height:1;color:transparent; -webkit-text-stroke:1px rgba(159,227,74,.6)} .step__t{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.32rem; line-height:1.05;color:#fff;margin:20px 0 12px} .step__d{font-size:.92rem;line-height:1.6;color:rgba(233,244,229,.76)} /* ============================================================ 10 · BLOG ============================================================ */ .posts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .post{border:1px solid var(--hair);border-radius:18px;background:var(--surface);padding:26px 24px 24px; box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-height:250px; transition:transform .4s var(--ease),border-color .3s,box-shadow .4s} .post:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .post__meta{display:flex;align-items:center;gap:12px;margin-bottom:16px} .post__cat{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--fuchsia-deep);background:var(--fuchsia-pale);padding:5px 11px;border-radius:999px} .post__date{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.2em;color:var(--text-mute)} .post__t{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.16rem;line-height:1.12; color:var(--head);margin-bottom:10px} .post__d{font-size:.9rem;line-height:1.55;color:var(--text-soft);margin-bottom:20px} .post .actcard__go{margin-top:auto} /* D10 (Marta 29.09): karty ze zdjęciem wpisu - 3 najnowsze z WordPressa (npz_blog_najnowsze_karty, inc/blog.php). Zdjęcie na całą szerokość karty (ujemny margines = padding .post), tytuł i zajawka najwyżej 3 linie. */ .post--foto{padding-top:0;overflow:hidden} .post__foto{display:block;margin:0 -24px 20px;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden} .post__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .post--foto:hover .post__foto img{transform:scale(1.04)} .post--foto .post__t,.post--foto .post__d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .posts__wiecej{position:relative;z-index:2;display:flex;justify-content:center;margin-top:clamp(28px,4vh,44px)} /* tekst tylko dla czytników ekranu (np. „Czytaj dalej: ") */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0} /* ============================================================ 11 · NASZE MARKI ============================================================ */ .brands{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} /* trzy marki zamiast czterech (2026-07-24) - bez tego trzeci kafel zostawiał pustą czwartą kolumnę i rząd wyglądał na niedokończony */ .brands--3{grid-template-columns:repeat(3,1fr)} .brandcard{border:1px solid var(--hair);border-radius:18px;background:var(--surface);padding:28px 24px 24px; box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-height:236px; transition:transform .4s var(--ease),border-color .3s,box-shadow .4s} .brandcard:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .brandcard__k{font-family:var(--mono);font-weight:300;font-size:9.5px;letter-spacing:.28em; text-transform:uppercase;color:var(--text-mute)} .brandcard__t{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.2rem; line-height:1.1;color:var(--head);margin:12px 0 10px} .brandcard__d{font-size:.88rem;line-height:1.55;color:var(--text-soft)} .brandcard__u{margin-top:auto;padding-top:16px;font-family:var(--mono);font-weight:400;font-size:11px; letter-spacing:.14em;color:var(--green-deep)} .brandcard--fx:hover{border-color:var(--fuchsia);box-shadow:var(--sh-fuchsia)} .brandcard--fx .brandcard__u{color:var(--fuchsia-deep)} .brandcard--blue:hover{border-color:#1e88e5;box-shadow:0 18px 40px rgba(30,136,229,.30)} .brandcard--blue .brandcard__u{color:#1565c0} /* baner katalogu = KARTA w magencie na tle strony (Marta 2026-09-29, makieta V2: „ten mi się mega podoba"). Zastępuje pełnoszeroki pas zieleń-granat: „źle koresponduje z zielonym tłem", ostro odcięty, „i to na każdej stronie". Jedna reguła dla każdej strony z pasem: #katalog (14 szablonów) i #pobierz-katalog (rodzina Edu-Box); karta produktu (.pdp-catalog) ma swoją wersję w styles-produkt.css. Teksty zostają z .section--deep (jasne). */ #katalog,#pobierz-katalog{background:transparent;padding-left:clamp(16px,4vw,64px);padding-right:clamp(16px,4vw,64px);padding-bottom:clamp(44px,6vh,72px)} #katalog>.gridbg,#pobierz-katalog>.gridbg{display:none} #katalog>.section__inner,#pobierz-katalog>.section__inner{position:relative;overflow:hidden;border-radius:32px; padding:clamp(36px,5vw,72px) clamp(24px,5vw,72px);background:var(--katalog-karta);box-shadow:0 30px 80px -20px rgba(156,26,120,.45)} #katalog .sec-eyebrow::before,#pobierz-katalog .sec-eyebrow::before{background:var(--green-light)} #katalog .sec-title em,#pobierz-katalog .sec-title em{color:#fff;text-decoration:underline;text-decoration-color:var(--green-light); text-decoration-thickness:.08em;text-underline-offset:.12em} #katalog .catalog__input,#pobierz-katalog .catalog__input{background:rgba(40,6,32,.35);border-color:rgba(255,255,255,.28)} #katalog .catalog__input::placeholder,#pobierz-katalog .catalog__input::placeholder{color:rgba(255,236,248,.62)} #katalog .catalog__input:focus,#pobierz-katalog .catalog__input:focus{border-color:#fff;background:rgba(40,6,32,.5)} /* przycisk biały - fuksjowy znikałby na magencie */ #katalog .btn--primary,#pobierz-katalog .btn--primary{background:#fff;color:#b0158e;box-shadow:0 10px 30px rgba(40,5,30,.35)} #katalog .btn--primary:hover,#pobierz-katalog .btn--primary:hover{background:#fff3fb;color:#8a1a5c;box-shadow:0 14px 40px rgba(40,5,30,.45)} #katalog .btn--primary:focus-visible,#pobierz-katalog .btn--primary:focus-visible{outline:3px solid #fff;outline-offset:3px} @media (max-width:640px){#katalog>.section__inner,#pobierz-katalog>.section__inner{border-radius:24px}} /* KIERUNEK A — jeden gładki zjazd: most = subtelny łącznik (mały krok), główne ciemnienie niesie stopka (ZERO zieleni) */ .home-bridge{position:relative;overflow:hidden;height:44px;background:linear-gradient(180deg,#0f123e 0%,#0e113c 100%)} /* stopka TYLKO na home (poprzedzona mostem): startuje granatem mostu, schodzi w głębszy granat, + mniejszy górny padding niż na karcie (ściąga stopkę do katalogu). Karta bez .home-bridge → bazowa. */ .home-bridge + .foot{background:linear-gradient(180deg,#0e113c 0%,#0a0d2e 100%);padding-top:clamp(40px,5vh,56px)} /* 2026-09-29: katalog to karta na jasnym tle - most (łącznik ciemnego pasa ze stopką) został sam jako granatowy pasek z linią nad stopką, więc go chowamy. Element zostaje w HTML, więc reguła .home-bridge + .foot dalej działa. */ .home-bridge{display:none} /* Strona główna 2026-09-29 (Marta: „brakuje mi zdjęć", plan 66): zdjęcia w sekcjach tekstowych + sekcja nagród. Każde zdjęcie to miejsce data-foto: build podstawia npz_foto() - zdjęcie Marty z Canvy albo zastępcze z decku. */ .home-foto{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin:0 0 18px;background:var(--bg-2)} .speccard .home-foto{aspect-ratio:4/3} .actcard .home-foto,.brandcard .home-foto{aspect-ratio:16/9} /* karta QR ze zdjęciem (pion 2:3) zamiast znacznika QR: bez wymuszonego kwadratu */ .qrcard--foto{aspect-ratio:auto;padding:18px} .qrcard--foto .qr-telefon{display:block;max-height:430px;width:auto;max-width:100%;margin:0 auto} /* Kwadrat z prawdziwym kodem QR (-> npz.edu.pl) przy telefonie: „skanuję, a na telefonie widzę platformę" (Marta 29.09, wariant B). Komputer od 1345 px: kwadrat obok karty + strzałka, napis pod kwadratem, cała grupa na środku wolnego miejsca obok tekstu (Marta 30.09: „za bardzo doklejone do prawej") - kolumna tekstu = szerokość treści, lewy margines karty = miejsce na kwadrat, strzałkę i napis. Węziej kwadrat na rogu karty: przy 1101-1260 px kwadrat obok karty zasłaniał słowa listy (pomiar 30.09). */ .qrmini{position:absolute;z-index:3;left:-44px;bottom:44px;width:96px;height:96px;padding:9px;box-sizing:border-box; background:#fff;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--sh-md);transform:rotate(-5deg)} .qrmini img{display:block;width:100%;height:100%} .qrarrow{display:none} @media (min-width:901px){.qrmini{left:-38px;bottom:64px;width:104px;height:104px;padding:10px}} @media (min-width:1345px){ .qrblock--skan{grid-template-columns:fit-content(640px) 1fr} .qrblock__vis--skan{justify-items:center} .qrblock__vis--skan .qrcard{margin-left:222px} .qrmini{left:-214px;bottom:auto;top:46%;width:128px;height:128px;padding:12px;transform:rotate(-4deg)} .qrarrow{display:block;position:absolute;left:-82px;top:calc(46% + 8px);width:74px;height:50px;color:var(--fuchsia-deep)} .qrblock__vis--skan .qrcard__hand{right:auto;bottom:auto;left:-222px;top:calc(46% + 140px);transform:rotate(-4deg)} } .fin-foto{display:block;width:100%;height:clamp(200px,24vw,320px);object-fit:cover;border-radius:18px;margin:0 0 clamp(24px,3vw,36px)} .home-nagrody{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:16px} .home-nagrody li{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:20px 12px 16px; display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:var(--sh-sm); transition:transform .4s var(--ease),border-color .3s,box-shadow .4s} /* ruch jak pozostałe kafle strony (Marta 29.09: „czy te kafle mogą się ruszać tak jak inne kafle") */ .home-nagrody li:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .home-nagrody img{height:86px;width:auto;max-width:100%;object-fit:contain} .home-nagrody span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);line-height:1.45} /* ============================================================ 12 · CTA · KATALOG ============================================================ */ .catalog{position:relative;z-index:2;display:grid;grid-template-columns:1fr .95fr; gap:clamp(26px,4vw,56px);align-items:center} .catalog__d{font-size:1rem;line-height:1.65;color:rgba(233,244,229,.78);margin-top:18px;max-width:52ch} .catalog__label{display:block;font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.28em; text-transform:uppercase;color:var(--green-light);margin-bottom:10px} .catalog__row{display:flex;flex-wrap:wrap;gap:12px} .catalog__input{flex:1;min-width:220px;font-family:var(--body);font-size:.98rem;color:#fff; background:rgba(255,255,255,.07);border:1px solid rgba(159,227,74,.3);border-radius:12px; padding:15px 18px;transition:.25s} .catalog__input::placeholder{color:rgba(233,244,229,.45)} .catalog__input:focus{outline:none;border-color:var(--green-light);background:rgba(255,255,255,.12)} .catalog__note{margin-top:12px;font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:rgba(233,244,229,.55)} /* ============================================================ 13 · STOPKA ============================================================ */ .foot{position:relative;overflow:hidden; background:linear-gradient(170deg,#0d2415 0%,#0f123e 70%,#0a0d2e 100%); padding:clamp(56px,8vh,86px) clamp(20px,5vw,64px) 0} .foot__inner{position:relative;z-index:2;max-width:1680px;margin:0 auto; display:grid;grid-template-columns:1.35fr .8fr .8fr 1fr;gap:clamp(24px,4vw,48px)} .foot__logo{height:64px;width:auto;margin-bottom:18px} .foot__claim{font-size:.9rem;line-height:1.6;color:rgba(233,244,229,.7);margin-bottom:20px;max-width:34ch} .foot__contact{display:block;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.06em; color:var(--green-light);margin-bottom:8px;transition:.25s} .foot__contact:hover{color:#fff} .foot__col{display:flex;flex-direction:column} .foot__k{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:var(--fuchsia);margin-bottom:18px} .foot__col a:not(.rep):not(.rep__tel):not(.rep__mail){font-size:.92rem;color:rgba(233,244,229,.78);padding:7px 0;transition:.25s} .foot__col a:not(.rep):not(.rep__tel):not(.rep__mail):hover{color:var(--green-light);padding-left:5px} .rep{display:flex;align-items:flex-start;gap:14px;padding:10px 0;transition:.25s} .rep + .rep{border-top:1px solid rgba(159,227,74,.12)} .rep:hover{transform:translateX(4px)} /* zdjęcie handlowca w kółku - kadr na twarz jest już w pliku (wp-theme/kadruj_doradcow.py), CSS tylko wypełnia koło */ .rep__photo{width:56px;height:56px;border-radius:50%;flex:none;overflow:hidden; background-size:cover;background-position:center;background-repeat:no-repeat; background-color:rgba(159,227,74,.14); border:1.5px solid rgba(159,227,74,.4);transition:border-color .25s} .rep:hover .rep__photo{border-color:var(--green-light)} .rep__txt{display:flex;flex-direction:column;gap:3px;line-height:1.3;min-width:0} .rep__txt b{font-size:.96rem;color:#fff;font-weight:600} .rep__tel{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.08em; color:var(--green-light)} .rep__tel{text-decoration:none} .rep__mail{font-size:12px;color:rgba(233,244,229,.82);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere} .rep__mail:hover,.rep__tel:hover{color:#fff} /* Marta 13.10: e-mail doradcy w stopce */ .rep__woj{font-size:11px;line-height:1.45;color:rgba(233,244,229,.58)} .foot__bar{position:relative;z-index:2;max-width:1680px;margin:clamp(38px,6vh,58px) auto 0; padding:20px 0 26px;border-top:1px solid rgba(159,227,74,.18); display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center} .foot__legal{display:flex;flex-wrap:wrap;gap:24px} .foot__legal a{font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:rgba(233,244,229,.62);transition:.25s} .foot__legal a:hover{color:var(--green-light)} .foot__copy{font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:rgba(233,244,229,.5)} /* plaster miodu z logo na papierze (zamiast kratki) */ /* krycie 0,035 (nie 0,05): rozsunięte sześciokąty nie dzielą boków z sąsiadami, więc rysują ~1,43x więcej kreski na tę samą powierzchnię niż zwarty plaster. Niższa liczba daje TO SAMO wrażenie wizualne co zaakceptowany wzór. */ .gridbg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035; background-image:var(--honeycomb); background-size:120px 208px; mask-image:radial-gradient(120% 90% at 50% 20%,#000 40%,transparent 90%); -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 40%,transparent 90%)} /* nagłówek sekcji: tytuł po lewej, nota po prawej (uwaga Marty do sekcji 2) */ .sec-head{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:24px;margin-bottom:14px} .sec-head.mb-lg{margin-bottom:clamp(38px,6vh,60px)} .sec-eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.36em;text-transform:uppercase; color:var(--green-deep);display:flex;align-items:center;gap:12px;margin-bottom:18px} .sec-eyebrow::before{content:"";width:34px;height:2px;background:var(--fuchsia)} .sec-title{font-family:var(--mono);font-weight:700;text-transform:uppercase; font-size:clamp(1.9rem,1rem + 3vw,3.3rem);line-height:.98;color:var(--head);letter-spacing:-.01em} .sec-title em{font-style:normal;color:var(--green-deep)} .sec-title .fx{font-style:normal;color:var(--fuchsia-deep)} /* Nagłówek i notatka to dwa elementy flex. Bez tych dwóch reguł DŁUGI tytuł rozpycha swój element na całą szerokość i spycha notatkę do nowego wiersza - notatka ląduje wtedy po LEWEJ, pod tytułem (tak było w sekcji „O nas"). Teraz tytuł kurczy się i zawija wewnątrz, a notatka zostaje po prawej. */ .sec-head > div:first-child{flex:1 1 420px;min-width:0} .sec-note{flex:0 0 auto;max-width:340px;font-size:.92rem;line-height:1.6;color:var(--text-soft);text-align:right} .sec-note .mono{display:block;color:var(--fuchsia-deep);font-size:10px;margin-bottom:8px;font-weight:400} .sec-foot{position:relative;z-index:2;margin-top:40px;padding-top:20px;border-top:1px solid var(--hair); display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-mute)} .sec-foot em{font-style:normal;color:var(--fuchsia-deep)} /* ============================================================ 4 · KARTY „SPECIMEN" (sekcja: przestrzenie dla) Animacja 1:1 z kierunku A, poświata zamieniona na cień barwny. ============================================================ */ .speclist{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} /* min-height:250px był sztuczny - siatka i tak rozciąga wszystkie karty do najwyższej, więc ta wartość dokładała wyłącznie pustkę. Zmierzone: karta miała 250 px przy treści 122 px. Bez min-height schodzi do 223, po ściśnięciu wyściółki poniżej ~205. Reszta pustki bierze się stąd, że opis „Szkół" ma 3 linie, a pozostałe 2 - to już kwestia treści, nie CSS-a (patrz uwagi-batch, tura 12). */ .speccard{position:relative;border:1px solid var(--hair);border-radius:16px;background:var(--surface); padding:22px 22px 20px;overflow:hidden;box-shadow:var(--sh-sm); transition:transform .4s var(--ease),border-color .3s,box-shadow .4s; display:flex;flex-direction:column} .speccard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s; background:linear-gradient(150deg, rgba(104,180,45,.10), transparent 55%)} .speccard:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .speccard:hover::after{opacity:1} .speccard__title{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.55rem;line-height:1; color:var(--head);margin-bottom:12px} .speccard__desc{font-size:.9rem;line-height:1.55;color:var(--text-soft)} .speccard__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair); font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)} .speccard__foot em{font-style:normal;color:var(--green-deep)} /* ============================================================ 5 · KAFLE AKCJI (sekcja: poznaj możliwości) ============================================================ */ .acts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .actcard{position:relative;border:1px solid var(--hair);border-radius:18px;background:var(--surface); padding:34px 30px 30px;overflow:hidden;box-shadow:var(--sh-sm); transition:transform .4s var(--ease),border-color .3s,box-shadow .4s; display:flex;flex-direction:column;min-height:300px} .actcard__num{font-family:var(--mono);font-weight:700;font-size:3.6rem;line-height:1;color:transparent; -webkit-text-stroke:1.5px var(--green-deep);margin-bottom:auto} .actcard__title{font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:1.7rem;line-height:1.02; color:var(--head);margin:24px 0 12px} .actcard__desc{font-size:.92rem;line-height:1.55;color:var(--text-soft);margin-bottom:22px} /* karty ze zdjęciem (strona główna #mozliwosci): wolne miejsce NIE nad tytułem - inaczej karta bez linku (EN 02) albo z krótszym opisem ma tytuł niżej; tytuły i opisy na jednej wysokości (Marta 11.10). 901-1179 px: tytuł do 2 linii. */ .actcard .home-foto ~ .actcard__num{margin-bottom:0} @media (min-width:901px) and (max-width:1179px){.actcard .home-foto ~ .actcard__title{min-height:2.04em}} .actcard__go{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:400;font-size:12px; letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);transition:.3s;margin-top:auto} .actcard__go svg{width:16px;height:16px;transition:transform .3s} .actcard:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--sh-green)} .actcard:hover .actcard__go svg{transform:translateX(5px)} .actcard--fx .actcard__num{-webkit-text-stroke:1.5px var(--fuchsia-deep)} .actcard--fx .actcard__go{color:var(--fuchsia-deep)} .actcard--fx:hover{border-color:var(--fuchsia);box-shadow:var(--sh-fuchsia)} /* ============================================================ 6 · RESPONSYWNOŚĆ ============================================================ */ @media (max-width:1180px){ .speclist{grid-template-columns:repeat(2,1fr)} .refs{grid-template-columns:repeat(2,1fr)} } @media (max-width:980px){ .mainnav{display:none} .hamburger{display:block} .acts{grid-template-columns:1fr} .sec-note{text-align:left;max-width:none} .sec-head{align-items:flex-start;flex-direction:column} .sec-head > div:first-child{flex-basis:auto} /* w kolumnie 420px z flex-basis szło w wysokość: 196-356px pustki (pomiar 01.10, 24 nagłówki) */ .orbits{top:30%;right:-24vw;width:80vw;opacity:.7} } @media (max-width:720px){ .topbar__links{display:none} .speclist{grid-template-columns:1fr} /* 2 kafle w wierszu: odstęp przez gap kontenera, bo `+` nie odróżnia "drugi w wierszu" od "pierwszy w nowym wierszu" i psuł wyrównanie kolumn */ .trust{gap:0 18px} .trust__item{min-width:44%} .trust__item + .trust__item{padding-left:0} .scroll-cue{display:none} /* treść hero nie może wejść pod przypięty header */ .hero__inner{padding-top:120px;align-items:flex-start} .eyebrow{font-size:10.5px;letter-spacing:.22em;padding:7px 13px 7px 10px;margin-bottom:14px} .trust__item + .trust__item::before{display:none} /* docięte odstępy - tytuł ma wielkość z wersji głównej (38,4px = 4 wiersze), więc hero musi się zmieścić w ekranie iPhone'a razem z paskiem liczb */ .hero__title{margin-bottom:16px} .hero__sub{margin-bottom:24px} .cta-row{margin-bottom:22px;gap:12px} .trust__item{padding:14px 16px 16px 0} .marquee{padding:10px 0} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .marquee__track,.orbit,.orbit--2,.orbit--3{animation:none} } /* Plan 88: tryb lekki - włącza go skrypt na stronie głównej, gdy wideo gubi klatki (słaba karta graficzna). */ .npz-lekko .orbit,.npz-lekko .eyebrow .dot,.npz-lekko .marquee__track,.npz-lekko .scroll-cue__bar::after{animation:none} .npz-lekko .orbits{mix-blend-mode:normal} /* ============================================================ RESPONSYWNOŚĆ - sekcje 5-13 ============================================================ */ @media (max-width:1180px){ .nums{grid-template-columns:repeat(2,1fr)} .brands{grid-template-columns:repeat(2,1fr)} /* telefon i mail znikają z paska - te same dane są w stopce i w przycisku „Konsultacja z doradcą", a poniżej 1180 px pasek zaczyna się zawijać */ .topbar__kontakt{display:none} .prodlayout{grid-template-columns:1fr} .worlds{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:10px; padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .world{flex:0 0 auto} .world:hover{transform:none} .prodgrid{grid-template-columns:repeat(2,1fr)} .foot__inner{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .refs{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .posts{grid-template-columns:1fr} .qrblock{grid-template-columns:1fr;gap:34px} .qrblock__vis{order:-1} .qrcard{width:min(100%,260px)} .catalog{grid-template-columns:1fr;gap:28px} } @media (max-width:620px){ .nums{grid-template-columns:1fr} .prodgrid{grid-template-columns:1fr} .brands{grid-template-columns:1fr} .foot__inner{grid-template-columns:1fr;gap:32px} .foot__bar{flex-direction:column;align-items:flex-start} .catalog__row{flex-direction:column;align-items:stretch} .catalog__row .btn{justify-content:center} } /* ============================================================ STOPKA - social, serwisy powiązane ============================================================ */ .foot__social{display:flex;gap:10px;margin-top:20px} .foot__social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; border:1px solid rgba(159,227,74,.28);color:rgba(233,244,229,.8);transition:.25s} .foot__social svg{width:18px;height:18px} .foot__social a:hover{border-color:var(--green-light);color:var(--green-light);transform:translateY(-2px)} /* stopka jest JEDYNYM wejsciem do marek siostrzanych */ .foot__sisters{position:relative;z-index:2;max-width:1680px;margin:clamp(34px,5vh,50px) auto 0; padding-top:22px;border-top:1px solid rgba(159,227,74,.16); display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px} .foot__sisters .foot__k{margin-bottom:0;flex:none} .foot__sisters a{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.12em; color:rgba(233,244,229,.72);transition:.25s} .foot__sisters a:hover{color:var(--green-light)} /* ============================================================ Komunikat dla linkow do jeszcze niezbudowanych podstron ============================================================ */ .wip-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:200; display:flex;flex-direction:column;gap:3px;padding:14px 22px;border-radius:14px; background:rgba(15,18,62,.96);border:1px solid rgba(159,227,74,.4); box-shadow:0 18px 44px rgba(15,18,62,.35);backdrop-filter:blur(8px); opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease); max-width:min(92vw,460px);text-align:center} .wip-toast.is-on{opacity:1;transform:translate(-50%,0)} .wip-toast b{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--green-light)} .wip-toast span{font-size:.82rem;line-height:1.4;color:rgba(233,244,229,.78)} .wip-toast--wkrotce{padding:16px 26px;width:max-content} /* bez tego left:50% ściska dymek do połowy ekranu telefonu */ .wip-toast--wkrotce b{font-size:15px;letter-spacing:.22em;text-transform:uppercase} .wip-toast--wkrotce span{font-size:.9rem} /* Mapa Zielonych Klas - póki nie powstanie, nie pokazujemy jej nigdzie poza menu (Marta 09.10). Kafel mapy w FAQ (światy, Warto wiedzieć) i link „Zobacz mapę” na stronie głównej znikają, FAQ zajmuje wtedy całą szerokość. Po starcie mapy: usunąć ten blok. */ .swiat-faq__map,.sec-foot a[href*="mapa-zielonych-klas"]{display:none!important} .swiat-faq__grid:has(> .swiat-faq__map){grid-template-columns:1fr} .swiat-faq__grid:has(> .swiat-faq__map) .swiat-faq__a{max-width:80ch} @media (max-width:620px){ .foot__sisters{flex-direction:column;align-items:flex-start;gap:10px} } /* ============================================================ TAGI TEMATYCZNE - klasy pochodne od tokenów Kolorujemy TYLKO 9 kanonicznych tagów z matrycy. Tagi opisowe (Plener, Zestaw, XXL, EN 1176...) zostają neutralne, dzięki czemu na karcie od razu widać, co jest światem tematycznym. ============================================================ */ .t-sensoryczne{background:var(--tag-sensoryczne-bg) !important;color:var(--tag-sensoryczne-tx) !important} .t-ekologiczne{background:var(--tag-ekologiczne-bg) !important;color:var(--tag-ekologiczne-tx) !important} .t-terapeutyczne{background:var(--tag-terapeutyczne-bg) !important;color:var(--tag-terapeutyczne-tx) !important} .t-nauki{background:var(--tag-nauki-bg) !important;color:var(--tag-nauki-tx) !important} .t-iluzja{background:var(--tag-iluzja-bg) !important;color:var(--tag-iluzja-tx) !important} .t-kosmiczne{background:var(--tag-kosmiczne-bg) !important;color:var(--tag-kosmiczne-tx) !important} .t-religijne{background:var(--tag-religijne-bg) !important;color:var(--tag-religijne-tx) !important} .t-muzyczne{background:var(--tag-muzyczne-bg) !important;color:var(--tag-muzyczne-tx) !important} .t-personalizowane{background:var(--tag-personalizowane-bg) !important;color:var(--tag-personalizowane-tx) !important} /* tagi opisowe - neutralne */ .prod__tags span:not([class]){background:rgba(15,18,62,.05);color:var(--text-mute)} /* kropka w liście światów bierze kolor swojego tagu */ .world--sensoryczne .world__dot{background:var(--tag-sensoryczne-tx)} .world--ekologiczne .world__dot{background:var(--tag-ekologiczne-tx)} .world--terapeutyczne .world__dot{background:var(--tag-terapeutyczne-tx)} .world--nauki .world__dot{background:var(--tag-nauki-tx)} .world--iluzja .world__dot{background:var(--tag-iluzja-tx)} .world--kosmiczne .world__dot{background:var(--tag-kosmiczne-tx)} .world--religijne .world__dot{background:var(--tag-religijne-tx)} .world--muzyczne .world__dot{background:var(--tag-muzyczne-tx)} .world--personalizowane .world__dot{background:var(--tag-personalizowane-tx)} .world.is-active{background:var(--bg-1)} /* ============================================================ MEGA MENU - logika z wireframów Miro, język wizualny v4 ============================================================ */ .mainnav__mega{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.9);background:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:7px;padding:5px 0;position:relative;transition:color .25s} .scrolled .mainnav__mega,.mega-open .mainnav__mega{color:var(--head)} .mainnav__chev{width:14px;height:14px;transition:transform .3s var(--ease)} .mainnav__mega.is-open .mainnav__chev{transform:rotate(180deg)} .mainnav__mega::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px; background:var(--green);transition:width .3s} .mainnav__mega:hover::after,.mainnav__mega.is-open::after{width:100%} .mainnav__search{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.9); display:grid;place-items:center;width:34px;height:34px;border-radius:9px;transition:.25s} .mainnav__search svg{width:18px;height:18px} .scrolled .mainnav__search,.mega-open .mainnav__search{color:var(--head)} .mainnav__search:hover{background:rgba(104,180,45,.14);color:var(--green-deep)} /* Przy otwartym mega belka + panel to JEDNA biała bryła, bez szwu. Cztery źródła „odcięcia" - wszystkie zdjęte tutaj i w .mega niżej: 1) krycie .97 nad ciemnym hero (belka wychodziła szara przy białym panelu) → #fff 2) hairline pod belką → przezroczysty (zostaje 1px, więc układ się nie przesuwa) 3) hairline nad panelem → usunięty w .mega 4) cień belki rzucany w dół → usunięty; cień zostaje tylko pod CAŁOŚCIĄ (w .mega) 5) belka bieleje NATYCHMIAST. Bazowe `transition:background .35s` powodowało, że przez pierwsze 0,35 s po otwarciu menu na górze belki został ciemny pasek (najciemniejszy punkt gradientu hero gasł jako ostatni) - czyli dokładnie to „odcięcie" na zrzucie. Zamknięcie menu dalej gaśnie płynnie, bo wtedy wraca reguła bazowa. */ .site-header.mega-open{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom-color:transparent;box-shadow:none;transition:background 0s} .mega-open .topbar{border-bottom-color:var(--hair)} .mega-open .topbar__links a,.mega-open .topbar__right a{color:var(--text-mute)} .mega-open .mainnav a:not(.mainnav__cta){color:var(--head)} .mega-open .brand__logo--light{opacity:0} .mega-open .brand__logo--dark{opacity:1} /* ROZWIJANE MENU „Warto wiedzieć" (D8, Marta 29.09, sesja 39): podstrony pod pozycją belki, biały panel jak mega menu. Otwiera się najechaniem i klawiaturą (:focus-within); sama pozycja dalej prowadzi na /warto-wiedziec/. Posłuży też Realizacjom i Współpracy. Specyficzność: `.scrolled/.mega-open .mainnav a:not(.mainnav__cta)` = (0,3,1); reguły linków panelu niżej mają tyle samo i stoją później, więc wygrywają kolejnością. */ .mainnav__drop{position:relative;display:flex;align-items:center} .mainnav__drop>a{display:inline-flex;align-items:center;gap:7px} .mainnav__drop:hover>a::after,.mainnav__drop:focus-within>a::after{width:100%} .mainnav__drop:hover .mainnav__chev,.mainnav__drop:focus-within .mainnav__chev{transform:rotate(180deg)} .mainnav__sub{position:absolute;top:calc(100% + 14px);left:-16px;min-width:240px;list-style:none;padding:8px; background:var(--bg-0);border:1px solid var(--hair);border-radius:16px;box-shadow:0 26px 30px -12px rgba(15,18,62,.20); opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s} .mainnav__sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* mostek nad szczeliną: kursor nie gubi menu */ .mainnav__drop:hover .mainnav__sub,.mainnav__drop:focus-within .mainnav__sub{opacity:1;visibility:visible;transform:none; transition:opacity .2s,transform .2s var(--ease)} /* Esc zamyka mimo kursora/fokusu (skrypt w stopce dodaje .is-zamkniete; ta sama specyficzność, stoi później) */ .mainnav__drop.is-zamkniete .mainnav__sub{opacity:0;visibility:hidden;transform:translateY(6px)} .mainnav__drop.is-zamkniete .mainnav__chev{transform:none} .site-header .mainnav__sub a:not(.mainnav__cta){display:block;padding:12px 14px;border-radius:10px;color:var(--head); font-weight:500;letter-spacing:.08em;white-space:nowrap} .site-header .mainnav__sub a:not(.mainnav__cta)::after{display:none} .site-header .mainnav__sub a:not(.mainnav__cta):hover, .site-header .mainnav__sub a:not(.mainnav__cta):focus-visible{background:rgba(104,180,45,.12);color:var(--green-deep)} /* szuflada na telefonie: podstrony Warto wiedzieć wcięte pod pozycją, bez kreski między nią a podpunktami */ .mobilenav__links a:has(+ .mobilenav__podlinki){border-bottom:0} .mobilenav__podlinki{display:flex;flex-direction:column;padding:0 0 12px 38px;border-bottom:1px solid var(--hair)} .mobilenav__links .mobilenav__podlinki a{font-size:.86rem;letter-spacing:.08em;padding:9px 0;border-bottom:0;color:var(--text-soft)} /* Ten sam biały co belka (--bg-0 = #fff) i BEZ kreski u góry - patrz .site-header.mega-open. Cień pod całą bryłą (belka + panel), nie pod samą belką. */ /* Pasek z logo i CTA musi malowac NAD panelem mega. Przyczyna „uciętego cienia" pod przyciskiem: `.mega` jest pozycjonowana i ma z-index, a `.mainbar` nie - więc w obrębie belki panel malował się WYŻEJ i jego biel przykrywała dolną połowę różowej poświaty CTA (cień sięga 24 px poniżej przycisku, panel zaczyna się 17 px poniżej). Stąd twarda pozioma krawędź w połowie blasku. Naprawa u źródła: pasek dostaje własny, wyższy z-index niż panel. */ .topbar,.mainbar{position:relative;z-index:2} .mega{position:absolute;top:100%;left:0;right:0;z-index:1; background:var(--bg-0); /* Cień MUSI padać wyłącznie w dół. Poprzedni `0 26px 54px` miał rozmycie większe niż przesunięcie, więc jego górna połowa wychodziła PONAD krawędź panelu i kładła szary welon na dolnej części belki - na całą szerokość. To był ten „inny kolor tła", który Marta zaznaczyła na zrzucie; belka i panel przez cały czas miały ten sam #fff. Warunek, żeby się nie powtórzyło: przesunięcie + |ujemny rozlew| > rozmycie. */ box-shadow:0 26px 30px -12px rgba(15,18,62,.20); animation:megaIn .26s var(--ease)} @keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ODDECH W MENU (2026-07-22, uwaga Marty „wszystko bardzo upchane"). Przestrzeń rozsunięta na KAŻDYM poziomie zagnieżdżenia, nie punktowo - inaczej powiększenie jednego odstępu tylko przesuwa ciasnotę o poziom niżej. */ .mega__inner{max-width:1680px;margin:0 auto;display:grid;grid-template-columns:300px 1fr; gap:clamp(28px,4vw,56px);padding:34px clamp(24px,5vw,72px) 40px} .mega__axes{display:flex;flex-direction:column;gap:6px;background:var(--bg-1); border:1px solid var(--hair);border-radius:18px;padding:12px} .mega__axis{display:flex;align-items:center;justify-content:space-between;gap:10px; font-family:var(--mono);font-weight:500;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--head);background:none;border:0;border-radius:12px;padding:17px 16px;cursor:pointer; text-align:left;transition:.22s var(--ease)} .mega__axis svg{width:16px;height:16px;color:var(--text-mute);flex:none;transition:.22s} .mega__axis:hover{background:rgba(104,180,45,.12)} .mega__axis.is-active{background:var(--surface);box-shadow:var(--sh-sm);color:var(--green-deep)} .mega__axis.is-active svg{color:var(--green);transform:translateX(3px)} /* ------------------------------------------------------------ STAŁA WYSOKOŚĆ PANELU (Marta 2026-07-23: „niech menu zawsze ma taką samą wysokość jak pozostałe osie - wyrównaj te produkty"). Zmierzone przed zmianą: 527 px (Dla kogo, Programy) do 636 px (Produkty, Projekty indywidualne) - menu podskakiwało o 109 px przy przełączaniu osi. Punkt odniesienia = najwyższa oś BEZ przewijania. Przy 1440 px jest nią „Place tematyczne": 10 kafli w 3 kolumnach = 4 rzędy, czyli 560 px. Osie ze zdjęciami równamy W DÓŁ do tej wartości, tak jak prosiła Marta. Jedna zmienna niżej steruje całością - okno przewijania dobiera się samo przez flex, bez wpisywania na sztywno drugiej liczby, która musiałaby zgadzać się z pierwszą. */ .mega{--stage:560px} .mega__stage{height:var(--stage)} .mega__panel{display:none} /* `height`, nie `min-height`. Przy `min-height` panel rósł razem z treścią, więc gdy siatka zawijała się na więcej rzędów (węższe okno), wysokości znów się rozjeżdżały - zmierzone przy 1200 px: od 560 do 815 px. Sztywna wysokość + flex sprawiają, że okno przewijania dostaje dokładnie tę resztę, która zostaje po nagłówku i pasku doradcy. Dzięki temu wszystkie pięć osi ma tę samą wysokość na KAŻDEJ szerokości ekranu. */ .mega__panel.is-active{display:flex;flex-direction:column;height:var(--stage)} /* pasek doradcy zawsze przy dolnej krawędzi panelu, nie tuż pod siatką - dzięki temu przy krótszych osiach nie wisi w połowie pustego pola */ .mega__panel.is-active .mega__help{margin-top:auto} /* Nagłówek osi: nazwa + jedna linijka wyjaśnienia, co klient właśnie ogląda (Marta 2026-07-22: „dajmy jakiś opis, żeby klient wiedział, co tu widzi"). Stoi NAD oknem przewijania, więc nie ucieka przy scrollowaniu siatki. */ /* min-height na dwie linie opisu. Bez tego oś z dłuższym opisem („Place tematyczne", 2 linie) miała nagłówek 80 px zamiast 60 i cały panel rósł o te 20 px - czyli wracał problem skaczącej wysokości, tylko innymi drzwiami. Teraz każdy nagłówek zajmuje tyle samo, niezależnie od długości tekstu. */ .mega__head{margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid var(--hair); min-height:80px} .mega__head h3{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.1em; text-transform:uppercase;color:var(--head);margin:0 0 4px} .mega__head p{font-family:var(--body);font-weight:400;font-size:13px;line-height:1.5; color:var(--text-soft);margin:0;max-width:76ch} /* wariant nagłówka z CTA „Zobacz cały katalog" (tylko panel Produkty) */ .mega__head--cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .mega__head--cta .mega__head-txt{min-width:0} .mega__allcta{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--green-deep);color:#fff; font-family:var(--btn);font-weight:700;font-size:13px;padding:12px 22px;border-radius:10px;text-decoration:none; transition:background .2s var(--ease),transform .2s var(--ease)} .mega__allcta svg{width:17px;height:17px} .mega__allcta:hover{background:var(--green);transform:translateY(-1px)} .mega__allcta:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px} /* ------------------------------------------------------------ OKNO PRZEWIJANIA + WIDOCZNY PASEK (Marta 2026-07-23) Wysokość NIE jest wpisana na sztywno - okno wypełnia to, co zostaje w panelu po nagłówku (`flex:1`), więc zmiana `--stage` wyżej wystarcza za całą regulację. `min-height:0` jest konieczny: bez niego element flex nie zwęża się poniżej swojej treści i przewijanie w ogóle się nie włącza. ------------------------------------------------------------ */ /* Żadnego `max-height` z ręcznie liczoną resztą. Panel ma sztywną wysokość, więc `flex:1` przydziela oknu dokładnie to, co zostaje po nagłówku i pasku doradcy - niezależnie od tego, czy dana oś ma pasek, czy nie. `min-height:0` jest konieczny: bez niego element flex nie zwęża się poniżej swojej treści i przewijanie się nie włącza. */ .mega__scrollwrap{position:relative;flex:1;min-height:0;display:flex} .mega__scroll{flex:1;min-height:0;overflow-y:auto;padding-right:14px} /* Pasek przewijania WIDOCZNY i w kolorze marki. macOS domyślnie rysuje paski nakładkowe, które same się chowają - użytkownik nie wie, że jest co przewijać. PUŁAPKA: Chrome IGNORUJE `::-webkit-scrollbar`, jeśli na tym samym elemencie ustawiono `scrollbar-width` albo `scrollbar-color`. Ustawienie obu naraz dawało pasek o szerokości 0 px (zmierzone) - czyli dokładnie nic. Dlatego każdy silnik dostaje SWOJĄ metodę: WebKit/Blink pseudoelementy poniżej, Firefox właściwości standardowe w bloku @supports. */ .mega__scroll::-webkit-scrollbar{width:11px} .mega__scroll::-webkit-scrollbar-track{background:var(--bg-2);border-radius:999px} .mega__scroll::-webkit-scrollbar-thumb{background:var(--green);border-radius:999px; border:2px solid var(--bg-2)} .mega__scroll::-webkit-scrollbar-thumb:hover{background:var(--green-deep)} @supports not selector(::-webkit-scrollbar){ .mega__scroll{scrollbar-width:auto;scrollbar-color:var(--green) var(--bg-2)} } /* Mgiełka przy dolnej krawędzi - druga, cichsza podpowiedź, że treść trwa dalej. Gaśnie, gdy użytkownik dojedzie do końca listy. */ .mega__scrollwrap::after{content:"";position:absolute;left:0;right:14px;bottom:0;height:64px; pointer-events:none;transition:opacity .3s; background:linear-gradient(rgba(255,255,255,0),var(--bg-0))} .mega__scrollwrap.na-dole::after{opacity:0} /* Pigułka „przewiń" z odbijającą się strzałką. Znika po pierwszym ruchu kółkiem - podpowiedź ma zniknąć, gdy przestaje być potrzebna, a nie mrugać w kółko. Tło --green-deep, NIE --green: biel na #68b42d ma 2,5:1, na #3f7318 ok. 5,5:1. */ .mega__hint{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%); display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px; background:var(--green-deep);color:#fff;box-shadow:0 10px 24px rgba(63,115,24,.34); font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; pointer-events:none;transition:opacity .35s;animation:hintSkok 1.9s var(--ease) infinite} .mega__hint svg{width:14px;height:14px} @keyframes hintSkok{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}} .mega__scrollwrap.ruszony .mega__hint, .mega__scrollwrap.bez-przewijania .mega__hint{opacity:0} .mega__scrollwrap.bez-przewijania::after{opacity:0} @media (prefers-reduced-motion:reduce){.mega__hint{animation:none;transform:translateX(-50%)}} /* ------------------------------------------------------------ KAFLE MEGA MENU - wybór Marty 2026-07-22 (explore/kafle-warianty.html): osie ze zdjęciami (Produkty, Projekty indywidualne) = WARIANT 1 „Karta", osie tekstowe (Place tematyczne, Dla kogo, Programy) = WARIANT 3 „Katalog". Wspólne dla obu: nazwa idzie Montserratem (--body), NIE Oswaldem. Oswald (--mono) zostaje wyłącznie przy liczbach. To była główna przyczyna „mało czytelne" - Oswald jest wąski i display'owy, a leciał w 11,5-13 px przy 35 nazwach naraz. Drugie źródło „wygląda jak mockup": ramka 1,5 px zamiast cienia, czyli język wireframe'u. Ramki zdjęte, wchodzi miękki cień. ------------------------------------------------------------ */ /* grid-auto-rows:1fr wyrównuje WSZYSTKIE wiersze do najwyższego - bez tego wiersz z dwuliniową nazwą był wyższy od pozostałych i kafle w jednej osi miały różne rozmiary. */ .mega__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:16px; grid-auto-rows:1fr} .mega__grid--foto{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px} /* --- kafel TEKSTOWY (wariant 3) - nazwa + licznik --- Treść WYŚRODKOWANA w pionie i poziomie (wybór Marty 2026-07-22) - tak samo jak w kaflach ze zdjęciem, więc całe menu mówi jednym językiem. min-height trzyma jednakową wysokość NIEZALEŻNIE od tego, ile kafel niesie treści: „Programy i dotacje" mają samą nazwę, „Dla kogo" nazwę + licznik, a wyglądają tak samo. Wartość ścięta ze 126 do 104 px po tym, jak licznik zszedł z dwóch linii do jednej. */ .mtile{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;min-height:104px;padding:16px 18px;border-radius:16px;background:var(--surface); box-shadow:0 1px 2px rgba(15,18,62,.05),0 8px 22px rgba(15,18,62,.06); transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s} .mtile__t{font-family:var(--body);font-weight:700;font-size:15px;line-height:1.25;color:var(--head)} /* Licznik w jednej linii: „63 produkty" zamiast liczby i osobnego podpisu pod spodem. Liczba zostaje Oswaldem (mocna), słowo idzie Montserratem (spokojne) - hierarchia bez chowania czegokolwiek za kryciem. Odmiana liczebnika wpisana ręcznie w HTML, bo polska gramatyka ma trzy formy (1 produkt / 63 produkty / 50 produktów). */ .mtile__c{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:7px; font-family:var(--body);font-weight:500;font-size:12.5px;line-height:1.2;color:var(--text-soft)} /* --green-deep, NIE --green. Zmierzone: #68b42d na białym kaflu daje 2,58:1, czyli poniżej progu WCAG AA nawet dla dużego tekstu (3:1). #3f7318 daje 5,71:1. To jest dokładnie ten podział, po co te dwa tokeny istnieją: --green do grafiki i obrysów, --green-deep do PISMA na jasnym tle. */ .mtile__c b{font-family:var(--mono);font-weight:600;font-size:20px;line-height:1;color:var(--green-deep)} /* na kaflach tagów tło i kolor pisma daje klasa .t-* (z !important) - napisy się pod nie podpinają. BEZ opacity: kolory tagów są dostrojone dokładnie do progu WCAG AA (4,5:1), więc każde przygaszenie zbija je PONIŻEJ progu. Hierarchię robi rozmiar (12,5 px vs 15 px) i grubość (500 vs 700), nie krycie. */ .mtile--tag .mtile__t,.mtile--tag .mtile__c,.mtile--tag .mtile__c b{color:inherit} /* --- kafel ZE ZDJĘCIEM (wariant 1) --- */ .mtile--foto{display:block;padding:13px 13px 17px;border-radius:18px;background:var(--surface); box-shadow:0 1px 2px rgba(15,18,62,.05),0 8px 22px rgba(15,18,62,.06); transition:transform .24s var(--ease),box-shadow .24s var(--ease)} /* Kontener ma wysokość z aspect-ratio, więc obrazek pozycjonujemy absolutnie - przy height:100% na gridzie wysokość zapadała się do zera. display:block jest konieczny: na inline span aspect-ratio nie działa. */ .mtile__img{display:block;width:100%;aspect-ratio:4/3;border-radius:12px; position:relative;overflow:hidden;transition:background .24s; background:radial-gradient(120% 92% at 50% 12%,#f2fae9 0%,#ffffff 72%)} .mtile__img img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px); object-fit:contain} .mtile__n{display:block;margin-top:11px;text-align:center; font-family:var(--body);font-weight:600;font-size:13.5px;line-height:1.3;color:var(--head)} .mtile--foto:hover .mtile__img{background:radial-gradient(120% 92% at 50% 12%,#e7f7d5 0%,#ffffff 74%)} /* ------------------------------------------------------------ ZIELONE PODŚWIETLENIE NA HOVER - jedna reguła dla wszystkich kafli menu: tekstowych, tagów i tych ze zdjęciem. Świeci wyłącznie POŚWIATA POD kaflem. Obrys `0 0 0 2px` zdjęty na prośbę Marty (2026-07-23: „obwódka zielona do usunięcia, chciałam tylko podświetlenie pod kaflami"). Poświata zamiast podmiany tła działa tak samo na białym kaflu i na kolorowym kaflu tagu, gdzie zamiana tła zabiłaby kolor świata - a ten niesie znaczenie. Reguła MUSI stać po `.mtile--foto`, bo ma tę samą wagę - wcześniej wariant ze zdjęciem nadpisywałby ją swoim własnym, szarym cieniem. Kafel akcji ma własny hover (pełne zielone wypełnienie) i dopisany jest NIŻEJ, więc świadomie wygrywa z tą regułą. ------------------------------------------------------------ */ .mtile:hover,.mtile--foto:hover{transform:translateY(-3px); box-shadow:0 3px 8px rgba(63,115,24,.12),0 16px 36px rgba(104,180,45,.32)} /* --- kafel AKCJI - przebudowany 2026-07-22 (Marta: „te zielone przyciski są brzydkie") --- Diagnoza: pełna zieleń w kafelku o TYM SAMYM kształcie i rozmiarze co kafle danych. Blok maksymalnie nasyconego koloru wśród pasteli przejmował całą uwagę i rozbijał rytm siatki - czytało się jak błąd, nie jak zaproszenie. Zamiast tego kafel-widmo: biały, zielony obrys, zielony napis i sześciokątny znak „+" w kształcie z logo. Zieleń wjeżdża dopiero na hover, czyli wtedy, gdy jest odpowiedzią na intencję użytkownika, a nie krzykiem na starcie. */ .mtile--akcja{display:grid;place-items:center;gap:11px;text-align:center; background:var(--surface);color:var(--green-deep); box-shadow:inset 0 0 0 1.5px var(--hair-green),0 1px 2px rgba(15,18,62,.05); font-family:var(--body);font-weight:700;font-size:15px;line-height:1.25} .mtile--akcja .mtile__t{color:var(--green-deep)} /* sześciokąt z „+" - ten sam kształt co znak w logo. Pomijamy go na kaflu „Twój kolor", bo tam rolę znaku pełni kółko z paletą barw. */ .mtile--akcja:not(.mtile--kolor)::before{content:"+";display:grid;place-items:center; width:32px;height:37px;background:var(--green-pale);color:var(--green-deep); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); font-family:var(--mono);font-weight:400;font-size:21px;line-height:1;transition:.22s var(--ease)} /* Wypełnienie hover to --green-deep, nie --green: biały napis na #68b42d ma ~2,5:1, na #3f7318 ~5,5:1, czyli powyżej progu AA. Wcześniej ten kafel stał na jasnej zieleni z białym napisem NA STAŁE - to była realna wada kontrastu, nie tylko kwestia gustu. */ .mtile--akcja:hover{transform:translateY(-3px);background:var(--green-deep);color:#fff; box-shadow:inset 0 0 0 1.5px var(--green-deep),0 16px 34px rgba(63,115,24,.26)} .mtile--akcja:hover .mtile__t{color:#fff} .mtile--akcja:hover::before{background:rgba(255,255,255,.92)} /* „Twój kolor" ma być takim samym kaflem jak pozostałe (Marta 2026-07-22) - wcześniej rozpychał się na dwie kolumny. */ .mtile--kolor{grid-column:auto} .mtile--kolor em{font-style:normal;font-family:var(--body);font-weight:400;font-size:11.5px; letter-spacing:0;line-height:1.45;color:var(--text-soft)} .mtile--kolor:hover em{color:rgba(255,255,255,.92)} /* obwódka palety była biała - na kaflu-widmo (białym) znikała. Teraz neutralna, biała wraca dopiero na hover, gdy kafel jest ciemnozielony. */ .mtile__paleta{width:38px;height:38px;border-radius:50%;border:2px solid rgba(15,18,62,.12); background:conic-gradient(#dd19b2,#68b42d,#12508F,#9C4F0E,#6C34A8,#dd19b2)} .mtile--kolor:hover .mtile__paleta{border-color:rgba(255,255,255,.85)} /* pasek doradcy pod siatką */ .mega__help{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,56px); margin-top:26px;padding:20px 26px;border-radius:16px;background:var(--bg-1);border:1px solid var(--hair)} .mega__help-t b{display:block;font-size:.94rem;color:var(--head);font-weight:700} .mega__help-t span{font-size:.84rem;color:var(--text-soft)} .mega__help-i{display:flex;flex-direction:column;gap:2px;padding-left:clamp(16px,3vw,34px); border-left:1px solid var(--hair);transition:.22s} .mega__help-i:hover{transform:translateY(-2px)} .mega__help-k{font-family:var(--mono);font-weight:300;font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--text-mute)} .mega__help-i b{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--green-deep)} /* 981-1100 px: pełne menu (938 px + logo) się nie mieści. Do 07.10 chowaliśmy tu „Produkty” i lupę, a hamburger jest dopiero od 980 px - katalogu nie dało się otworzyć (pomiar 07.10). Wariant B Marty: „Produkty” zostaje, lupa znika, pasek ciaśniejszy. Zapas przy 981 px: 56 px. Nowa pozycja w menu = zmierzyć ponownie. */ @media (max-width:1100px){ /* lupa wraca przy 981-1100 (Marta 07.10, spec 81; zapas logo-menu 24 px przy 981) */ .mainnav{gap:15px} .mainnav > a:not(.mainnav__cta),.mainnav__drop > a:not(.mainnav__cta),.mainnav__mega{letter-spacing:.07em;font-size:11.5px} .mainnav__cta{padding-left:16px;padding-right:16px;font-size:12px} } @media (max-width:980px){ .mega{display:none} } /* ============================================================ PASEK REFORMA26 KOMPAS JUTRA - przypięty na dole każdej strony (Marta 2026-10-05: wariant granat z makiety „pasek na dole”). --kj-h = wysokość paska: o tyle body ma odstęp na dole (stopka nie chowa się pod paskiem), a hero strony głównej jest niższe (pasek tematów nie ląduje pod paskiem). Menu mobilne (.mobilenav, z-index 90) przykrywa pasek - celowo. ============================================================ */ :root{--kj-h:50px} body{padding-bottom:var(--kj-h)} .hero{min-height:calc(100vh - var(--kj-h));min-height:calc(100svh - var(--kj-h))} .kj-bar{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--navy);color:#fff; box-shadow:0 -8px 28px rgba(15,18,62,.22);font-family:Montserrat,sans-serif} .kj-bar a{display:flex;align-items:center;justify-content:center;gap:12px;height:var(--kj-h);padding:0 20px; color:#fff;font-weight:500;font-size:15px;line-height:1.2;text-decoration:none} .kj-bar svg{color:var(--green);flex:none} .kj-bar b{color:var(--green);font-weight:800} .kj-bar__krotko{display:none} .kj-bar__cta{margin-left:8px;padding:6px 14px;border-radius:999px;background:var(--green);color:var(--navy); font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .2s} .kj-bar a:hover .kj-bar__cta,.kj-bar a:focus-visible .kj-bar__cta{background:var(--green-light)} .kj-bar a:focus-visible{outline:2px solid var(--green-light);outline-offset:-4px} @media (max-width:700px){ :root{--kj-h:44px} .kj-bar a{gap:8px;padding:0 12px;font-size:12.5px} .kj-bar__dlugo{display:none} .kj-bar__krotko{display:inline} .kj-bar__cta{margin-left:2px;padding:5px 10px;font-size:10px} } .wip-toast{bottom:calc(var(--kj-h) + 16px)} /* dymek „w przygotowaniu” nad paskiem */ @media print{.kj-bar{display:none}body{padding-bottom:0}} /* Cały kafel = link (Marta 07.10): link kafla rozciągnięty na całą kartę (zdjęcie, play, tekst). href="#" = kafel czeka na podstronę (np. Pruszcz Gdański) i zostaje nieklikalny. */ .refcard,.prod,.post{position:relative} .speccard__title a{color:inherit;text-decoration:none} .speccard__title a::after, :is(.actcard,.refcard,.prod,.post) a.actcard__go:not([href="#"])::after{content:"";position:absolute;inset:0;z-index:2} .speccard:has(a)::after{z-index:1} :is(.speccard__title a,a.actcard__go):focus-visible{outline:none} :is(.speccard,.actcard,.refcard,.prod,.post):has(:is(.speccard__title a,a.actcard__go):focus-visible){outline:3px solid var(--green);outline-offset:3px}