/* ========================================================================== GigaCon — motyw konferencji (design pass) ========================================================================== */ :root { --gc-navy: #15305a; --gc-navy-700: #1d3d6b; --gc-navy-900: #0d2545; --gc-accent: #2563eb; --gc-accent-600: #1d4ed8; --gc-cyan: #22d3ee; --gc-ink: #0f172a; --gc-muted: #64748b; --gc-line: #e5e9f0; --gc-bg: #f4f6fb; --gc-radius: 16px; --gc-shadow: 0 12px 34px rgba(15, 23, 42, .09); --gc-shadow-lg: 0 24px 60px rgba(15, 23, 42, .16); /* Płynna szerokość kontenerów treści — rośnie razem z ekranem użytkownika (zamiast sztywnego 1180/1320px, które na dużych/wysokich rozdzielczościach zostawiało połowę ekranu pustą po bokach), z rozsądnym górnym limitem. UWAGA (naprawa 2026-07-14): dolna granica clamp() (1180px/1320px) to PODŁOGA, z której clamp() nigdy nie zejdzie niżej - poniżej ok. 1439px/ 1500px szerokości ekranu (gdzie 82vw/88vw spada poniżej tej podłogi) zmienna i tak zawsze wynosiła 1180px/1320px, NIEZALEŻNIE od faktycznej szerokości ekranu telefonu. Na wąskich telefonach (~360-450px) wymuszało to szerokość strony w tych miejscach na sztywne 1180-1320px, co ucinało treść na całej stronie (przez overflow-x:hidden - bez paska przewijania, po prostu niewidoczna). Owinięcie w min(100%, ...) naprawia to: na wąskich ekranach 100% (realna szerokość) jest mniejsze niż podłoga clamp(), więc min() wybiera 100% - na szerokich ekranach clamp() dalej działa jak wcześniej (100% byłoby tam większe niż wynik clamp(), więc min() wybiera clamp()). */ --gc-container: min(100%, clamp(1180px, 82vw, 1760px)); --gc-container-wide: min(100%, clamp(1320px, 88vw, 1960px)); /* Skala powiększenia elementów na dużych ekranach: 1 do szerokości 1280px, rośnie liniowo do 1.42 przy ~3200px. Używana przez calc() do powiększania (nie tylko rozciągania) kart, zdjęć, ikon i odstępów — a przez font-size na skaluje też całą typografię opartą na rem. */ --gc-scale: clamp(1, calc(1 + (100vw - 1280px) / 4800px), 1.42); } html { font-size: calc(16px * var(--gc-scale)); } /* --- Typografia globalna --- */ body, .ast-container, button, input, select, textarea { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { color: var(--gc-ink); background: #fff; } h1, h2, h3, h4 { letter-spacing: -0.02em; } .gigacon-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--gc-accent); margin-bottom: 10px; } .gigacon-eyebrow--center { display: block; text-align: center; } .gigacon-eyebrow--lg { font-size: 1.3rem; letter-spacing: .08em; } /* --- Zapobiega poziomemu przewijaniu (biały pasek z prawej) --- "overflow-x: clip" to nowsza wartość, gorzej wspierana w niektórych mobilnych przeglądarkach (np. starsze Samsung Internet) - gdy nie zadziała, każdy drobny poziomy overflow gdziekolwiek na stronie zaczyna przesuwać całą stronę w bok. "hidden" daje ten sam efekt (blokuje poziomy scroll) i jest wspierane od dawna praktycznie wszędzie. */ html { overflow-x: hidden; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { overflow-x: hidden; } /* min-width:0 jest kluczowe: #page to flex container (display:flex;flex-direction:column z rdzenia Astry), a #content/.site-content jest jego elementem flex - domyślnie flex-item ma "automatyczny minimalny rozmiar" liczony z zawartości (min-width:auto), który WYGRYWA z "width:100%" gdy jakiś głęboko zagnieżdżony element (np. siatka CSS Grid z wymuszoną min. szerokością kolumny) potrzebuje więcej miejsca - to właśnie powodowało, że cała strona (nie tylko jeden widget) była szersza niż ekran na wąskich telefonach. PRAWDZIWA PRZYCZYNA (znaleziona 2026-07-14 przez pomiar getBoundingClientRect w prawdziwej przeglądarce, nie w headless): "100vw" liczy się RAZEM z paskiem przewijania, a zwykłe "100%"/szerokość go WYKLUCZA - różnica ~15-17px. Wcześniejsza próba z dosłownym "100vw" na #page/#content naprawiła jeden problem (min-width:auto flex-item) ale wprowadziła NOWY: #page renderował się O TĘ RÓŻNICĘ szerzej niż faktyczny , przesuwając/ucinając wszystko wewnątrz o ~15px po prawej (widoczne jako asymetria - treść nie wyśrodkowana, "wyjeżdżająca" w prawo). Fix: --gc-real-vw = document.documentElement.clientWidth (JS, patrz gigacon.js) - ta właściwość POPRAWNIE wyklucza pasek przewijania, w przeciwieństwie do 100vw. */ #page, #content, .site-content { width: var(--gc-real-vw, 100%); max-width: var(--gc-real-vw, 100%); min-width: 0; overflow-x: hidden; } /* --- Pełnoszerokie pasy (kontener jest już pełnym blokiem) --- */ .gigacon-home-hero, .gigacon-hero, .gigacon-features, .gigacon-cta-band { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* --- Pełna szerokość dla widoków GigaCon (nadpisanie kontenerów Astry) --- Selektor z ID #content ma wysoką specyficzność i pewnie wygrywa z regułą Astry (.ast-container{max-width:1240px}). */ .home #content > .ast-container, .single-konferencja #content > .ast-container, .post-type-archive-konferencja #content > .ast-container, .tax-branza #content > .ast-container, .ast-page-builder-template #content > .ast-container, .ast-page-builder-template #content > .ast-container.ast-narrow-container { display: block !important; /* usuń flex column-reverse Astry — powodował, że treść nie rozciągała się na pełną szerokość */ max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Bezpośrednie owijki treści na pełną szerokość */ .gigacon-home, .gigacon-single, .gigacon-archive { width: 100%; } /* Usuń domyślne marginesy/padding wokół treści na tych widokach */ .ast-page-builder-template #primary, .ast-page-builder-template #content .site-content { padding: 0 !important; margin: 0 !important; } /* ========================================================================== Globalny nagłówek (Astra) — ciemny, sticky ========================================================================== */ .site-header, .ast-primary-header-bar, .main-header-bar { background: linear-gradient(90deg, rgba(37, 99, 235, .32), transparent 48%), linear-gradient(270deg, rgba(34, 211, 238, .20), transparent 42%), var(--gc-navy) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; } /* position:fixed (nie sticky): jak opisano przy .gigacon-archive-banner niżej, #page/#content/.site-content mają overflow-x:hidden, co wymusza obliczone overflow-y:auto i psuje position:sticky (nagłówek w praniu wcale się nie przyklejał, mimo tego CSS - zweryfikowane pomiarem w prawdziwej przeglądarce). Fixed nie zależy od overflow przodków. #content dostaje padding-top równy realnej wysokości nagłówka (zmienna --gc-header-h-flush, mierzona w JS - patrz gcSetHeaderH w gigacon.js), żeby treść nie chowała się pod nim. */ .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; transition: box-shadow .2s ease; } #content { padding-top: var(--gc-header-h-flush, 90px); } /* Po zalogowaniu WP dokleja pasek admina (#wpadminbar, fixed, 32px/46px na wąskich ekranach) i przesuwa NORMALNY przepływ strony przez margin-top na (html.wp-toolbar) - ale nasze position:fixed elementy (nagłówek, baner) ignorują ten margines, bo są pozycjonowane względem viewportu, nie . Efekt: treść (w normalnym przepływie, przesunięta o 32px) i baner (fixed, nieprzesunięty) rozjeżdżają się - biały pasek między nimi. Fix: przesuwamy fixed elementy o tyle samo, o ile WP przesuwa . */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .gigacon-scrolled .site-header { box-shadow: 0 8px 30px rgba(7, 20, 41, .35); } .site-title a, .site-title a:focus, .site-title a:hover, .ast-site-title-wrap .site-title a { color: #fff !important; font-weight: 800; letter-spacing: -0.02em; } /* Kontener nagłówka Astry ma sztywne max-width:1240px, przez co na szerokich ekranach logo zaczyna się dużo bardziej na środku niż treść poniżej (która rośnie razem z --gc-container). Rozciągamy go do tej samej płynnej szerokości, żeby logo zaczynało się na wysokości lewej krawędzi reszty treści. */ .site-header .ast-container, .main-header-bar .ast-container { max-width: var(--gc-container-wide) !important; } /* Logo witryny — biała wersja HD na ciemnym nagłówku (bez inwersji) */ .site-header .custom-logo, .ast-site-identity .custom-logo { width: calc(190px * var(--gc-scale)); max-width: calc(190px * var(--gc-scale)); height: auto; } /* Ukryj tekstowy tytuł witryny (mamy logo) */ .site-header .site-title { display: none; } .site-description { color: rgba(255, 255, 255, .6) !important; } .main-header-bar .main-header-menu a, .ast-header-navigation-markup a, .main-navigation a, .ast-menu-toggle { color: #e2e8f0 !important; font-weight: 500; } .main-header-bar .main-header-menu a:hover, .main-header-bar .current-menu-item > a, .main-navigation .current-menu-item > a { color: #fff !important; } /* Podkreślenie pod aktywną pozycją menu */ .main-header-menu .menu-item > a { position: relative; } .main-header-menu .menu-item > a::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 6px; height: 2px; background: linear-gradient(90deg, #60a5fa, var(--gc-cyan)); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .main-header-menu .menu-item > a:hover::after, .main-header-menu .current-menu-item > a::after { transform: scaleX(1); } /* Mobilne menu Astry na ciemnym tle — linki (#e2e8f0, patrz reguła wyżej) są jasne i czytelne tylko na ciemnym tle. Sam UL (.main-header-menu, klasa ast-menu-shadow) niesie własne jasne tło Astry, które trzeba nadpisać — nadpisanie samego kontenera .main-header-bar-navigation nie wystarcza, bo to UL, nie jego rodzic, faktycznie maluje tło w trybie mobilnym. Każdy pojedynczy link (.menu-link) ma DODATKOWO własne białe tło Astry (leży NAD tłem UL) — bez nadpisania też został biały, z ledwo widocznym jasnym tekstem na białym tle. UWAGA: klasa "stack-on-mobile" jest na UL ZAWSZE (też na desktopie) — to tylko włącznik zachowania responsywnego, nie stan "aktualnie zwinięte". Reguły muszą być w media query, inaczej granatowe tło nakłada się też na pasek desktopowy (i tworzy widoczną ramkę, bo pasek ma gradient, a UL dostawał płaski kolor). */ @media (max-width: 960px) { .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-header-wrap .main-header-bar-navigation, .main-header-bar-navigation .main-header-menu.ast-nav-menu.stack-on-mobile { background: var(--gc-navy) !important; } .main-header-bar-navigation .main-header-menu.stack-on-mobile .menu-link { background: transparent !important; } } /* ========================================================================== Stopka (Astra) ========================================================================== */ .site-footer, .ast-small-footer, footer.site-footer, .site-below-footer-wrap, .site-primary-footer-wrap { background: linear-gradient(90deg, rgba(37, 99, 235, .32), transparent 48%), linear-gradient(270deg, rgba(34, 211, 238, .20), transparent 42%), var(--gc-navy-900) !important; color: rgba(255, 255, 255, .7) !important; } .site-footer a { color: #93c5fd !important; } /* NAPRAWA overflow całej strony na wąskich telefonach (np. Galaxy S20 FE): Astra rysuje wiersz buildera stopki jako CSS Grid z "grid-template-columns: auto auto" (main.min.css core Astry, poza naszą kontrolą) - DWIE kolumny zawsze zarezerwowane, nawet gdy używana jest tylko jedna sekcja (nasza, z logo/social media/tekstem copyright). Kolumna "auto" domyślnie nie może się skurczyć poniżej rozmiaru swojej zawartości (automatic minimum size) - długi tekst "Prawa autorskie © ... Regulamin i polityka prywatności" w tej jednej kolumnie wymuszał więc minimalną szerokość CAŁEGO wiersza stopki, a to rozciągało (przez brak min-width:0 na poziomie #content/#page) dosłownie CAŁĄ resztę strony szerzej niż ekran telefonu - stąd ucinanie widoczne wszędzie (hero, agenda, opis), mimo że przyczyna była w stopce. Wymuszamy jedną kolumnę na wąskich ekranach i zerujemy automatyczne min. */ .site-footer .ast-builder-grid-row { min-width: 0; } .site-footer .ast-builder-grid-row > * { min-width: 0; } @media (max-width: 600px) { .site-footer .ast-builder-grid-row { grid-template-columns: 1fr !important; } } /* Logo w stopce */ .ast-footer-copyright, .ast-footer-copyright p { text-align: center; color: rgba(255, 255, 255, .65) !important; margin: 0; } .gigacon-footer-logo { } .gigacon-footer-logo { display: block; margin: 0 auto 14px; width: 170px; height: auto; opacity: .95; } /* Przycisk "Kontakt" + ikony social w jednym wierszu (oba to "sposoby kontaktu" - grupowanie razem zamiast dwóch osobnych, wyrównanych do siebie rzędów jest zwarte i czytelniejsze niż dłuższa kolumna z 4 osobnymi elementami jeden nad drugim). Zawija się na wąskich ekranach. */ .gigacon-footer-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; margin: 0 0 20px; } .gigacon-footer-cta { display: inline-flex; } /* Ikony social media w stopce */ .gigacon-footer-social { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0; } .gigacon-footer-social__link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .18s ease, box-shadow .18s ease; } .gigacon-footer-social__link svg { display: block; } .gigacon-footer-social__link:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); } /* Przyciski "Udostępnij" (artykuł/konferencja) - patrz gigacon_share_buttons_html() w functions.php */ .gigacon-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0; } .gigacon-share__label { font-size: .85rem; font-weight: 700; color: var(--gc-muted); } .gigacon-share__link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: #fff; border: 1px solid var(--gc-line); transition: transform .16s ease, box-shadow .16s ease; } .gigacon-share__link svg { display: block; } .gigacon-share__link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .14); } /* ========================================================================== Przyciski ========================================================================== */ .gigacon-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--gc-scale)); padding: calc(12px * var(--gc-scale)) calc(24px * var(--gc-scale)); border-radius: 999px; font-weight: 600; text-decoration: none; line-height: 1; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .gigacon-btn--primary { background: var(--gc-accent); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .3); } .gigacon-btn--primary:hover { background: var(--gc-accent-600); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, .38); } .gigacon-btn--outline { background: transparent; color: var(--gc-accent); border-color: var(--gc-accent); } .gigacon-btn--outline:hover { background: var(--gc-accent); color: #fff; transform: translateY(-2px); } .gigacon-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); } .gigacon-btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); } .gigacon-btn--lg { padding: calc(16px * var(--gc-scale)) calc(32px * var(--gc-scale)); font-size: 1.05rem; } .gigacon-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--gc-muted); background: var(--gc-bg); padding: 6px 13px; border-radius: 999px; font-weight: 500; } .gigacon-link-arrow { color: var(--gc-accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .gigacon-link-arrow:hover { color: var(--gc-accent-600); } /* Dłuższe warianty tego linku (np. "Zobacz archiwum zakończonych konferencji →") nie mieszczą się w jednej linii na wąskich ekranach — nowrap ucinał wtedy tekst poza widoczny obszar zamiast zawinąć go do kolejnej linii. */ @media (max-width: 480px) { .gigacon-link-arrow { white-space: normal; } } /* ========================================================================== Strona główna ========================================================================== */ .gigacon-home-hero { position: relative; background: var(--gc-navy); color: #fff; padding: 56px 20px 64px; overflow: hidden; } /* Pełnoekranowy hero na desktopie (jak na stronie konferencji) */ @media (min-width: 961px) { .gigacon-home-hero { min-height: calc(100vh - 84px); display: flex; align-items: center; padding-top: 40px; padding-bottom: 96px; } } .gigacon-home-hero .gigacon-hero__scroll { display: none; } @media (min-width: 961px) { .gigacon-home-hero .gigacon-hero__scroll { display: inline-flex; z-index: 2; } } .gigacon-home-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(700px 400px at 50% 0%, #000, transparent 80%); pointer-events: none; } .gigacon-home-hero__inner { max-width: 900px; width: 100%; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .gigacon-home-section#dalej { scroll-margin-top: var(--gc-header-h, 90px); } /* Układ hero z kartą boczną (najbliższa konferencja) — wzór hero konferencji */ .gigacon-home-hero.has-aside .gigacon-home-hero__inner { max-width: var(--gc-container); text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) calc(400px * var(--gc-scale)); gap: calc(48px * var(--gc-scale)); align-items: center; } .gigacon-home-hero__content { min-width: 0; } .gigacon-home-hero.has-aside .gigacon-home-hero__actions { justify-content: flex-start; } .gigacon-home-hero.has-aside .gigacon-home-hero__stats { justify-content: flex-start; } .gigacon-home-hero__aside { align-self: stretch; justify-content: center; } .gigacon-home-hero__event { display: flex; flex-direction: column; gap: 4px; text-align: center; } .gigacon-home-hero__event-date { color: #cbd5e1; font-size: 1.05rem; font-weight: 600; } @media (max-width: 900px) { .gigacon-home-hero.has-aside .gigacon-home-hero__inner { grid-template-columns: 1fr; text-align: center; } .gigacon-home-hero.has-aside .gigacon-home-hero__actions, .gigacon-home-hero.has-aside .gigacon-home-hero__stats { justify-content: center; } .gigacon-home-hero__aside { max-width: 460px; margin: 0 auto; width: 100%; } } .gigacon-home-hero__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; font-weight: 700; color: var(--gc-cyan); padding: 7px 15px; border: 1px solid rgba(34, 211, 238, .35); border-radius: 999px; margin-bottom: 14px; } .gigacon-home-hero__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.06; margin: 0 0 14px; color: #fff; font-weight: 900; } .gigacon-home-hero__title span { background: linear-gradient(90deg, #60a5fa, var(--gc-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .gigacon-home-hero__lead { font-size: 1.12rem; color: #cbd5e1; max-width: 620px; margin: 0 0 24px; line-height: 1.55; } .gigacon-home-hero:not(.has-aside) .gigacon-home-hero__lead { margin: 0 auto 24px; } .gigacon-home-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .gigacon-home-hero__stats { display: flex; justify-content: center; gap: 44px; margin-top: 34px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); } .gigacon-home-hero__stats strong { display: block; font-size: 2.2rem; font-weight: 800; color: #fff; } .gigacon-home-hero__stats span { color: #94a3b8; font-size: .95rem; } /* --- Licznik odliczający --- */ /* flex-wrap: 4 kafelki (dni/godz/min/sek) o stałej min-szerokości (68px) nie mieszczą się w jednej linii na wąskich telefonach (np. Galaxy S20 FE, ~360px) - bez zawijania licznik był szerszy niż karta hero i wyjeżdżał/ucinał się na krawędzi sekcji (".gigacon-hero" ma overflow:hidden, więc nie dawało to poziomego paska przewijania całej strony, tylko ucięte cyfry w hero). */ .gigacon-countdown { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: calc(10px * var(--gc-scale)); max-width: 100%; } .gigacon-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: calc(12px * var(--gc-scale)) calc(8px * var(--gc-scale)); min-width: calc(68px * var(--gc-scale)); backdrop-filter: blur(4px); } .gigacon-countdown__num { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .gigacon-countdown__lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; } .gigacon-countdown.is-done { opacity: .6; } /* Licznik w hero konferencji */ .gigacon-hero__countdown { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 28px; } .gigacon-hero__countdown-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; font-weight: 700; } /* Wyśrodkowanie licznika względem ramki „najbliższego wydarzenia" w hero strony głównej. */ .gigacon-home-hero__aside .gigacon-hero__countdown { align-items: center; text-align: center; } /* Najbliższe wydarzenie na stronie głównej */ .gigacon-next-event { margin: 26px auto 0; max-width: 620px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .gigacon-next-event__label { font-size: .88rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gc-cyan); font-weight: 700; } .gigacon-next-event__title { color: #fff; font-weight: 700; font-size: 1.32rem; text-decoration: none; } .gigacon-next-event__title:hover { color: #93c5fd; } .gigacon-home-section { max-width: var(--gc-container); margin: 0 auto; padding: calc(80px * var(--gc-scale)) 20px; } .gigacon-home-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; } .gigacon-home-section__head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--gc-navy); margin: 0; } .gigacon-features { background: var(--gc-bg); padding: calc(88px * var(--gc-scale)) 20px; } .gigacon-features__inner { max-width: var(--gc-container); margin: 0 auto; text-align: center; } .gigacon-features__title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--gc-navy); margin: 0 0 48px; } .gigacon-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(230px * var(--gc-scale)), 1fr)); gap: calc(24px * var(--gc-scale)); text-align: left; } .gigacon-feature { background: #fff; border-radius: var(--gc-radius); padding: calc(28px * var(--gc-scale)); box-shadow: var(--gc-shadow); transition: transform .15s ease; } .gigacon-feature:hover { transform: translateY(-4px); } .gigacon-feature__icon { font-size: 2rem; width: calc(60px * var(--gc-scale)); height: calc(60px * var(--gc-scale)); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,211,238,.12)); border-radius: 14px; margin-bottom: 16px; } .gigacon-feature h3 { font-size: 1.2rem; color: var(--gc-navy); margin: 0 0 8px; } .gigacon-feature p { color: var(--gc-muted); margin: 0; line-height: 1.6; } .gigacon-cta-band { background: radial-gradient(700px 300px at 80% 120%, rgba(34,211,238,.25), transparent 60%), var(--gc-accent); padding: calc(72px * var(--gc-scale)) 20px; text-align: center; color: #fff; } .gigacon-cta-band__inner { max-width: 700px; margin: 0 auto; } .gigacon-cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 12px; color: #fff; } .gigacon-cta-band p { font-size: 1.1rem; margin: 0 0 28px; color: rgba(255, 255, 255, .9); } .gigacon-cta-band .gigacon-btn--primary { background: #fff; color: var(--gc-accent); box-shadow: 0 10px 30px rgba(0,0,0,.2); } .gigacon-cta-band .gigacon-btn--primary:hover { background: #f1f5f9; color: var(--gc-accent-600); } .gigacon-cta-band--cfp { background: radial-gradient(700px 300px at 20% 120%, rgba(37,99,235,.35), transparent 60%), var(--gc-navy); } .gigacon-cta-band--cfp .gigacon-eyebrow--center { color: rgba(255,255,255,.75); } .gigacon-cta-band--cfp .gigacon-btn--primary { background: #fff; color: var(--gc-navy); } .gigacon-cta-band--cfp .gigacon-btn--primary:hover { background: #f1f5f9; } .gigacon-eyebrow--light { color: rgba(255,255,255,.75); } .gigacon-cta-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24px * var(--gc-scale)); } .gigacon-cta-tile { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; border-radius: var(--gc-radius); padding: calc(32px * var(--gc-scale)); color: #fff; background: radial-gradient(700px 300px at 80% 120%, rgba(34,211,238,.25), transparent 60%), var(--gc-accent); transition: transform .15s ease, box-shadow .15s ease; } .gigacon-cta-tile:hover { transform: translateY(-4px); box-shadow: var(--gc-shadow-lg); } .gigacon-cta-tile h3 { font-size: 1.3rem; margin: 0 0 8px; color: #fff; } .gigacon-cta-tile p { font-size: .96rem; margin: 0 0 18px; color: rgba(255,255,255,.9); line-height: 1.5; } .gigacon-cta-tile__link { margin-top: auto; font-weight: 700; color: #fff; } .gigacon-cta-tile--navy { background: radial-gradient(700px 300px at 20% 120%, rgba(37,99,235,.35), transparent 60%), var(--gc-navy); } @media (max-width: 640px) { .gigacon-cta-tiles { grid-template-columns: 1fr; } } .gigacon-lead-form { max-width: 560px; margin: 0 auto; text-align: left; } .gigacon-lead-form__row { display: flex; gap: 16px; margin-bottom: 16px; } .gigacon-lead-form__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .gigacon-lead-form__field label { font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .92); } .gigacon-lead-form__field input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .96); color: var(--gc-navy); font-size: .96rem; font-family: inherit; transition: box-shadow .16s ease, border-color .16s ease; } .gigacon-lead-form__field input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); } .gigacon-lead-form .gigacon-btn { margin-top: 4px; width: 100%; } .gigacon-lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .gigacon-lead-form .cf-turnstile { width: 100%; margin-bottom: 16px; } .gigacon-lead-form__notice { margin: 0 0 22px; padding: 12px 18px; border-radius: 10px; font-size: .95rem; font-weight: 600; } .gigacon-lead-form__notice--success { background: rgba(255, 255, 255, .95); color: #15803d; } .gigacon-lead-form__notice--error { background: rgba(255, 255, 255, .95); color: #b91c1c; } @media (max-width: 560px) { .gigacon-lead-form__row { flex-direction: column; gap: 12px; } } /* ========================================================================== Strona „Zostań partnerem" ========================================================================== */ .gigacon-home-section__head--center { justify-content: center; text-align: center; } /* Kafelki korzyści w jednej linii */ .gigacon-partner-page .gigacon-features__grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } .gigacon-partner-page .gigacon-feature { padding: 24px 20px; } .gigacon-partner-page .gigacon-feature h3 { font-size: 1.08rem; } .gigacon-partner-page .gigacon-feature p { font-size: .92rem; } @media (max-width: 1100px) { .gigacon-partner-page .gigacon-features__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .gigacon-partner-companies__empty { color: rgba(255,255,255,.8); line-height: 1.6; margin: 0; font-size: .95rem; } /* Wyróżniona pozycja menu „Zostań partnerem" jako przycisk CTA */ .menu-cta { display: flex; align-items: center; } .main-header-menu .menu-cta > a, .ast-nav-menu .menu-cta > a, .menu-cta > a.menu-link { display: inline-flex !important; align-items: center; height: auto !important; background: var(--gc-accent); color: #fff !important; border-radius: 999px; padding: 12px 16px !important; line-height: 1 !important; font-size: .9rem; font-weight: 700; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); } .main-header-menu .menu-cta > a:hover, .ast-nav-menu .menu-cta > a:hover, .menu-cta > a.menu-link:hover { background: var(--gc-accent-600); color: #fff !important; transform: translateY(-1px); } /* Usuń domyślne podkreślenie/kreskę Astry pod tym elementem */ .menu-cta > a::before, .menu-cta > a::after { display: none !important; } .menu-cta.current-menu-item > a { background: var(--gc-accent-600); } .gigacon-btn--outline { background: #fff; color: var(--gc-accent); border-color: var(--gc-accent); } .gigacon-btn--outline:hover { background: var(--gc-accent); color: #fff; transform: translateY(-2px); } /* Najbliższe wydarzenie — karta */ .gigacon-partner-event__card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: #fff; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow-lg); overflow: hidden; } .gigacon-partner-event__body { padding: 40px; } .gigacon-partner-event__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--gc-navy); margin: 0 0 18px; } .gigacon-partner-event__meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; color: var(--gc-muted); font-weight: 600; } .gigacon-partner-event__body p { color: var(--gc-ink); line-height: 1.7; margin: 0 0 24px; } .gigacon-partner-event__companies { padding: 40px; background: var(--gc-navy); color: #fff; } .gigacon-partner-event__companies h3 { margin: 0 0 20px; font-size: 1.05rem; color: #fff; } .gigacon-partner-companies__group { margin-bottom: 18px; } .gigacon-partner-companies__role { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gc-cyan); margin-bottom: 8px; } .gigacon-partner-companies__tags { display: flex; flex-wrap: wrap; gap: 8px; } .gigacon-partner-company { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .88rem; font-weight: 600; } /* Pakiety */ .gigacon-packages__lead { max-width: 640px; margin: -8px auto 40px; text-align: center; color: var(--gc-muted); font-size: 1.05rem; } .gigacon-packages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; } .gigacon-package { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); padding: 30px 26px; box-shadow: var(--gc-shadow); } .gigacon-package.is-featured { border-color: var(--gc-accent); box-shadow: 0 24px 60px rgba(37,99,235,.18); } .gigacon-package__badge { position: absolute; top: -12px; left: 26px; background: var(--gc-accent); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; } .gigacon-package__name { font-size: 1.3rem; color: var(--gc-navy); margin: 0 0 8px; font-weight: 800; } .gigacon-package__talk { color: var(--gc-accent); font-weight: 700; margin: 0 0 18px; } .gigacon-package__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; } .gigacon-package__list li { position: relative; padding-left: 28px; line-height: 1.5; color: var(--gc-ink); } .gigacon-package__list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(37,99,235,.12); color: var(--gc-accent); font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .gigacon-package .gigacon-btn { margin-top: auto; text-align: center; } @media (max-width: 760px) { .gigacon-partner-event__card { grid-template-columns: 1fr; } .gigacon-partner-event__body, .gigacon-partner-event__companies { padding: 30px; } } /* ========================================================================== Archiwum / lista ========================================================================== */ .gigacon-archive { max-width: var(--gc-container); margin: 0 auto; padding: 56px 20px 72px; } .gigacon-archive__head { text-align: center; margin-bottom: 40px; } .gigacon-archive__head h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--gc-navy); margin: 0 0 10px; } .gigacon-archive__head p { color: var(--gc-muted); font-size: 1.1rem; margin: 0 0 24px; } .gigacon-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .gigacon-filter { padding: 9px 18px; border-radius: 999px; text-decoration: none; color: var(--gc-navy); background: #fff; border: 1px solid var(--gc-line); font-weight: 500; transition: all .15s ease; } .gigacon-filter:hover, .gigacon-filter.is-active { background: var(--gc-navy); color: #fff; border-color: var(--gc-navy); } .gigacon-grid { display: grid; gap: calc(26px * var(--gc-scale)); grid-template-columns: repeat(auto-fill, minmax(calc(330px * var(--gc-scale)), 1fr)); } /* --- Karta --- */ .gigacon-card { background: #fff; border-radius: var(--gc-radius); overflow: hidden; box-shadow: var(--gc-shadow); display: flex; flex-direction: column; border: 1px solid var(--gc-line); transition: transform .16s ease, box-shadow .16s ease; } .gigacon-card:hover { transform: translateY(-6px); box-shadow: var(--gc-shadow-lg); } .gigacon-card__media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; } .gigacon-card__img, .gigacon-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .gigacon-card:hover .gigacon-card__img { transform: scale(1.05); } .gigacon-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--gc-navy), var(--gc-accent)); display: flex; align-items: center; justify-content: center; } .gigacon-card__placeholder span { color: rgba(255,255,255,.92); font-weight: 800; letter-spacing: 2px; font-size: 1.3rem; } .gigacon-card__logo { width: 100%; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .gigacon-card__logo img { max-width: 82%; max-height: 78%; width: auto; height: auto; object-fit: contain; } .gigacon-card__date { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.95); color: var(--gc-navy); padding: 7px 13px; border-radius: 10px; font-weight: 700; font-size: .88rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .gigacon-card__body { padding: calc(22px * var(--gc-scale)); display: flex; flex-direction: column; gap: calc(11px * var(--gc-scale)); flex: 1; } .gigacon-card__tags a { color: var(--gc-accent); text-decoration: none; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .gigacon-card__title { font-size: 1.28rem; margin: 0; line-height: 1.3; font-weight: 700; } .gigacon-card__title a { color: var(--gc-navy); text-decoration: none; } .gigacon-card__title a:hover { color: var(--gc-accent); } .gigacon-card__excerpt { color: var(--gc-muted); font-size: .95rem; margin: 0; line-height: 1.55; } .gigacon-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .gigacon-card__body .gigacon-btn { margin-top: 8px; text-align: center; } .gigacon-empty { text-align: center; color: var(--gc-muted); font-size: 1.1rem; padding: 60px 0; grid-column: 1 / -1; } .gigacon-pagination { margin-top: 44px; text-align: center; } .gigacon-pagination .page-numbers { padding: 9px 15px; border-radius: 10px; text-decoration: none; color: var(--gc-navy); font-weight: 600; } .gigacon-pagination .page-numbers.current { background: var(--gc-navy); color: #fff; } /* ========================================================================== Pojedyncza konferencja — baner archiwalny / baner zachęty do zapisu ========================================================================== */ /* position:fixed (nie sticky) świadomie: #page/#content/.site-content mają overflow-x:hidden (patrz linia ~90), co wymusza obliczone overflow-y:auto i czyni je "kontenerami przewijania" w rozumieniu CSS - position:sticky wewnątrz nich przestaje się przyklejać do widocznego scrolla przeglądarki (realne przewijanie strony i tak dzieje się na ), zweryfikowane pomiarem getBoundingClientRect w prawdziwej przeglądarce (ten sam problem dotyczy nawet nagłówka .site-header, mimo position:sticky w CSS). position:fixed omija to całkowicie (jego containing block to viewport, niezależnie od overflow przodków - psują go tylko transform/filter/ perspective/contain, których tu brak). Miejsce w layoucie (żeby treść pod banerem nie "skakała") rezerwuje JS przez --gc-archive-banner-h na .gigacon-single.has-sticky-banner (patrz gigacon.js). Ta sama klasa i JS obsługują oba warianty banera (archiwalny - pomarańczowy, i CTA zapisu na nadchodzącą konferencję - niebieski, modyfikator --cta), bo pojawia się zawsze najwyżej jeden z nich naraz (single-konferencja.php). */ .gigacon-archive-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(10px * var(--gc-scale)) calc(18px * var(--gc-scale)); background: linear-gradient(90deg, #b45309, #d97706); color: #fff; padding: calc(12px * var(--gc-scale)) calc(20px * var(--gc-scale)); text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); position: fixed; /* -1px: nagłówek ma realną (ułamkową) wysokość, a JS zapisuje ją do zmiennej zaokrągloną do pełnego piksela (Math.ceil) - przy pewnych proporcjach skalowania/DPR to rozjeżdża się o ułamek piksela, przez co podczas przewijania na granicy nagłówek/baner na moment prześwitywała strona pod spodem. 1px zakładki (baner pod nagłówkiem, który ma wyższy z-index) to maskuje bez widocznego efektu ubocznego. */ top: calc(var(--gc-header-h-flush, 90px) - 1px); left: 0; right: 0; z-index: 998; } /* Ten sam offset paska admina co przy .site-header wyżej - baner wisi tuż pod nagłówkiem, więc musi się przesunąć o dokładnie tyle samo. */ body.admin-bar .gigacon-archive-banner { top: calc(var(--gc-header-h-flush, 90px) + 32px - 1px); } @media (max-width: 782px) { body.admin-bar .gigacon-archive-banner { top: calc(var(--gc-header-h-flush, 90px) + 46px - 1px); } } .gigacon-archive-banner--cta { background: linear-gradient(90deg, var(--gc-navy), var(--gc-accent)); } .gigacon-single.has-sticky-banner { padding-top: var(--gc-archive-banner-h, 74px); } .gigacon-archive-banner__icon { font-size: 1.3rem; line-height: 1; } .gigacon-archive-banner__text { font-size: .95rem; } .gigacon-archive-banner__text strong { font-weight: 800; } .gigacon-archive-banner__cta { display: inline-flex; align-items: center; background: #fff; color: #92400e; font-weight: 700; font-size: .92rem; padding: calc(7px * var(--gc-scale)) calc(16px * var(--gc-scale)); border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; } .gigacon-archive-banner__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); color: #92400e; } .gigacon-archive-banner--cta .gigacon-archive-banner__cta { color: var(--gc-accent); } .gigacon-archive-banner--cta .gigacon-archive-banner__cta:hover { color: var(--gc-accent); } @media (max-width: 640px) { .gigacon-archive-banner { padding: 14px 16px; } .gigacon-archive-banner__text { font-size: .88rem; } } /* ========================================================================== Pojedyncza konferencja — hero ========================================================================== */ .gigacon-hero { position: relative; background: var(--gc-navy); color: #fff; padding: 56px 20px 64px; overflow: hidden; } .gigacon-hero__inner { max-width: var(--gc-container); margin: 0 auto; width: 100%; position: relative; z-index: 1; } /* Pełnoekranowy hero na desktopie */ @media (min-width: 961px) { .gigacon-hero { min-height: calc(100vh - 84px); display: flex; align-items: center; position: relative; padding-top: 40px; padding-bottom: 96px; } /* Strona konferencji z dodatkowym sticky banerem (archiwalnym/CTA) już dostaje padding-top na .gigacon-single równy jego wysokości (patrz .has-sticky-banner wyżej), więc hero zaczyna się niżej na stronie - bez odjęcia tej samej wysokości tutaj jego dół (a wraz z nim strzałka "Dowiedz się więcej") wypadał poza widoczny ekran. */ .gigacon-single.has-sticky-banner .gigacon-hero { min-height: calc(100vh - 84px - var(--gc-archive-banner-h, 74px)); } } /* position:fixed (nie absolute względem .gigacon-hero) - na stronach, gdzie treść hero (logo+licznik) jest wyższa niż jego min-height, sama sekcja robi się wyższa niż ekran i strzałka "wpisana" w jej dolną krawędź wypadałaby poza widok. Fixed trzyma ją zawsze w tym samym miejscu względem ekranu; chowa się dopiero po realnym zjechaniu poniżej hero (patrz JS .is-hidden w gigacon.js, IntersectionObserver na .gigacon-hero). */ .gigacon-hero__scroll { display: none; position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 6px; color: #cbd5e1; text-decoration: none; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; transition: color .15s ease, opacity .2s ease; z-index: 40; } .gigacon-hero__scroll.is-hidden { opacity: 0; pointer-events: none; } @media (min-width: 961px) { .gigacon-hero__scroll { display: inline-flex; } } .gigacon-hero__scroll:hover { color: #fff; } .gigacon-hero__scroll svg { animation: gigacon-bounce 1.8s ease-in-out infinite; } @keyframes gigacon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* Unoszące się, rozmyte kształty w tle hero (efekt głębi) */ .gigacon-hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .gigacon-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; } .gigacon-hero-blob--1 { width: 460px; height: 460px; top: -140px; right: -100px; background: rgba(34, 211, 238, .55); animation: gigacon-float-a 26s ease-in-out infinite; } .gigacon-hero-blob--2 { width: 420px; height: 420px; bottom: -160px; left: -110px; background: rgba(37, 99, 235, .6); animation: gigacon-float-b 30s ease-in-out infinite; animation-delay: -9s; } .gigacon-hero-blob--3 { width: 320px; height: 320px; top: 38%; left: 52%; background: rgba(139, 92, 246, .4); animation: gigacon-float-c 34s ease-in-out infinite; animation-delay: -17s; } @keyframes gigacon-float-a { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(-260px, 180px) rotate(20deg) scale(1.15); } 50% { transform: translate(-80px, 340px) rotate(-14deg) scale(.85); } 75% { transform: translate(220px, 140px) rotate(10deg) scale(1.05); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } @keyframes gigacon-float-b { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(280px, -170px) rotate(-18deg) scale(1.1); } 50% { transform: translate(120px, -360px) rotate(14deg) scale(.88); } 75% { transform: translate(-200px, -130px) rotate(-8deg) scale(1.08); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } @keyframes gigacon-float-c { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: .4; } 25% { transform: translate(-200px, -190px) rotate(22deg) scale(1.3); opacity: .55; } 50% { transform: translate(160px, -80px) rotate(-16deg) scale(.8); opacity: .3; } 75% { transform: translate(110px, 200px) rotate(12deg) scale(1.2); opacity: .5; } 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: .4; } } @media (prefers-reduced-motion: reduce) { .gigacon-hero__scroll svg { animation: none; } .gigacon-hero-blob { animation: none; } } .gigacon-hero.has-aside .gigacon-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) calc(400px * var(--gc-scale)); gap: calc(48px * var(--gc-scale)); align-items: center; } .gigacon-hero__content { min-width: 0; } .gigacon-hero__tags a { color: var(--gc-cyan); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; font-weight: 700; } .gigacon-hero__title { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 12px 0 22px; line-height: 1.12; color: #fff; font-weight: 900; } .gigacon-hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 32px; font-size: 1.05rem; color: #cbd5e1; } .gigacon-hero__meta span { display: inline-flex; align-items: center; gap: 7px; } /* Karta boczna hero (logo + licznik) */ .gigacon-hero__aside { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: calc(36px * var(--gc-scale)) calc(27px * var(--gc-scale)); display: flex; flex-direction: column; gap: calc(28px * var(--gc-scale)); box-shadow: 0 20px 50px rgba(0, 0, 0, .28); } .gigacon-hero__logo { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: calc(24px * var(--gc-scale)) calc(29px * var(--gc-scale)); margin: 0; } .gigacon-hero__logo img { max-height: calc(168px * var(--gc-scale)); max-width: 100%; width: auto; height: auto; display: block; } .gigacon-hero__aside .gigacon-hero__countdown { margin-bottom: 0; } .gigacon-layout { max-width: var(--gc-container-wide); margin: 0 auto; padding: calc(52px * var(--gc-scale)) 20px calc(80px * var(--gc-scale)); display: grid; grid-template-columns: 1fr calc(360px * var(--gc-scale)); gap: calc(40px * var(--gc-scale)); align-items: start; scroll-margin-top: var(--gc-header-h, 90px); } .gigacon-single__image { border-radius: var(--gc-radius); overflow: hidden; margin-bottom: 30px; box-shadow: var(--gc-shadow); } .gigacon-single__image img { width: 100%; display: block; } /* .gigacon-main traci wlasny box (display:contents), zeby jego dzieci (opis, sekcje) byly bezposrednimi elementami siatki .gigacon-layout — dzieki temu Prelegenci/Agenda/Partnerzy moga rozciagnac sie na cala szerokosc (grid-column: 1/-1), a opis+sidebar zostaja w gornym rzedzie. */ .gigacon-main { display: contents; } .gigacon-prose { grid-column: 1; grid-row: 1; font-size: 1.06rem; line-height: 1.75; color: var(--gc-ink); } .gigacon-prose h2, .gigacon-prose h3 { color: var(--gc-navy); } .gigacon-sidebar { grid-column: 2; grid-row: 1; } .gigacon-section { grid-column: 1 / -1; margin-top: calc(52px * var(--gc-scale)); } .gigacon-section__title { font-size: 1.65rem; color: var(--gc-navy); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 3px solid var(--gc-accent); display: inline-block; font-weight: 800; } /* Prelegenci */ /* Siatka: karty równej wysokości w rzędach (align-items: stretch), a długa rola/firma jest przycinana do 2 linii (line-clamp), więc karty w praktyce mają zbliżoną wysokość niezależnie od długości tekstu. Rozwinięty biogram zajmuje pełną szerokość rzędu, dzięki czemu nie rozpycha sąsiednich kafelków. */ .gigacon-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(300px * var(--gc-scale)), 1fr)); gap: calc(20px * var(--gc-scale)); align-items: stretch; } .gigacon-speaker { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gc-line); border-radius: 14px; padding: calc(16px * var(--gc-scale)); transition: box-shadow .15s ease, transform .15s ease; scroll-margin-top: var(--gc-header-h, 110px); } /* Gdy strona ma dodatkowy sticky baner (archiwalny/CTA), kotwica #prelegent-x musi doliczyć jego wysokość, inaczej baner przykrywa górę karty prelegenta. */ .gigacon-single.has-sticky-banner .gigacon-speaker { scroll-margin-top: calc(var(--gc-header-h, 110px) + var(--gc-archive-banner-h, 74px)); } .gigacon-speaker.has-bio.is-open { grid-column: 1 / -1; } .gigacon-speaker:hover { box-shadow: var(--gc-shadow); transform: translateY(-2px); } .gigacon-speaker__head { display: flex; gap: calc(18px * var(--gc-scale)); align-items: center; } .gigacon-speaker__photo { width: calc(90px * var(--gc-scale)); height: calc(90px * var(--gc-scale)); border-radius: 50%; object-fit: cover; flex-shrink: 0; } .gigacon-speaker__photo--empty { background: linear-gradient(135deg, var(--gc-navy), var(--gc-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; } .gigacon-speaker__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .gigacon-speaker__info strong { color: var(--gc-navy); font-size: 1.02rem; } .gigacon-speaker__info span { font-size: .9rem; color: var(--gc-muted); } .gigacon-speaker__info span:not(.gigacon-speaker__company):not(.gigacon-speaker__hint) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gigacon-speaker__company { font-weight: 600; color: var(--gc-accent) !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Prelegent z biogramem — rozwijany po najechaniu / kliknięciu */ .gigacon-speaker.has-bio { cursor: pointer; } .gigacon-speaker.has-bio:focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; } .gigacon-speaker__hint { font-size: .8rem !important; font-weight: 600; color: var(--gc-accent) !important; margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; } .gigacon-speaker__hint::after { content: "›"; font-size: 1.05rem; line-height: 1; transition: transform .2s ease; } .gigacon-speaker__bio { max-height: 0; transition: max-height .3s ease, margin-top .25s ease, opacity .2s ease; opacity: 0; margin-top: 0; overflow: hidden; color: var(--gc-muted); font-size: .92rem; line-height: 1.55; border-top: 1px solid transparent; } .gigacon-speaker__bio p { margin: 0 0 8px; } .gigacon-speaker__bio p:last-child { margin-bottom: 0; } .gigacon-speaker.has-bio.is-open .gigacon-speaker__bio { max-height: 3000px; opacity: 1; margin-top: 14px; padding-top: 14px; border-top-color: var(--gc-line); } .gigacon-speaker.has-bio.is-open .gigacon-speaker__hint::after { transform: rotate(90deg); } /* Agenda + zakładki dni */ .gigacon-agenda-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .gigacon-agenda-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff; border: 1px solid var(--gc-line); border-radius: 12px; padding: 12px 20px; cursor: pointer; transition: all .15s ease; color: var(--gc-navy); } .gigacon-agenda-tab:hover { border-color: var(--gc-accent); } .gigacon-agenda-tab.is-active { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; } .gigacon-agenda-tab__label { font-weight: 700; font-size: 1.02rem; } .gigacon-agenda-tab__date { font-size: .82rem; opacity: .7; } .gigacon-agenda-day { display: none; } .gigacon-agenda-day.is-active { display: block; animation: gigaFade .25s ease; } @keyframes gigaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .gigacon-agenda-day__date { color: var(--gc-muted); font-weight: 600; margin: 0 0 14px; } .gigacon-agenda { list-style: none; margin: 0; padding: 0; } .gigacon-agenda__item { display: flex; gap: calc(22px * var(--gc-scale)); padding: calc(18px * var(--gc-scale)) 0; border-bottom: 1px solid var(--gc-line); } .gigacon-agenda__item:last-child { border-bottom: none; } .gigacon-agenda__time { flex-shrink: 0; width: calc(72px * var(--gc-scale)); font-weight: 800; color: var(--gc-accent); font-variant-numeric: tabular-nums; } .gigacon-agenda__body { display: flex; flex-direction: column; gap: 3px; } .gigacon-agenda__body strong { color: var(--gc-navy); font-size: 1.05rem; } .gigacon-agenda__body em { color: var(--gc-muted); font-style: normal; font-size: .92rem; } .gigacon-agenda__body { flex: 1; } /* Punkt agendy z opisem — rozwijany po najechaniu / kliknięciu */ .gigacon-agenda__item.has-opis { cursor: pointer; border-radius: 10px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; transition: background .15s ease; } .gigacon-agenda__item.has-opis:hover { background: var(--gc-bg, #f7f9fc); } .gigacon-agenda__item.has-opis:focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; } .gigacon-agenda__hint { font-size: .8rem; font-weight: 600; color: var(--gc-accent); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; } .gigacon-agenda__hint::after { content: "›"; font-size: 1.05rem; line-height: 1; transition: transform .2s ease; } .gigacon-agenda__opis { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease, margin-top .25s ease, opacity .2s ease; opacity: 0; margin-top: 0; overflow: hidden; color: var(--gc-muted); font-size: .92rem; line-height: 1.55; } .gigacon-agenda__opis > * { min-height: 0; } .gigacon-agenda__opis p { margin: 0 0 8px; } .gigacon-agenda__opis p:last-child { margin-bottom: 0; } .gigacon-agenda__item.has-opis.is-open .gigacon-agenda__opis { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; } .gigacon-agenda__item.has-opis.is-open .gigacon-agenda__hint::after { transform: rotate(90deg); } /* Sponsorzy i partnerzy — cała sekcja wyśrodkowana (tytuł, etykiety grup, siatki logo) */ .gigacon-partners { text-align: center; } .gigacon-partners__group { margin-bottom: 30px; } .gigacon-partners__label { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gc-muted); font-weight: 700; margin: 0 0 16px; } /* Loga w rzędach wyśrodkowanych flexboxem (zamiast siatki) — dzięki temu niepełny ostatni rząd i grupy z małą liczbą partnerów (np. 1 sponsor) są naprawdę wyśrodkowane, a nie rozciągnięte/przyklejone do lewej. Siatka (grid auto-fill+1fr) nie pozwalała na to: justify-content jest ignorowane przez spec, gdy którykolwiek tor ma jednostkę fr. */ .gigacon-partners__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(14px * var(--gc-scale)); align-items: stretch; } /* Ramki celowo szerokie/niskie (ok. 3:1, wczesniej ok. 1,67:1) - wiekszosc logo partnerow to poziome banery (proporcje 2-7:1), wiec przy niskiej ramce wypelniaja ja niemal cala szerokoscia I wysokoscia jednoczesnie; w kwadratowej ramce te same logo zajmowaly tylko czesc wysokosci i wygladaly wyraznie mniejsze niz nieliczne logo bardziej kwadratowe. */ .gigacon-partner { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--gc-line); border-radius: 14px; flex: 0 1 calc(195px * var(--gc-scale)); padding: calc(13px * var(--gc-scale)) calc(29px * var(--gc-scale)); min-width: 0; min-height: calc(65px * var(--gc-scale)); box-sizing: border-box; transition: box-shadow .18s ease, transform .18s ease; scroll-margin-top: var(--gc-header-h, 110px); } .gigacon-partner:hover { box-shadow: var(--gc-shadow); transform: translateY(-3px); } .gigacon-partner img { max-width: 100%; max-height: calc(43px * var(--gc-scale)); width: auto; height: auto; object-fit: contain; opacity: .92; transition: opacity .2s ease; } .gigacon-partner:hover img { opacity: 1; } .gigacon-partner--text { font-weight: 700; color: var(--gc-navy); } /* Karuzela logo "dotychczasowi partnerzy" — czysty CSS (bez JS/biblioteki): pasek zawiera listę logotypów podwojoną (patrz PHP), a animacja przesuwa go o dokładnie połowę szerokości, więc pętla jest bez widocznego cięcia. */ .gigacon-partners-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .gigacon-partners-carousel__track { display: flex; width: max-content; animation: gigacon-marquee 91s linear infinite; } .gigacon-partners-carousel__set { display: flex; gap: calc(18px * var(--gc-scale)); padding-right: calc(18px * var(--gc-scale)); } .gigacon-partners-carousel .gigacon-partner { flex: 0 0 auto; width: calc(170px * var(--gc-scale)); min-height: calc(96px * var(--gc-scale)); } .gigacon-partners-carousel:hover .gigacon-partners-carousel__track { animation-play-state: paused; } @keyframes gigacon-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .gigacon-partners-carousel__track { animation: none; } } @media (max-width: 640px) { .gigacon-partners-carousel .gigacon-partner { width: calc(140px * var(--gc-scale)); } } /* Sponsor główny — większe kafle (+30% od bazy, potem jeszcze +15% na życzenie). max-width na logo jest w % (nie px), żeby logo zawsze mieściło się w ramce niezależnie od faktycznej szerokości kolumny siatki. */ .gigacon-partners__logos--sponsor_glowny .gigacon-partner, .gigacon-partners__logos--patron_honorowy .gigacon-partner { flex-basis: calc(390px * var(--gc-scale)); min-height: calc(130px * var(--gc-scale)); padding: calc(18px * var(--gc-scale)) calc(43px * var(--gc-scale)); } .gigacon-partners__logos--sponsor_glowny .gigacon-partner img, .gigacon-partners__logos--patron_honorowy .gigacon-partner img { max-width: 100%; max-height: calc(90px * var(--gc-scale)); filter: none; opacity: 1; } /* Sponsorzy (nie-główni) — logo +25% od bazy */ .gigacon-partners__logos--sponsor .gigacon-partner { flex-basis: calc(244px * var(--gc-scale)); min-height: calc(82px * var(--gc-scale)); padding: calc(17px * var(--gc-scale)) calc(36px * var(--gc-scale)); } .gigacon-partners__logos--sponsor .gigacon-partner img { max-height: calc(55px * var(--gc-scale)); } /* Partnerzy, Firma uczestnicząca — logo +20% od bazy */ .gigacon-partners__logos--partner .gigacon-partner, .gigacon-partners__logos--firma_uczestniczaca .gigacon-partner { flex-basis: calc(234px * var(--gc-scale)); min-height: calc(78px * var(--gc-scale)); padding: calc(16px * var(--gc-scale)) calc(34px * var(--gc-scale)); } .gigacon-partners__logos--partner .gigacon-partner img, .gigacon-partners__logos--firma_uczestniczaca .gigacon-partner img { max-height: calc(52px * var(--gc-scale)); } /* Współpraca merytoryczna, Patroni medialni — ta sama wielkość co Sponsorzy */ .gigacon-partners__logos--wspolpraca_mer .gigacon-partner, .gigacon-partners__logos--patron_medialny .gigacon-partner { flex-basis: calc(244px * var(--gc-scale)); min-height: calc(82px * var(--gc-scale)); padding: calc(17px * var(--gc-scale)) calc(36px * var(--gc-scale)); } .gigacon-partners__logos--wspolpraca_mer .gigacon-partner img, .gigacon-partners__logos--patron_medialny .gigacon-partner img { max-height: calc(55px * var(--gc-scale)); } /* Sponsor z rozwijanym opisem */ .gigacon-partner.has-opis { flex-direction: column; justify-content: flex-start; gap: 8px; } .gigacon-partner.has-opis .gigacon-partner__logo { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; } .gigacon-partner.has-opis .gigacon-partner__hint { flex: 0 0 auto; } .gigacon-partner__name { font-weight: 700; color: var(--gc-navy); } .gigacon-partner__hint { font: inherit; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gc-navy); font-weight: 700; background: none; border: none; border-radius: 999px; padding: 4px 10px; margin: 0; cursor: pointer; /* Bez tego przeglądarka na