/* 04-karty-i-kafelki.css: Karty i kafelki: tile, fact, mini, logotypy partnerów, kafelki logowania, plakietki firmy. Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */ /* Karty i kafelki */ /* Kafelek z ikoną: pasek 4 kafelków pod hero */ .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,5vw,64px)} .tile{display:flex;align-items:center;gap:var(--gap);padding:22px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);transition:transform .25s,border-color .25s} .tile:hover{transform:var(--lift);border-color:var(--line-strong)} .tile p{font-size:.97rem;line-height:1.45} .tile strong{color:var(--blue);font-weight:800} @media (max-width:1100px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.strip{grid-template-columns:minmax(0,1fr)}} /* Fakt z broszury: ikona + zdanie z pogrubioną liczbą */ .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .facts:not(.facts--3)>:last-child:nth-child(odd){grid-column:1/-1} /* nieparzysty ostatni fakt na całą szerokość, bez samotnej karty */ .fact{padding:22px;border-radius:var(--r);background:var(--white);border:1px solid var(--line-strong);transition:transform .25s} .fact:hover{transform:var(--lift)} .fact p{margin-top:14px;font-size:.97rem;line-height:1.45} .fact strong{color:var(--blue);font-weight:800} .facts--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr} /* wszystkie kafelki tej samej wysokości (właściciel 28.09) */ @media (max-width:900px){.facts--3{grid-template-columns:minmax(0,1fr)}} .fact-stack{display:grid;gap:var(--gap);align-content:start} .fact-stack .fact p{margin-top:0} .lead+.fact-stack,.lead+.facts,h2+.fact-stack,h2+.facts{margin-top:clamp(20px,3vw,28px)} @media (max-width:600px){.facts{grid-template-columns:minmax(0,1fr)}} /* Mini-kafelki w karcie modułu */ .mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px} .mini li{padding:12px 14px;border-radius:var(--r-xs);background:var(--pale-2);border:1px solid var(--line);font-size:.9rem;line-height:1.4} .mini strong{color:var(--blue);font-weight:800} @media (max-width:560px){.mini{grid-template-columns:minmax(0,1fr)}} /* Logotypy partnerów (Nasi partnerzy): białe pola tej samej wielkości, logo w całości */ .logos{--w-rzedzie:6;display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .logos li{flex:0 0 calc((100% - (var(--w-rzedzie) - 1) * 14px) / var(--w-rzedzie));display:flex;align-items:center;justify-content:center;height:104px;padding:10px 14px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);overflow:hidden} .logos img{max-width:100%;max-height:80px;width:auto;height:auto;object-fit:contain} .logos img.logos__kwadrat{max-height:60px} .logos--male{--w-rzedzie:2;justify-content:flex-start} .logos__zaproszenie{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;color:var(--ink);font-weight:700;font-size:1.05rem;text-align:center} /* Patronat medialny w nagłówku strony partnerów */ .patronat{padding:20px;border-radius:var(--r);background:var(--pale);border:1px solid var(--line)} .patronat__h{margin:0 0 12px;font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)} @media (max-width:1000px){.logos{--w-rzedzie:4}.logos--male{--w-rzedzie:2}} @media (max-width:560px){.logos{--w-rzedzie:2}.logos li{height:92px}.logos img{max-height:70px}.logos img.logos__kwadrat{max-height:54px}} /* Kafelki logowania (Logowanie): 4 równe karty z logo i opisem, na dole adres albo przyciski sklepów; login--glowny wyróżniony na niebiesko. Cała karta jest klikalna: link login__cel na logo rozciąga się na kartę (::after), przyciski sklepów leżą nad nim. Po najechaniu: karta się unosi, dostaje niebieski cień, światło i jaśniejsza ramka idą za kursorem (qs.js, sekcja 12), logo lekko rośnie, w rogu wjeżdża strzałka (na telefonie strzałka widoczna stale) */ .logins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(32px,4vw,48px)} .login{--mx:50%;--my:0%;--bw:1px;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:6px;padding:26px 24px;border-radius:var(--r);background:var(--white);border:var(--bw) solid var(--line)} .js .login.reveal,.login{transition:opacity .7s var(--ease),transform .7s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease),border-color .3s} .login::before,.login::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)} .login::before{inset:calc(var(--bw)*-1);padding:var(--bw);background:radial-gradient(220px circle at var(--mx) var(--my),var(--spot-line),transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .login::after{inset:0;z-index:-1;background:radial-gradient(340px circle at var(--mx) var(--my),var(--spot),transparent 70%)} .login:hover{translate:0 -6px;box-shadow:var(--shadow-lift);border-color:var(--line-strong)} .login:hover::before,.login:hover::after{opacity:1} .login__logo{display:block;width:auto;height:58px;margin:0 auto 14px;transition:transform .5s var(--ease)} .login:hover .login__logo{transform:scale(1.06)} .login__opis{font-size:.93rem;line-height:1.5} .login__adres{margin-top:auto;padding-top:18px;font-size:var(--fs-sm);font-weight:700;color:var(--blue)} .login .login__akcje{margin-top:auto;padding-top:18px;width:100%} .login__akcje.stores{grid-template-columns:minmax(0,1fr);gap:8px} .login__akcje .store{width:100%;justify-content:center} .login--glowny{--bw:2px;border-color:var(--blue)} .login--glowny:hover{border-color:var(--blue)} .login__cel::after{content:"";position:absolute;inset:calc(var(--bw)*-1);border-radius:var(--r);z-index:1} .login a:not(.login__cel){position:relative;z-index:2} .login__strzalka{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);background:var(--pale);color:var(--blue);opacity:0;translate:-8px 8px;transition:opacity .35s var(--ease),translate .35s var(--ease),background .35s,color .35s} .login__strzalka svg{width:16px;height:16px;rotate:-45deg} .login:hover .login__strzalka{opacity:1;translate:none;background:var(--grad);color:var(--white);box-shadow:var(--shadow-btn)} .login:has(.login__cel:focus-visible){outline:3px solid var(--focus);outline-offset:3px} .login__cel:focus-visible{outline:none} @media (hover:none){.login:hover{translate:none;box-shadow:none}.login:hover .login__logo{transform:none}.login__strzalka{opacity:1;translate:none}} @media (prefers-reduced-motion:reduce){.login:hover{translate:none}.login:hover .login__logo{transform:none}} @media (max-width:1100px){.logins{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.logins{grid-template-columns:minmax(0,1fr)}} /* Plakietka firmowa (O firmie) */ .badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,5vw,64px)} .badges--3{grid-template-columns:repeat(3,minmax(0,1fr))} .badge{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--r);background:linear-gradient(135deg,var(--pale) 0%,var(--pale-3) 100%);border:1px solid var(--line-strong);transition:transform .25s} .badge:hover{transform:var(--lift)} .badge .ico{background:var(--white);color:var(--blue)} .badge b{display:block;color:var(--ink);font-size:1.05rem;font-weight:800} .badge b+span{display:block;margin-top:2px;font-size:.9rem} @media (max-width:1100px){.badges{grid-template-columns:repeat(2,minmax(0,1fr))}.badges--3{grid-template-columns:minmax(0,1fr)}} @media (max-width:600px){.badges{grid-template-columns:minmax(0,1fr)}} /* Punkty z ✓ (zakładki flot na stronie głównej):