/* SmartV Wizualizacje – animacje kart NFC (strona i podgląd w wp-admin). Wszystkie wymiary w jednostce --u = 1/100 szerokości wizualizacji (ustawia skrypt). */ .svz { --u: 4px; --svz-c1: #14b8a6; --svz-c2: #7c3aed; --svz-grad: linear-gradient(135deg, var(--svz-c1), var(--svz-c2)); position: relative; /* Szerokość z projektu, ale nigdy szerzej niż miejsce na stronie – także w kontenerach flex (Elementor), które dopasowują się do zawartości: wtedy „100%” nie działa, więc limitem jest też szerokość ekranu (--svz-fit poprawia skrypt, gdy kolumna ma większe marginesy). */ width: var(--svz-max, 420px); max-width: min(100%, var(--svz-fit, calc(100vw - 32px))) !important; /* motywy blokowe nadpisują max-width treści */ min-width: 0; margin: 0 auto; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.25; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: 100%; /* iPhone nie powiększa napisów na własną rękę */ text-size-adjust: 100%; } .svz *, .svz *::before, .svz *::after { box-sizing: border-box; } /* Osobna szerokość na telefonie (opcjonalna, z ustawień projektu). */ @media (max-width: 767px) { .svz { width: var(--svz-max-m, var(--svz-max, 420px)); } } /* Karta wlatująca z boku nie poszerza strony (bez poziomego przewijania na telefonie). */ .svz--phone { overflow: hidden; overflow-x: clip; overflow-y: visible; } .svz--align-left { margin-left: 0; } .svz--align-right { margin-right: 0; } .svz img { max-width: none; border: 0; box-shadow: none; } /* ------------------------------------------------------------------ karta */ .svz-card { position: absolute; width: calc(var(--u) * var(--cw)); height: calc(var(--u) * var(--ch)); transform-style: preserve-3d; border-radius: calc(var(--u) * var(--cw) * 0.045); } .svz-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #1b1f27; } .svz-face img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Grubość karty: przód i tył odsunięte o połowę grubości, między nimi warstwy w kolorze krawędzi. */ .svz-card { --t: max(3px, calc(var(--u) * var(--long) * 0.00888)); } .svz-face--front { transform: translateZ(calc(var(--t) / 2 + 0.2px)); filter: brightness(var(--svz-sf, 1)); } .svz-face--back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2 + 0.2px)); filter: brightness(var(--svz-sb, 1)); } .svz-slice { position: absolute; inset: 0; border-radius: inherit; background: var(--edge, #e0e2e5); transform: translateZ(calc(var(--t) * var(--k))); } /* Odblask przesuwający się po karcie. */ .svz-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 65%); background-size: 250% 100%; background-position: var(--svz-glare, 50%) 0; pointer-events: none; } /* Karta bez projektu – elegancka zastępcza. */ .svz-face--fallback { display: flex; flex-direction: column; justify-content: flex-end; padding: 8%; background: radial-gradient(120% 90% at 100% 0%, var(--svz-c2) 0%, rgba(124, 58, 237, 0) 60%), radial-gradient(120% 90% at 0% 100%, var(--svz-c1) 0%, rgba(20, 184, 166, 0) 55%), #10131a; color: #fff; } .svz-face--fallback b { display: block; font-size: calc(var(--u) * var(--cw) * 0.075); font-weight: 700; letter-spacing: -0.01em; } .svz-face--fallback span { display: block; margin-top: 2%; font-size: calc(var(--u) * var(--cw) * 0.045); opacity: 0.8; } .svz-face--back.svz-face--fallback { align-items: center; justify-content: center; } .svz-face--back.svz-face--fallback b { font-size: calc(var(--u) * var(--cw) * 0.1); } /* ------------------------------------------------------------------ obrót */ .svz-stage { position: relative; width: 100%; perspective: calc(var(--u) * 260); } .svz--spin .svz-stage, .svz--hover .svz-stage, .svz--scroll .svz-stage { height: calc(var(--u) * var(--sh)); touch-action: pan-y; cursor: grab; } .svz--spin .svz-stage.is-static, .svz--hover .svz-stage, .svz--scroll .svz-stage { cursor: default; } .svz--hover .svz-stage.is-clickable { cursor: pointer; } .svz--spin .svz-stage.is-dragging { cursor: grabbing; } .svz--spin .svz-card, .svz--hover .svz-card, .svz--scroll .svz-card { left: 50%; top: 50%; margin-left: calc(var(--u) * var(--cw) / -2); margin-top: calc(var(--u) * var(--ch) / -2 - var(--u) * 3); } .svz-floor { position: absolute; left: 50%; bottom: calc(var(--u) * 2); width: calc(var(--u) * var(--cw) * 0.8); height: calc(var(--u) * 4); margin-left: calc(var(--u) * var(--cw) * -0.4); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)); transform: scaleX(var(--svz-floor, 1)); pointer-events: none; } .svz.no-shadow .svz-floor, .svz.no-shadow .svz-tip { display: none; } /* ------------------------------------------------------------------ bączek */ .svz--corner .svz-stage { height: calc(var(--u) * var(--sh)); } .svz-pivot { position: absolute; left: 50%; bottom: calc(var(--u) * 6); width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; } .svz--corner .svz-card { left: calc(var(--u) * var(--ox) * -1); top: calc(var(--u) * var(--oy) * -1); transform-origin: calc(var(--u) * var(--ox)) calc(var(--u) * var(--oy)); transform: rotateZ(var(--rot)); } .svz-tip { position: absolute; left: 50%; bottom: calc(var(--u) * 3.4); width: calc(var(--u) * 30); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -15); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); pointer-events: none; } /* ------------------------------------------------------------------ karta + telefon */ .svz--phone .svz-stage { height: calc(var(--u) * 122); perspective: none; overflow: visible; } .svz--phone .svz-card { z-index: 1; left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); opacity: 0; transform: translate(calc(var(--u) * 34), calc(var(--u) * 70)) rotate(24deg) scale(0.86); transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; } .svz--phone .svz-card .svz-face { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.3); } .svz.no-shadow.svz--phone .svz-card .svz-face { box-shadow: none; } .svz--phone .is-approach .svz-card { opacity: 1; transform: translate(0, 0) rotate(var(--prot)) scale(1); } .svz--phone .is-leave .svz-card { opacity: 0; transform: translate(calc(var(--u) * -30), calc(var(--u) * 60)) rotate(-28deg) scale(0.86); transition: transform 1s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.8s ease 0.2s; } .svz-phone { position: absolute; z-index: 2; left: calc(var(--u) * 27); top: calc(var(--u) * 14); width: calc(var(--u) * 46); height: calc(var(--u) * 96); padding: calc(var(--u) * 1.1); border-radius: calc(var(--u) * 7); /* Ramka jak w podglądzie „Jak zobaczy odbiorca” w SmartV Core. */ background: #0b0b0c; box-shadow: 0 0 0 calc(var(--u) * 0.45) #2c2e33, 0 0 0 calc(var(--u) * 1.1) #111214, 0 calc(var(--u) * 5) calc(var(--u) * 11) rgba(0, 0, 0, 0.4); } .svz.no-shadow .svz-phone { box-shadow: 0 0 0 calc(var(--u) * 0.45) #2c2e33, 0 0 0 calc(var(--u) * 1.1) #111214; } .svz-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 6); background: radial-gradient(80% 50% at 80% 10%, var(--svz-c2), rgba(0, 0, 0, 0) 70%), radial-gradient(90% 60% at 10% 95%, var(--svz-c1), rgba(0, 0, 0, 0) 70%), #0b1020; background-size: cover; background-position: center; color: #fff; isolation: isolate; /* Wymusza przycięcie do zaokrąglonego ekranu także podczas animacji (bez wystających narożników). */ -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); } .svz-contact, .svz-lock, .svz-dim { border-radius: inherit; } .svz-screen.has-wallpaper { background-color: #000; } .svz-island { position: absolute; z-index: 9; left: 50%; top: calc(var(--u) * 1.3); width: calc(var(--u) * 10.4); height: calc(var(--u) * 3.4); margin-left: calc(var(--u) * -5.2); border-radius: 99px; background: #0b0b0c; box-shadow: 0 0 0 1px #1a1a1c; } .svz-status { position: absolute; z-index: 8; left: 0; right: 0; top: calc(var(--u) * 1.75); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 3.6); font-size: calc(var(--u) * 2.4); font-weight: 600; color: #fff; transition: color 0.3s ease; } .svz-status svg { height: calc(var(--u) * 2); width: auto; fill: currentColor; margin-left: calc(var(--u) * 0.6); } .svz-status__icons { display: flex; align-items: center; } .svz-status__time { visibility: hidden; } .is-open .svz-status__time { visibility: visible; } .svz-stage.svz-screen-light.is-open .svz-status { color: #111; } .svz-dim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.18); } .svz-lock { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 12); text-shadow: 0 1px calc(var(--u) * 1.2) rgba(0, 0, 0, 0.25); transition: transform 0.5s ease, opacity 0.5s ease; } .svz-lock__icon svg { width: calc(var(--u) * 3); height: auto; fill: #fff; opacity: 0.9; } .svz-lock__date { margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 3); font-weight: 500; opacity: 0.92; } .svz-lock__time { font-size: calc(var(--u) * 12.5); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: calc(var(--u) * 0.6); } .svz-lock__hint { position: absolute; bottom: calc(var(--u) * 7); font-size: calc(var(--u) * 2.3); opacity: 0.75; } .is-open .svz-lock { opacity: 0; transform: scale(0.94); } .svz-homebar { position: absolute; z-index: 9; left: 50%; bottom: calc(var(--u) * 1.4); width: calc(var(--u) * 15); height: calc(var(--u) * 0.8); margin-left: calc(var(--u) * -7.5); border-radius: 99px; background: rgba(255, 255, 255, 0.85); transition: background 0.3s ease; } .svz-stage.svz-screen-light.is-open .svz-homebar { background: rgba(0, 0, 0, 0.75); } /* Fala NFC u góry ekranu. */ .svz-nfc { position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * 10); width: 0; height: 0; } .svz-nfc i { position: absolute; left: calc(var(--u) * -6); top: calc(var(--u) * -6); width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.85); opacity: 0; } .is-nfc .svz-nfc i { animation: svz-ring 1.1s ease-out forwards; } .is-nfc .svz-nfc i:nth-child(2) { animation-delay: 0.22s; } .is-nfc .svz-nfc i:nth-child(3) { animation-delay: 0.44s; } @keyframes svz-ring { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } } /* Powiadomienie. */ .svz-notif { position: absolute; z-index: 6; left: calc(var(--u) * 2); right: calc(var(--u) * 2); top: calc(var(--u) * 5.2); display: flex; gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 2.2); border-radius: calc(var(--u) * 4); background: rgba(245, 245, 247, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #111; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(calc(var(--u) * -22)) scale(0.96); transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.3s ease; } .is-notif .svz-notif { opacity: 1; transform: translateY(0) scale(1); } .is-tap .svz-notif { transform: scale(0.97); transition-duration: 0.15s; } .is-open .svz-notif { opacity: 0; transform: scale(1.04); transition: opacity 0.25s ease, transform 0.3s ease; } .svz-appicon { flex: 0 0 auto; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); border-radius: calc(var(--u) * 1.9); overflow: hidden; background: var(--svz-grad); display: flex; align-items: center; justify-content: center; } .svz-appicon img { width: 100%; height: 100%; object-fit: cover; } .svz .svz-appicon .svz-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .svz .svz-appicon svg { display: block; width: calc(var(--u) * 4.7); height: calc(var(--u) * 4.7); max-width: none; } .svz-notif__body { flex: 1 1 auto; min-width: 0; } .svz-notif__top { display: flex; justify-content: space-between; font-size: calc(var(--u) * 2.2); color: #6b6b70; text-transform: uppercase; letter-spacing: 0.02em; } .svz-notif__title { margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 2.8); font-weight: 700; } .svz-notif__text { margin-top: calc(var(--u) * 0.2); font-size: calc(var(--u) * 2.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* „Kliknięcie” – odchodzące kółka. */ .svz-tap { position: absolute; z-index: 7; left: 50%; top: calc(var(--u) * 11.5); width: 0; height: 0; } .svz-tap i { position: absolute; left: calc(var(--u) * -4); top: calc(var(--u) * -4); width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: calc(var(--u) * 0.4) solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.25); opacity: 0; } .svz-tap i + i { background: transparent; } .is-tap .svz-tap i { animation: svz-tap 0.75s ease-out forwards; } .is-tap .svz-tap i:nth-child(2) { animation-delay: 0.12s; } .is-tap .svz-tap i:nth-child(3) { animation-delay: 0.24s; } @keyframes svz-tap { 0% { transform: scale(0.35); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } } /* Kontakt – jak podgląd „Jak zobaczy odbiorca” w SmartV Core. */ .svz-contact { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 7) 0 calc(var(--u) * 3.6); background: #121214; color: #fff; opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(0.96); transform-origin: 50% 10%; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease; pointer-events: none; --svz-tile: #232326; --svz-line: #313135; --svz-label: #8e8e93; --svz-blue: #0a84ff; --svz-note: #e5e5ea; } .svz-stage.svz-screen-light .svz-contact { background: #f2f2f7; color: #111; --svz-tile: #fff; --svz-line: rgba(60, 60, 67, 0.16); --svz-label: #6b6b70; --svz-blue: #007aff; --svz-note: #3a3a3c; } .is-open .svz-contact { opacity: 1; transform: none; } .svz-stage.svz-screen-dark.is-open .svz-status { color: #fff; } .svz-contact__head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 calc(var(--u) * 3) calc(var(--u) * 1.9); text-align: center; } .svz-avatar { flex: 0 0 auto; width: calc(var(--u) * 13.5); height: calc(var(--u) * 13.5); border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #636366, #3a3a3c); color: #fff; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 5.2); font-weight: 600; } .svz-avatar img { width: 100%; height: 100%; object-fit: cover; } .svz-contact__name { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3.9); font-weight: 600; line-height: 1.15; } .svz-contact__job { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 2.3); line-height: 1.25; color: var(--svz-label); } .svz-actions { display: flex; justify-content: center; gap: calc(var(--u) * 1.4); width: 100%; margin-top: calc(var(--u) * 2.4); } .svz-actions > span { flex: 1 1 0; max-width: calc(var(--u) * 11.5); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--u) * 1.6) calc(var(--u) * 0.6) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 2.2); background: var(--svz-tile); color: var(--svz-blue); line-height: 1.2; } /* Ikona i podpis bez procentów i bez „gap” – stałe wymiary, odporne na Safari i style motywu. */ .svz .svz-actions i { flex: 0 0 auto; display: block; position: static; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); margin: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden; } .svz .svz-actions .svz-ico { display: block; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); padding: 0; margin: 0; background: none; } .svz .svz-actions svg { display: block; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); max-width: none; max-height: none; } .svz .svz-actions em { display: block; flex: 0 0 auto; margin: calc(var(--u) * 0.7) 0 0; padding: 0; font-style: normal; font-size: calc(var(--u) * 1.85); line-height: 1.2; font-weight: 600; max-width: 100%; } .svz-rows { flex: 0 1 auto; min-height: 0; margin: 0 calc(var(--u) * 2.2) calc(var(--u) * 2); border-radius: calc(var(--u) * 2.2); background: var(--svz-tile); overflow: hidden; } .svz-row { padding: calc(var(--u) * 1.1) calc(var(--u) * 2.4); border-bottom: 1px solid var(--svz-line); } .svz-row:last-child { border-bottom: 0; } .svz-row small { display: block; font-size: calc(var(--u) * 1.85); color: var(--svz-label); } .svz-row span { display: block; margin-top: calc(var(--u) * 0.3); font-size: calc(var(--u) * 2.45); color: var(--svz-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .svz-row--plain span { color: var(--svz-note); overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; } .svz-save { flex: 0 0 auto; margin: 0 calc(var(--u) * 2.2); padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2.2); background: var(--svz-tile); color: var(--svz-blue); text-align: center; font-size: calc(var(--u) * 2.5); font-weight: 600; } /* ------------------------------------------------------------------ telefon pod kątem */ .svz--tilt .svz-stage { height: calc(var(--u) * 94); } .svz--tilt .svz-phone { left: calc(var(--u) * 27); top: calc(var(--u) * 4); transform: perspective(calc(var(--u) * 240)) rotateX(16deg) rotateY(calc(-26deg * var(--sx, 1))) rotateZ(calc(9deg * var(--sx, 1))) scale(0.76); box-shadow: 0 0 0 calc(var(--u) * 0.45) #2c2e33; } .svz--tilt .svz-pslice:last-of-type { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #5a6069, calc(var(--u) * -4 * var(--sx, 1)) calc(var(--u) * 6) calc(var(--u) * 10) rgba(0, 0, 0, 0.32); } .svz.no-shadow.svz--tilt .svz-pslice:last-of-type { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #5a6069; } .svz--tilt .svz-phone { transform-style: preserve-3d; } .svz--tilt .svz-screen { transform: translateZ(1px); } .svz-pslice { position: absolute; inset: calc(var(--u) * -0.6); border-radius: calc(var(--u) * 7.4); background: linear-gradient(145deg, #3a3d43, #1b1d21 45%, #0e0f11); transform: translateZ(calc(var(--u) * -4.2 * var(--k) - 0.5px)); box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #5a6069; } .svz--tilt .svz-card { transform: translate(calc(var(--u) * 46 * var(--sx, 1)), calc(var(--u) * 26)) perspective(calc(var(--u) * 240)) rotateX(58deg) rotateY(calc(-8deg * var(--sx, 1))) rotateZ(calc(24deg * var(--sx, 1))) scale(0.92); transition: transform 1.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; } .svz--tilt .is-approach .svz-card { transform: translate(0, 0) perspective(calc(var(--u) * 240)) rotateX(16deg) rotateY(calc(-26deg * var(--sx, 1))) rotateZ(calc(14deg * var(--sx, 1))) scale(1); } .svz--tilt .is-leave .svz-card { transform: translate(calc(var(--u) * 50 * var(--sx, 1)), calc(var(--u) * 8)) perspective(calc(var(--u) * 240)) rotateX(50deg) rotateY(calc(-10deg * var(--sx, 1))) rotateZ(calc(28deg * var(--sx, 1))) scale(0.9); } /* ------------------------------------------------------------------ panorama (kadr poziomy) */ .svz--pano .svz-stage { height: calc(var(--u) * 62); } .svz--pano .svz-phone { left: calc(var(--u) * (27 - 19 * var(--sx, 1))); top: calc(var(--u) * -18); transform: perspective(calc(var(--u) * 240)) rotateX(30deg) rotateY(calc(-16deg * var(--sx, 1))) rotateZ(calc(30deg * var(--sx, 1))) scale(0.56); transform-style: preserve-3d; box-shadow: 0 0 0 calc(var(--u) * 0.45) #2c2e33; } .svz--pano .svz-screen { transform: translateZ(1px); } .svz--pano .svz-stage:not(.has-tiles) .svz-phone { left: calc(var(--u) * 27); } .svz--pano .has-tiles .svz-phone { left: calc(var(--u) * (27 - 4 * var(--sx, 1))); transition: left 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); } .svz--pano .has-tiles.is-tiles .svz-phone { left: calc(var(--u) * (27 - 19 * var(--sx, 1))); } .svz--pano .svz-pslice:last-of-type { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #5a6069, calc(var(--u) * -5 * var(--sx, 1)) calc(var(--u) * 8) calc(var(--u) * 12) rgba(0, 0, 0, 0.35); } .svz.no-shadow.svz--pano .svz-pslice:last-of-type { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #5a6069; } .svz--pano .svz-card { transform: translate(calc(var(--u) * 52 * var(--sx, 1)), calc(var(--u) * 18)) perspective(calc(var(--u) * 240)) rotateX(52deg) rotateY(calc(-10deg * var(--sx, 1))) rotateZ(calc(34deg * var(--sx, 1))) scale(0.9); transition: transform 1.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; } .svz--pano .is-approach .svz-card { opacity: 1; transform: translate(0, 0) perspective(calc(var(--u) * 240)) rotateX(30deg) rotateY(calc(-16deg * var(--sx, 1))) rotateZ(calc(36deg * var(--sx, 1))) scale(1); } /* Po otwarciu kontaktu karta szybko znika, odsuwając się w dół (nie dochodzi do krawędzi kadru). */ .svz--pano .is-leave .svz-card { opacity: 0; transform: translate(calc(var(--u) * 14 * var(--sx, 1)), calc(var(--u) * 12)) perspective(calc(var(--u) * 240)) rotateX(40deg) rotateY(calc(-14deg * var(--sx, 1))) rotateZ(calc(36deg * var(--sx, 1))) scale(0.88); transition: transform 0.7s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.4s ease; } .svz-pano-tiles { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .svz-pano-tile, .svz-pano-ok { position: absolute; left: calc(var(--u) * (33 + 27 * var(--sx, 1))); top: calc(var(--u) * var(--ty)); opacity: 0; transform: translateX(calc(var(--u) * -9 * var(--sx, 1))) scale(0.9); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.35s ease; } .svz-pano-tile { display: flex; align-items: center; gap: calc(var(--u) * 1.8); width: calc(var(--u) * 35); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border-radius: calc(var(--u) * 2.6); background: rgba(255, 255, 255, 0.97); color: #111; box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, 0.28); } .svz.no-shadow .svz-pano-tile { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .svz-pano-tile i, .svz-pano-ok i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .svz-pano-tile i { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); background: var(--svz-grad); color: #fff; } .svz .svz-pano-tile .svz-ico, .svz .svz-pano-tile svg { display: block; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); max-width: none; } .svz .svz-pano-ok .svz-ico, .svz .svz-pano-ok svg { display: block; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); max-width: none; } .svz-pano-tile__body { min-width: 0; flex: 1 1 auto; } .svz-pano-tile small { display: block; font-size: calc(var(--u) * 1.8); color: #6b6b70; } .svz-pano-tile span { display: block; margin-top: calc(var(--u) * 0.2); font-size: calc(var(--u) * 2.4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .svz-pano-ok { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: 99px; background: var(--svz-grad); color: #fff; font-size: calc(var(--u) * 2.3); font-weight: 600; white-space: nowrap; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.22); } .svz-pano-ok i { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); background: rgba(255, 255, 255, 0.25); } .is-tiles .svz-pano-tile, .is-tiles .svz-pano-ok { opacity: 1; transform: none; transition-delay: var(--d, 0s); } /* Safari (iPhone, Mac): przezroczystość elementu 3D (preserve-3d) nie działa na jego dzieci, więc karta „schowana” przez opacity zostawała widoczna i ucięta na krawędzi. Chowamy też same ściany karty. */ .svz--phone:not(.svz--update):not(.svz--top) .svz-card > * { opacity: 0; transition: opacity 0.6s ease; } .svz--phone:not(.svz--update):not(.svz--top) .is-approach .svz-card > * { opacity: 1; } .svz--phone:not(.svz--update):not(.svz--top) .is-leave .svz-card > * { opacity: 0; transition: opacity var(--svz-leave-fade, 0.45s ease 0.05s); } .svz--pano { --svz-leave-fade: 0.35s ease; } .svz-noanim .svz-card > * { transition: none !important; } /* ------------------------------------------------------------------ ekran dodatkowy (aparat, statystyki) */ .svz-extra { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; } .is-stats .svz-extra { z-index: 7; } /* ------------------------------------------------------------------ zmiana danych bez nowej karty */ .svz--update .svz-card { z-index: 3; opacity: 1; transform: rotate(-10deg); transition: none; } .svz--update .svz-card .svz-face { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.35); } .svz--update .svz-phone { left: calc(var(--u) * 40); top: calc(var(--u) * 6); } .svz--update .svz-stage { height: calc(var(--u) * 120); } .svz-changing { position: relative; transition: background-color 0.4s ease; } .is-strike .svz-changing, .is-typed:not(.is-done) .svz-changing { background-color: rgba(10, 132, 255, 0.16); } .svz-old { position: relative; display: inline-block !important; } .svz-old::after { content: ""; position: absolute; left: 0; top: 52%; height: 2px; width: 0; background: currentColor; transition: width 0.6s ease; } .is-strike .svz-old::after { width: 100%; } .svz-new { display: inline !important; } .is-typed:not(.is-done) .svz-new::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: currentColor; animation: svz-caret 0.7s steps(1) infinite; } @keyframes svz-caret { 50% { opacity: 0; } } .svz-row .svz-old, .svz-row .svz-new { margin: 0; font-size: inherit; color: inherit; white-space: nowrap; } .svz-badge-upd { position: absolute; z-index: 8; left: 50%; top: calc(var(--u) * 6.2); padding: calc(var(--u) * 0.9) calc(var(--u) * 2.2); border-radius: 99px; background: rgba(48, 209, 88, 0.95); color: #fff; font-size: calc(var(--u) * 2.1); font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(var(--u) * -3)); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .is-done .svz-badge-upd { opacity: 1; transform: translate(-50%, 0); } /* ------------------------------------------------------------------ telefon do karty – widok z góry */ .svz--top .svz-stage { height: calc(var(--u) * 116); } .svz-desk { position: absolute; inset: calc(var(--u) * 4) 0; border-radius: calc(var(--u) * 5); } .svz-desk--light .svz-desk { background: radial-gradient(120% 90% at 30% 20%, #f7f8fa, #e4e6ea); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .svz-desk--dark .svz-desk { background: radial-gradient(120% 90% at 30% 20%, #2a2d33, #15171a); } .svz--top .svz-card { z-index: 1; opacity: 1; transform: rotate(-7deg); transition: none; } .svz--top .svz-card .svz-face { box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(0, 0, 0, 0.25); } .svz--top .svz-phone, .svz-pshadow { left: calc(var(--u) * 27); top: calc(var(--u) * 10); opacity: 0; transform: translate(calc(var(--u) * 52), calc(var(--u) * 46)) rotate(20deg) scale(1.14); transition: transform 1.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; } .svz-pshadow { position: absolute; z-index: 2; width: calc(var(--u) * 46); height: calc(var(--u) * 96); border-radius: calc(var(--u) * 7); background: rgba(0, 0, 0, 0.55); filter: blur(calc(var(--u) * 4)); } .svz--top .is-approach .svz-phone { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(0.84); } .svz--top .is-approach .svz-pshadow { opacity: 0.55; transform: translate(calc(var(--u) * 1.5), calc(var(--u) * 2.5)) rotate(-4deg) scale(0.84); filter: blur(calc(var(--u) * 1.6)); } .svz--top .svz-phone { z-index: 3; } .svz--top .is-leave:not(.is-open) .svz-phone, .svz--top .is-leave:not(.is-open) .svz-pshadow { opacity: 0; transform: translate(calc(var(--u) * -48), calc(var(--u) * -30)) rotate(-22deg) scale(1.14); transition: transform 1s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.8s ease 0.15s; } .svz.no-shadow .svz-pshadow { display: none; } .svz--top .is-leave .svz-card { opacity: 1; transform: rotate(-7deg); } /* ------------------------------------------------------------------ kod QR – aparat */ .svz-cam { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #000; opacity: 0; transition: opacity 0.35s ease; } .is-cam .svz-cam { opacity: 1; } .is-cam .svz-lock { opacity: 0; } .svz-cam__view { position: absolute; inset: 0; background: #2b2f36 center / cover no-repeat; filter: blur(calc(var(--u) * 1.4)) brightness(0.85); transform: scale(1.18); transition: filter 0.6s ease, transform 0.8s ease; } .is-focus .svz-cam__view { filter: none; transform: scale(1.05); } .svz-cam__qr { position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1; padding: 3.5%; border-radius: calc(var(--u) * 1.4); background: #fff; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2) rgba(0, 0, 0, 0.35); } .svz-cam__qr canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } .svz-cam__frame { position: absolute; left: 50%; top: 46%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .is-detect .svz-cam__frame { width: 54%; } .svz-cam__frame i { position: absolute; width: 22%; height: 22%; border: calc(var(--u) * 0.7) solid rgba(255, 255, 255, 0.85); transition: border-color 0.3s ease; } .is-detect .svz-cam__frame i { border-color: #ffd60a; } .svz-cam__frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--u) * 1.6); } .svz-cam__frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: calc(var(--u) * 1.6); } .svz-cam__frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: calc(var(--u) * 1.6); } .svz-cam__frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: calc(var(--u) * 1.6); } .svz-cam__bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); } .svz-cam__zoom { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); border-radius: 99px; background: rgba(0, 0, 0, 0.45); color: #ffd60a; font-size: calc(var(--u) * 2); font-weight: 700; } .svz-cam__shutter { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * 0.6) #000, 0 0 0 calc(var(--u) * 1.1) #fff; } .svz--qr .svz-appicon { background: #2c2c2e; } /* ------------------------------------------------------------------ statystyki – jak „Statystyki” w panelu SmartV */ .svz-stats { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 7.5) calc(var(--u) * 2.4) calc(var(--u) * 4); border-radius: inherit; background: #121214; color: #f2f2f2; opacity: 0; transform: translateX(100%); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } .svz-screen-light .svz-stats { background: #f2f2f7; color: #111; } .is-stats .svz-stats { opacity: 1; transform: none; } .is-stats .svz-contact { opacity: 0; transform: translateX(-30%); } .svz-stats__head small { display: block; font-size: calc(var(--u) * 1.9); color: #8e8e93; text-transform: uppercase; letter-spacing: 0.04em; } .svz-stats__head b { display: block; margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1.2; } .svz-stats__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); } .svz-stats__kpi { display: grid; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.8); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: calc(var(--u) * 2.2); background: rgba(255, 255, 255, 0.04); } .svz-screen-light .svz-stats__kpi { border-color: rgba(0, 0, 0, 0.08); background: #fff; } .svz-stats__kpi span { font-size: calc(var(--u) * 1.8); color: rgba(242, 242, 242, 0.65); } .svz-screen-light .svz-stats__kpi span { color: #6b6b70; } .svz-stats__kpi strong { font-size: calc(var(--u) * 4.4); font-weight: 700; font-variant-numeric: tabular-nums; } .svz-stats__chart { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; gap: calc(var(--u) * 0.35); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.2) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .svz-stats__chart i { flex: 1 1 0; height: 0; border-radius: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 0; background: linear-gradient(180deg, var(--svz-c1), var(--svz-c2)); transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s); } .is-stats .svz-stats__chart i { height: calc(var(--h) * 100%); } .is-done .svz-stats__chart i:last-child { box-shadow: 0 0 calc(var(--u) * 1.6) var(--svz-c1); } .svz-stats__plus { align-self: flex-end; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.8); border-radius: 99px; background: var(--svz-grad); color: #fff; font-size: calc(var(--u) * 2.1); font-weight: 600; opacity: 0; transform: translateY(calc(var(--u) * 2)); transition: opacity 0.3s ease, transform 0.4s ease; } .is-done .svz-stats__plus { opacity: 1; transform: none; } /* ------------------------------------------------------------------ rozpakowanie z koperty */ .svz--unbox .svz-stage { height: calc(var(--u) * var(--sh)); --env: #1b1d21; --env-ink: rgba(255, 255, 255, 0.82); } .svz-env-white { --env: #f4f2ed !important; --env-ink: rgba(30, 30, 34, 0.75) !important; } .svz-env-kraft { --env: #c7a07a !important; --env-ink: rgba(50, 32, 16, 0.8) !important; } .svz-env-custom { --env-ink: rgba(255, 255, 255, 0.85); } .svz--unbox .svz-floor { --cw: var(--ew); opacity: 0; transition: opacity 0.6s ease; } .svz--unbox .is-free .svz-floor { opacity: 1; } .svz-env { position: absolute; left: 50%; bottom: calc(var(--u) * 7); width: calc(var(--u) * var(--ew)); height: calc(var(--u) * var(--eh)); margin-left: calc(var(--u) * var(--ew) / -2); opacity: 0; transform: translateY(calc(var(--u) * 6)) rotate(-2deg); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; } .is-in .svz-env { opacity: 1; transform: rotate(-2deg); } .svz-env__back, .svz-env__fold, .svz-env__text, .svz-env__shadow { transition: transform 0.8s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.6s ease 0.15s; } .is-free .svz-env__back, .is-free .svz-env__fold, .is-free .svz-env__text, .is-free .svz-env__shadow { opacity: 0; transform: translateY(calc(var(--u) * 26)); } .is-open.is-free .svz-env__flap { opacity: 0; transform: translateY(calc(var(--u) * 26)) perspective(calc(var(--u) * 160)) rotateX(178deg); transition: transform 0.8s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.6s ease 0.15s, z-index 0s; } .svz-env__shadow { position: absolute; left: 4%; right: 4%; bottom: calc(var(--u) * -2.4); height: calc(var(--u) * 5); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); } .svz.no-shadow .svz-env__shadow { display: none; } /* Wnętrze koperty – ciemniejsze niż zakładki. */ .svz-env__back { position: absolute; inset: 0; z-index: 1; border-radius: calc(var(--u) * 0.9); background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12)), var(--env); } .svz-env__card { position: absolute; inset: 0; z-index: 3; perspective: calc(var(--u) * 260); transform-style: preserve-3d; } .svz-env__card .svz-card { transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.25, 1), opacity 0.5s ease; } .svz-env__card .svz-card .svz-face { box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.25); } /* Zakładki boczne i dolna: osobne warstwy z cieniem na krawędzi (cień rzucony na niższą warstwę). */ .svz-env__fold { position: absolute; inset: 0; pointer-events: none; } .svz-env__fold i { position: absolute; inset: 0; border-radius: calc(var(--u) * 0.9); background: var(--env); } .svz-env__fold--left { z-index: 4; filter: drop-shadow(calc(var(--u) * 0.5) 0 calc(var(--u) * 0.7) rgba(0, 0, 0, 0.22)); } .svz-env__fold--left i { clip-path: polygon(0 0, 54% 54%, 0 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.06)), var(--env); } .svz-env__fold--right { z-index: 4; filter: drop-shadow(calc(var(--u) * -0.5) 0 calc(var(--u) * 0.7) rgba(0, 0, 0, 0.22)); } .svz-env__fold--right i { clip-path: polygon(100% 0, 46% 54%, 100% 100%); background: linear-gradient(270deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.06)), var(--env); } .svz-env__fold--bottom { z-index: 5; filter: drop-shadow(0 calc(var(--u) * -0.5) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.25)); } .svz-env__fold--bottom i { clip-path: polygon(0 100%, 0 96%, 44% 46%, 56% 46%, 100% 96%, 100% 100%); background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.07)), var(--env); } .svz-env__text { position: absolute; z-index: 6; left: 0; right: 0; bottom: 9%; text-align: center; color: var(--env-ink); font-size: calc(var(--u) * 2.8); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* Klapa z zaokrąglonym czubkiem i naklejką; otwiera się w 3D i chowa za kartę. */ .svz-env__flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 7; transform-origin: 50% 0; transform: perspective(calc(var(--u) * 160)) rotateX(0deg); transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s linear 0.37s; filter: drop-shadow(0 calc(var(--u) * 0.6) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.28)); } .svz-env__flap i { position: absolute; inset: 0; border-radius: calc(var(--u) * 0.9) calc(var(--u) * 0.9) 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05)), var(--env); clip-path: polygon(0 0, 100% 0, 100% 3%, 56% 94%, 53.5% 99%, 50% 100%, 46.5% 99%, 44% 94%, 0 3%); } .svz-env__seal { position: absolute; left: 50%; top: 80%; width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin: calc(var(--u) * -5) 0 0 calc(var(--u) * -5); border-radius: 50%; background: var(--svz-grad); box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1) rgba(0, 0, 0, 0.3), inset 0 0 0 calc(var(--u) * 0.4) rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity 0.25s ease; } .svz-env__seal .svz-ico { display: block; width: 58%; height: 58%; } .svz-env__seal svg { width: 100%; height: 100%; } .is-open .svz-env__flap { z-index: 2; transform: perspective(calc(var(--u) * 160)) rotateX(178deg); } .is-open .svz-env__flap i { background: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1)), var(--env); } .is-open .svz-env__seal { opacity: 0; } .is-out .svz-env__card .svz-card { transform: translateY(calc(var(--u) * var(--out))); } .is-free .svz-env__card .svz-card { transform: translateY(calc(var(--u) * var(--free))) rotate(2deg) scale(1.08); } .is-flip .svz-env__card .svz-card { transform: translateY(calc(var(--u) * var(--free))) rotate(2deg) scale(1.08) rotateY(180deg); } .is-flip2 .svz-env__card .svz-card { transform: translateY(calc(var(--u) * var(--free))) rotate(2deg) scale(1.08) rotateY(360deg); } .is-free .svz-env__card { z-index: 9; } .is-free .svz-env__card .svz-card { transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.25, 1), opacity 0.5s ease; } .is-hide .svz-env__card .svz-card { opacity: 0; } /* ------------------------------------------------------------------ makiety panelu klienta */ .svz--panel .svz-stage { height: calc(var(--u) * 64); perspective: none; } .svz--panel .is-laptop.is-composite { height: calc(var(--u) * 56); } .svz--panel .is-phoneframe { height: calc(var(--u) * 100); } .svz-laptop { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 1); width: calc(var(--u) * 88); } .is-composite .svz-laptop { left: calc(var(--u) * 4); top: calc(var(--u) * 3); width: calc(var(--u) * 70); } .svz-laptop__lid { position: relative; padding: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 0.6) calc(var(--u) * 0.6); background: #0b0b0c; box-shadow: 0 0 0 calc(var(--u) * 0.3) #2c2e33, 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, 0.28); } .svz-laptop__cam { position: absolute; left: 50%; top: calc(var(--u) * 0.55); width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); margin-left: calc(var(--u) * -0.3); border-radius: 50%; background: #1d2024; } .svz-laptop__screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--u) * 0.5); background: #fff; } .is-dark .svz-laptop__screen { background: #0b0b0b; } .svz-laptop__base { position: relative; height: calc(var(--u) * 2.4); margin: 0 calc(var(--u) * -6); border-radius: 0 0 calc(var(--u) * 3) calc(var(--u) * 3); background: linear-gradient(180deg, #d5d8dc, #b9bdc3 60%, #8f949b); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, 0.22); } .svz-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--u) * 14); height: calc(var(--u) * 0.9); margin-left: calc(var(--u) * -7); border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1); background: #a3a8ae; } .is-composite .svz-laptop__base { margin: 0 calc(var(--u) * -4); } .svz.no-shadow .svz-laptop__lid { box-shadow: 0 0 0 calc(var(--u) * 0.3) #2c2e33; } .svz.no-shadow .svz-laptop__base { box-shadow: none; } /* Film makiety (telefony i tablety) – cały ekran ramki, bez stylów motywu dla