:root { /* Paleta Rady Firmowej (strona radafirmowa.pl, księga znaku): złoto #C49F74, grafit #2D2D2C / #222221, jasny krem #F7F5F1. --primary = grafit (przyciski, mocne akcenty - dobry kontrast z białym tekstem), --gold = złoto marki (kropki, wyróżnienia, obramowania), --primary-ink = ciemne złoto do tekstu (czytelne na białym tle). */ --gold: #C49F74; --gold-strong: #B08A5E; --ink: #2D2D2C; --ink-soft: #4A4946; --muted: #6F6C66; --line: #EAE4DB; --line-strong: #D9CFC1; --bg: #FFFFFF; --bg-tint: #F7F5F1; --bg-blue-tint: #F5EEE4; --primary: #2D2D2C; --primary-strong: #222221; --primary-soft: #EFE4D5; --primary-ink: #8A6A45; --accent-rose: #C49F74; --accent-rose-soft: #F5EEE4; --accent-amber: #C49F74; --accent-amber-soft: #F7F1E8; --accent-green: #596731; --accent-green-soft: #E8EDDA; --accent-red: #B3261E; --shadow-sm: 0 1px 2px rgba(34,34,33,.05), 0 1px 1px rgba(34,34,33,.04); --shadow-md: 0 8px 24px -8px rgba(34,34,33,.14), 0 2px 6px -2px rgba(34,34,33,.07); --shadow-lg: 0 30px 60px -20px rgba(196,159,116,.28), 0 8px 24px -8px rgba(34,34,33,.12); --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --f-body: 'Archivo', system-ui, sans-serif; --f-secondary: 'Tenor Sans', Georgia, serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: hidden; scroll-behavior: smooth; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--f-body); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } .mono { font-family: var(--f-body); font-variant-numeric: tabular-nums; } .icon-inline { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; vertical-align: -2px; flex-shrink: 0; } /* ───── layout ───── */ /* UWAGA: .app-shell NIE moze miec overflow innego niz "visible" - .topbar w srodku jest position:sticky, a sticky liczy sie wzgledem najblizszego przodka-kontenera przewijania (kazdy overflow != visible, TAKZE "hidden", tworzy taki kontener). .app-shell sam nigdy nie jest faktycznie przewijany (strone przewija ), wiec gdyby to on byl tym kontenerem, naglowek przestaje sie "przyklejac" przy scrollu (2026-08-17: dokladnie to sie stalo przy proby przyciecia wystajacych .deco bezposrednio na .app-shell). Dlatego przyciecie .deco jest na dedykowanym .app-shell__deco (ponizej) - on tez nigdy nie jest przewijany, ale NIE jest przodkiem .topbar, wiec sticky nie jest tym zaburzone. */ .app-shell { position: relative; min-height: 100dvh; } .app-shell__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 760px; } .container--wide { max-width: 1280px; } /* Pasek naglowka - sticky, polprzezroczyste tlo + blur + cienka linia pod spodem. */ .topbar { position: sticky; top: 0; z-index: 50; width: 100%; background: rgba(255, 255, 255, .95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, .05); } .topbar-inner { height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; box-sizing: border-box; } .topbar .help { display: inline-flex; gap: 14px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; } /* ───── glowny blok logo + nawigacja, grupowane po lewej (portal: logo + nav-links w jednym flex div, dropdown osobno po prawej) ───── */ .topbar-left { display: flex; align-items: center; gap: 32px; } /* ───── user menu (dropdown w nagłówku) ───── */ .user-menu { position: relative; } .user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--ink); font-weight: 600; font-size: 14px; transition: border-color .15s ease, background .15s ease; } .user-menu__trigger:hover { border-color: var(--line-strong); background: var(--bg-tint); } .user-menu__avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-blue-tint); color: var(--primary-ink); font-weight: 700; font-size: 12px; text-transform: uppercase; } .user-menu__name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu__chevron { color: var(--muted); flex-shrink: 0; } .user-menu__panel { position: absolute; right: 0; margin-top: 10px; z-index: 50; min-width: 260px; padding: 10px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; } .user-menu__status-row { padding: 2px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .user-menu__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-green-soft); color: #3F4A22; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; } .user-menu__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); flex-shrink: 0; } .user-menu__link { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; font-size: 14px; } .user-menu__link:hover { background: var(--bg-tint); color: var(--ink); } .user-menu__logout { color: var(--accent-red); } .user-menu__logout-form { margin: 0; } .user-menu__divider { height: 1px; background: var(--line); margin: 4px 2px; } /* ───── decorative background ───── */ .deco { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(2px); opacity: .55; } .deco--blue { background: radial-gradient(closest-side, var(--primary-soft), transparent 70%); } .deco--rose { background: radial-gradient(closest-side, var(--accent-rose-soft), transparent 70%); } /* ───── pill ───── */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-blue-tint); color: var(--primary-ink); border: 1px solid #E6D6C1; border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; } .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(196,159,116,.15); animation: pulse 2.4s ease-in-out infinite; } .pill--amber { background: var(--accent-amber-soft); color: #7A5C38; border-color: #E0C9AB; } .pill--amber .dot { background: var(--accent-amber); box-shadow: 0 0 0 4px rgba(245,158,11,.18); } .pill--green { background: var(--accent-green-soft); color: #3F4A22; border-color: #C5CFA5; } .pill--green .dot { background: var(--accent-green); box-shadow: 0 0 0 4px rgba(89,103,49,.18); } .pill--rose { background: var(--accent-rose-soft); color: #7A5C38; border-color: #E0C9AB; } .pill--rose .dot { background: var(--accent-rose); box-shadow: 0 0 0 4px rgba(196,159,116,.18); } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(196,159,116,.15); } 50% { box-shadow: 0 0 0 9px rgba(196,159,116,0); } } /* ───── buttons ───── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; text-align: center; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--primary); color: white; box-shadow: 0 8px 22px -10px rgba(196,159,116,.6), inset 0 1px 0 rgba(255,255,255,.18); } .btn--primary:hover { background: var(--primary-strong); box-shadow: 0 12px 32px -10px rgba(196,159,116,.7); } .btn--ghost { background: white; color: var(--ink); border: 1px solid var(--line-strong); } .btn--ghost:hover { background: var(--bg-tint); } .btn--ink { background: var(--ink); color: white; } .btn--ink:hover { background: var(--ink-soft); } .btn--xl { padding: 18px 28px; font-size: 16px; } .btn--glow { box-shadow: 0 14px 34px -10px rgba(196,159,116,.65), inset 0 1px 0 rgba(255,255,255,.18); } .btn--glow:hover { box-shadow: 0 18px 42px -8px rgba(196,159,116,.8), inset 0 1px 0 rgba(255,255,255,.18); } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* ───── card ───── */ .card { position: relative; z-index: 1; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .card--padded { padding: 36px; } .card--padded-sm { padding: 22px; } /* ───── form ───── */ .form-section + .form-section { margin-top: 36px; padding-top: 32px; border-top: 1px dashed var(--line); } .form-section-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 22px; } .form-section-title .num { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: white; border-radius: 8px; font-family: var(--f-body); font-weight: 700; font-size: 13px; transform: translateY(2px); } .form-section-title .hint { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: 0; text-transform: none; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .field { display: flex; flex-direction: column; gap: 8px; position: relative; } .field--full { grid-column: 1 / -1; } .field > .field-label, .field > label > span { font-weight: 700; font-size: 13px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; } .field-label em, .field > span em { color: var(--primary-ink); font-style: normal; font-size: 14px; } .field-label small, .field > span small { font-weight: 500; font-size: 12px; color: var(--muted); margin-left: auto; } .field input, .field textarea, .field select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: white; border-radius: var(--radius); padding: 14px 16px; font-size: 15px; font-weight: 500; width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } .field input::placeholder, .field textarea::placeholder { color: #A8A29A; font-weight: 400; } .field input:hover, .field textarea:hover { border-color: var(--line-strong); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(196,159,116,.14); } .field .err { font-size: 12px; color: #B91C1C; font-weight: 600; } /* ───── consent + form actions ───── */ .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 500; } .consent input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: white; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .12s ease; margin-top: 1px; line-height: 1; } .consent input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); } .consent input[type=checkbox]:checked::after { content: '✓'; color: white; font-size: 13px; font-weight: 600; line-height: 1; } .consent a { color: var(--primary-strong); border-bottom: 1px dashed currentColor; } .consent label { cursor: pointer; } /* ───── messages (Django messages framework) ───── */ .flash { padding: 14px 18px; border-radius: var(--radius); font-weight: 600; font-size: 14px; margin-bottom: 16px; border: 1px solid; } .flash--error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; } .flash--success { background: var(--accent-green-soft); color: #3F4A22; border-color: #C5CFA5; } .flash--info { background: var(--bg-blue-tint); color: var(--primary-ink); border-color: #E6D6C1; } /* ───── hero (home) ───── */ .hero { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 56px 24px 36px; text-align: center; } /* Wariant kompaktowy (11.39, 2026-09-23, zgloszenie Lukasza) - .hero powstal dla dramatycznego naglowka strony glownej (home.html), ale byl reuzywany 1:1 na zwyklych podstronach appki (moje eventy, dolacz do eventu, logowanie...), gdzie ten sam duzy padding-top dawal niepotrzebna, pusta przestrzen pod paskiem z logo - szczegolnie zauwazalne po dodaniu sidebaru (10.6), ktory sam w sobie juz zabiera wizualny "oddech" ekranu. */ .hero--compact { padding: 12px 24px 28px; } /* Na waskich ekranach tekst pigulki lamie sie na 2 linie - .pill domyslnie ma align-items:center, wiec kropka wyosrodkowuje sie wzgledem CALEJ (dwuliniowej) wysokosci zamiast rownac sie z pierwsza linia tekstu. flex-start + margin-top rownowazny polowie linii tekstu trzyma kropke przy pierwszej linii niezaleznie od tego, czy tekst sie zlamie. */ .hero .pill { align-items: flex-start; text-align: left; } .hero .pill .dot { margin-top: 6px; } .hero h1 { font-weight: 600; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); margin: 18px 0 18px; } .hero h1 em { font-style: normal; color: var(--primary-ink); position: relative; } .hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; background: var(--primary-soft); border-radius: 4px; z-index: -1; } .hero .lede { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto; } .hero .hero-subtitle { font-weight: 700; font-size: 19px; color: var(--primary-ink); margin: 0 0 18px; } /* ───── events spotlight (sekcja "Wybierz termin" - glowny CTA strony) ───── */ .events-spotlight { max-width: 1120px; margin: 56px auto 64px; padding: 56px 24px 64px; background: linear-gradient(180deg, var(--bg-blue-tint) 0%, #FFFFFF 65%); border: 1px solid var(--primary-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .events-spotlight__head { max-width: 640px; margin: 0 auto; text-align: center; } .events-spotlight__head h2 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-top: 14px; } .events-spotlight__head h2 em { font-style: normal; color: var(--primary-ink); } @media (max-width: 640px) { .events-spotlight { padding: 40px 16px 44px; margin: 40px auto 48px; } } /* ───── terminy jako "bilety" (landing, 2 daty do wyboru) ───── */ .ticket-list { display: flex; flex-direction: column; gap: 20px; max-width: 720px; margin: 0 auto; padding: 0 24px; } .ticket { position: relative; display: flex; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ticket:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); } .ticket--owned { border-color: rgba(89,103,49,.45); box-shadow: var(--shadow-md), 0 0 0 1px rgba(89,103,49,.12) inset; } .ticket--owned:hover { border-color: rgba(89,103,49,.65); } .ticket__stamp { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; border: 3px solid white; background: linear-gradient(160deg, #7A8A45 0%, var(--accent-green) 100%); transform: rotate(-10deg); box-shadow: 0 6px 18px rgba(89,103,49,.5), 0 0 0 3px rgba(89,103,49,.22); animation: stamp-in .45s cubic-bezier(.2,1.4,.4,1) both; } .ticket__stamp-icon { width: 22px; height: 22px; stroke: white; stroke-width: 3; fill: none; margin-bottom: 1px; } .ticket__stamp span { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.15; text-align: center; color: white; } @keyframes stamp-in { 0% { transform: rotate(-10deg) scale(0); opacity: 0; } 70% { transform: rotate(-10deg) scale(1.15); opacity: 1; } 100% { transform: rotate(-10deg) scale(1); opacity: 1; } } .ticket__date { position: relative; flex: 0 0 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 26px 16px; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-strong) 100%); color: white; text-align: center; } .ticket__date::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 7px, transparent 7px 15px); } .ticket__cal-icon { width: 22px; height: 22px; stroke: rgba(255,255,255,.8); fill: none; stroke-width: 2; margin-bottom: 4px; } .ticket__weekday { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .85; } .ticket__day { font-size: 46px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; } .ticket__month { font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .9; } .ticket__date-time { margin-top: 8px; padding-top: 8px; width: 100%; border-top: 1px dashed rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 600; color: white; } .ticket__date-time .icon-inline { width: 14px; height: 14px; stroke: rgba(255,255,255,.85); } .ticket__action { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; padding: 22px 28px; } .ticket__info { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } .ticket__title { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .ticket__sub { font-size: 13px; font-weight: 600; color: var(--muted); } .ticket__price-block { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .ticket__price { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; color: var(--primary-strong); background: var(--bg-blue-tint); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--primary-soft); } .ticket__price .icon-inline { width: 15px; height: 15px; stroke: var(--primary-strong); } .ticket__perk { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 12px; font-weight: 700; color: #3F4A22; text-align: left; } .ticket__perk .icon-inline { width: 13px; height: 13px; stroke: var(--accent-green); stroke-width: 3; flex-shrink: 0; margin-top: 2px; } .ticket__countdown { display: inline-flex; align-items: baseline; gap: 6px; } .ticket__countdown .icon-inline { width: 14px; height: 14px; stroke: var(--primary-strong); align-self: center; } .ticket__countdown-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ticket__countdown-value { font-size: 16px; font-weight: 600; color: var(--primary-strong); font-variant-numeric: tabular-nums; } .ticket--finished .ticket__date { background: linear-gradient(160deg, #A8A29A 0%, #78736B 100%); } .ticket--finished .ticket__date-time { color: rgba(255,255,255,.85); } @media (max-width: 600px) { .ticket { flex-direction: column; } .ticket__date { flex-direction: row; flex-wrap: wrap; flex: none; width: 100%; padding: 16px 20px; gap: 10px; justify-content: center; } .ticket__date::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 2px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 7px, transparent 7px 15px); } .ticket__cal-icon { margin-bottom: 0; } .ticket__day { font-size: 26px; } .ticket__weekday, .ticket__month { font-size: 11px; } .ticket__date-time { flex-basis: 100%; justify-content: center; border-top: none; margin-top: 2px; padding-top: 0; } .ticket__action { flex-direction: column; padding: 20px; justify-content: center; text-align: center; } .ticket__info { align-items: center; } .ticket__price-block { align-items: center; } .ticket__countdown { flex-direction: column; gap: 2px; } .ticket__stamp { width: 56px; height: 56px; top: 8px; right: 8px; } .ticket__stamp-icon { width: 14px; height: 14px; } .ticket__stamp span { font-size: 7px; } .ticket--owned .ticket__date { padding-right: 56px; } } .empty-state { max-width: 760px; margin: 0 auto; padding: 48px 24px; border: 2px dashed var(--line); border-radius: var(--radius-lg); text-align: center; background: var(--bg-tint); } .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .empty-state p { color: var(--muted); font-size: 14px; } /* ───── profile chip (logged-in summary) ───── */ .profile-chip { max-width: 760px; margin: 0 auto 20px; padding: 16px 22px; background: var(--accent-green-soft); border: 1px solid #C5CFA5; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .profile-chip .ico { width: 36px; height: 36px; background: white; border-radius: 50%; display: grid; place-items: center; color: #3F4A22; font-weight: 600; border: 1px solid #C5CFA5; } .profile-chip .who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .profile-chip .who small { color: #4A5728; font-size: 12px; font-weight: 600; } .profile-chip .who strong { font-weight: 600; color: #2F3819; font-size: 15px; } .profile-chip .who span { color: #3F4A22; font-size: 13px; font-weight: 500; } .profile-chip a { color: #4A5728; font-weight: 700; font-size: 13px; border-bottom: 1px dashed currentColor; } .profile-chip a:hover { color: #2F3819; } /* ═════════════════════════════════════════ */ /* ═════════ ROUND VIEW (live) ═════════════ */ /* ═════════════════════════════════════════ */ .round-bar { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 22px 24px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .round-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); font-weight: 600; } .round-bar-left .event { color: var(--ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; } .round-bar-left .divider { color: var(--line-strong); } .round-bar-right { text-align: right; font-size: 13px; color: var(--muted); font-weight: 600; } .timer { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin: 0 auto; } .timer svg { position: absolute; inset: 0; transform: rotate(-90deg); width: 100%; height: 100%; } .timer .bg { fill: none; stroke: var(--line); stroke-width: 2.6; } .timer .fg { fill: none; stroke: url(#timerGrad); stroke-width: 2.8; stroke-linecap: round; transition: stroke-dasharray .5s ease; } .timer-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; font-family: var(--f-body); } .timer-text strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .timer-text small { font-family: var(--f-body); font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } .timer.is-warning .fg { stroke: #F97316; } .timer.is-warning .timer-text strong { color: #8A6A45; } /* ───── prostokątny timer + akcje w round-bar ───── */ .round-bar--actions { grid-template-columns: 1fr auto; } .round-bar-actions { display: flex; align-items: stretch; gap: 10px; } .timer-rect { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #F7F1E8, #EFE4D5); border: 1px solid var(--primary-soft); border-radius: 12px; min-width: 96px; font-family: var(--f-body); transition: background .2s ease, border-color .2s ease; } .timer-rect strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--primary-ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .timer-rect small { font-family: var(--f-body); font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } .timer-rect.is-warning { background: linear-gradient(135deg, #F7F1E8, #E0C9AB); border-color: #C49F74; } .timer-rect.is-warning strong { color: #8A6A45; } .round-bar-actions__buttons { display: flex; gap: 8px; align-items: stretch; } .round-bar-actions__buttons > form, .round-bar-actions__buttons > * { margin: 0; } .round-bar-action-btn { height: 100%; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.2; white-space: nowrap; transition: border-color .12s ease, color .12s ease, background .12s ease; } .round-bar-action-btn--leave:hover { border-color: var(--accent-red); color: var(--accent-red); } .round-bar-action-btn--extend { color: var(--ink-soft); } .round-bar-action-btn--extend:hover { border-color: var(--primary); color: var(--primary-ink); } .round-bar-action-btn--extend-waiting { background: var(--bg-blue-tint); border-color: var(--primary); color: var(--primary-ink); } .round-bar-action-btn--extend-pending { background: var(--accent-amber-soft); border-color: var(--accent-amber); color: #7A5C38; font-weight: 600; } .round-bar-action-btn--extend-mutual { background: var(--accent-green-soft); border-color: #C5CFA5; color: #3F4A22; font-weight: 600; } @media (max-width: 920px) { /* Selektor zlozony (.round-bar.round-bar--actions), nie sam .round-bar--actions - element ma OBIE klasy, a inna, pozniejsza w tym pliku regula ".round-bar { grid-template-columns: 1fr auto }" (linia ~1485, dla wariantu BEZ akcji) ma dokladnie taka sama specyficznosc (jedna klasa) i przy tej samej specyficznosci wygrywa kolejnosc w pliku - bez podniesienia specyficznosci tutaj ta regula cichcem nadpisywala z powrotem na 2 kolumny (stad tekst "Runda X z Y" ekstremalnie zwezony/zgnieciony na mobile, zgloszone przez Lukasza). */ .round-bar.round-bar--actions { grid-template-columns: 1fr; } /* min-width:0 na obu grid items - bez tego grid liczy szerokosc kolumny wg intrinsic (min-content) szerokosci tresci (przyciski z white-space:nowrap), wiec mimo flex-wrap ponizej caly rzad i tak wystaje poza ekran zamiast sie zwezic do dostepnej szerokosci. */ .round-bar-left, .round-bar-actions { min-width: 0; } .round-bar-actions { flex-wrap: wrap; } .round-bar-actions__buttons { flex: 1 1 100%; min-width: 0; } .round-bar-action-btn { padding: 12px 14px; width: 100%; white-space: normal; } .round-bar-actions__buttons > form, .round-bar-actions__buttons > div { flex: 1; min-width: 0; } } .round-stage { position: relative; z-index: 1; max-width: 1280px; margin: 24px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 24px; align-items: start; } .round-questions { position: relative; z-index: 1; max-width: 1280px; margin: 24px auto 0; padding: 0 24px 40px; display: grid; grid-template-columns: 1fr; gap: 24px; } .video-frame { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #222221 0%, #3A3935 100%); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lg); } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .video-status { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(15,23,42,.55); backdrop-filter: blur(8px); border-radius: var(--radius-pill); color: white; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .video-status .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 4px rgba(239,68,68,.25); animation: pulse-red 1.6s ease-in-out infinite; } @keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 3px rgba(239,68,68,.3); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } } .video-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-weight: 600; padding: 24px; text-align: center; } .partner-panel { display: flex; flex-direction: column; gap: 16px; } .panel-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; position: relative; } .partner-card .head { display: flex; gap: 14px; align-items: center; } .avatar { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%); color: white; display: grid; place-items: center; font-weight: 600; font-size: 18px; letter-spacing: -.02em; box-shadow: 0 8px 18px -8px rgba(196,159,116,.5); flex-shrink: 0; } .partner-card h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); } .partner-card .role { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; } .partner-card .role strong { color: var(--ink-soft); font-weight: 700; } .chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 5px 10px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-soft); } .chip--primary { background: var(--bg-blue-tint); border-color: #E6D6C1; color: var(--primary-ink); } .partner-summary { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-soft); line-height: 1.55; font-weight: 500; } .partner-links { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); } .plink { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); font-weight: 600; padding: 6px 0; transition: color .12s ease; word-break: break-all; } .plink:hover { color: var(--primary-ink); } .plink .ico { width: 28px; height: 28px; display: grid; place-items: center; background: var(--bg-tint); border-radius: 8px; font-size: 13px; flex-shrink: 0; } .plink.muted { color: var(--muted); cursor: default; } .plink.muted:hover { color: var(--muted); } .plink.muted .ico { background: transparent; border: 1px dashed var(--line-strong); } /* Dane rozmowcy w rundzie - przychody/liczba pracownikow/telefon/email (11.40, 2026-09-23, zgloszenie Lukasza) - jednolita lista "Etykieta: wartosc", zamiast wczesniejszych pojedynczych linkow z ikonami. */ .partner-fields { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; } /* Etykieta NAD wartoscia, nie obok w jednym wierszu (poprawka po zgloszeniu Lukasza ze zrzutem ekranu - "Widoczne tylko dla czlonkow Strefy Firmowej" scisniete w prawej polowie wiersza lamalo sie na 2-3 linie i wygladalo niechlujnie, kazdy wiersz innej wysokosci). Pelna szerokosc karty daje plakiecie miejsce na jedna linie. */ .partner-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .partner-field__label { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .partner-field__value { color: var(--ink-soft); font-weight: 700; font-size: 14px; word-break: break-word; } a.partner-field__value:hover { color: var(--primary-ink); } .partner-field__value--empty { color: var(--muted); font-weight: 500; } .partner-field__locked { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg-tint); border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .12s ease, border-color .12s ease; } .partner-field__locked:hover { color: var(--primary-ink); border-color: var(--primary-soft); } /* ───── AI panel (full-width pod video) ───── */ .ai-panel { background: linear-gradient(160deg, #F7F1E8 0%, #FFF7ED 100%); border: 1px solid #E6D6C1; padding: 24px 26px; } .ai-panel .head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .ai-panel .head .sparkle { display: grid; place-items: center; width: 36px; height: 36px; background: white; border: 1px solid #E6D6C1; border-radius: 10px; color: var(--primary-ink); } .ai-panel .head strong { font-weight: 600; font-size: 16px; color: var(--primary-ink); letter-spacing: -.01em; line-height: 1.3; } .ai-panel .head strong small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: 0; } .ai-panel .head .tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; background: white; border-radius: var(--radius-pill); border: 1px solid var(--line); } .ai-panel ul { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .ai-panel li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 16px 14px; background: rgba(255,255,255,.85); border: 1px solid rgba(191,219,254,.7); border-radius: 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.5; min-height: 76px; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; } .ai-panel li:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 8px 22px -12px rgba(196,159,116,.3); } .ai-panel li::before { content: '→'; color: var(--primary-ink); font-weight: 600; flex-shrink: 0; font-size: 16px; line-height: 1.5; } .ai-panel .loading { display: flex; align-items: center; gap: 12px; padding: 18px 4px; font-size: 14px; color: var(--muted); font-weight: 500; } .ai-panel .loading .dots { display: inline-flex; gap: 4px; } .ai-panel .loading .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: bounce 1.2s ease-in-out infinite; } .ai-panel .loading .dots span:nth-child(2) { animation-delay: .15s; } .ai-panel .loading .dots span:nth-child(3) { animation-delay: .3s; } @keyframes bounce { 0%,80%,100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } /* ───── static questions (full-width pod AI) ───── */ .static-q { padding: 24px 26px; } .static-q .head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .static-q .head .ico { display: grid; place-items: center; width: 36px; height: 36px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; font-size: 16px; } .static-q .head strong { font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; } .static-q .head strong small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; } .static-q .head .tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; background: var(--bg-tint); border-radius: var(--radius-pill); border: 1px solid var(--line); } .static-q ol { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: q; } .static-q li { counter-increment: q; display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 14px; font-size: 14.5px; color: var(--ink-soft); font-weight: 500; line-height: 1.5; min-height: 76px; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .static-q li:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 8px 22px -12px rgba(196,159,116,.25); } .static-q li::before { content: counter(q, decimal-leading-zero); font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--primary-ink); flex-shrink: 0; padding-top: 2px; min-width: 22px; } /* ───── like CTA ───── */ .like-cta { display: flex; flex-direction: column; gap: 10px; } .btn--like { width: 100%; padding: 18px 22px; background: var(--ink); color: white; border-radius: var(--radius); display: flex; align-items: center; gap: 14px; text-align: left; position: relative; overflow: hidden; transition: all .18s ease; } .btn--like::before { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, var(--accent-rose) 0%, var(--primary) 100%); opacity: 0; transition: opacity .2s ease; z-index: 0; } .btn--like > * { position: relative; z-index: 1; } .btn--like:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(196,159,116,.5); } .btn--like:hover::before { opacity: 1; } .btn--like.is-liked { background: var(--accent-rose); } .btn--like.is-liked::before { opacity: 1; } .btn--like .heart { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.12); border-radius: 12px; font-size: 22px; flex-shrink: 0; } .btn--like .copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .btn--like .copy strong { font-weight: 600; font-size: 16px; letter-spacing: -.005em; } .btn--like .copy small { font-size: 12px; opacity: .85; font-weight: 500; } .btn--like .arr { font-size: 18px; font-weight: 600; opacity: .8; } .btn--skip { background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 12px; border-radius: var(--radius); border: 1px dashed var(--line-strong); text-align: center; } .btn--skip:hover { color: var(--ink-soft); background: var(--bg-tint); } /* ───── pause / lobby ───── */ .state-screen { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 64px 24px; text-align: center; } .state-screen .icon { width: 64px; height: 64px; background: var(--bg-blue-tint); border: 1px solid #E6D6C1; border-radius: 18px; margin: 0 auto 24px; display: grid; place-items: center; color: var(--primary-ink); } .state-screen h2 { font-weight: 600; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin-bottom: 14px; } .state-screen p { color: var(--muted); font-size: 16px; max-width: 480px; margin: 0 auto; } .state-screen .countdown { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 8px; padding: 14px 22px; background: var(--ink); color: white; border-radius: var(--radius); font-family: var(--f-body); max-width: 100%; box-sizing: border-box; } .state-screen .countdown strong { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; } .state-screen .countdown span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .state-screen .heartbeat-info { /* display:flex (nie inline-flex) - to musi byc blokowe, zeby zawsze ladowac sie PONIZEJ poprzedzajacego elementu (np. .countdown, tez inline-flex) zamiast obok niego w tej samej linii, kiedy oba mieszcza sie w jednym wierszu (np. state_round_pause.html, gdzie .countdown i .heartbeat-info sa bezposrednimi rodzenstwami bez zadnego blokowego elementu miedzy nimi). */ margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; } .state-screen .heartbeat-info .d { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); animation: pulse-green 1.6s ease-in-out infinite; } @keyframes pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(89,103,49,.5); } 50% { box-shadow: 0 0 0 7px rgba(89,103,49,0); } } @keyframes spin { to { transform: rotate(360deg); } } .spinner { flex: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; } /* ───── finished view ───── */ .met-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; padding: 0 24px; } .met-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease; } .met-card:hover { border-color: var(--line-strong); } .met-card.is-mutual { background: linear-gradient(95deg, #F5EEE4 0%, #F7F1E8 100%); border-color: #E0C9AB; } .met-card .a-mini { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: white; display: grid; place-items: center; font-weight: 600; font-size: 16px; flex-shrink: 0; } .met-card.is-mutual .a-mini { background: linear-gradient(135deg, var(--accent-rose), #B08A5E); } .met-card .body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .met-card .body strong { font-weight: 600; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .met-card .body .row { font-size: 13px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .met-card .body .row strong { display: inline; color: var(--ink-soft); font-weight: 700; } .met-card .body .mutual-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; font-weight: 700; color: #7A5C38; letter-spacing: .04em; text-transform: uppercase; } .met-card .actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .met-card .action-link { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: all .12s ease; } .met-card .action-link:hover { background: var(--bg-blue-tint); border-color: var(--primary); color: var(--primary-ink); } /* mini like - kwadracik 40x40 z sercem */ .btn--like-mini { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; font-size: 18px; color: var(--muted); transition: all .15s ease; } .btn--like-mini:hover { background: var(--accent-rose-soft); border-color: var(--accent-rose); color: #8A6A45; transform: translateY(-1px); } .btn--like-mini.is-liked { background: var(--accent-rose); border-color: #8A6A45; color: white; } .btn--like-mini.is-liked:hover { background: #E11D48; } @media (max-width: 520px) { .met-card { grid-template-columns: auto minmax(0, 1fr); } .met-card .actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 4px; } } /* ───── responsive ───── */ @media (max-width: 920px) { .round-stage { grid-template-columns: 1fr; } .round-bar { grid-template-columns: 1fr auto; gap: 14px; } .ai-panel, .static-q { padding: 20px; } .round-bar-right { display: none; } .timer { width: 96px; height: 96px; } .timer-text strong { font-size: 22px; } .grid-2 { grid-template-columns: 1fr; } .card--padded { padding: 24px; } .hero { padding: 36px 20px 24px; } .brand .product { display: none; } } @media (max-width: 520px) { .ai-fill { flex-wrap: wrap; } .btn--like .copy small { display: none; } } /* ═══════════════════════════════════════════════════════════════ STAFF PANEL - jasny motyw, refined editorial ═══════════════════════════════════════════════════════════════ */ .staff-shell { max-width: 1280px; margin: 0 auto; padding: 0 32px 80px; position: relative; z-index: 1; } .staff-crumbs { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 18px; margin-bottom: 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .staff-crumbs a { color: var(--ink-soft); border-bottom: 1px dashed var(--line-strong); padding-bottom: 1px; } .staff-crumbs a:hover { color: var(--primary-ink); border-bottom-color: var(--primary); } .staff-crumbs .sep { color: var(--line-strong); } .staff-crumbs .here { color: var(--ink); } .staff-page-head { margin-bottom: 36px; } .staff-page-head h1 { font-weight: 600; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.025em; line-height: 1.1; color: var(--ink); margin-bottom: 10px; } .staff-page-head h1 em { font-style: normal; color: var(--primary-ink); position: relative; } .staff-page-head h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 10px; background: var(--primary-soft); border-radius: 4px; z-index: -1; } .staff-page-head .lede { color: var(--muted); font-size: 15px; max-width: 640px; } .staff-section { margin-bottom: 36px; } .staff-section-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .staff-section-title .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .staff-section-title .dot--green { background: var(--accent-green); box-shadow: 0 0 0 4px rgba(89,103,49,.18); animation: pulse-green 2.4s ease-in-out infinite; } @keyframes pulse-green { 0%,100% { box-shadow: 0 0 0 4px rgba(89,103,49,.18); } 50% { box-shadow: 0 0 0 8px rgba(89,103,49,0); } } .staff-stack > * + * { margin-top: 14px; } .staff-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-tint); padding: 48px 32px; text-align: center; color: var(--muted); } .staff-empty p { margin-bottom: 18px; font-size: 15px; } /* event row */ .event-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px 24px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .15s ease, transform .12s ease; } .event-row:hover { border-color: #E6D6C1; box-shadow: var(--shadow-md); transform: translateY(-1px); } .event-row__main { min-width: 0; } .event-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; } .event-row__title h3 { font-weight: 600; font-size: 18px; letter-spacing: -.015em; color: var(--ink); margin: 0; } .event-row__meta { color: var(--muted); font-size: 13px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .event-row__meta .glyph { display: inline-flex; align-items: center; gap: 4px; } .event-row__meta .sep { color: var(--line-strong); } .event-row__actions { display: flex; align-items: center; gap: 8px; } /* status pills */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; border: 1px solid; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; } .status-pill--draft { background: #F3F1EC; color: #5E5A53; border-color: var(--line-strong); } .status-pill--draft .dot { background: #A8A29A; } .status-pill--lobby { background: var(--accent-amber-soft); color: #7A5C38; border-color: #E0C9AB; } .status-pill--lobby .dot { background: var(--accent-amber); } .status-pill--running { background: var(--accent-green-soft); color: #3F4A22; border-color: #C5CFA5; } .status-pill--running .dot { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(89,103,49,.2); animation: pulse-green 2.4s ease-in-out infinite; } .status-pill--paused { background: var(--bg-blue-tint); color: var(--primary-ink); border-color: #E6D6C1; } .status-pill--paused .dot { background: var(--primary); } .status-pill--finished { background: #F3F1EC; color: #5E5A53; border-color: var(--line-strong); } .status-pill--finished .dot { background: #A8A29A; } .status-pill--live { background: var(--accent-rose-soft); color: #7A5C38; border-color: #E0C9AB; } .status-pill--live .dot { background: var(--accent-rose); } /* button variants */ .btn--sm { padding: 9px 16px; font-size: 13px; } .btn--amber { background: var(--accent-amber); color: white; } .btn--amber:hover { background: #D97706; } .btn--rose { background: #8A6A45; color: white; box-shadow: 0 8px 20px -10px rgba(190,18,60,.5); } .btn--rose:hover { background: #7A5C38; } .btn--text { background: transparent; color: var(--ink-soft); padding: 9px 14px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; } .btn--text:hover { background: var(--bg-tint); color: var(--ink); } /* LIVE PANEL */ .live-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px 32px; margin-bottom: 22px; align-items: start; } .live-hero__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; } .live-hero__title h1 { font-weight: 600; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; color: var(--ink); margin: 0; } .live-hero__meta { color: var(--muted); font-size: 14px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .live-hero__meta .glyph { display: inline-flex; align-items: center; gap: 5px; } .live-hero__cta { display: flex; flex-direction: column; gap: 8px; } .support-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--primary); color: white; font-weight: 700; font-size: 14px; border-radius: var(--radius-pill); box-shadow: 0 10px 24px -10px rgba(196,159,116,.6); transition: background .12s ease, transform .12s ease; } .support-cta:hover { background: var(--primary-strong); transform: translateY(-1px); } .support-cta__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: rgba(255,255,255,.2); border-radius: 999px; font-family: var(--f-body); font-size: 12px; font-weight: 700; } .support-cta__badge:empty { display: none; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); } .stat-card__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .stat-card__value { font-family: var(--f-body); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-card__value small { font-size: 18px; color: var(--muted); font-weight: 500; } .stat-card__value.is-warn { color: var(--accent-amber); } .stat-card__value.is-crit { color: var(--accent-red); } .stat-card__value.is-mute { color: var(--line-strong); } .stat-card__hint { font-size: 12px; color: var(--muted); margin-top: 6px; } .live-panel-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 22px; } .live-panel-card h2 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; } .action-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .action-bar .spacer { flex: 1; } .pair-list { display: flex; flex-direction: column; gap: 8px; } .pair-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; } .pair-row__num { font-family: var(--f-body); font-weight: 700; color: var(--muted); font-size: 13px; min-width: 24px; } .pair-row__name { font-weight: 700; color: var(--ink); } .pair-row__sep { color: var(--line-strong); } .pair-row__solo { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-amber-soft); color: #7A5C38; font-size: 11px; font-weight: 700; } .pair-row__room { margin-left: auto; color: var(--primary-ink); font-size: 12px; font-weight: 700; border-bottom: 1px dashed transparent; } .pair-row__room:hover { border-bottom-color: var(--primary); } .pair-row__missing { margin-left: auto; color: var(--accent-red); font-size: 12px; font-weight: 700; } .attendee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .attendee-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); } .attendee-item__indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line-strong); } .attendee-item__indicator.is-active { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(89,103,49,.16); } .attendee-item__main { flex: 1; min-width: 0; } .attendee-item__name { font-size: 13px; font-weight: 700; color: var(--ink); } .attendee-item__email { font-size: 11px; color: var(--muted); font-family: var(--f-body); } .attendee-item__rounds { font-family: var(--f-body); font-size: 11px; font-weight: 700; color: var(--muted); } .attendee-item__li { color: var(--muted); font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .attendee-item__li:hover { color: var(--primary-strong); background: var(--bg-blue-tint); } /* SUPPORT ADMIN - WhatsApp-Web layout */ .support-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; height: calc(100vh - 220px); min-height: 520px; } .support-sidebar { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; } .support-sidebar__head { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .support-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-tint); } .support-tabs button { flex: 1; padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: color .12s ease, background .12s ease; } .support-tabs button:hover { color: var(--ink); background: white; } .support-tabs button.is-active { color: var(--primary-ink); background: white; border-bottom: 2px solid var(--primary); margin-bottom: -1px; } .support-threads { flex: 1; overflow-y: auto; } .support-thread { display: flex; gap: 10px; width: 100%; text-align: left; padding: 12px 16px; background: white; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s ease; font: inherit; } .support-thread:hover { background: var(--bg-tint); } .support-thread__main { flex: 1; min-width: 0; } .support-thread__name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .support-thread__snippet { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .support-thread__time { font-size: 10px; color: var(--line-strong); margin-top: 3px; font-family: var(--f-body); } .support-thread__unread { margin-top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(196,159,116,.16); flex-shrink: 0; } .support-empty { padding: 36px 24px; text-align: center; color: var(--muted); font-size: 13px; } .support-window { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; } .support-window__placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; } .support-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--bg-tint); } .support-header__main { min-width: 0; } .support-header__name { font-size: 15px; font-weight: 600; color: var(--ink); } .support-header__meta { font-size: 12px; color: var(--muted); font-family: var(--f-body); margin-top: 2px; } .support-header__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .support-msgs { flex: 1; overflow-y: auto; padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 8px; } .bubble { max-width: 70%; padding: 9px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; } .bubble__time { font-size: 10px; opacity: .75; margin-top: 3px; font-family: var(--f-body); } .bubble--attendee { align-self: flex-start; background: var(--bg-tint); color: var(--ink); border: 1px solid var(--line); } .bubble--admin { align-self: flex-end; background: var(--primary); color: white; } .bubble--admin .bubble__time { color: rgba(255,255,255,.78); } .bubble--system { align-self: center; background: transparent; color: var(--muted); font-size: 12px; font-style: italic; padding: 4px 10px; border-radius: 0; text-align: center; } .support-compose { border-top: 1px solid var(--line); background: var(--bg-tint); padding: 12px; display: flex; gap: 10px; align-items: flex-end; } .support-compose textarea { flex: 1; resize: none; background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-family: var(--f-body); font-size: 14px; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease; } .support-compose textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(196,159,116,.14); } .support-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--primary); color: white; border-radius: var(--radius-pill); font-weight: 700; font-size: 12px; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(196,159,116,.55); } .support-badge:hover { background: var(--primary-strong); } @media (max-width: 900px) { .support-layout { grid-template-columns: 1fr; height: auto; } .support-sidebar { max-height: 260px; } } /* STAFF TOPBAR ACTIONS */ .staff-topbar-actions { display: inline-flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; font-weight: 600; } .staff-topbar-actions a { color: var(--ink-soft); border-bottom: 1px dashed var(--line-strong); padding-bottom: 1px; } .staff-topbar-actions a:hover { color: var(--primary-ink); border-bottom-color: var(--primary); } .staff-topbar-actions .sep { color: var(--line-strong); } .staff-topbar-actions form { display: inline; margin: 0; } .staff-topbar-actions .logout { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 14px; font-weight: 700; font-size: 12px; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .staff-topbar-actions .logout:hover { background: var(--ink); color: white; border-color: var(--ink); } /* EVENT FORM - refined editorial */ .event-form { max-width: 880px; margin: 0 auto; } .event-form .live-panel-card { padding: 32px 36px; margin-bottom: 24px; position: relative; } .event-form .live-panel-card h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .event-form .live-panel-card h2::before { content: attr(data-step); font-family: var(--f-body); font-size: 11px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: 4px 8px; border-radius: 999px; letter-spacing: .08em; } .event-form .ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; } .event-form .ff { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .event-form .ff--col-2 { grid-column: 1 / -1; } .event-form .ff label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .event-form .ff__input { width: 100%; padding: 14px 16px; background: white; border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--f-body); font-size: 16px; font-weight: 500; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .event-form .ff__input::placeholder { color: var(--muted); font-weight: 400; } .event-form .ff__input:hover:not(:focus) { border-color: var(--line-strong); } .event-form .ff__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(196,159,116,.12); background: #FAFBFF; } .event-form .ff__input--num { font-family: var(--f-body); font-weight: 700; font-size: 17px; max-width: 220px; letter-spacing: .02em; } input.ff__input[type="datetime-local"] { font-family: var(--f-body); font-weight: 600; letter-spacing: .02em; color: var(--ink); } .event-form .ff__hint { font-size: 13px; color: var(--muted); margin: 2px 0 0; line-height: 1.45; } .event-form .ff__err { font-size: 13px; color: var(--accent-red); margin: 4px 0 0; font-weight: 600; } .event-form__footer { display: flex; gap: 14px; justify-content: flex-end; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .event-form__footer .btn--primary { font-size: 15px; padding: 14px 28px; } @media (max-width: 760px) { .staff-shell { padding: 0 16px 60px; } .event-row { grid-template-columns: 1fr; } .event-row__actions { width: 100%; justify-content: flex-end; } .live-hero { grid-template-columns: 1fr; padding: 22px; } .event-form .ff-grid { grid-template-columns: 1fr; } } /* ───── extra small (telefon) ───── */ @media (max-width: 540px) { .container { padding: 0 16px; } .pair-row { flex-wrap: wrap; } .pair-row__room, .pair-row__missing { margin-left: 0; flex-basis: 100%; } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .stat-card { padding: 14px; } .stat-card__value { font-size: 24px; } .live-panel-card { padding: 18px 16px; } .attendee-item__email { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card--padded { padding: 18px; } .card--padded-sm { padding: 16px; } .form-section + .form-section { margin-top: 24px; padding-top: 22px; } .hero h1 { font-size: clamp(28px, 9vw, 42px) !important; } .met-card { padding: 12px 14px !important; } } /* ───── bardzo wąski - schowaj etykietę produktu żeby logo się mieściło ───── */ @media (max-width: 380px) { .brand .product { display: none; } } /* ───── round screen optimizations dla mobile ───── */ @media (max-width: 600px) { .round-bar { padding: 14px 14px 0; gap: 10px; } .round-bar-left { font-size: 13px; gap: 6px; } .round-bar-left .event { font-size: 14px; } .timer { width: 72px; height: 72px; } .timer-text strong { font-size: 18px; } .timer-text small { font-size: 9px; letter-spacing: .08em; } .round-stage { margin-top: 14px; padding: 0 14px; gap: 14px; } .round-questions { margin-top: 14px; padding: 0 14px 24px; gap: 14px; } .partner-card .head { gap: 10px; } .partner-card h2 { font-size: 17px; } .ai-panel, .static-q { padding: 16px !important; } } /* ───── x-cloak (Alpine) - ukryj przed pierwszym tickiem, zero flasha ───── */ [x-cloak] { display: none !important; } /* ───── Rada Firmowa - typografia i akcenty marki ───── Nagłówki Archivo 600 (jak radafirmowa.pl), etykiety/pigułki Tenor Sans wersalikami ze światłem, złote kropki i wyróżnienia. */ h1, h2, h3, h4 { font-family: var(--f-body); font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .hero h1 { font-weight: 600; letter-spacing: -.02em; } .hero h1 em, .events-spotlight__head h2 em { color: var(--primary-ink); } .pill { font-family: var(--f-secondary); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; background: var(--bg-tint); border-color: var(--line-strong); color: var(--ink-soft); } .pill .dot { background: var(--gold); } .btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .02em; } .btn--primary:hover { background: var(--primary-strong); box-shadow: 0 10px 28px -10px rgba(196,159,116,.7); } .btn--ghost:hover { border-color: var(--gold); color: var(--primary-ink); } .card { border-radius: var(--radius); } .brand-logo { height: 44px; width: auto; display: block; } .topbar .brand { display: inline-flex; align-items: center; } .ticket__date { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-strong) 100%); } .ticket__date .ticket__day { color: var(--gold); } /* Formularz dołączenia (attendees/entry.html) - jeden ekran, dwie kolumny na desktopie, jedna na telefonie. */ .join-card { max-width: 640px; margin: 8px auto 0; } .join-card .grid-2 { gap: 14px 16px; } .join-card .field--full { grid-column: 1 / -1; } .join-password { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .join-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--muted); font-size: 15px; margin-top: 6px; } .site-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 48px 24px 24px; margin-top: 40px; } .site-footer img { height: 28px; width: auto; opacity: .8; margin: 0 auto 10px; display: block; } .join-card .form-actions { margin-top: 20px; }