/* ===================================================================== Sony ULT TOWER 5 LP (UNIW) — prefix: ult5- Kod do OSADZENIA w cudzej stronie (Media Expert / euro.com.pl). Izolacja — 5 warstw: 1. każdy selektor zaczyna się od #sony-ult-tower-5.ult5-lp (id + klasa = 1-1-0), więc reguły LP mają co najmniej 1-2-0 i biją typowe reguły hosta, także te z ID (#content p = 1-0-1), 2. reset z `all: revert` wewnątrz roota — kasuje WSZYSTKIE style autorskie hosta i cofa do stylów przeglądarki; reguły LP (1-2-0) stoją wyżej niż reset (1-1-0), więc reset ich nie rusza, 3. zero selektorów znaczników i zero resetów globalnych na zewnątrz, 4. @container zamiast @media — LP mierzy SLOT partnera, nie okno; ten sam kod działa w kolumnie 960 px i na pełnej szerokości, 5. fonty lokalnie w fonts/ — zero zapytań do zewnętrznych serwisów. Kontenery: .ult5-embed-host → "ult5-host" (slot), root → "ult5-lp" (LP). ===================================================================== */ /* Outfit Black (OFL, fonts/LICENSE-Outfit.txt) — duże cyfry mocy: geometryczny grotesk spójny z logo ULT POWER SOUND. Statyczny plik, bo wariant zmienny ma nakładające się kontury i -webkit-text-stroke rysuje je w środku glifu. */ @font-face { font-family: 'Outfit Num'; src: url('fonts/Outfit-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* Manrope 800 lokalnie (ten sam powód: czysty kontur w jednostkach W/h/°) */ @font-face { font-family: 'Manrope Static'; src: url('fonts/Manrope-800-latin.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope Static'; src: url('fonts/Manrope-800-latin-ext.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Manrope (OFL, fonts/OFL-Manrope.txt) — hostowany lokalnie: fragment do osadzenia nie może polegać na do Google Fonts w partnera. */ @font-face { font-family: 'Manrope'; src: url('fonts/Manrope-var-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; src: url('fonts/Manrope-var-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Slot partnera ---------- Mierzy szerokość, jaką strona hosta daje landingowi. Reguły ustawiane NA roocie muszą siedzieć w @container ult5-host — kontener nigdy nie matchuje sam siebie, więc @container ult5-lp ich nie złapie. Slot też jest czyszczony: leży POZA rootem, a właściwości dziedziczone (text-transform, letter-spacing…) przechodzą przez niego do środka. */ #sony-ult-tower-5-host.ult5-embed-host { all: revert; container-type: inline-size; container-name: ult5-host; display: block; width: 100%; margin: 0; padding: 0; } /* ---------- Reset scope'owany do roota ---------- `all: revert` kasuje style autorskie strony hosta (jej p{}, h2{}, img{}, ul{}, a{}, #content *{}) i cofa element do stylów przeglądarki. Poniżej ustawiamy własną bazę. Specyficzność tego bloku to 1-1-0, a każda reguła LP ma 1-2-0, więc reset nie nadpisuje niczego z landingu. */ #sony-ult-tower-5.ult5-lp, #sony-ult-tower-5.ult5-lp *:not(svg *), #sony-ult-tower-5.ult5-lp *::before, #sony-ult-tower-5.ult5-lp *::after { all: revert; /* `svg *` wyłączone: `all` kasuje też atrybuty prezentacyjne SVG (fill="currentColor"), przez co ikony robiły się czarne — czyli niewidoczne */ box-sizing: border-box; margin: 0; padding: 0; } #sony-ult-tower-5.ult5-lp h1, #sony-ult-tower-5.ult5-lp h2, #sony-ult-tower-5.ult5-lp h3, #sony-ult-tower-5.ult5-lp h4, #sony-ult-tower-5.ult5-lp h5, #sony-ult-tower-5.ult5-lp h6 { font-size: inherit; font-weight: inherit; /* każdy nagłówek LP ma własną klasę */ } #sony-ult-tower-5.ult5-lp a { color: inherit; text-decoration: none; } #sony-ult-tower-5.ult5-lp img, #sony-ult-tower-5.ult5-lp video, #sony-ult-tower-5.ult5-lp canvas { max-width: 100%; height: auto; } #sony-ult-tower-5.ult5-lp button, #sony-ult-tower-5.ult5-lp input, #sony-ult-tower-5.ult5-lp select, #sony-ult-tower-5.ult5-lp textarea { font: inherit; color: inherit; background: none; border: 0; } #sony-ult-tower-5.ult5-lp table { border-collapse: collapse; border-spacing: 0; } #sony-ult-tower-5.ult5-lp svg { fill: currentColor; } #sony-ult-tower-5.ult5-lp { --canvas: #07051a; --s1: #100b2a; --s2: #1a1240; --hairline: #2b2352; --ink: #f4f2ff; --muted: #a9a3c9; --accent: #5ce1ff; /* cyjan z gradientu ULT */ --accent2: #7c5cff; /* fiolet z gradientu ULT */ --accent-ink: #07051a; --g-t5: #b455f0; /* ramka T5: magenta/fiolet */ --g-t7: #3fd6d0; /* ramka T7: turkus */ --g-max: #4f7bff; /* ramka MAX: niebieski */ --promo: #ff1f6f; /* mocny róż wlepek promocyjnych */ --promo2: #ff5ea8; --promo-ink: #ffffff; --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-num: 'Outfit Num', 'Manrope', sans-serif; /* duże cyfry mocy */ --radius: 20px; --w-content: 1376px; font-family: var(--font); color: var(--ink); background-color: var(--canvas); width: 100%; margin: 0; overflow-x: clip; /* nic nie wychodzi w bok, a sticky dalej działa — clip, w odróżnieniu od hidden, nie robi z roota kontenera przewijania */ position: relative; /* containing block dla preloadera */ container-type: inline-size; container-name: ult5-lp; isolation: isolate; /* z-indeksy LP nie mieszają się z hostem */ /* Jawna baza właściwości DZIEDZICZONYCH. Bez niej `all: revert` w resecie cofa element do wartości dziedziczonej po stronie hosta — a więc wpuszcza z powrotem jego text-transform, letter-spacing czy text-align. */ font-size: 16px; font-weight: 400; font-style: normal; font-variant: normal; letter-spacing: normal; word-spacing: normal; text-align: left; text-indent: 0; text-transform: none; text-shadow: none; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: manual; direction: ltr; visibility: visible; cursor: auto; tab-size: 8; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Container (szerokości euro.com.pl) ---------- */ #sony-ult-tower-5.ult5-lp .ult5-container { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 2.4rem; } @container ult5-host (max-width: 1440px) { #sony-ult-tower-5.ult5-lp { --w-content: 1218px; } } @container ult5-host (max-width: 1230px) { #sony-ult-tower-5.ult5-lp { --w-content: 960px; } } @container ult5-host (max-width: 960px) { #sony-ult-tower-5.ult5-lp { --w-content: 100%; } } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-container { padding: 0 20px; } } /* ---------- Icons (inline SVG, bez fontów ikon) ---------- */ #sony-ult-tower-5.ult5-lp .ult5-icon { width: 18px; height: 18px; flex: 0 0 auto; } #sony-ult-tower-5.ult5-lp .ult5-icon--lg { width: 34px; height: 34px; } /* ---------- Preloader ---------- */ #sony-ult-tower-5.ult5-lp .ult5-preloader { position: absolute; inset: 0; z-index: 1000; /* absolute, nie fixed — preloader zasłania LP, nie stronę partnera */ background-color: var(--canvas); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .5s ease, visibility .5s ease; } #sony-ult-tower-5.ult5-lp .ult5-preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; } #sony-ult-tower-5.ult5-lp .ult5-preloader-logo { height: 26px; width: auto; } #sony-ult-tower-5.ult5-lp .ult5-preloader-ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hairline); border-top-color: var(--accent); animation: ult5-spin .9s linear infinite; } @keyframes ult5-spin { to { transform: rotate(360deg); } } /* ---------- Header ---------- */ #sony-ult-tower-5.ult5-lp .ult5-header { background-color: transparent; border-bottom: 1px solid transparent; position: sticky; top: 0; z-index: 100; transition: background-color .3s ease, border-color .3s ease; } #sony-ult-tower-5.ult5-lp .ult5-header--scrolled { background-color: rgba(7,5,26,.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom-color: rgba(43,35,82,.6); } #sony-ult-tower-5.ult5-lp .ult5-header-inner { display: flex; align-items: center; justify-content: space-between; height: 110px; max-width: var(--w-content); margin: 0 auto; padding: 22px 2.4rem 0; } #sony-ult-tower-5.ult5-lp .ult5-header-left { display: flex; align-items: center; text-decoration: none; color: var(--ink); } #sony-ult-tower-5.ult5-lp .ult5-header-right { display: flex; align-items: center; } #sony-ult-tower-5.ult5-lp .ult5-logo-sony { height: 26px; width: auto; } #sony-ult-tower-5.ult5-lp .ult5-logo-ult { height: 72px; width: auto; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-header-inner { height: 68px; padding: 0 20px; } #sony-ult-tower-5.ult5-lp .ult5-logo-sony { height: 20px; } #sony-ult-tower-5.ult5-lp .ult5-logo-ult { height: 44px; } } @container ult5-lp (max-width: 600px) { #sony-ult-tower-5.ult5-lp .ult5-header-inner { height: 56px; } #sony-ult-tower-5.ult5-lp .ult5-logo-sony { height: 16px; } #sony-ult-tower-5.ult5-lp .ult5-logo-ult { height: 34px; } } /* ---------- Buttons ---------- */ #sony-ult-tower-5.ult5-lp .ult5-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background-color: var(--accent); color: var(--accent-ink); padding: 15px 28px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 10px 30px rgba(92,225,255,.28); transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; } #sony-ult-tower-5.ult5-lp .ult5-btn-primary:hover { background-color: #86ebff; box-shadow: 0 14px 36px rgba(92,225,255,.4); transform: translateY(-1px); } #sony-ult-tower-5.ult5-lp .ult5-btn-primary:active { transform: scale(.98); } #sony-ult-tower-5.ult5-lp .ult5-btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } #sony-ult-tower-5.ult5-lp .ult5-btn-block { width: 100%; } #sony-ult-tower-5.ult5-lp .ult5-btn-ghost { display: inline-flex; align-items: center; gap: 10px; background-color: transparent; color: var(--ink); border: 1px solid rgba(244,242,255,.22); padding: 14px 24px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, transform .15s ease; } #sony-ult-tower-5.ult5-lp .ult5-btn-ghost:hover { border-color: rgba(244,242,255,.5); background-color: rgba(244,242,255,.05); } #sony-ult-tower-5.ult5-lp .ult5-btn-ghost:active { transform: scale(.98); } /* ---------- Typografia sekcji ---------- */ #sony-ult-tower-5.ult5-lp .ult5-section { padding: 120px 0; position: relative; } #sony-ult-tower-5.ult5-lp .ult5-section-header { max-width: 720px; margin-bottom: 56px; } #sony-ult-tower-5.ult5-lp .ult5-section-title { font-size: clamp(36px, 4.8cqw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; } #sony-ult-tower-5.ult5-lp .ult5-section-desc { font-size: clamp(17px, 1.4cqw, 20px); color: var(--muted); margin: 0; max-width: 56ch; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-section { padding: 80px 0; } #sony-ult-tower-5.ult5-lp .ult5-section-header { margin-bottom: 36px; } } /* --- Flagi w hero: PREMIERA + promocja --- */ #sony-ult-tower-5.ult5-lp .ult5-hero-flags { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 24px; } #sony-ult-tower-5.ult5-lp .ult5-flag { display: inline-flex; flex-direction: column; gap: 3px; justify-content: center; padding: 7px 14px; border-radius: 4px; line-height: 1.1; font-size: 18px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } #sony-ult-tower-5.ult5-lp .ult5-flag b { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .95; } #sony-ult-tower-5.ult5-lp .ult5-flag--premiera { background: linear-gradient(100deg, var(--accent2), var(--accent)); color: #07051a; } /* Kontur "W" — wzorzec z infografik Sony (bold cyfry + outline jednostka) */ #sony-ult-tower-5.ult5-lp .ult5-outline, #sony-ult-tower-5.ult5-lp .ult5-hero-unit, #sony-ult-tower-5.ult5-lp .ult5-stat-unit, #sony-ult-tower-5.ult5-lp .ult5-buy-unit { font-family: 'Outfit Num', var(--font); font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--ink); } /* ===================================================================== HERO ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-hero { position: relative; overflow: hidden; /* contain: paint — sekcja ma tło wideo z transform: scale(), które trafia na własną warstwę kompozycji; samo overflow: hidden nie zawsze ją przycina (sekcja nie tworzyła kontekstu układania) i przy scrollu na mobile wideo wychodziło paskiem pod spodem. */ contain: paint; margin-top: -110px; padding: clamp(150px, 13cqw, 236px) 0 48px; min-height: clamp(680px, 62cqw, 1000px); display: flex; flex-direction: column; justify-content: flex-start; } #sony-ult-tower-5.ult5-lp .ult5-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(1.25); transform: scale(1.12); opacity: .55; pointer-events: none; z-index: 0; } #sony-ult-tower-5.ult5-lp .ult5-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 50% at 78% 62%, rgba(124,92,255,.22) 0%, transparent 70%), linear-gradient(180deg, rgba(7,5,26,.62) 0%, rgba(7,5,26,.72) 45%, var(--canvas) 100%); } #sony-ult-tower-5.ult5-lp .ult5-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 2.4rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; } #sony-ult-tower-5.ult5-lp .ult5-hero-eyebrow { font-size: clamp(17px, 1.5cqw, 21px); font-weight: 600; color: var(--muted); margin-bottom: 22px; } #sony-ult-tower-5.ult5-lp .ult5-hero-title { font-size: clamp(50px, 7.2cqw, 96px); font-weight: 800; line-height: 1.0; letter-spacing: -.04em; margin: 0 0 24px; } #sony-ult-tower-5.ult5-lp .ult5-hero-title-accent { background: linear-gradient(100deg, var(--accent2) 0%, #b7a6ff 45%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #sony-ult-tower-5.ult5-lp .ult5-hero-subtitle { font-size: clamp(17px, 1.4cqw, 20px); color: var(--muted); max-width: 46ch; margin: 0 0 34px; } #sony-ult-tower-5.ult5-lp .ult5-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } @container ult5-lp (max-width: 1230px) { #sony-ult-tower-5.ult5-lp .ult5-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-hero { margin-top: -68px; padding: 108px 0 32px; min-height: 0; } #sony-ult-tower-5.ult5-lp .ult5-hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 0 20px; } } @container ult5-lp (max-width: 600px) { #sony-ult-tower-5.ult5-lp .ult5-hero { margin-top: -56px; padding: 92px 0 28px; } #sony-ult-tower-5.ult5-lp .ult5-hero-flags { gap: 8px; } #sony-ult-tower-5.ult5-lp .ult5-flag { font-size: 15px; padding: 6px 12px; } #sony-ult-tower-5.ult5-lp .ult5-flag b { font-size: 12px; } #sony-ult-tower-5.ult5-lp .ult5-hero-actions { flex-direction: column; gap: 10px; align-items: stretch; } #sony-ult-tower-5.ult5-lp .ult5-hero-actions a { width: 100%; text-align: center; justify-content: center; padding: 16px 20px; font-size: 15px; } } /* ===================================================================== STATS — ściana liczb ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-stats { position: relative; overflow: hidden; contain: paint; padding: 120px 0; background-color: var(--canvas); } #sony-ult-tower-5.ult5-lp .ult5-stats-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: 0; } #sony-ult-tower-5.ult5-lp .ult5-stats::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--canvas) 0%, rgba(7,5,26,.35) 30%, rgba(7,5,26,.35) 70%, var(--canvas) 100%); } #sony-ult-tower-5.ult5-lp .ult5-stats-inner { position: relative; z-index: 2; max-width: var(--w-content); margin: 0 auto; padding: 0 2.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 48px; align-items: start; } #sony-ult-tower-5.ult5-lp .ult5-stat-value { font-family: var(--font-num); font-size: clamp(44px, 5.4cqw, 84px); font-weight: 900; line-height: .95; letter-spacing: -.045em; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; } #sony-ult-tower-5.ult5-lp .ult5-stat-value--text { letter-spacing: -.02em; } #sony-ult-tower-5.ult5-lp .ult5-stat-value sup { font-family: var(--font); font-size: .16em; font-weight: 700; color: var(--muted); opacity: .7; -webkit-text-stroke: 0; margin-left: 4px; vertical-align: super; } #sony-ult-tower-5.ult5-lp .ult5-stat-value { min-height: 1em; } #sony-ult-tower-5.ult5-lp .ult5-stat-unit { font-size: .66em; } #sony-ult-tower-5.ult5-lp .ult5-stat-pre { font-size: .3em; font-weight: 600; color: var(--muted); margin-right: 6px; letter-spacing: 0; align-self: baseline; } #sony-ult-tower-5.ult5-lp .ult5-stat-label { font-size: 15px; color: var(--muted); margin-top: 16px; max-width: 22ch; line-height: 1.45; } @container ult5-lp (max-width: 1230px) { #sony-ult-tower-5.ult5-lp .ult5-stats-inner { grid-template-columns: 1fr 1fr; } } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-stats { padding: 80px 0; } #sony-ult-tower-5.ult5-lp .ult5-stats-inner { padding: 0 20px; gap: 36px 24px; } #sony-ult-tower-5.ult5-lp .ult5-stats-bg { transform: scaleX(-1); object-position: 45% 50%; } } @container ult5-lp (max-width: 480px) { #sony-ult-tower-5.ult5-lp .ult5-stats-inner { grid-template-columns: 1fr; } #sony-ult-tower-5.ult5-lp .ult5-stat-label { max-width: none; } } /* ===================================================================== KV — For The Music (full-bleed) ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-kv { position: relative; overflow: hidden; min-height: clamp(480px, 52cqw, 800px); display: flex; align-items: flex-end; } #sony-ult-tower-5.ult5-lp .ult5-kv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } #sony-ult-tower-5.ult5-lp .ult5-kv-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--canvas) 0%, rgba(7,5,26,0) 22%, rgba(7,5,26,0) 55%, rgba(7,5,26,.88) 100%); } #sony-ult-tower-5.ult5-lp .ult5-kv-text { position: relative; padding-top: 120px; padding-bottom: 72px; } #sony-ult-tower-5.ult5-lp .ult5-kv-title { font-size: clamp(48px, 7cqw, 104px); font-weight: 800; line-height: .98; letter-spacing: -.04em; margin: 0 0 14px; } #sony-ult-tower-5.ult5-lp .ult5-kv-desc { font-size: clamp(17px, 1.5cqw, 21px); color: rgba(244,242,255,.82); margin: 0; max-width: 40ch; } @container ult5-lp (max-width: 720px) { #sony-ult-tower-5.ult5-lp .ult5-kv { min-height: clamp(520px, 145cqw, 680px); } #sony-ult-tower-5.ult5-lp .ult5-kv-img { object-position: 50% 30%; } #sony-ult-tower-5.ult5-lp .ult5-kv-text { padding-bottom: 48px; } } /* ===================================================================== DYPTYK — skatepark / hala ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-duo { padding-bottom: 0; } #sony-ult-tower-5.ult5-lp .ult5-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #sony-ult-tower-5.ult5-lp .ult5-duo-item { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background-color: var(--s1); } #sony-ult-tower-5.ult5-lp .ult5-duo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-duo-item:hover .ult5-duo-img { transform: scale(1.03); } #sony-ult-tower-5.ult5-lp .ult5-duo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 28px; font-size: 15px; font-weight: 700; color: var(--ink); background: linear-gradient(180deg, rgba(7,5,26,0), rgba(7,5,26,.75)); } @container ult5-lp (max-width: 720px) { #sony-ult-tower-5.ult5-lp .ult5-duo-grid { grid-template-columns: 1fr; } #sony-ult-tower-5.ult5-lp .ult5-duo-item { aspect-ratio: 4 / 3; } } /* ===================================================================== FEATURES — bento ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-features { background-color: var(--canvas); } #sony-ult-tower-5.ult5-lp .ult5-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 270px; gap: 18px; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell { position: relative; overflow: hidden; border-radius: var(--radius); background-color: var(--s1); border: 1px solid var(--hairline); } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult { grid-column: span 7; grid-row: span 2; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--clear { grid-column: span 5; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--light { grid-column: span 5; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--battery { grid-column: span 4; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--xlr { grid-column: span 4; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--move { grid-column: span 4; } #sony-ult-tower-5.ult5-lp .ult5-bento-img--contain { object-fit: contain; padding: 34px 34px 96px; background: radial-gradient(60% 55% at 50% 45%, rgba(180,85,240,.16), transparent 70%); } #sony-ult-tower-5.ult5-lp .ult5-bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-bento-cell:hover .ult5-bento-img { transform: scale(1.04); } #sony-ult-tower-5.ult5-lp .ult5-bento-cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,26,0) 30%, rgba(7,5,26,.72) 72%, rgba(7,5,26,.9) 100%); pointer-events: none; } #sony-ult-tower-5.ult5-lp .ult5-bento-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 26px 28px; z-index: 1; } #sony-ult-tower-5.ult5-lp .ult5-bento-title { font-size: clamp(20px, 2cqw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; } #sony-ult-tower-5.ult5-lp .ult5-bento-desc { font-size: 15px; line-height: 1.45; color: rgba(244,242,255,.82); margin: 0; max-width: 44ch; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult .ult5-bento-title { font-size: clamp(26px, 2.6cqw, 34px); } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult .ult5-bento-desc { font-size: 16px; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult .ult5-bento-img { object-position: 60% 40%; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--xlr .ult5-bento-img { object-position: 40% 50%; } @container ult5-lp (max-width: 1230px) { #sony-ult-tower-5.ult5-lp .ult5-bento { grid-auto-rows: 240px; gap: 14px; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult { grid-column: span 12; grid-row: span 1; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--clear, #sony-ult-tower-5.ult5-lp .ult5-bento-cell--light { grid-column: span 6; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--battery, #sony-ult-tower-5.ult5-lp .ult5-bento-cell--xlr { grid-column: span 6; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--move { grid-column: span 12; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult { grid-row: span 1; min-height: 340px; } } @container ult5-lp (max-width: 720px) { #sony-ult-tower-5.ult5-lp .ult5-bento { grid-template-columns: 1fr; grid-auto-rows: 300px; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell { grid-column: span 1 !important; grid-row: span 1 !important; } #sony-ult-tower-5.ult5-lp .ult5-bento-cell--ult { min-height: 380px; } #sony-ult-tower-5.ult5-lp .ult5-bento-text { padding: 20px 20px 22px; } } /* ===================================================================== SOUND CONNECT — split ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-app { background: linear-gradient(180deg, var(--canvas) 0%, #0b0724 50%, var(--canvas) 100%); } #sony-ult-tower-5.ult5-lp .ult5-app-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; } #sony-ult-tower-5.ult5-lp .ult5-app-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } #sony-ult-tower-5.ult5-lp .ult5-app-list li { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-top: 1px solid var(--hairline); } #sony-ult-tower-5.ult5-lp .ult5-app-list strong { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } #sony-ult-tower-5.ult5-lp .ult5-app-list span { font-size: 15px; color: var(--muted); line-height: 1.45; } #sony-ult-tower-5.ult5-lp .ult5-app-media { position: relative; display: flex; justify-content: center; } #sony-ult-tower-5.ult5-lp .ult5-app-glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 130%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(124,92,255,.38) 0%, rgba(124,92,255,.12) 40%, transparent 68%); pointer-events: none; } #sony-ult-tower-5.ult5-lp .ult5-phone { position: relative; width: min(330px, 78%); padding: 12px; border-radius: 46px; background: linear-gradient(160deg, #221a4d, #0f0a26); box-shadow: 0 40px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.6); } #sony-ult-tower-5.ult5-lp .ult5-app-img { width: 100%; height: auto; aspect-ratio: 694 / 1446; border-radius: 34px; display: block; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-app-inner { grid-template-columns: 1fr; gap: 40px; } #sony-ult-tower-5.ult5-lp .ult5-app-list { grid-template-columns: 1fr; } #sony-ult-tower-5.ult5-lp .ult5-phone { width: min(290px, 70%); } } /* ===================================================================== VIDEO + wielki outline'owy napis w tle (marquee) ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-video { overflow: hidden; padding-top: 400px; } #sony-ult-tower-5.ult5-lp .ult5-marquee { position: absolute; top: 40px; left: 0; right: 0; z-index: 0; padding: 40px 0; /* miejsce na glow — inaczej overflow go ucina */ pointer-events: none; user-select: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); } #sony-ult-tower-5.ult5-lp .ult5-marquee-track { display: flex; width: max-content; white-space: nowrap; animation: ult5-marquee 40s linear infinite; will-change: transform; } #sony-ult-tower-5.ult5-lp .ult5-marquee-text { position: relative; display: inline-block; font-family: var(--font-num); font-weight: 900; line-height: 1; font-size: clamp(120px, 15cqw, 290px); letter-spacing: -.03em; /* kontur (v1) */ color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(124,92,255,.75); filter: drop-shadow(0 0 18px rgba(92,225,255,.35)) drop-shadow(0 0 48px rgba(124,92,255,.25)); } /* gradientowy glow pod konturem (rozmyta kopia tekstu w kolorach ramek) */ #sony-ult-tower-5.ult5-lp .ult5-marquee-text::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; -webkit-text-stroke: 0; background: linear-gradient(100deg, var(--g-max) 0%, var(--accent) 30%, var(--accent2) 60%, var(--g-t5) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: blur(14px); opacity: .55; } @keyframes ult5-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } #sony-ult-tower-5.ult5-lp .ult5-video .ult5-container { position: relative; z-index: 1; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-video { padding-top: 200px; } #sony-ult-tower-5.ult5-lp .ult5-marquee { top: 24px; padding: 24px 0; } #sony-ult-tower-5.ult5-lp .ult5-marquee-text { font-size: clamp(76px, 20cqw, 150px); -webkit-text-stroke-width: 1.5px; filter: none; } #sony-ult-tower-5.ult5-lp .ult5-marquee-text::before { filter: blur(9px); opacity: .38; } } /* --- VIDEO frame --- */ #sony-ult-tower-5.ult5-lp .ult5-video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background-color: var(--s1); border: 1px solid var(--hairline); aspect-ratio: 16 / 9; } #sony-ult-tower-5.ult5-lp .ult5-video-el { width: 100%; height: 100%; display: block; object-fit: cover; } #sony-ult-tower-5.ult5-lp .ult5-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; background-color: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 50px rgba(92,225,255,.4); transition: transform .2s ease, opacity .3s ease, background-color .2s ease; } #sony-ult-tower-5.ult5-lp .ult5-video-play:hover { transform: translate(-50%,-50%) scale(1.06); background-color: #86ebff; } #sony-ult-tower-5.ult5-lp .ult5-video-play--hidden { opacity: 0; pointer-events: none; } #sony-ult-tower-5.ult5-lp .ult5-video-play .ult5-icon { margin-left: 4px; } /* ===================================================================== KUP TERAZ — z pętlą wideo w tle (jak hero, mocniej) ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-buy { position: relative; overflow: hidden; contain: paint; } #sony-ult-tower-5.ult5-lp .ult5-buy-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(1.3); transform: scale(1.1); opacity: .75; pointer-events: none; z-index: 0; } #sony-ult-tower-5.ult5-lp .ult5-buy-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--canvas) 0%, rgba(7,5,26,.55) 30%, rgba(7,5,26,.45) 60%, rgba(7,5,26,.85) 100%); } #sony-ult-tower-5.ult5-lp .ult5-buy .ult5-container { position: relative; z-index: 2; } /* ===================================================================== HERO — pojedynczy produkt ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-hero-media { position: relative; align-self: center; display: flex; justify-content: center; } #sony-ult-tower-5.ult5-lp .ult5-hero-pack { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); transition: transform .35s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-hero-pack:hover { transform: translateY(-6px); } #sony-ult-tower-5.ult5-lp .ult5-hero-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 12px; } #sony-ult-tower-5.ult5-lp .ult5-hero-img { height: clamp(300px, 34cqw, 480px); width: auto; position: relative; z-index: 1; filter: drop-shadow(0 34px 44px rgba(0,0,0,.6)); } #sony-ult-tower-5.ult5-lp .ult5-hero-glow { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: 120%; height: 46%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--g-t5) 0%, transparent 68%); opacity: .5; filter: blur(26px); pointer-events: none; animation: ult5-glow-pulse 5s ease-in-out infinite; } @keyframes ult5-glow-pulse { 0%, 100% { opacity: .42; } 50% { opacity: .68; } } #sony-ult-tower-5.ult5-lp .ult5-hero-watt { position: relative; z-index: 2; margin-top: 22px; font-family: var(--font-num); font-size: clamp(46px, 5.2cqw, 78px); font-weight: 900; line-height: 1; letter-spacing: -.045em; display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; } #sony-ult-tower-5.ult5-lp .ult5-hero-unit { font-size: .72em; -webkit-text-stroke: 2px var(--g-t5); } #sony-ult-tower-5.ult5-lp .ult5-hero-sup { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--muted); opacity: .7; -webkit-text-stroke: 0; align-self: flex-start; margin-left: 4px; margin-top: 2px; line-height: 1; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-hero-img { height: clamp(240px, 46cqw, 340px); } #sony-ult-tower-5.ult5-lp .ult5-hero-watt { font-size: 44px; } } /* ===================================================================== 360° ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-spin-box { background-color: var(--s1); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; } #sony-ult-tower-5.ult5-lp .ult5-spin-stage { position: relative; height: clamp(280px, 38cqw, 460px); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; } #sony-ult-tower-5.ult5-lp .ult5-spin-stage:active { cursor: grabbing; } #sony-ult-tower-5.ult5-lp .ult5-spin-img { position: absolute; inset: 0; margin: auto; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .12s linear; } #sony-ult-tower-5.ult5-lp .ult5-spin-img--on { opacity: 1; } #sony-ult-tower-5.ult5-lp .ult5-spin-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 22px; } #sony-ult-tower-5.ult5-lp .ult5-spin-ctrl-label { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; } #sony-ult-tower-5.ult5-lp .ult5-spin-range { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: var(--s2); outline: none; cursor: grab; } #sony-ult-tower-5.ult5-lp .ult5-spin-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 0; cursor: grab; box-shadow: 0 4px 14px rgba(92,225,255,.5); } #sony-ult-tower-5.ult5-lp .ult5-spin-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 0; cursor: grab; } #sony-ult-tower-5.ult5-lp .ult5-spin-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } @container ult5-lp (max-width: 600px) { #sony-ult-tower-5.ult5-lp .ult5-spin-box { padding: 18px; } } /* ===================================================================== PARTY CHAIN + KARAOKE ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } #sony-ult-tower-5.ult5-lp .ult5-more-card { position: relative; overflow: hidden; border-radius: var(--radius); background-color: var(--s1); border: 1px solid var(--hairline); aspect-ratio: 4 / 3; } #sony-ult-tower-5.ult5-lp .ult5-more-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-more-card:hover .ult5-more-img { transform: scale(1.04); } #sony-ult-tower-5.ult5-lp .ult5-more-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,26,0) 35%, rgba(7,5,26,.8) 75%, rgba(7,5,26,.94) 100%); } #sony-ult-tower-5.ult5-lp .ult5-more-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 1; } #sony-ult-tower-5.ult5-lp .ult5-more-title { font-size: clamp(21px, 2.1cqw, 28px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; } #sony-ult-tower-5.ult5-lp .ult5-more-desc { font-size: 15px; line-height: 1.45; color: rgba(244,242,255,.84); margin: 0; max-width: 46ch; } @container ult5-lp (max-width: 860px) { #sony-ult-tower-5.ult5-lp .ult5-more-grid { grid-template-columns: 1fr; } #sony-ult-tower-5.ult5-lp .ult5-more-text { padding: 20px; } } /* ===================================================================== KUP — jeden produkt ===================================================================== */ #sony-ult-tower-5.ult5-lp .ult5-buy-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } #sony-ult-tower-5.ult5-lp .ult5-buy-media { position: relative; display: flex; justify-content: center; text-decoration: none; } #sony-ult-tower-5.ult5-lp .ult5-buy-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 12px; } #sony-ult-tower-5.ult5-lp .ult5-buy-img { height: clamp(280px, 30cqw, 420px); width: auto; position: relative; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-buy-media:hover .ult5-buy-img { transform: translateY(-6px); } #sony-ult-tower-5.ult5-lp .ult5-buy-glow { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: 110%; height: 42%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--g-t5) 0%, transparent 68%); opacity: .45; filter: blur(26px); pointer-events: none; } #sony-ult-tower-5.ult5-lp .ult5-buy-watt { font-family: var(--font-num); font-size: clamp(52px, 5cqw, 76px); font-weight: 900; line-height: .95; letter-spacing: -.045em; display: flex; align-items: baseline; gap: 4px; } #sony-ult-tower-5.ult5-lp .ult5-buy-unit { font-size: .7em; -webkit-text-stroke: 2px var(--g-t5); } #sony-ult-tower-5.ult5-lp .ult5-buy-sup { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--muted); opacity: .7; -webkit-text-stroke: 0; align-self: flex-start; margin-left: 4px; margin-top: 2px; line-height: 1; } #sony-ult-tower-5.ult5-lp .ult5-buy-name { font-size: clamp(24px, 2.4cqw, 32px); font-weight: 800; letter-spacing: -.02em; margin: 10px 0 0; } #sony-ult-tower-5.ult5-lp .ult5-buy-sku { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted); margin: 4px 0 0; } #sony-ult-tower-5.ult5-lp .ult5-buy-specs { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #sony-ult-tower-5.ult5-lp .ult5-buy-specs li { font-size: 13.5px; line-height: 1.35; padding: 10px 12px; background-color: var(--s2); border-radius: 10px; } #sony-ult-tower-5.ult5-lp .ult5-buy-cta { width: auto; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-buy-inner { grid-template-columns: 1fr; gap: 32px; } #sony-ult-tower-5.ult5-lp .ult5-buy-img { height: clamp(240px, 46cqw, 320px); } #sony-ult-tower-5.ult5-lp .ult5-buy-cta { width: 100%; text-align: center; justify-content: center; } } @container ult5-lp (max-width: 400px) { #sony-ult-tower-5.ult5-lp .ult5-buy-specs { grid-template-columns: 1fr; } } /* ---------- Przypisy ---------- */ #sony-ult-tower-5.ult5-lp .ult5-notes { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(244,242,255,.12); } #sony-ult-tower-5.ult5-lp .ult5-notes-list { margin: 0 0 14px; padding-left: 1.3em; font-size: 13px; color: var(--muted); line-height: 1.6; } #sony-ult-tower-5.ult5-lp .ult5-notes-legal { font-size: 12px; color: rgba(169,163,201,.7); margin: 0; line-height: 1.6; } /* ---------- Footer ---------- */ #sony-ult-tower-5.ult5-lp .ult5-footer { background-color: var(--s1); border-top: 1px solid var(--hairline); padding: 34px 0; } #sony-ult-tower-5.ult5-lp .ult5-footer-inner { max-width: var(--w-content); margin: 0 auto; padding: 0 2.4rem; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } #sony-ult-tower-5.ult5-lp .ult5-footer-logo-link { display: inline-flex; } #sony-ult-tower-5.ult5-lp .ult5-footer-logo-img { height: 24px; width: auto; opacity: .9; } #sony-ult-tower-5.ult5-lp .ult5-footer-copy { font-size: 12px; color: rgba(169,163,201,.7); margin: 0; } @container ult5-lp (max-width: 960px) { #sony-ult-tower-5.ult5-lp .ult5-footer-inner { padding: 0 20px; flex-direction: column; align-items: center; text-align: center; gap: 16px; } #sony-ult-tower-5.ult5-lp .ult5-footer-logo-img { height: 16px; } #sony-ult-tower-5.ult5-lp .ult5-footer-copy { font-size: 11.5px; } } /* ---------- Scroll reveal ---------- */ #sony-ult-tower-5.ult5-lp .ult5-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } #sony-ult-tower-5.ult5-lp .ult5-reveal.ult5-visible { opacity: 1; transform: translateY(0); } #sony-ult-tower-5.ult5-lp .ult5-reveal--fade { transform: none; } #sony-ult-tower-5.ult5-lp .ult5-reveal-delay-1 { transition-delay: .08s; } #sony-ult-tower-5.ult5-lp .ult5-reveal-delay-2 { transition-delay: .16s; } #sony-ult-tower-5.ult5-lp .ult5-reveal-delay-3 { transition-delay: .24s; } #sony-ult-tower-5.ult5-lp .ult5-reveal-delay-4 { transition-delay: .32s; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { #sony-ult-tower-5.ult5-lp .ult5-reveal { opacity: 1; transform: none; transition: none; } #sony-ult-tower-5.ult5-lp .ult5-hero-video, #sony-ult-tower-5.ult5-lp .ult5-buy-video { display: none; } #sony-ult-tower-5.ult5-lp .ult5-bento-img, #sony-ult-tower-5.ult5-lp .ult5-buy-img, #sony-ult-tower-5.ult5-lp .ult5-more-img, #sony-ult-tower-5.ult5-lp .ult5-hero-pack, #sony-ult-tower-5.ult5-lp .ult5-btn-primary, #sony-ult-tower-5.ult5-lp .ult5-btn-ghost, #sony-ult-tower-5.ult5-lp .ult5-spin-img { transition: none; } } /* ===================================================================== Tylko podgląd standalone — poza rootem, po osadzeniu nieużywane. Zastępuje dawny hack JS zdejmujący marginesy z . ===================================================================== */ .ult5-preview-body { margin: 0; background-color: #07051a; }