@import url('/fonts.css'); :root { /* Paleta z systemu: Deep Obsidian / Dark Graphite / Electric Lime / Soft Violet / Off-White */ --bg: #0D0E12; --surface: #181A20; --surface-2: #21242C; --surface-3: #2C3039; --lime: #D4FF00; --violet: #8A7CFF; --text: #F2F4F8; --muted: #8E939F; --faint: #5E636E; /* Bento: jedna obramówka i jeden promień na wszystkie moduły */ --edge: 1px solid rgba(255, 255, 255, .08); --r-module: 24px; --r-tile: 18px; --gap: 6px; --display: 'Syne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } /* Kolor tła siedzi na , a zostaje przezroczyste — inaczej tło body propaguje się na kanwę i przykrywa warstwę gradientów leżącą pod spodem. */ html { background: var(--bg); } body { background: transparent; } body.locked { overflow: hidden; } body.dragging { user-select: none; -webkit-user-select: none; } .hidden { display: none !important; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } input, textarea { font: inherit; } /* ═══ materiał i światło ═══ Zamiast kolorowych plam pod spodem: neutralne źródła światła, które warstwy szkła zbierają przez backdrop-filter. Przechył urządzenia przesuwa światło, a nie tło — dzięki temu paski i dock wyglądają jak fizyczny materiał reagujący na to, co pod nimi. */ .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.035), transparent 60%); } /** * Dither przeciw bandingowi. Rozmyte plamy o niskim kontraście na ciemnym tle * dają widoczne stopnie (8 bitów na kanał to za mało przy tak łagodnych * przejściach). Cienka warstwa szumu rozbija te stopnie - ta sama sztuczka, * której używa się przy gradientach w druku i w filmie. * * Warstwa siedzi NAD treścią (position: fixed, wysoki z-index, pointer-events: none), * nie wewnątrz `.ambient`: tam miała z-index -1 i `mix-blend-mode` nie miał z czym * się mieszać, więc ziarno w ogóle nie było widoczne. */ .grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; /* Jedna oktawa = szum per-piksel (wiecej oktaw daje miekkie klaczki, ktore nie rozbijaja stopni). feColorMatrix zeruje kolor i wymusza pelna nieprzezroczystosc, zeby amplituda byla przewidywalna, a nie zalezna od losowej alfy z turbulencji. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: .045; } /** * Plamy sa wylaczone. Wielkie, rozmyte gradienty o niskim kontrascie na prawie * czarnym tle daja pasy (banding) przy 8 bitach na kanal - policzone: kanal B * przechodzi 31 poziomow na 616px, czyli stopien co ~19px, widoczny golym okiem. * Zadne dithering tego w pelni nie ukryje, wiec tlo jest plaskie, a glebie robia * warstwy szkla i ziarno. Element zostaje w DOM, bo `ambient.js` liczy z niego * pozycje refleksu (--lx). */ .blob { display: none; } .b1 { width: 78vw; height: 78vw; top: -26vw; left: -18vw; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 72%); } .b2 { width: 88vw; height: 88vw; top: 30vh; right: -34vw; background: radial-gradient(circle, rgba(138,124,255,.10), transparent 72%); } .b3 { width: 62vw; height: 62vw; bottom: -20vh; left: 4vw; background: radial-gradient(circle, rgba(212,255,0,.055), transparent 74%); } .ambient.drift .blob { animation: drift 30s var(--ease) infinite alternate; } .ambient.drift .b2 { animation-duration: 38s; animation-delay: -8s; } .ambient.drift .b3 { animation-duration: 34s; animation-delay: -16s; } @keyframes drift { to { transform: translate3d(3vw, -2vh, 0) scale(1.08); } } /** * Szkło: rozmycie tego, co pod spodem, plus krawędź światła u góry i cień u dołu. * `--lx` przesuwa refleks razem z przechyłem urządzenia. */ .glass { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 40%, rgba(255,255,255,0)), rgba(24, 26, 32, .55); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.35), 0 18px 44px -20px rgba(0,0,0,.85); } /* Refleks wędrujący po krawędzi — to on sprzedaje wrażenie materiału. */ .glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at var(--lx) -30%, rgba(255,255,255,.16), transparent 60%); opacity: .9; transition: background .5s var(--ease); } /* ═══ typografia ═══ */ .display { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-size: clamp(30px, 9vw, 40px); line-height: .98; margin: 0; } .eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } /* ═══ przyciski ═══ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--surface-2); border: var(--edge); letter-spacing: -.01em; transition: transform .18s var(--ease-spring), filter .18s var(--ease); } .btn:active { transform: scale(.94); filter: brightness(1.15); } .btn-primary { background: var(--lime); color: #101208; border-color: transparent; font-weight: 700; } .btn-ghost { background: var(--surface-2); color: var(--text); font-weight: 500; } .btn-lg { width: 100%; padding: 15px 20px; font-size: 15.5px; } .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--text); transition: transform .18s var(--ease-spring), background .18s var(--ease); } .icon-btn:active { transform: scale(.9); background: var(--surface-2); } .icon-btn.on { background: var(--lime); color: #101208; } /* ═══ ekran: tablice ═══ */ .home { padding: calc(22px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); } .home-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; } .home-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .home-logo { height: 22px; width: auto; display: block; } /* "Boards" zostaje w DOM dla czytników ekranu i SEO, ale wizualnie sama marka - "mivo." z kropką - jest tu wystarczającym nagłówkiem, tak jak na landingu. Dwa różne style nagłówka (logotyp + osobny pogrubiony h1) gryzły się ze sobą. */ .home-brand h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* W zainstalowanej PWA nie ma dokąd "wracać" - landing to strona przeglądarkowa, z którą standalone-owa apka nigdy się nie styka. Klasę .standalone ustawia app.js po wykryciu display-mode: standalone / navigator.standalone. */ html.standalone .home-brand { pointer-events: none; } html.standalone .home-logo { opacity: .92; } /* W zasięgu kciuka: wielki, wyśrodkowany, przyklejony do dołu - nie w rogu górnym. */ .home-fab { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border-radius: 999px; z-index: 45; background: var(--lime); color: #101208; font-weight: 700; font-size: 15px; box-shadow: 0 14px 34px -10px rgba(212,255,0,.5); transition: transform .18s var(--ease-spring), filter .18s var(--ease); } .home-fab:active { transform: translateX(-50%) scale(.94); filter: brightness(1.08); } .board-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .board-card { position: relative; display: block; text-align: left; width: 100%; padding: 0; overflow: hidden; background: var(--surface); border: var(--edge); border-radius: var(--r-module); transition: transform .24s var(--ease-spring), border-color .2s var(--ease); animation: cardIn .55s var(--ease) both; cursor: pointer; -webkit-user-select: none; user-select: none; } .board-card:active { transform: scale(.975); border-color: rgba(255,255,255,.18); } /* Zmień nazwę / usuń wprost z listy tablic - nie trzeba wchodzić do środka. */ .board-card-actions { position: absolute; top: 9px; right: 9px; z-index: 2; display: flex; gap: 6px; } .board-card-act { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: rgba(13,14,18,.55); backdrop-filter: blur(10px); color: #fff; transition: transform .16s var(--ease-spring), background .16s var(--ease); } .board-card-act:active { transform: scale(.88); } .board-card-act.danger:active { background: rgba(255,45,85,.55); } @keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } } .board-cover { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 16 / 10; background: var(--bg); padding: 3px; } .board-cover > * { min-width: 0; min-height: 0; border-radius: 12px; overflow: hidden; } .board-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .board-cover.solo { grid-template-columns: 1fr; grid-template-rows: 1fr; } .board-cover .ph { background: linear-gradient(140deg, #1E212A, #14161B); } .board-meta { padding: 14px 16px 17px; } .board-name { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 4px; display: flex; align-items: center; gap: 7px; } .board-sub { font-size: 12.5px; color: var(--muted); margin: 0; display: flex; gap: 8px; align-items: center; } .board-sub b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .dot { width: 3px; height: 3px; border-radius: 99px; background: var(--faint); flex: none; } .home-empty { text-align: center; padding: 12vh 20px; } .home-empty-art { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 104px; margin: 0 auto 26px; } .home-empty-art i { display: block; border-radius: 12px; background: var(--surface-2); border: var(--edge); animation: breathe 2.8s var(--ease) infinite; } .home-empty-art i:nth-child(1) { height: 58px; } .home-empty-art i:nth-child(2) { height: 40px; animation-delay: .2s; } .home-empty-art i:nth-child(3) { height: 40px; animation-delay: .4s; } .home-empty-art i:nth-child(4) { height: 58px; animation-delay: .6s; } @keyframes breathe { 50% { opacity: .4; transform: translateY(-4px); } } .home-empty-title { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.03em; } .home-empty-sub { color: var(--muted); margin: 0 0 26px; font-size: 14px; line-height: 1.55; } /* ═══ pasek tablicy ═══ */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 4px; padding: env(safe-area-inset-top) 12px 0 8px; height: calc(58px + env(safe-area-inset-top)); background: transparent; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); } .topbar.stuck { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), rgba(13,14,18,.6); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); } .topbar.stuck { border-bottom-color: rgba(255,255,255,.08); } .board-switch { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 7px 10px; border-radius: 14px; color: var(--text); transition: background .18s var(--ease), transform .18s var(--ease-spring); } .board-switch:active { background: var(--surface-2); transform: scale(.97); } .board-switch svg { flex: none; color: var(--muted); } .board-title-text { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-count-chip { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 4px; } /* ═══ szukanie ═══ */ .searchbar { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 39; padding: 4px 12px 12px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)), rgba(13,14,18,.55); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); animation: slideDown .3s var(--ease); } @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } } .search-field { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface); border: var(--edge); border-radius: 16px; color: var(--muted); } .search-field:focus-within { border-color: rgba(212,255,0,.4); } .search-field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-size: 15px; -webkit-appearance: none; } .search-field input::-webkit-search-cancel-button { display: none; } .search-clear { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--surface-3); color: var(--text); } .search-clear.hidden { display: none; } .filter-chips { display: flex; gap: 7px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: none; } .filter-chips::-webkit-scrollbar { display: none; } .chip { flex: none; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 550; background: var(--surface); border: var(--edge); color: var(--muted); transition: transform .16s var(--ease-spring), background .16s var(--ease), color .16s var(--ease); } .chip:active { transform: scale(.93); } .chip.on { background: rgba(138,124,255,.2); color: #C9C2FF; border-color: rgba(138,124,255,.45); font-weight: 650; } /* ═══ siatka ═══ */ .grid { position: relative; margin: var(--gap); padding-bottom: calc(130px + env(safe-area-inset-bottom)); } .tile { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: var(--r-tile); background: var(--surface); border: var(--edge); will-change: transform; transform: translate3d(0,0,0); contain: paint; /* pan-y zostawia przewijanie w pionie, ale odbiera przeglądarce prawo do przejmowania gestu w poziomie — bez tego długie przytrzymanie ginie */ touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ═══ tryb układania ═══ */ .grid.reordering .tile { touch-action: none; cursor: grab; } /* Kołysanie idzie przez niezależną własność `rotate`, nie przez `transform` — ten drugi należy do układu siatki i animacja by go skasowała. */ .grid.reordering .tile:not(.drag) { animation: wobble 2.4s ease-in-out infinite; } @keyframes wobble { 0%, 100% { rotate: -.4deg; } 50% { rotate: .4deg; } } .reorder-bar { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: var(--r-module); font-size: 13.5px; font-weight: 600; animation: rise .3s var(--ease); } .reorder-bar b { font-weight: 600; color: var(--text); } .reorder-bar button { padding: 9px 16px; border-radius: 14px; background: var(--lime); color: #101208; font-weight: 700; font-size: 13.5px; } .grid.animate .tile { transition: transform .32s var(--ease), width .32s var(--ease), height .32s var(--ease); } .tile.entering { animation: tileIn .5s var(--ease) both; } @keyframes tileIn { from { opacity: 0; clip-path: inset(14% 14% 14% 14% round 26px); } } /* transform kafelka należy do układu siatki — reakcja na dotyk idzie na zawartość */ .tile-media, .tile-blank, .tile-skel { transition: transform .2s var(--ease), filter .2s var(--ease); } .tile.pressed .tile-media, .tile.pressed .tile-blank, .tile.pressed .tile-skel { transform: scale(1.06); filter: brightness(1.14); } .tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tile-video { opacity: 0; transition: opacity .3s var(--ease); } .tile.previewing .tile-video { opacity: 1; } .tile.previewing .tile-live { opacity: 1; transform: none; } .tile-scrim { position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.3) 45%, transparent); pointer-events: none; } .tile-foot { position: absolute; left: 9px; right: 9px; bottom: 8px; display: flex; align-items: center; gap: 5px; pointer-events: none; } .tile-badge { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 7px; background: rgba(13,14,18,.62); backdrop-filter: blur(8px); color: rgba(242,244,248,.9); border: var(--edge); } .tile-time { margin-left: auto; font-size: 10.5px; font-weight: 650; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9); font-variant-numeric: tabular-nums; } .tile-note { position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 10px rgba(212,255,0,.7); } .tile-live { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 99px; background: var(--lime); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s var(--ease-spring); box-shadow: 0 0 10px rgba(212,255,0,.9); } .tile-skel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: linear-gradient(110deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 220% 100%; animation: shimmer 1.8s linear infinite; padding: 10px; text-align: center; } @keyframes shimmer { to { background-position: -220% 0; } } .tile-skel small { color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .tile-skel .spin { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--surface-3); border-top-color: var(--lime); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tile-blank { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 13px; background: linear-gradient(155deg, #23262F, #15171C); } .tile-blank .tile-badge { align-self: flex-start; background: rgba(255,255,255,.08); } .tile-blank p { margin: 0; font-size: 12px; line-height: 1.4; color: #D2D6E0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; } .tile-blank small { margin-top: auto; color: var(--faint); font-size: 10.5px; } .tile.err { border-color: rgba(255,110,140,.35); } .tile.drag { z-index: 60; box-shadow: 0 28px 70px rgba(0,0,0,.75); border-color: rgba(212,255,0,.5); transition: none; } /* ═══ pływający dock ═══ */ .dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translate(-50%, calc(100% + 26px)); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .42s var(--ease); } .dock.up { transform: translate(-50%, 0); } body.dragging .dock { transform: translate(-50%, calc(100% + 40px)); } .dock-grip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); width: 46px; height: 5px; border-radius: 99px; background: rgba(242,244,248,.28); transition: opacity .3s var(--ease), background .2s; } .dock.up .dock-grip { opacity: 0; pointer-events: none; } .dock-grip:active { background: var(--lime); } .dock-inner { display: flex; align-items: center; gap: 6px; padding: 8px; border: var(--edge); border-radius: var(--r-module); } .dock-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; color: var(--text); background: transparent; transition: transform .18s var(--ease-spring), background .2s var(--ease), color .2s var(--ease); } .dock-btn:active { transform: scale(.9); } .dock-btn.on { background: var(--surface-3); } .dock-btn.saved { background: rgba(138,124,255,.22); color: #C9C2FF; } .dock-cta { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 15px; border-radius: 16px; background: var(--lime); color: #101208; font-weight: 700; font-size: 14.5px; transition: transform .18s var(--ease-spring), filter .2s; } .dock-cta:active { transform: scale(.94); filter: brightness(1.1); } .dock-tilt { font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: rgba(138,124,255,.18); color: #C9C2FF; border: 1px solid rgba(138,124,255,.35); } /* ═══ podpowiedź i kosz ═══ */ .pill-hint { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 45; padding: 10px 16px; border-radius: 999px; font-size: 12.5px; color: var(--text); background: rgba(24,26,32,.9); border: var(--edge); backdrop-filter: blur(18px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .pill-hint.show { opacity: 1; transform: translate(-50%, 0); } .trash { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 110px); z-index: 70; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--r-module); background: rgba(40,14,22,.9); color: #FF9AAE; border: 1px solid rgba(255,90,120,.35); backdrop-filter: blur(20px); font-size: 13px; font-weight: 600; transition: transform .32s var(--ease-spring), opacity .22s, background .18s, color .18s; } body.dragging .trash { opacity: 1; transform: translate(-50%, 0); } .trash.hot { background: #FF3B5C; color: #fff; border-color: transparent; transform: translate(-50%, 0) scale(1.09); } .empty { text-align: center; padding: 15vh 28px; } .empty-title { font-family: var(--display); font-size: 21px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.03em; } .empty-sub { color: var(--muted); margin: 0 0 26px; font-size: 14px; line-height: 1.6; } /* ═══ arkusze ═══ */ .sheet-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; } .sheet-scrim { position: absolute; inset: 0; background: rgba(6,7,10,.68); backdrop-filter: blur(4px); animation: fade .25s var(--ease); } @keyframes fade { from { opacity: 0; } } .sheet { position: relative; width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: var(--r-module) var(--r-module) 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); animation: rise .38s var(--ease); border-top: var(--edge); max-height: 86dvh; overflow-y: auto; } @keyframes rise { from { transform: translateY(100%); } } .sheet-grip { width: 40px; height: 5px; border-radius: 99px; background: var(--surface-3); margin: 4px auto 16px; } .sheet-title { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.03em; } .add-input { width: 100%; background: var(--bg); color: var(--text); border: var(--edge); border-radius: 18px; padding: 14px 15px; font-size: 15px; resize: none; outline: none; } .add-input:focus { border-color: rgba(212,255,0,.4); } .sheet-row { display: flex; gap: 8px; margin: 10px 0 14px; } .sheet-row .btn { flex: 1; padding: 12px 10px; font-size: 13.5px; } .sheet-hint { color: var(--faint); font-size: 12px; margin: 14px 2px 0; line-height: 1.5; } .switch-list { display: grid; gap: 7px; margin-bottom: 12px; } .switch-row { display: flex; align-items: center; gap: 4px; width: 100%; padding: 7px 8px 7px 10px; border-radius: 18px; background: var(--bg); border: var(--edge); /* Cztery przyciski obok nazwy nie mieszczą się na wąskim telefonie - nazwa oddaje im miejsce, zamiast wypychać kosz poza ekran. */ min-width: 0; overflow: hidden; } .switch-row.current { border-color: rgba(212,255,0,.35); } .switch-pick { display: flex; align-items: center; gap: 11px; flex: 1 1 0; min-width: 0; text-align: left; padding: 4px 0; transition: transform .16s var(--ease-spring); } .switch-pick:active { transform: scale(.98); } .switch-thumb { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: none; background: var(--surface-3); } .switch-info { min-width: 0; flex: 1; } .switch-info b { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .switch-info span { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .switch-check { color: var(--lime); flex: none; } .switch-save { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); color: var(--muted); transition: transform .16s var(--ease-spring), background .18s, color .18s; } .switch-save:active { transform: scale(.9); } .switch-save.on { background: rgba(138,124,255,.2); color: #C9C2FF; } .switch-save.busy { animation: pulse 1.2s var(--ease) infinite; } @keyframes pulse { 50% { opacity: .45; } } .offline-badge { display: inline-grid; place-items: center; color: var(--violet); } /* ═══ feed ═══ */ .feed { position: fixed; inset: 0; z-index: 100; background: #000; } .feed.opening { animation: feedIn .34s var(--ease); } @keyframes feedIn { from { opacity: 0; } } .feed.closing { animation: feedOut .26s var(--ease) forwards; } @keyframes feedOut { to { opacity: 0; transform: scale(.94); } } .feed-track { height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .page { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; } .page-bg { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(40px) saturate(150%) brightness(.38); transform: scale(1.12); } .stage { position: absolute; inset: 0; display: grid; place-items: center; } /* Pozycjonowanie absolutne, NIE zwykly element w gridzie: przy `height:100%` wewnatrz grida procent nie ma sie do czego odniesc (zaleznosc cykliczna z rozmiarem sciezki), wiec przegladarka brala wysokosc naturalna wideo i material wylewal sie poza ekran - na szerokim oknie bylo to bardzo widoczne. */ .stage video, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .page.fill .stage video, .page.fill .stage img { object-fit: cover; } .page-ui { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 62px 16px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(6,7,10,.92) 20%, rgba(6,7,10,.45) 60%, transparent); pointer-events: none; } .page-ui > * { pointer-events: auto; } .p-author { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; margin-bottom: 8px; letter-spacing: -.015em; } .p-avatar { width: 28px; height: 28px; border-radius: 99px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--lime), var(--violet)); font-size: 12px; font-weight: 800; color: #101208; text-transform: uppercase; font-family: var(--display); } .p-badge { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 7px; background: rgba(255,255,255,.14); } .p-desc { font-size: 13.5px; line-height: 1.5; color: #E4E7EE; margin: 0 0 10px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p-desc.open { -webkit-line-clamp: unset; line-clamp: unset; max-height: 40dvh; overflow-y: auto; } .p-desc:empty { display: none; } .p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; max-height: 60px; overflow: hidden; } .p-tag { font-size: 11.5px; font-weight: 550; color: #C9C2FF; background: rgba(138,124,255,.2); padding: 4px 10px; border-radius: 99px; } .p-note { width: 100%; background: rgba(255,255,255,.08); border: var(--edge); border-radius: 14px; color: #fff; padding: 11px 13px; font-size: 13.5px; resize: none; outline: none; margin-bottom: 12px; min-height: 42px; } .p-note:focus { border-color: rgba(212,255,0,.4); } .p-note::placeholder { color: rgba(255,255,255,.35); } .p-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .p-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 15px; border-radius: 14px; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); text-decoration: none; color: inherit; transition: transform .16s var(--ease-spring); } .p-btn:active { transform: scale(.94); } .p-btn.danger { color: #FF9AAE; } .p-open { background: var(--lime); color: #101208; font-weight: 700; } .feed-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 14px; background: linear-gradient(to bottom, rgba(6,7,10,.65), transparent); pointer-events: none; } .feed-top > * { pointer-events: auto; } .round-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(13,14,18,.5); border: var(--edge); backdrop-filter: blur(14px); color: #fff; transition: transform .16s var(--ease-spring); } .round-btn:active { transform: scale(.9); } .feed-counter { font-family: var(--display); font-size: 14px; font-weight: 700; color: rgba(242,244,248,.92); text-shadow: 0 1px 6px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .p-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 5; display: flex; align-items: flex-end; padding-bottom: env(safe-area-inset-bottom); } .p-progress i { display: block; height: 3px; background: rgba(255,255,255,.18); width: 100%; } .p-progress i b { display: block; height: 100%; background: var(--lime); width: 0; border-radius: 99px; } .p-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; } .page.paused .p-play { opacity: 1; } .p-play svg { filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)); } .p-expand { position: absolute; right: 12px; bottom: 50%; transform: translateY(50%); z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: rgba(13,14,18,.5); border: var(--edge); backdrop-filter: blur(14px); color: #fff; transition: transform .16s var(--ease-spring); } .p-expand:active { transform: translateY(50%) scale(.9); } .p-fallback { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; } .flip-ghost { position: fixed; z-index: 150; background-size: cover; background-position: center; pointer-events: none; will-change: transform, width, height, border-radius; } /* ═══ toast ═══ */ .toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none; z-index: 200; padding: 13px 20px; border-radius: 18px; font-size: 13.5px; font-weight: 600; background: var(--lime); color: #101208; box-shadow: 0 18px 46px -12px rgba(212,255,0,.35); transition: opacity .26s var(--ease), transform .26s var(--ease-spring); max-width: 88vw; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .ambient { display: none; } } /* ═══ obecność ekipy ═══ */ .presence { display: flex; align-items: center; flex: none; margin-right: 2px; } .who { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -7px; border-radius: 999px; font-family: var(--display); font-size: 10px; font-weight: 800; color: #101208; background: var(--who, var(--violet)); box-shadow: 0 0 0 2px var(--bg); letter-spacing: -.02em; } .who:first-child { margin-left: 0; } .who.me { cursor: pointer; } .who.more { background: var(--surface-3); color: var(--muted); font-size: 9.5px; } .locked-feature { position: relative; opacity: .55; } .locked-feature::after { content: 'PRO'; position: absolute; top: -3px; right: -5px; font-size: 7.5px; font-weight: 800; letter-spacing: .08em; padding: 1.5px 4px; border-radius: 5px; background: var(--violet); color: #101208; } .p-credit { font-size: 11.5px; color: var(--muted); margin: -4px 0 9px; } .p-credit b { color: var(--text); font-weight: 600; } /* ═══ konto, reklama, ogłoszenia ═══ */ .account-chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--surface-2); border: var(--edge); color: var(--text); font-family: var(--display); font-weight: 800; font-size: 14px; transition: transform .16s var(--ease-spring); } .account-chip:active { transform: scale(.9); } .ad-slot { display: flex; align-items: center; gap: 10px; padding: 13px 15px; margin-bottom: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(212,255,0,.14), rgba(138,124,255,.1)); border: 1px dashed rgba(212,255,0,.35); text-decoration: none; color: var(--text); font-size: 13px; line-height: 1.4; } .ad-tag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .ad-cta { flex: none; font-weight: 700; color: var(--lime); } .announce-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px; border-radius: 14px; background: rgba(138,124,255,.14); border: 1px solid rgba(138,124,255,.3); font-size: 13px; color: #E4E2FF; } .announce-banner span:first-child { flex: 1; } .announce-banner button { color: #E4E2FF; opacity: .7; } /* ═══ logowanie ═══ */ .auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg); border-radius: 12px; padding: 3px; } .auth-tab { flex: 1; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--muted); } .auth-tab.on { background: var(--surface-2); color: var(--text); } #auth-forms .row { margin-bottom: 10px; } #auth-name-row.hidden { display: none; } /* ═══ premium / onboarding ═══ */ .premium-hero { text-align: center; padding: 28px 20px 8px; } .premium-sub { color: var(--muted); font-size: 14.5px; margin: 10px 0 0; } .plan-compare { display: grid; gap: 14px; padding: 20px 16px 10px; max-width: 900px; margin: 0 auto; } @media (min-width: 720px) { .plan-compare { grid-template-columns: repeat(3, 1fr); align-items: start; } } .plan-card { position: relative; padding: 22px 20px; border-radius: var(--r-module); background: var(--surface); border: var(--edge); } .plan-card.featured { border-color: rgba(212,255,0,.5); background: linear-gradient(165deg, rgba(212,255,0,.08), var(--surface)); } .plan-badge { position: absolute; top: -11px; left: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--lime); color: #101208; } .plan-name { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; } .plan-price { font-family: var(--display); font-size: 30px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.03em; } .plan-price span { font-size: 14px; font-weight: 600; color: var(--muted); } .plan-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; } .plan-card li { font-size: 13.5px; color: #D6D8E0; padding-left: 20px; position: relative; } .plan-card li::before { content: '✓'; position: absolute; left: 0; color: var(--lime); font-weight: 700; } .switch-danger { color: #ff9aae; } .switch-danger:active { background: rgba(255,90,120,.16); } .plan-card li.neg { color: var(--faint); } .plan-card li.neg::before { content: '–'; color: var(--faint); font-weight: 400; } /* ═══ logotyp Mivo (prawdziwy plik wektorowy /brand/logotype.svg) ═══ */ .brand-logo { height: 22px; width: auto; display: block; } /* ═══ reklamy (plan Free) ═══ */ .board-banner { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 16px; font-size: 12.5px; color: var(--text); transition: transform .3s var(--ease); } .board-banner span { flex: 1; } .board-banner-cta { flex: none; font-weight: 700; color: var(--lime); text-decoration: none; } #board-banner-close { flex: none; color: var(--muted); } body.dragging .board-banner { transform: translateY(140%); } .ad-sheet { text-align: center; padding-top: 44px; position: relative; } .ad-close { position: absolute; top: 10px; right: 10px; } /* ═══ logowanie społecznościowe ═══ */ .auth-social { display: grid; gap: 9px; margin-bottom: 18px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; color: #1a1a1a; font-weight: 600; font-size: 14.5px; text-decoration: none; border: var(--edge); transition: transform .16s var(--ease-spring), filter .16s var(--ease); } .social-btn:active { transform: scale(.97); filter: brightness(.96); } .social-btn.apple { background: #000; color: #fff; border-color: rgba(255,255,255,.15); } .auth-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; color: var(--faint); font-size: 12px; } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--surface-3); } /* ═══ awatar konta ═══ */ .account-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .account-avatar { width: 52px; height: 52px; min-width: 52px; min-height: 52px; aspect-ratio: 1 / 1; border-radius: 999px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--text); } /* min-width/aspect-ratio jako zabezpieczenie: zdjęcie profilowe z Google bywa prostokątne (np. logo firmowe zamiast zdjęcia), a bez tego w kontekście flex potrafiło rozciągnąć okrągłe pudełko w owal zamiast zostać przycięte. */ .account-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .account-chip { overflow: hidden; flex-shrink: 0; aspect-ratio: 1 / 1; } .account-chip img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 999px; } /* ═══ wspólna praca nad tablicą ═══ */ .collab { margin-top: 22px; padding-top: 20px; border-top: var(--edge); } .collab-title { font-size: 14.5px; font-weight: 650; margin: 0 0 14px; letter-spacing: -.01em; } .collab-row { display: flex; gap: 8px; margin-bottom: 10px; } .collab-row .add-input { flex: 1; } .collab-row .btn { flex: none; } .collab-members { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .collab-member { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--surface-2); border: var(--edge); font-size: 12.5px; } .collab-member i { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--violet); color: #101208; font-family: var(--display); font-weight: 800; font-size: 10px; font-style: normal; } .collab-member.owner i { background: var(--lime); } .collab-member span { color: var(--muted); } .collab-member b { font-weight: 600; }