/* =========================== TicketsFest Frontend Styles — blue overlay, 4/5, contain =========================== */ /* Tokens */ :root{ --bg:#f6f7fb; --text:#0f172a; --muted:#6b7280; --line:#e5e7eb; --brand:#2563eb; /* синій */ --accent-yellow:#ffcc00; /* ЖОВТИЙ ДЛЯ HOVER НА КНОПЦІ */ --shadow:0 6px 18px rgba(15,23,42,.10); --shadow-hover:0 14px 36px rgba(15,23,42,.18); --radius:22px; } /* Base */ *{box-sizing:border-box} body{ margin:0;background:var(--bg);color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .tfe-wrap{max-width:1200px;margin:0 auto;padding:24px} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden} /* Toolbar */ .tfe-toolbar{ display:flex;align-items:center;justify-content:center;gap:12px; flex-wrap:wrap;margin:0 0 18px } .tfe-select-inline{ height:42px;min-width:210px;max-width:360px; padding:0 44px 0 14px; border:1px solid var(--line);border-radius:999px; background:#fff;appearance:none;-webkit-appearance:none;outline:0; font-size:14px;color:#111827;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; transition:border-color .2s,box-shadow .2s; text-overflow:ellipsis;white-space:nowrap;overflow:hidden; } .tfe-select-inline:hover{border-color:#d1d5db} .tfe-select-inline:focus{box-shadow:0 0 0 3px rgba(37,99,235,.15);border-color:var(--brand)} .tfe-btn-inline{ height:42px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line); color:#111827;font-weight:600;cursor:pointer;transition:box-shadow .2s,transform .1s } .tfe-btn-inline:hover{box-shadow:0 3px 10px rgba(15,23,42,.06)} .tfe-btn-inline:active{transform:translateY(1px)} /* Grid */ .events-list{display:grid;grid-template-columns:repeat(1,1fr);gap:22px;transition:opacity .2s ease} @media (min-width:768px){ .events-list{grid-template-columns:repeat(3,1fr)} } @media (min-width:1200px){ .events-list{grid-template-columns:repeat(5,1fr)} } /* Card */ .event-item{position:relative} .event-card{position:relative} .event-thumbnail-wrapper{ position:relative;width:100%; aspect-ratio:4/5; overflow:hidden;border-radius:var(--radius); background:transparent; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease } .event-item:hover .event-thumbnail-wrapper{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .event-thumbnail{ width:100%;height:100%;display:block; object-fit:contain; object-position:center; background:transparent; } /* Fallback aspect-ratio */ @supports not (aspect-ratio: 4 / 5){ .event-thumbnail-wrapper::before{content:"";display:block;padding-top:125%} .event-thumbnail{position:absolute;inset:0} } /* Overlay */ .event-overlay{ position:absolute;inset:0; background:rgba(37,99,235,.88); color:#fff; display:flex;flex-direction:column;justify-content:flex-end;gap:8px; padding:14px;border-radius:var(--radius); opacity:0;visibility:hidden; transition:opacity .18s ease, visibility .18s ease; pointer-events:none; } .event-item:hover .event-overlay{opacity:1;visibility:visible} @media (hover:none){ .event-overlay{ opacity:1;visibility:visible; background:linear-gradient(to top, rgba(37,99,235,.92), rgba(37,99,235,0) 65%); padding-top:35%; } } /* Datetime */ .event-datetime{ position:absolute;left:12px;top:12px; background:rgba(255,255,255,.06); color:#ffffff; font-weight:800;font-size:13px;line-height:1; border:1px solid rgba(255,255,255,.45); border-radius:10px;padding:7px 10px; backdrop-filter:blur(4px); pointer-events:none } /* Content */ .event-title{ margin:0;font-size:18px;font-weight:800;line-height:1.2; color:#ffffff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis; word-break:keep-all; overflow-wrap:anywhere; hyphens:auto; } .event-meta{ font-size:14px;color:#ffffff;display:flex;gap:6px;flex-wrap:wrap; text-wrap:balance; } @supports not (text-wrap: balance){ .event-meta{word-break:normal;overflow-wrap:anywhere;} } .event-meta .price{font-weight:800;color:#ffffff} /* CTA */ .event-cta{ margin-top:8px;align-self:flex-start; pointer-events:auto;text-decoration:none;user-select:none; height:38px;padding:0 14px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; background:#ffffff;color:#111827;font-weight:700;font-size:14px; border:1px solid rgba(255,255,255,.85); box-shadow:0 4px 10px rgba(17,24,39,.14); transition:background .2s, color .2s, transform .1s; white-space:nowrap; } .event-cta:hover, .event-cta:focus-visible{ background:#f8fafc; color:var(--accent-yellow); outline:none; } .event-cta:active{transform:translateY(1px)} /* Empty */ .no-events{grid-column:1/-1;text-align:center;color:#6b7280;padding:18px 8px} /* Spinner */ #tfe-spinner{height:2px;background:linear-gradient(90deg,var(--brand),#60a5fa);animation:tfeBar 1.1s linear infinite;border-radius:2px;margin-bottom:10px} @keyframes tfeBar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Safe defaults */ #events_list, .tfe-events{opacity:1} #tfe-spinner, .tfe-spinner{display:none} /* ── SOLD OUT (мінімальний патч) ───────────────────────────── */ /* 1) показуємо SOLD OUT окремим рядком у метаданих */ .event-meta .price.soldout{ display:block; /* ← власний рядок */ width:100%; margin-top:2px; color:#ffd7dc; /* ніжніший відтінок на синьому */ font-weight:900; letter-spacing:.06em; } /* 2) (опційно) маленький бейдж на постері */ .event-item[data-soldout="1"] .event-thumbnail-wrapper::after{ content:"SOLD OUT"; position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:10px; background:#d73149; color:#fff; font-weight:900; font-size:12px; box-shadow:0 4px 10px rgba(15,23,42,.14); } /* 3) (опційно) якщо потрібно — відключаємо кнопку на sold out */ .event-item[data-soldout="1"] .event-cta{ opacity:.55; pointer-events:none; } {"id":2887,"date":"2025-09-09T00:54:41","date_gmt":"2025-09-08T22:54:41","guid":{"rendered":"https:\/\/ticketsfest.eu\/"},"modified":"2025-09-09T00:54:41","modified_gmt":"2025-09-08T22:54:41","slug":"za-dvoma-zaicyamy","status":"publish","type":"tour","link":"https:\/\/ticketsfest.eu\/cs\/za-dvoma-zaicyamy\/","title":{"rendered":"\u0417\u0430 \u0434\u0432\u043e\u043c\u0430 \u0437\u0430\u0439\u0446\u044f\u043c\u0438"},"content":{"rendered":"

\u00ab\u0417\u0430 \u0434\u0432\u043e\u043c\u0430 \u0437\u0430\u0439\u0446\u044f\u043c\u0438\u00bb \u043d\u0430 \u0433\u0430\u0441\u0442\u0440\u043e\u043b\u044f\u0445: \u043b\u0435\u0433\u0435\u043d\u0434\u0430\u0440\u043d\u0430 \u0443\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u0430 \u043a\u043e\u043c\u0435\u0434\u0456\u044f \u043e\u0436\u0438\u0432\u0430\u0454 \u0432 \u0404\u0432\u0440\u043e\u043f\u0456<\/h3>\n

\u0426\u0456\u0454\u0457 \u043e\u0441\u0435\u043d\u0456 \u0427\u0435\u0445\u0456\u044f \u0442\u0430 \u041f\u043e\u043b\u044c\u0449\u0430 \u0437\u0443\u0441\u0442\u0440\u0456\u043d\u0443\u0442\u044c \u043f\u0440\u0435\u043c\u2019\u0454\u0440\u0443 \u043b\u0435\u0433\u0435\u043d\u0434\u0430\u0440\u043d\u043e\u0457 \u0443\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u043e\u0457 \u043a\u043e\u043c\u0435\u0434\u0456\u0457 \u00ab\u0417\u0430 \u0434\u0432\u043e\u043c\u0430 \u0437\u0430\u0439\u0446\u044f\u043c\u0438\u00bb<\/strong> \u0443 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u0456 \u0437\u0456\u0440\u043a\u043e\u0432\u043e\u0433\u043e \u0441\u043a\u043b\u0430\u0434\u0443. \u0426\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u0441\u0442\u0430\u0432\u0430 \u2014 \u0446\u0435 \u0441\u043f\u0440\u0430\u0432\u0436\u043d\u0454 \u0441\u0432\u044f\u0442\u043e \u0441\u043c\u0456\u0445\u0443, \u043f\u0456\u0441\u0435\u043d\u044c \u0456 \u044f\u0441\u043a\u0440\u0430\u0432\u0438\u0445 \u0435\u043c\u043e\u0446\u0456\u0439.<\/p>\n

\u041d\u0430 \u0441\u0446\u0435\u043d\u0456 \u0433\u043b\u044f\u0434\u0430\u0447\u0456 \u043f\u043e\u0431\u0430\u0447\u0430\u0442\u044c \u0443\u043b\u044e\u0431\u043b\u0435\u043d\u0438\u0445 \u0430\u043a\u0442\u043e\u0440\u0456\u0432:<\/p>\n