/* Public program of attractions — /program and embed. Visual language mirrors the exhibitors widget (_booth_list_css.php): grey widget container, blue #2563eb accent, white cards in a 1/2/3-column grid. Mobile-first. */ /* Zmienne także na .ap-modal i .ap-export-stage — oba żyją na document.body (poza .ani-program), bez tego var() się nie rozwiązuje i deklaracje (bordery, kolory, niebieskie nagłówki sal w eksporcie PNG) są unieważniane */ .ani-program, .ap-modal, .ap-export-stage { --ap-accent:#2563eb; --ap-accent-soft:#eff3ff; --ap-ink:#1a1a2e; --ap-line:#e5e7eb; --ap-card-border:#c8cdd3; --ap-panel:#f8f9fa; --ap-muted:#888; } .ani-program { /* Bez border-radius: na stronie foutona to box_top (kanciasty, z zakładkami box-tabs); embed dostaje własne zaokrąglenie 25px w CSS embeda (index.php). */ background:#F2F5F7; padding:18px 15px; color:#333; line-height:1.5; } .ani-program *, .ani-program *::before, .ani-program *::after { box-sizing:border-box; } /* Zakładki box-tabs nad szarym kontenerem: dół aktywnej przechodzi w kolor tła programu */ .box-tabs.ani-program-tabs { --box-tabs-surface:#F2F5F7; } /* Program ma najwyżej 5 zakładek — etykiety mieszczą się także na nieaktywnych. Nadpisuje generyczne reguły box-tabs (fouton.css), które poniżej 1100px redukują nieaktywne do samych ikon: tu nieaktywne dostają krótkie etykiety, a na bardzo wąskich ekranach wszystkie zakładki są tekstowe (bez ikon), żeby 5 się zmieściło. */ @media (max-width: 1100px) { .ani-program-tabs .box-tabs__item--has-short:not(.active) .box-tabs__label-short { display: inline; } } @media (max-width: 450px) { .ani-program-tabs .box-tabs__item .box-tabs__label-short { display: inline; } .ani-program-tabs .box-tabs__item .glyphicon { display: none; } .ani-program-tabs .box-tabs__item { gap: 0; } } /* Class display rules (e.g. .ani-program__toggle18{display:flex}) outrank the UA [hidden] rule, so the HTML hidden attribute would be ignored — re-assert it. */ .ani-program [hidden] { display:none !important; } /* Globalny .box_top ma overflow:hidden — tworzy scrollport i wyłącza position:sticky u potomków (sticky nagłówki dni / pasek sal nigdy by nie przykleiły się do viewportu). */ .box_top.ani-program { overflow:visible; } /* WebKit (Safari macOS/iOS) rozjeżdża position:sticky przy „zaczepianiu", gdy kontenerem przewijania jest element — a fouton.css robi z scrollport (overflow-x:hidden → obie osie stają się scrollowalne) i nad przyklejonym paskiem sal jest przewinięta treść (nagłówek strony). Efekt: pasek na chwilę odkleja się od górnej krawędzi (Blink był odporny). Fix: przenosimy przewijanie na viewport (html:visible). Poziome wystawanie i tak ucina body{overflow-x:clip} z fouton.css, więc poziomy pasek się NIE pojawia. Scoped do /program — ani-program.css ładowany jest tylko na tej stronie. !important bije regułę html z fouton.css. */ html { overflow: visible !important; } .ani-program__title { font-size:1.4rem; margin:0 0 14px; color:var(--ap-ink); } .ani-program__empty { color:var(--ap-muted); padding:24px 0; } /* ---- Tabs (views) — segmented buttons like the exhibitors' sort toggle ---- */ .ani-program__tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; } .ani-program__tab { border:2px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; padding:8px 14px; font-size:14px; color:#666; font-weight:600; line-height:1.4; } .ani-program__tab:hover:not(.is-active) { background:#f0f4ff; } .ani-program__tab.is-active { background:var(--ap-accent); border-color:var(--ap-accent); color:#fff; } /* ---- Search + filter toggle ---- */ .ani-program__searchbar { display:flex; gap:8px; margin-bottom:12px; } .ani-program__search { flex:1 1 auto; min-width:0; width:100%; padding:10px 14px; border:2px solid #ddd; border-radius:8px; font-size:max(16px,15px); background:#fff; color:#333; outline:none; transition:border-color .2s; } .ani-program__search:focus { border-color:var(--ap-accent); } .ani-program__filter-toggle { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border:2px solid #ddd; border-radius:8px; background:#fff; color:#555; font-size:14px; cursor:pointer; font-weight:600; } .ani-program__filter-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--ap-accent); color:#fff; font-size:11px; font-weight:700; line-height:1; } /* ---- Filters ---- */ .ani-program__filters-head, .ani-program__filters-close { display:none; } .ani-program__filter-group { margin-bottom:12px; } .ani-program__filter-label { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ap-muted); margin-bottom:6px; } .ani-program__chips { display:flex; flex-wrap:wrap; gap:6px; } .ani-program__chip { padding:5px 12px; border:1px solid #ddd; border-radius:20px; background:#fff; color:#555; font-size:13px; cursor:pointer; line-height:1.4; transition:all .15s; } .ani-program__chip:hover { border-color:var(--ap-accent); color:var(--ap-accent); } .ani-program__chip.is-active { background:var(--ap-accent); border-color:var(--ap-accent); color:#fff; } .ani-program__toggle18 { display:flex; align-items:center; gap:8px; font-size:14px; margin:10px 0; cursor:pointer; } #apFavWrap { align-items:flex-start; } #apFavWrap input { margin-top:3px; } .ani-program__filter-hint { display:block; font-size:12px; font-weight:normal; color:var(--ap-muted); margin-top:2px; } .ani-program__filters-foot { display:flex; gap:8px; margin-top:8px; } .ani-program__filters-apply { display:none; } /* ---- Count ---- */ .ani-program__count { font-size:13px; color:var(--ap-muted); margin:4px 0 12px; } /* ---- Results grid (alpha/chrono/rooms): 1 → 2 → 3 columns ---- */ .ani-program__results { display:block; } /* "Mój plan" — jedna kolumna z odstępami między nagłówkami dni i kartami */ .ani-program__results--list { display:flex; flex-direction:column; gap:16px; } /* minmax(0,1fr) zamiast 1fr: pasek sal (roomnav) rozpięty na 1/-1 zawiera scroller nowrap o dużym min-content — z domyślnym 1fr (= minmax(auto,1fr)) auto-minimum rozpychał kolumnę do szerokości wszystkich chipów (siatka szersza niż ekran, karty ucięte, pasek nieprzewijalny). Zerowe minimum trzyma kolumnę w kontenerze, więc scroller przycina i realnie się przewija. */ .ani-program__results--grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; } @media (min-width:640px) { .ani-program__results--grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1024px) { .ani-program__results--grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } .ani-program__section-head { font-size:1.05rem; font-weight:700; color:var(--ap-ink); padding:8px 0 6px; margin-top:6px; border-bottom:2px solid var(--ap-accent); /* Sticky nagłówki sekcji (dni) — Chrono i Mój plan; tło = kolor kontenera programu */ position:sticky; top:0; z-index:30; background:#F2F5F7; } .ani-program__results--grid .ani-program__section-head { grid-column:1 / -1; } /* W Wg sal i Chrono sticky jest pasek chipów (sale/dni) — nagłówki sekcji zostają statyczne (dwa sticky na top:0 by się nakładały) */ .is-view-rooms .ani-program__section-head, .is-view-chrono .ani-program__section-head { position:static; } .ani-program__section-hint { font-size:13px; color:#666; margin:6px 0 4px; } /* Room jump-nav (Wg sal) / dni (Chrono) — klik scrolluje do sekcji; sticky przy scrollu. Jeden wiersz przewijany lewo-prawo (nie zawijamy — lista sal potrafi mieć 25+ pozycji i na mobile zjadałaby cały ekran). Scroll-spy dodatkowo przesuwa pasek tak, by aktywny chip był zawsze widoczny; na desktopie pasek przewija się kółkiem myszy (makeRoomnav + keepNavChipInView w ani-program.js). Wrapper (nie scroller) niesie sticky/tło i gradienty krawędziowe — dzięki temu chipy znikają miękko w tle paska zamiast twardego ucięcia. */ .ani-program__roomnav-wrap { position:sticky; top:0; z-index:31; background:#F2F5F7; margin:0; min-width:0; /* pozwól kurczyć się poniżej szerokości chipów (patrz komentarz przy grid) */ } .ani-program__results--grid .ani-program__roomnav-wrap { grid-column:1 / -1; } /* Gradient pojawia się tylko z tej strony, po której jest jeszcze ukryta treść (klasy has-fade-start / has-fade-end sterowane w JS wg scrollLeft). */ .ani-program__roomnav-wrap::before, .ani-program__roomnav-wrap::after { content:''; position:absolute; top:0; bottom:0; width:34px; z-index:1; pointer-events:none; opacity:0; transition:opacity .18s ease; } .ani-program__roomnav-wrap::before { left:0; background:linear-gradient(to right, #F2F5F7, rgba(242,245,247,0)); } .ani-program__roomnav-wrap::after { right:0; background:linear-gradient(to left, #F2F5F7, rgba(242,245,247,0)); } .ani-program__roomnav-wrap.has-fade-start::before { opacity:1; } .ani-program__roomnav-wrap.has-fade-end::after { opacity:1; } .ani-program__roomnav { display:flex; flex-wrap:nowrap; gap:8px; margin:0; padding:8px 0; min-width:0; overflow-x:auto; overflow-y:hidden; /* CELOWO bez -webkit-overflow-scrolling:touch. Na iOS (WebKit) ta właściwość tworzy legacy warstwę momentum-scrolla, która rozjeżdża position:sticky rodzica — pasek skakał w pionie, a przewijanie między salami „rwało". Android (Blink) ją ignoruje, dlatego tam było OK. iOS 13+ i tak scrolluje z momentum bez niej. */ scrollbar-width:none; /* Firefox — pasek chowamy; afordancja = gradient + kółko + auto-śledzenie */ } .ani-program__roomnav::-webkit-scrollbar { display:none; } /* WebKit/Blink */ .ani-program__roomnav-btn { flex:0 0 auto; white-space:nowrap; font-family:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; color:var(--ap-accent); background:var(--ap-accent-soft); border:1px solid #d6e0ff; border-radius:20px; padding:6px 14px; transition:background .15s, color .15s, border-color .15s; } .ani-program__roomnav-btn.is-active { background:var(--ap-accent); color:#fff; border-color:var(--ap-accent); } /* :hover tylko na urządzeniach z myszą — na dotyku hover „przykleja się" po tapnięciu chipa, więc tapnięty chip zostawał podświetlony obok aktywnego (dwa niebieskie po scrollu). */ @media (hover:hover) { .ani-program__roomnav-btn:hover { background:var(--ap-accent); color:#fff; border-color:var(--ap-accent); } } .ani-program__roomnav-btn .glyphicon { font-size:11px; top:1px; margin-right:2px; } /* Back-to-top — appears on scroll, mobile-first */ .ani-program__totop { position:fixed; right:18px; bottom:18px; z-index:1200; width:46px; height:46px; border-radius:50%; border:none; padding:0; background:#2563eb; color:#fff; font-size:18px; cursor:pointer; /* literał — przycisk żyje poza .ani-program (var by się nie rozwiązał) */ box-shadow:0 4px 14px rgba(0,0,0,0.25); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s, transform .2s, visibility .2s; } .ani-program__totop.is-visible { opacity:1; visibility:visible; transform:translateY(0); } .ani-program__totop:hover { background:#1d4ed8; } .ani-program__totop .glyphicon { top:2px; } /* ---- Card (mirrors .ani-card) ---- */ .ani-program__card { position:relative; background:#fff; border:1px solid var(--ap-card-border); border-radius:12px; display:flex; flex-direction:column; transition:box-shadow .2s; } .ani-program__card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); } /* "Idę" — atrakcja w planie: zielony pasek z lewej (akcent serwisu) + flash przy dodaniu. Pasek jako nakładka nad treścią, żeby kreska oddzielająca stopkę go nie przecinała. */ .ani-program__card.is-attending::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:1; background:#8ebe3f; border-radius:12px 0 0 12px; pointer-events:none; } .ani-program__card.is-attend-flash { animation:ap-attend-flash .8s ease-out; } @keyframes ap-attend-flash { 0% { background-color:#dcefc2; } 100% { background-color:#fff; } } .ani-program__card-header { display:flex; align-items:flex-start; gap:12px; padding:16px 16px 0; } .ani-program__card-logo { width:60px; height:60px; border-radius:10px; flex-shrink:0; background:#e8edf3; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; color:#7b8ca8; } .ani-program__card-title-wrap { flex:1; min-width:0; overflow-wrap:anywhere; } .ani-program__card-name { font-size:16px; font-weight:700; color:var(--ap-ink); line-height:1.3; margin:0; word-wrap:break-word; } .ani-program__card-when { display:inline-block; margin-top:4px; font-size:12px; color:var(--ap-accent); background:var(--ap-accent-soft); padding:2px 8px; border-radius:4px; font-weight:600; } .ani-program__card-when--none { color:#777; background:#eef0f3; } /* Wieloterminowość: lista chipów terminów pod tytułem (jedna karta = wszystkie terminy); powyżej 3 terminów reszta zwinięta za przyciskiem „+N więcej" */ .ani-program__card-when-list { display:flex; flex-wrap:wrap; gap:4px 6px; } .ani-program__card-when--more { border:0; cursor:pointer; color:#555; background:#eef0f3; } .ani-program__card-when--more:hover { background:#e2e6eb; } .ani-program__card-desc { padding:10px 16px 0; font-size:14px; color:#555; line-height:1.5; white-space:pre-line; } .ani-program__desc-toggle { background:none; border:0; color:var(--ap-accent); font-size:13px; cursor:pointer; padding:0; font-weight:600; } .ani-program__desc-toggle:hover { text-decoration:underline; } .ani-program__card-tags { padding:10px 16px 12px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .ani-program__badge { display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--ap-line); border-radius:12px; background:var(--ap-panel); color:#666; white-space:nowrap; line-height:1.5; } .ani-program__badge--type { background:#eff3ff; border-color:#dbe4ff; color:#3457b1; } .ani-program__badge--room { background:#fff; } .ani-program__badge--18 { background:#fde8ea; border-color:#f5c2c7; color:#b02a37; font-weight:700; } .ani-program__badge--tag { cursor:pointer; } .ani-program__badge--tag:hover { border-color:var(--ap-accent); color:var(--ap-accent); } .ani-program__badge--fav { background:#fff7e6; border-color:#ffe1a8; color:#a5740a; font-weight:700; } .ani-program__badge--rate { background:#fff7e6; border-color:#ffe1a8; color:#a5740a; font-weight:700; } /* Rola „prowadzę/współprowadzę" w „Mój plan" — plakietka nad tytułem karty. */ .ani-program__badge--role { font-weight:700; margin-bottom:4px; } .ani-program__badge--role .glyphicon { font-size:10px; top:1px; margin-right:2px; } .ani-program__badge--role-own { background:#e7f5d8; border-color:#c3e29a; color:#4d7a17; } .ani-program__badge--role-cohost { background:#e6f0ff; border-color:#b9d2ff; color:#2f5fb0; } .ani-program__going { color:#1d7a34; font-weight:700; font-size:14px; } /* expandable body + footer (always-visible actions) */ .ani-program__card-body { padding:0 16px; } .ani-program__card-body[hidden] { display:none; } /* tagi (z ostrzeżeniem) przyklejone do dołu karty — pin na meta, nie na footerze */ .ani-program__card-meta { margin-top:auto; } .ani-program__card-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #f0f0f0; flex-wrap:wrap; } .ani-program__card-actions { display:flex; flex:1 1 auto; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; } /* rate action sits on the left, the rest (Idę / Pokaż na planie) on the right */ .ani-program__act--rate { margin-right:auto; } .ani-program__more { background:none; border:0; color:var(--ap-accent); font-size:13px; cursor:pointer; padding:4px 0; font-weight:600; } .ani-program__more:hover { text-decoration:underline; } .ani-program__card-body h4 { font-size:12px; text-transform:uppercase; color:var(--ap-muted); margin:12px 0 4px; letter-spacing:.03em; } .ani-program__desc { white-space:pre-line; color:#555; font-size:14px; line-height:1.5; } .ani-program__cw { background:#fff7e6; border:1px solid #ffe1a8; border-radius:8px; padding:8px 10px; color:#7a5b00; font-size:13px; margin-top:8px; } .ani-program__speaker { color:var(--ap-ink); } .ani-program__plan-btn { margin-top:12px; } .ani-program__noresults { color:var(--ap-muted); padding:24px 0; text-align:center; } /* ---- Logged-in: attend / favourite / rating ---- */ .ani-program__attend { margin-bottom:12px; } .ani-program__spk-list { display:flex; flex-wrap:wrap; gap:10px 14px; } .ani-program__spk-item { display:inline-flex; align-items:center; gap:4px; } .ani-program__fav-star { border:0; background:transparent; cursor:pointer; font-size:1.15rem; line-height:1; color:#c9ccd4; padding:0; } .ani-program__fav-star.is-on { color:#f0ad4e; } .ani-program__avg { margin-top:12px; font-size:14px; color:#374151; } .ani-program__avg-n { color:var(--ap-muted); } .ani-program__rate { margin-top:12px; background:var(--ap-panel); border:1px solid var(--ap-line); border-radius:8px; padding:10px 12px; } .ani-program__rate-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; flex-wrap:wrap; } .ani-program__rate-comment { width:100%; margin:8px 0; padding:10px; border:1px solid #ccc; border-radius:8px; background:#fff; color:#333; font-size:max(16px,1rem); resize:vertical; } .ani-program__rate-comment:focus { border-color:var(--ap-accent); outline:none; } .ani-program__rate-msg { margin-left:10px; color:#1d7a34; font-size:13px; } .ani-program__rate-hint { margin-top:12px; color:var(--ap-muted); font-size:13px; } .ani-program__rate-cta { display:inline-block; margin-top:8px; } .ani-program__stars { display:inline-flex; } .ani-program__star { position:relative; display:inline-block; width:1.7rem; font-size:1.6rem; line-height:1; cursor:pointer; color:#d8dbe0; text-align:center; } .ani-program__star::before { content:'★'; } .ani-program__star-fill { position:absolute; left:0; top:0; height:100%; width:0; overflow:hidden; white-space:nowrap; color:#f0ad4e; } .ani-program__star-fill::before { content:'★'; } /* Mój plan — hero: gradient granatu jak #header serwisu, zielona linia akcentowa */ .ap-mojplan-hero { background:linear-gradient(135deg,#445982 0%,#5a6f9e 100%); border-bottom:3px solid #8ebe3f; border-radius:10px; padding:20px 22px 16px; color:#fff; } .ap-mojplan-hero__title { font-size:1.3rem; font-weight:700; margin:0 0 4px; color:#fff; } .ap-mojplan-hero__sub { font-size:14px; margin:0; color:rgba(255,255,255,.85); } .ap-mojplan-hero__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .ap-mojplan-hero__actions:empty { margin-top:0; } .ap-hero-btn { display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; color:#fff; text-decoration:none; cursor:pointer; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); border-radius:6px; padding:8px 14px; transition:background .15s; } .ap-hero-btn:hover, .ap-hero-btn:focus { background:rgba(255,255,255,.28); color:#fff; text-decoration:none; } .ap-hero-btn .glyphicon { top:1px; font-size:12px; } /* Jeden opis objaśniający wszystkie trzy akcje hero (kalendarz / PDF / powiadomienia) */ .ap-mojplan-hero__desc { margin:12px 0 0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.75); } @media (max-width:480px) { .ap-mojplan-hero { padding:16px 16px 14px; } .ap-hero-btn { flex:1 1 auto; justify-content:center; } } .ani-program__mp-filter { display:flex; align-items:center; gap:8px; font-size:14px; color:#444; cursor:pointer; margin:0; } /* ---- Filters: collapsed behind the "Filtry" toggle at every width (overlay on open), like the wystawcy widget / embed. Toggle stays visible (base inline-flex). ---- */ .ani-program__filters { display:none; position:fixed; inset:0; z-index:1050; background:#fff; padding:0 16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .ani-program__filters.is-open { display:block; } .ani-program__filters-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; padding:14px 0; margin-bottom:6px; border-bottom:1px solid var(--ap-line); font-size:1.1rem; font-weight:700; color:var(--ap-ink); } .ani-program__filters-close { display:block; border:0; background:transparent; font-size:1.8rem; line-height:1; color:var(--ap-muted); cursor:pointer; } .ani-program__filters-apply { display:inline-block; flex:1; padding:12px; border:0; border-radius:10px; background:var(--ap-accent); color:#fff; font-size:16px; font-weight:600; cursor:pointer; } .ani-program__filters-foot { position:sticky; bottom:0; background:#fff; padding:12px 0 16px; border-top:1px solid var(--ap-line); } .ap-hide-tools .ani-program__searchbar, .ap-hide-tools .ani-program__filters { display:none !important; } /* ===================== Planer (timetable grid) ===================== */ /* Toolbar planera: chipy dni (z danych) po lewej, akcje (fullscreen/PNG) po prawej */ .ap-planer__tools { display:flex; gap:8px 12px; flex-wrap:wrap; align-items:center; margin-bottom:10px; } .ap-planer__days { display:flex; gap:6px; flex-wrap:wrap; } .ap-planer__actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; } .ap-planer__day-chip { font-family:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; color:var(--ap-accent); background:var(--ap-accent-soft); border:1px solid #d6e0ff; border-radius:20px; padding:6px 14px; transition:background .15s, color .15s, border-color .15s; } .ap-planer__day-chip:hover:not(.is-active) { background:#dbe6ff; } .ap-planer__day-chip.is-active { background:var(--ap-accent); border-color:var(--ap-accent); color:#fff; } .ap-planer__scroll { overflow:auto; -webkit-overflow-scrolling:touch; max-height:75vh; border:1px solid var(--ap-card-border); border-radius:8px; position:relative; background:#fff; } /* min-width:100% (nie max-content!) — max-content rozdymał kolumny do najdłuższej treści bloczka (~600px/sala); teraz kolumny trzymają min z minmax, a treść zawija/utnie się w bloczku */ .ap-planer__grid { display:grid; position:relative; min-width:100%; } .ap-planer__corner { position:sticky; top:0; left:0; z-index:6; background:#fff; grid-column:1; grid-row:1; border-right:1px solid var(--ap-line); border-bottom:2px solid var(--ap-accent); } /* Nagłówek sali: wyraźny separator między kolumnami, długi tytuł zawija się do 2 linii (line-height 1.2 × 2 mieści się w wierszu 34px, reszta ucięta przez overflow) */ .ap-planer__room { position:sticky; top:0; z-index:5; background:var(--ap-accent); color:#fff; font-weight:600; font-size:12px; line-height:1.2; display:flex; align-items:center; justify-content:center; text-align:center; border-bottom:2px solid #1d4ed8; border-right:2px solid rgba(255,255,255,.5); padding:0 6px; overflow:hidden; } .ap-planer__vline { border-left:1px solid var(--ap-line); pointer-events:none; z-index:1; } /* html2canvas gubi elementy position:sticky (etykiety godzin/sal znikały z eksportu PNG) — w stage'u eksportu sticky jest zbędne, obraz się nie scrolluje */ .ap-export-stage .ap-planer__time, .ap-export-stage .ap-planer__room, .ap-export-stage .ap-planer__corner, .ap-export-stage .ap-planer__daybanner span, .ap-export-stage .ap-planer__day-inline, .ap-export-stage .ap-planer__now span { position:static; } /* Nagłówek grafiki eksportu */ .ap-export-title { font-size:22px; font-weight:700; color:var(--ap-ink); margin:2px 0 12px; } /* html2canvas maluje niepozycjonowane elementy w kolejności DOM (ignoruje z-index) — bez position nakładka północy ginęłaby pod bloczkami w PNG */ .ap-export-stage .ap-planer__dayline-overlay { position:relative; } .ap-planer__time { position:sticky; left:0; z-index:3; background:#fff; font-size:11px; color:var(--ap-muted); padding:1px 6px; border-right:1px solid var(--ap-line); border-top:1px solid var(--ap-line); text-align:right; } .ap-planer__hline { border-top:1px dashed var(--ap-line); pointer-events:none; } /* Przełom dnia: etykieta dnia w rynnie godzin (zamiast „00:00") + wyeksponowana linia przez całą siatkę — bez wtrąconego wiersza-banera, bloczki nocne płyną bez cięcia */ .ap-planer__day-inline { position:sticky; left:0; z-index:3; background:#fff; font-size:10px; font-weight:700; color:var(--ap-ink); line-height:1.25; padding:3px 6px 1px 4px; border-right:1px solid var(--ap-line); text-align:right; /* etykieta (sticky, białe tło) zakrywa hline--day w rynnie — własna krawędź kontynuuje kreskę */ border-top:2px solid var(--ap-accent); } /* Prawa rynna godzin — lustro lewej, ale statyczna (nieprzyklejona): tylko na końcu siatki. Narożnik zostaje sticky w pionie (top:0), by trzymał się rzędu nagłówków sal; poziomo nie pinujemy (right/left auto). Etykiety godzin/dnia statyczne — kreska działowa po LEWEJ. */ .ap-planer__corner--right { left:auto; right:auto; border-right:none; border-left:1px solid var(--ap-line); } .ap-planer__time--right, .ap-planer__day-inline--right { position:static; left:auto; border-right:none; border-left:1px solid var(--ap-line); text-align:left; } .ap-planer__hline--day { border-top:2px solid var(--ap-accent); } /* Nakładka linii północy nad bloczkami (z-index 3 > bloczek 2) — półprzezroczysta, żeby bloczki przecinające północ pokazywały przełom dnia bez utraty czytelności */ .ap-planer__dayline-overlay { border-top:2px solid rgba(37,99,235,.1); pointer-events:none; z-index:3; } .ap-planer__daybanner { z-index:4; display:flex; align-items:center; background:#eef2fb; border-top:2px solid var(--ap-accent); border-bottom:1px solid #d6e0ff; } .ap-planer__daybanner span { position:sticky; left:0; padding:2px 10px; font-weight:700; font-size:12px; color:var(--ap-ink); } /* Lekki gradient (jaśniej u góry) — bloczki jeden po drugim w tej samej sali odcinają się od siebie */ .ap-planer__block { margin:1px; border-radius:6px; padding:2px 6px; overflow:hidden; cursor:pointer; background:linear-gradient(180deg,#f5f8ff 0%,#e2eaff 100%); border-left:3px solid var(--ap-accent); font-size:11px; line-height:1.15; z-index:2; } .ap-planer__block:hover { filter:brightness(.97); } .ap-planer__block-time { font-weight:700; color:var(--ap-accent); font-size:10px; } .ap-planer__block-name { font-weight:600; color:var(--ap-ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .ap-planer__block-spk { color:var(--ap-muted); font-size:10px; } .ap-planer__block.is-18 { border-left-color:#b02a37; } /* ulubiony prelegent = złoto (jak chips na innych zakładkach); „Idę" = zielono (wygrywa) */ .ap-planer__block.is-fav { background:linear-gradient(180deg,#fffaf0 0%,#ffedcc 100%); border-left-color:#f0ad4e; box-shadow:none; } .ap-planer__block.is-attending { background:linear-gradient(180deg,#f0f8e2 0%,#ddefc2 100%); border-left-color:#6aab1f; box-shadow:none; } .ap-planer__block.is-focus { outline:2px solid #fbbf24; outline-offset:-1px; box-shadow:0 2px 8px rgba(0,0,0,.18); } /* Linia „teraz" — pozioma czerwona przez wszystkie sale, etykieta sticky przy lewej krawędzi */ /* Linia półprzezroczysta — przechodzi NAD bloczkami, ale nie „przekreśla" ich tekstu; badge z godziną pełnokryjący */ .ap-planer__now { display:flex; align-items:flex-start; border-top:2px solid rgba(224,36,36,.4); z-index:3; pointer-events:none; } .ap-planer__now span { position:sticky; left:6px; margin-top:-9px; background:#e02424; color:#fff; font-size:10px; font-weight:700; line-height:1; padding:2px 6px; border-radius:8px; } .ap-planer__exit { display:none; } /* Fullscreen planera ORAZ otwarty overlay filtrów (mobile) są fixed WEWNĄTRZ box_top (stacking context z-index:1) — aktywna zakładka box-tabs (z-index:2) malowałaby się nad nimi. W obu przypadkach podbijamy cały box ponad zakładki. */ .box_top.ani-program.ap-fullscreen, .box_top.ani-program.ap-filters-open { z-index:1100; } .ap-planer--full { position:fixed; inset:0; z-index:1100; background:#fff; margin:0; padding:12px; overflow:auto; } .ap-planer--full .ap-planer__scroll { max-height:calc(100vh - 96px); } .ap-planer--full .ap-planer__exit { display:inline-block; } .ap-planer--full .ap-planer__enter { display:none; } /* drag-scroll myszką (PC): złap i przesuń siatkę */ .ap-planer__scroll { cursor:grab; } .ap-planer__scroll.is-grabbing { cursor:grabbing; user-select:none; } /* ===================== Detail modal (planner block) ===================== */ /* z-index ponad globalnym tooltipem (#tg-tooltip = 10000), żeby nie przeświecał; wysokość 100dvh — uwzględnia pasek przeglądarki na mobile (100vh by go obcinało) */ .ap-modal { position:fixed; inset:0; height:100vh; height:100dvh; z-index:10001; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:16px; } .ap-modal__box { background:#fff; border-radius:12px; max-width:560px; width:100%; max-height:85vh; overflow:auto; overscroll-behavior:contain; padding:18px; } .ap-modal__box h3 { color:var(--ap-ink); } .ap-modal__close { float:right; border:0; background:transparent; font-size:1.7rem; line-height:1; color:var(--ap-muted); cursor:pointer; } .ap-modal__box h4 { font-size:12px; text-transform:uppercase; color:var(--ap-muted); margin:12px 0 4px; letter-spacing:.03em; } @media (max-width:767px) { .ap-modal { padding:0; } .ap-modal__box { max-width:none; border-radius:0; height:100%; max-height:100%; } } /* ===================== Embed marketing landing ===================== */ .ap-embed-promo { background:#fff; border:1px solid var(--ap-card-border); border-radius:12px; padding:18px 16px; margin-top:6px; text-align:left; } .ap-embed-promo h3 { color:var(--ap-ink); margin-top:0; } .ap-embed-promo > p { color:var(--ap-muted); margin:0 0 6px; } .ap-embed-promo__list { text-align:left; list-style:none; padding:0; margin:14px 0; } .ap-embed-promo__list li { padding:9px 2px; border-bottom:1px solid var(--ap-line); } .ap-embed-promo__cta { margin-top:12px; } /* ===================== Toast / flash ===================== */ .ap-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ap-ink, #1a1a2e); color:#fff; padding:11px 20px; border-radius:24px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.28); z-index:10005; pointer-events:none; /* nad modalem (10001), pod tooltipem (10010) */ max-width:90vw; text-align:center; opacity:0; transition:opacity .25s ease, transform .25s ease; } .ap-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); } /* ---- Footer action buttons (mirror exhibitors' icon buttons: tooltip + hover lift) ---- */ .ani-program__act-ide { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border:1px solid var(--ap-line); border-radius:8px; background:#fff; color:#555; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; } .ani-program__act-ide:hover { border-color:var(--ap-accent); color:var(--ap-accent); transform:translateY(-1px); } .ani-program__act-ide.is-on { background:#e7f5ea; border-color:#1d7a34; color:#1d7a34; } .ani-program__act-ide.is-on:hover { background:#dcefe1; } /* licznik osób idących przy „Idę" — animacja bębnowa (jak G+ +1) */ .ani-program__attend-n { display:inline-block; font-variant-numeric:tabular-nums; } .ani-program__attend-n.is-up { animation:ap-cnt-up .35s ease-out; } .ani-program__attend-n.is-down { animation:ap-cnt-down .35s ease-out; } .ani-program__attend-n.is-pop { animation:ap-cnt-pop .42s cubic-bezier(.2,1.4,.5,1); } @keyframes ap-cnt-up { from { transform:translateY(.7em); opacity:0; } to { transform:translateY(0); opacity:1; } } @keyframes ap-cnt-down { from { transform:translateY(-.7em); opacity:0; } to { transform:translateY(0); opacity:1; } } @keyframes ap-cnt-pop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.25); } 100% { transform:scale(1); opacity:1; } } .ani-program__act { position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--ap-line); border-radius:8px; background:#fff; color:#666; cursor:pointer; transition:all .2s; padding:0; } .ani-program__act .glyphicon { top:0; } .ani-program__act:hover { background:var(--ap-accent-soft); color:var(--ap-accent); border-color:var(--ap-accent); transform:translateY(-2px); } /* Usunięcie z planu (Mój plan → „Dodaj do swojego planu") — destrukcyjne, czerwone */ .ani-program__act--remove { color:#c9302c; } .ani-program__act--remove:hover { color:#a02622; border-color:#c9302c; background:#fbeeed; } /* Tooltip: rely on the site-wide shared tooltip (/js/tooltip.js reads data-tooltip). No local ::after — that double-rendered with the global one. */ /* speakers line on the card */ .ani-program__card-by { font-size:13px; color:#444; margin-top:5px; line-height:1.4; } .ani-program__card-by-label { color:var(--ap-muted); } /* speakers as chips (click = toggle favourite / search); favourited = gold */ .ani-program__spk-chips { padding:10px 16px 0; display:flex; flex-wrap:wrap; gap:6px; } .ani-program__spk-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--ap-line); border-radius:12px; background:#fff; color:#555; font-size:11px; line-height:1.5; cursor:pointer; transition:all .15s; white-space:nowrap; } .ani-program__spk-chip .glyphicon { font-size:9px; top:0; color:#9aa3b2; } .ani-program__spk-chip:hover { border-color:#f0ad4e; color:#a5740a; } .ani-program__spk-chip.is-fav { background:#fff7e6; border-color:#f0ad4e; color:#a5740a; font-weight:600; } .ani-program__spk-chip.is-fav .glyphicon { color:#f0ad4e; } .ani-program__cw--card { margin:8px 16px 0; } .ani-program__act.is-rated { color:var(--ap-accent); border-color:var(--ap-accent); background:var(--ap-accent-soft); } .ani-program__act.is-rated:hover { background:#e0e9ff; } /* content warning as a chip above the tags */ .ani-program__cw-row { padding:10px 16px 0; } .ani-program__cw-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border:1px solid #f5c2c7; border-radius:12px; background:#fde8ea; color:#b02a37; font-size:12px; font-weight:normal; line-height:1.4; } .ani-program__cw-chip .glyphicon { font-size:10px; top:0; }