/* ========================================================== Premium — jedna skala urządzeń (0.15.20) Do tej pory każdy plik miał własny próg: 380, 560, 600, 620, 640, 700, 760 i 820 px. Powstawały przez to pasma, w których jedna część strony była już „desktopowa”, a druga jeszcze „mobilna” (np. 560–620 px albo 760–768 px). Od tego wydania cały panel Premium używa tych samych stopni: mały telefon max-width: 379px telefon max-width: 599px tablet min-width: 600px and max-width: 1023px tablet mały max-width: 767px (telefon poziomo, mały tablet) tablet duży min-width: 768px (tablet pionowo) desktop min-width: 1024px desktop szeroki min-width: 1280px Ten plik trzyma reguły wspólne dla wszystkich powierzchni Premium. Układy poszczególnych widoków są w ich własnych arkuszach, ale korzystają z tych samych progów. ========================================================== */ .hspe-premium-nav, .hspe-account-page, .hspe-premium-offer, .hspe-control-center, .hspe-compass, .hspe-account-history, .hspe-premium-report{ /* Minimalne pole dotykowe i podłoga wielkości pisma, używane przez wszystkie widoki Premium. */ --hspe-tap:44px; --hspe-tap-comfort:48px; --hspe-type-floor:12.5px; } /* ---------------------------------------------------------- 1. Tabele w raporcie Premium Raport ma tabele o pięciu kolumnach. Przy 320–414 px ich zawartość była szersza niż ekran i przewijała całą stronę w poziomie. Tabela dostaje teraz własne przewijanie w swojej karcie, zamiast rozpychać dokument. ---------------------------------------------------------- */ .hspe-premium-report__scroll{ max-width:100%; margin:12px 0 18px; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .hspe-premium-report__scroll:focus-visible{ outline:3px solid #8e4869; outline-offset:3px; border-radius:6px; } .hspe-premium-report__scroll > table{margin:0} .hspe-premium-report__scroll[data-hspe-scrollable="1"]{ /* Cień na krawędzi mówi, że tabela ma dalszy ciąg w bok. */ background: linear-gradient(90deg,#fffdf9 30%,rgba(255,253,249,0)) left / 26px 100% no-repeat, linear-gradient(270deg,#fffdf9 30%,rgba(255,253,249,0)) right / 26px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(58,38,62,.14),rgba(58,38,62,0)) left / 11px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(58,38,62,.14),rgba(58,38,62,0)) right / 11px 100% no-repeat; background-attachment:local,local,scroll,scroll; } /* Gdy skrypt nie zdążył owinąć tabeli (albo jest wyłączony), tabela i tak nie rozpycha strony. */ .hspe-premium-report table{max-width:100%} @media (max-width:1023px){ .hspe-premium-report :not(.hspe-premium-report__scroll) > table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* ---------------------------------------------------------- 2. Pola dotykowe „Szczegóły obliczeniowe” w raporcie to o wysokości 28 px — za mało, żeby trafić kciukiem. ---------------------------------------------------------- */ @media (max-width:1023px){ /* Bez zmiany display, żeby został natywny trójkąt rozwijania. */ .hspe-premium-report summary, .hspe-compass__birth summary{ min-height:var(--hspe-tap,44px); padding:11px 4px; line-height:1.45; } .hspe-premium-report__cta{ display:inline-flex; align-items:center; min-height:var(--hspe-tap-comfort,48px); } } /* ---------------------------------------------------------- 3. Podłoga wielkości pisma Nadkreślenia i podpisy miały 11–11,5 px. Na desktopie to jeszcze uchodzi, na telefonie nie. Tekst drugorzędny nie schodzi na telefonie i tablecie poniżej 12,5 px. ---------------------------------------------------------- */ /* Podłoga wielkości pisma obowiązuje na każdej szerokości. */ .hspe-premium-type-floor-marker{display:none} @media all{ .hspe-premium-offer__eyebrow, .hspe-account-card__eyebrow, .hspe-account-page__eyebrow, .hspe-control-center__eyebrow, .hspe-account-history__privacy, .hspe-premium-offer__price-note, .hspe-premium-offer__notice, .hspe-compass__hero-kicker, .hspe-compass__kicker, .hspe-compass__demo-status-tag, .hspe-compass__demo-method, .hspe-premium-report__status, .hspe-history-item small{ font-size:max(var(--hspe-type-floor,12.5px),.78rem); letter-spacing:.1em; } .hspe-compass__story-media figcaption, .hspe-premium-report__evidence, .hspe-premium-report th{ font-size:max(var(--hspe-type-floor,12.5px),.8rem); } /* Każdy drugorzędny w panelu Premium — było 11 px. */ .hspe-account-page small, .hspe-premium-offer small, .hspe-control-center small, .hspe-compass small, .hspe-account-history small, .hspe-premium-report small, .hspe-synastry-scorecard small{font-size:max(var(--hspe-type-floor,12.5px),.8rem)} } /* ---------------------------------------------------------- 4. Długie etykiety w przyciskach motywu Przyciski .hs-btn pochodzą z motywu. Wewnątrz bloków Premium pilnujemy tylko tego, żeby długa etykieta mogła się zawinąć zamiast rozpychać kartę (domyślne min-width:auto elementu flex potrafi to zrobić). ---------------------------------------------------------- */ .hspe-premium-offer .hs-btn, .hspe-account-page .hs-btn, .hspe-control-center .hs-btn, .hspe-compass .hs-btn{ max-width:100%; min-width:0; text-align:center; overflow-wrap:anywhere; } .hspe-premium-offer .hs-btn > :not([aria-hidden="true"]), .hspe-account-page .hs-btn > :not([aria-hidden="true"]), .hspe-control-center .hs-btn > :not([aria-hidden="true"]), .hspe-compass .hs-btn > :not([aria-hidden="true"]){min-width:0} /* Strzałka to pojedynczy znak — nie wolno jej ścisnąć do zera. */ .hspe-premium-offer .hs-btn > [aria-hidden="true"], .hspe-account-page .hs-btn > [aria-hidden="true"], .hspe-control-center .hs-btn > [aria-hidden="true"], .hspe-compass .hs-btn > [aria-hidden="true"]{flex:0 0 auto} /* ---------------------------------------------------------- 5. Nic nie wystaje poza ekran ---------------------------------------------------------- */ .hspe-premium-nav, .hspe-account-page, .hspe-premium-offer, .hspe-control-center, .hspe-compass, .hspe-premium-report{max-width:100%} .hspe-premium-report img, .hspe-compass img, .hspe-control-center img{max-width:100%;height:auto} /* ---------------------------------------------------------- 6. Pudełka liczone po krawędzi .hspe-premium-offer i brama Premium nie miały box-sizing, więc przycisk z width:100% plus wewnętrzny margines wystawał poza kartę i rozpychał stronę na telefonie. ---------------------------------------------------------- */ .hspe-premium-offer, .hspe-premium-gate, .hspe-account-history, .hspe-synastry-scorecard{box-sizing:border-box} .hspe-premium-offer *, .hspe-premium-gate *, .hspe-account-history *, .hspe-synastry-scorecard *{box-sizing:border-box} /* ---------------------------------------------------------- 7. Pola formularzy, które nie chcą się zwęzić Reguły dla konta; odpowiedniki dla AstroKompasu są w astrocompass.css, bo ten arkusz ładuje się później. ---------------------------------------------------------- */ .hspe-account-card input, .hspe-synastry-name-field input{min-width:0;max-width:100%}