/* ============================================================================ plon/multipage — sections.css (WWW-01) Klasy komponentów przeniesione z design-hub/assets/styleguide.css (sekcja KOMPONENTY) + chrome witryny (nav/footer). WYŁĄCZNIE var(--token) z _tokens.css (brand single-source). ZERO hardkodu kolorów/fontów — bramka WA04 blokuje #hex / rgb() / hsl(). Subtelne półprzezroczyste tła = --border-soft/--divider (tokeny), placeholdery zdjęć = --plon-gray-850. Bazowa typografia (h1/h2/p/.lead/.eyebrow/.haslo/blockquote) żyje w _tokens.css (ELEMENT DEFAULTS) — tu tylko warstwa komponentów i layout. ============================================================================ */ /* === A11Y: kontrast tekstu pomocniczego (WWW-09) ========================= Brandowe --fg-3 = --plon-gray-500 (#6B6B6B) daje na czerni tylko 3.71:1 — poniżej WCAG AA 4.5:1 dla drobnego tekstu (podpisy, noty, etykiety stopki, opisy dropdownu). Podnosimy tercjarny tekst do --plon-gray-400 (#9A9A9A ≈7:1) WYŁĄCZNIE w tej instancji (override :root; brand-token bez zmian → zero blast-radius na inne instancje/goldeny). Hierarchia zachowana: fg-1 > fg-2(#C4C4C4) > fg-3(#9A9A9A). */ :root { --fg-3: var(--plon-gray-400); } /* === LAYOUT ============================================================== */ *, *::before, *::after { box-sizing: border-box; } .container { width: 100%; max-width: var(--max-w-content); margin: 0 auto; padding: 0 var(--space-6); } .section { padding: var(--space-9) 0; } .section + .section { padding-top: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* === REVEAL-ON-SCROLL + count-up (WWW-13) ================================= Wzorzec: onepager.css:1372-1379 (1:1 loci). Utility generyczna: `[data-reveal]` + `.reveal`/`.reveal-stagger` na dowolnym kontenerze, `assets/js/reveal.js` dodaje `.is-in` przez IntersectionObserver (threshold .25) i odpala count-up na `.counter` (data-count/data-prefix/data-suffix) wewnątrz. A11y/SEO: bez JS `

(patrz templates/partials/sections/*.twig, `id="{{ section.anchor }}"`), niezależnie od klasy (idea.twig renderuje `section-idea` BEZ bazowej `.section`, więc selektor celuje w TAG, nie w klasę). Wartość i wyliczenie BEZ ZMIAN: wysokość .nav-inner (68px) + border-bottom (1px) + oddech var(--space-4). Wyjątek :not() — .section-event-list/.section-schedule/.section-location mają WŁASNY, starszy hardcoded scroll-margin-top:80px (linie ~1067/1235/1258, INNE wyliczenie/powód) — bez wyjątku [id] (specificity 0,1,1) cicho nadpisałby ich 80px, mimo że te sekcje nie mają dziś aktywnego `anchor` (schedule/location ukryte WWW-42/89, event-list „najbliższe" bez id na obu stronach). */ section[id]:not(.section-event-list):not(.section-schedule):not(.section-location) { scroll-margin-top: calc(68px + 1px + var(--space-4)); } /* mega-dropdown „Inicjatywy" */ /* WWW-85 (OG-01): opisy w .dd-list łamały się na 3 wiersze (potwierdzone wzrokowo — „Cykliczny barcamp — biznes, samorząd, studenci" w kolumnie ~186px). Panel 440px→560px + kolumny 1fr 1fr→minmax(0,1fr) minmax(0,1.3fr) (dd-list dostaje więcej — .dd-intro ma tylko eyebrow/h4/1 akapit, mieści się i węziej) razem dają kolumnie opisu ~224px tekstu (560-padding44-gap24, split 1:1.3, minus padding pozycji 28 + strzałka 14 + gap 12) → przy ~6px/znak (12px sans) to ~37 znaków/wiersz, najdłuższy wpis (44 znaki) mieści się w 2 wierszach. */ .dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 560px; background: var(--bg-elevated); border: 1px solid var(--border); padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart), visibility var(--dur-fast); z-index: 60; } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item[data-open="true"] .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dd-intro h4 { font-size: 18px; margin: 10px 0 8px; } .dd-intro p { font-size: 13px; color: var(--fg-3); line-height: 1.5; margin-bottom: 12px; } /* WWW-85 (OG-01): gap 2px→6px (oddech między pozycjami), padding pozycji 12/14→14/16 (więcej miejsca na 2-wierszowy opis bez ściśnięcia), interlinia .desc 1.4→1.5. */ .dd-list { display: flex; flex-direction: column; gap: 6px; } .dd-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart); } .dd-item:hover { border-color: var(--border); background: var(--plon-black); } .dd-item .dd-name { font-size: 15px; font-weight: 700; color: var(--fg-1); } .dd-item .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-right: auto; } .dd-item .meta .desc { font-size: 12px; color: var(--fg-3); line-height: 1.5; } .dd-item .arrow { width: 14px; height: 10px; color: var(--fg-3); flex: none; transition: transform var(--dur-fast) var(--ease-out-quart), color var(--dur-fast); } .dd-item:hover .arrow { transform: translateX(4px); color: var(--accent-text); } /* WWW-85 (OG-03): .nav-cta zostaje bez zmian po usunięciu reguły przełącznika języka (markup skasowany w WWW-86) — kontener już był flex/gap (nie space-between), więc odjęcie jednego dziecka nie rozjeżdża pozostałych (przycisk CTA), tylko usuwa martwą przestrzeń po przełączniku. */ .nav-cta { display: flex; align-items: center; gap: 16px; } /* hamburger + overlay (<1080px) */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; } .nav-toggle .bars { position: relative; display: block; width: 22px; height: 2px; background: var(--fg-1); transition: background var(--dur-instant); } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--fg-1); transition: transform var(--dur-fast) var(--ease-out-quart); } .nav-toggle .bars::before { top: -7px; } .nav-toggle .bars::after { top: 7px; } body.menu-open .nav-toggle .bars { background: transparent; } body.menu-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); } .mobile-overlay { position: fixed; inset: 0; z-index: 55; background: var(--plon-black); display: flex; flex-direction: column; padding: 92px 32px 40px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-base); overflow-y: auto; } body.menu-open .mobile-overlay { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-overlay .mob-link { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--fg-1); padding: 14px 0; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; } .mobile-overlay .mob-link:hover { color: var(--accent-text); } .mobile-overlay .mob-sub { display: grid; gap: 2px; padding: 6px 0 14px; } .mobile-overlay .mob-sub a { font-size: 15px; color: var(--fg-2); padding: 9px 0 9px 16px; border-left: 1px solid var(--border); } .mobile-overlay .mob-sub a:hover { color: var(--accent-text); border-color: var(--accent); } /* WWW-85 (OG-03): .mob-foot zostaje bez zmian po usunięciu reguły przełącznika języka mobile (markup skasowany w WWW-86) — kontener już był column/gap (nie space-between), więc odjęcie jednego dziecka nie rozjeżdża pozostałych (przycisk CTA mobile), tylko usuwa martwą przestrzeń. */ .mobile-overlay .mob-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; } .mobile-overlay .mob-foot .btn { justify-content: center; } /* ========================================================================= SEKCJA: hero (eyebrow · h1 + serif accent · lead · cta · meta-row) Wzorzec: hero-main.html ========================================================================= */ .section-hero { position: relative; overflow: hidden; } .section-hero h1 { font-size: clamp(44px, 5.6vw, 80px); font-weight: 800; line-height: .98; letter-spacing: -.03em; margin: 18px 0 0; } .section-hero h1 .accent { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--accent-text); } .section-hero .lead { margin-top: 24px; max-width: 560px; } .section-hero .cta-row { margin-top: 28px; } .meta-row { margin-top: 36px; display: flex; gap: 40px; flex-wrap: wrap; } .meta-row .item { display: flex; flex-direction: column; } .meta-row .v { font-weight: 800; font-size: 30px; letter-spacing: -.02em; } .meta-row .v .accent { color: var(--accent-text); } .meta-row .l { font-size: 12px; color: var(--fg-3); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-top: 8px; } /* ========================================================================= SEKCJA: hero — prawa kolumna (foto dokumentalne 4:5 + karta hero-festival, WWW-33) Wzorzec: onepager.css:297-432 (.hero-inner/.hero-right/.photo/.hero-festival). `.hero-copy` = istniejąca lewa treść (eyebrow/h1/lead/cta/meta-row) bez zmian wizualnych — grid tylko rozstawia dwie kolumny; mobile (≤1080px) składa w 1. ========================================================================= */ .hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7, 40px); /* Wyrównanie do GÓRY (korekta wizualna właściciela 2026-07-30): treść hero ma zaczynać się na wysokości górnej krawędzi zdjęcia w prawej kolumnie. Wcześniej `end` dociskało eyebrow/h1/lead do dołu boksa, zostawiając pustkę nad tekstem. */ align-items: start; } .hero-copy { max-width: 720px; } .hero-right { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 16px; } .hero-right .photo { background: var(--plon-gray-800, var(--plon-graphite)); position: relative; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 5; min-height: 280px; } .hero-right .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-festival { background: var(--plon-graphite); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .hero-festival .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .hero-festival .label { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sb-color, var(--accent-text)); } .hero-festival h3 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-top: 6px; } .hero-festival .when { display: flex; gap: 24px; font-size: 13px; color: var(--fg-2); } .hero-festival .when span:nth-child(2) { border-left: 1px solid var(--border); padding-left: 18px; } .hero-festival .when strong { color: var(--fg-1); font-weight: 600; } .hero-festival .price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); } .hero-festival .price-row .is-soon { font-size: 12px; color: var(--fg-3); } /* Sub-brand sig — plate + kolorowy kartusz z nazwą (onepager.css:58-79,661-671) */ .sig { display: inline-flex; align-items: center; } .sig .name { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--accent-text); margin-left: -10px; letter-spacing: -.01em; line-height: 1; font-size: 28px; } .sig .plate img { height: 22px; } .sig.kartusz { align-items: stretch; } .sig.kartusz .plate { align-items: center; } .sig.kartusz .name { display: inline-flex; align-items: center; background: var(--sb-color, var(--accent)); color: var(--sb-on, var(--accent-fg)); margin-left: 0; padding: 0 12px; line-height: 1; font-style: normal; } .sig.kartusz[data-sb="festiwal"] .name { font-family: var(--font-serif); font-style: italic; font-weight: 700; } /* Warianty .lg (kartusz nagłówka karty, WWW-34) i .reversed (Młody — plate po prawej, by nie dublować wordmarku PL:ON, wzorem onepager.css:78-81,681). */ .sig.lg .plate img { height: 32px; } .sig.lg .name { font-size: 36px; } /* Wariant .xl — samodzielny lockup w prawej kolumnie hero (hero.twig `right.lockup`). Prawa kolumna hero ma na desktopie 462 px, a na podstronach bez zdjęcia stała pusta (zmierzone 2026-07-30: 542 px niewykorzystanej szerokości na /festiwal). Kartusz w tej skali wypełnia ją jako sygnatura wydarzenia. Skala rośnie płynnie z viewportem, żeby przy 1080 px (złożenie do jednej kolumny) nie przeskakiwała skokowo. */ .sig.xl .plate img { height: clamp(38px, 3.4vw, 52px); } .sig.xl .name { font-size: clamp(42px, 3.9vw, 60px); padding: 0 16px; } /* Lockup na PEŁNĄ szerokość kolumny — równa krawędź ze zdjęciem pod spodem (korekta właściciela 2026-07-30: „logo na taką samą szerokość jak zdjęcie"). Kartusz jest domyślnie `inline-flex`, więc szerokość dyktowała mu długość słowa (zmierzone: 380 px przy zdjęciu 460 px). Tutaj rozciąga go plakietka o stałej szerokości + pole nazwy przejmujące resztę (`flex: 1`), dzięki czemu obie krawędzie — lockupu i zdjęcia — schodzą się na każdej szerokości, bez wpisywania sztywnych pikseli. Nazwa zostaje wyśrodkowana w swoim polu. */ .hero-lockup { padding: 8px 0; } .hero-lockup .sig.xl { display: flex; width: 100%; } .hero-lockup .sig.xl .name { flex: 1 1 auto; justify-content: center; } .sig.kartusz.reversed { flex-direction: row-reverse; } .sig.kartusz.reversed .name { margin: 0; } @media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; } .hero-right { margin-top: 40px; } } /* ========================================================================= DEKORY: hero-kv (bogaty KV-99 supporting, powolny obrót) + sig-lines (fale) Wzorzec: onepager.css (.hero-kv kv-spin-wrap > .kv/.kv__art) + design-system kv-99. Heksagon = kv-99-supporting.svg (wielokolorowy komponent DS, kolory w SVG — poza skanem WA04). --kv-color (bazowo --plon-mint, na [data-sb] → --sb-color) obsługuje pozostałe recolorable prymitywy KV (stroke-inline / kv-accent). sig-lines = bespoke line-art (inline w hero.twig). ROZDZIAŁ transformów (WWW-33 fix, regresja QA): `.hero-kv` = WRAPPER — kv-motion.js ustawia na nim `transform: translate3d(...)` (parallax, case specjalny dla klasy `.hero-kv`). Gdyby ten sam element niósł też CSS `animation: kv-spin` (rotate), inline transform z JS nadpisywałby/gubił obrót (jeden property `transform` na element — animacja "zjada" translację lub odwrotnie w zależności od kolejności recalculacji). Dlatego obrót żyje na WEWNĘTRZNYM `.hero-kv-art` (sam obraz) — dwa elementy, dwa niezależne transformy, oba widoczne jednocześnie (wzorzec onepagera: kv-spin-wrap [data-parallax] > svg.kv[animation]). ========================================================================= */ :root { --kv-color: var(--plon-mint); } .hero-kv { position: absolute; top: -120px; right: -200px; width: 880px; height: 880px; z-index: 0; display: block; pointer-events: none; opacity: .22; } .hero-kv-art { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: kv-spin var(--kv-motion-spin, 40s) linear infinite; } @keyframes kv-spin { to { transform: rotate(360deg); } } /* Recolor per subbrand (WWW-68 przeróbka, wytyczne.md §3.2 — CSS-maska SCOPED wyłącznie do [data-sb="camp"]/[data-sb="mlody"]): PIERWSZA iteracja WWW-68 maskowała `.hero-kv-art` GLOBALNIE (wszystkie strony), co spłaszczyło świadomie wielobarwny kv-99-supporting.svg na home/festiwal do flat mint — REGRESJA, cofnięta. Domyślnie (home/festiwal/air/pozostałe) `.hero-kv-art` () renderuje się bez zmian, jak wyżej. Tylko camp/mlody: chowa się, a zawsze-obecny sibling `.hero-kv-art-sb` (pusty

, hero.twig) dostaje background=--sb-color maskowany konturem TEGO SAMEGO pliku (zero nowych assetów) — camp=orange, mlody=purple. */ [data-sb="camp"] img.hero-kv-art, [data-sb="mlody"] img.hero-kv-art { display: none; } [data-sb="camp"] .hero-kv-art-sb, [data-sb="mlody"] .hero-kv-art-sb { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: kv-spin var(--kv-motion-spin, 40s) linear infinite; background: var(--sb-color); -webkit-mask: url(../key-visuals/kv-99-supporting.svg) center/contain no-repeat; mask: url(../key-visuals/kv-99-supporting.svg) center/contain no-repeat; } @media (max-width: 1080px) { .hero-kv { top: -80px; right: -260px; width: 620px; height: 620px; opacity: .14; } } /* Wariant LEWO (WWW-53, opt-in `section.kv_side`) — defensywny: hero=PRAWO na home i festiwalu dziś (kv_side niezdefiniowany/„right"), wariant gotowy pod przyszłą podstronę z hero od lewej. */ .hero-kv--left { left: -200px; right: auto; } @media (max-width: 1080px) { .hero-kv--left { left: -260px; right: auto; } } .section-hero .container { position: relative; z-index: 1; } .section-hero .sig-lines { z-index: 1; } /* Glow miękki hero (WWW-53, §3.4): krawędź prawa (kv_side domyślne), za treścią (z-index:0), NIE łapany przez `.section-hero .container`/`.sig-lines` z-index:1. */ .section-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(640px 440px at 100% 30%, color-mix(in srgb, var(--kv-color) 16%, transparent), transparent 60%); } .sig-lines { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; } .sig-lines svg { width: 100%; height: 100%; display: block; } @keyframes drift { 0% { transform: translateX(0); } 100% { transform: translateX(-100px); } } .sig-lines .drift-a { animation: drift 22s linear infinite; } .sig-lines .drift-b { animation: drift 32s linear infinite reverse; } /* ========================================================================= SEKCJA: factbar (infografika liczbowa — serif mint) Wzorzec: stats.html (.stats/.stat) ========================================================================= */ /* WWW-88 (ONA-02): kotwica pozycjonowania dla `.sig-lines` (opt-in `factbar.sig_lines`, templates/partials/sections/factbar.twig) — `.sig-lines` jest `position: absolute; bottom: 0` (wyżej w tym pliku) i bez pozycjonowanego przodka (position != static) kotwiczy się do initial containing block, NIE do tej sekcji. Zmierzony objaw (kontroler, Chrome @1440, getBoundingClientRect po `.is-in`): `.section-factbar` bez tej reguły miała `position: static`, zakres y 820–1076; `.stats` kończyła się na y=980; `.sig-lines` renderowała się na y 780–900 — czyli NAD sekcją i PRZEZ liczby, zamiast pod nimi (insideSection: false). Nie kasuj tej reguły jako „zbędnej" — bez niej fala wraca do złego miejsca. Wzorzec identyczny jak przy innych sekcjach z overlayem absolutnym (`.section-hero`, `.manifesto.has-kv`, `.two-cols.has-kv`…). */ .section-factbar { position: relative; } /* auto-fit: factbar dopasowuje się do liczby statów (4 na /o-nas, 3 na /wspolpraca) bez pustej komórki; puste tory auto-fit kolapsują (WWW-03). */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); } .stat { background: var(--plon-black); padding: 28px 22px; } .stat .n { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 48px; color: var(--accent-text); line-height: 1; } /* WWW-85 (ONA-03): factbar.twig NIE nadaje `.counter` wartościom nienumerycznym (factbar.twig:19 — regex `/^\d+\+?$/`, np. „poza metropoliami" na /o-nas) — ten brak jest haczykiem do selekcji: `.n:not(:has(.counter))` łapie WYŁĄCZNIE nienumeryczne wartości, liczby (.counter) zostają przy 48px. clamp(24px,2.4vw,34px) dobrane tak, by najdłuższa fraza z ewidencji mieściła się w komórce siatki auto-fit(160px,1fr) bez wyjścia poza ramkę; overflow-wrap:anywhere = zabezpieczenie na wypadek jeszcze dłuższej frazy w treści (fala 3). */ .stat .n:not(:has(.counter)) { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; overflow-wrap: anywhere; } .stat .l { font-size: 12px; color: var(--fg-3); margin-top: 10px; line-height: 1.4; } /* ========================================================================= SEKCJA: manifesto (pull statement serif italic + body prozy) Wzorzec: pullquote.html (.pull) ========================================================================= */ .manifesto .pull { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.015em; margin: 0; max-width: 820px; } .manifesto .pull .accent, .manifesto .pull em { color: var(--accent-text); font-style: italic; } .manifesto .manifesto-body { margin-top: 24px; max-width: 720px; color: var(--fg-2); } .manifesto .manifesto-body p { margin: 0 0 14px; line-height: 1.6; } .manifesto .manifesto-body p:last-child { margin-bottom: 0; } /* Zdjęcie pod prozą manifestu (`foto`, opt-in — patrz manifesto.twig). Kadr POZIOMY 16:9 na pełną szerokość kontenera; `object-fit: cover` na wypadek pliku o innej proporcji (nie rozciągamy). Ramka jak przy pozostałych zdjęciach instancji (.hero-right .photo, .idea-foto). */ /* Wariant z ilustracją: proza po lewej, zdjęcie po prawej. Siatka włącza się TYLKO przy `.manifesto--foto` (klasa wychodzi z partiala wyłącznie gdy sekcja ma `foto`), więc manifest bez zdjęcia (/wspolpraca, /mlody, /festiwal) renderuje się bez zmiany. Kolumny 1.15/0.85 jak w hero — tekst zostaje wiodący. `.pull` traci wtedy własne `max-width`, bo szerokość dyktuje już kolumna siatki. */ /* `grid-template-rows: auto 1fr` jest tu KONIECZNE: zdjęcie rozpina się na oba wiersze (`grid-row: 1 / -1`), więc bez jawnej definicji przeglądarka rozdziela jego wysokość między wiersze i rozpycha pierwszy — między hasłem a prozą powstawała luka ~185 px (zmierzone). Pierwszy wiersz ma być wysokości hasła, reszta idzie do drugiego. */ .manifesto--foto { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto 1fr; column-gap: var(--space-7, 48px); align-items: start; } .manifesto--foto .pull { grid-column: 1; max-width: none; } .manifesto--foto .manifesto-body { grid-column: 1; max-width: none; } /* Proporcja slotu = proporcja PLIKU (16:9, kadr poziomy przygotowany pod tę sekcję). Slot pionowy przycinałby boki zdjęcia, a właściciel prosił wprost o kadr poziomy. */ .manifesto-foto { grid-column: 2; grid-row: 1 / -1; align-self: start; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); background: var(--plon-gray-800, var(--plon-graphite)); } .manifesto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { /* Jedna kolumna — zdjęcie wraca pod tekst (kolejność z DOM), proporcja na poziomą, bo pionowy kadr na wąskim ekranie zajmowałby cały ekran. */ .manifesto--foto { grid-template-columns: 1fr; } .manifesto--foto .pull, .manifesto--foto .manifesto-body, .manifesto-foto { grid-column: 1; grid-row: auto; } .manifesto-foto { margin-top: 28px; aspect-ratio: 16 / 9; } } /* DEKORY: manifesto (WWW-65, opt-in `section.kv_side` — patrz templates/partials/sections/ manifesto.twig). Klasa gatująca `.has-kv`: `.kv-bg` za treścią, subtelny (jeden blok prozy, nie może konkurować z pull statement). `.kv-bg--{left,right}` = strona (generyczne, wyżej), tu tylko rozmiar/pozycja/opacity. */ .manifesto.has-kv { position: relative; overflow: hidden; } .manifesto.has-kv > .container { position: relative; z-index: 1; } .manifesto .kv-bg { top: 10%; width: 30%; aspect-ratio: 1; opacity: var(--kv-bg-op, .11); background: var(--sb-color, var(--accent)); -webkit-mask: url(../key-visuals/kv-101-supporting.svg) center/contain no-repeat; mask: url(../key-visuals/kv-101-supporting.svg) center/contain no-repeat; } @media (max-width: 860px) { .manifesto .kv-bg { opacity: calc(var(--kv-bg-op, .11) * .6); } } /* ========================================================================= DEKORY: prymitywy KV — kv-bg / kv-accent / idea-mask / wartosc-glyph Wzorzec: onepager.css:1381–1562 (+ design-hub/assets/kv.css, referencyjnie). Recolor wyłącznie --kv-color (= --sb-color na [data-sb]) — zero HEX (WA04). Generyczne warstwy tła/akcentu KV; kv-bg/kv-accent/wartosc-glyph NIE wpięte w żaden partial jeszcze — gotowe pod kolejne zadania. idea-mask wpięty przez partials/sections/idea.twig (WWW-32, patrz SEKCJA: idea niżej). ========================================================================= */ .kv-bg { position: absolute; z-index: 0; pointer-events: none; opacity: var(--kv-bg-op, .12); mix-blend-mode: screen; } .kv-bg img, .kv-bg svg { display: block; width: 100%; height: 100%; } .kv-bg.breathe svg, .kv-bg.breathe img { transform-box: fill-box; transform-origin: 50% 50%; animation: kvBreathe 9s ease-in-out infinite; } .kv-bg.spin svg, .kv-bg.spin img { animation: kv-spin 120s linear infinite; } @keyframes kvBreathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.05); opacity: 1; } } /* Recolor per subbrand value-cards (WWW-68 przeróbka, wytyczne.md §3.2 — CSS-maska SCOPED wyłącznie do [data-sb="camp"]/[data-sb="mlody"] I do `.value-cards` — `initiatives-tiles.twig` też wpina w `.kv-bg.spin` i musi zostać poza zakresem tego zadania). PIERWSZA iteracja WWW-68 maskowała `.kv-bg` GLOBALNIE (wszystkie strony), spłaszczając wielobarwny kv-100-supporting.svg na home — REGRESJA, cofnięta. Domyślnie (home/o-nas i pozostałe) `.value-cards .kv-bg` niesie oryginalny , bez zmian. Tylko camp/mlody: chowa się, a zawsze-obecny sibling `.kv-bg-art-sb` (pusty

, value-cards.twig) dostaje background=--sb-color maskowany konturem TEGO SAMEGO pliku (zero nowych assetów) — camp=orange, mlody=purple. */ [data-sb="camp"] .value-cards .kv-bg img, [data-sb="mlody"] .value-cards .kv-bg img { display: none; } [data-sb="camp"] .value-cards .kv-bg-art-sb, [data-sb="mlody"] .value-cards .kv-bg-art-sb { display: block; width: 100%; height: 100%; transform-box: fill-box; transform-origin: 50% 50%; animation: kvBreathe 9s ease-in-out infinite; background: var(--sb-color); -webkit-mask: url(../key-visuals/kv-100-supporting.svg) center/contain no-repeat; mask: url(../key-visuals/kv-100-supporting.svg) center/contain no-repeat; } /* Modyfikatory strony (WWW-53, wzorzec opt-in `section.kv_side` — wytyczne.md §3.5): generyczne left/right; rozmiar/top/opacity nadpisywane per sekcja (wzorzec `.kal-festival .kv-bg`, poniżej). */ .kv-bg--left { left: -6%; } .kv-bg--right { right: -6%; } /* Rotacja heksagonów (WWW-52): idea = LEWO (naprzemienność stron, hero=P/idea=L/…). Lustro dawnego prawego układu: left:0 + maska solid-lewo→fade-prawo + obraz do lewej. */ .idea-mask { position: absolute; z-index: 0; pointer-events: none; top: 0; left: 0; bottom: 0; width: 68%; opacity: .16; /* CSS-structural: czerń (keyword, nie hex) = pełna maska (nie kolor marki, WA04-manual) */ -webkit-mask-image: linear-gradient(90deg, black 45%, transparent 100%); mask-image: linear-gradient(90deg, black 45%, transparent 100%); } .idea-mask img { height: 100%; width: auto; margin-right: auto; display: block; } .kv-accent { position: absolute; pointer-events: none; z-index: 0; --kv-par: 0px; transform: translate3d(0, var(--kv-par), 0); will-change: transform; transition: transform 120ms linear; } .kv-accent img, .kv-accent svg { display: block; width: 100%; height: 100%; } .kv-accent svg .kv__art { stroke: var(--kv-color); } .kv-accent.float img, .kv-accent.float svg { animation: kvFloat 9s ease-in-out infinite; } @keyframes kvFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(4deg); } } .kv-accent.spin img, .kv-accent.spin svg { animation: kv-spin 90s linear infinite; } .kv-accent.kv-enter { opacity: 0; } .kv-accent.kv-enter img, .kv-accent.kv-enter svg { transform: scale(.82); } .kv-accent.kv-enter.is-in { opacity: var(--kv-target-op, .4); transition: opacity 900ms var(--ease-out-quart); } .kv-accent.kv-enter.is-in img, .kv-accent.kv-enter.is-in svg { transform: scale(1); transition: transform 1100ms var(--ease-out-expo); } /* Recolor per subbrand cta (WWW-68 przeróbka, wytyczne.md §3.2 — CSS-maska SCOPED wyłącznie do [data-sb="camp"]/[data-sb="mlody"]): PIERWSZA iteracja WWW-68 maskowała `.kv-accent-art` GLOBALNIE (wszystkie strony), spłaszczając wielobarwny kv-101-original.svg na home/festiwal — REGRESJA, cofnięta. Domyślnie (home/ festiwal/pozostałe) `.kv-accent` niesie oryginalny , bez zmian. Tylko camp/mlody: chowa się, a zawsze-obecny sibling `.kv-accent-art-sb` (pusty