:root { /* Pastel "girly" palette — LIGHT version */ --bg0: #fff6fb; --bg1: #f7f0ff; --card: rgba(255, 255, 255, 0.72); --card2: rgba(255, 255, 255, 0.86); --line: rgba(40, 16, 34, 0.10); --text: rgba(34, 18, 32, 0.92); --muted: rgba(34, 18, 32, 0.66); --muted2: rgba(34, 18, 32, 0.52); --accent: #ff79be; /* strawberry milk */ --accent2: #b8a2ff; /* lilac */ --accent3: #8fe8ff; /* baby cyan */ --shadow: 0 22px 55px rgba(31, 8, 22, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; color: var(--text); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* IMPORTANT: keep root background transparent so the fixed video is visible */ background: transparent; } body { /* fallback if video is not set/loaded */ background-color: var(--bg0); } a { color: inherit; } /* Background */ .bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Quiet the video so the centered column reads as the hero, not the noise */ filter: blur(10px) brightness(0.96) saturate(1.03); opacity: 0.50; z-index: -2; } .bg { position: fixed; inset: 0; z-index: -1; /* Scrim + soft vignette: column pops, background stays as mood not noise */ background: radial-gradient(130% 90% at 50% 0%, transparent 38%, rgba(40, 16, 34, 0.12) 100%), linear-gradient(180deg, rgba(255, 246, 251, 0.30), rgba(247, 240, 255, 0.55)); } .bg::after { /* removed decorative circles/dots per request */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: none; } /* Layout */ .page { width: min(400px, calc(100% - 20px)); margin: 16px auto 32px; display: grid; gap: 16px; } @media (min-width: 900px) { /* Twitter-ish: wider feed on desktop */ .page { width: min(680px, calc(100% - 40px)); } } .card { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 24px; /* Lighter premium glass — more video peeking through, crisper frosting */ background: rgba(255, 255, 255, 0.50); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(31, 8, 22, 0.10); } /* Scroll-reveal — only armed once JS adds .reveal-on to . Without JS the cards render normally (no opacity:0 trap). */ body.reveal-on .card { opacity: 0; transform: translateY(14px); } body.reveal-on .card.is-revealed { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; } .credit-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: stretch; width: 100%; margin: 0 auto; padding: 6px 10px 2px; text-align: center; } .credit-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: min(100%, 560px); gap: 7px; font-size: 0.85rem; letter-spacing: 0.01em; color: rgba(34, 18, 32, 0.8); text-align: center; } .credit-soft { color: rgba(34, 18, 32, 0.72); } .credit-name { font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(34, 18, 32, 0.92); } .credit-heart { color: #6aa66f; font-size: 0.95rem; } .credit-dot, .credit-copy { color: rgba(34, 18, 32, 0.58); } .credit-copy { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; } .credit-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; } .credit-admin { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(34, 18, 32, 0.5); text-decoration: none; border-bottom: 1px solid rgba(34, 18, 32, 0.14); } .credit-admin:hover, .credit-admin:focus-visible { color: rgba(34, 18, 32, 0.72); border-bottom-color: rgba(34, 18, 32, 0.3); } /* Profile */ .profile { padding: 20px 18px; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; text-align: center; } .profile-divider { height: 1px; background: rgba(40, 16, 34, 0.08); margin: 4px 4px 0; } .profile-social { margin-top: 8px; text-align: left; } /* Collapsible Social */ .social-details { margin-top: 8px; } .social-summary { list-style: none; cursor: pointer; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(40, 16, 34, 0.10); background: rgba(255, 255, 255, 0.70); box-shadow: 0 14px 28px rgba(31, 8, 22, 0.08); transition: transform .14s ease, border-color .14s ease, background .14s ease; } .social-summary:hover { transform: translateY(-1px); border-color: rgba(255, 121, 190, 0.26); background: rgba(255, 255, 255, 0.78); } .social-summary::-webkit-details-marker { display: none; } .social-summary-left { display: grid; gap: 10px; justify-items: center; } .social-summary-title { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(34, 18, 32, 0.55); } .social-icons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .social-icon { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; position: relative; /* outline gradient ring */ background: transparent; border: 2px solid transparent; background-image: linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)), linear-gradient(135deg, rgba(255,121,190,0.95), rgba(184,162,255,0.95), rgba(143,232,255,0.85)); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 14px 28px rgba(31, 8, 22, 0.08); text-decoration: none; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; line-height: 0; /* icon gradient */ color: #b84cff; /* fallback when SVG doesn't support gradient fill */ } /* Apply gradient to both fill and stroke (works for filled + outline SVGs) */ .social-icon svg { display: block; width: 20px; height: 20px; } .social-icon svg path, .social-icon svg circle, .social-icon svg rect, .social-icon svg polygon, .social-icon svg line, .social-icon svg polyline { fill: url(#socGrad); stroke: url(#socGrad); } .social-icon:hover, .social-icon:focus-visible { outline: none; transform: translateY(-2px) scale(1.06); filter: saturate(1.08); border-color: rgba(255, 121, 190, 0.38); /* lift + soft pink glow */ box-shadow: 0 18px 34px rgba(31, 8, 22, 0.10), 0 8px 22px rgba(255, 121, 190, 0.30); } /* Social icons in expanded list: gradient glyphs (match the collapsed preview). Uses url(#socGrad) so it does NOT depend on currentColor — .icon-svg sets color:transparent, which previously made the glyphs invisible. */ .profile-social-link .icon-svg svg path, .profile-social-link .icon-svg svg circle, .profile-social-link .icon-svg svg rect, .profile-social-link .icon-svg svg polygon, .profile-social-link .icon-svg svg line, .profile-social-link .icon-svg svg polyline { fill: url(#socGrad); stroke: url(#socGrad); } /* (optional) if something is still an , tint it to purple/pink */ .social-icon img, .ps-icon img { filter: hue-rotate(285deg) saturate(2.0); } /* icons in expanded list */ .ps-icon img, .ps-icon svg { display: block; } .icon-svg svg { display: block; transform: translate(-1px, -1px); } .social-summary-cta { font-size: 0.80rem; font-weight: 800; color: rgba(34,18,32,0.72); display: inline-flex; align-items: center; gap: 8px; } .social-summary-cta::after { content: '▾'; font-size: 1rem; color: rgba(34, 18, 32, 0.45); transform-origin: center; transition: transform .16s ease; } details[open] > .social-summary .social-summary-cta::after { transform: rotate(180deg); } /* When expanded: hide the tiny icon preview row (cleaner) */ details[open] .social-icons { display: none; } /* When expanded: change label */ details[open] > .social-summary .social-summary-cta { color: rgba(34,18,32,0.62); } .profile-social-list { display: grid; gap: 10px; margin-top: 10px; } /* Accordion: JS animates max-height on toggle; opacity rides along */ .social-details .profile-social-list { overflow: hidden; transition: max-height .32s ease, opacity .25s ease; } .profile-social-link { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; text-decoration: none; color: rgba(34, 18, 32, 0.92); border-radius: 18px; border: 1px solid rgba(40, 16, 34, 0.10); background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 32px rgba(31, 8, 22, 0.08); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; } .profile-social-link:hover, .profile-social-link:focus-visible { outline: none; transform: translateY(-1px); border-color: rgba(255, 121, 190, 0.30); box-shadow: 0 22px 40px rgba(31, 8, 22, 0.10); background: rgba(255, 255, 255, 0.86); } .ps-icon { width: 44px; height: 44px; border-radius: 999px; padding: 9px; /* a bit more air inside ring */ object-fit: contain; /* match social ring style */ border: 2px solid transparent; background-image: linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)), linear-gradient(135deg, rgba(255,121,190,0.95), rgba(184,162,255,0.95), rgba(143,232,255,0.85)); background-origin: border-box; background-clip: padding-box, border-box; } .ps-icon svg { width: 22px; height: 22px; } .ps-text { display: grid; gap: 2px; } .ps-title { font-weight: 800; font-size: 1.02rem; } .ps-sub { font-size: 0.84rem; color: rgba(34, 18, 32, 0.60); } .ps-arrow { color: rgba(34, 18, 32, 0.45); padding-left: 10px; } .avatar-wrap { display: grid; place-items: center; position: relative; } .profile-text { display: grid; gap: 4px; } .profile h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.12; letter-spacing: -0.01em; } .profile p { margin: 0; line-height: 1.42; } .bio { margin-top: 6px; color: var(--muted); font-size: 0.92rem; } .bio-mail { color: rgba(196, 83, 158, 0.95); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(196, 83, 158, 0.35); transition: color .14s ease, border-color .14s ease; } .bio-mail:hover, .bio-mail:focus-visible { outline: none; color: rgba(196, 83, 158, 1); border-bottom-color: rgba(196, 83, 158, 0.7); } .muted { color: var(--muted); } .avatar { width: 82px; height: 82px; border-radius: 999px; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 10px rgba(255, 121, 190, 0.14), 0 0 0 18px rgba(184, 162, 255, 0.10), 0 14px 30px rgba(31, 8, 22, 0.12); } .avatar-live { border-color: rgba(145, 70, 255, 0.95); /* Twitch purple */ box-shadow: 0 0 0 10px rgba(145, 70, 255, 0.18), 0 0 0 18px rgba(255, 121, 190, 0.10), 0 18px 40px rgba(31, 8, 22, 0.16); } .live-badge { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 6px 9px; border-radius: 8px; color: #fff; background: #ff2d55; border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 12px 24px rgba(0,0,0,0.22); animation: livePulse 2s ease-in-out infinite; } /* Schedule: live/offline badge only for the newest upcoming item */ .schedule-item { position: relative; } .schedule-item .live-pill{ flex: 0 0 auto; margin-left: auto; font-size: 0.72rem; padding: 7px 10px; border-radius: 999px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(40, 16, 34, 0.10); background: rgba(255, 255, 255, 0.60); color: rgba(34,18,32,0.70); } .schedule-item .live-pill.is-live{ border-color: rgba(255,255,255,0.70); background: linear-gradient(90deg, #ff2d55 0%, #ff5ea8 100%); color: #fff; box-shadow: 0 12px 24px rgba(255, 45, 85, 0.22); animation: livePulse 2s ease-in-out infinite; } /* Subtle live heartbeat — pulse the glow, never a strobe */ @keyframes livePulse { 0%, 100% { box-shadow: 0 12px 24px rgba(255, 45, 85, 0.22); opacity: 1; } 50% { box-shadow: 0 12px 30px rgba(255, 45, 85, 0.42); opacity: 0.92; } } .schedule-item .live-pill.is-offline{ border-color: rgba(34,18,32,0.10); background: rgba(255, 255, 255, 0.55); color: rgba(34,18,32,0.62); } @media (max-width: 560px) { .live-badge { bottom: -8px; } } /* --- Live frame: glowing Twitch-purple border around the whole window when streaming --- */ .live-frame { position: fixed; inset: 0; z-index: 60; pointer-events: none; border-radius: 10px; box-shadow: inset 0 0 0 2.5px rgba(145, 70, 255, 0.82), inset 0 0 22px rgba(145, 70, 255, 0.32), inset 0 0 60px rgba(145, 70, 255, 0.16); animation: liveFrame 2.6s ease-in-out infinite; } @keyframes liveFrame { 0%, 100% { box-shadow: inset 0 0 0 2.5px rgba(145, 70, 255, 0.78), inset 0 0 20px rgba(145, 70, 255, 0.26), inset 0 0 55px rgba(145, 70, 255, 0.13); } 50% { box-shadow: inset 0 0 0 3px rgba(145, 70, 255, 0.95), inset 0 0 32px rgba(145, 70, 255, 0.44), inset 0 0 80px rgba(145, 70, 255, 0.22); } } /* Clickable "live" banner pill, top-center */ .live-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 61; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(90deg, #9146ff 0%, #b77bff 100%); color: #fff; font-weight: 700; font-size: 0.82rem; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 30px rgba(145, 70, 255, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.16s ease, box-shadow 0.16s ease; } .live-banner:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 16px 38px rgba(145, 70, 255, 0.52); } .live-banner .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: liveDot 1.6s ease-out infinite; } @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* Give the banner some room so it doesn't sit on the card */ body.is-live .page { margin-top: 30px; } @media (max-width: 560px) { .live-banner { top: 10px; font-size: 0.78rem; padding: 8px 14px; } body.is-live .page { margin-top: 26px; } } /* Updates */ .updates { padding: 18px; } .updates-head { text-align: center; margin-bottom: 10px; } .updates-kicker { font-size: 0.78rem; color: rgba(108, 70, 120, 0.62); letter-spacing: 0.14em; text-transform: uppercase; } .updates-sub { margin-top: 2px; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; color: rgba(34, 18, 32, 0.92); } .updates-list { display: grid; gap: 10px; } .update { border: 1px solid rgba(40, 16, 34, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.68); padding: 10px 12px; } /* Post header — Twitch-style: round avatar + name·badge over muted timestamp */ .update-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; } .update-avatar { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(145, 70, 255, 0.32); box-shadow: 0 2px 8px rgba(31, 8, 22, 0.10); } .update-meta { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; } .update-author { display: flex; align-items: center; gap: 6px; } .twitch-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: rgba(34, 18, 32, 0.92); } .update-badge { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; } .twitch-date { font-size: 0.76rem; font-weight: 500; line-height: 1.2; color: rgba(34, 18, 32, 0.5); } .update-img { width: 100%; height: auto; display: block; margin-top: 8px; border-radius: 16px; border: 1px solid rgba(40, 16, 34, 0.08); box-shadow: 0 18px 32px rgba(31, 8, 22, 0.10); } .update-text { margin-top: 8px; color: rgba(34, 18, 32, 0.92); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } /* 7TV emote inline w tekscie wpisu */ .emote { height: 30px; width: auto; vertical-align: middle; margin: -2px 1px 0; } .update-link { color: #8a3ffb; font-weight: 600; text-decoration: none; word-break: break-all; } .update-link:hover { text-decoration: underline; } /* Player wideo (YouTube / Twitch) — klik "Odtwórz" wczytuje iframe */ .video-card { margin-top: 10px; border-radius: 16px; overflow: hidden; position: relative; background: #0c0612; border: 1px solid rgba(145, 70, 255, 0.22); } .video-play { display: block; width: 100%; padding: 0; border: none; cursor: pointer; position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(145, 70, 255, 0.30), rgba(255, 121, 190, 0.22)); } .video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .video-play-badge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; background: rgba(16, 8, 22, 0.34); transition: background 0.16s ease; } .video-play:hover .video-play-badge { background: rgba(16, 8, 22, 0.20); } .video-card.is-playing .video-play { display: none; } .video-title { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 10px 12px 20px; background: linear-gradient(rgba(8, 4, 12, 0.80), rgba(8, 4, 12, 0)); color: #fff; font-weight: 600; font-size: 0.86rem; line-height: 1.3; text-align: left; pointer-events: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-play-icon { width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; padding-left: 4px; /* optyczne wysrodkowanie trojkata */ background: rgba(145, 70, 255, 0.95); box-shadow: 0 12px 30px rgba(145, 70, 255, 0.55); } .video-play-label { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; } .video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: auto; min-height: 0; padding: 6px 11px; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer; font-size: 0.82rem; line-height: 1; } .video-close:hover { background: rgba(0, 0, 0, 0.8); } /* Infinite scroll: wskaznik ladowania wpisow */ .updates-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 4px; color: rgba(34, 18, 32, 0.55); font-size: 0.85rem; font-weight: 600; } .updates-spinner { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(145, 70, 255, 0.25); border-top-color: rgba(145, 70, 255, 0.9); animation: updatesSpin 0.7s linear infinite; } @keyframes updatesSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .updates-spinner { animation: none; } } @media (prefers-reduced-motion: reduce) { .video-play-badge { transition: none; } } .reactions { display: flex; gap: 10px; margin-top: 10px; align-items: center; justify-content: flex-end; } .react-btn { border: none; background: transparent; border-radius: 999px; min-height: 44px; padding: 4px 8px; margin-left: -8px; display: inline-flex; gap: 8px; align-items: center; font-weight: 800; cursor: pointer; line-height: 1; transition: transform .16s ease; } .react-btn:hover .react-emoji { border-color: rgba(255,121,190,0.38); background: rgba(255, 121, 190, 0.16); } .react-btn:active { transform: scale(0.94); } .react-emoji { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: rgba(34, 18, 32, 0.05); border: 1px solid rgba(34, 18, 32, 0.10); font-size: 0.95rem; filter: grayscale(1); opacity: 0.5; transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease, opacity .16s ease; } /* Niepolubione: lekko rozjasnij na hover (zacheta do kliku) */ .react-btn:not(.is-liked):hover .react-emoji { filter: grayscale(0.25); opacity: 0.85; } /* Polubione (z pamieci lub po kliknieciu): pelny czerwony + rozowe tlo */ .react-btn.is-liked .react-emoji { background: rgba(255, 121, 190, 0.14); border-color: rgba(255, 121, 190, 0.30); filter: none; opacity: 1; } /* Heart-pop micro-bounce when JS toggles .pop on tap */ .react-emoji.pop { animation: heartPop .32s ease; } @keyframes heartPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } /* hover handled on .react-emoji */ .react-count { font-size: 0.82rem; color: rgba(34,18,32,0.70); min-width: 10px; text-align: left; } /* Links */ .section-title { padding: 0 6px; } .section-title h2 { margin: 6px 0 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(34, 18, 32, 0.55); } .schedule { padding: 18px; } .schedule-details { width: 100%; } .schedule-summary { /* Make true centering: reserve equal space on both sides */ --side-pad: 92px; /* badge + chevron area */ list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; /* center the title block */ gap: 10px; padding-left: var(--side-pad); padding-right: var(--side-pad); } /* left spacer (mirrors the right controls width) */ .schedule-summary::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: calc(var(--side-pad) - 12px); height: 1px; opacity: 0; pointer-events: none; } .schedule-summary > div:first-child { text-align: center; } .schedule-summary::-webkit-details-marker { display: none; } .schedule-summary::after { content: '▾'; font-size: 1rem; color: rgba(34, 18, 32, 0.45); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); transform-origin: center; transition: transform .16s ease; line-height: 1; } details[open] > .schedule-summary::after { transform: translateY(-50%) rotate(180deg); } /* spacing for content inside details */ details .schedule-empty, details .schedule-list { margin-top: 10px; } .schedule-kicker { font-size: 0.78rem; color: rgba(108, 70, 120, 0.62); letter-spacing: 0.14em; text-transform: uppercase; } .schedule h2 { margin: 2px 0 0; font-size: 1.1rem; letter-spacing: -0.01em; } .schedule-badge { font-size: 0.72rem; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 121, 190, 0.22); background: rgba(255, 121, 190, 0.10); color: rgba(34, 18, 32, 0.70); white-space: nowrap; position: absolute; right: 40px; /* leave space for chevron */ top: 50%; transform: translateY(-50%); } .schedule-empty { margin: 10px 0 0; } .schedule-list { display: grid; gap: 10px; margin-top: 10px; } /* Accordion: JS animates max-height on toggle; opacity rides along */ .schedule-details .schedule-list { overflow: hidden; transition: max-height .32s ease, opacity .25s ease; } .schedule-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(40, 16, 34, 0.08); background: rgba(255, 255, 255, 0.72); text-decoration: none; transition: transform .14s ease, border-color .14s ease, background .14s ease; } .schedule-item:hover { transform: translateY(-1px); border-color: rgba(255, 121, 190, 0.26); background: rgba(255, 255, 255, 0.82); } .schedule-time { flex: 0 0 auto; width: 74px; text-align: left; font-weight: 700; font-size: 0.86rem; line-height: 1.2; color: rgba(34, 18, 32, 0.80); } .schedule-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; text-align: left; } .schedule-title { font-weight: 600; font-size: 1.02rem; color: rgba(34, 18, 32, 0.92); } .schedule-note { margin-top: 1px; font-size: 0.82rem; color: rgba(34, 18, 32, 0.62); } @media (max-width: 420px) { .schedule-item { gap: 11px; padding: 11px 12px; } .schedule-time { width: 66px; } } .schedule-footer { margin-top: 12px; text-align: center; } .small { font-size: 0.86rem; color: rgba(34, 18, 32, 0.70); border-bottom: 1px solid rgba(34, 18, 32, 0.25); text-decoration: none; } .social-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .social-btn { width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(255, 121, 190, 0.22); background: rgba(255, 255, 255, 0.62); box-shadow: 0 14px 28px rgba(31, 8, 22, 0.10); display: grid; place-items: center; text-decoration: none; transition: transform .14s ease, border-color .14s ease, background .14s ease; } .social-btn:hover, .social-btn:focus-visible { outline: none; transform: translateY(-1px); border-color: rgba(255, 121, 190, 0.35); background: rgba(255, 255, 255, 0.78); } .social-btn:active { transform: translateY(0px) scale(0.98); } .social-icon { width: 28px; height: 28px; border-radius: 999px; } /* keep old .links styles (if you re-enable cards later) */ .links { display: grid; gap: 12px; } .link { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 12px 13px; text-decoration: none; color: rgba(34, 18, 32, 0.92); border-radius: 18px; border: 1px solid rgba(40, 16, 34, 0.10); background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 32px rgba(31, 8, 22, 0.10); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; } .link::before { content: ""; position: absolute; inset: -1px; opacity: 0; background: linear-gradient(120deg, rgba(255, 121, 190, 0.16), rgba(184, 162, 255, 0.14), rgba(143, 232, 255, 0.10), transparent 70%); transition: opacity .16s ease; } .link:hover, .link:focus-visible { transform: translateY(-1px); border-color: rgba(255, 121, 190, 0.30); box-shadow: 0 22px 40px rgba(31, 8, 22, 0.14); background: rgba(255, 255, 255, 0.96); outline: none; } .link:hover::before, .link:focus-visible::before { opacity: 1; } .link:active { transform: translateY(0px) scale(0.99); } .icon { width: 44px; height: 44px; border-radius: 999px; padding: 10px; object-fit: contain; background: rgba(255, 121, 190, 0.12); border: 1px solid rgba(255, 121, 190, 0.22); box-shadow: 0 12px 24px rgba(31, 8, 22, 0.10); } .icon-svg { display: grid; place-items: center; color: transparent; background: transparent; } .icon-svg svg { width: 26px; height: 26px; } .title { font-weight: 700; font-size: 1.02rem; } .subtitle { margin-top: 3px; font-size: 0.84rem; color: var(--muted); } .chev { font-size: 1.15rem; color: rgba(34, 18, 32, 0.45); padding-left: 10px; } /* Admin link footer */ .admin-link { text-align: center; font-size: 0.88rem; color: var(--muted); } .admin-link a, .toolbar a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } /* Admin UI */ .admin-page { width: min(980px, calc(100% - 28px)); } .admin-card { padding: 18px; background: rgba(255,255,255,0.85); } .admin-card h1, .admin-card h2 { color: rgba(34,18,32,0.95); } .admin-card .muted { color: rgba(34,18,32,0.62); } .admin-card a { color: rgba(34,18,32,0.75); } .admin-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; } .admin-nav a { border: 1px solid rgba(255,121,190,0.22); background: rgba(255,255,255,0.70); padding: 6px 10px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 0.86rem; } .admin-section { border: 1px solid rgba(40, 16, 34, 0.08); border-radius: 16px; padding: 12px; background: rgba(255, 255, 255, 0.68); } h2 { margin: 18px 0 10px; font-size: 1.2rem; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .form-grid { display: grid; gap: 9px; margin-bottom: 14px; } label { display: grid; gap: 6px; font-size: 0.9rem; color: rgba(34, 18, 32, 0.78); } .admin-page { background: transparent; } input, textarea, button { width: 100%; border: 1px solid rgba(34, 18, 32, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: rgba(34, 18, 32, 0.92); padding: 10px 11px; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: rgba(255, 121, 190, 0.55); box-shadow: 0 0 0 4px rgba(255, 121, 190, 0.18); } textarea { min-height: 92px; resize: vertical; } button { cursor: pointer; font-weight: 800; background: linear-gradient(120deg, rgba(255, 134, 200, 0.75), rgba(189, 166, 255, 0.62), rgba(127, 232, 255, 0.42)); } /* Floating push bubble (mini dymek) */ .push-fab { position: fixed; left: 14px; bottom: 16px; top: auto; transform: none; z-index: 50; /* override global button{width:100%} */ width: auto; max-width: min(280px, calc(100vw - 28px)); border: 1px solid rgba(145, 70, 255, 0.35); border-radius: 999px; padding: 9px 16px 9px 9px; background: linear-gradient(120deg, rgba(255,255,255,0.94), rgba(243,233,255,0.94)); color: rgba(34,18,32,0.92); font-weight: 800; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 14px 34px rgba(145, 70, 255, 0.28); animation: pushNudge 3.4s ease-in-out infinite; } .push-fab:hover { border-color: rgba(145, 70, 255, 0.5); box-shadow: 0 18px 42px rgba(145, 70, 255, 0.42); } @keyframes pushNudge { 0%, 90%, 100% { transform: translateY(0); } 95% { transform: translateY(-3px); } } .push-fab-icon { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 1.05rem; background: linear-gradient(135deg, #9146ff, #b77bff); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 6px 16px rgba(145, 70, 255, 0.45); animation: pushTwinkle 2.4s ease-in-out infinite; } @keyframes pushTwinkle { 0%, 100% { box-shadow: 0 6px 16px rgba(145, 70, 255, 0.40); } 50% { box-shadow: 0 6px 22px rgba(145, 70, 255, 0.72); } } .push-fab-text { font-size: 0.84rem; line-height: 1.15; letter-spacing: -0.01em; text-align: left; } @media (max-width: 560px) { .push-fab { padding: 8px 13px 8px 8px; } .push-fab-text { font-size: 0.74rem; max-width: 148px; } .push-fab-icon { width: 30px; height: 30px; } } button:hover { border-color: rgba(255, 255, 255, 0.30); } .link-form { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.05); } .inline { display: flex; align-items: center; gap: 8px; } .inline input { width: auto; } .delete-form { margin-bottom: 15px; } .danger { background: rgba(255, 126, 152, 0.18); border-color: rgba(255, 126, 152, 0.52); } .success, .error { border-radius: 10px; padding: 8px 10px; } .success { border: 1px solid rgba(109, 240, 183, 0.45); background: rgba(109, 240, 183, 0.10); } .error { border: 1px solid rgba(255, 126, 152, 0.50); background: rgba(255, 126, 152, 0.12); } @media (max-width: 560px) { .page { margin-top: 16px; } .profile { grid-template-columns: 1fr; text-align: center; } .avatar { margin: 0 auto; } .link { grid-template-columns: 52px 1fr auto; } } @media (prefers-reduced-motion: reduce) { .link { transition: none; } .link:hover, .link:focus-visible { transform: none; } /* Kill the live heartbeat + heart-pop */ .live-badge, .schedule-item .live-pill.is-live, .live-frame, .live-banner .live-dot, .react-emoji.pop { animation: none; } /* Reveal + accordion: snap, don't animate */ body.reveal-on .card { opacity: 1; transform: none; } .card.is-revealed { transition: none; } .social-details .profile-social-list, .schedule-details .schedule-list { transition: none; } /* No transform-based hover/active motion */ .social-icon, .social-summary, .profile-social-link, .schedule-item, .social-btn, .react-btn, .react-emoji, .push-fab { transition: none; } .push-fab, .push-fab-icon { animation: none; } .social-icon:hover, .social-icon:focus-visible, .social-summary:hover, .profile-social-link:hover, .profile-social-link:focus-visible, .schedule-item:hover, .social-btn:hover, .social-btn:focus-visible, .social-btn:active, .react-btn:active { transform: none; } } /* ============ Webhook registration page ============ */ .wh-back { display: inline-block; margin-bottom: 14px; font-size: 0.86rem; font-weight: 600; color: rgba(34, 18, 32, 0.62); text-decoration: none; } .wh-back:hover { color: rgba(34, 18, 32, 0.9); } .wh-title { margin: 0 0 8px; font-size: 1.42rem; font-weight: 800; letter-spacing: -0.01em; } .wh-lead { margin: 0 0 18px; font-size: 0.96rem; line-height: 1.5; color: rgba(34, 18, 32, 0.74); } .wh-lead strong { font-weight: 700; } .wh-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; font-size: 0.9rem; font-weight: 600; line-height: 1.4; } .wh-ok { background: rgba(46, 196, 132, 0.16); color: #15824f; border: 1px solid rgba(46, 196, 132, 0.35); } .wh-err { background: rgba(255, 45, 85, 0.12); color: #c01f43; border: 1px solid rgba(255, 45, 85, 0.30); } .wh-form { display: flex; flex-direction: column; gap: 14px; } .wh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wh-field { display: flex; flex-direction: column; gap: 6px; text-align: left; } .wh-label { font-size: 0.8rem; font-weight: 600; color: rgba(34, 18, 32, 0.66); } .wh-input { min-height: 44px; padding: 11px 14px; font-size: 16px; font-family: inherit; color: #221220; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(40, 16, 34, 0.16); border-radius: 14px; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .wh-input:focus { outline: none; border-color: rgba(145, 70, 255, 0.8); box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.14); } .wh-btn { min-height: 48px; margin-top: 2px; padding: 12px 20px; font-size: 1rem; font-weight: 700; font-family: inherit; color: #fff; background: linear-gradient(90deg, #9146ff 0%, #b77bff 100%); border: none; border-radius: 14px; cursor: pointer; box-shadow: 0 12px 28px rgba(145, 70, 255, 0.34); transition: transform 0.16s ease, box-shadow 0.16s ease; } .wh-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(145, 70, 255, 0.44); } .wh-btn:active { transform: translateY(0); } .wh-count { margin: 14px 0 0; font-size: 0.82rem; color: rgba(34, 18, 32, 0.55); text-align: center; } .wh-payload { margin-top: 18px; text-align: left; } .wh-payload summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: rgba(34, 18, 32, 0.7); padding: 8px 0; } .wh-code { margin: 8px 0 0; padding: 14px; border-radius: 14px; background: rgba(24, 12, 28, 0.9); color: #eadcff; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.5; overflow-x: auto; white-space: pre; } .wh-hint { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.45; color: rgba(34, 18, 32, 0.58); } .wh-hint code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.74rem; background: rgba(40, 16, 34, 0.08); padding: 1px 5px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .wh-input, .wh-btn { transition: none; } .wh-btn:hover { transform: none; } }