/* css/base.css */ /* ===== MGLISKO — system telefonu ===== */ :root { --bg: #050608; --scr: #0a0c10; --s1: #101318; --s2: #161a20; --s3: #1e232b; --s4: #272d37; --line: rgba(255, 255, 255, .07); --line2: rgba(255, 255, 255, .12); --tx: #e8ebef; --tx2: #a4acb7; --tx3: #6b7480; --acc: #f0a53a; --acc2: #ffcf85; --accd: rgba(240, 165, 58, .14); --fog: #8fb4c4; --rose: #e88aa2; --good: #5cc98b; --bad: #ec6a6a; --me: #1c5d69; --me2: #23717e; --them: #1a1f26; --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace; --hand: Caveat, "Segoe Print", "Bradley Hand", cursive; --safe-t: 0px; --safe-b: 0px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font-family: var(--font); overflow: hidden; overscroll-behavior: none; } body { -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; touch-action: manipulation; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; } img { -webkit-user-drag: none; user-select: none; } .icw { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ico { display: block; } /* ----- scena i urządzenie ----- */ #stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 700px at 20% 110%, rgba(143, 180, 196, .10), transparent 60%), radial-gradient(900px 600px at 90% -10%, rgba(240, 165, 58, .06), transparent 60%), radial-gradient(600px 400px at 50% 50%, rgba(255, 255, 255, .02), transparent 70%), #040507; } #stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .stage-side { position: absolute; left: 32px; bottom: 28px; max-width: 280px; color: var(--tx3); font-size: 12px; line-height: 1.6; z-index: 1; } .stage-side b { color: var(--tx2); letter-spacing: .3em; font-weight: 600; display: block; margin-bottom: 4px; } #device { position: relative; width: 390px; height: 844px; flex: none; z-index: 2; border-radius: 58px; padding: 11px; background: linear-gradient(145deg, #2a2e35, #0d0f12 40%, #1b1e23); box-shadow: 0 0 0 1.5px #3a3f47, 0 40px 120px rgba(0, 0, 0, .85), 0 0 0 9px #0b0c0e inset, 0 0 60px rgba(143, 180, 196, .06); transform-origin: center center; } #device::before { /* przyciski boczne */ content: ""; position: absolute; right: -3px; top: 190px; width: 3px; height: 90px; border-radius: 0 3px 3px 0; background: #2a2e35; box-shadow: -393px -60px 0 0 #2a2e35, -393px 40px 0 0 #2a2e35; } #screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 47px; background: var(--scr); isolation: isolate; contain: layout paint; } #island { position: absolute; top: 11px; left: 50%; width: 112px; height: 32px; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 90; pointer-events: none; } #island::after { content: ""; position: absolute; right: 22px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1d2a3a, #05070a 70%); } body.mobile #stage { background: var(--scr); } body.mobile .stage-side { display: none; } body.mobile #device { width: 100vw; height: 100vh; height: 100dvh; padding: 0; border-radius: 0; box-shadow: none; background: none; transform: none !important; } body.mobile #device::before { display: none; } body.mobile #screen { border-radius: 0; } body.mobile #island { display: none; } body.mobile { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); } /* ----- pasek stanu ----- */ #status { position: absolute; top: 0; left: 0; right: 0; height: calc(50px + var(--safe-t)); padding: calc(var(--safe-t) + 16px) 30px 0 34px; display: flex; align-items: flex-start; justify-content: space-between; z-index: 80; font-size: 15px; font-weight: 600; letter-spacing: .01em; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } body.mobile #status { height: calc(34px + var(--safe-t)); padding: calc(var(--safe-t) + 8px) 18px 0 22px; font-size: 13.5px; } #status .st-r { display: flex; gap: 6px; align-items: center; } #status .bat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } #status .bat i { position: relative; width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .9; } #status .bat i::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: var(--lvl, 70%); background: currentColor; border-radius: 1.5px; } #status .bat i::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; } #status.dim { color: rgba(255, 255, 255, .92); } /* ----- pasek domowy ----- */ #homebar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(26px + var(--safe-b)); z-index: 85; display: flex; align-items: center; justify-content: center; cursor: pointer; } #homebar::before { content: ""; width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .55); transition: background .2s; } #homebar:hover::before { background: rgba(255, 255, 255, .85); } #homebar.hide { display: none; } /* ----- ekran główny ----- */ #home { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: calc(64px + var(--safe-t)) 22px calc(34px + var(--safe-b)); background-size: cover; background-position: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s, opacity .35s; } body.mobile #home { padding-top: calc(46px + var(--safe-t)); } #home.behind { transform: scale(.92); filter: brightness(.5) blur(2px); } .widget { margin: 6px 4px 22px; } .widget .w-time { font-size: 68px; font-weight: 300; letter-spacing: -.03em; line-height: 1; } .widget .w-date { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .78); font-weight: 500; } .widget .w-wx { margin-top: 10px; display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: rgba(255, 255, 255, .62); padding: 6px 11px; border-radius: 20px; background: rgba(10, 14, 18, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 8px; align-content: start; flex: 1; } .dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 10px; border-radius: 30px; background: rgba(30, 36, 44, .42); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } .app-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; animation: popin .45s cubic-bezier(.2, 1.3, .4, 1) both; } .app-ic .ic { width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center; position: relative; background: var(--g, linear-gradient(160deg, #3a4250, #1c2129)); box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .25); transition: transform .15s; } .app-ic:active .ic { transform: scale(.9); } .app-ic .ic svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .app-ic .lb { font-size: 11.5px; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); white-space: nowrap; } .dock .app-ic .lb { display: none; } .badge { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); animation: popin .3s both; } .badge.dot { min-width: 13px; height: 13px; padding: 0; top: -3px; right: -3px; } .app-ic.new .ic::after { content: ""; position: absolute; inset: -4px; border-radius: 21px; border: 2px solid var(--acc); animation: pulse 1.6s ease-out infinite; } @keyframes popin { from { transform: scale(.6); opacity: 0; } } @keyframes pulse { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(1.15); } } /* ----- warstwa aplikacji ----- */ #apps { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .app { position: absolute; inset: 0; background: var(--scr); pointer-events: auto; overflow: hidden; animation: appin .32s cubic-bezier(.2, .85, .25, 1) both; transform-origin: var(--ox, 50%) var(--oy, 60%); } .app.closing { animation: appout .24s ease-in both; } @keyframes appin { from { transform: scale(.85); opacity: 0; border-radius: 40px; } } @keyframes appout { to { transform: scale(.88); opacity: 0; } } .pg { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--scr); transition: transform .3s cubic-bezier(.2, .85, .25, 1), filter .3s; } .pg.enter { transform: translateX(100%); } .pg.under { transform: translateX(-24%); filter: brightness(.6); pointer-events: none; } .pg.leave { transform: translateX(100%); } .hdr { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(52px + var(--safe-t)) 10px 10px; min-height: calc(98px + var(--safe-t)); background: linear-gradient(to bottom, var(--hbg, var(--scr)) 70%, transparent); position: relative; z-index: 3; } body.mobile .hdr { padding-top: calc(36px + var(--safe-t)); min-height: calc(82px + var(--safe-t)); } .hdr .bk { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--acc); flex: none; } .hdr .bk:active { background: var(--s3); } .hdr .tt { flex: 1; min-width: 0; padding: 0 4px; } .hdr .tt h1 { margin: 0; font-size: 19px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; } .hdr .tt small { display: block; font-size: 12px; color: var(--tx3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr .rt { display: flex; gap: 2px; flex: none; } .hdr .rt button { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tx2); } .hdr .rt button:active { background: var(--s3); } .hdr.big { flex-direction: column; align-items: stretch; padding-left: 20px; padding-right: 20px; } .hdr.big .tt h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; } .body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(40px + var(--safe-b)); } .body::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 0; height: 0; } .pad { padding: 0 16px; } /* ----- listy i elementy ----- */ .sec-t { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--tx3); padding: 18px 20px 8px; font-weight: 600; } .list { margin: 0 12px; border-radius: 16px; background: var(--s1); overflow: hidden; } .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; width: 100%; text-align: left; } .row + .row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--line); } .list.plain .row + .row::before { left: 14px; } .row:active { background: var(--s2); } .row .ri { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--s3); color: var(--tx2); flex: none; } .row .rm { flex: 1; min-width: 0; } .row .rm b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .rm span { display: block; font-size: 13px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .row .rx { font-size: 12px; color: var(--tx3); flex: none; text-align: right; } .row .chev { color: var(--tx3); flex: none; } .row.dis { opacity: .45; } .new-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); flex: none; box-shadow: 0 0 10px var(--acc); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; background: var(--s3); color: var(--tx2); font-weight: 600; } .pill.acc { background: var(--accd); color: var(--acc2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px; background: var(--s3); font-weight: 600; font-size: 15px; transition: transform .1s, background .2s; } .btn:active { transform: scale(.97); } .btn.pri { background: var(--acc); color: #1b1206; } .btn.ghost { background: transparent; border: 1px solid var(--line2); } .btn.wide { width: 100%; } .btn[disabled] { opacity: .4; pointer-events: none; } .field { width: 100%; height: 48px; border-radius: 13px; border: 1px solid var(--line2); background: var(--s1); padding: 0 14px; font-size: 16px; outline: none; transition: border-color .2s; } .field:focus { border-color: var(--acc); } .field.bad { border-color: var(--bad); animation: shake .35s; } .lbl { font-size: 12.5px; color: var(--tx2); margin: 14px 2px 6px; display: block; } .empty { text-align: center; color: var(--tx3); padding: 50px 30px; font-size: 14px; line-height: 1.5; } .empty .icw { margin: 0 auto 12px; opacity: .5; } .seg { display: flex; padding: 3px; border-radius: 12px; background: var(--s2); margin: 0 16px; gap: 2px; } .seg button { flex: 1; height: 32px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tx2); } .seg button.on { background: var(--s4); color: var(--tx); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .av { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; background: var(--s3); display: block; } .av img, .av svg { width: 100%; height: 100%; display: block; } .av.sm { width: 30px; height: 30px; } .av.lg { width: 92px; height: 92px; } .av.xl { width: 128px; height: 128px; } /* ----- powiadomienia ----- */ #banners { position: absolute; top: calc(10px + var(--safe-t)); left: 8px; right: 8px; z-index: 95; pointer-events: none; } .banner { pointer-events: auto; display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 22px; cursor: pointer; background: rgba(36, 41, 50, .82); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 10px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); animation: banin .45s cubic-bezier(.2, 1.2, .3, 1) both; margin-bottom: 8px; } .banner.out { animation: banout .3s ease-in both; } @keyframes banin { from { transform: translateY(-120%); opacity: 0; } } @keyframes banout { to { transform: translateY(-120%); opacity: 0; } } .banner .b-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } .banner .b-ic .av { width: 38px; height: 38px; } .banner .b-m { flex: 1; min-width: 0; } .banner .b-h { display: flex; justify-content: space-between; font-size: 13px; } .banner .b-h b { font-weight: 650; } .banner .b-h span { color: var(--tx3); font-size: 11.5px; } .banner .b-t { font-size: 13.5px; color: var(--tx2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } #island.live { width: 190px; transition: width .4s cubic-bezier(.2, 1.2, .3, 1); } #toasts { position: absolute; left: 0; right: 0; bottom: calc(46px + var(--safe-b)); z-index: 96; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { pointer-events: auto; max-width: 86%; padding: 10px 16px; border-radius: 22px; font-size: 13.5px; font-weight: 550; display: flex; gap: 9px; align-items: center; background: rgba(30, 34, 41, .94); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07); animation: toin .35s cubic-bezier(.2, 1.3, .3, 1) both; backdrop-filter: blur(12px); } .toast.out { animation: toout .3s ease-in both; } .toast.ev { background: linear-gradient(135deg, rgba(64, 44, 14, .96), rgba(36, 30, 22, .96)); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(240, 165, 58, .35); cursor: pointer; } .toast.ev .icw { color: var(--acc); } .toast.trust-up, .toast.trust-down { font-style: italic; font-weight: 500; color: var(--tx2); } .toast.trust-up::before, .toast.trust-down::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; } .toast.trust-down::before { background: var(--bad); } .toast.error { background: #4a1d1f; } .toast.app { background: rgba(22, 38, 44, .96); box-shadow: inset 0 0 0 1px rgba(143, 180, 196, .3), 0 8px 30px rgba(0, 0, 0, .5); } @keyframes toin { from { transform: translateY(20px) scale(.9); opacity: 0; } } @keyframes toout { to { transform: translateY(10px); opacity: 0; } } /* ----- arkusze i okna ----- */ .ovl { position: absolute; inset: 0; z-index: 60; } .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: fade .25s both; } .scrim.out { animation: fadeout .25s both; } @keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } } .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; display: flex; flex-direction: column; border-radius: 26px 26px 0 0; background: var(--s1); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: sheetin .38s cubic-bezier(.2, .95, .25, 1) both; padding-bottom: var(--safe-b); } .sheet.out { animation: sheetout .26s ease-in both; } @keyframes sheetin { from { transform: translateY(100%); } } @keyframes sheetout { to { transform: translateY(100%); } } .sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--s4); margin: 8px auto 4px; flex: none; } .sheet .sh-h { display: flex; align-items: center; padding: 8px 18px 10px; flex: none; } .sheet .sh-h h3 { margin: 0; flex: 1; font-size: 17px; font-weight: 650; } .sheet .sh-h button { width: 32px; height: 32px; border-radius: 50%; background: var(--s3); display: flex; align-items: center; justify-content: center; color: var(--tx2); } .sheet .sh-b { overflow-y: auto; padding: 4px 0 26px; } .modal { position: absolute; left: 50%; top: 50%; width: 82%; transform: translate(-50%, -50%); border-radius: 22px; background: var(--s2); padding: 22px 20px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: modin .3s cubic-bezier(.2, 1.3, .3, 1) both; text-align: center; } @keyframes modin { from { transform: translate(-50%, -46%) scale(.92); opacity: 0; } } .modal h3 { margin: 0 0 8px; font-size: 17px; } .modal p { margin: 0 0 16px; color: var(--tx2); font-size: 14px; line-height: 1.5; } .modal .mb { display: flex; gap: 8px; } .modal .mb .btn { flex: 1; height: 44px; } /* ----- ekran blokady ----- */ #lock { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; padding: calc(78px + var(--safe-t)) 14px calc(30px + var(--safe-b)); background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.5, 0, .2, 1), opacity .5s; } #lock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55)); pointer-events: none; } #lock > * { position: relative; } #lock.gone { transform: translateY(-100%); opacity: 0; pointer-events: none; } #lock .lk-ic { color: rgba(255, 255, 255, .8); margin-bottom: 10px; } #lock .lk-d { font-size: 17px; font-weight: 550; color: rgba(255, 255, 255, .85); } #lock .lk-t { font-size: 92px; font-weight: 250; letter-spacing: -.04em; line-height: 1.02; } #lock .lk-n { width: 100%; margin-top: 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; } #lock .lk-n .banner { animation: lkin .5s cubic-bezier(.2, 1.1, .3, 1) both; margin: 0; } @keyframes lkin { from { transform: translateY(18px) scale(.96); opacity: 0; } } #lock .lk-u { font-size: 14px; color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; align-items: center; gap: 10px; animation: breathe 2.4s ease-in-out infinite; cursor: pointer; padding: 10px 30px; } #lock .lk-u::after { content: ""; width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .7); } @keyframes breathe { 50% { opacity: .45; transform: translateY(-3px); } } /* ----- połączenia ----- */ .call { position: absolute; inset: 0; z-index: 75; display: flex; flex-direction: column; align-items: center; padding: calc(96px + var(--safe-t)) 24px calc(44px + var(--safe-b)); background: radial-gradient(120% 70% at 50% 20%, #253140, #0b0e13 70%); animation: fade .35s both; } .call.out { animation: fadeout .5s both; } .call .c-av { position: relative; } .call .c-av::before, .call .c-av::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); animation: ring 2s ease-out infinite; } .call .c-av::after { animation-delay: 1s; } .call.active .c-av::before, .call.active .c-av::after { display: none; } @keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .call h2 { margin: 26px 0 4px; font-size: 30px; font-weight: 500; letter-spacing: -.01em; text-align: center; } .call .c-s { color: var(--tx2); font-size: 15px; } .call .c-cap { flex: 1; width: 100%; margin: 24px 0 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; mask-image: linear-gradient(to bottom, transparent, #000 18%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); } .call .c-cap .cl { font-size: 16px; line-height: 1.45; color: var(--tx2); animation: toin .35s both; } .call .c-cap .cl b { color: var(--acc2); font-weight: 600; margin-right: 6px; } .call .c-cap .cl.me { color: var(--fog); text-align: right; } .call .c-cap .cl.me b { color: var(--fog); } .call .c-cap .cl.typing { color: var(--tx3); font-style: italic; } .call .c-opts { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .call .c-opts button { padding: 13px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); text-align: left; font-size: 15px; line-height: 1.35; animation: toin .3s both; } .call .c-opts button:active { background: rgba(255, 255, 255, .16); } .call .c-btns { display: flex; gap: 70px; margin-top: auto; } .call .c-btn { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .call .c-btn.acc { background: #2fb36a; animation: wob 1.2s ease-in-out infinite; } .call .c-btn.dec { background: #e5484d; } .call .c-btn[disabled] { opacity: .35; } @keyframes wob { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 40% { transform: rotate(0); } } .call .c-row { display: flex; gap: 24px; margin-bottom: 26px; } .call .c-row span { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .09); display: flex; align-items: center; justify-content: center; color: var(--tx2); } /* ----- karty rozdziałów, przerywniki, zakończenia ----- */ .curtain { position: absolute; inset: 0; z-index: 98; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; animation: fade .8s both; cursor: pointer; } .curtain.out { animation: fadeout .9s both; } .curtain .cu-k { font-size: 12px; letter-spacing: .5em; color: var(--tx3); text-transform: uppercase; animation: rise 1.4s .2s both; padding-left: .5em; } .curtain .cu-t { font-size: 40px; font-weight: 250; letter-spacing: .06em; margin-top: 14px; animation: rise 1.6s .5s both; } .curtain .cu-s { font-size: 13px; color: var(--tx2); margin-top: 16px; letter-spacing: .08em; animation: rise 1.6s .9s both; } .curtain .cu-line { width: 40px; height: 1px; background: var(--acc); margin: 26px auto 0; animation: grow 1.8s 1s both; } .curtain .cu-p { font-size: 15px; color: var(--tx2); line-height: 1.7; max-width: 300px; margin-top: 18px; animation: rise 1.6s .9s both; } .curtain .cu-stats { margin-top: 28px; display: flex; gap: 22px; animation: rise 1.6s 1.3s both; } .curtain .cu-stats div { font-size: 11px; color: var(--tx3); letter-spacing: .1em; text-transform: uppercase; } .curtain .cu-stats b { display: block; font-size: 24px; color: var(--tx); font-weight: 300; letter-spacing: 0; margin-bottom: 2px; } .curtain .btn { margin-top: 36px; animation: rise 1.4s 1.6s both; } .curtain.interlude .cu-t { font-size: 22px; font-weight: 300; letter-spacing: .02em; line-height: 1.5; } .curtain.ending { justify-content: flex-start; overflow-y: auto; padding-top: 90px; cursor: default; } .curtain.ending .cu-t { font-size: 46px; letter-spacing: .25em; padding-left: .25em; } .curtain.ending .cu-p { max-width: 320px; text-align: left; } .curtain .cu-tag { font-size: 11px; letter-spacing: .3em; color: var(--acc); margin-top: 10px; text-transform: uppercase; animation: rise 1.4s .7s both; } @keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } } @keyframes grow { from { width: 0; } } /* ----- efekty ----- */ #screen.glitch { animation: glitch .9s steps(2) both; } #screen.glitch::after { content: ""; position: absolute; inset: 0; z-index: 99; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(255, 0, 60, .08) 0 2px, transparent 2px 5px), linear-gradient(90deg, rgba(0, 255, 255, .06), transparent 30%, rgba(255, 0, 80, .06)); animation: scan .9s steps(6) both; } @keyframes glitch { 0% { filter: none; transform: none; } 10% { filter: hue-rotate(80deg) saturate(3); transform: translate(3px, -1px) skewX(2deg); } 20% { filter: invert(.1) contrast(1.6); transform: translate(-4px, 1px); } 35% { filter: none; transform: none; clip-path: inset(10% 0 40% 0); } 50% { filter: hue-rotate(-60deg); transform: translate(2px, 2px); clip-path: none; } 65% { filter: contrast(2) brightness(1.3); transform: translate(-1px, 0) skewX(-3deg); } 80% { filter: none; transform: none; } } @keyframes scan { 0% { transform: translateY(-20%); } 100% { transform: translateY(20%); } } #screen.shake { animation: shake .5s both; } @keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } .flash { position: absolute; inset: 0; z-index: 97; background: #fff; pointer-events: none; animation: fadeout .7s both; } .blackout { position: absolute; inset: 0; z-index: 97; background: #000; pointer-events: none; animation: bo 2.4s both; } @keyframes bo { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } } /* ----- ekran tytułowy ----- */ .title-scr { position: absolute; inset: 0; z-index: 99; background: #000; display: flex; align-items: flex-end; overflow: hidden; } .title-scr.out { animation: fadeout .7s both; } .ts-bg { position: absolute; inset: -4%; background-size: cover; background-position: center 60%; animation: tsz 30s ease-in-out infinite alternate; opacity: .9; } @keyframes tsz { to { transform: scale(1.08) translateY(-1%); } } .ts-fog { position: absolute; left: -50%; right: -50%; bottom: 8%; height: 45%; background: radial-gradient(50% 50% at 50% 60%, rgba(143, 180, 196, .22), transparent 70%); filter: blur(10px); animation: tsf 18s linear infinite; } .ts-fog.f2 { bottom: 26%; height: 30%; opacity: .7; animation-duration: 26s; animation-direction: reverse; } @keyframes tsf { from { transform: translateX(-10%); } to { transform: translateX(10%); } } .ts-c { position: relative; width: 100%; padding: 0 28px calc(46px + var(--safe-b)); background: linear-gradient(transparent, rgba(0, 0, 0, .85) 30%); text-align: center; } .ts-k { font-size: 11px; letter-spacing: .45em; text-transform: uppercase; color: var(--tx3); padding-left: .45em; animation: rise 1.6s .3s both; } .ts-t { margin: 10px 0 6px; font-size: 44px; font-weight: 250; letter-spacing: .2em; padding-left: .2em; color: #f2efe9; text-shadow: 0 0 30px rgba(240, 165, 58, .25); animation: rise 2s .6s both; } .ts-s { color: var(--acc2); font-size: 14px; letter-spacing: .04em; margin-bottom: 30px; animation: rise 2s 1s both; font-style: italic; } .ts-b { display: flex; flex-direction: column; gap: 10px; animation: rise 1.6s 1.4s both; } .ts-n { margin-top: 22px; font-size: 12.5px; color: var(--tx2); animation: rise 1.6s 1.8s both; } .ts-w { margin-top: 10px; font-size: 11px; color: var(--tx3); line-height: 1.5; animation: rise 1.6s 2s both; } .setup { position: absolute; inset: 0; z-index: 100; background: var(--scr); display: flex; align-items: center; justify-content: center; padding: 30px 26px; animation: fade .5s both; } .setup.out { animation: fadeout .6s both; } .su-c { width: 100%; } .su-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--accd); color: var(--acc); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .setup h2 { text-align: center; font-size: 22px; font-weight: 650; margin: 0 0 8px; } .setup p { text-align: center; color: var(--tx2); font-size: 14px; line-height: 1.55; margin: 0 0 14px; } .su-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .su-o { padding: 14px 10px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color .2s, background .2s; } .su-o b { font-size: 16px; } .su-o small { font-size: 12px; color: var(--tx3); } .su-o.on { border-color: var(--acc); background: var(--accd); } .setup .su-f { font-size: 12px; color: var(--tx3); margin-top: 14px; } .dbg-b { position: fixed; right: 10px; top: 10px; z-index: 999; background: #c23; color: #fff; font: 700 11px var(--mono); padding: 6px 9px; border-radius: 8px; opacity: .7; } /* ---------- straszaki (rzadkie, jednorazowe; tryb łagodny: .soft) ---------- */ .scare-ov { position: absolute; inset: 0; z-index: 98; background: #000; display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: scareIn .08s both; } .scare-ov.soft { animation: scareIn .9s both; } .scare-ov img { width: 100%; height: 100%; object-fit: cover; } .scare-ov.zoom img { animation: scareZoom 1.4s cubic-bezier(.2,.9,.3,1) both; } .scare-ov.soft.zoom img { animation: none; filter: brightness(.75); } .scare-ov .scare-cap { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; color: #ddd; font: 600 13px/1.3 ui-monospace, monospace; letter-spacing: .08em; text-shadow: 0 1px 2px #000; } .scare-ov.out { animation: fadeout .5s both; } .scare-glitch { animation: scareGlitch .55s steps(2) both; } .scare-glitch.soft { animation: none; filter: contrast(1.15) brightness(.85); transition: filter .6s; } @keyframes scareIn { from { opacity: 0 } to { opacity: 1 } } @keyframes scareZoom { from { transform: scale(1.0) } to { transform: scale(1.18) } } @keyframes scareGlitch { 0% { transform: translate(0); filter: none } 20% { transform: translate(-6px, 2px) skewX(4deg); filter: hue-rotate(80deg) contrast(2) } 40% { transform: translate(5px, -3px); filter: invert(1) } 60% { transform: translate(-3px, 0) skewX(-6deg); filter: saturate(4) } 80% { transform: translate(2px, 2px); filter: grayscale(1) contrast(3) } 100% { transform: translate(0); filter: none } } @media (prefers-reduced-motion: reduce) { .scare-ov, .scare-ov.zoom img, .scare-glitch { animation: none !important; } } /* css/apps.css */ /* ===== Aplikacje ===== */ /* ---------- Wiadomości ---------- */ .chatlist { padding: 4px 0 20px; } .crow { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 16px; text-align: left; } .crow:active { background: var(--s1); } .crow .av { width: 52px; height: 52px; } .crow .cm { flex: 1; min-width: 0; border-bottom: 1px solid var(--line); padding: 4px 0 12px; } .crow .ct { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .crow .ct b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crow .ct span { font-size: 12.5px; color: var(--tx3); flex: none; } .crow .cp { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .crow .pv { flex: 1; font-size: 14px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crow .typ, .chat-hdr small.typ { color: var(--acc); font-style: italic; } .crow .turn { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acc); background: var(--accd); padding: 3px 7px; border-radius: 8px; flex: none; } .crow .cnt { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--acc); color: #1b1206; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .crow.unread .ct b { color: #fff; } .crow.unread .pv { color: var(--tx); font-weight: 500; } .crow.glitchy .ct b { font-family: var(--mono); letter-spacing: .05em; text-shadow: 1px 0 rgba(255, 0, 80, .6), -1px 0 rgba(0, 255, 255, .6); } .chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--scr); } .chat-hdr { gap: 8px; border-bottom: 1px solid var(--line); background: rgba(10, 12, 16, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .chat-hdr .av { width: 38px; height: 38px; } .chat-hdr .tt h1 { font-size: 16.5px; } .ff { opacity: 0; pointer-events: none; transition: opacity .2s; color: var(--acc) !important; } .ff.on { opacity: 1; pointer-events: auto; } .chat-body { padding: 10px 12px 18px; background: radial-gradient(120% 60% at 50% 0%, rgba(143, 180, 196, .05), transparent 60%); } .msgs { display: flex; flex-direction: column; gap: 2px; } .sep { align-self: center; font-size: 11.5px; color: var(--tx3); margin: 14px 0 8px; font-weight: 500; } .sysmsg { align-self: center; max-width: 86%; text-align: center; font-size: 12.5px; color: var(--tx3); margin: 10px 0; line-height: 1.45; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); } .msg { display: flex; gap: 8px; align-items: flex-start; max-width: 84%; } .msg.first { margin-top: 8px; } .msg.me { align-self: flex-end; } .msg.them { align-self: flex-start; } .msg.in { animation: msgin .32s cubic-bezier(.2, 1.1, .3, 1) both; } @keyframes msgin { from { opacity: 0; transform: translateY(10px) scale(.96); } } .msg .av.sm { width: 28px; height: 28px; margin-top: 18px; } .msg .av-sp { width: 28px; flex: none; } .msg .col { min-width: 0; display: flex; flex-direction: column; } .msg .who { font-size: 12px; font-weight: 650; margin: 0 0 3px 12px; } .bub { position: relative; padding: 8px 12px 7px; border-radius: 19px; font-size: 15px; line-height: 1.4; background: var(--them); word-wrap: break-word; overflow-wrap: anywhere; min-width: 0; -webkit-user-select: text; user-select: text; } .msg.them.first .bub { border-top-left-radius: 6px; } .msg.me .bub { background: linear-gradient(160deg, var(--me2), var(--me)); color: #f1f8f9; } .msg.me.first .bub { border-top-right-radius: 6px; } .bub .tx { display: inline; } .bub .tm { float: right; font-size: 10.5px; opacity: .45; margin: 7px 0 -3px 10px; font-variant-numeric: tabular-nums; } .bub.media { padding: 3px; background: var(--them); } .bub.media .tm { position: absolute; right: 10px; bottom: 8px; margin: 0; opacity: .9; color: #fff; text-shadow: 0 1px 3px #000; } .mimg { display: block; width: 230px; max-width: 100%; border-radius: 15px; cursor: zoom-in; background: #000; aspect-ratio: auto; } .bub:not(.media) .mimg { margin: -2px -6px 6px; width: calc(100% + 12px); max-width: 236px; } .evc { display: flex; gap: 10px; align-items: center; padding: 6px 4px 4px; min-width: 200px; cursor: pointer; } .evc img, .evc .evi { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; } .evc small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; } .evc b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; } .plc { display: flex; gap: 10px; align-items: center; padding: 6px 4px 4px; min-width: 180px; } .plc > span { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; } .plc small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; } .plc b { display: block; font-size: 14px; } .msg.typing .bub { display: flex; gap: 4px; padding: 14px 14px; } .msg.typing .bub i { width: 7px; height: 7px; border-radius: 50%; background: var(--tx2); animation: dot 1.2s infinite ease-in-out; } .msg.typing .bub i:nth-child(2) { animation-delay: .15s; } .msg.typing .bub i:nth-child(3) { animation-delay: .3s; } .msg.typing .av { margin-top: 0; } @keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } .composer { flex: none; padding: 10px 12px calc(30px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(10, 12, 16, .96); display: flex; gap: 8px; align-items: center; } .composer .idle { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 42px; border-radius: 21px; border: 1px solid var(--line2); padding: 0 6px 0 16px; color: var(--tx3); font-size: 14.5px; } .composer .send { width: 40px; height: 40px; border-radius: 50%; background: var(--acc); color: #1b1206; display: flex; align-items: center; justify-content: center; flex: none; } .composer .send.dis { width: 32px; height: 32px; background: var(--s3); color: var(--tx3); } .composer.choices { flex-direction: column; align-items: stretch; max-height: 46%; overflow-y: auto; gap: 7px; padding-top: 12px; } .composer .opt { text-align: left; padding: 12px 15px; border-radius: 17px; font-size: 14.5px; line-height: 1.38; color: var(--tx); background: rgba(240, 165, 58, .07); border: 1px solid rgba(240, 165, 58, .28); animation: optin .35s cubic-bezier(.2, 1.1, .3, 1) both; transition: background .15s, transform .1s; } .composer .opt:hover { background: rgba(240, 165, 58, .14); } .composer .opt:active { transform: scale(.98); background: rgba(240, 165, 58, .2); } @keyframes optin { from { opacity: 0; transform: translateY(12px); } } .composer.asking .field { height: 44px; border-radius: 22px; font-size: 15.5px; } .composer.action .btn { height: 48px; } .evpick .ri.thumb, .row .ri.thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; padding: 0; } /* Szklarz */ .chat.glitchy { background: #050607; } .chat.glitchy::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); animation: flick 6s infinite steps(1); } @keyframes flick { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .2; } 98% { opacity: .9; } 99% { opacity: .4; } } .chat.glitchy .chat-body { background: radial-gradient(90% 50% at 50% 40%, rgba(0, 255, 255, .03), transparent 70%); } .chat.glitchy .msg.them .bub { background: #0b0f10; border: 1px solid rgba(120, 255, 255, .14); font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; color: #cfe; text-shadow: 1px 0 rgba(255, 0, 80, .5), -1px 0 rgba(0, 255, 255, .5); } .chat.glitchy .chat-hdr h1 { font-family: var(--mono); letter-spacing: .08em; } .chat.glitchy .msg.them.in .bub { animation: gl .5s steps(3) both; } @keyframes gl { 0% { clip-path: inset(0 0 60% 0); transform: translateX(-4px); } 33% { clip-path: inset(40% 0 0 0); transform: translateX(3px); } 66% { clip-path: inset(0 0 20% 0); transform: none; } } /* ---------- Przeglądarka zdjęć ---------- */ .viewer { position: absolute; inset: 0; z-index: 72; background: #000; display: flex; flex-direction: column; animation: fade .25s both; } .viewer.out { animation: fadeout .25s both; } .vw-top { display: flex; align-items: center; gap: 6px; padding: calc(50px + var(--safe-t)) 10px 8px; z-index: 2; background: linear-gradient(#000 60%, transparent); } body.mobile .vw-top { padding-top: calc(36px + var(--safe-t)); } .vw-top .bk, .vw-top .rt button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .08); } .vw-top .tt { flex: 1; min-width: 0; text-align: center; } .vw-top h1 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vw-top small { color: var(--tx3); font-size: 12px; } .vw-stage { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; } .vw-inner { position: relative; transform-origin: center center; will-change: transform; } .vw-inner img { width: 100%; height: 100%; display: block; } .vw-rings { position: absolute; inset: 0; pointer-events: none; } .ring { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: calc(2px / var(--s, 1)) solid rgba(255, 207, 133, .85); box-shadow: 0 0 10px rgba(240, 165, 58, .6); } .ring.pulse { animation: rp .9s ease-out both; border-color: #fff; } @keyframes rp { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } .vw-hint { position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); font-size: 12.5px; color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .6); padding: 7px 14px; border-radius: 20px; white-space: nowrap; transition: opacity .5s; pointer-events: none; z-index: 3; } .vw-hint.gone { opacity: 0; } .vw-foot { min-height: calc(76px + var(--safe-b)); padding: 10px 16px calc(28px + var(--safe-b)); display: flex; align-items: center; justify-content: center; gap: 14px; z-index: 2; } .vw-nav { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; } .vw-nav.r svg { transform: scaleX(-1); } .vw-nav[disabled] { opacity: .25; } .vw-count { font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; } .vw-edit { height: 40px; font-size: 13.5px; } img.neg, .neg img { filter: invert(1) sepia(.75) saturate(2.6) hue-rotate(-20deg); } .exif .row { padding: 10px 14px; } .exif .rm span { margin: 0 0 2px; font-size: 12px; color: var(--tx3); } .exif .rm b { white-space: normal; font-weight: 500; font-size: 14.5px; } /* ---------- Telefon ---------- */ .ph-content { padding-top: 6px; } .ri.bad, b.bad, .bad { color: var(--bad) !important; } .ok { color: var(--good) !important; } .transcript { padding: 0 18px; } .transcript p { font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; color: var(--tx2); } .transcript p b { color: var(--tx); } .kp-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 30px 10px; } .kp-num { font-size: 34px; font-weight: 300; min-height: 46px; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .kp-name { font-size: 13px; color: var(--acc); min-height: 18px; margin-bottom: 14px; } .kp { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 24px; } .kp-k { width: 76px; height: 76px; border-radius: 50%; background: var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .1s; } .kp-k:active { background: var(--s4); } .kp-k b { font-size: 30px; font-weight: 400; line-height: 1; } .kp-k small { font-size: 9.5px; letter-spacing: .18em; color: var(--tx3); margin-top: 3px; min-height: 11px; } .kp-act { display: grid; grid-template-columns: repeat(3, 76px); gap: 24px; margin-top: 16px; align-items: center; justify-items: center; } .kp-call { width: 70px; height: 70px; border-radius: 50%; background: #2fb36a; color: #fff; display: flex; align-items: center; justify-content: center; } .kp-del { color: var(--tx2); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .kp.small { grid-template-columns: repeat(3, 66px); gap: 12px 20px; justify-content: center; } .kp.small .kp-k { width: 66px; height: 66px; } /* ---------- Szukajka ---------- */ .hdr.flat { background: var(--scr); min-height: 0; padding-bottom: 8px; } .br-logo { text-align: center; font-size: 42px; font-weight: 750; letter-spacing: -.03em; margin: 26px 0 22px; } .br-logo span { color: var(--tx); } .br-logo b { color: var(--acc); } .sb { display: flex; align-items: center; gap: 6px; height: 48px; border-radius: 24px; background: var(--s2); border: 1px solid var(--line2); padding: 0 5px 0 14px; width: 100%; } .sb-ic { color: var(--tx3); } .sb-in { flex: 1; height: 100%; border: 0; background: transparent; padding: 0 4px; font-size: 15.5px; } .sb-in::-webkit-search-cancel-button { display: none; } .sb-go { width: 38px; height: 38px; border-radius: 50%; background: var(--acc); color: #1b1206; display: flex; align-items: center; justify-content: center; flex: none; } .br-short { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 22px 16px 6px; } .br-sc { display: flex; flex-direction: column; align-items: center; gap: 7px; } .br-sci { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #fff; } .br-sc small { font-size: 11.5px; color: var(--tx2); text-align: center; line-height: 1.2; } .br-tip { color: var(--tx3); font-size: 12.5px; text-align: center; padding: 18px 30px; line-height: 1.5; } .res-n { font-size: 12px; color: var(--tx3); padding: 4px 18px 8px; } .res { display: block; width: 100%; text-align: left; padding: 12px 18px 14px; border-bottom: 1px solid var(--line); } .res:active { background: var(--s1); } .res-u { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); } .fav { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; } .res-t { font-size: 17px; color: #8cb8f0; margin: 6px 0 4px; font-weight: 500; line-height: 1.3; } .res-s { font-size: 13.5px; color: var(--tx2); line-height: 1.45; } .addr { display: flex; align-items: center; gap: 6px; height: 36px; border-radius: 12px; background: var(--s2); padding: 0 12px; font-size: 13px; color: var(--tx2); overflow: hidden; white-space: nowrap; } .addr span { overflow: hidden; text-overflow: ellipsis; } .web-body { background: #f3f1ec; color: #1d1f22; padding-bottom: 60px; } .web { -webkit-user-select: text; user-select: text; } /* ---------- Galeria ---------- */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 2px; } .pth { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--s1); } .pth img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .pth:active img { transform: scale(.96); } .pth.new::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc), 0 0 0 2px rgba(0, 0, 0, .4); } .pv-ic { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; } .pv-ic.ok { background: var(--good); color: #062; } /* ---------- Nimbus ---------- */ .nb-wrap { padding: 20px 26px; display: flex; flex-direction: column; gap: 10px; } .nb-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 30px 0 4px; } .nb-brand span { width: 64px; height: 64px; border-radius: 19px; background: linear-gradient(160deg, #f49bb4, #b8355c); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(184, 53, 92, .35); } .bv .nb-brand span { background: linear-gradient(160deg, #94a550, #3d4a1b); box-shadow: 0 10px 30px rgba(61, 74, 27, .45); } .nb-brand b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; } .nb-sub { text-align: center; color: var(--tx2); font-size: 14px; margin: 0 0 14px; line-height: 1.5; } .nb-err { color: var(--bad); font-size: 13px; min-height: 16px; } .nb-btn { margin-top: 4px; } .nb-link { color: var(--rose); font-size: 14px; padding: 10px; font-weight: 600; } .nb-acc { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 14px; color: var(--rose); background: rgba(232, 138, 162, .1); padding: 9px 12px; border-radius: 12px; margin-bottom: 6px; } .nb-ok { width: 64px; height: 64px; border-radius: 50%; background: rgba(92, 201, 139, .15); color: var(--good); display: flex; align-items: center; justify-content: center; margin: 10px auto; } .field.ok { border-color: var(--good); } .nb .hdr .tt h1 { color: var(--rose); } .nb-dev { display: flex; align-items: center; gap: 14px; margin: 4px 16px 0; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(232, 138, 162, .14), rgba(232, 138, 162, .03)); border: 1px solid rgba(232, 138, 162, .18); } .nb-dev-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(232, 138, 162, .18); color: var(--rose); display: flex; align-items: center; justify-content: center; } .nb-dev b { display: block; font-size: 17px; } .nb-dev span { font-size: 12.5px; color: var(--tx2); } .nb-dev-st { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx3); } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tx3); flex: none; } .dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); } .nb-bk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx2); margin: 14px 20px 8px; } .nb-bar { height: 6px; border-radius: 3px; background: var(--s3); margin: 0 20px; overflow: hidden; } .nb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), #b8355c); border-radius: 3px; } .nb-bar-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--tx3); margin: 6px 20px 0; } .nb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 16px; } .nb-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 12px; border-radius: 18px; background: var(--s1); text-align: left; transition: transform .1s; } .nb-tile:active { transform: scale(.96); } .nb-ti { width: 38px; height: 38px; border-radius: 12px; background: rgba(232, 138, 162, .12); color: var(--rose); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .nb-tile b { font-size: 13.5px; line-height: 1.2; } .nb-tile small { font-size: 11.5px; color: var(--tx3); } .nb-tile .badge { top: 8px; right: 8px; } .nb-albums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 8px 16px; } .nb-alb { text-align: left; } .nb-alb .cov { position: relative; display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--s1); margin-bottom: 8px; } .nb-alb .cov img { width: 100%; height: 100%; object-fit: cover; } .nb-alb .cov .badge { top: 8px; right: 8px; } .nb-alb b { display: block; font-size: 14.5px; } .nb-alb small { color: var(--tx3); font-size: 12.5px; } .nb-note-s { color: var(--tx2); font-size: 13px; line-height: 1.5; margin: 0 0 12px; } .msgs.sms { padding: 8px 12px; } .msgs.sms .msg.me .bub { background: linear-gradient(160deg, #c45b7a, #93334f); } .msgs.sms .bub.clue { cursor: pointer; } .msgs.sms .bub.clue:active { outline: 2px solid var(--acc); } .nb-hint { text-align: center; font-size: 12px; color: var(--tx3); padding: 14px 30px; } .paper { margin: 8px 14px; padding: 22px 20px 26px; border-radius: 6px; color: #2b2620; font-size: 15px; line-height: 1.65; -webkit-user-select: text; user-select: text; background: linear-gradient(#e9e2d0, #e1d8c3); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-family: Georgia, "Times New Roman", serif; background-image: repeating-linear-gradient(transparent 0 23.5px, rgba(80, 110, 160, .18) 23.5px 24.5px), linear-gradient(#ece5d3, #e3dac6); } .paper b { color: #000; } .pin { display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; } .pin-ic { color: var(--rose); margin-bottom: 8px; } .pin-msg { font-size: 14px; color: var(--tx2); text-align: center; padding: 0 30px 14px; line-height: 1.45; } .pin-dots { display: flex; gap: 14px; margin-bottom: 20px; } .pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tx2); } .pin-dots i.on { background: var(--tx); border-color: var(--tx); } .pin-dots.bad { animation: shake .4s; } .pin-dots.bad i { border-color: var(--bad); } .loc-tl { padding: 6px 18px 18px; } .loc-i { display: grid; grid-template-columns: 52px 22px 1fr; gap: 6px; min-height: 64px; } .loc-t { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 1px; } .loc-t small { display: block; color: var(--tx3); font-weight: 500; font-size: 12px; } .loc-dot { position: relative; display: flex; justify-content: center; } .loc-dot::before { content: ""; position: absolute; top: 14px; bottom: -4px; width: 2px; background: var(--s4); } .loc-dot::after { content: ""; position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--rose); margin-top: 3px; box-shadow: 0 0 0 3px rgba(232, 138, 162, .2); } .loc-i.move .loc-dot::after { width: 8px; height: 8px; margin-top: 5px; background: var(--tx3); box-shadow: none; } .loc-i.last .loc-dot::before { display: none; } .loc-i.last .loc-dot::after { background: var(--bad); box-shadow: 0 0 0 4px rgba(236, 106, 106, .25), 0 0 14px var(--bad); } .loc-b b { display: block; font-size: 15px; } .loc-b span { display: block; font-size: 13px; color: var(--tx2); line-height: 1.45; margin-top: 2px; padding-bottom: 12px; } .mailrow .subj { color: var(--tx) !important; font-weight: 500; } .mailrow.unread b::before { content: "● "; color: var(--rose); } .mail { padding: 4px 18px; } .mail-h { display: flex; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .mail-h b { display: block; font-size: 14.5px; } .mail-h span { font-size: 12.5px; color: var(--tx3); } .mail-h small { margin-left: auto; font-size: 11.5px; color: var(--tx3); text-align: right; } .mail-b { font-size: 15px; line-height: 1.6; color: var(--tx2); padding: 16px 0; -webkit-user-select: text; user-select: text; } .mail-b b { color: var(--tx); } .mail-img { width: 100%; border-radius: 12px; } .au { margin: 8px 16px; padding: 16px; border-radius: 20px; background: var(--s1); } .wave { width: 100%; height: 70px; display: block; } .au-ctl { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .play-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--rose); color: #2a0d16; display: flex; align-items: center; justify-content: center; } .au-time { font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; } .transcript p .lt { font-size: 11px; color: var(--tx3); margin-right: 8px; font-family: var(--mono); } .transcript p.noisy { color: #c98; } .transcript p.noisy i, .tn-prev i { font-style: normal; color: var(--bad); opacity: .8; } .transcript p.pending { color: var(--tx3); } .au-clean, .au-warn { display: flex; align-items: center; gap: 8px; margin: 4px 18px 0; font-size: 13px; color: var(--good); } .au-warn { color: #e0a080; } .tuner { padding: 6px 18px; } .spec { width: 100%; height: 150px; border-radius: 14px; background: #0a0c10; display: block; } .tn-meter { height: 8px; border-radius: 4px; background: var(--s3); margin: 12px 0 6px; overflow: hidden; } .tn-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ec6a6a, #f0a53a); transition: width .1s; } .tn-meter.good i { background: var(--good); } .tn-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); margin: 16px 0 6px; } .tn-l span { display: inline-flex; gap: 6px; align-items: center; } .tn-l b { color: var(--tx); font-variant-numeric: tabular-nums; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; } input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--s3); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; margin-top: -9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); } input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--s3); } input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; } .tn-st { font-size: 13px; color: var(--tx2); margin: 14px 0 0; line-height: 1.5; } .tn-st.ok { color: var(--good); font-weight: 600; } .tn-prev { font-size: 14px; line-height: 1.55; color: var(--tx2); font-family: var(--mono); } .tn-prev p { margin: 0 0 8px; } .find { padding: 6px 16px; } .find-map { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1.2; background: #10151a; } .find-map img { width: 100%; height: 100%; object-fit: cover; } .find-ring { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(232, 138, 162, .9); background: rgba(232, 138, 162, .15); animation: fring 2.4s ease-in-out infinite; } @keyframes fring { 50% { box-shadow: 0 0 0 14px rgba(232, 138, 162, .08); } } .find-c { padding: 16px 4px; display: flex; flex-direction: column; gap: 4px; } .find-c b { font-size: 19px; } .find-c span { font-size: 13.5px; color: var(--tx2); } .find-c .find-off { color: var(--bad); margin-top: 4px; } .find-btns { display: flex; gap: 10px; } .find-btns .btn { flex: 1; } /* ---------- Mapy ---------- */ .maps { position: absolute; inset: 0; background: #0d1216; } .mp-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; } .mp-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; } .mp-layers, .mp-pins { position: absolute; inset: 0; } .mp-l { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .mp-l.pulse { animation: mpulse 2.6s ease-in-out infinite; } @keyframes mpulse { 50% { opacity: .65; } } .mp-pin { position: absolute; transform: translate(-50%, -50%) scale(var(--is, 1)); display: flex; align-items: center; gap: 5px; transform-origin: 13px 50%; } .mp-pin .mp-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #0b0e12; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .5); flex: none; } .mp-pin.small .mp-dot { width: 18px; height: 18px; } .mp-pin.small .mp-dot svg { width: 10px; height: 10px; } .mp-pin .mp-lab { font-size: 12.5px; font-weight: 650; white-space: nowrap; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; } .maps.far .mp-pin.small .mp-lab { display: none; } .mp-pin.dim { opacity: .35; } .maps.picking .mp-pin:not(.dim) .mp-dot { animation: pinp 1.4s ease-in-out infinite; } @keyframes pinp { 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 0 0 9px rgba(240, 165, 58, .35); } } .mp-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(52px + var(--safe-t)) 12px 12px; display: flex; gap: 8px; align-items: center; background: linear-gradient(rgba(5, 7, 9, .92), rgba(5, 7, 9, .6) 70%, transparent); z-index: 3; } body.mobile .mp-top { padding-top: calc(38px + var(--safe-t)); } .mp-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(30, 36, 44, .9); display: flex; align-items: center; justify-content: center; color: var(--tx); flex: none; } .mp-title { flex: 1; text-align: center; } .mp-title b { display: block; font-size: 16px; } .mp-title small { font-size: 11.5px; color: var(--tx3); } .mp-pick { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 16px; background: rgba(64, 44, 14, .95); border: 1px solid rgba(240, 165, 58, .45); font-size: 13.5px; font-weight: 600; color: var(--acc2); } .mp-pick span { flex: 1; } .mp-pick button { font-size: 13px; color: var(--tx); background: rgba(255, 255, 255, .1); padding: 6px 10px; border-radius: 10px; } .mp-card { position: absolute; left: 10px; right: 10px; bottom: calc(30px + var(--safe-b)); padding: 14px 16px 16px; border-radius: 22px; background: rgba(22, 26, 32, .97); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); z-index: 4; transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .9, .25, 1); } .mp-card.on { transform: none; } .mp-c-h { display: flex; gap: 10px; align-items: center; } .mp-c-i { width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #0b0e12; display: flex; align-items: center; justify-content: center; flex: none; } .mp-c-h b { display: block; font-size: 16px; } .mp-c-h small { font-size: 12.5px; color: var(--tx3); } .mp-c-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--s3); display: flex; align-items: center; justify-content: center; color: var(--tx2); flex: none; } .mp-card p { font-size: 13.5px; color: var(--tx2); line-height: 1.5; margin: 10px 0 12px; } .tgl { width: 46px; height: 28px; border-radius: 14px; background: var(--s4); position: relative; flex: none; transition: background .2s; } .tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; } .tgl.on { background: var(--good); } .tgl.on::after { transform: translateX(18px); } /* ---------- Śledztwo ---------- */ .case .hdr .tt h1 { color: var(--acc2); } .cs-tabs { display: flex; gap: 4px; padding: 0 10px 8px; overflow-x: auto; position: sticky; top: 0; z-index: 2; background: var(--scr); } .cs-tabs::-webkit-scrollbar { display: none; } .cs-tabs button { position: relative; flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; color: var(--tx3); font-size: 11.5px; font-weight: 600; } .cs-tabs button.on { background: var(--accd); color: var(--acc2); } .cs-n { position: absolute; top: 3px; right: 8px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--acc); color: #1b1206; font-size: 10.5px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .cs-content { padding-bottom: 20px; } .cs-ch { padding: 8px 20px 12px; } .cs-ch small { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--tx3); } .cs-ch b { font-size: 22px; font-weight: 300; letter-spacing: .03em; } .cs-goal { margin: 0 14px; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, rgba(240, 165, 58, .12), rgba(240, 165, 58, .03)); border: 1px solid rgba(240, 165, 58, .22); } .cs-goal.idle { background: var(--s1); border-color: var(--line); color: var(--tx2); } .cs-goal p { font-size: 16.5px; line-height: 1.5; margin: 8px 0 14px; } .cs-g-k { display: flex; gap: 6px; align-items: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--acc); font-weight: 700; } .cs-hints { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cs-hint { padding: 11px 13px; border-radius: 14px; background: rgba(0, 0, 0, .25); font-size: 14px; line-height: 1.5; color: var(--tx2); animation: toin .35s both; } .cs-hint b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--acc2); margin-bottom: 3px; } .cs-alert { display: flex; gap: 10px; align-items: center; margin: 12px 14px 0; padding: 13px 16px; border-radius: 16px; background: var(--s1); width: calc(100% - 28px); font-size: 14px; color: var(--acc2); font-weight: 600; text-align: left; } .cs-stats { display: flex; justify-content: space-around; margin: 22px 14px; padding: 16px; border-radius: 18px; background: var(--s1); } .cs-stats div { font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; text-align: center; } .cs-stats b { display: block; font-size: 24px; color: var(--tx); font-weight: 300; letter-spacing: 0; } .ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px; } .ev-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--s1); text-align: left; } .ev-card img, .ev-card .ev-ic { width: 100%; aspect-ratio: 1.15; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--s2); color: var(--acc); } .ev-card b { font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 7px 8px 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ev-card.fresh::after { content: "NOWY"; position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .1em; background: var(--acc); color: #1b1206; padding: 2px 6px; border-radius: 6px; } .ev-detail { padding: 0 18px; } .ev-detail > img { width: 100%; border-radius: 16px; margin-bottom: 12px; cursor: zoom-in; } .ev-detail h2 { margin: 0 0 8px; font-size: 20px; } .ev-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .ev-detail p { font-size: 15px; line-height: 1.6; color: var(--tx2); margin: 0 0 12px; } .ev-detail small { color: var(--tx3); font-size: 12px; } .pp-card { display: flex; gap: 12px; align-items: center; width: calc(100% - 28px); margin: 0 14px 8px; padding: 12px 14px; border-radius: 18px; background: var(--s1); text-align: left; position: relative; } .pp-card .rm b { display: block; font-size: 15.5px; } .pp-card .rm span { display: block; font-size: 13px; color: var(--tx2); } .pp-card .rm small { font-size: 11.5px; color: var(--tx3); } .pp-tag { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 7px; background: var(--s3); color: var(--tx2); } .pp-tag.bad { background: rgba(236, 106, 106, .18); color: var(--bad); } .pp-tag.acc { background: var(--accd); color: var(--acc2); } .pp-tag.dead { background: #222; color: #888; } .pp-detail { padding: 0 18px; } .pp-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; } .pp-top h2 { margin: 0; font-size: 21px; } .pp-top span { color: var(--tx2); font-size: 13.5px; } .pp-trust { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tx3); margin-bottom: 14px; } .pp-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; } .pp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--acc), var(--good)); background-size: 300px 100%; } .pp-facts { margin: 0; padding: 0 0 0 18px; } .pp-facts li { font-size: 14.5px; line-height: 1.55; color: var(--tx2); margin-bottom: 9px; } .pp-facts li::marker { color: var(--acc); } .tl { padding: 4px 16px 20px; } .tl-y { font-size: 26px; font-weight: 200; color: var(--acc2); margin: 16px 0 8px 4px; letter-spacing: .05em; } .tl-i { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 10px 0 10px; border-left: 2px solid var(--s3); margin-left: 4px; padding-left: 14px; position: relative; } .tl-i::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--s4); } .tl-i.key::before { background: var(--acc); box-shadow: 0 0 10px var(--acc); } .tl-d { font-size: 13px; font-weight: 650; } .tl-d small { display: block; font-weight: 500; color: var(--tx3); font-size: 12px; } .tl-b b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .tl-b span { display: block; font-size: 13px; color: var(--tx2); line-height: 1.45; margin-top: 3px; } .ded { display: flex; gap: 14px; align-items: flex-start; width: calc(100% - 28px); margin: 0 14px 10px; padding: 16px; border-radius: 20px; text-align: left; background: linear-gradient(135deg, rgba(143, 180, 196, .12), rgba(143, 180, 196, .02)); border: 1px solid rgba(143, 180, 196, .2); } .ded.solved { background: var(--s1); border-color: var(--line); } .ded-i { width: 40px; height: 40px; border-radius: 12px; background: rgba(143, 180, 196, .15); color: var(--fog); display: flex; align-items: center; justify-content: center; flex: none; } .ded.solved .ded-i { background: rgba(92, 201, 139, .15); color: var(--good); } .ded b { display: block; font-size: 15.5px; margin-bottom: 4px; } .ded span { font-size: 13.5px; color: var(--tx2); line-height: 1.5; } .ded-solve p { font-size: 14.5px; color: var(--tx2); line-height: 1.55; margin: 0 0 14px; } .ded-ppl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px; } .ded-ppl .ded-o { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: 18px; background: var(--s2); font-size: 13px; font-weight: 600; text-align: center; } .ded-ppl .ded-o .av { width: 64px; height: 64px; } .ded-opts { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; } .ded-opts .ded-o { padding: 14px 16px; border-radius: 16px; background: var(--s2); text-align: left; font-size: 14.5px; line-height: 1.45; } .ded-o:active { background: var(--s4); } .row.sel { background: var(--accd); } .row .chk { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--s4); display: flex; align-items: center; justify-content: center; color: transparent; flex: none; } .row.sel .chk { background: var(--acc); border-color: var(--acc); color: #1b1206; } .ded-fail { padding: 6px 18px; text-align: center; } .ded-fail b { display: block; font-size: 17px; margin-bottom: 8px; color: var(--bad); } /* ---------- Ciemnia ---------- */ .cm .hdr .tt h1 { color: #ff7a6a; } .cm-intro { color: var(--tx2); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; } .cm-ed { background: #120707; } .cm-ed .hdr { --hbg: #120707; } .cm-prev { position: relative; margin: 0 12px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 90, 74, .15), 0 0 60px rgba(255, 60, 40, .08); } .cm-prev img { display: block; width: 100%; transition: filter .08s; } .cm-res { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; pointer-events: none; cursor: zoom-in; } .cm-prev.done .cm-res { opacity: 1; pointer-events: auto; } .cm-ctl { padding: 10px 18px; } .cm-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tx2); margin: 6px 0 2px; } .cm-tg { padding: 8px 16px; border-radius: 12px; background: #3a1410; color: #ff9b8a; font-weight: 700; font-size: 13px; min-width: 96px; } .cm-tg.on { background: #ffcf85; color: #2a1606; } .cm-fb { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 90, 74, .08); color: #e9a89e; font-size: 13.5px; line-height: 1.45; } .cm-fb.ok { background: rgba(92, 201, 139, .12); color: var(--good); font-weight: 600; } .pth.done img { filter: none; } /* ---------- BushView ---------- */ .bv .hdr .tt h1 { color: #c6d38a; } .bv-big { margin: 0 12px 12px; border-radius: 14px; overflow: hidden; background: #000; min-height: 120px; } .bv-big img { width: 100%; display: block; cursor: zoom-in; } .bv-st { font-size: 13px; color: var(--tx2); margin: 0 0 12px; line-height: 1.45; } /* ---------- Pogoda ---------- */ .wx { background: linear-gradient(#1e2a36, #0c1117 60%); } .wx .hdr { --hbg: transparent; background: transparent; } .wx-top { text-align: center; padding: 6px 0 20px; display: flex; flex-direction: column; gap: 2px; } .wx-top small { font-size: 15px; color: var(--tx2); } .wx-t { font-size: 96px; font-weight: 200; line-height: 1; letter-spacing: -.04em; } .wx-top b { font-size: 18px; font-weight: 500; } .wx-top span { font-size: 13px; color: var(--tx2); } .wx-alert { display: flex; gap: 10px; margin: 0 14px 12px; padding: 12px 14px; border-radius: 16px; background: rgba(240, 165, 58, .12); color: var(--acc2); font-size: 13px; line-height: 1.45; } .wx-alert b { display: block; } .wx-hours { display: flex; gap: 6px; overflow-x: auto; margin: 0 14px; padding: 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, .05); } .wx-h { min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; } .wx-h small { color: var(--tx2); } /* Większy obszar dotyku pinezek mapy (małe etykiety miały 18–26 px wysokości). */ .mp-pin::after { content: ''; position: absolute; inset: -10px -4px; } /* css/web.css */ /* ===== Strony internetowe w grze ===== */ .web { font-size: 15px; line-height: 1.6; color: #1d1f22; } .web img { max-width: 100%; display: block; cursor: zoom-in; } .web a { color: inherit; } .web p { margin: 0 0 14px; } .web h1, .web h2, .web h3 { line-height: 1.25; } /* Gazeta Sudecka */ .site-gazeta { background: #f7f3ea; font-family: Georgia, "Times New Roman", serif; min-height: 100%; } .gz-h { border-bottom: 3px double #2a2420; padding: 10px 16px 0; } .gz-top { display: flex; justify-content: space-between; font: 600 10px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; color: #7a6d60; } .gz-mast { font-size: 34px; font-weight: 700; text-align: center; letter-spacing: -.01em; margin: 10px 0 6px; font-family: Georgia, serif; color: #1a1512; } .gz-nav { display: flex; gap: 14px; justify-content: center; font: 600 12px var(--font); padding: 8px 0; border-top: 1px solid #cbbfae; overflow-x: auto; } .gz-nav a { text-decoration: none; color: #7b2b21; white-space: nowrap; } .gz-m { padding: 16px 18px 30px; } .gz-sec { font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .14em; color: #7b2b21; border-bottom: 1px solid #cbbfae; padding-bottom: 5px; margin: 14px 0 10px; } .gz-card { padding: 4px 0 12px; border-bottom: 1px solid #e3dacb; margin-bottom: 10px; } .gz-card h3 { margin: 0 0 4px; font-size: 18px; } .gz-card h3 a { text-decoration: none; color: #1a1512; } .gz-card p { margin: 0 0 4px; color: #4a4038; font-size: 14px; } .gz-card small, .gz-small { color: #8a7d70; font-size: 12px; font-family: var(--font); } .gz-art h1 { font-size: 27px; margin: 6px 0 12px; color: #1a1512; } .gz-kick { font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .14em; color: #7b2b21; } .gz-lead { font-size: 17px; font-style: italic; color: #3a312a; } .gz-art figure { margin: 0 -18px 16px; } .gz-art figcaption { font: 12px var(--font); color: #7a6d60; padding: 6px 18px 0; } .gz-art .gz-por { margin: 0 auto 14px; width: 60%; } .gz-art p { font-size: 16px; line-height: 1.7; } .gz-art p:first-of-type::first-letter { float: left; font-size: 48px; line-height: .9; padding: 4px 6px 0 0; color: #7b2b21; } .gz-art .gz-lead::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; } .gz-foot { margin-top: 18px; padding: 12px 14px; background: #ede5d5; font: 13.5px/1.6 var(--font); color: #3a312a; border-left: 3px solid #7b2b21; } .gz-num { background: #ffe58a; padding: 0 3px; font-weight: 700; text-decoration: none; } .gz-rel { margin-top: 14px; font: 13px var(--font); color: #5a4f45; } .gz-rel a { color: #7b2b21; } /* Mglisko24 */ .site-m24 { background: #f2f3f5; min-height: 100%; font-family: var(--font); } .m24-h { background: #c43d2f; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; } .m24-logo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .m24-logo b { background: #fff; color: #c43d2f; padding: 0 5px; border-radius: 4px; margin-left: 2px; } .m24-w { font-size: 12px; opacity: .85; } .m24-nav { background: #9c2d22; display: flex; gap: 16px; padding: 8px 16px; font-size: 13px; font-weight: 600; } .m24-nav a { color: #fff; text-decoration: none; opacity: .9; } .m24-m { padding: 14px; } .m24-hero { display: block; position: relative; border-radius: 12px; overflow: hidden; text-decoration: none; margin-bottom: 12px; background: #000; } .m24-hero img { width: 100%; opacity: .75; } .m24-hero div { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; } .m24-hero h2 { margin: 6px 0 0; font-size: 19px; } .m24-tag { display: inline-block; background: #ffd400; color: #111; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: .06em; } .m24-row { display: block; background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } .m24-row b { display: block; font-size: 15px; line-height: 1.35; color: #1d1f22; } .m24-row small { color: #888; font-size: 12px; } .m24-ad { margin-top: 16px; padding: 12px; border: 1px dashed #bbb; border-radius: 10px; text-align: center; font-size: 12.5px; color: #666; } .m24-art h1 { font-size: 23px; margin: 8px 0 6px; } .m24-d { color: #888; font-size: 12px; display: block; margin-bottom: 12px; } .m24-art figure { margin: 0 -14px 14px; } .m24-art figcaption { font-size: 12px; color: #777; padding: 6px 14px 0; } .m24-com { background: #fff; border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 13.5px; } .m24-com > div { padding: 8px 0; border-top: 1px solid #eee; } .m24-com i { display: block; font-style: normal; font-weight: 700; font-size: 12px; color: #c43d2f; } /* Wolnopedia */ .site-wiki { background: #fff; min-height: 100%; font-family: Georgia, serif; } .wk-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #ddd; background: #f8f9fa; } .wk-h b { font-size: 20px; } .wk-h span { font-size: 12px; color: #777; font-family: var(--font); } .wk-m { padding: 14px 18px 30px; } .wk-m h1 { font-weight: 400; border-bottom: 1px solid #ccc; padding-bottom: 6px; font-size: 27px; } /* Kadr */ .site-kadr { background: #fff; min-height: 100%; font-family: var(--font); color: #111; } .kd-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; } .kd-h b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg, #c2185b, #f57c00); -webkit-background-clip: text; background-clip: text; color: transparent; } .kd-m { padding: 14px 0 30px; } .kd-p { display: flex; gap: 16px; align-items: center; padding: 0 16px; } .kd-av { width: 82px; height: 82px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f57c00, #c2185b); cursor: default; } .kd-n b { display: block; font-size: 18px; } .kd-n small { color: #777; font-size: 13px; } .kd-st { display: flex; justify-content: space-around; padding: 14px 10px 8px; font-size: 12px; color: #555; text-align: center; } .kd-st b { display: block; font-size: 16px; color: #111; } .kd-bio { padding: 0 16px 14px; font-size: 14px; color: #222; } .kd-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .kd-g a { aspect-ratio: 1; overflow: hidden; display: block; background: #eee; } .kd-g img { width: 100%; height: 100%; object-fit: cover; } .kd-t { font-size: 15px; padding: 0 16px; } .kd-list { padding: 0 8px; } .kd-li { display: flex; gap: 12px; align-items: center; padding: 10px 8px; text-decoration: none; border-bottom: 1px solid #f0f0f0; } .kd-li img { width: 46px; height: 46px; border-radius: 50%; cursor: default; } .kd-li b { display: block; font-size: 14.5px; color: #111; } .kd-li small { color: #888; font-size: 12.5px; } .kd-post { padding: 0 0 10px; } .kd-ph { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; } .kd-ph img { width: 32px; height: 32px; border-radius: 50%; } .kd-pi { width: 100%; display: block; cursor: zoom-in; } .kd-pl { padding: 10px 16px 4px; font-size: 13px; color: var(--tx2); } .kd-post p { padding: 0 16px; margin: 4px 0; font-size: 14.5px; line-height: 1.45; color: var(--tx); } .kd-pc { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); } .kd-pc p { font-size: 13.5px; color: var(--tx2); } /* Urzędy */ .site-gov { background: #f4f6f9; min-height: 100%; font-family: var(--font); } .gv-h { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #1d3d6b; color: #fff; } .gv-e { width: 40px; height: 40px; border-radius: 50%; background: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 20px; } .gv-h b { display: block; font-size: 16px; } .gv-h small { font-size: 11.5px; opacity: .8; } .gv-m { padding: 14px 16px 30px; } .gv-m h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #1d3d6b; border-bottom: 2px solid #1d3d6b; padding-bottom: 5px; margin: 20px 0 10px; } .gv-card { display: flex; gap: 14px; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .gv-por { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; flex: none; } .gv-card b { display: block; font-size: 16px; } .gv-card span { display: block; font-size: 12.5px; color: #555; margin-bottom: 6px; } .gv-card p { font-size: 13.5px; color: #333; margin: 0; } .gv-n { padding: 9px 0; border-bottom: 1px solid #dde3ea; font-size: 14px; } .gv-n small { display: block; color: #1d3d6b; font-weight: 700; font-size: 12px; } .gv-alert { background: #fff3cd; border-left: 4px solid #c8102e; padding: 10px 12px; border-radius: 4px; font-size: 14px; } .site-gov a { color: #1d4f91; } /* Forum */ .site-forum { background: #e9ece4; min-height: 100%; font-family: Verdana, Tahoma, sans-serif; font-size: 13.5px; } .fr-h { background: #4a6b3a; color: #fff; padding: 12px 14px; } .fr-h b { display: block; font-size: 16px; } .fr-h small { opacity: .8; font-size: 11px; } .fr-m { padding: 12px; } .fr-m h2 { font-size: 17px; margin: 4px 0 12px; } .fr-p { background: #fff; border: 1px solid #c8cfbf; border-radius: 4px; margin-bottom: 8px; } .fr-u { background: #dfe6d6; padding: 6px 10px; display: flex; justify-content: space-between; font-size: 12px; } .fr-u b { color: #2d4a20; } .fr-u small { color: #6a7560; } .fr-p p { padding: 9px 10px; margin: 0; line-height: 1.5; } .fr-p.mod { background: #f4f0e0; text-align: center; color: #7a6a40; font-style: italic; } /* Przewodnik */ .site-guide { background: #f3efe6; min-height: 100%; font-family: var(--font); } .gd-h { position: relative; height: 180px; overflow: hidden; background: #000; } .gd-h img { width: 100%; height: 100%; object-fit: cover; opacity: .6; cursor: default; } .gd-h div { position: absolute; left: 16px; bottom: 14px; color: #fff; } .gd-h small { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .12em; } .gd-h h1 { margin: 4px 0 0; font-size: 26px; } .gd-m { padding: 14px 16px 30px; } .gd-c { background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .gd-c > div { padding: 12px 14px 4px; } .gd-c h3 { margin: 0 0 6px; font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gd-c p { font-size: 14px; color: #3a352d; } .gd-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 10px; background: #e6dfcf; color: #5d4a2a; font-weight: 800; } .gd-t.ok { background: #d8efd9; color: #2a6b30 !important; } .gd-t.bad { background: #f7d9d6; color: #a32a1f !important; } .gd-small { font-size: 13px; } .gd-small a { color: #2e6b3a; font-weight: 600; } /* Koło łowieckie (strona z 2008) */ .site-kolo { background: #2d3a1f; min-height: 100%; font-family: "Comic Sans MS", Verdana, sans-serif; color: #eee8c8; font-size: 13px; } .kl-h { text-align: center; padding: 14px 10px; background: linear-gradient(#46602a, #2d3a1f); border-bottom: 3px ridge #8a7a40; } .kl-h b { display: block; font-size: 19px; color: #ffe27a; text-shadow: 2px 2px 0 #000; } .kl-h small { color: #c8c09a; } .kl-t { width: 100%; border-collapse: collapse; } .kl-t td { vertical-align: top; padding: 10px; } .kl-side { width: 84px; background: #3b4a28; border-right: 2px ridge #8a7a40; font-size: 11.5px; line-height: 1.8; color: #ffe27a; } .kl-t h3 { font-size: 13px; color: #ffe27a; background: #46602a; padding: 3px 6px; margin: 0 0 8px; border: 1px solid #8a7a40; } .kl-t p { line-height: 1.5; } .kl-t small { color: #ffb000; font-weight: 700; } .kl-map { border: 2px ridge #8a7a40; margin-bottom: 12px; } .kl-f { font-size: 10.5px; color: #a8a080; text-align: center; margin-top: 16px; } /* Mapa leśna, BushView */ .site-mapa, .site-bv { background: #eef2ec; min-height: 100%; font-family: var(--font); } .ml-h, .bvw-h { padding: 14px 16px; background: #2e6b3a; color: #fff; } .bvw-h { background: #3d4a1b; } .ml-h b, .bvw-h b { display: block; font-size: 18px; } .ml-h small, .bvw-h small { opacity: .8; font-size: 12px; } .ml-m, .bvw-m { padding: 14px 16px 30px; } .ml-img { border-radius: 12px; margin-bottom: 12px; } .ml-b { display: block; width: 100%; padding: 13px; margin: 8px 0; border-radius: 12px; background: #2e6b3a; color: #fff; font-weight: 700; font-size: 14px; } .bvw-m .ml-b { background: #4d5a2a; } .ml-s { font-size: 12.5px; color: #555; } .bvw-m img { border-radius: 12px; margin-bottom: 12px; } /* Kwartał (grupy sąsiedzkie) / Klipo w grze — fikcyjne marki */ .fb-h { background:#2f6fd6; color:#fff; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; font:800 20px/1 system-ui; letter-spacing:-.5px; } .fb-h span { font:500 13px system-ui; opacity:.85; } .fb-m { background:#f0f2f5; color:#050505; padding:8px; font:15px/1.38 system-ui; } .fb-g { background:#fff; padding:14px; border-radius:8px; margin-bottom:8px; } .fb-g h2 { margin:0 0 4px; font-size:19px; } .fb-g small { color:#65676b; } .fb-p { background:#fff; padding:12px 14px; border-radius:8px; margin-bottom:8px; } .fb-p > p { margin:8px 0; } .fb-a small { display:block; color:#65676b; font-size:12px; } .fb-adm { background:#e7f3ff; color:#2f6fd6; font-size:11px; padding:1px 6px; border-radius:4px; } .fb-meta { color:#65676b; font-size:12px; } .fb-c { background:#f0f2f5; border-radius:14px; padding:7px 11px; margin:8px 0 0 10px; } .fb-c p { margin:2px 0; } .fb-del { color:#65676b; } .tt-h { background:#000; color:#fff; padding:10px 14px; font:800 18px system-ui; } .tt-m { background:#121212; color:#eee; padding:12px; font:14px/1.4 system-ui; min-height:100%; } .tt-prof { display:flex; gap:12px; align-items:center; margin-bottom:14px; } .tt-prof small { display:block; color:#aaa; } .tt-prof p { margin:4px 0 0; } .tt-frame { position:relative; aspect-ratio:9/12; overflow:hidden; border-radius:10px; background:#000; } .tt-frame img { width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05); transform:scale(1.35); } .tt-frame span { position:absolute; left:8px; bottom:8px; font-weight:700; text-shadow:0 1px 3px #000; } .tt-com p { margin:6px 0; color:#ddd; } .tt-com b { color:#aaa; } /* Dokument PDF w przeglądarce (sprawa 3: historia aktywności konta) */ .site-doc { background: #e9e9ec; } .site-doc .doc { background: #fff; color: #222; margin: 12px; padding: 18px 14px; font: 13px/1.45 system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .site-doc .doc h1 { font-size: 17px; margin: 0 0 6px; } .site-doc .doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; } .site-doc .doc th, .site-doc .doc td { border-bottom: 1px solid #ddd; padding: 6px 4px; text-align: left; vertical-align: top; } .web-vid { display:block; width:100%; max-height:70vh; background:#000; border-radius:6px; } /* css/os.css */ /* ===== Wygląd systemu: iOS / Android ===== */ @media (max-width: 1000px) { .stage-side { display: none; } } /* Na telefonie poza pełnym ekranem widać systemowy pasek stanu — własny chowamy. */ body.real-status #status { display: none; } body.real-status .hdr { padding-top: calc(16px + var(--safe-t)); min-height: calc(62px + var(--safe-t)); } body.real-status #home { padding-top: calc(20px + var(--safe-t)); } body.real-status .vw-top, body.real-status .mp-top { padding-top: calc(14px + var(--safe-t)); } body.real-status #lock { padding-top: calc(50px + var(--safe-t)); } body.real-status #banners { top: calc(6px + var(--safe-t)); } /* ---------- wyszukiwarka na ekranie głównym ---------- */ .h-search { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto 14px; height: 32px; padding: 0 16px; border-radius: 16px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(40, 46, 54, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .os-android .h-search { width: 100%; height: 48px; border-radius: 24px; justify-content: flex-start; padding: 0 18px; margin: 0 0 24px; font-size: 15px; font-weight: 500; background: rgba(48, 52, 58, .85); color: rgba(255, 255, 255, .7); } /* ---------- powiadomienia ---------- */ .banner { flex-wrap: wrap; } .banner .b-app { display: none; } .os-android .banner { border-radius: 24px; background: rgba(40, 43, 48, .97); backdrop-filter: none; padding: 12px 16px 14px; } .os-android .banner .b-app { display: flex; width: 100%; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tx2); margin-bottom: 2px; } .os-android .banner .b-app span { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .os-android .banner .b-app i { font-style: normal; color: var(--tx3); } .os-android .banner .b-h span { display: none; } .os-android .banner .b-ic { border-radius: 50%; } /* ---------- ostatnie aplikacje ---------- */ .recents .rc-list { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 14px; overflow-x: auto; padding: 0 30px; animation: toin .3s both; } .recents.out { animation: fadeout .25s both; } .rc-card { flex: none; width: 200px; height: 360px; border-radius: 26px; background: var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); } .rc-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--g); display: flex; align-items: center; justify-content: center; } .rc-card b { font-size: 15px; } /* ================= ANDROID ================= */ .os-android { --font: Roboto, "Google Sans", system-ui, "Segoe UI", sans-serif; --acc: #8ab4f8; --acc2: #aecbfa; --accd: rgba(138, 180, 248, .14); --me: #2a4a7a; --me2: #335a92; } .os-android, .os-android button, .os-android input { font-family: var(--font); } .os-android #device { border-radius: 44px; } .os-android #screen { border-radius: 33px; } .os-android #island { width: 14px; height: 14px; top: 14px; border-radius: 50%; } .os-android #island::after { display: none; } .os-android #status { font-size: 13.5px; font-weight: 500; padding-left: 26px; padding-right: 22px; padding-top: calc(var(--safe-t) + 14px); } body.mobile.os-android #status { padding-top: calc(var(--safe-t) + 6px); } .os-android #homebar.nav3 { height: calc(46px + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; justify-content: space-around; align-items: center; background: transparent; } .os-android #homebar.nav3::before { display: none; } .os-android #homebar.nav3 button { width: 64px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .82); } .os-android #homebar.nav3 button:active { background: rgba(255, 255, 255, .1); } .os-android .app { padding-bottom: calc(46px + var(--safe-b)); background: var(--scr); } .os-android .app .pg { bottom: calc(46px + var(--safe-b)); } .os-android .composer { padding-bottom: 12px; } .os-android .call { padding-bottom: calc(64px + var(--safe-b)); } .os-android .app-ic .ic { border-radius: 50%; width: 58px; height: 58px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .os-android .app-ic.new .ic::after { border-radius: 50%; } .os-android .dock { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 6px; } .os-android .dock .app-ic .lb { display: none; } .os-android #home { padding-bottom: calc(56px + var(--safe-b)); } .os-android .widget .w-time { font-weight: 400; font-size: 64px; } .os-android .widget .w-wx { background: none; padding: 0; backdrop-filter: none; } .os-android .hdr { min-height: calc(92px + var(--safe-t)); padding-bottom: 8px; } .os-android .hdr .tt h1 { font-size: 21px; font-weight: 500; } .os-android .hdr .bk { color: var(--tx); } .os-android .hdr.big { flex-direction: row; padding-left: 20px; } .os-android .hdr.big .tt h1 { font-size: 24px; font-weight: 500; letter-spacing: 0; } .os-android .list { border-radius: 20px; } .os-android .btn { border-radius: 22px; font-weight: 500; } .os-android .btn.pri { background: var(--acc); color: #0b1a33; } .os-android .sheet { border-radius: 28px 28px 0 0; background: #1e2125; } .os-android .modal { border-radius: 28px; text-align: left; background: #2a2d31; } .os-android .modal .mb { justify-content: flex-end; } .os-android .modal .mb .btn { flex: none; background: none; color: var(--acc); } .os-android .seg { border-radius: 20px; } .os-android .seg button { border-radius: 18px; } .os-android .seg button.on { background: var(--accd); color: var(--acc2); box-shadow: none; } .os-android .tgl { width: 52px; height: 32px; border-radius: 16px; background: #3c4043; border: 2px solid #8e918f; } .os-android .tgl::after { width: 16px; height: 16px; left: 6px; top: 6px; background: #8e918f; } .os-android .tgl.on { background: var(--acc); border-color: var(--acc); } .os-android .tgl.on::after { transform: translateX(20px) scale(1.5); background: #0b1a33; } .os-android .composer .opt { border-radius: 20px; background: rgba(138, 180, 248, .08); border-color: rgba(138, 180, 248, .3); } .os-android .composer .send { background: var(--acc); color: #0b1a33; } .os-android .msg.them .bub { border-radius: 20px; } .os-android .msg.them.first .bub { border-top-left-radius: 20px; } .os-android .msg.me .bub { border-radius: 20px; } .os-android .msg.me.first .bub { border-top-right-radius: 20px; } .os-android .chat-hdr { background: #16181b; } .os-android .crow .cnt { background: var(--acc); color: #0b1a33; } .os-android .crow .turn { color: var(--acc2); background: var(--accd); } .os-android .toast.ev { background: linear-gradient(135deg, #1e2c44, #1b2230); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(138, 180, 248, .35); } .os-android .toast.ev .icw { color: var(--acc); } .os-android .toast { border-radius: 8px; } .os-android .mp-btn { border-radius: 16px; } .os-android .vw-top { background: linear-gradient(#000, transparent); } /* ================= NOTATKI ================= */ .notes { --nt: #ffd60a; background: #000; } .notes .hdr { --hbg: #000; background: linear-gradient(#000 70%, transparent); } .notes .hdr .tt h1, .notes .hdr .bk { color: var(--tx); } .notes .hdr .bk { color: var(--nt); } .nt-search { display: flex; align-items: center; gap: 6px; height: 36px; margin: 0 16px 6px; padding: 0 10px; border-radius: 11px; background: #1c1c1e; color: #8e8e93; font-size: 15px; } .nt-sec { font-size: 20px; font-weight: 700; padding: 16px 20px 8px; } .nt-list { margin: 0 16px; border-radius: 12px; background: #1c1c1e; overflow: hidden; } .nt-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 16px; position: relative; } .nt-row + .nt-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .08); } .nt-row:active { background: #2c2c2e; } .nt-row .nt-m { flex: 1; min-width: 0; } .nt-row b { display: block; font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-row span { display: block; font-size: 14px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .nt-row span i { font-style: normal; color: #aeaeb2; margin-right: 8px; } .nt-row.has-new b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nt); margin-left: 8px; vertical-align: middle; } .nt-th { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; } .nt-count { text-align: center; font-size: 12px; color: #8e8e93; padding: 20px; } .note .body { padding-bottom: 60px; } .nt-date { text-align: center; font-size: 13px; color: #8e8e93; margin: 0 0 10px; } .nt-title { font-size: 28px; font-weight: 700; margin: 0 20px 12px; letter-spacing: -.01em; } .nt-body { padding: 0 20px; font-size: 17px; line-height: 1.5; color: #e5e5ea; -webkit-user-select: text; user-select: text; } .nt-body p { margin: 0 0 12px; } .nt-goal { font-size: 18px; } .nt-sub { font-weight: 700; margin-top: 18px !important; color: #fff; } .nt-hint { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 6px 0; font-size: 16px; line-height: 1.5; color: #e5e5ea; } .nt-hint:not(.on) span { color: #48484a; letter-spacing: -.12em; } .nt-hint small { color: var(--nt); font-size: 12.5px; margin-top: 2px; } .nt-hint[disabled] { opacity: .5; } .nt-foot { margin-top: 26px !important; font-size: 13px; color: #8e8e93; } .nt-att { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; } .nt-a { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 10px; overflow: hidden; background: #1c1c1e; } .nt-a img { width: 100%; aspect-ratio: 1.15; object-fit: cover; } .nt-a span { font-size: 11.5px; line-height: 1.3; padding: 6px 7px 8px; color: #d1d1d6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nt-a.fresh::after, .nt-li.fresh::after { content: "nowe"; position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; background: var(--nt); color: #1c1c1e; padding: 1px 6px; border-radius: 6px; } .nt-li { position: relative; display: block; width: 100%; text-align: left; padding: 6px 0; font-size: 16px; color: #e5e5ea; } .nt-li.fresh::after { position: static; margin-left: 8px; } .nt-q { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); } .nt-cb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #636366; flex: none; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .nt-q.done .nt-cb { background: var(--nt); border-color: var(--nt); color: #1c1c1e; } .nt-q b { display: block; font-size: 17px; } .nt-q span { display: block; font-size: 14.5px; color: #8e8e93; line-height: 1.5; margin-top: 3px; } .nt-q.done b { color: #8e8e93; text-decoration: line-through; } .note .tl, .note .pp-card { margin-left: 0; margin-right: 0; } .note .nt-body .pp-card { width: 100%; margin: 0 0 8px; background: #1c1c1e; } /* Android: Notatki w stylu „Keep” */ .os-android .notes { --nt: #fdd663; background: #1b1b1f; } .os-android .notes .hdr { --hbg: #1b1b1f; background: #1b1b1f; } .os-android .nt-search { height: 48px; border-radius: 24px; background: #2b2d31; margin: 4px 16px 10px; padding: 0 18px; } .os-android .nt-sec { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: #c4c7c5; padding: 14px 22px 8px; } .os-android .nt-list { background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 14px; } .os-android .nt-row { flex-direction: column; align-items: stretch; border: 1px solid #444746; border-radius: 14px; padding: 12px 14px; } .os-android .nt-row::before { display: none; } .os-android .nt-row b { white-space: normal; font-size: 15px; font-weight: 500; } .os-android .nt-row span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 13.5px; line-height: 1.4; } .os-android .nt-row span i { display: none; } .os-android .nt-th { width: 100%; height: 90px; order: -1; margin-bottom: 8px; } .os-android .nt-date { text-align: left; margin: 0 20px 6px; } .os-android .nt-title { font-size: 24px; font-weight: 500; } /* ================= KALENDARZ, ZEGAR ================= */ .cal .hdr .tt h1 { color: #ff453a; } .os-android .cal .hdr .tt h1 { color: var(--tx); } .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 14px; text-align: center; } .cal-g b { font-size: 12px; color: var(--tx3); font-weight: 600; padding: 6px 0; } .cal-g button { height: 42px; border-radius: 50%; font-size: 16px; position: relative; } .cal-g button.today { background: #ff453a; color: #fff; font-weight: 700; } .os-android .cal-g button.today { background: var(--acc); color: #0b1a33; } .cal-g button.has::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tx3); } .clk-now { font-size: 64px; font-weight: 200; text-align: center; padding: 10px 0 24px; font-variant-numeric: tabular-nums; } /* ---------- nowa wiadomość z załącznikami (finał) ---------- */ .pkg-h { margin: 0 16px 10px; border-radius: 14px; background: var(--s2); padding: 4px 14px; font-size: 13.5px; } .pkg-h > div { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--tx); } .pkg-h > div:last-child { border-bottom: 0; } .pkg-h small { color: var(--tx3); font-size: 13px; margin-right: 4px; } .pkg-t { font-size: 13.5px; color: var(--tx2); line-height: 1.5; } .pkg-f { display: flex; gap: 12px; align-items: center; margin-top: 14px; } .pkg-f span { font-size: 13px; color: var(--tx2); white-space: nowrap; } .curtain.ending { scrollbar-width: none; } .curtain.ending::-webkit-scrollbar { display: none; } /* css/messenger.css */ /* Shared local character photographs. Layout and system colors: native-ui.css. */ .photo-av { background-image:url('../assets/people.jpg'); background-size:300% auto; background-position:var(--photo-x) var(--photo-y); background-repeat:no-repeat; } .gajda-av { background:url('../assets/gajda.jpg') center/cover; } .profile-link { text-align:left; border-radius:6px; } .contact-profile { padding:14px 26px 26px; text-align:center; } .contact-profile .av { margin:auto; width:120px; height:120px; } .contact-profile h2 { font-size:24px; margin:18px 0 6px; font-weight:600; } .profile-role { font-size:15px; } .profile-status { font-size:15px; margin:22px 0; } .profile-bio { border-top:1px solid var(--line); text-align:left; padding-top:20px; margin-top:24px; } .profile-bio p { font-size:15px; line-height:1.6; } .profile-number { display:flex; justify-content:center; gap:9px; margin-top:20px; font-size:15px; } .profile-members>p { margin:12px 24px; font-size:15px; color:var(--tx2); } .case-card { text-align:left; }.case-card>div { flex:1; min-width:0; }.case-card b,.case-card small { display:block; }.case-card[hidden] { display:none; }.case-card>.icw { transform:rotate(180deg); } .chat-search { display:block; } .chat-hdr .tt { text-align:left; }.profile-link.tt { padding:0; }.chat-hdr .tt small { display:block; } .delivery { white-space:nowrap; } .profile-life { display:flex; gap:8px; justify-content:center; margin:20px 0 4px; } .life-th { flex:1; max-width:140px; aspect-ratio:4/3; border:0; padding:0; border-radius:12px; overflow:hidden; background:#222; } .life-th img { width:100%; height:100%; object-fit:cover; display:block; } /* Wideo w czacie, znikające wiadomości, zrzut ekranu */ .bub .mvid { display: block; width: 100%; max-width: 260px; border-radius: 14px; background: #000; aspect-ratio: 9/16; object-fit: cover; } .bub.vanish { position: relative; outline: 1px dashed rgba(127,127,127,.45); } .bub .vanish-tag { display: block; font-size: 11px; opacity: .6; margin-top: 3px; } .opt.shot { border-style: dashed; } /* Przesyłanie w pobliżu */ .nearby-ov { position: absolute; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; background: rgba(0,0,0,.25); animation: nbIn .25s ease; } .nearby-ov.out { opacity: 0; transition: opacity .3s; } .nearby-card { width: min(330px, 88%); background: var(--s1, #f4f4f6); color: var(--tx, #111); backdrop-filter: blur(20px); border-radius: 22px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); text-align: center; } .nb-k { font-size: 12px; opacity: .6; text-transform: uppercase; letter-spacing: .04em; } .nb-prev { margin: 10px auto; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; background: #222; } .nb-prev img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px) brightness(.8); transform: scale(1.1); } .nb-t { font-weight: 600; font-size: 15px; } .nb-s { font-size: 12px; opacity: .65; margin-top: 4px; } .nb-btns { display: flex; gap: 10px; margin-top: 14px; } .nb-btns .btn { flex: 1; } @keyframes nbIn { from { transform: translateY(-20px); opacity: 0; } } /* Aparat w grze */ .cam-ov { position: absolute; inset: 0; z-index: 95; background: #000; color: #fff; display: flex; flex-direction: column; } .cam-ov.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: camFlash .26s ease-out forwards; } @keyframes camFlash { from { opacity: 1; } to { opacity: 0; } } .cam-top { display: flex; align-items: center; gap: 10px; padding: 50px 14px 8px; } .cam-x { background: none; border: 0; color: #fff; font-size: 20px; } .cam-tabs { display: flex; gap: 6px; margin: 0 auto; } .cam-tab { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 14px; padding: 6px 12px; font-size: 13px; } .cam-tab.on { background: #ffd60a; color: #000; } .cam-view { flex: 1; margin: 6px 10px; border-radius: 10px; overflow: hidden; background: #111; position: relative; } .cam-view img { width: 100%; height: 100%; object-fit: cover; } .cam-view::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#fff3,#fff3) 33.3% 0/1px 100% no-repeat, linear-gradient(#fff3,#fff3) 66.6% 0/1px 100% no-repeat, linear-gradient(#fff3,#fff3) 0 33.3%/100% 1px no-repeat, linear-gradient(#fff3,#fff3) 0 66.6%/100% 1px no-repeat; pointer-events: none; } .cam-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; } .cam-chip { flex: 0 0 auto; width: 104px; background: rgba(255,255,255,.08); border: 2px solid transparent; border-radius: 10px; color: #fff; padding: 4px; font-size: 11px; text-align: left; } .cam-chip.on { border-color: #ffd60a; } .cam-chip img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 3px; } .cam-bottom { display: flex; justify-content: center; padding: 10px 0 34px; } .cam-shutter { width: 70px; height: 70px; border-radius: 50%; border: 5px solid #fff; background: #fff; box-shadow: inset 0 0 0 3px #000; } /* Skórka „Gadka” — czat znajomych w stylu popularnego komunikatora (bez logotypów). */ .chat.skin-gadka { --me: #3478f6; --me2: #a24bf0; } .chat.skin-gadka .msg.me .bub { background: linear-gradient(160deg, #a24bf0, #3478f6 70%); color: #fff; } .chat.skin-gadka .msg.them .bub { background: var(--them); border-radius: 18px; } .chat.skin-gadka .chat-hdr h1 { font-weight: 700; } .snap-bub { padding: 3px !important; } .snap-tile { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid rgba(160, 75, 240, .55); border-radius: 14px; background: rgba(160, 75, 240, .12); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 200px; } .snap-tile b { display: block; font-size: 14px; } .snap-tile small { opacity: .7; font-size: 12px; } .snap-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #a24bf0; color: #fff; font-size: 13px; flex: none; } .snap-tile.opened { border-color: rgba(127,127,127,.4); background: transparent; cursor: default; } .snap-tile.opened .snap-ic { background: transparent; border: 2px solid rgba(127,127,127,.6); color: transparent; } .snap-ov { position: fixed; inset: 0; z-index: 9000; background: #000; display: flex; align-items: center; justify-content: center; } .snap-video { width: 100%; height: 100%; object-fit: cover; } .snap-bar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; z-index: 1; } .snap-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); } .snap-meta { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); left: 14px; color: #fff; font-size: 13px; text-shadow: 0 1px 3px #000; z-index: 1; } /* css/conversations.css */ /* Prywatne rozmowy: ten sam telefon, spokojniejszy rytm. */ .side-entry { display:block; width:calc(100% - 40px); margin:-6px 20px 18px; padding:12px 0; min-height:44px; border-bottom:1px solid var(--line); color:var(--acc2); text-align:left; font-size:12px; } .side-entry[hidden] { display:none; } .side-profile-link { margin-top:22px; } .side-intro { margin:2px 22px 22px; font-size:13px; line-height:1.75; color:var(--tx2); } .side-empty { margin:22px; color:var(--tx2); line-height:1.7; } .side-lead { display:flex; width:100%; gap:14px; align-items:flex-start; padding:20px 22px; text-align:left; border-top:1px solid var(--line); } .side-lead .av { width:48px; height:48px; flex-shrink:0; } .side-lead > div { flex:1; min-width:0; } .side-lead small { display:block; color:var(--acc); font:10px var(--mono); line-height:1.5; } .side-lead b { display:block; font-size:15px; font-weight:550; margin:6px 0; } .side-lead div > span { color:var(--tx2); font-size:12px; line-height:1.65; display:block; } .side-lead > .icw { transform:rotate(180deg); margin-top:17px; color:var(--tx3); } .side-sheet { max-height:92%; } .side-person { display:flex; gap:13px; align-items:center; padding:6px 0 22px; border-bottom:1px solid var(--line); margin-bottom:20px; } .side-person .av { width:54px; height:54px; } .side-person b { display:block; font-weight:550; font-size:15px; } .side-person div > span { display:block; color:var(--tx2); font-size:11px; line-height:1.6; margin-top:5px; } .side-dialogue { padding:0 20px 22px; } .side-message { background:var(--them); max-width:91%; border-radius:3px 10px 10px 10px; padding:11px 13px; margin:10px auto 10px 0; } .side-message.mine { background:var(--me); margin-left:auto; margin-right:0; border-radius:10px 3px 10px 10px; } .side-message small { color:var(--acc2); font-size:10px; } .side-message p { font-size:14px; line-height:1.7; margin:4px 0 0; overflow-wrap:anywhere; } .side-actions { margin-top:22px; display:flex; flex-direction:column; gap:9px; } .side-label { font:9px var(--mono); letter-spacing:.13em; color:var(--tx2); } .side-choice { display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:48px; padding:13px; background:#a9c8a209; border:1px solid #8daa7950; border-radius:6px; text-align:left; font-size:13px; line-height:1.6; } .side-choice .icw { flex-shrink:0; color:var(--acc); } .side-choice:hover { background:#a9c8a220; } .side-typing, .side-complete { font-size:12px; line-height:1.65; color:var(--tx2); margin:0 0 6px; } .side-typing { color:var(--acc); } .side-attachments { display:flex; flex-direction:column; gap:3px; margin-top:7px; } .side-attachments button { display:flex; align-items:center; gap:9px; min-height:44px; border-bottom:1px solid var(--line); color:var(--acc2); font-size:12px; text-align:left; line-height:1.5; } .side-choice small { display:block; font-size:13px; line-height:1.45; margin-top:7px; color:var(--tx2); } .note-history { padding:0 18px 22px; } .note-version { border-top:1px solid var(--line); padding:18px 0; } .note-version h4 { margin:0 0 12px; font-size:15px; font-weight:600; color:var(--tx); line-height:1.45; } .note-version .paper { margin:0 0 16px; padding:18px; font-size:17px; line-height:1.55; overflow-wrap:anywhere; } .note-history>.pad { padding:16px 0 0; } .voice-msg { min-width:210px; } .voice-row { display:flex; align-items:center; gap:9px; } .voice-play { width:34px; height:34px; border-radius:50%; border:0; background:var(--accent,#3478f6); color:#fff; font-size:13px; flex:none; } .voice-wave { display:flex; align-items:center; gap:2px; flex:1; height:22px; } .voice-wave i { display:block; width:3px; border-radius:2px; background:currentColor; opacity:.55; } .voice-from { display:block; margin-top:4px; opacity:.7; } .voice-tr { margin:8px 0 0; font-size:15px; opacity:.9; font-style:italic; } /* css/native-ui.css */ /* Phone interface. Semantic system colors; local system type, no downloaded fonts. */ body { --font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Consolas,monospace; --hand:"Segoe Print",cursive; --scr:#fff; --s1:#f2f2f7; --s2:#e5e5ea; --s3:#e5e5ea; --s4:#fff; --tx:#000; --tx2:#636366; --tx3:#6c6c70; --acc:#007aff; --acc2:#0066d6; --accd:#007aff12; --line:#3c3c432e; --line2:#3c3c4340; --good:#248a3d; --bad:#ff3b30; --me:#007aff; --me2:#007aff; --them:#e9e9eb; --bar:#f9f9f9ed; --grouped:#f2f2f7; --chrome-top:max(44px,var(--safe-t)); font-family:var(--font); font-size:17px; color:var(--tx); letter-spacing:-.022em; color-scheme:light; } body.dark-ui { --scr:#000; --s1:#1c1c1e; --s2:#2c2c2e; --s3:#3a3a3c; --s4:#48484a; --tx:#fff; --tx2:#aeaeb2; --tx3:#98989d; --acc:#0a84ff; --acc2:#409cff; --accd:#0a84ff22; --line:#545458a6; --line2:#545458b3; --them:#262628; --bar:#1c1c1ef0; --grouped:#000; --good:#30d158; color-scheme:dark; } body.os-android { --font:Roboto,"Noto Sans",system-ui,"Segoe UI",sans-serif; --acc:#1a73e8; --acc2:#185abc; --me:#d3e3fd; --me2:#d3e3fd; --them:#f0f4f8; --bar:#f7f9fc; --grouped:#f0f4f8; letter-spacing:0; } body.os-android.dark-ui { --acc:#a8c7fa; --acc2:#d3e3fd; --me:#004a77; --me2:#004a77; --them:#30343b; --bar:#1b1b1f; --grouped:#121316; } button,input,textarea { font-family:var(--font); letter-spacing:inherit; } button { touch-action:manipulation; } button:focus-visible,input:focus-visible { outline:2px solid var(--acc); outline-offset:3px; } #stage { background:#191c21; } #stage::after { display:none; } .stage-side { color:#aeb3bb; max-width:260px; bottom:45px; left:40px; top:auto; } .stage-side b { color:#fff; letter-spacing:.15em; font-size:19px; margin:12px 0; } .stage-side p { color:#f1f2f4; font-size:21px; line-height:1.4; font-weight:400; } .stage-side small { color:#aeb3bb; font-size:13px; line-height:1.6; } .stage-kicker { font:11px var(--font); color:#aeb3bb; letter-spacing:.08em; } .stage-save { font-size:12px; margin-top:18px; } #device,body.os-android #device { width:390px; height:844px; padding:8px; border-radius:48px; background:#151518; box-shadow:0 0 0 1px #58585c,0 20px 80px #0008; } #screen,body.os-android #screen { border-radius:40px; } #island { display:block; width:104px; height:29px; top:10px; } body.os-android #island { width:12px; height:12px; top:15px; } #device::before { display:none; } body.mobile #device { width:100vw; height:100dvh; padding:0; border-radius:0; box-shadow:none; } body.mobile #screen { border-radius:0; } body.mobile #island { display:none; } body.mobile.keyboard-open #device { height:calc(100dvh - var(--keyboard-inset,0px)); } body.keyboard-open #homebar { display:none; } #status,body.os-android #status { height:calc(48px + var(--safe-t)); padding:calc(14px + var(--safe-t)) 24px 0; font-size:15px; color:var(--tx); font-weight:600; text-shadow:none; } body.mobile #status { padding:14px 22px 0; height:var(--chrome-top); } body:has(#home:not(.behind)) #status,body:has(#lock) #status,body:has(.call) #status,body:has(.viewer) #status,body:has(.title-scr) #status { color:#fff; } #homebar::before { width:134px; height:5px; background:var(--tx); } body:has(#home:not(.behind)) #homebar::before,body:has(#lock) #homebar::before,body:has(.call) #homebar::before,body:has(.viewer) #homebar::before,body:has(.title-scr) #homebar::before { background:#fff; } body.native-app #island { display:none; } .hdr,body.os-android .hdr { padding:calc(var(--chrome-top) + 4px) 12px 10px; min-height:calc(var(--chrome-top) + 52px); background:var(--bar); border-bottom:1px solid var(--line); } .hdr .tt h1,body.os-android .hdr .tt h1 { color:var(--tx); font-size:17px; font-weight:600; letter-spacing:-.02em; } .hdr .tt small { color:var(--tx2); font-family:var(--font); letter-spacing:0; } .hdr.big,body.os-android .hdr.big { padding:calc(var(--chrome-top) + 13px) 20px 12px; flex-direction:row; align-items:flex-end; } .hdr.big .tt { display:block; padding:0; } .hdr.big .tt h1,body.os-android .hdr.big .tt h1 { font-size:34px; font-weight:700; letter-spacing:-.035em; } .hdr.big .tt small { display:none; } .hdr.big .rt { align-self:flex-start; } .hdr .bk,.hdr .rt button { color:var(--acc); min-width:44px; min-height:44px; } body.real-status .hdr,body.real-status .hdr.big { padding-top:calc(16px + var(--safe-t)); min-height:calc(64px + var(--safe-t)); } body.real-status .chat-hdr { padding-top:calc(10px + var(--safe-t)); } .body { padding-bottom:calc(40px + var(--safe-b)); } .sec-t { color:var(--tx2); font:13px var(--font); text-transform:uppercase; letter-spacing:0; } .list { border-radius:12px; background:var(--s1); } .row { min-height:50px; padding:12px 16px; } .row .rm b { color:var(--tx); font-size:17px; font-weight:400; } .row .rm span { font-size:14px; color:var(--tx2); } .row .rm .bad { color:var(--bad); } .btn,body.os-android .btn { border-radius:12px; font-size:17px; min-height:44px; } .btn.pri,body.os-android .btn.pri { color:#fff; background:var(--acc); } body.os-android.dark-ui .btn.pri { color:#102443; } .field { border-radius:10px; font-size:17px; background:var(--s1); border:1px solid var(--line); } .seg { background:var(--s2); border-radius:9px; } .seg button { font-size:13px; color:var(--tx); font-weight:500; border-radius:7px; min-height:32px; } .seg button.on { background:var(--s4); color:var(--tx); box-shadow:0 2px 5px #0002; } .tgl,.os-android .tgl { background:#78788052; border:0; } .tgl.on,.os-android .tgl.on { background:#34c759; } .sheet,.os-android .sheet { background:var(--scr); color:var(--tx); border-radius:24px 24px 0 0; } .sh-h { border-bottom:1px solid var(--line); }.sh-h h3 { font-size:17px; letter-spacing:-.02em; }.sh-h button { color:var(--tx2); } .modal,.os-android .modal { background:var(--bar); color:var(--tx); border-radius:14px; backdrop-filter:blur(20px); } .modal .mb .btn,.os-android .modal .mb .btn { background:transparent; color:var(--acc); } .banner,.os-android .banner { color:var(--tx); background:var(--bar); border:1px solid var(--line); border-radius:22px; box-shadow:0 4px 20px #0002; } .banner .b-h b { color:var(--tx); }.banner .b-t { color:var(--tx2); } .toast,.os-android .toast { background:var(--s1); color:var(--tx); border:1px solid var(--line); box-shadow:0 2px 15px #0002; border-radius:18px; font-size:13px; } #home,body.os-android #home { display:flex; flex-direction:column; gap:0; padding:calc(var(--chrome-top) + 18px) 20px calc(30px + var(--safe-b)); background-size:cover; background-position:center; overflow-y:auto; } body.real-status #home { padding-top:calc(24px + var(--safe-t)); } .home-widgets { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 3px 25px; } .home-weather,.home-note { height:150px; padding:16px; border-radius:22px; text-align:left; overflow:hidden; letter-spacing:-.02em; } .home-weather { color:#fff; background:linear-gradient(#36516b,#5d7689); display:flex; flex-direction:column; } .home-weather b { font-size:16px; font-weight:500; }.home-degrees { font-size:42px; font-weight:300; line-height:1.1; }.home-weather>span:last-of-type { font-size:13px; margin-top:auto; }.home-weather small { font-size:11px; opacity:.8; margin-top:4px; } .home-note { color:#111; background:#fffef8; }.home-note small { font-size:10px; font-weight:700; color:#8e6200; }.home-note b { display:block; font-size:16px; margin:7px 0; }.home-note p { font-size:13px; line-height:1.35; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .home-apps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 7px; align-content:start; flex:1; } .app-ic { min-width:0; min-height:80px; animation:none; gap:6px; }.app-ic .ic,.os-android .app-ic .ic { width:58px; height:58px; border-radius:14px; box-shadow:0 1px 3px #0002; }.app-ic .ic svg { width:44px; height:44px; filter:none; }.app-ic .lb { font-size:11px; font-weight:400; color:#fff; letter-spacing:0; }.app-ic.new .ic::after { display:none; } .badge { background:#ff3b30; box-shadow:none; font-size:13px; font-weight:400; } .home-search { color:#fff; background:#ffffff26; align-self:center; border-radius:20px; display:flex; align-items:center; justify-content:center; gap:6px; min-height:30px; padding:0 12px; font-size:12px; margin:18px 0 15px; backdrop-filter:blur(15px); } .dock,.os-android .dock { flex:none; border-radius:29px; min-height:86px; padding:14px 7px 10px; background:#ffffff30; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }.dock .app-ic { min-height:58px; } .spotlight { padding:0 16px 20px; }.spotlight .field { margin-bottom:16px; }.spotlight-results { margin:0; }.spotlight-results>.row>.icw { transform:rotate(180deg); } .conversation-list { background:var(--scr); }.conversation-list .hdr { border:0; background:var(--scr); } .chat-search { height:36px; margin:2px 16px 14px; width:calc(100% - 32px); background:var(--s1); border:0; border-radius:10px; color:var(--tx); font-size:17px; padding:0 12px; }.chat-search::placeholder { color:var(--tx3); } .chat-filters { display:flex; gap:0; background:var(--s1); border-radius:9px; margin:0 16px 12px; padding:3px; border:0; }.chat-filters button { min-height:32px; flex:1; font-size:13px; border:0; border-radius:7px; color:var(--tx2); }.chat-filters .on { color:var(--tx); background:var(--s4); box-shadow:0 1px 4px #0002; } .case-card { border:0; padding:8px 0 12px; margin:0 20px; width:auto; background:none; display:flex; gap:12px; }.case-card .av { width:50px; height:50px; border-radius:50%; }.case-card small { color:var(--tx3); font:11px var(--font); letter-spacing:0; }.case-card b { color:var(--tx); font-size:17px; margin:2px 0; }.case-card div>span { font-size:13px; color:var(--tx2); }.case-card>.icw { color:var(--tx3); } .side-entry { color:var(--acc); margin:0 20px 12px; padding:10px 0; font-size:15px; min-height:44px; } .crow { gap:13px; padding:8px 16px 0; }.crow .av { width:52px; height:52px; }.crow .cm { border-bottom:1px solid var(--line); padding:10px 0 14px; }.crow .ct b { font-size:17px; color:var(--tx); font-weight:600; }.crow .ct span { font-size:13px; color:var(--tx3); }.crow .pv { font-size:15px; color:var(--tx2); font-weight:400; }.crow .cp { margin-top:4px; }.crow.unread .ct b { color:var(--tx); }.crow.unread .pv { color:var(--tx2); font-weight:400; }.crow .cnt,.os-android .crow .cnt { color:#fff; background:var(--acc); font-size:12px; } .chat-hdr,body.os-android .chat-hdr { position:relative; padding:calc(var(--chrome-top) + 3px) 12px 8px; min-height:calc(var(--chrome-top) + 69px); gap:10px; background:var(--bar); border-bottom:1px solid var(--line); } .chat-hdr .av { width:40px; height:40px; }.chat-hdr .tt h1,.os-android .chat-hdr .tt h1 { font-size:15px; font-weight:600; }.chat-hdr .tt small { color:var(--tx2); font-size:11px; }.chat-hdr .tt small.typ { color:var(--tx2); } body.os-ios .chat-hdr { min-height:calc(var(--chrome-top) + 71px); align-items:center; } body.os-ios .chat-hdr>button.profile-link:not(.tt) { position:absolute; left:50%; top:var(--chrome-top); transform:translateX(-50%); } body.os-ios .chat-hdr .av { width:36px; height:36px; } body.os-ios .chat-hdr .tt { position:absolute; top:calc(var(--chrome-top) + 41px); left:55px; right:55px; text-align:center; } body.os-ios .chat-hdr .tt h1 { font-size:12px; font-weight:400; } body.os-ios .chat-hdr .tt small { display:none; }body.os-ios .chat-hdr .tt small.typ { display:block; font-size:10px; margin:1px 0; } body.os-ios .chat-hdr .rt { margin-left:auto; } body.os-ios.real-status .chat-hdr { min-height:calc(95px + var(--safe-t)); } body.os-ios.real-status .chat-hdr>button.profile-link:not(.tt) { top:calc(18px + var(--safe-t)); }body.os-ios.real-status .chat-hdr .tt { top:calc(60px + var(--safe-t)); } .chat-body { background:var(--scr); padding:12px 12px 24px; }.msg { max-width:84%; }.msg.first { margin-top:9px; } .bub,.msg.them .bub,.os-android .msg.them .bub,.os-android .msg.them.first .bub { background:var(--them); color:var(--tx); border-radius:18px; padding:9px 13px 8px; font-size:17px; line-height:1.35; box-shadow:none; } .msg.me .bub,.os-android .msg.me .bub,.os-android .msg.me.first .bub { background:var(--me); color:#fff; border-radius:18px; } body.os-android:not(.dark-ui) .msg.me .bub { color:#102443; } .bub .tm { display:block; float:none; text-align:right; font-size:10px; margin:3px 0 -2px; opacity:.7; color:inherit; }.delivery { color:inherit; }.sep { font:12px var(--font); letter-spacing:0; color:var(--tx2); margin:14px 0 10px; }.sysmsg { color:var(--tx2); background:none; font-size:12px; } body.os-ios .bub .tm { visibility:hidden; height:0; margin:0; } body.os-ios .delivery { position:absolute; top:calc(100% + 3px); right:3px; visibility:visible; color:var(--tx2); font-size:11px; font-weight:400; } body.os-ios .msg.me:has(.delivery) { margin-bottom:15px; } body.os-android .delivery::before { content:' · '; } .composer,.os-android .composer { background:var(--bar); padding:10px 12px calc(31px + var(--safe-b)); border-top:1px solid var(--line); }.composer .idle { background:var(--scr); border:1px solid var(--line2); border-radius:22px; min-height:42px; color:var(--tx3); font-size:15px; }.composer .send { color:#fff; }.composer.choices { max-height:48%; gap:8px; }.reply-label { color:var(--tx2); font:12px var(--font); letter-spacing:0; margin:0 4px; } .composer .opt,.os-android .composer .opt { background:var(--scr); color:var(--tx); border:1px solid var(--line); border-radius:18px; padding:12px 14px; min-height:48px; font-size:16px; line-height:1.35; }.composer .opt .icw { color:var(--acc); }.composer .opt:hover,.os-android .composer .opt:hover { background:var(--s1); border-color:var(--line2); } .contact-profile { color:var(--tx); }.contact-profile .profile-role,.profile-bio p,.profile-number { color:var(--tx2); }.profile-bio small { font:12px var(--font); letter-spacing:0; }.profile-status { color:var(--tx2); } .side-person div>span,.side-intro,.side-complete { color:var(--tx2); }.side-person { border-color:var(--line); }.side-lead { border-color:var(--line); }.side-lead small { color:var(--tx2); font:12px var(--font); }.side-lead b { color:var(--tx); font-size:17px; }.side-lead div>span { color:var(--tx2); font-size:14px; } .side-message { background:var(--them); border-radius:18px; }.side-message small { color:var(--tx2); }.side-message p { color:var(--tx); font-size:17px; line-height:1.4; }.side-message.mine { background:var(--me); border-radius:18px; }.side-message.mine p,.side-message.mine small { color:#fff; }body.os-android:not(.dark-ui) .side-message.mine p,body.os-android:not(.dark-ui) .side-message.mine small { color:#102443; } .side-choice { background:var(--s1); border-color:var(--line); color:var(--tx); border-radius:16px; font-size:16px; }.side-choice:hover { background:var(--s2); }.side-label { font:12px var(--font); letter-spacing:0; color:var(--tx2); }.side-attachments button { color:var(--acc); }.side-typing { color:var(--tx2); } .notes,.notes .hdr { background:var(--scr); --nt:#af7a00; }.dark-ui .notes { --nt:#ffd60a; }.notes .hdr .tt h1 { color:var(--tx); }.notes .hdr .bk { color:var(--nt); }.nt-list,.nt-search { background:var(--s1); }.nt-row b,.nt-title,.nt-body,.nt-sub { color:var(--tx); }.nt-row span,.nt-search,.nt-date,.nt-count { color:var(--tx2); }.nt-row span i { color:var(--tx2); }.nt-row:active { background:var(--s2); }.nt-row+.nt-row::before { background:var(--line); }.nt-hint { color:var(--tx); }.nt-hint:not(.on) span { color:var(--tx3); }.nt-hint small { color:var(--nt); } .nt-search { width:calc(100% - 32px); border:0; display:block; outline-offset:2px; } .app-settings { background:var(--grouped); }.app-settings .pg,.app-settings .hdr { background:var(--grouped); }.app-settings .list { background:var(--scr); } .ph-content .list { background:var(--scr); }.ph-key { color:var(--tx); }.ph-call { color:#fff; background:#34c759; } .phone-tabs { flex:none; display:flex; padding:8px 12px calc(24px + var(--safe-b)); border-top:1px solid var(--line); background:var(--bar); }.phone-tabs button { flex:1; display:flex; align-items:center; flex-direction:column; gap:5px; min-height:44px; color:var(--tx2); font-size:10px; }.phone-tabs .on { color:var(--acc); }.kp-k { color:var(--tx); }.os-android .phone-tabs { padding-bottom:8px; } .br-home { background:var(--grouped); }.br-logo { color:var(--tx); }.br-logo b { color:var(--acc); }.sb { background:var(--s1); }.sb-in { color:var(--tx); }.res-t { color:var(--acc); }.res-s { color:var(--tx2); } .viewer { color:#fff; }.viewer .vw-top h1 { color:#fff; }.call { color:#fff; background:linear-gradient(#445260,#19232f); }.call h2 { color:#fff; }.call .c-s { color:#ffffffb3; }.call .cl { color:#fff; }.call .c-btn.acc { background:#30d158; }.call .c-btn.dec { background:#ff453a; } .vw-top,.mp-top { padding-top:calc(var(--chrome-top) + 4px); } .chat.glitchy::before { display:none; }.chat.glitchy .chat-body { background:var(--scr); }.chat.glitchy .msg.them .bub { font-family:var(--font); color:var(--tx); text-shadow:none; border:0; background:var(--them); letter-spacing:inherit; font-size:17px; }.chat.glitchy .chat-hdr h1 { font-family:var(--font); letter-spacing:inherit; } .setup { background:var(--scr); color:var(--tx); }.setup h2 { font-size:28px; font-weight:700; }.setup p { color:var(--tx2); }.su-o { color:var(--tx); border-color:var(--line2); }.su-o.on { color:var(--acc); border-color:var(--acc); background:var(--accd); } .title-scr,.title-scr .btn { color:#fff; }.title-scr .btn.pri { background:#fff; color:#101114; }.title-scr .btn.ghost { border-color:#ffffff60; }.ts-k,.ts-n,.ts-w { color:#ffffffb3; }.ts-s { color:#fff; }.ts-c { text-align:center; background:linear-gradient(transparent,#000a); }.ts-t { font-family:var(--font); letter-spacing:.1em; font-weight:600; } .ts-bg { background-image:url('../assets/forest.jpg')!important; background-position:center; }.ts-s { font-style:normal; } .curtain { color:#fff; --tx:#fff; --tx2:#b9bec4; --tx3:#959ca5; --acc:#fff; }.curtain .btn.pri { background:#fff; color:#111; }#lock { color:#fff; } .os-android .app { padding-bottom:calc(46px + var(--safe-b)); }.os-android .composer { padding-bottom:12px; }.os-android .app-ic .ic { border-radius:50%; } @media(max-width:360px) { #home { padding-left:14px; padding-right:14px; }.home-widgets { gap:10px; }.home-weather,.home-note { padding:13px; height:145px; }.home-apps { gap:15px 5px; }.app-ic .ic { width:54px; height:54px; }.case-card div>span { font-size:12px; } } @media(max-width:1000px) { .stage-side { display:none; } } @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; transition-duration:.001ms!important; } } /* Notatki z kopii używają tego samego kroju i powierzchni co telefon. */ .paper { background:var(--s1); color:var(--tx); font:17px/1.55 var(--font); border:0; border-radius:12px; box-shadow:none; padding:20px; } .paper b { color:var(--tx); } .note-history .nb-hint { color:var(--tx2); padding:12px 0; text-align:left; line-height:1.5; } /* Secondary text is still reading text: no faint microtype for a crucial clue. */ body { --tx2:#505057; --tx3:#606067; } body.dark-ui { --tx2:#c4c4c8; --tx3:#b4b4b9; } body.os-android #homebar.nav3 button { color:var(--tx); } body.os-android:has(#home:not(.behind)) #homebar.nav3 button,body.os-android:has(#lock) #homebar.nav3 button, body.os-android:has(.call) #homebar.nav3 button,body.os-android:has(.viewer) #homebar.nav3 button, body.os-android:has(.title-scr) #homebar.nav3 button,body.os-android:has(.app-weather) #homebar.nav3 button { color:#fff; } body:has(.app-weather) #homebar::before { background:#fff; } .hdr .tt small,.row .rm span,.side-person div>span,.side-intro,.side-complete,.side-typing, .side-lead small,.side-label,.side-message small,.side-choice small,.side-attachments button, .nb-hint,.nb-sub,.nb-dev span,.nb-dev-st,.nb-bk,.nb-bar-l,.nb-tile small,.nb-alb small, .nb-note-s,.loc-t small,.loc-b span,.mail-h span,.mail-h small,.exif .rm span, .transcript p .lt,.bv-st,.cm-intro,.tn-l,.tn-st,.ev-detail small,.pp-card .rm small, .pp-trust,.tl-d small,.tl-b span,body .wallpaper-card>small,body .season-meta,body .season-pacing, body .season-kicker,body .season-episodes small,body .episode-num,.case-card small,.case-card div>span, .profile-bio small,.banner .b-app,.banner .b-t,.nt-date,.nt-count,.nt-hint small { font-size:14px; line-height:1.45; } .side-intro,.side-complete,.side-person div>span,.side-lead div>span,.side-attachments button, .res-s,.nt-row span,.ded span,.ded-solve p,.ded-opts .ded-o,.cm-intro,.mail-b, .transcript p,.ev-detail p,.pp-facts li,body .season-recap p,body .season-recap li { font-size:16px; line-height:1.5; } .side-message small,.side-person div>span,.nt-row span,.nt-date,.nt-hint:not(.on) span, .case-card small,.crow .ct span,.res-n,.nb-hint,.nb-bar-l,.nb-tile small,.exif .rm span, .tl-d small,.transcript p .lt,.ev-detail small { color:var(--tx2); opacity:1; } .side-attachments button,.side-choice { min-height:48px; } .side-message { padding:12px 15px; }.side-message small { display:block; margin-bottom:4px; } .sysmsg,.sep,.reply-label { font-size:14px; line-height:1.45; } .composer .idle { color:var(--tx2); }.composer .opt { font-size:17px; } .phone-tabs button { font-size:12px; }.chat-filters button,.seg button { font-size:14px; } .toast { font-size:15px; line-height:1.4; }.case-card div>span { font-size:15px; } .lbl,.sec-t,.row .rx,.su-o small,.setup .su-f,.ts-n,.ts-w,.curtain .cu-s { font-size:14px; line-height:1.5; } .banner .b-h { font-size:16px; }.banner .b-h span { font-size:14px; }.pill { font-size:13px; } .bub .tm { font-size:12px; opacity:1; }body.os-ios .delivery { font-size:12px; } body.os-ios .chat-hdr .tt h1 { font-size:14px; } body.os-ios .chat-hdr .tt small.typ { font-size:12px; } .app-ic .lb { font-size:12px; }.home-search { font-size:14px; min-height:34px; } .home-weather small { font-size:13px; opacity:1; }.home-note small { font-size:12px; } .home-weather>span:last-of-type { font-size:14px; }.home-note p { font-size:14px; } .cm-ed,.cm-ed .hdr { background:var(--scr); } .wx { --tx:#fff; --tx2:#e4edf5; --tx3:#d8e3ee; --s1:#ffffff17; --bar:transparent; --acc:#fff; --acc2:#fff; --line:#ffffff38; color:#fff; background:linear-gradient(#38536c,#192b3c); } .wx .hdr { border:0; }.wx-top span,.wx-h small { font-size:15px; } .wx-alert { color:#fff; background:#ffffff17; font-size:15px; }.wx-hours { background:#ffffff17; } .wx .row .rm b { color:#fff; }.wx .row .rx { color:var(--tx2); } .wx .body>p { color:var(--tx2)!important; font-size:14px!important; line-height:1.5; } /* Fictional web pages keep their own light paper even when the phone is dark. */ .web { --tx:#1d1f22; --tx2:#505057; --tx3:#606067; } .gz-top,.gz-card small,.gz-small,.gz-art figcaption { color:#62564a; font-size:14px; } .gz-nav,.gz-sec,.gz-kick,.gz-rel { font-size:14px; letter-spacing:0; } .m24-row small,.m24-d,.m24-art figcaption,.kd-n small,.kd-li small,.wk-h span { color:#55585f; font-size:14px; } .m24-com,.kd-post p,.kd-pc p { font-size:16px; }.m24-w,.m24-tag,.m24-com i,.kd-st,.kd-pl,.gv-h small { font-size:14px; } /* Calendar: a normal personal calendar, with local editable appointments. */ .cal .hdr .tt h1 { color:var(--tx); } .cal-month-nav { display:flex; align-items:center; gap:8px; padding:4px 14px 8px; } .cal-month-nav h2 { flex:1; text-align:center; font-size:21px; font-weight:600; margin:0; letter-spacing:-.02em; } .cal-month-nav button { width:44px; height:44px; flex:none; color:var(--acc); display:grid; place-items:center; } .cal-next { transform:rotate(180deg); } .cal-g { gap:2px; padding:0 13px; } .cal-g b { font-size:14px; font-weight:500; color:var(--tx2); text-transform:uppercase; } .cal-g button { min-height:44px; height:44px; border-radius:50%; font-size:17px; } .cal-g button.selected:not(.today) { background:var(--tx); color:var(--scr); } .cal-g button.today { background:transparent; color:#c62c26; font-weight:700; } .cal-g button.today.selected { background:#d72d26; color:#fff; } .cal-g button.has::after { background:currentColor; width:4px; height:4px; bottom:3px; margin-left:-2px; } .cal-toolbar { display:flex; align-items:center; justify-content:space-between; padding:4px 20px 10px; border-bottom:1px solid var(--line); } .cal-toolbar button { color:var(--acc); min-height:44px; font-size:17px; }.cal-toolbar span { font-size:14px; color:var(--tx2); } .cal-agenda { padding:8px 18px 20px; }.cal-agenda h3 { font-size:19px; margin:12px 0; font-weight:600; } .cal-events { margin:0; border-radius:0; background:none; }.cal-events .row { gap:13px; padding:15px 0; min-height:66px; } .cal-event-time { min-width:62px; max-width:66px; font-size:14px; color:var(--tx2); line-height:1.4; } .cal-events .rm { border-left:3px solid var(--acc); padding-left:12px; }.cal-events .rm b { line-height:1.4; overflow-wrap:anywhere; }.cal-events .rm span { font-size:14px; line-height:1.4; margin-top:4px; } .cal-add { display:flex; align-items:center; gap:8px; color:var(--acc); min-height:48px; margin-top:8px; font-size:17px; } .phone-form,.phone-event-detail { padding:8px 20px 28px; }.phone-form>label,.clock-label>label { display:block; font-size:15px; color:var(--tx2); margin:16px 0 7px; } .phone-form .field { display:block; width:100%; margin:0; min-width:0; max-width:100%; } .phone-form textarea.field { resize:vertical; min-height:100px; line-height:1.5; } select.field { font:17px var(--font); color:var(--tx); padding:12px; } .phone-form .btn,.phone-event-detail .btn { margin-top:14px; } .phone-help { color:var(--tx2); font-size:15px; line-height:1.5; margin:10px 0; } .phone-form-error { color:var(--bad); font-size:15px; line-height:1.4; margin:10px 0; } .phone-delete { color:#c52f2a; }.dark-ui .phone-delete { color:#ff6961; } .phone-event-detail h2 { font-size:25px; line-height:1.25; font-weight:600; margin:15px 0; overflow-wrap:anywhere; } .phone-event-detail p { line-height:1.5; }.cal-event-note { white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; } .phone-event-detail .btn { text-align:left; white-space:normal; line-height:1.4; padding:12px 14px; } .phone-check { display:flex!important; gap:12px; align-items:center; min-height:44px; color:var(--tx)!important; } .phone-check input { width:23px; height:23px; accent-color:var(--acc); } /* Clock: timers and stopwatches use real elapsed time; alarms use story time. */ .clock-app .body { padding-bottom:14px; }.clock-app .hdr { border-bottom:0; } .clock-display { font-size:64px; font-weight:300; font-variant-numeric:tabular-nums; text-align:center; letter-spacing:-.04em; line-height:1.15; margin:30px 12px 6px; } .stopwatch-display { font-size:56px; }.clock-state { font-size:15px; color:var(--tx2); text-align:center; min-height:23px; margin:8px 20px 24px; } .timer-duration { display:flex; gap:12px; margin:10px 22px 18px; }.timer-duration label { flex:1; min-width:0; text-align:center; } .timer-duration input { display:block; width:100%; min-height:58px; border:1px solid var(--line); border-radius:10px; background:var(--s1); color:var(--tx); font-size:28px; text-align:center; font-variant-numeric:tabular-nums; padding:8px 4px; -moz-appearance:textfield; } .timer-duration input::-webkit-inner-spin-button { -webkit-appearance:none; }.timer-duration label>span { display:block; font-size:14px; color:var(--tx2); margin-top:7px; } .timer-duration input:disabled { color:var(--tx2); opacity:1; }.timer-presets { display:flex; gap:8px; margin:0 22px 16px; } .timer-presets button { flex:1; min-height:40px; border-radius:9px; background:var(--s1); color:var(--acc); font-size:15px; }.timer-presets button:disabled { color:var(--tx2); } .clock-label { margin:0 22px; }.clock-label .field { width:100%; }.clock-label>label { margin-top:8px; } .clock-controls { display:flex; gap:14px; margin:24px 22px; }.clock-controls .btn { flex:1; background:var(--s1); }.clock-controls .btn.pri { background:var(--acc); } .clock-help { margin:20px 24px; }.clock-tabs { flex:none; display:flex; gap:8px; padding:10px 12px calc(30px + var(--safe-b)); border-top:1px solid var(--line); background:var(--bar); } .clock-tabs button { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:13px; min-height:48px; color:var(--tx2); padding-top:3px; } .clock-tabs [aria-selected="true"] { color:var(--acc); }.os-android .clock-tabs { padding-bottom:9px; } .stopwatch-laps { margin:0 22px; background:transparent; border-radius:0; }.stopwatch-laps .row { padding:13px 0; gap:8px; justify-content:space-between; font-size:16px; font-variant-numeric:tabular-nums; }.stopwatch-laps b { font-weight:400; } .alarm-list { margin:0 22px; border-radius:0; background:transparent; }.alarm-list .row { padding:14px 0; justify-content:space-between; gap:18px; } .alarm-edit { flex:1; text-align:left; min-height:70px; display:flex; flex-direction:column; gap:3px; }.alarm-edit b { font-size:46px; font-weight:300; font-variant-numeric:tabular-nums; line-height:1.1; }.alarm-edit span { font-size:17px; }.alarm-edit small { font-size:14px; color:var(--tx2); } .alarm-list .tgl { flex:none; width:51px; height:31px; }.alarm-list .tgl::after { width:27px; height:27px; top:2px; left:2px; }.alarm-list .tgl.on::after { transform:translateX(20px); } .clock-add { display:flex; gap:8px; color:var(--acc); margin:20px auto; } @media(max-width:360px) { .clock-display { font-size:58px; margin-top:18px; }.stopwatch-display { font-size:49px; }.clock-state { margin-bottom:17px; }.clock-controls { margin-top:18px; margin-bottom:18px; }.cal-month-nav h2 { font-size:20px; }.home-weather small { font-size:12px; }.case-card div>span { font-size:15px; } } /* Rozmiar tekstu (Ustawienia): czytelność czatów, odpowiedzi i notatek. */ body.ts-l .bub,body.ts-l .msg.them .bub{font-size:19px}body.ts-l .composer .opt{font-size:18.5px}body.ts-l .msg .who{font-size:13.5px}body.ts-l .banner .b-t{font-size:15px} body.ts-xl .bub,body.ts-xl .msg.them .bub{font-size:21.5px}body.ts-xl .composer .opt{font-size:20px}body.ts-xl .msg .who{font-size:15px}body.ts-xl .banner .b-t{font-size:16.5px} /* css/seasons.css */ /* Te same semantyczne kolory i typografia co aplikacje systemowe. */ .wallpaper-picker{padding:12px 18px 28px}.wallpaper-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 18px}.wallpaper-card{flex:0 0 65%;scroll-snap-align:center;text-align:left;border:2px solid transparent;border-radius:23px;padding:5px;background:transparent;color:var(--tx)}.wallpaper-card.selected{border-color:var(--acc)}.wallpaper-preview{display:flex;flex-direction:column;align-items:center;aspect-ratio:9/16;border-radius:17px;color:white;padding:29px 8px;overflow:hidden;background-color:#1a2028}.wallpaper-preview small{font-size:12px;text-align:center}.wallpaper-preview strong{font-size:48px;letter-spacing:-2px;font-weight:600;line-height:1.15}.wallpaper-card>b,.wallpaper-card>small{display:block;padding:6px 7px 0}.wallpaper-card>small{font-size:12px;color:var(--tx2)}.wallpaper-caption,.wallpaper-source p{font-size:14px;line-height:1.5;color:var(--tx2)}.wallpaper-source{padding-top:24px}.wallpaper-source .btn{margin-top:9px}.wallpaper-backup img{width:100%;max-height:290px;object-fit:cover;border-radius:12px}.wallpaper-backup p{line-height:1.5;color:var(--tx2)}#home,#lock{-webkit-touch-callout:none}#home>.home-apps:empty{min-height:50px} .season-body{padding:16px 22px 30px}.season-body h2{font-size:29px;letter-spacing:-.7px;margin:6px 0 12px}.season-body p{line-height:1.5}.season-kicker{font-size:12px;font-weight:600;color:var(--tx2)}.season-body progress{width:100%;height:6px;accent-color:#007aff}.season-meta,.season-pacing{font-size:13px;color:var(--tx2)}.season-recap{padding:16px;background:var(--s1);border-radius:13px;margin:22px 0}.season-recap h3{margin:0}.season-recap p,.season-recap li{font-size:14px}.season-recap ul{padding-left:18px}.season-episodes{list-style:none;padding:0;margin:24px 0}.season-episodes li{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.episode-num{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums}.season-episodes li>div{flex:1;min-width:0}.season-episodes b,.season-episodes small{display:block}.season-episodes b{font-size:15px;font-weight:500}.season-episodes small{font-size:12px;color:var(--tx2);margin-top:4px}.season-episodes .complete>svg{color:#248a3d}.season-episodes .locked{color:var(--tx2)}.season-episodes .current b{font-weight:650} /* css/phone-tools.css */ .side-photo { display:block; text-align:left; width:100%; margin-top:10px; border-radius:12px; overflow:hidden; } .side-photo img { display:block; width:100%; height:auto; } .side-photo span { display:block; padding:10px 2px 2px; color:var(--tx); font-size:15px; line-height:1.4; } .message-menu { padding:0 18px 20px; } .message-menu blockquote { margin:4px 0 18px; border-left:3px solid var(--acc); padding:4px 14px; font-size:17px; line-height:1.45; overflow-wrap:anywhere; } .message-menu .reaction-picker { display:flex; justify-content:space-between; background:var(--s1); border-radius:20px; padding:8px 4px; margin:12px 0 20px; } .reaction-picker button { width:44px; min-height:48px; font-size:25px; border-radius:14px; } .reaction-picker button[aria-pressed=true] { background:var(--accd); box-shadow:inset 0 0 0 2px var(--acc); } .message-menu>.btn { margin:8px 0; } .message-reaction { position:absolute; right:5px; bottom:-16px; border:2px solid var(--scr); background:var(--s2); padding:2px 7px; border-radius:15px; font-size:16px; min-height:28px; } .msg:has(.message-reaction) { margin-bottom:25px; } .bub { position:relative; } .message-bookmark { display:inline-block; font-size:13px; color:var(--tx2); margin:5px 4px 0; } .msg.me .message-bookmark { color:inherit; } .message-search { display:flex; flex-direction:column; gap:10px; padding:0 18px 20px; } .message-search .field { margin:0; width:100%; } .message-search-result { text-align:left; border-bottom:1px solid var(--line); padding:16px 0; min-height:60px; } .message-search-result b { display:block; font-size:15px; color:var(--tx); } .message-search-result p { margin:7px 0; font-size:17px; line-height:1.45; overflow-wrap:anywhere; } .message-search-result small { color:var(--tx2); font-size:14px; } .message-search-empty { color:var(--tx2); font-size:16px; line-height:1.5; } .crow .pinned-chat { color:var(--acc); font-size:14px; padding-right:5px; } .quote-origin { font-size:14px; color:var(--tx2); margin:0 0 8px; } .ts-t { font-size:clamp(31px,8.6vw,41px); line-height:1.08; max-width:9ch; margin:12px auto; letter-spacing:.025em; text-shadow:none; padding-left:0; } .ts-k { letter-spacing:.08em; font-size:13px; padding-left:0; } @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-delay:0ms!important; transition-delay:0ms!important; } }