/* MGM Banquet System - Stadium Edition v3 Font: Jost (bezszeryfowy, wagi 400-800) - bez fontów szeryfowych, bo w lożach bywa słabe światło i cienkie/szeryfowe litery są tam nieczytelne. Dwie szaty graficzne wybierane w adminie (MGM Planeta System → Wygląd aplikacji), sterowane klasą na : body.mgm-venue-slaski - Stadion Śląski (navy/orange-red/cyan) body.mgm-venue-gks - GKS Tychy (zielony/czarny/czerwony, wzór ze ściany na stadionie klubu) Zasada projektowa: cała "atmosfera" marki (header, pasek nawigacji, hero, stopka, tło strony) niesie kolorystykę stadionu. Wszystko, co gość musi faktycznie PRZECZYTAĆ i wypełnić (karta produktu, koszyk, checkout, potwierdzenie) stoi na jednej, gwarantowanie jasnej powierzchni - zero ryzyka słabego kontrastu w słabym świetle loży. */ /* Zabezpieczenie przed przesuwaniem się CAŁEJ strony w bok na telefonie (zgłoszone z produkcji 2026-08-24) - przy przeciąganiu poziomo scrollowanego paska kategorii (.mgm-cta-row) mobilne przeglądarki potrafią "przepuścić" gest przeciągania dalej, do całej strony, jeśli html/body nie mają jawnie zablokowanego przewijania w poziomie. Efekt: cały ekran (łącznie z headerem) jedzie w bok, odsłaniając tło pod nim. Patrz też overscroll-behavior-x na samym .mgm-cta-row niżej - to druga część tej samej poprawki. */ html, body { overflow-x: hidden; max-width: 100%; } /* =========================== Zmienne motywu - Stadion Śląski (domyślny) =========================== */ :root, body.mgm-venue-slaski { --mgm-bg: #001C44; --mgm-bg-solid: #001C44; --mgm-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(1100px 650px at 10% -12%, rgba(4, 209, 255, .30), transparent 55%), radial-gradient(1000px 620px at 105% 8%, rgba(253, 63, 21, .22), transparent 55%); --mgm-surface: #FFFFFF; --mgm-surface-alt: #F1F6FB; --mgm-border: #E1E9F2; --mgm-text: #001C44; --mgm-text-muted: #5A7091; --mgm-on-dark: #FFFFFF; --mgm-on-dark-muted: #A9C0DE; --mgm-accent: #FD3F15; --mgm-accent-text: #FFFFFF; --mgm-accent-2: #04D1FF; --mgm-accent-2-text: #001C44; --mgm-header-bg: #001C44; --mgm-header-border: rgba(4, 209, 255, .28); --mgm-footer-bg: #001127; --mgm-shadow-accent: 0 10px 26px rgba(253, 63, 21, .32); --mgm-glow: 0 0 0 3px rgba(4, 209, 255, .28); } /* =========================== Zmienne motywu - GKS Tychy =========================== */ body.mgm-venue-gks { --mgm-bg: #17130F; --mgm-bg-solid: #17130F; --mgm-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"), linear-gradient(90deg, #2FA84F 0%, #2FA84F 30%, #17130F 30%, #17130F 62%, #D6392E 62%, #D6392E 100%); --mgm-surface: #FFFFFF; --mgm-surface-alt: #F5F4EF; --mgm-border: #E7E3D9; --mgm-text: #1A1613; --mgm-text-muted: #6C6459; --mgm-on-dark: #FFFFFF; --mgm-on-dark-muted: #C9C2B5; --mgm-accent: #D6392E; --mgm-accent-text: #FFFFFF; --mgm-accent-2: #2FA84F; --mgm-accent-2-text: #FFFFFF; --mgm-header-bg: #17130F; --mgm-header-border: rgba(47, 168, 79, .32); --mgm-footer-bg: #100D0A; --mgm-shadow-accent: 0 10px 26px rgba(214, 57, 46, .32); --mgm-glow: 0 0 0 3px rgba(47, 168, 79, .30); } /* =========================== Global reset na stronach gościa =========================== */ body.woocommerce-shop, body.tax-product_cat, body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-order-received, body.error404, body.page-template-page-legal { background-color: var(--mgm-bg-solid) !important; background-image: var(--mgm-bg-image) !important; background-repeat: repeat, no-repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; background-position: 0 0, 0 0, 0 0 !important; font-family: 'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif !important; font-weight: 400 !important; color: var(--mgm-text) !important; } /* Strony bez trzeciej warstwy tła (GKS ma tylko 2 warstwy: noise + pasy) nie psują się przez dodatkowe "no-repeat" w skrócie powyżej - przeglądarka po prostu ignoruje nadmiarową pozycję/repeat dla nieistniejącej warstwy. */ /* =========================== Nasz header - logo =========================== */ .mgm-site-header { background: var(--mgm-header-bg); border-bottom: 1px solid var(--mgm-header-border); padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; height: 72px; position: sticky; top: 0; z-index: 9999; /* Znany błąd renderowania mobilnego Safari (iOS): position: sticky bez własnej warstwy kompozytorskiej potrafi "zniknąć" w trakcie aktywnego scrollowania i wrócić dopiero gdy scroll się zatrzyma (przeglądarka przelicza layout na nowo) - element sam w sobie jest cały czas poprawnie "przyklejony", ale nie jest przemalowywany na bieżąco. Wymuszenie własnej warstwy GPU (transform: translateZ(0)) każe Safari renderować element inną, poprawną ścieżką - standardowa poprawka na ten konkretny bug (2026-08-23, zgłoszone z testów na telefonie). */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mgm-site-header-inner { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 900px; position: relative; } /* Tytuł zamiast loga (logo na białym tle gryzło się z ciemnym headerem) - zwykły, mocny tekstowy wordmark w kolorach aktywnego stadionu. */ .mgm-brand-link { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-decoration: none !important; gap: .15rem; } /* inline-flex (nie flex) celowo - dzięki temu text-align:center w rodzicu (np. w stopce, która nie ma własnego flex-column jak .mgm-brand-link) poprawnie centruje cały wiersz zamiast przyklejać go do lewej. */ .mgm-brand-row { display: inline-flex; align-items: baseline; gap: .45rem; } .mgm-brand-title { font-family: 'Jost', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--mgm-on-dark); letter-spacing: .03em; text-transform: uppercase; } /* Celowo inny krój (Oswald zamiast Jost) - skondensowany akcent, żeby "Bar" odróżniał się od reszty wordmarku, tak jak prosił klient. */ .mgm-brand-bar { font-family: 'Oswald', 'Jost', sans-serif; font-size: 1rem; font-weight: 700; font-style: italic; color: var(--mgm-accent); letter-spacing: .02em; text-transform: uppercase; padding: .05rem .4rem; border: 1.5px solid var(--mgm-accent); border-radius: 5px; } .mgm-brand-sub { font-family: 'Jost', sans-serif; font-size: .62rem; font-weight: 600; color: var(--mgm-accent-2); letter-spacing: .38em; text-transform: uppercase; } .mgm-header-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: .75rem; } .mgm-header-step { font-family: 'Jost', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mgm-accent-2); white-space: nowrap; } /* Plakietka koszyka - stała, widoczna na każdej stronie gościa dopóki w koszyku jest choć 1 produkt (patrz mgm_banquet_mini_cart_badge() w mgm-banquet.php). Domyślnie ukryta (.is-visible dodaje ją PHP przy renderze, a assets/js/cart-toast.js odkrywa/aktualizuje na żywo po dodaniu kolejnego produktu bez przeładowania strony). */ .mgm-mini-cart { display: none; align-items: center; gap: .35rem; padding: .4rem .7rem; background: var(--mgm-accent); color: var(--mgm-accent-text) !important; border-radius: 999px; text-decoration: none !important; box-shadow: var(--mgm-shadow-accent); transition: transform .15s; } .mgm-mini-cart.is-visible { display: inline-flex; } .mgm-mini-cart:hover { transform: translateY(-1px); } .mgm-mini-cart-icon { font-size: 1.05rem; line-height: 1; } .mgm-mini-cart-count { font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 800; line-height: 1; min-width: 1em; text-align: center; } @media (max-width: 480px) { .mgm-header-right { gap: .5rem; } .mgm-header-step { display: none; } .mgm-mini-cart { padding: .35rem .55rem; } } /* =========================== Hero - slogan i kroki =========================== */ .mgm-hero { background: var(--mgm-header-bg); text-align: center; padding: 3rem 1.5rem 2.75rem; border-bottom: 1px solid var(--mgm-header-border); } .mgm-hero-eyebrow { font-family: 'Jost', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mgm-accent-2); margin: 0 0 .85rem; } .mgm-hero-slogan { font-family: 'Jost', sans-serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1.12; color: var(--mgm-on-dark); margin: 0 0 2.5rem; letter-spacing: -.01em; } .mgm-hero-slogan em { font-style: normal; color: var(--mgm-accent); } /* Kroki - siatka CSS Grid zamiast flex: strzałki dostają WŁASNĄ, wąską kolumnę dokładnie pomiędzy krokami (auto), a same kroki dzielą po równo pozostałą przestrzeń (1fr) - dzięki temu strzałka zawsze siedzi symetrycznie w przerwie między numerami, niezależnie od szerokości ekranu, zamiast być "przyklejona" do jednego z nich. Numery/strzałki i opisy to dwa osobne wiersze tej samej siatki (grid-row 1/2), więc kolumny zostają idealnie wyrównane pionowo między wierszami. */ .mgm-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: .5rem; row-gap: .6rem; max-width: 720px; margin: 0 auto; } .mgm-col-1 { grid-column: 1; } .mgm-col-2 { grid-column: 2; } .mgm-col-3 { grid-column: 3; } .mgm-col-4 { grid-column: 4; } .mgm-col-5 { grid-column: 5; } .mgm-step-num { grid-row: 1; justify-self: center; font-family: 'Jost', sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--mgm-accent); line-height: 1; } .mgm-step-arrow { grid-row: 1; justify-self: center; font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--mgm-accent-2); } .mgm-step-text { grid-row: 2; justify-self: center; font-family: 'Jost', sans-serif; font-size: .82rem; font-weight: 500; color: var(--mgm-on-dark-muted); letter-spacing: .02em; line-height: 1.4; text-align: center; max-width: 140px; } @media (max-width: 600px) { .mgm-hero { padding: 2rem 1.25rem 2rem; } .mgm-hero-slogan { font-size: 2rem; margin-bottom: 2rem; } .mgm-steps { column-gap: .25rem; row-gap: .5rem; } .mgm-step-text { font-size: .7rem; max-width: 100px; } .mgm-step-num { font-size: 1.5rem; } .mgm-step-arrow { font-size: 1rem; } } /* =========================== Menu kategorii (Wódki / Drinki / Wino czerwone / Wino białe) - stały pasek pod headerem, na każdej podstronie, w stylu "Wyróżnionych relacji" z Instagrama (okrągłe zdjęcie kategorii w kolorowej obwódce) =========================== */ .mgm-nav-bar { background: var(--mgm-header-bg); border-bottom: 1px solid var(--mgm-header-border); padding: .35rem 0; position: sticky; top: 72px; z-index: 9998; /* Ta sama poprawka błędu znikania w trakcie scrollu na iOS Safari co .mgm-site-header wyżej - patrz komentarz tam. */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: padding .3s cubic-bezier(.4, 0, .2, 1); } /* Kompaktowy pasek kategorii po scrollu - w spoczynku (na desktopie szczególnie) pasek "Dla Ciebie" + avatary zajmował sporo wysokości ekranu (position: sticky, więc zabierał miejsce cały czas podczas scrollowania). Klasę .is-scrolled dokłada/zdejmuje nav-shrink.js po przekroczeniu progu przewinięcia (z histerezą - patrz nav-shrink.js - żeby scroll "na granicy" progu nie migotał) - sam efekt (płynne skurczenie) robi CSS przez transition na poszczególnych elementach niżej, wszystkie na tym samym czasie trwania i krzywej, żeby nic się nie "rozjeżdżało" w trakcie animacji. WAŻNE: kompaktowe rozmiary avatara/odstępów NIE mogą schodzić poniżej ~10-11px w pionie - animowana obwódka aktywnej/najechanej pozycji (patrz .mgm-cta-avatar::after niżej) wystaje ok. 7-8px poza avatar niezależnie od jego rozmiaru, więc zbyt mały padding/gap w tym miejscu z powrotem ucina ją u góry i nachodzi na etykietę pod spodem (był już taki błąd - nie zmniejszać tych wartości bez przeliczenia). */ .mgm-nav-bar.is-scrolled { padding: .2rem 0; } .mgm-nav-bar.is-scrolled .mgm-cta-heading { font-size: .85rem; margin-bottom: .3rem; } .mgm-nav-bar.is-scrolled .mgm-cta-row { padding-top: .7rem; padding-bottom: .7rem; gap: .75rem; } .mgm-nav-bar.is-scrolled .mgm-cta-btn { width: 66px; gap: .65rem; } .mgm-nav-bar.is-scrolled .mgm-cta-avatar { width: 56px; height: 56px; } .mgm-nav-bar.is-scrolled .mgm-cta-avatar-icon { font-size: 1.5rem; } .mgm-nav-bar.is-scrolled .mgm-cta-label { font-size: .62rem; } /* Wspólny kontener nagłówka + rzędu avatarów. width: fit-content dopasowuje szerokość do najszerszego dziecka (w praktyce zawsze rząd avatarów, bo jest szerszy niż sam napis "Dla Ciebie"), a margin: 0 auto centruje CAŁY ten blok na ekranie (na desktopie, gdy rząd jest węższy niż ekran). align-items: flex-start ustawia oba dzieci przy lewej krawędzi TEGO WSPÓLNEGO kontenera - dzięki temu nagłówek zaczyna się dokładnie tam, gdzie zaczyna się rząd (nad "Start"), zamiast przy krawędzi całego ekranu. Na mobile, gdy rząd i tak wypełnia całą dostępną szerokość (scrolluje), fit-content po prostu też wypełnia całą szerokość - zero różnicy. */ .mgm-cta-inner { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin: 0 auto; } /* Nagłówek nad rzędem avatarów, celowo wyrównany do lewej (w przeciwieństwie do reszty strony, wyśrodkowanej) - dokładnie tak, jak sekcje w stylu "Dla Ciebie"/"Dla Was" nad karuzelami w Instagramie/TikToku. Padding odpowiada paddingowi .mgm-cta-row poniżej, żeby tekst zaczynał się dokładnie nad pierwszym avatarem. */ .mgm-cta-heading { margin: 0 0 .35rem; padding: 0 1.75rem; font-family: 'Jost', sans-serif; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--mgm-on-dark); transition: font-size .3s cubic-bezier(.4, 0, .2, 1), margin .3s cubic-bezier(.4, 0, .2, 1); } /* Pasek scrolluje się poziomo zamiast zawijać, dokładnie jak "Wyróżnione relacje" na Instagramie - dzięki temu działa niezależnie od liczby kategorii, bez łamania się na kilka wierszy. Pasek scrollbara ukryty (jak w IG), ale scrollowanie (dotyk/kółko/przeciąganie) działa normalnie. Padding - zapas na animowaną obwódkę aktywnej/najechanej pozycji (patrz .mgm-cta-avatar::after niżej), która wystaje poza avatar i przy powiększeniu (scale) na hover/active jeszcze trochę rośnie; inaczej overflow-y: hidden by ją ucinał u góry. PRAWDZIWA przyczyna ucinania z lewej (znaleziona po dokładnym zdiagnozowaniu na realnym urządzeniu, nie tylko w symulacji): to NIE był brak miejsca. To scroll-snap-type - "proximity" na starcie przy scroll-snap-align: start na dzieciach (patrz .mgm-cta-btn) automatycznie doscrollowywał widok tak, żeby "wyrównać" pierwszą pozycję do krawędzi, co w praktyce zjadało cały padding/margines (scrollLeft samoczynnie ustawiał się na wartość odstępu, zamiast zostać na 0). scroll-padding naprawia to poprawnie - mówi mechanizmowi snapowania, żeby TEN zapas respektował, zamiast go pomijać. Sam padding nadal jest potrzebny na wypadek, gdy scroll-snap w ogóle nie jest wspierany. max-width: 100% + min-width: 0 - gdy pozycji jest więcej niż mieści się na ekranie, wiersz nie rozpycha rodzica (.mgm-nav-bar), tylko sam zaczyna scrollować wewnątrz siebie (stąd nie jest wyśrodkowany w tym przypadku - zaczyna się od lewej, dokładnie jak w Instagramie). */ .mgm-cta-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.35rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; /* Bez tego przeciągnięcie do samego końca (lub początku) listy potrafiło "przelać się" w przewijanie CAŁEJ strony w bok (zgłoszone z produkcji, patrz też html/body na samej górze pliku - druga część tej samej poprawki). "contain" zatrzymuje gest scrolla na granicy tego elementu, zamiast przekazywać go dalej do rodzica. */ overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 1.75rem; scroll-padding-right: 1.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .9rem 1.75rem; max-width: 100%; min-width: 0; transition: padding .3s cubic-bezier(.4, 0, .2, 1), gap .3s cubic-bezier(.4, 0, .2, 1); } .mgm-cta-row::-webkit-scrollbar { display: none; } /* Okrągła "plakietka" kategorii ze zdjęciem w kolorowej obwódce - styl "Wyróżnione relacje" z Instagrama. */ .mgm-cta-btn { display: flex; flex-direction: column; align-items: center; /* Odstęp musi być większy niż samo "oko" wygląda potrzebować - obwódka ::after (patrz .mgm-cta-avatar::after) wystaje poza avatar i inaczej styka się z etykietą pod spodem przy hover/aktywnej pozycji. */ gap: .85rem; width: 96px; flex: 0 0 auto; background: transparent; text-decoration: none !important; scroll-snap-align: start; transition: width .3s cubic-bezier(.4, 0, .2, 1), gap .3s cubic-bezier(.4, 0, .2, 1); } .mgm-cta-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%; padding: 3.5px; box-sizing: border-box; background: conic-gradient(from 180deg, var(--mgm-accent-2), var(--mgm-accent), var(--mgm-accent-2)); display: flex; align-items: center; justify-content: center; transition: transform .15s, width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1); } /* Animowana obwódka "aktywnej"/najechanej pozycji - pierścień kreśli się od godziny 12:00 w prawo, pełne koło, jak progress-ring na TikToku (np. przy nagrywaniu/ładowaniu avatara). --mgm-ring-sweep animowane przez @property z 0 do 100 (%), conic-gradient zaczyna się domyślnie od 12:00 i idzie zgodnie z ruchem wskazówek zegara - nic więcej nie trzeba ustawiać. ::after jest większym kołem niż avatar, ale w środku przezroczyste (wycięte maską radial-gradient), więc nie zasłania zdjęcia - widoczny jest tylko sam pierścień na zewnątrz avatara. */ @property --mgm-ring-sweep { syntax: ''; inherits: false; initial-value: 0; } .mgm-cta-avatar::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--mgm-accent-2) calc(var(--mgm-ring-sweep) * 1%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); opacity: 0; pointer-events: none; transition: opacity .2s ease; --mgm-ring-sweep: 0; } .mgm-cta-btn.is-active .mgm-cta-avatar::after, .mgm-cta-btn:hover .mgm-cta-avatar::after, .mgm-cta-btn:focus-visible .mgm-cta-avatar::after { opacity: 1; animation: mgm-ring-sweep .65s ease-out forwards; } @keyframes mgm-ring-sweep { from { --mgm-ring-sweep: 0; } to { --mgm-ring-sweep: 100; } } .mgm-cta-avatar img, .mgm-cta-avatar-icon { width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--mgm-header-bg); background: var(--mgm-header-bg); } .mgm-cta-avatar img { display: block; object-fit: cover; } .mgm-cta-avatar-icon { display: flex; align-items: center; justify-content: center; font-size: 2.1rem; line-height: 1; transition: font-size .3s cubic-bezier(.4, 0, .2, 1); } .mgm-cta-label { font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-align: center; color: var(--mgm-on-dark-muted); line-height: 1.2; transition: font-size .3s cubic-bezier(.4, 0, .2, 1); } .mgm-cta-btn:hover .mgm-cta-avatar { transform: scale(1.05); } .mgm-cta-btn.is-active .mgm-cta-avatar { transform: scale(1.05); } .mgm-cta-btn.is-active .mgm-cta-label { color: var(--mgm-accent-2); } @media (max-width: 600px) { /* Na mobile pasek kategorii NIE jest przyklejony (position: sticky) - zamiast tego przewija się razem ze stroną i znika pod headerem, tak jak "Wyróżnione relacje" na Instagramie (widoczne tylko na samej górze feedu, nie towarzyszą scrollowi). Zgłoszone 2026-08-23: klient chciał, żeby avatary na telefonie były "statyczne" - a przy okazji to też całkowicie omija błąd znikania elementów position: sticky w mobilnym Safari (patrz komentarz przy .mgm-site-header) dla TEGO konkretnego elementu, bo po prostu nie jest już sticky. Efekt "kurczenia się" (.is-scrolled, patrz nav-shrink.js) też jest wyłączony na mobile z tego samego powodu - nav-shrink.js sam sprawdza szerokość ekranu i w ogóle nie dolicza się do scrolla poniżej 601px. Na desktopie bez zmian - tam pasek zostaje sticky i się kurczy. */ .mgm-nav-bar { position: static; padding: .2rem 0; } .mgm-cta-heading { padding: 0 1.35rem; font-size: 1.15rem; } .mgm-cta-row { gap: 1rem; padding: .75rem 1.35rem; scroll-padding-left: 1.35rem; scroll-padding-right: 1.35rem; } .mgm-cta-btn { width: 78px; gap: .7rem; } .mgm-cta-avatar { width: 68px; height: 68px; } .mgm-cta-avatar-icon { font-size: 1.7rem; } .mgm-cta-label { font-size: .64rem; } } /* =========================== Grid produktów - karta drinku Obsługuje block template (WC 9+) i classic template =========================== */ /* Container produktów - override flex WC block na CSS grid */ ul.wc-block-product-template, .woocommerce ul.products { list-style: none !important; padding: 2rem 1rem 3rem !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; max-width: 1100px !important; background: var(--mgm-surface-alt) !important; /* Neutralizuj flex z WC block template */ flex-direction: unset !important; flex-wrap: unset !important; align-items: unset !important; } /* Parent wrapper - nie ograniczaj szerokości, ale pomaluj tło na jasne "zaplecze" */ .wp-block-woocommerce-product-collection { max-width: 100% !important; margin: 0 auto !important; background: var(--mgm-surface-alt) !important; } @media (max-width: 900px) { ul.wc-block-product-template, .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { ul.wc-block-product-template, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .875rem !important; padding: 1.25rem .75rem 2.5rem !important; } } /* Karta produktu */ ul.wc-block-product-template li.wc-block-product, .woocommerce ul.products li.product { background: var(--mgm-surface) !important; border-radius: 16px !important; overflow: hidden !important; border: 1px solid var(--mgm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; transition: box-shadow .2s, transform .2s !important; display: flex !important; flex-direction: column !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } ul.wc-block-product-template li.wc-block-product:hover, .woocommerce ul.products li.product:hover { box-shadow: 0 10px 28px rgba(0,0,0,.14) !important; transform: translateY(-3px) !important; } /* Zdjęcie produktu - pełny kwadrat, bez przycinania */ ul.wc-block-product-template li.wc-block-product .wc-block-components-product-image, .woocommerce ul.products li.product .woocommerce-product-gallery__wrapper, .woocommerce ul.products li.product a:first-child { display: block !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; background: var(--mgm-surface-alt) !important; } ul.wc-block-product-template li.wc-block-product .wc-block-components-product-image img, ul.wc-block-product-template li.wc-block-product img, .woocommerce ul.products li.product a img, .woocommerce ul.products li.product img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; border-radius: 0 !important; background: var(--mgm-surface-alt) !important; } /* Tytuł produktu - block template */ ul.wc-block-product-template li.wc-block-product .wp-block-post-title { font-family: 'Jost', sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; color: var(--mgm-text) !important; padding: .9rem 1rem .2rem !important; line-height: 1.25 !important; text-align: left !important; margin: 0 !important; flex: 1 !important; } ul.wc-block-product-template li.wc-block-product .wp-block-post-title a { color: inherit !important; text-decoration: none !important; } /* Tytuł produktu - classic template */ .woocommerce ul.products li.product .woocommerce-loop-product__link { flex: 1; display: flex !important; flex-direction: column !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Jost', sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; color: var(--mgm-text) !important; padding: .9rem 1rem .2rem !important; line-height: 1.25 !important; flex: 1 !important; } @media (max-width: 600px) { ul.wc-block-product-template li.wc-block-product .wp-block-post-title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; padding: .7rem .75rem .15rem !important; } } /* Cena - block template */ ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price, ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price, ul.wc-block-product-template li.wc-block-product .woocommerce-Price-amount { font-family: 'Jost', sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; color: var(--mgm-accent) !important; text-align: left !important; } ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price { padding: 0 1rem .7rem !important; display: block !important; margin: 0 !important; letter-spacing: .01em !important; } /* Cena - classic template */ .woocommerce ul.products li.product .price { font-family: 'Jost', sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; color: var(--mgm-accent) !important; padding: 0 1rem .7rem !important; display: block !important; letter-spacing: .01em !important; } @media (max-width: 600px) { ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price, .woocommerce ul.products li.product .price { font-size: .95rem !important; padding: 0 .75rem .5rem !important; } } /* Przycisk "Dodaj do koszyka" - block template */ ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button { padding: 0 .875rem .875rem !important; margin-top: auto !important; text-align: center !important; } ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button, ul.wc-block-product-template li.wc-block-product button.wp-block-button__link { display: block !important; width: 100% !important; padding: .75rem 1rem !important; background: var(--mgm-accent) !important; color: var(--mgm-accent-text) !important; border: none !important; border-radius: 10px !important; font-family: 'Jost', sans-serif !important; font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; cursor: pointer !important; transition: background .15s, transform .1s !important; box-sizing: border-box !important; margin: 0 !important; } ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:hover, ul.wc-block-product-template li.wc-block-product button.wp-block-button__link:hover { background: var(--mgm-text) !important; color: var(--mgm-on-dark) !important; } ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:active, ul.wc-block-product-template li.wc-block-product button.wp-block-button__link:active { transform: scale(.97) !important; } /* Przycisk "Dodaj do koszyka" - classic template */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button { display: block !important; margin: 0 .875rem .875rem !important; padding: .75rem 1rem !important; background: var(--mgm-accent) !important; color: var(--mgm-accent-text) !important; border: none !important; border-radius: 10px !important; font-family: 'Jost', sans-serif !important; font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; cursor: pointer !important; transition: background .15s !important; width: calc(100% - 1.75rem) !important; } .woocommerce ul.products li.product .button:hover { background: var(--mgm-text) !important; color: var(--mgm-on-dark) !important; } @media (max-width: 600px) { ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button { padding: 0 .6rem .6rem !important; } ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button, ul.wc-block-product-template li.wc-block-product button.wp-block-button__link, .woocommerce ul.products li.product .button { font-size: .76rem !important; padding: .65rem .75rem !important; } .woocommerce ul.products li.product .button { margin: 0 .6rem .6rem !important; width: calc(100% - 1.2rem) !important; } } /* Ukryj zbędne elementy w kartach */ ul.wc-block-product-template li.wc-block-product .star-rating, ul.wc-block-product-template li.wc-block-product .onsale, .woocommerce ul.products li.product .star-rating, .woocommerce ul.products li.product .onsale, .wc-block-components-product-image__inner-container { display: none !important; } /* =========================== Koszyk - stadium style: ciemne tło strony, jedna jasna karta z treścią =========================== */ body.woocommerce-cart #page, body.woocommerce-cart .wp-site-blocks, body.woocommerce-cart main { padding-top: 0 !important; } body.woocommerce-cart .woocommerce { max-width: 900px; margin: 2rem auto; padding: 1.75rem 1.75rem 2rem; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); } @media (max-width: 640px) { body.woocommerce-cart .woocommerce { margin: 1rem; padding: 1.25rem 1rem 1.5rem; border-radius: 16px; } } body.woocommerce-cart .woocommerce h1, body.woocommerce-cart .woocommerce h2, body.woocommerce-cart .woocommerce h3 { font-family: 'Jost', sans-serif !important; font-weight: 800 !important; color: var(--mgm-text) !important; letter-spacing: -.01em !important; } /* Tabela koszyka */ body.woocommerce-cart .woocommerce-cart-form table.cart, body.woocommerce-cart table.shop_table { border: 1px solid var(--mgm-border) !important; border-radius: 12px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; font-family: 'Jost', sans-serif !important; } body.woocommerce-cart table.shop_table th { font-family: 'Jost', sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--mgm-text-muted) !important; padding: .75rem 1rem !important; border-bottom: 1px solid var(--mgm-border) !important; background: var(--mgm-surface-alt) !important; } body.woocommerce-cart table.shop_table td { padding: 1rem !important; border-bottom: 1px solid var(--mgm-border) !important; vertical-align: middle !important; font-family: 'Jost', sans-serif !important; font-size: .95rem !important; font-weight: 500 !important; } body.woocommerce-cart table.shop_table .product-name a { font-family: 'Jost', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--mgm-text) !important; text-decoration: none !important; } body.woocommerce-cart table.shop_table .product-price, body.woocommerce-cart table.shop_table .product-subtotal { font-weight: 800 !important; color: var(--mgm-accent) !important; } body.woocommerce-cart .cart-subtotals, body.woocommerce-cart .cart_totals h2 { font-family: 'Jost', sans-serif !important; font-weight: 800 !important; } body.woocommerce-cart .cart_totals { border: 1px solid var(--mgm-border) !important; border-radius: 12px !important; overflow: hidden !important; padding: 1.5rem !important; background: var(--mgm-surface-alt) !important; font-family: 'Jost', sans-serif !important; } body.woocommerce-cart .cart_totals table { width: 100% !important; border-collapse: collapse !important; } body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td { padding: .5rem 0 !important; border: none !important; border-bottom: 1px solid var(--mgm-border) !important; font-weight: 500 !important; } body.woocommerce-cart .cart_totals table .order-total td { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--mgm-text) !important; border-bottom: none !important; } /* Przycisk "Przejdź do płatności" */ body.woocommerce-cart .checkout-button, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block !important; width: 100% !important; padding: 1.15rem !important; background: var(--mgm-accent) !important; color: var(--mgm-accent-text) !important; font-family: 'Jost', sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; border: none !important; border-radius: 12px !important; cursor: pointer !important; transition: background .2s !important; text-align: center !important; text-decoration: none !important; margin-top: 1rem !important; box-sizing: border-box !important; box-shadow: var(--mgm-shadow-accent) !important; } body.woocommerce-cart .checkout-button:hover, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--mgm-text) !important; color: var(--mgm-on-dark) !important; } /* Ukryj "Aktualizuj koszyk" i kupon jeśli niepotrzebne */ body.woocommerce-cart .coupon { display: none !important; } /* =========================== Checkout - stadium style =========================== */ body.woocommerce-checkout #page, body.woocommerce-checkout .wp-site-blocks, body.woocommerce-checkout main { padding-top: 0 !important; } .woocommerce-checkout .woocommerce { max-width: 720px; margin: 2rem auto; padding: 1.75rem 1.75rem 2rem; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); box-sizing: border-box; } @media (max-width: 640px) { .woocommerce-checkout .woocommerce { margin: 1rem; padding: 1.25rem 1rem 1.5rem; border-radius: 16px; } } /* Tytuły sekcji */ .woocommerce-checkout h3, .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3 { font-family: 'Jost', sans-serif !important; font-weight: 800 !important; font-size: 1.4rem !important; color: var(--mgm-text) !important; border-bottom: 1px solid var(--mgm-border) !important; padding-bottom: .75rem !important; margin-bottom: 1.5rem !important; letter-spacing: -.01em !important; } /* Ukryj zbędne sekcje w klasycznym checkout */ .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout #order_notes, .woocommerce-checkout .woocommerce-additional-fields { display: none !important; } .woocommerce-checkout .form-row label { font-family: 'Jost', sans-serif !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--mgm-text-muted) !important; margin-bottom: .35rem !important; display: block !important; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { font-family: 'Jost', sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; border: 1.5px solid var(--mgm-border) !important; border-radius: 10px !important; padding: .85rem 1rem !important; background: var(--mgm-surface) !important; color: var(--mgm-text) !important; transition: border-color .15s !important; -webkit-appearance: none !important; width: 100% !important; box-sizing: border-box !important; } .woocommerce-checkout .form-row input.input-text:focus { border-color: var(--mgm-accent) !important; outline: none !important; box-shadow: var(--mgm-glow) !important; } /* Pole loży - wyróżnione akcentem stadionu */ .mgm-table-field label { color: var(--mgm-accent) !important; font-size: .84rem !important; font-weight: 800 !important; } .mgm-table-field input { font-size: 1.3rem !important; font-weight: 800 !important; border-color: var(--mgm-accent) !important; border-width: 2px !important; text-align: center !important; letter-spacing: .05em !important; } .mgm-table-field input:focus { box-shadow: var(--mgm-glow) !important; } /* Informacja o fakturze VAT (checkout + thank-you) */ .mgm-invoice-note { background: var(--mgm-surface-alt); border-left: 3px solid var(--mgm-accent); border-radius: 0 8px 8px 0; padding: .85rem 1.1rem; margin: 0 0 1.5rem; font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 500; color: var(--mgm-text-muted); line-height: 1.5; } .mgm-banquet-thankyou .mgm-invoice-note { margin: 0 1.25rem 1.5rem; text-align: left; } .mgm-order-again-btn { display: block; margin: 0 1.25rem 1.75rem; padding: 1rem 1rem; background: var(--mgm-accent); color: var(--mgm-accent-text) !important; text-align: center; text-decoration: none !important; border-radius: 10px; font-family: 'Jost', sans-serif; font-size: .88rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .15s; box-shadow: var(--mgm-shadow-accent); } .mgm-order-again-btn:hover { background: var(--mgm-text); color: var(--mgm-on-dark) !important; } /* Sekcja płatności */ .woocommerce-checkout #payment { background: var(--mgm-surface) !important; border: 1px solid var(--mgm-border) !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 1.5rem !important; } .woocommerce-checkout #payment ul.payment_methods { margin: 0 !important; padding: 0 !important; list-style: none !important; border-bottom: 1px solid var(--mgm-border) !important; } .woocommerce-checkout #payment ul.payment_methods li { padding: 1rem 1.25rem !important; font-family: 'Jost', sans-serif !important; } .woocommerce-checkout #payment ul.payment_methods label { font-family: 'Jost', sans-serif !important; font-size: .95rem !important; font-weight: 600 !important; color: var(--mgm-text) !important; cursor: pointer !important; letter-spacing: 0 !important; text-transform: none !important; } .woocommerce-checkout #payment .payment_box { background: var(--mgm-surface-alt) !important; border-top: 1px solid var(--mgm-border) !important; padding: .75rem 1.25rem !important; font-family: 'Jost', sans-serif !important; font-size: .85rem !important; font-weight: 500 !important; color: var(--mgm-text-muted) !important; } /* Przycisk złożenia zamówienia */ #place_order { display: block !important; width: 100% !important; padding: 1.15rem !important; background: var(--mgm-accent) !important; color: var(--mgm-accent-text) !important; font-family: 'Jost', sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; border: none !important; border-radius: 12px !important; cursor: pointer !important; transition: background .2s !important; margin-top: 1rem !important; box-shadow: var(--mgm-shadow-accent) !important; } #place_order:hover { background: var(--mgm-text) !important; color: var(--mgm-on-dark) !important; } /* Podsumowanie zamówienia w checkout */ .woocommerce-checkout-review-order-table { border: 1px solid var(--mgm-border) !important; border-radius: 12px !important; overflow: hidden !important; font-family: 'Jost', sans-serif !important; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: .75rem 1rem !important; font-family: 'Jost', sans-serif !important; font-weight: 500 !important; border-bottom: 1px solid var(--mgm-border) !important; } .woocommerce-checkout .order-total td, .woocommerce-checkout .order-total th { font-weight: 800 !important; font-size: 1.05rem !important; } /* Tekst polityki prywatności nad checkboxem "Warunki i zasady" - WooCommerce nie objęte naszym resetem typografii (dziedziczyło duży domyślny rozmiar motywu, przez co wyglądało nieproporcjonalnie duże na tle reszty checkoutu). */ .woocommerce-checkout .woocommerce-privacy-policy-text, .woocommerce-checkout .woocommerce-privacy-policy-text p { font-family: 'Jost', sans-serif !important; font-size: .85rem !important; font-weight: 500 !important; line-height: 1.55 !important; color: var(--mgm-text-muted) !important; margin: 0 0 1rem !important; } /* Błędy walidacji */ .woocommerce-checkout .woocommerce-error, .woocommerce-cart .woocommerce-error, .woocommerce-message, .woocommerce-info { border-left: 4px solid var(--mgm-accent) !important; background: var(--mgm-surface-alt) !important; color: var(--mgm-text) !important; border-radius: 8px !important; padding: .85rem 1.1rem !important; font-family: 'Jost', sans-serif !important; font-weight: 500 !important; font-size: .92rem !important; list-style: none !important; margin-bottom: 1rem !important; } /* =========================== Thank-you page - QR kod =========================== */ .mgm-banquet-thankyou { max-width: 440px; margin: 2rem auto; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; text-align: center; font-family: 'Jost', sans-serif; border: 1px solid var(--mgm-border); } .mgm-qr-header { background: var(--mgm-header-bg); color: var(--mgm-on-dark); padding: 2rem 1.5rem 1.75rem; border-bottom: 3px solid var(--mgm-accent); } .mgm-qr-icon { font-size: 2.5rem; margin-bottom: .5rem; } .mgm-qr-title { margin: 0 0 .4rem; font-family: 'Jost', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--mgm-on-dark); letter-spacing: -.01em; } .mgm-qr-subtitle { margin: 0; font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 500; opacity: .85; color: var(--mgm-on-dark); letter-spacing: .02em; } .mgm-qr-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; background: var(--mgm-surface); } .mgm-qr-container img, .mgm-qr-container canvas { border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.10); } .mgm-qr-info { padding: 1.25rem 1.5rem 2rem; background: var(--mgm-surface); } .mgm-qr-table { font-family: 'Jost', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--mgm-accent); margin-bottom: .4rem; } .mgm-qr-order { font-family: 'Jost', sans-serif; font-size: .85rem; color: var(--mgm-text-muted); margin-bottom: .3rem; font-weight: 500; } .mgm-qr-note { font-family: 'Jost', sans-serif; font-size: .75rem; color: var(--mgm-text-muted); letter-spacing: .04em; } @media (max-width: 480px) { .mgm-banquet-thankyou { margin: 1rem; border-radius: 16px; } .mgm-qr-title { font-size: 1.5rem; } } /* =========================== Strony prawne (Regulamin / Polityka Prywatności / Polityka Cookies) - jedna czytelna, jasna karta na ciemnym tle stadionu, tak jak koszyk/checkout =========================== */ body.page-template-page-legal .wp-block-group { max-width: 760px; margin: 2rem auto; padding: 1.75rem 2rem 2.5rem; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); box-sizing: border-box; font-family: 'Jost', sans-serif; color: var(--mgm-text); } @media (max-width: 640px) { body.page-template-page-legal .wp-block-group { margin: 1rem; padding: 1.25rem 1.25rem 1.75rem; border-radius: 16px; } } body.page-template-page-legal h1.wp-block-post-title { font-family: 'Jost', sans-serif; font-weight: 800; font-size: 2rem; color: var(--mgm-text); margin: 0 0 1.25rem; letter-spacing: -.01em; } body.page-template-page-legal .wp-block-post-content h2, body.page-template-page-legal .wp-block-post-content h3 { font-family: 'Jost', sans-serif; font-weight: 700; color: var(--mgm-text); margin-top: 1.75rem; } body.page-template-page-legal .wp-block-post-content p, body.page-template-page-legal .wp-block-post-content li { font-weight: 400; line-height: 1.65; color: var(--mgm-text); } body.page-template-page-legal .wp-block-post-content a { color: var(--mgm-accent); } /* =========================== Strona 404 - branded (zamiast domyślnego motywu WP z drzewem) =========================== */ .mgm-404 { max-width: 480px; margin: 3rem auto; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; text-align: center; font-family: 'Jost', sans-serif; border: 1px solid var(--mgm-border); } .mgm-404-header { background: var(--mgm-header-bg); color: var(--mgm-on-dark); padding: 2.5rem 1.5rem 2rem; border-bottom: 3px solid var(--mgm-accent); } .mgm-404-code { font-family: 'Jost', sans-serif; font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--mgm-accent-2); margin: 0 0 .5rem; letter-spacing: -.02em; } .mgm-404-title { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--mgm-on-dark); } .mgm-404-body { padding: 1.75rem 1.75rem 2.25rem; } .mgm-404-text { margin: 0 0 1.5rem; font-size: .95rem; font-weight: 500; color: var(--mgm-text-muted); line-height: 1.6; } .mgm-404-btn { display: inline-block; padding: 1rem 2rem; background: var(--mgm-accent); color: var(--mgm-accent-text) !important; text-decoration: none !important; border-radius: 10px; font-size: .88rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .15s; box-shadow: var(--mgm-shadow-accent); } .mgm-404-btn:hover { background: var(--mgm-text); color: var(--mgm-on-dark) !important; } @media (max-width: 480px) { .mgm-404 { margin: 1.5rem 1rem; border-radius: 16px; } .mgm-404-code { font-size: 3.4rem; } } /* =========================== Bramka wieku 18+ (sprzedaż alkoholu) - pełnoekranowy splash =========================== */ body:has(#mgm-age-gate) { overflow: hidden; } .mgm-age-gate { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background-color: var(--mgm-bg-solid); background-image: var(--mgm-bg-image); background-repeat: repeat, no-repeat, no-repeat; background-attachment: fixed, fixed, fixed; opacity: 1; transition: opacity .3s ease; } .mgm-age-gate.mgm-age-gate--closing { opacity: 0; pointer-events: none; } .mgm-age-gate-card { width: 100%; max-width: 440px; max-height: calc(100vh - 2.5rem); overflow-y: auto; background: var(--mgm-surface); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 2rem 1.75rem 1.75rem; text-align: center; font-family: 'Jost', sans-serif; box-sizing: border-box; } .mgm-age-gate-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mgm-accent); margin: 0 0 .6rem; } .mgm-age-gate-title { font-size: 1.6rem; font-weight: 800; color: var(--mgm-text); margin: 0 0 .75rem; letter-spacing: -.01em; } .mgm-age-gate-text { font-size: .92rem; font-weight: 500; color: var(--mgm-text-muted); line-height: 1.55; margin: 0 0 1.5rem; } .mgm-age-gate-fields { display: flex; gap: .5rem; margin-bottom: 1.1rem; } .mgm-age-gate-field { flex: 1; display: flex; flex-direction: column; gap: .3rem; text-align: left; } .mgm-age-gate-field span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mgm-text-muted); } .mgm-age-gate-field select { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; padding: .7rem .4rem; border: 1.5px solid var(--mgm-border); border-radius: 10px; background: var(--mgm-surface); color: var(--mgm-text); -webkit-appearance: none; text-align: center; box-sizing: border-box; width: 100%; } .mgm-age-gate-field select:focus { outline: none; border-color: var(--mgm-accent); box-shadow: var(--mgm-glow); } .mgm-age-gate-error { background: #fdecea; border-left: 3px solid var(--mgm-accent, #d6392e); border-radius: 0 8px 8px 0; color: #8a1f16; font-size: .85rem; font-weight: 600; text-align: left; line-height: 1.4; padding: .7rem .9rem; margin: 0 0 1rem; } .mgm-age-gate-submit { display: block; width: 100%; padding: 1rem; background: var(--mgm-accent); color: var(--mgm-accent-text); border: none; border-radius: 12px; font-family: 'Jost', sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: var(--mgm-shadow-accent); transition: background .15s; box-sizing: border-box; } .mgm-age-gate-submit:hover { background: var(--mgm-text); color: var(--mgm-on-dark); } .mgm-age-gate-fine { font-size: .72rem; font-weight: 500; color: var(--mgm-text-muted); line-height: 1.5; margin: 1.25rem 0 .75rem; } .mgm-age-gate-legal a { font-size: .78rem; font-weight: 700; color: var(--mgm-accent); text-decoration: none; } .mgm-age-gate-legal a:hover { text-decoration: underline; } @media (max-width: 420px) { .mgm-age-gate-card { padding: 1.5rem 1.25rem 1.5rem; border-radius: 16px; } .mgm-age-gate-fields { gap: .4rem; } .mgm-age-gate-title { font-size: 1.4rem; } } /* =========================== Toast "Dodano do koszyka" - animowany pasek na górze ekranu =========================== */ .mgm-cart-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-140%); z-index: 100000; display: flex; align-items: center; gap: .85rem; max-width: calc(100vw - 24px); padding: .85rem 1.1rem .85rem 1rem; background: var(--mgm-header-bg, #111); color: var(--mgm-on-dark, #fff); border: 1px solid var(--mgm-accent-2, rgba(255,255,255,.2)); border-radius: 999px; box-shadow: 0 12px 32px rgba(0,0,0,.4); font-family: 'Jost', sans-serif; transition: transform .35s cubic-bezier(.34,1.4,.4,1); pointer-events: none; } .mgm-cart-toast.is-visible { transform: translateX(-50%) translateY(0); pointer-events: auto; } .mgm-cart-toast-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--mgm-accent, #FD3F15); color: var(--mgm-accent-text, #fff); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .mgm-cart-toast.is-bump .mgm-cart-toast-icon { animation: mgm-toast-bump .35s ease; } @keyframes mgm-toast-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } .mgm-cart-toast-text { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; } .mgm-cart-toast-title { font-size: .82rem; font-weight: 700; letter-spacing: .01em; } .mgm-cart-toast-sub { font-size: .72rem; font-weight: 500; color: var(--mgm-on-dark-muted, #bbb); } .mgm-cart-toast-link { flex-shrink: 0; display: inline-block; padding: .5rem 1rem; background: var(--mgm-accent-2, #04D1FF); color: var(--mgm-accent-2-text, #001C44) !important; text-decoration: none !important; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } @media (max-width: 480px) { .mgm-cart-toast { left: 12px; right: 12px; transform: translateY(-140%); max-width: none; } .mgm-cart-toast.is-visible { transform: translateY(0); } .mgm-cart-toast-text { white-space: normal; } .mgm-cart-toast-link { padding: .45rem .8rem; } } /* =========================== Stopka gościa =========================== */ .mgm-site-footer { background: var(--mgm-footer-bg); text-align: center; padding: 2.5rem 1rem 2rem; margin-top: 0; } .mgm-site-footer-inner { max-width: 480px; margin: 0 auto; } .mgm-footer-brand { margin: 0 0 .85rem; } .mgm-footer-brand .mgm-brand-title { font-size: 1.2rem; } .mgm-footer-tagline { font-family: 'Jost', sans-serif; font-size: .8rem; color: var(--mgm-on-dark-muted); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem; font-weight: 500; } .mgm-footer-legal { font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 500; margin: 0 0 .75rem; } .mgm-footer-legal a { color: var(--mgm-on-dark-muted); text-decoration: none; transition: color .15s; } .mgm-footer-legal a:hover { color: var(--mgm-on-dark); } .mgm-footer-legal-sep { color: var(--mgm-header-border); } .mgm-footer-copy { font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 500; color: var(--mgm-header-border); margin: 0; } /* =========================== Logo w headerze kelnera PWA =========================== */ .mgm-kelner-logo, .mgm-kelner-header img { height: 30px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; filter: brightness(1.8) grayscale(.2) !important; display: block !important; } .mgm-kelner-footer-brand { display: block; font-size: .7rem; color: #444; margin-top: .2rem; } /* =========================== PWA Kelnera - fullscreen (neutralna, nie zależy od wybranego stadionu - kelner obsługuje oba obiekty z jednego telefonu) =========================== */ body.mgm-kelner-body { margin: 0; padding: 0; background: #111; overflow: hidden; font-family: 'Jost', -apple-system, sans-serif; font-weight: 400; } .mgm-kelner-wrap { position: fixed; inset: 0; display: flex; flex-direction: column; background: #111; color: #fff; } .mgm-kelner-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: #1a1a1a; flex-shrink: 0; min-height: 52px; border-bottom: 1px solid #2a2a2a; } .mgm-kelner-title { font-size: .9rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: .05em; text-transform: uppercase; } .mgm-kelner-user { font-size: .75rem; color: #999; font-weight: 500; } .mgm-qr-reader-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } #mgm-qr-reader { width: 100% !important; max-width: 100%; } #mgm-qr-reader__scan_region img, #mgm-qr-reader__header_message, #mgm-qr-reader__dashboard_section_swaplink { display: none !important; } #mgm-qr-reader__dashboard { background: transparent !important; border: none !important; } #mgm-qr-reader__camera_selection { background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; padding: .4rem .75rem; margin-top: .5rem; font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 500; } .mgm-kelner-footer { padding: .75rem 1rem; background: #1a1a1a; text-align: center; font-size: .72rem; color: #666; flex-shrink: 0; font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid #2a2a2a; } /* Result overlay */ .mgm-result-overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; padding: 2rem; text-align: center; } .mgm-result-overlay[hidden] { display: none; } .mgm-result-success { background: #0d4f28; } .mgm-result-warn { background: #7c3000; } .mgm-result-error { background: #6b0f1a; } #mgm-result-title { font-family: 'Jost', sans-serif; font-size: 2.75rem; font-weight: 800; color: #fff; margin: 0 0 1rem; line-height: 1; } #mgm-result-body { font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 500; color: rgba(255,255,255,.92); } #mgm-result-body p { margin: .3rem 0; } .mgm-result-countdown { margin-top: 1.5rem; font-family: 'Jost', sans-serif; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: .08em; } #mgm-qr-reader__camera_permission_button, button[id^="html5-qrcode-button"] { background: #2a6fdb !important; color: #fff !important; border: none !important; padding: .85rem 2rem !important; border-radius: 10px !important; font-family: 'Jost', sans-serif !important; font-size: .85rem !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; cursor: pointer !important; margin-top: .75rem !important; }