/* ============================================================ Miri — strona główna jako opowieść (index.html) Warstwa na style.css: wielka typografia + sceny scrollytellingu. Sceny przypinane działają tylko przy html.story-on (desktop, bez prefers-reduced-motion) — bez tej klasy strona jest statyczna i w pełni czytelna. ============================================================ */ :root { /* pastylka pod aktywnym słowem trio: biała w jasnym, karta w dark */ --word-pill: 255, 255, 255; } :root[data-theme="dark"] { --word-pill: 38, 45, 64; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --word-pill: 38, 45, 64; } } /* ── Typografia opowieści ────────────────────────────────── */ .giant { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 780; } .giant-sub { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text-secondary); font-weight: 500; max-width: 620px; margin: 28px auto 0; } /* ── Szkielet scen ───────────────────────────────────────── */ section.sc { position: relative; text-align: center; padding: 0; /* nadpisuje globalny padding sekcji — sceny liczą wysokość w vh */ } .sc-stage { padding: 120px 0; } .story-on .sc-track-220 { height: 220vh; } .story-on .sc-track-240 { height: 240vh; } .story-on .sc-track-260 { height: 260vh; } .story-on .sc-track-280 { height: 280vh; } .story-on .sc-track-360 { height: 360vh; } /* Stany startowe scen (p=0) — klasę story-on ustawia inline skrypt w PRZED pierwszym renderem, a te reguły dają pierwszej klatce dokładnie ten widok, który za chwilę wyliczy silnik. Bez tego strona mignęłaby pełnym, statycznym układem (FOUC). Silnik nadpisuje je potem stylami inline. */ .story-on .intro-l2 { opacity: 0; transform: translateY(40px) scale(0.94); } .story-on .paint-s { opacity: 0.14; } .story-on .trio-slide { opacity: 0; } /* zdanie trio zaczyna SAMO na środku sceny, powiększone — dostaje własny moment, zanim wjedzie na górę i wpuści cytaty (244px = połowa wysokości trio-wrap 440px + marginesu 48px) */ .story-on .trio-line { transform: translateY(244px) scale(1.3); } .story-on .sc-phone [data-anim="phone"] { opacity: 0; } /* animowane węzły jako stałe warstwy kompozytora — bez tego iOS re-rasteryzuje je przy każdej klatce (zwłaszcza duży PNG telefonu w trakcie skalowania) i animacje tną; lista celowo zamknięta */ .story-on .intro-l1, .story-on .intro-l2, .story-on .intro-bottom, .story-on .paint-s, .story-on .sc-phone-h, .story-on .hero-phone, .story-on .trio-line, .story-on .trio-slide, .story-on .trio-line .tw, .story-on .trio-line .tw-rest { will-change: transform, opacity; } .story-on .sc-stage { position: sticky; top: 0; min-height: 100vh; /* na mobile pasek adresu zmienia „100vh" w trakcie scrolla — svh (stały, mały viewport) trzyma scenę zawsze w widocznym obszarze */ min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } /* ── Scena: intro ────────────────────────────────────────── */ .intro-l1 { color: var(--text-primary); } .intro-l2 { color: var(--accent); margin-top: 12px; } /* pas na dole intro: przyciski sklepów + zachęta do scrolla; znika przy pierwszym ruchu (silnik ściemnia intro-bottom) */ .intro-bottom { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 48px; } .intro-bottom .cta-group { justify-content: center; } .story-on .intro-bottom { position: absolute; bottom: 36px; left: 0; right: 0; margin-top: 0; } .scroll-hint { display: none; flex-direction: column; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 1.15rem; font-weight: 650; } .story-on .scroll-hint { display: flex; } .scroll-hint svg { width: 24px; height: 24px; animation: hint-bob 1.8s ease-in-out infinite; } @keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } } /* ── Scena: malowany tekst ───────────────────────────────── */ .paint { max-width: 880px; margin: 0 auto; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.35; letter-spacing: -0.015em; font-weight: 700; color: var(--text-primary); text-wrap: balance; } .paint span { transition: none; } /* ── Scena: telefon ──────────────────────────────────────── */ .sc-phone-h { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; } /* bez scrollytellingu nagłówek sceny telefonu wraca do flow */ html:not(.story-on) .sc-phone-h { position: static; transform: none; margin-bottom: 56px; } /* ── Rozdziały (Misje / Rytuały / Bliscy) ────────────────── */ .chapter { --ch: var(--accent); --ch-bg: rgba(102, 128, 204, 0.14); padding: 22vh 0; } .chapter-rytualy { --ch: var(--fn-orange); --ch-bg: rgba(255, 179, 26, 0.16); } .chapter-bliscy { --ch: var(--fn-purple); --ch-bg: rgba(153, 102, 204, 0.16); } .chapter-chip { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--ch-bg); color: var(--ch); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 26px; } .chapter-h { color: var(--ch); margin: 0 auto; max-width: 900px; } .chapter-body { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-secondary); font-weight: 500; max-width: 560px; margin: 26px auto 0; } .chapter-visual { margin-top: 64px; } /* ── Scena: trio rozdziałów (Misje → Rytuały → Bliscy) ───── */ /* zdanie-nagłówek: słowa w kolorach filarów; aktywne słowo rośnie */ .trio-line { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 750; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 48px; } .tw { display: inline-block; /* position + z-index (silnik podbija aktywnemu słowu), inaczej przygaszone fragmenty zdania (opacity < 1 = własny stacking context) malują się PO słowie i przykrywają pastylkę */ position: relative; border-radius: 14px; /* pastylka pod aktywnym słowem — silnik steruje przez --wa (krycie) i --wp (spread); box-shadow nie zmienia layoutu, więc zdanie nie drga, a pastylka rośnie razem ze słowem */ background: rgba(var(--word-pill), var(--wa, 0)); box-shadow: 0 0 0 var(--wp, 0px) rgba(var(--word-pill), var(--wa, 0)); } .tw-m { color: var(--accent); } .tw-r { color: var(--fn-orange); } .tw-b { color: var(--fn-purple); } /* przygaszanie reszty zdania i pastylki prowadzi silnik — rusza dopiero, gdy zdanie skończy swój moment na środku */ /* zdanie w skali startowej (desktop 1.3) wizualnie wystaje poza okna ~1280-1400px i dokłada chwilowy poziomy scrollbar — clip ucina malowanie bez tworzenia scroll-kontenera (sticky działa) */ .sc-trio { overflow-x: clip; } .story-on .sc-trio .sc-stage > .container { width: 100%; } .story-on .trio-wrap { position: relative; height: 440px; } .story-on .trio-slide { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0; } /* ── Sekcja: prośba → misja (statyczna — dymek z prośbą) ─── */ /* tytuł w skali opowieści, spójnie z sekcją Wygląd */ .sc-duo .section-title { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; } .sc-duo .duo-grid { margin-top: 44px; display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; column-gap: 56px; } .duo-phone-1 { grid-area: 1 / 1; } .duo-phone-2 { grid-area: 1 / 3; } /* środek rozciągnięty na wysokość telefonów; rzędy 1fr|auto|1fr stawiają strzałkę DOKŁADNIE na osi między nimi, dymek tuż nad nią; dymek jest w flow, więc jego szerokość rozsuwa telefony symetrycznie zamiast je nakrywać */ .duo-mid { grid-area: 1 / 2; align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; row-gap: 16px; } .duo-mid .duo-bubble { align-self: end; } .duo-bubble { background: var(--surface-card-full); border-radius: 16px; padding: 12px 18px; box-shadow: var(--shadow-medium); font-size: 1rem; font-weight: 650; color: var(--text-primary); white-space: nowrap; } /* ── Sekcja: od twórcy (statyczna, bez sceny) ────────────── */ .creator-sec .creator-card { text-align: left; } .creator-sec .creator-links { margin-top: 26px; } .creator-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .creator-head .creator-heading { margin-bottom: 0; } .creator-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-small); flex-shrink: 0; } /* ── Sekcja skór na stronie-opowieści ────────────────────── */ #wyglad .section-sub { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 640px; } /* ── Przyciski pobierania w skali opowieści ──────────────── */ .sc-final .btn { height: 64px; padding: 14px 30px; font-size: 1.15rem; border-radius: var(--radius-l); } .sc-final .btn svg { width: 30px; height: 30px; } .sc-final .btn .btn-sub { font-size: 0.8rem; } /* ── Finał ───────────────────────────────────────────────── */ .sc-final { padding: 24vh 0; } .sc-final .cta-group { justify-content: center; margin-top: 44px; } /* ── Warianty reveal (wjazd z boków) ─────────────────────── */ .reveal-left { transform: translateX(-48px); } .reveal-right { transform: translateX(48px); } .reveal-left.visible, .reveal-right.visible { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .reveal-left, .reveal-right { transform: none; } } /* ── Responsywność ───────────────────────────────────────── */ @media (max-width: 900px) { .sc-stage { padding: 80px 0; } .chapter { padding: 96px 0; } /* statyczne hero (reduced-motion) zaczyna się pod FIXED nav (~68px) — bez tego nagłówek klei się do menu; scope :not(), bo przy story-on scenę centruje silnik i padding by ją zepchnął */ html:not(.story-on) .sc-intro .sc-stage { padding-top: 120px; } /* przypięte sceny centrują się w pełnym 100svh, a FIXED nav (~68px) nakrywa górę okna — padding zsuwa obszar centrowania pod menu, żeby trio i telefon nie wjeżdżały pod belkę (border-box: min-height 100svh już zawiera ten padding) */ .story-on .sc-stage { padding-top: 68px; } /* telefon sceny „Poznaj Miri": przy 292px ma ~621px wysokości — więcej niż svh minus nav; 248px (~524px) mieści się z zapasem */ .story-on .sc-phone .phone { width: 248px; } /* mobilna inscenizacja trio: slajdy przy 375px są wyższe (456px) niż desktopowy wrap 440px; margines linii ściśnięty do 28px, bo zdanie (3 linie) + wrap + nav nie mieściły się w małych svh; stan startowy linii MUSI równać się klatce p=0 silnika — lift (460+28)/2 = 244px, skala 1.12 (przy 1.3 zdanie wystawałoby poza ekran) */ .story-on .trio-wrap { height: 460px; } .trio-line { margin-bottom: 28px; } .story-on .trio-line { transform: translateY(244px) scale(1.12); } /* zdanie trio w skali manifestu (jak .paint przy 375px); filary „Misje, rytuały i bliscy" mieszczą się w pierwszej linii (288px, w skali startowej 323px), reszta zdania schodzi do nowej */ .trio-line { font-size: 1.7rem; } .trio-line .tw-rest:last-child { display: block; } /* prośba → misja: pionowo — telefon, dymek ze strzałką, telefon (strzałkę obraca w dół style.css) */ .sc-duo .duo-grid { grid-template-columns: auto; justify-items: center; } .duo-phone-1 { grid-area: 1 / 1; } .duo-mid { grid-area: 2 / 1; align-self: auto; grid-template-rows: auto auto; margin-top: 26px; } .duo-phone-2 { grid-area: 3 / 1; margin-top: 26px; } .duo-bubble { white-space: normal; max-width: min(320px, 84vw); text-align: center; } .sc-final { padding: 110px 0 80px; } /* przyciski finału = dokładnie te z hero — powiększone CTA zawijało się w dwie nierówne linie (decyzja Widima: hero-look); bleed na padding kontenera daje im tę samą pełną szerokość, którą hero ma z .intro-bottom — bez tego para (338px) nie mieści się w 327px treści i wraca zawijanie */ .sc-final .cta-group { margin: 44px -24px 0; } .sc-final .btn { height: 48px; padding: 10px 22px; font-size: 1rem; border-radius: var(--radius-m); } .sc-final .btn svg { width: 24px; height: 24px; } .sc-final .btn .btn-sub { font-size: 0.68rem; } }