/* === AS Gloves — FULL OVERRIDES PACK (2025-10-25) === Zastosowanie: 1) Najlepiej dodaj TEN plik jako ostatni w : 2) Jeśli wolisz, możesz WKLEIĆ CAŁOŚĆ na sam koniec istniejącego styles.css. --------------------------------------------------------------- */ /* 0) Ustawienia bazowe / drobne usprawnienia */ html{ scroll-behavior:smooth; } :root{ --ghost: rgba(20,26,23,.65); --ghost-border: #27312c; } /* 1) Usunięcie sticky przycisku "Bestill nå — 550 kr" w każdym widoku */ .sticky-buy, #sticky-buy, [class^="sticky-buy"], [class*=" sticky-buy"], [class*="sticky"][class*="buy"], a[href*="bestill"], a[href*="checkout"], a[href*="kasse"]{ display:none !important; visibility:hidden !important; pointer-events:none !important; height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; } /* 2) Offset dla przewijania do nagłówków ("Produkt", "Spesifikasjon") */ #produkt, #specyfikacja{ scroll-margin-top: 90px; /* żeby tytuł nie wskakiwał pod nagłówek */ } /* 3) Nagłówki sekcji — większe i czytelniejsze */ #produkt h3.section-title, #specyfikacja h3.section-title, #produkt h3, #specyfikacja h3{ font-size: 1.5rem !important; letter-spacing:.01em; margin: .6rem 0 .6rem !important; } #produkt h4, #specyfikacja h4{ font-size: 1.2rem !important; margin: .45rem 0 .35rem !important; } /* 4) SPECYFIKACJA — ghost cards */ #specyfikacja .cards{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:16px !important; margin-top:10px; } @media (max-width:900px){ #specyfikacja .cards{ grid-template-columns:1fr !important; } } #specyfikacja .card{ background: var(--ghost) !important; border: 1px solid var(--ghost-border) !important; border-radius: 14px !important; padding: 16px !important; box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; backdrop-filter: blur(6px); } #specyfikacja .card h3, #specyfikacja .card h4{ margin: 0 0 .45rem 0 !important; } #specyfikacja .card p{ margin:.38rem 0 !important; line-height:1.65 !important; } #specyfikacja li{ margin:.3rem 0; } #specyfikacja li::marker{ color: var(--accent); } /* === Produkt — ghost cards === */ #produkt .cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 10px; } @media (max-width: 900px) { #produkt .cards { grid-template-columns: 1fr !important; } } #produkt .card { background: rgba(20, 26, 23, 0.65) !important; border: 1px solid #27312c !important; border-radius: 14px !important; padding: 16px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .28) !important; backdrop-filter: blur(6px); } #produkt .card h3, #produkt .card h4 { margin: 0 0 .45rem 0 !important; } #produkt .card p { margin: .38rem 0 !important; line-height: 1.65 !important; } #produkt li { margin: .3rem 0; } #produkt li::marker { color: var(--accent); } /* 5) PRODUKT — te same ghost cards + czytelna typografia Działa gdy elementy produktu masz w siatce .cards/.card. Jeśli produkt to czysty tekst, reguły .cards/.card po prostu się nie użyją. */ #produkt .cards{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:16px !important; margin-top:10px; } @media (max-width:900px){ #produkt .cards{ grid-template-columns:1fr !important; } } #produkt .card{ background: var(--ghost) !important; border: 1px solid var(--ghost-border) !important; border-radius: 14px !important; padding: 16px !important; box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; backdrop-filter: blur(6px); } #produkt .card h3, #produkt .card h4{ margin: 0 0 .45rem 0 !important; } #produkt .card p{ margin:.38rem 0 !important; line-height:1.65 !important; } #produkt li{ margin:.3rem 0; } #produkt li::marker{ color: var(--accent); } /* 6) Delikatne wyrównanie marginesów akapitów także w wersji tekstowej (bez .card) */ #produkt p, #specyfikacja p{ line-height:1.65; margin:.38rem 0; } /* 7) (Opcjonalne) Zmniejszenie szerokości długich akapitów dla lepszej czytelności */ #produkt .container, #specyfikacja .container{ max-width: 1100px; } /* Hero: pełny ekran i ładne centrowanie zawartości */ .hero-clean{ min-height: calc(100vh - 120px); /* zajmie wysokość okna – nie zaczynamy stroną od "Produkt" */ display: flex; align-items: center; justify-content: center; } .hero-clean .inner{ width: 100%; } .hero-clean .content{ max-width: 1100px; margin: 0 auto; text-align: center; } /* Klasa do ukrywania sekcji, gdy klikamy w menu */ .section.collapsed{ display: none; } /* płynne przewijanie */ html{ scroll-behavior: smooth; } /* TELEFON PION: canvas i HUD niech mieszczą się bez scrolla */ @media (orientation: portrait) and (pointer: coarse) { .game-wrap, .game, #game-container { width: 100vw; max-width: 100vw; margin: 0 auto; overflow: hidden; } canvas#game { width: 100vw; /* zawsze na szerokość ekranu */ height: auto; /* wysokość proporcjonalnie */ max-height: 70vh; /* niech zostanie miejsce na HUD */ display: block; touch-action: none; /* pewność: bez przewijania */ } .hud, .scorebar, .controls { padding: 6px 10px; font-size: 14px; } } /* ===== MOBILE PORTRAIT FIX (iOS/Android) ===== */ @media (max-width: 480px) and (orientation: portrait) { /* 1) Górny banner – mniejszy i ciasny */ .top-banner { padding: 6px 10px !important; } .top-banner .container { gap: 8px !important; } .top-banner .container span { font-size: 14px !important; line-height: 1.25 !important; } /* 2) Header – układ kolumnowy, zero rozjeżdżania */ header { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } header .brand, header .brand-name { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; } header .brand-name, header h1.brand-name { font-size: 24px !important; line-height: 1.1 !important; margin: 0 !important; } header img.logo { height: 34px !important; width: auto !important; } /* 3) Menu – zwarte linki w kilku rzędach */ header nav, header .nav, nav.primary { display: flex !important; flex-wrap: wrap !important; gap: 8px 12px !important; width: 100% !important; margin: 2px 0 0 0 !important; } header nav a, header .nav a, nav.primary a { font-size: 16px !important; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; } /* 4) Języki – osobny wiersz pod menu, nie w środku */ .lang-switch { display: flex !important; gap: 6px !important; width: 100% !important; margin-top: 4px !important; justify-content: flex-start !important; } .lang-switch button { padding: 6px 10px !important; font-size: 14px !important; } /* 5) Hero – tytuł nie nachodzi na menu */ .hero-clean .hero-title, .hero-title { font-size: 36px !important; line-height: 1.1 !important; margin-top: 10px !important; } /* 6) Drobne: ikona gry, żeby nie „uciekała” */ .nav-icon { display: inline-flex !important; align-items:center !important; justify-content:center !important; } } /* === MOBILE PORTRAIT FIXES (≤ 600px) === */ @media (max-width: 600px) { /* ogólne marginesy */ .container { padding-left: 14px; padding-right: 14px; } /* top banner i logo */ .top-banner .container span { font-size: 14px; line-height: 1.2; } .site-header .logo { width: 44px; height: 44px; } /* nazwa marki i tytuły – zmniejszamy, żeby nie nachodziły na menu */ .brand-name { font-size: 28px !important; line-height: 1.1; } .hero-title { font-size: 34px !important; line-height: 1.1; } .hero-sub { font-size: 16px; } /* nawigacja – układ kolumnowy, zwarte przerwy */ .site-header .container { display: grid; gap: 10px; align-items: center; } .nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: center; } .nav a { display: inline-block; padding: 6px 8px; font-size: 16px; } /* przełącznik języka – jedna linia, zawijanie */ .lang-switch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .lang-switch button { padding: 6px 10px; font-size: 14px; } /* karty/specyfikacja – jedna kolumna, pełna szerokość */ .cards { display: grid; grid-template-columns: 1fr !important; gap: 12px; } .card { padding: 12px; } /* obrazki zawsze responsywne */ img { max-width: 100%; height: auto; } } /* Galeria – bezpieczne wartości także w pionie */ .gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr; } } /* znak wodny w galerii – mniejszy w pionie */ @media (max-width: 600px) { .img-wm > img.wm { width: 64px; right: 8px; bottom: 8px; } } @media (max-width: 768px) { .brand span { display: none !important; } } /* Ukryj tekst "AS Gloves" obok ikonki TYLKO na telefonie */ @media (max-width: 768px) { .brand .brand-name { display: none !important; } /* (opcjonalnie) lekko zmniejsz ikonę, żeby pasek był zgrabny */ .site-header .logo { width: 44px; height: 44px; } } /* ==== MOBILE FIX (ukryj tekst + "kup teraz") ==== */ @media (max-width: 768px) { /* ukryj cały tekst obok logo – zostaw tylko ikonę */ header .brand *:not(img) { display: none !important; } /* ukryj "kup teraz" gdziekolwiek jest w menu */ .nav a[href*="buy"], .nav a[href*="shop"], .nav a[href*="kjop"], .nav a[href*="kjøp"], .nav a[href*="kup"] { display: none !important; } } /* ===== MOBILE HEADER — AS GLOVES NA GÓRZE ===== */ @media (max-width: 768px) { /* Kontener nagłówka – kolumna i wyśrodkowanie */ .site-header .container { display: flex !important; flex-direction: column !important; justify-content: center; align-items: center; text-align: center; gap: 10px; } /* Logo mniejsze żeby pasowało */ .site-header .logo { width: 56px; height: 56px; } /* Napis AS GLOVES – większy i wyżej */ .brand-name { font-size: 36px !important; line-height: 1.1; font-weight: 600; text-align: center; margin: 0; } /* Nawigacja ładnie pod spodem, wyśrodkowana */ .nav { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; } .nav a { font-size: 18px; } /* Języki też na środku */ .lang-switch { display: flex; justify-content: center; gap: 8px; width: 100%; } } /* Show gloves only on mobile */ .hero-gloves { display: none; } @media (max-width: 768px) { .hero-gloves { display: block; width: 70%; max-width: 300px; margin: 0 auto 12px; } }