/* 07-strona-glowna.css: Strona główna: hero, pokaz modułów (zakładki), Czym jest PractiQS, rząd zastosowań. Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */ /* Hero strony głównej */ .hero{position:relative;overflow:clip;padding-block:clamp(40px,5vw,64px) clamp(64px,8vw,104px);background:linear-gradient(180deg,var(--white) 0,var(--white) calc(100% - clamp(160px,24vh,280px)),var(--pale) 100%)} /* pierwsza sekcja zawsze biała, u dołu płynnie w jasnoniebieski sekcji z mockupem; pod nią jasnoniebieska sekcja z mockupem, dalej tła na przemian */ .hero__text{text-align:center;max-width:920px;margin-inline:auto} .hero h1 .grad{display:block;padding-bottom:.06em} @media (max-width:600px){.hero h1{font-size:clamp(2rem,10.8vw,2.75rem)}} /* telefony: tytuł tak duży, jak się da, obie linie w jednym wierszu (375 px: ok. 40 px) */ .hero__lead{margin:24px auto 0;font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:660px} .hero__cta{justify-content:center;margin-top:34px} /* Grafika hero (strona główna): jeden obraz z oknem aplikacji, telefonem i kartą QSensor FuelCap; źródło: narzedzia/grafiki/grafika-hero.html, plik media/hero-qsensor-fuelcap.png */ .hero__shot{position:relative} /* Sekcja pod nagłówkiem: główny obraz (mockup) i pasek kafelków (.strip) */ .hero-pokaz{padding-block:clamp(40px,5vw,64px) clamp(64px,8vw,104px)} /* tło z klasy bg-pale */ /* jasna droga ze smugami świateł (assets/js/hyperspeed.js) na pierwszym ekranie strony głównej. Klasę hyper-ok na dodaje skrypt w (szerszy ekran, bez „ogranicz ruch”): tytuł, tekst i przyciski na całym pierwszym ekranie na tle drogi (droga widoczna dopiero pod przyciskami, --hyper-od), mockup w sekcji .hero-pokaz pod nagłówkiem. --hyper-h liczy hyperspeed-start.js (ekran pod nawigacją) */ @media (min-width:760px){ .hyper-ok .hero{--hyper-h:calc(100svh - var(--header) - 44px);padding-top:clamp(24px,4vh,64px);padding-bottom:0} .hyper-ok .hero>.container{position:relative;z-index:2} .hyper-ok .hero__text{min-height:calc(var(--hyper-h) - clamp(24px,4vh,64px));display:flex;flex-direction:column;justify-content:flex-start} /* niskie ekrany (laptopy 720 px i mniej): tytuł i odstępy skalowane wysokością, żeby pod przyciskami zostało miejsce na drogę */ .hyper-ok .hero h1{font-size:min(var(--fs-h1),8.6vh)} .hyper-ok .hero__lead{margin-top:min(24px,2.6vh)} .hyper-ok .hero__cta{margin-top:min(34px,3.6vh)} /* scena o środku (horyzoncie, gdzie droga znika w dali) na linii --hyper-od pod przyciskami i dole na końcu pierwszego ekranu; górna połowa schowana maską */ .hyper{position:absolute;left:0;right:0;top:calc(2 * var(--hyper-od,55%) - var(--hyper-h));height:calc(2 * (var(--hyper-h) - var(--hyper-od,55%)));z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 48%,#000 56%,#000 84%,transparent 99%);mask-image:linear-gradient(180deg,transparent 48%,#000 56%,#000 84%,transparent 99%);opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none} .hyper.is-on{opacity:1} .hyper canvas{display:block;width:100%;height:100%} .hyper-ok .hero::after{content:"";position:absolute;inset:0 0 auto;height:var(--hyper-h);z-index:1;pointer-events:none;background:radial-gradient(52% 34% at 50% 34%,rgba(255,255,255,.92),rgba(255,255,255,0) 76%)} /* jasne pole pod tytułem i tekstem */ } @media (max-width:759px){.hyper{display:none}} .hyper-podglad .hero__shot .placeholder{visibility:hidden} /* Pokaz modułów (zakładki) */ /* Bez JS: wszystkie karty modułów jedna pod drugą; z JS: lista + karta. Reguły „z JS” działają też w podglądzie edytora (.qs-sekcja-podglad), gdzie qs.js nie działa: ten sam układ co na stronie */ .tabs{display:none} .panels{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,64px)} /* kolumna nie szersza niż karta, także przy długim tekście w ramce */ .panel{display:flex;flex-direction:column;align-items:stretch;gap:clamp(20px,3vw,40px)} .panel__text{order:2;padding:4px 6px;flex:1;display:flex;flex-direction:column} .panel .media{margin:0;overflow:hidden;border-radius:var(--r)} /* overflow: zdjęcie przybliża się po zmianie zakładki w obrębie ramki */ .panel .media img{aspect-ratio:5/2;object-fit:cover} .panel .placeholder{aspect-ratio:5/2} .panel__head{display:flex;align-items:baseline;gap:12px} .panel__num{display:inline-block;font-size:var(--fs-xs);font-weight:800;color:var(--blue);letter-spacing:.08em} .panel__text h3{font-size:1.25rem} .panel__text>p{margin-top:6px} :is(.js,.qs-sekcja-podglad) .showcase{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start} :is(.js,.qs-sekcja-podglad) .tabs{display:flex;flex-direction:column;gap:4px} .tab{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:100%;text-align:left;padding:8px 12px 8px 8px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;cursor:pointer;transition:background .25s,border-color .25s} .tab:hover{background:var(--pale)} .bg-pale .tab:not([aria-selected="true"]):hover{background:var(--white)} .tab__num{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2xs);background:var(--pale);color:var(--blue);font-weight:800;font-size:.78rem;transition:background .25s,color .25s} .tab__name{display:block;font-weight:700;color:var(--ink);line-height:1.3;font-size:.95rem} .tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue)} .tab[aria-selected="true"] .tab__num{background:var(--white);color:var(--blue)} .tab[aria-selected="true"] .tab__name{color:var(--white)} :is(.js,.qs-sekcja-podglad) .stage{position:relative;align-self:start;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,1.8vw,22px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)} :is(.js,.qs-sekcja-podglad) .panels{position:relative;gap:0} :is(.js,.qs-sekcja-podglad) .panel{grid-area:1/1;align-self:stretch;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s} :is(.js,.qs-sekcja-podglad) .panel.is-active{opacity:1;visibility:visible;transition:opacity .35s ease .05s,visibility 0s} /* Link do strony zawsze w tym samym miejscu, na dole karty (panele mają wysokość najwyższego) */ .panel__text>.mini{margin-bottom:28px} .panel__text>.more{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);align-self:stretch} /* Po zmianie zakładki: zdjęcie lekko się przybliża, nazwa i punkty wjeżdżają po kolei */ .is-ruch .panel.is-active .media img{animation:zdj-wjazd .6s var(--ease) both} .is-ruch .panel.is-active .panel__head{animation:mini-wjazd .35s var(--ease) .05s both} @keyframes zdj-wjazd{from{opacity:.3;transform:scale(1.05)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.is-ruch .panel.is-active .media img,.is-ruch .panel.is-active .panel__head{animation:none}} :is(.js,.qs-sekcja-podglad) .stage .panel:focus-visible{outline-offset:-4px} @media (max-width:900px){ :is(.js,.qs-sekcja-podglad) .showcase{grid-template-columns:minmax(0,1fr);gap:var(--gap)} /* zakładki przewijane w bok (telefon, tablet): zanikanie przy prawej krawędzi mówi, że jest więcej; odstęp po ostatniej zakładce: po przewinięciu do końca wypada poza zanikanie */ :is(.js,.qs-sekcja-podglad) .tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none;padding-right:15%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} :is(.js,.qs-sekcja-podglad) .tabs::-webkit-scrollbar{display:none} .tab{flex:none;width:auto;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px 6px 6px} .tab__name{white-space:nowrap;font-size:.9rem} .tab__num{border-radius:50%;width:28px;height:28px} :is(.js,.qs-sekcja-podglad) .stage{padding:10px} /* telefon: karta ma wysokość aktywnego modułu, nie najdłuższego */ :is(.js,.qs-sekcja-podglad) .panel:not(.is-active){position:absolute;inset:0 0 auto} } /* Czym jest PractiQS: role + konto */ .who{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 var(--gap);align-items:stretch} .who>div:first-child{display:contents} .who__sub{grid-column:1;grid-row:1;font-size:1.05rem;margin-bottom:16px} .who .roles{grid-column:1;grid-row:2;grid-template-rows:auto auto 1fr} .who .account{grid-column:2;grid-row:2} .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)} .role{display:flex;gap:var(--gap);align-items:flex-start;padding:24px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);transition:transform .25s,border-color .25s} .role:hover{transform:var(--lift);border-color:var(--line-strong)} .role strong{display:block;color:var(--ink);font-size:1.05rem;font-weight:800} .role strong+span{display:block;margin-top:4px;font-size:.93rem} .role--wide{grid-column:1/-1;padding:0;overflow:hidden;align-items:stretch} .role__body{display:flex;gap:var(--gap);align-items:flex-start;padding:24px;flex:1} .role__img{flex:0 0 46%;position:relative;min-height:150px} .role__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .role__img::after{content:"";position:absolute;inset:0;background:var(--fade-white-r),var(--tint-blue)} .role__img .placeholder{position:absolute;inset:0;aspect-ratio:auto;padding:12px} .role__img:has(.placeholder)::after{display:none} /* Granatowa karta akcentu */ .account{position:relative;border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);color:var(--on-dark);overflow:hidden;background:var(--grad-navy)} .account h3{color:var(--white);font-size:1.3rem;margin-top:18px} .account .ico{background:linear-gradient(135deg,var(--sky),var(--sky-2));color:var(--navy-2)} @media (max-width:1100px){ .who{grid-template-columns:minmax(0,1fr)} .who .roles{grid-template-rows:none} .who .account{grid-column:1;grid-row:3;margin-top:16px} } @media (max-width:600px){ .roles{grid-template-columns:minmax(0,1fr)} .role--wide{flex-direction:column} .role__img{flex:none;aspect-ratio:16/9;min-height:0} .role__img::after{background:var(--fade-white-b)} }