, ikony +/−, płynne zwijanie).
* Layout per-szablon: static-page.css (.uss__accordion), contact.css (.contact-segment--accordion).
* JS: assets/js/accordion.js
*/
.accordion-item {
--accordion-duration: var(--duration-slow);
--accordion-easing: cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-summary {
cursor: pointer;
list-style: none;
}
.accordion-summary::-webkit-details-marker {
display: none;
}
.accordion-summary:focus-visible {
outline: var(--outline-focus-width) solid var(--color-accessibility-focus);
outline-offset: var(--outline-focus-offset);
}
.accordion-icon {
flex-shrink: 0;
width: 2.0625rem; /* 33 */
height: 2.0625rem;
color: var(--text-primary);
}
.accordion-icon-motion {
display: block;
position: relative;
width: 100%;
height: 100%;
transform: rotate(0deg);
transition: transform var(--accordion-duration) var(--accordion-easing);
}
.accordion-plus,
.accordion-minus {
position: absolute;
inset: 0;
transition:
opacity var(--accordion-duration) var(--accordion-easing),
transform var(--accordion-duration) var(--accordion-easing);
}
.accordion-plus svg,
.accordion-minus svg {
display: block;
width: 100%;
height: 100%;
}
.accordion-minus {
opacity: 0;
}
/* Otwarty: kontener +90°, minus skompensowany −90° → pozioma kreska */
.accordion-item[open]:not([data-closing]) .accordion-icon-motion {
transform: rotate(90deg);
}
.accordion-item[open]:not([data-closing]) .accordion-plus {
opacity: 0;
}
.accordion-item[open]:not([data-closing]) .accordion-minus {
opacity: 1;
transform: rotate(-90deg);
}
/* Zamykanie: powrót minus → plus */
.accordion-item[data-closing] .accordion-icon-motion {
transform: rotate(0deg);
}
.accordion-item[data-closing] .accordion-plus {
opacity: 1;
}
.accordion-item[data-closing] .accordion-minus {
opacity: 0;
transform: rotate(-90deg);
}
/* Treść — płynne zwijanie (grid-template-rows 0fr↔1fr) */
.accordion-content {
display: grid; /* nadpisuje UA display:none zamkniętego
⇒ animacja działa */
grid-template-rows: 0fr;
padding-bottom: 0;
transition:
grid-template-rows var(--accordion-duration) var(--accordion-easing),
padding-bottom var(--accordion-duration) var(--accordion-easing);
}
.accordion-item[open]:not([data-closing]) .accordion-content {
grid-template-rows: 1fr;
}
.accordion-item:not([open]) .accordion-content {
grid-template-rows: 0fr;
padding-bottom: 0;
}
.accordion-content-inner {
overflow: hidden;
min-height: 0;
}
.accordion-content-inner > *:first-child { margin-top: 0; }
.accordion-content-inner > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.accordion-item {
--accordion-duration: 0ms;
}
.accordion-icon-motion,
.accordion-plus,
.accordion-minus,
.accordion-content {
transition: none;
}
.accordion-item[open]:not([data-closing]) .accordion-icon-motion,
.accordion-item[open]:not([data-closing]) .accordion-minus {
transform: rotate(0deg);
}
.accordion-item:not([open]) .accordion-minus {
display: none;
}
.accordion-item[open] .accordion-plus {
display: none;
}
}
/*
* Uniwersalna Strona Statyczna (USS) — Etap 2 (detal: typografia, rytm, komponenty).
* Spec: docs/specs/static-page-spec.md | węzły Figma 66:11621 / 66:11117 / 66:10612.
*
* Rytm pionowy (wyprowadzony z metadanych Figmy, mobile / tablet / desktop):
* --uss-gap 24 / 40 / 40 → odstęp między blokami (.uss__body row-gap, hero↔body)
* --uss-section 32 / 36 / 36 → przerwa sekcyjna nad blokiem z nagłówkiem + pt powłoki
* --uss-flow 24 / 36 / 36 → odstęp wewnątrz bloku (nagłówek↔treść↔cytat↔wideo)
* intro / cytat: 36 stałe na każdym BP (komponenty o własnym rytmie)
*
* Strefa czytania: full (mobile) / span 5 (tablet) / kol. 3–8 (desktop).
* Full-bleed media (hero, galeria, logo): 1 / -1 na każdym BP.
*
* Reuse: .grid-container (grid.css), .event-gallery (event-gallery.css),
* .arrow-control (button.css), typografia (typography-*.css).
*/
/* ==========================================================================
Sekcja + skala rytmu
========================================================================== */
.uss {
--uss-gap: var(--mobile-content-m); /* 24 */
--uss-section: var(--mobile-content-l); /* 32 */
--uss-flow: var(--mobile-content-m); /* 24 */
row-gap: var(--uss-gap);
padding-bottom: var(--page-footer-pb-mobile);
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss {
--uss-gap: var(--tablet-content-l); /* 40 */
--uss-section: var(--content-pt-section); /* 36 */
--uss-flow: var(--gap-stack); /* 36 */
padding-bottom: var(--page-footer-pb-tablet);
}
}
@media (min-width: 1025px) { /* --breakpoint-desktop */
.uss {
padding-bottom: var(--page-footer-pb-desktop);
}
}
/* Reset marginesów elementów przepływu — rytm pionowy steruje wyłącznie flex `gap`. */
.uss :is(h1, h2, h3, p, ul, ol, blockquote, figure, cite) {
margin: 0;
}
/* Przycięcie line-boxa nagłówków do cap/baseline — gapy renderują się cap-to-cap
jak w Figmie (progressive enhancement, jak w news-single). */
.uss__title,
.uss__date,
.uss h2,
.uss h3 {
text-box: trim-both cap alphabetic;
}
/* ==========================================================================
Hero — full-bleed na każdym BP
========================================================================== */
.uss__hero {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0; /* Figma itemSpacing 0 — podpis przylega do dolnej krawędzi zdjęcia */
}
.uss__media {
width: 100%;
background: var(--placeholder-surface);
}
.uss__media--hero {
aspect-ratio: 358 / 270;
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss__media--hero {
aspect-ratio: 1360 / 544;
}
}
.uss__media--inline {
aspect-ratio: 358 / 230;
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss__media--inline {
aspect-ratio: 664 / 502;
}
}
/* Podpis — body-s, prawy; przyciemniony do WCAG 2.1 AA (#a2a2a2 z Figmy nie spełnia) */
.uss__caption {
color: var(--grey-500);
text-align: right;
}
/* ==========================================================================
Powłoka treści — mobile: flex stack; tablet/desktop: subgrid
========================================================================== */
.uss__body {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
row-gap: var(--uss-gap);
border-top: var(--section-divider); /* dzielnik hero ↔ artykuł (full-bleed) */
padding-top: var(--uss-section);
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss__body {
display: grid;
grid-template-columns: subgrid;
row-gap: var(--uss-gap);
}
}
@media (min-width: 1025px) { /* --breakpoint-desktop */
.uss__body {
align-items: start;
}
}
/* ==========================================================================
Przycisk wstecz — desktop only, kolumna 1
========================================================================== */
.uss__back {
display: none;
}
@media (min-width: 1025px) { /* --breakpoint-desktop */
.uss__back {
display: flex;
grid-column: 1;
align-self: start;
margin-left: -0.625rem; /* kompensacja paddingu .arrow-control (10px) → ikona w linii gridu */
}
}
/* ==========================================================================
Bloki — strefa czytania + przerwa sekcyjna nad nagłówkiem
========================================================================== */
.uss__block {
padding-top: var(--uss-section);
}
/* Blok-kontynuacja (intro, akapit po intro) — bez przerwy sekcyjnej */
.uss__block--flush {
padding-top: 0;
}
/* Span strefy czytania */
@media (min-width: 769px) and (max-width: 1024px) { /* tablet only */
.uss__block {
grid-column: 1 / span 5;
}
.uss__intro,
.uss__figure-block,
.uss__faq,
.uss__rows-block,
.uss__block--wide {
grid-column: 1 / -1; /* pełne 6 kolumn */
}
}
@media (min-width: 1025px) { /* --breakpoint-desktop */
.uss__block {
grid-column: 3 / span 6;
}
}
/* Bloki full-bleed — zawsze cała szerokość gridu */
.uss__block--bleed {
grid-column: 1 / -1;
}
/* ==========================================================================
Rytm wewnątrz bloków
========================================================================== */
.uss__prose,
.uss__figure-block,
.uss__faq,
.uss__rows-block {
display: flex;
flex-direction: column;
gap: var(--uss-flow);
}
.uss__intro {
display: flex;
flex-direction: column;
gap: var(--gap-stack); /* 36 stałe (Figma: Date+Title+Lead) */
}
.uss__figure {
display: flex;
flex-direction: column;
gap: 0; /* Figma itemSpacing 0 */
}
.uss__date {
align-self: start;
}
/* Cormorant: cyfry lining + proportional (np. rok w tytule) */
.uss__title {
font-feature-settings: "lnum" 1, "pnum" 1;
}
/* ==========================================================================
Treść tekstowa (akapity, listy, linki inline)
========================================================================== */
.uss__prose > *:first-child { margin-top: 0; }
.uss__prose > *:last-child { margin-bottom: 0; }
.uss__list {
margin: 0;
padding-left: 1.5em;
}
.uss__prose a,
.uss__list a {
color: var(--text-primary);
}
.uss__prose a:focus-visible,
.uss__list a:focus-visible {
outline: var(--outline-focus-width) solid var(--color-accessibility-focus);
outline-offset: var(--outline-focus-offset);
}
/* ==========================================================================
Cytat
========================================================================== */
.uss__quote {
display: flex;
flex-direction: column;
gap: var(--gap-stack); /* 36 — treść ↔ autor */
border-left: var(--section-divider);
padding-left: 1.25rem; /* 20 — Figma (stałe na BP) */
padding-bottom: var(--mobile-content-xxs); /* 8 — Figma pb-8 */
}
.uss__quote-author {
font-style: normal;
text-box: trim-both cap alphabetic;
}
/* ==========================================================================
Wideo (embed placeholder + play)
========================================================================== */
.uss__video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--placeholder-surface);
}
.uss__video-play {
position: absolute;
inset: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
width: 8.1875rem; /* 131 */
height: 8.1875rem;
padding: 0;
border: none;
background: transparent;
color: var(--main-off-black);
cursor: pointer;
transition: transform var(--duration-normal) var(--easing-out);
}
.uss__video-play svg {
display: block;
width: 100%;
height: 100%;
}
.uss__video-play:hover,
.uss__video-play:focus-visible {
transform: scale(1.04);
}
.uss__video-play:focus-visible {
outline: var(--outline-focus-width) solid var(--color-accessibility-focus);
outline-offset: var(--outline-focus-offset);
}
@media (prefers-reduced-motion: reduce) {
.uss__video-play {
transition: none;
}
}
@media (min-width: 769px) and (max-width: 1024px) { /* tablet — wideo full 6 kol. w bloku span 5 */
.uss__video {
width: calc(120% + 0.2 * var(--tablet-gutter));
}
}
/* ==========================================================================
Siatka logotypów — full-bleed; 2 / 3 / 3 (wariant B: 2 / 3 / 4)
========================================================================== */
.uss__logos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mobile-gutter); /* 16 */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss__logos {
grid-template-columns: repeat(3, 1fr);
gap: var(--desktop-content-s); /* 24 */
}
}
@media (min-width: 1025px) { /* --breakpoint-desktop */
.uss__logos {
gap: var(--desktop-gutter); /* 32 */
}
.uss__logos--wide {
grid-template-columns: repeat(4, 1fr);
}
}
.uss__logo {
background: var(--placeholder-surface);
border-radius: var(--radius-sm);
aspect-ratio: 4 / 3; /* wariant A */
}
.uss__logos--wide .uss__logo {
aspect-ratio: 2 / 1; /* wariant B */
}
/* ==========================================================================
Akordeon (FAQ) — layout USS; mechanika w accordion.css
========================================================================== */
.uss__faq-intro {
margin: 0;
}
.uss__accordion .accordion-item {
border-top: var(--section-divider);
}
.uss__accordion .accordion-item:last-child {
border-bottom: var(--section-divider);
}
.uss__accordion .accordion-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mobile-content-m); /* 24 */
padding-block: var(--mobile-content-m); /* 24 */
}
.uss__accordion .accordion-title {
flex: 1;
}
.uss__accordion .accordion-item[open]:not([data-closing]) .accordion-content {
padding-bottom: var(--mobile-content-m); /* 24 */
}
@media (prefers-reduced-motion: reduce) {
.uss__accordion .accordion-item[open]:not([data-closing]) .accordion-content {
padding-bottom: var(--mobile-content-m);
}
}
/* ==========================================================================
Listy wierszy (do pobrania / linki zewnętrzne) — wiersz = link
========================================================================== */
.uss__rows {
margin: 0;
padding: 0;
list-style: none;
}
.uss__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mobile-content-m); /* 24 */
padding-block: var(--mobile-content-m); /* 24 */
border-top: var(--section-divider);
color: var(--text-primary);
text-decoration: none;
}
.uss__rows li:last-child .uss__row {
border-bottom: var(--section-divider);
}
.uss__row-label {
flex: 1;
}
.uss__row:focus-visible {
outline: var(--outline-focus-width) solid var(--color-accessibility-focus);
outline-offset: var(--outline-focus-offset);
}
.uss__row-icon {
flex-shrink: 0;
width: 2.0625rem; /* 33 */
height: 2.0625rem;
color: var(--text-primary);
}
.uss__row-icon svg {
display: block;
width: 100%;
height: 100%;
}
/* ==========================================================================
Galeria — reuse .event-gallery; w USS bez górnego dzielnika,
nagłówek wcięty do strefy czytania (kol. 3) na desktopie
========================================================================== */
.uss .event-gallery {
border-top: none;
}
.uss .event-gallery__heading {
margin: 0;
}
.uss .event-gallery__track-wrap {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.uss .event-gallery__track {
padding-bottom: 0;
}
.uss .event-gallery__slide {
background: var(--placeholder-surface);
flex: 0 0 15.375rem; /* 246 — Figma mobile */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.uss .event-gallery__slide {
flex-basis: 34.25rem; /* 548 */
aspect-ratio: 548 / 411;
}
}
@media (min-width: 1025px) { /* --breakpoint-desktop — nagłówek do kol. 3 */
.uss .event-gallery {
display: grid;
grid-template-columns: subgrid;
}
.uss .event-gallery__header {
grid-column: 3 / -1;
align-items: center; /* Figma items-center (nagłówek ↔ strzałki) */
}
.uss .event-gallery__track-wrap {
grid-column: 1 / -1;
}
}
/*
* Strona Kontakt („Skontaktuj się z nami") — Etap 2 (detal).
* Spec: docs/specs/contact-spec.md | węzły Figma 67:11899 / 67:11468 / 67:10972.
*
* Architektura (zaakceptowana w Etapie 1): powtarzalny wiersz „etykieta ↔ treść"
* (.contact-segment = grid 2/6/12). Reflow wynika z umiejscowienia treści w gridzie:
* - tablet: treść span 5 (kol. 1–5) — nachodzi na etykietę ⇒ nowy wiersz (stack);
* - desktop: treść kol. 7–12 — nie nachodzi ⇒ ten sam wiersz (obok siebie).
* Warianty: foto dyrektora (etykieta=kwadrat), akordeon działu (kontrolka +/−:
* prawa-góra M/T → lewy-dół D dzięki rozciągniętej etykiecie).
*
* Reuse: .container/.grid tokens, typografia (.h2/.h3/.subheading/.body),
* --section-divider, ikony plus/minus, mechanika akordeonu (accordion.css).
*/
/* ==========================================================================
Sekcja + rytm pionowy
========================================================================== */
.contact-section {
display: flex;
flex-direction: column;
gap: var(--mobile-content-l); /* 32 */
padding-top: var(--mobile-content-l); /* 32 */
padding-bottom: var(--content-pt-section); /* 36 */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.contact-section {
gap: var(--tablet-content-xl); /* 56 */
padding-top: var(--content-pt-section); /* 36 */
padding-bottom: var(--desktop-content-l); /* 48 */
}
}
@media (min-width: 1025px) { /* desktop */
.contact-section {
padding-top: var(--desktop-content-xl); /* 64 */
padding-bottom: var(--desktop-content-xxl); /* 96 */
}
}
/* Ostatnia sekcja (Wolontariusze) — większy pb przed stopką (Figma 40/64/96) */
.contact-section:last-of-type {
padding-bottom: var(--page-footer-pb-mobile);
}
@media (min-width: 769px) {
.contact-section:last-of-type {
padding-bottom: var(--page-footer-pb-tablet);
}
}
@media (min-width: 1025px) {
.contact-section:last-of-type {
padding-bottom: var(--page-footer-pb-desktop);
}
}
/* Nagłówki Cormorant — trim cap/baseline jak Figma (wzorzec .uss / repertoire) */
.contact :is(h2, h3) {
text-box: trim-both cap alphabetic;
}
/* Nagłówek sekcji — Cormorant; mobile 32 (Figma M H1 Low; .h2 bazowo = 24) */
.contact-section__title {
font-feature-settings: "lnum" 1, "pnum" 1;
font-size: 2rem; /* 32 — Figma M H1 Low; .h2 bazowo = 24 */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.contact-section__title {
font-size: inherit;
}
}
/* Lista segmentów — domknięta dolnym dzielnikiem (Figma Content Div border-bottom) */
.contact-list {
display: flex;
flex-direction: column;
border-bottom: var(--section-divider);
}
/* ==========================================================================
Segment „etykieta ↔ treść" — rdzeń reflow (grid 2/6/12)
========================================================================== */
.contact-segment {
display: grid;
grid-template-columns: repeat(2, 1fr); /* mobile: 2 kol. */
-moz-column-gap: var(--mobile-gutter);
column-gap: var(--mobile-gutter); /* 16 */
row-gap: var(--mobile-content-l); /* 32 — etykieta ↔ treść (stack) */
border-top: var(--section-divider);
padding-top: var(--mobile-content-l); /* 32 */
padding-bottom: var(--content-pt-section); /* 36 */
}
@media (min-width: 769px) { /* --breakpoint-tablet — 6 kol. */
.contact-segment {
grid-template-columns: repeat(6, 1fr);
-moz-column-gap: var(--tablet-gutter);
column-gap: var(--tablet-gutter); /* 20 */
row-gap: var(--gap-stack); /* 36 */
padding-top: var(--content-pt-section); /* 36 */
padding-bottom: var(--tablet-content-l); /* 40 */
}
}
@media (min-width: 1025px) { /* desktop: 12 kol. */
.contact-segment {
grid-template-columns: repeat(12, 1fr);
-moz-column-gap: var(--desktop-gutter);
column-gap: var(--desktop-gutter); /* 32 */
align-items: start; /* komórki do góry (Figma items-start) */
}
}
/* Etykieta — domyślnie wiersz (tytuł [+ ewentualna kontrolka]) */
.contact-segment__term,
.contact-segment__label {
grid-column: 1 / -1;
}
.contact-segment__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mobile-content-m); /* 24 */
}
.contact-segment__term {
font-feature-settings: "lnum" 1, "pnum" 1;
}
/* Treść */
.contact-segment__content {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--mobile-content-l); /* 32 */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.contact-segment__content {
grid-column: 1 / span 5; /* span 5 — nachodzi na etykietę ⇒ nowy wiersz (stack) */
gap: var(--gap-stack); /* 36 */
}
}
@media (min-width: 1025px) { /* desktop */
.contact-segment__term,
.contact-segment__label {
grid-column: 1 / 7; /* kol. 1–6 */
}
.contact-segment__content {
grid-column: 7 / -1; /* kol. 7–12 (span 6) — ten sam wiersz co etykieta */
}
}
/* Reset marginesów elementów przepływu — rytm steruje flex `gap` */
.contact-segment :is(h2, h3, h4, p) {
margin: 0;
}
/* Pod-grupa linii (np. tel + e-mail, NIP + nr konta) — ciaśniejszy rytm */
.contact-prose {
display: flex;
flex-direction: column;
gap: var(--mobile-content-xs); /* 12 */
}
.contact-prose .subheading-2 {
text-box: trim-both cap alphabetic;
}
/* Linki inline w treści (mailto, www) — hover: draw-underline (button.css) */
.contact-segment__content a:not(.contact-cta) {
color: var(--text-primary);
}
.contact-segment__content a:focus-visible {
outline: var(--outline-focus-width) solid var(--color-accessibility-focus);
outline-offset: var(--outline-focus-offset);
}
/* Wyjątek typograficzny: CTA link-button Figma (14 mobile / 16 T/D), nie .link-l */
.contact-cta {
align-self: start;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.875rem; /* 14 — Figma LinkButtonBig mobile */
line-height: 1;
letter-spacing: 0.02em;
color: var(--text-primary);
text-box: trim-both cap alphabetic;
}
@media (min-width: 769px) {
.contact-cta {
font-size: 1rem; /* 16 — Figma LinkButtonBig T/D */
}
}
/* ==========================================================================
Wariant: dyrektor (foto + bio)
========================================================================== */
.contact-segment--person .contact-segment__label {
display: block; /* sam kafel zdjęcia */
}
.contact-segment--person .contact-segment__content {
gap: var(--mobile-content-l); /* 32 */
}
@media (min-width: 769px) {
.contact-segment--person .contact-segment__content {
gap: var(--tablet-content-l); /* 40 */
}
}
.contact-segment__photo {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--placeholder-surface);
}
/* ==========================================================================
Blok osoby (imię / stanowisko / e-mail / bio)
========================================================================== */
.contact-person {
display: flex;
flex-direction: column;
gap: var(--mobile-content-xs); /* 12 */
}
@media (min-width: 769px) {
.contact-person {
gap: var(--desktop-content-xs); /* 16 */
}
}
.contact-person__name,
.contact-person__role,
.contact-person__email {
text-box: trim-both cap alphabetic;
}
/* ==========================================================================
Akordeon działu — layout w gridzie segmentu; mechanika w accordion.css
========================================================================== */
.contact-segment--accordion .accordion-title {
font-feature-settings: "lnum" 1, "pnum" 1;
}
/* Desktop: tytuł na górze, toggle na dole (etykieta rozciągnięta do wysokości wiersza) */
@media (min-width: 1025px) {
.contact-segment--accordion .contact-segment__label {
flex-direction: column;
align-items: flex-start;
align-self: stretch;
justify-content: space-between;
min-height: 6.25rem; /* 100 — Figma min-h */
}
}
/*
* Reflow treści akordeonu w gridzie segmentu.
* Modern Chrome owija dzieci
w pseudo-element ::details-content — i to ON
* jest itemem gridu (auto-placement do 1 tora!). Dlatego placement nakładamy na pseudo.
* Fallback (Firefox/Safari bez ::details-content): item = .accordion-content,
* który dziedziczy grid-column z .contact-segment__content. Reguły rozdzielone, by
* nieznany pseudo-element nie unieważnił fallbacku.
*/
.contact-segment--accordion::details-content {
grid-column: 1 / -1;
min-width: 0;
}
@media (min-width: 769px) { /* tablet — stack, treść span 5 */
.contact-segment--accordion::details-content {
grid-column: 1 / span 5;
}
}
@media (min-width: 1025px) { /* desktop — kol. 7–12 obok etykiety */
.contact-segment--accordion::details-content {
grid-column: 7 / -1;
}
}
.contact-segment--accordion .accordion-content-inner {
display: flex;
flex-direction: column;
gap: var(--mobile-content-l); /* 32 — odstęp między osobami */
}
@media (min-width: 769px) {
.contact-segment--accordion .accordion-content-inner {
gap: var(--gap-stack); /* 36 */
}
}
/* ==========================================================================
Wariant: Wolontariusze (pojedynczy blok)
========================================================================== */
.contact-segment--note .contact-segment__content {
grid-column: 1 / -1;
}
/*
* Strona Partnerzy — Etap 2 (detal).
* Spec: docs/specs/partnerzy-spec.md | węzły Figma 72:11932 / 72:12356 / 72:12783.
*
* Architektura (zaakceptowana w Etapie 1):
* - .partners-section : rytm pionowy (1:1 z .contact-section).
* - .partners-list : lista segmentów domknięta dolnym dzielnikiem.
* - .partners-item (Typ A) : logo + opis. Grid 1 → 6 → 12 kolumn.
* logo: kol. 1 (span 2, lewa), opis: tablet kol. 4–6 / desktop kol. 7–12.
* Reflow: mobile stack (logo nad opisem) → tablet/desktop obok siebie.
* - .partners-item--logos (Typ B) : same loga (Patroni). Stack M → rząd T/D.
*
* Reuse: typografia .section-title (32/40/40) + .body-m, --section-divider.
* Decyzje z bramki Etapu 1: py segmentu = --tablet-section-m (72);
* rozkład logotypów Patroni = rząd flex z równym gap + wrap (skalowalne na N).
*/
/* ==========================================================================
Sekcja + rytm pionowy (jak .contact-section)
========================================================================== */
.partners-section {
display: flex;
flex-direction: column;
gap: var(--mobile-content-l); /* 32 */
padding-top: var(--mobile-content-l); /* 32 */
padding-bottom: var(--content-pt-section); /* 36 */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.partners-section {
gap: var(--tablet-content-xl); /* 56 */
padding-top: var(--content-pt-section); /* 36 */
padding-bottom: var(--desktop-content-l); /* 48 */
}
}
@media (min-width: 1025px) { /* desktop */
.partners-section {
padding-top: var(--desktop-content-xl); /* 64 */
padding-bottom: var(--desktop-content-xxl); /* 96 */
}
}
/* Ostatnia sekcja przed stopką — większy pb (Figma 40/64/96, jak .contact) */
.partners-section:last-of-type {
padding-bottom: var(--page-footer-pb-mobile);
}
@media (min-width: 769px) {
.partners-section:last-of-type {
padding-bottom: var(--page-footer-pb-tablet);
}
}
@media (min-width: 1025px) {
.partners-section:last-of-type {
padding-bottom: var(--page-footer-pb-desktop);
}
}
/* Nagłówek sekcji — Cormorant 32/40/40 (.section-title); trim + cyfry medianowe */
.partners-section__title {
font-feature-settings: "lnum" 1, "pnum" 1;
text-box: trim-both cap alphabetic;
}
/* ==========================================================================
Lista segmentów — domknięta dolnym dzielnikiem (segmenty: border-top)
========================================================================== */
.partners-list {
display: flex;
flex-direction: column;
border-bottom: var(--section-divider);
}
/* ==========================================================================
Typ A — segment „logo + opis" (grid-aware: 1 / 6 / 12 kolumn)
========================================================================== */
.partners-item {
display: grid;
grid-template-columns: 1fr; /* mobile: stack */
row-gap: var(--tablet-content-l); /* 40 — logo ↔ opis */
align-items: start;
border-top: var(--section-divider);
padding-top: var(--tablet-content-l); /* 40 */
padding-bottom: var(--content-pt-section); /* 36 */
}
@media (min-width: 769px) { /* --breakpoint-tablet — logo + opis obok siebie */
.partners-item {
grid-template-columns: repeat(6, 1fr);
-moz-column-gap: var(--tablet-gutter);
column-gap: var(--tablet-gutter); /* 20 */
align-items: center;
padding-top: var(--tablet-section-m); /* 72 */
padding-bottom: var(--tablet-section-m); /* 72 */
}
.partners-item__logo {
grid-column: 1 / span 2; /* lewa */
}
.partners-item__desc {
grid-column: 4 / -1; /* kol. 4–6 (≈ 381px) */
}
}
@media (min-width: 1025px) { /* desktop: 12 kol. */
.partners-item {
grid-template-columns: repeat(12, 1fr);
-moz-column-gap: var(--desktop-gutter);
column-gap: var(--desktop-gutter); /* 32 */
}
.partners-item__desc {
grid-column: 7 / -1; /* kol. 7–12 (span 6 = 664px) */
}
}
/* Logo — lewy, naturalna proporcja, znormalizowana wysokość (Figma ~57px) */
.partners-item__logo {
display: block;
width: auto;
height: 3.5625rem; /* 57 */
max-width: 100%;
justify-self: start;
}
.partners-item__desc {
width: 100%;
font-size: 1rem; /* 16 — Figma Body M na mobile */
letter-spacing: 0.01em; /* Figma Body M: 1% */
}
@media (min-width: 769px) { /* --breakpoint-tablet */
.partners-item__desc {
font-size: inherit;
letter-spacing: inherit;
}
}
/* ==========================================================================
Typ B — segment „same loga" (Patroni medialni): stack M → rząd T/D
========================================================================== */
.partners-item--logos {
grid-template-columns: 1fr;
row-gap: var(--tablet-content-xl); /* 56 — loga w pionie (mobile) */
}
@media (min-width: 769px) {
.partners-item--logos {
display: flex;
flex-wrap: wrap;
align-items: center;
-moz-column-gap: var(--tablet-section-m);
column-gap: var(--tablet-section-m); /* 72 */
row-gap: var(--tablet-content-l); /* 40 — gdy wiersz się zawinie */
}
}
@media (min-width: 1025px) {
.partners-item--logos {
-moz-column-gap: var(--desktop-content-xxl);
column-gap: var(--desktop-content-xxl); /* 96 */
row-gap: var(--desktop-content-l); /* 48 */
}
}
.partners-item--logos .partners-item__logo {
flex-shrink: 0;
}
/*
* Kafel Mediateki — WSPÓLNY komponent (Video / Audio / Foto / Publikacje + hub).
* Spec: docs/specs/mediateka-listing-spec.md §4 | Figma 78:17754 / 78:18691 / 78:13191.
*
* Kolumna: miniatura 16:9 (IMG + ikona play) → treść (data · tytuł · info).
* Typografia = klasy w markupie (.badge / .subheading-2 / .h3 / .body-m); tu tylko layout,
* kolor kontekstowy, text-box i font-feature (zgodnie z konwencją typografii).
*/
.mediateka-card {
display: flex;
flex-direction: column;
gap: var(--mobile-content-m); /* 24 — miniatura ↔ treść */
}
/* Miniatura wideo 16:9 — link; tło placeholder pod ![]()
; play wyśrodkowany */
.mediateka-card__media {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--placeholder-surface); /* #f6f6f6 — widoczne, gdy brak miniatury */
}
/* Badge typu materiału — biała pigułka na miniaturze; inset jak Figma 87:31196.
* Lżejszy niż projekt: typografia .badge (12→14) i padding 6×12 zamiast subheading-2 + 10×16. */
.mediateka-card__badge {
position: absolute;
z-index: 1;
top: 1px;
left: 0;
padding: var(--mobile-content-xs); /* 12 — jak Figma TAG */
pointer-events: none;
}
/* Nad `.badge`: białe tło, ciaśniejszy padding; typografia dziedziczona z .badge */
.mediateka-card__badge-pill {
justify-content: center;
padding: 0.375rem 0.75rem; /* 6×12 */
border-radius: 1.25rem; /* 20px */
background-color: var(--base-00);
text-box: trim-both cap alphabetic;
}
.mediateka-card__thumb {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* Ikona play (assets/icons/play.svg — currentColor) wyśrodkowana na miniaturze */
.mediateka-card__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8.1875rem; /* 131 — wg Figmy stała na wszystkich BP */
height: 8.1875rem;
color: var(--base-00); /* biały na miniaturze — Figma / SG */
pointer-events: none;
}
.mediateka-card__play svg {
display: block;
width: 100%;
height: 100%;
}
.mediateka-card__body {
display: flex;
flex-direction: column;
gap: var(--content-xs); /* 16 — data ↔ tytuł ↔ info */
color: var(--text-primary);
}
/* Reset UA margin na
— odstępy tylko z gap (Figma auto-layout); bez wpływu na .body-m poza kaflem */ .mediateka-card__body > p { margin: 0; } /* Data i tytuł — przycięcie line-boxa (Figma text-box-trim); tytuł: cyfry medianowe */ .mediateka-card__date { text-box: trim-both cap alphabetic; } .mediateka-card__title { font-feature-settings: "lnum" 1, "pnum" 1; } /* Tytuł jako link — bez własnej typografii (dziedziczy .h3); bez podkreślenia (wieloliniowy tytuł). text-box trim na linku (nie na h3): trim na nagłówku kurczy box h3, a link wystaje w górę. */ .mediateka-card__title-link { color: inherit; text-decoration: none; text-box: trim-both cap alphabetic; } @media (min-width: 769px) { /* --breakpoint-tablet */ .mediateka-card { gap: var(--desktop-content-m); /* 32 */ } .mediateka-card__body { gap: var(--desktop-content-s); /* 24 */ } } /* * Wspólny reflow siatki kafli mediateki (listing, hub, archiwum tagów). * Mobile 1 col → tablet 2 col (span 3/6) → desktop 3 col (span 4/12). */ .mediateka-listing__grid, .mediateka-card-grid, .mediateka-hub__grid { row-gap: var(--gap-stack); } .mediateka-listing__grid .mediateka-card, .mediateka-card-grid .mediateka-card, .mediateka-hub__grid .mediateka-card { grid-column: 1 / -1; align-self: start; } @media (min-width: 769px) { /* --breakpoint-tablet */ .mediateka-listing__grid, .mediateka-card-grid { -moz-column-gap: var(--desktop-content-s); column-gap: var(--desktop-content-s); } .mediateka-listing__grid .mediateka-card, .mediateka-card-grid .mediateka-card, .mediateka-hub__grid .mediateka-card { grid-column: span 3; } } @media (min-width: 1025px) { /* --breakpoint-desktop */ .mediateka-listing__grid, .mediateka-card-grid { row-gap: var(--tablet-content-xl); } .mediateka-listing__grid .mediateka-card, .mediateka-card-grid .mediateka-card, .mediateka-hub__grid .mediateka-card { grid-column: span 4; } } /* * Listing Mediateki (Video) — layout sekcji. * Spec: docs/specs/mediateka-listing-spec.md §3 * * Siatka kafli: mediateka-grid.css */ .mediateka-listing { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "divider" "intro" "grid" "divider-footer" "pager-footer"; padding-top: var(--mobile-content-l); padding-bottom: var(--page-footer-pb-mobile); } .mediateka-listing__title { grid-area: title; text-box: trim-both cap alphabetic; font-feature-settings: "lnum" 1, "pnum" 1; } .mediateka-listing__divider { grid-area: divider; margin-top: var(--mobile-content-l); border-top: var(--section-divider); } .mediateka-listing__intro { grid-area: intro; margin-top: var(--mobile-content-l); } .mediateka-listing__grid { grid-area: grid; margin-top: var(--mobile-content-l); } .mediateka-listing__body { grid-area: grid; display: flex; flex-direction: column; gap: var(--tablet-content-l); margin-top: var(--mobile-content-l); } .mediateka-listing__body > section { display: flex; flex-direction: column; gap: var(--mobile-content-l); } .mediateka-listing__section-title { margin: 0; } .mediateka-listing__divider--footer { display: none; } .mediateka-listing__pager--header { display: none; } .mediateka-listing__pager--footer { grid-area: pager-footer; margin-top: var(--gap-stack); } .mediateka-listing__pager .pagination__list { width: 100%; justify-content: space-between; } @media (min-width: 769px) { /* --breakpoint-tablet */ .mediateka-listing { grid-template-columns: 1fr auto; grid-template-areas: "title pager" "divider divider" "intro intro" "grid grid" "divider-footer divider-footer" ". pager-footer"; align-items: end; padding-top: var(--content-pt-section); padding-bottom: var(--page-footer-pb-tablet); } .mediateka-listing__divider { margin-top: var(--tablet-content-l); } .mediateka-listing__intro { margin-top: var(--tablet-content-l); } .mediateka-listing__grid, .mediateka-listing__body { margin-top: var(--tablet-content-xl); } .mediateka-listing__body { gap: var(--desktop-content-xl); } .mediateka-listing__body > section { gap: var(--tablet-content-l); } .mediateka-listing__divider--footer { display: block; grid-area: divider-footer; margin-top: var(--tablet-content-xl); } .mediateka-listing__pager--header { display: block; grid-area: pager; margin-top: 0; } .mediateka-listing__pager--footer { margin-top: var(--tablet-content-l); } .mediateka-listing__pager .pagination__list { width: auto; justify-content: flex-end; gap: var(--gap-compact); } } @media (min-width: 1025px) { /* --breakpoint-desktop */ .mediateka-listing { padding-top: var(--desktop-content-xl); padding-bottom: var(--page-footer-pb-desktop); } .mediateka-listing__grid, .mediateka-listing__body { margin-top: var(--repertoire-heading-gap); } .mediateka-listing__divider--footer { margin-top: var(--repertoire-heading-gap); } } @media (min-width: 769px) { .mediateka-listing__intro { max-width: var(--content-measure-tablet); } } @media (min-width: 1025px) { .mediateka-listing__intro { max-width: var(--content-measure-desktop); } } /* * Mediateka — strona główna sekcji (hub). * Spec: docs/specs/mediateka-hub-spec.md * * Siatka kafli: mediateka-grid.css */ .mediateka-hub-main { padding-bottom: var(--mobile-content-xl); } .mediateka-hub__title { text-box: trim-both cap alphabetic; font-feature-settings: "lnum" 1, "pnum" 1; } .mediateka-hub__flow { display: flex; flex-direction: column; gap: var(--mobile-section-m); margin-top: var(--mobile-content-l); } .mediateka-hub__section { display: flex; flex-direction: column; gap: var(--mobile-content-l); padding-top: var(--mobile-content-l); border-top: var(--section-divider); } .mediateka-hub__heading { display: flex; flex-direction: column; gap: var(--tablet-content-l); } .mediateka-hub__heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mobile-content-m); } .mediateka-hub__section-title { text-box: trim-both cap alphabetic; font-feature-settings: "lnum" 1, "pnum" 1; } .mediateka-hub__link { flex-shrink: 0; color: var(--text-primary); white-space: nowrap; text-decoration: none; } .mediateka-hub__calendar { container-type: inline-size; display: grid; grid-template-areas: "title" "calendar" "link"; row-gap: var(--mobile-content-l); padding-top: var(--mobile-content-xl); border-top: var(--section-divider); } .mediateka-hub__calendar-header { display: contents; } .mediateka-hub__calendar-title { grid-area: title; text-box: trim-both cap alphabetic; font-feature-settings: "lnum" 1, "pnum" 1; } .mediateka-hub__calendar .repertoire__calendar { grid-area: calendar; } .mediateka-hub__calendar-link { grid-area: link; justify-self: start; color: var(--text-primary); white-space: nowrap; text-decoration: none; margin-top: calc(var(--mobile-content-xl) - var(--mobile-content-l)); } @media (min-width: 769px) { /* --breakpoint-tablet */ .mediateka-hub-main { padding-bottom: var(--tablet-section-s); } .mediateka-hub__flow { gap: var(--desktop-content-xl); margin-top: var(--tablet-content-xl); } .mediateka-hub__section { gap: var(--tablet-content-l); padding-top: var(--content-pt-section); } .mediateka-hub__lead { max-width: var(--content-measure-tablet); } .mediateka-hub__calendar { display: block; padding-top: var(--tablet-section-s); } .mediateka-hub__calendar-header { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--mobile-content-m); margin-bottom: var(--gap-stack); } .mediateka-hub__calendar-title, .mediateka-hub__calendar-link { grid-area: auto; margin-top: 0; } } @media (min-width: 1025px) { /* --breakpoint-desktop */ .mediateka-hub-main { padding-bottom: var(--desktop-content-xxl); } .mediateka-hub__flow { gap: var(--desktop-content-xxl); } .mediateka-hub__lead { max-width: var(--content-measure-desktop); } .mediateka-hub__calendar { padding-top: var(--desktop-content-xxl); } .mediateka-hub__calendar-header { margin-bottom: var(--repertoire-heading-gap); } } /* * Mediateka single — video hero (16:9 player in event hero slot). */ .event-hero--video .event-hero__frame { aspect-ratio: 16 / 9; min-height: 0; background-color: var(--base-190); } .event-hero--video .event-hero__video { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* * Mediateka single — square hero variant (Album 664×664). */ .event-page--hero-square .event-hero--vertical .event-hero__frame { min-height: 0; aspect-ratio: 1 / 1; height: auto; } .event-page--hero-square .event-hero--vertical .event-hero__image, .event-page--hero-square .event-hero--vertical .event-hero__placeholder { min-height: 0; height: 100%; } @media (min-width: 1025px) { /* --breakpoint-desktop */ .event-page--hero-square .event-masthead__lead { min-height: 0; } } /* * Dev-only — zwijany panel transkrypcji pod playerem. * Layout only; typografia z .caption / .body-s. */ .dev-video-transcript { margin-top: var(--mobile-content-s, 0.75rem); } .dev-video-transcript__toggle { cursor: pointer; list-style: none; color: inherit; opacity: 0.65; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dev-video-transcript__toggle::-webkit-details-marker { display: none; } .dev-video-transcript__toggle:hover, .dev-video-transcript__toggle:focus-visible { opacity: 1; } .dev-video-transcript__label-hide { display: none; } .dev-video-transcript[open] > .dev-video-transcript__toggle .dev-video-transcript__label-show { display: none; } .dev-video-transcript[open] > .dev-video-transcript__toggle .dev-video-transcript__label-hide { display: inline; } .dev-video-transcript__body { margin-top: var(--mobile-content-s, 0.75rem); max-height: 24rem; overflow: auto; border-top: 1px solid var(--base-160, #d8d8d8); padding-top: var(--mobile-content-s, 0.75rem); } .dev-video-transcript__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; } /* * Search page + header search — wyniki wyszukiwania (Figma 98:31696). */ .search-page { padding-top: var(--mobile-content-l); padding-bottom: var(--mobile-section-l); } .search-page__header { margin-bottom: var(--mobile-content-l); } .search-page__heading { margin: 0; /* Dawny rozmiar samej frazy — całe H1 „fraza” — wyniki wyszukiwania */ font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; } .search-page__title { margin: 0; } .search-page__form { display: flex; gap: 0; max-width: 100%; margin-bottom: var(--mobile-content-l); } .search-page__input { flex: 1; min-width: 0; padding: 0.625rem 1rem; border: 1px solid var(--main-off-black); border-right: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); background: var(--base-mode-background); color: var(--text-primary); } .search-page__input:focus { outline: 2px solid var(--main-off-black); outline-offset: 2px; } .search-page__submit { flex-shrink: 0; padding: 0.625rem 1.5rem; border: 1px solid var(--main-off-black); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--main-off-black); color: var(--base-mode-background); cursor: pointer; } .search-page__empty { color: var(--text-secondary); } .search-page__pager { padding-top: var(--mobile-content-l); border-top: 1px solid var(--main-off-black); } .search-page__pager .pagination__list { width: 100%; justify-content: space-between; } .search-page__sections { display: flex; flex-direction: column; gap: 0; } /* Szuflada filaru — nad paskiem tagów i kupką Relevanssi */ .search-filar-drawer { padding-top: var(--mobile-content-l); padding-bottom: var(--mobile-content-xl); border-top: 1px solid var(--main-off-black); } .search-filar-drawer__title, .search-tag-banner__title { margin: 0 0 var(--mobile-content-l); } .search-filar-drawer__list { display: flex; flex-direction: column; gap: var(--mobile-content-l); } .search-filar-drawer__item { min-width: 0; } /* Tag banner — tytuł jak szuflada, separator jak kolejne sekcje */ .search-tag-banner { padding: var(--mobile-content-l) 0 var(--mobile-content-xl); border-top: 1px solid var(--main-off-black); } .search-tag-banner__links { display: flex; flex-direction: column; gap: var(--mobile-content-s); margin: 0; padding: 0; list-style: none; } .search-tag-banner__link { color: var(--text-primary); text-decoration: none; } /* Section — ten sam padding-top co szuflada i tagi (linia → tytuł) */ .search-section { padding-top: var(--mobile-content-l); padding-bottom: var(--mobile-content-xl); border-top: 1px solid var(--main-off-black); } .search-section__title { margin: 0 0 var(--mobile-content-l); } .search-section__list { display: flex; flex-direction: column; gap: var(--mobile-content-l); } .search-section__item { min-width: 0; } .search-section--collapsible.is-collapsed .search-section__item--overflow { display: none; } /* Mediateka: max 2 rzędy (1/2/3 kol.), reszta za „Pokaż więcej” */ .search-section--mediateka.is-collapsed .mediateka-card:nth-child(n + 3) { display: none; } .search-section--mediateka.is-collapsed .search-section__show-more-wrap { display: none; } .search-section--mediateka.is-collapsed:has(.mediateka-card:nth-child(3)) .search-section__show-more-wrap { display: flex; } @media (min-width: 769px) { .search-section--mediateka.is-collapsed .mediateka-card:nth-child(n + 3) { display: flex; } .search-section--mediateka.is-collapsed .mediateka-card:nth-child(n + 5) { display: none; } .search-section--mediateka.is-collapsed:has(.mediateka-card:nth-child(3)) .search-section__show-more-wrap { display: none; } .search-section--mediateka.is-collapsed:has(.mediateka-card:nth-child(5)) .search-section__show-more-wrap { display: flex; } } @media (min-width: 1025px) { .search-section--mediateka.is-collapsed .mediateka-card:nth-child(n + 5) { display: flex; } .search-section--mediateka.is-collapsed .mediateka-card:nth-child(n + 7) { display: none; } .search-section--mediateka.is-collapsed:has(.mediateka-card:nth-child(5)) .search-section__show-more-wrap { display: none; } .search-section--mediateka.is-collapsed:has(.mediateka-card:nth-child(7)) .search-section__show-more-wrap { display: flex; } } .search-section__show-more-wrap { display: flex; justify-content: center; margin-top: var(--mobile-content-l); } .search-section__all { margin: var(--mobile-content-l) 0 0; } .search-section--collapsible.is-expanded .search-section__show-more-wrap { display: none; } /* Shared result */ .search-result__date { margin: 0; } .search-result__title { margin: 0; } .search-result__title-link { color: inherit; text-decoration: none; } .search-page .search-result__title-link:hover, .search-page .search-result__title-link:focus-visible, .search-page .see-also-event__title-link:hover, .search-page .see-also-event__title-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; } .search-result__excerpt { margin-top: var(--mobile-content-s); color: var(--text-primary); } /* Trafienia — tło zamiast podkreślenia (bez kolizji z draw-underline na linku) */ .search-page .search-hit, .search-page .search-result__excerpt .relevanssi-query-term, .search-page .search-result__excerpt strong { text-decoration: none; font-weight: inherit; background-color: var(--grey-200); padding: 0 0.15em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Fragment wyrazu: bez paddingu, żeby podlewka nie rozcinała słowa. */ .search-page .search-hit--partial { padding-inline: 0; } /* Event row — reuse see-also spacing */ .search-result--event { display: flex; flex-direction: column; gap: var(--mobile-content-s); } /* Mediateka horizontal */ .search-result--mediateka { display: flex; gap: var(--mobile-content-m); align-items: flex-start; } .search-result__media { position: relative; flex-shrink: 0; width: 7.5rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey-grey100, #f6f6f6); text-decoration: none; } .search-result__thumb { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .search-result__thumb--placeholder { display: block; width: 100%; height: 100%; background: var(--grey-grey100, #f6f6f6); } .search-result__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; color: var(--base-00); pointer-events: none; } .search-result__play svg { display: block; width: 100%; height: 100%; } .search-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mobile-content-s); } .search-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mobile-content-s); } .search-result__badge { text-transform: uppercase; } /* Header search — mobile: ikona /szukaj/; desktop: formularz */ .site-header__search { display: flex; align-items: center; } .site-header__search-link { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--site-header-menu-size-mobile); height: var(--site-header-menu-size-mobile); border: 1px solid var(--main-off-black); border-radius: var(--radius-pill); color: var(--main-off-black); text-decoration: none; } .site-header__search-link svg { display: block; width: 1rem; height: 1rem; } .site-header__search-form { display: none; align-items: center; flex: 1; max-width: 18rem; min-width: 0; } .site-header__search-input { width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--main-off-black); border-radius: var(--radius-pill); background: var(--base-mode-background); color: var(--text-primary); font: inherit; } .site-header__search-input::-moz-placeholder { color: var(--text-secondary); } .site-header__search-input::placeholder { color: var(--text-secondary); } .site-header__search-input:focus { outline: 2px solid var(--main-off-black); outline-offset: 2px; } @media (min-width: 769px) { .search-page { padding-top: var(--tablet-content-l); padding-bottom: var(--tablet-section-l); } .search-page__heading { font-size: 2.5rem; } .search-page__form { max-width: 34.375rem; margin-bottom: var(--tablet-content-xl); } .search-filar-drawer, .search-tag-banner, .search-section { padding-top: var(--tablet-content-l); padding-bottom: var(--tablet-content-xl); } .search-page__pager { padding-top: var(--tablet-content-l); } .search-page__pager .pagination__list { width: auto; justify-content: flex-end; gap: var(--gap-compact); } .search-filar-drawer__list, .search-section__list { gap: var(--tablet-content-l); } .search-result__media { width: 12.5rem; } .search-result__play { width: 3.25rem; height: 3.25rem; } .site-header__search-link { width: var(--site-header-menu-size); height: var(--site-header-menu-size); } } @media (min-width: 1025px) { .search-page__heading { font-size: 3.75rem; line-height: 1.05; letter-spacing: -0.075rem; } .search-filar-drawer, .search-tag-banner, .search-section { padding-bottom: var(--tablet-content-xxl); } .search-filar-drawer__list, .search-section__list { gap: var(--tablet-content-xl); } .site-header__search-link { display: none; } .site-header__search-form { display: flex; max-width: 20rem; } .site-header__search-input { font-size: 0.875rem; } } @media (prefers-reduced-motion: reduce) { .search-page__submit { transition: none; } } /* Dev-only — overlay kolumn gridu w szablonach podglądu (?grid=1) */ /* * Grid debug overlay — wizualizacja kolumn 2/6/12 (dev-only). * Renderowany wyłącznie w szablonach podglądu przy ?grid=1 * (markup: .grid-debug > .container > .grid-container > 12 × __col). * Liczba widocznych kolumn podąża za breakpointami grid.css. * -------------------------------------------------------------------------- */ .grid-debug { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .grid-debug .container, .grid-debug .grid-container { height: 100%; } .grid-debug__col { height: 100%; background: rgba(238, 52, 36, 0.08); /* --red-500 @ 8% */ } /* Mobile: 2 kolumny */ .grid-debug__col:nth-child(n+3) { display: none; } @media (min-width: 769px) { /* --breakpoint-tablet — 6 kolumn */ .grid-debug__col:nth-child(n+3) { display: block; } .grid-debug__col:nth-child(n+7) { display: none; } } @media (min-width: 1025px) { /* --breakpoint-desktop — 12 kolumn */ .grid-debug__col:nth-child(n+7) { display: block; } }