/* ========================================================================= AJS Studio Wokalne — warstwa bazowa. Kolory pochodza wylacznie ze zmiennych ustawianych w (Options Page). ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--ajs-scrollbar) transparent; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ajs-bg); color: var(--ajs-ink); font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } html.ajs-scroll-locked, html.ajs-scroll-locked body { overflow: hidden; } img, svg, iframe { max-width: 100%; } img { height: auto; display: block; } a { color: var(--ajs-link); text-decoration: none; transition: color 140ms ease; } a:hover { color: var(--ajs-link-hover); } p { text-wrap: pretty; } h1, h2, h3, h4 { font-family: 'Montserrat', system-ui, sans-serif; text-wrap: balance; margin: 0; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ajs-link); outline-offset: 2px; border-radius: 4px; } ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ajs-scrollbar); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .ajs-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ajs-cta); color: var(--ajs-ink); padding: 12px 20px; font-weight: 600; } .ajs-skip-link:focus { left: 8px; top: 8px; } /* ------------------------------------------------------------- Uklad. */ .ajs-container { max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); position: relative; } .ajs-section { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem); /* Musi byc >= wysokosci sticky headera, inaczej skok po kotwicy chowa naglowek pod menu. */ scroll-margin-top: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); } /* ------------------------------------------------------- Typografia. */ .ajs-heading { font-weight: 400; font-size: clamp(1.4rem, 1.05rem + 1.7vw, 1.9375rem); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 0.7em; } .ajs-heading--upper { text-transform: uppercase; } .ajs-heading__accent { color: var(--ajs-pink-ink); font-weight: 700; } .ajs-lead { max-width: 61ch; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); line-height: 1.7; color: var(--ajs-ink-2); } .ajs-lead--wide { max-width: none; } .ajs-lead--narrow { max-width: 45ch; } .ajs-lead--sm { font-size: 0.875rem; margin-bottom: clamp(1.25rem, 3vw, 1.875rem); } .ajs-prose { color: var(--ajs-ink-2); line-height: 1.66; } .ajs-prose > :first-child { margin-top: 0; } .ajs-prose > :last-child { margin-bottom: 0; } .ajs-prose p { margin: 0 0 1.1em; } .ajs-prose strong { font-weight: 700; color: var(--ajs-ink); } .ajs-prose ul { margin: 0 0 1.1em; padding-left: 1.25rem; line-height: 1.7; } /* Justowanie tylko tam, gdzie kolumna jest szeroka — na telefonie robi "rzeki". */ @media (min-width: 48rem) { .ajs-prose--justify p { text-align: justify; hyphens: auto; } } .ajs-prose--page { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); } .ajs-notice { background: var(--ajs-pink-soft); border-radius: 10px; padding: 12px 16px; font-size: 0.8125rem; } /* ------------------------------------------------------------ Listy. */ .ajs-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .ajs-check li { display: flex; gap: 8px; align-items: baseline; font-size: 0.78rem; font-weight: 600; line-height: 1.45; color: var(--ajs-ink); } .ajs-check__mark { font-weight: 700; flex-shrink: 0; } .ajs-check--lg li { font-size: 0.875rem; font-weight: 400; line-height: 1.5; gap: 9px; color: var(--ajs-ink-2); } .ajs-check--lg .ajs-check__mark { color: var(--ajs-pink); } /* -------------------------------------------------------- Przyciski. */ .ajs-btn { display: inline-block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; line-height: 1.4; text-align: center; border: 0; cursor: pointer; transition: transform 120ms ease, background-color 140ms ease; /* WCAG: cel dotykowy nie mniejszy niz 44px. */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .ajs-btn:active { transform: scale(0.96); } .ajs-btn--pink { background: var(--ajs-button); color: var(--ajs-ink); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 26px; border-radius: 9999px; } .ajs-btn--soft { font-family: 'Raleway', system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; padding: 9px 22px; } .ajs-btn--cta { background: var(--ajs-cta); color: var(--ajs-ink); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 13px 24px; border-radius: 4px; } .ajs-badge { display: inline-block; background: var(--ajs-cta); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 9999px; margin: 0 0 1rem; } /* ------------------------------------------------------- Nawigacja. */ .ajs-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ajs-bg-soft) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ajs-border); transition: box-shadow 160ms ease; } .ajs-nav.is-scrolled { box-shadow: 0 1px 18px color-mix(in srgb, var(--ajs-dark) 7%, transparent); } .ajs-nav__inner { max-width: 1160px; margin-inline: auto; padding: 0 clamp(1rem, 3vw, 1.75rem); min-height: clamp(4rem, 3rem + 3vw, 6rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ajs-brand { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 0.875rem); flex-shrink: 0; min-height: 44px; color: var(--ajs-ink); } .ajs-brand__logo { height: clamp(2.5rem, 5vw, 3.875rem); width: auto; flex-shrink: 0; } .ajs-brand__text { display: flex; flex-direction: column; gap: 4px; } .ajs-brand__name { font-family: 'Oswald', system-ui, sans-serif; font-weight: 700; font-size: clamp(1rem, 0.75rem + 1.1vw, 1.5625rem); letter-spacing: 0.005em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .ajs-brand__accent { color: var(--ajs-accent); } .ajs-brand__tagline { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; font-size: clamp(0.5rem, 0.45rem + 0.2vw, 0.656rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ajs-link); line-height: 1; white-space: nowrap; } .ajs-nav__toggle { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ajs-button); border: 0; border-radius: 9999px; cursor: pointer; } .ajs-nav__toggle-bars { display: grid; gap: 4px; width: 18px; } .ajs-nav__toggle-bars span { height: 2px; background: var(--ajs-ink); border-radius: 2px; transition: transform 180ms ease, opacity 140ms ease; } .is-open .ajs-nav__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .is-open .ajs-nav__toggle-bars span:nth-child(2) { opacity: 0; } .is-open .ajs-nav__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* * Panel mobilny istnieje zawsze i jest chowany widocznoscia, nie `display: none` * — inaczej nie da sie go animowac (display nie jest wlasnoscia przejsciowa). * `visibility` trzyma linki poza kolejnoscia tabulacji i drzewem dostepnosci, * a `position: absolute` sprawia, ze panel nie zajmuje miejsca w ukladzie. */ .ajs-nav__menu { position: absolute; inset-inline: 0; top: 100%; background: var(--ajs-bg-soft); border-bottom: 1px solid var(--ajs-border); box-shadow: 0 18px 30px color-mix(in srgb, var(--ajs-dark) 10%, transparent); padding: 0.5rem clamp(1rem, 3vw, 1.75rem) 1.25rem; max-height: min(30rem, calc(100dvh - 5rem)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-0.625rem); transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 220ms; } .ajs-nav.is-open .ajs-nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s; } .ajs-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ajs-menu a { position: relative; display: flex; align-items: center; /* Pudelko przycina sie do etykiety, zeby kreska nie ciagnela sie na cala szerokosc panelu. */ width: fit-content; min-height: 44px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ajs-ink); } .ajs-menu a:hover, .ajs-menu .current-menu-item > a { color: var(--ajs-link); } /* * Podkreslenie sekcji, w ktorej aktualnie jest czytelnik. Pozycja liczona od * srodka linku (`50% + 0.75em`), a nie od dolu pudelka — pudelko ma 44px celu * dotykowego, wiec kreska przy dolnej krawedzi odklejalaby sie od tekstu. */ .ajs-menu a::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% + 0.75em); height: 2px; border-radius: 2px; background: var(--ajs-pink-ink); transform: scaleX(0); transform-origin: right center; transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1); } .ajs-menu a:hover::after, .ajs-menu a:focus-visible::after, .ajs-menu a[aria-current]::after { transform: scaleX(1); transform-origin: left center; } /* Pod pigulka CTA kreska wygladalaby jak blad. */ @media (min-width: 64rem) { .ajs-menu .menu-item--cta a::after, .ajs-menu li:last-child a::after { content: none; } } @media (prefers-reduced-motion: reduce) { .ajs-menu a::after { transition: none; } } @media (min-width: 64rem) { .ajs-nav__toggle { display: none; } .ajs-nav__menu, .ajs-nav.is-open .ajs-nav__menu { position: static; background: none; border: 0; box-shadow: none; padding: 0; max-height: none; overflow: visible; opacity: 1; visibility: visible; transform: none; transition: none; } .ajs-menu { flex-direction: row; align-items: center; gap: clamp(0.5rem, 1.2vw, 1rem); } .ajs-menu a { font-size: 0.656rem; white-space: nowrap; min-height: 0; } .ajs-menu .menu-item--cta a, .ajs-menu li:last-child a { background: var(--ajs-button); padding: 10px 18px; border-radius: 9999px; transition: transform 120ms ease; } .ajs-menu .menu-item--cta a:active, .ajs-menu li:last-child a:active { transform: scale(0.95); } } /* ---------------------------------------------------------- Stopka. */ .ajs-footer { background: var(--ajs-bg-soft); border-top: 1px solid var(--ajs-border); padding: clamp(2rem, 5vw, 2.875rem) 0 1.625rem; } .ajs-footer__inner { max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .ajs-footer__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } /* Na telefonie obie kolumny linkow ida obok siebie — ustawione jedna pod druga niepotrzebnie wydluzaly stopke o kilkaset pikseli. */ @media (max-width: 47.99rem) { .ajs-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem clamp(1rem, 6vw, 2.5rem); } .ajs-footer__brand { grid-column: 1 / -1; } } @media (min-width: 48rem) { .ajs-footer__grid { grid-template-columns: 1fr auto auto; } } .ajs-brand--footer { margin-bottom: 1.125rem; } .ajs-brand--footer .ajs-brand__logo { height: clamp(3rem, 6vw, 5.25rem); } .ajs-brand--footer .ajs-brand__name { font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); } .ajs-brand--footer .ajs-brand__tagline { font-size: 0.75rem; } .ajs-footer__contact { font-style: normal; font-size: 0.78rem; line-height: 1.8; color: var(--ajs-ink-3); } .ajs-footer__col-title { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem; } .ajs-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; /* Interlinia musi siedziec na
  • — to ona wyznacza wysokosc wiersza, nie sam link, ktory jest w srodku jako inline-flex. */ line-height: 1.35; } .ajs-footer__links a { display: inline-flex; align-items: center; font-size: 0.78rem; color: var(--ajs-ink-3); } /* * Na dotyku link dostaje wiekszy cel, ale 44px razy siedem pozycji rozciagalo * stopke na pol ekranu. 34px to nadal wygodne trafienie i ponad wymagane * przez WCAG 2.5.8 minimum 24px. */ @media (pointer: coarse) { .ajs-footer__links { gap: 0; } .ajs-footer__links a { min-height: 34px; } } .ajs-footer__links a:hover { color: var(--ajs-link); } .ajs-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--ajs-border); margin-top: 2.125rem; padding-top: 1.125rem; } .ajs-footer__bar p { margin: 0; font-size: 0.72rem; color: var(--ajs-muted); } /* Link w akapicie nie moze rozniac sie od tekstu wylacznie kolorem (WCAG 1.4.1). */ .ajs-footer__bar a, .ajs-prose a, .ajs-footer__contact a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; } /* Credit z numerem: ikonka sluchawki mowi, ze klikniecie dzwoni, nie otwiera strony. */ .ajs-footer__credit { display: inline-flex; align-items: center; gap: 0.4em; flex-wrap: wrap; min-height: 44px; } .ajs-footer__credit-tel { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; } .ajs-footer__credit-tel svg { flex-shrink: 0; } /* ---------------------------------------------------------- Popupy. */ .ajs-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.5rem); } .ajs-modal[hidden] { display: none; } /* Przyciemnienie robimy opacity elementu, nie alfa w kolorze — token zostaje czystym hexem. */ .ajs-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ajs-dark) 62%, #000); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms ease-out; } .ajs-modal.is-open .ajs-modal__backdrop { opacity: 0.72; } .ajs-modal__panel { position: relative; width: 100%; max-width: 43.75rem; max-height: 86dvh; overflow-y: auto; background: var(--ajs-bg); border-radius: 18px; padding: clamp(1.25rem, 3vw, 1.875rem) clamp(1.25rem, 3vw, 2.125rem) clamp(1.5rem, 3vw, 2.125rem); opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1); } .ajs-modal.is-open .ajs-modal__panel { opacity: 1; transform: none; } .ajs-modal__panel--wide { max-width: 53.75rem; } .ajs-modal__panel--gallery { max-width: 67.5rem; } .ajs-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; } .ajs-modal__title { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.375rem); font-weight: 700; letter-spacing: -0.01em; margin: 0; } .ajs-modal__subtitle { margin: 4px 0 0; font-size: 0.78rem; color: var(--ajs-muted); } .ajs-modal__close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 9999px; background: color-mix(in srgb, var(--ajs-muted) 30%, transparent); color: var(--ajs-ink); display: grid; place-items: center; cursor: pointer; transition: transform 120ms ease; } .ajs-modal__close:active { transform: scale(0.95); } .ajs-modal__body--split { display: grid; gap: 1.625rem; align-items: start; } @media (min-width: 48rem) { .ajs-modal__body--split { grid-template-columns: 0.42fr 1fr; } .ajs-modal__aside img { position: sticky; top: 0; width: 100%; height: 21.25rem; object-fit: cover; object-position: top center; border-radius: 10px; } } .ajs-modal__aside { margin: 0; } .ajs-modal__aside img { width: 100%; border-radius: 10px; } /* ------------------------------------------------------- Lightbox. */ .ajs-lightbox__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 12px; } @media (min-width: 48rem) { .ajs-lightbox__grid { grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr)); } } .ajs-lightbox__shot { padding: 0; border: 0; background: var(--ajs-pink-soft); border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; transition: transform 160ms ease; } .ajs-lightbox__shot:hover { transform: scale(1.015); } .ajs-lightbox__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .ajs-lightbox__videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr)); gap: 14px; margin-top: 14px; } .ajs-lightbox__videos iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: var(--ajs-ink); } .ajs-zoom { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.125rem; padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 3vw, 1.5rem); } .ajs-zoom__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ajs-dark) 28%, #000); opacity: 0.94; cursor: zoom-out; } .ajs-zoom__image { position: relative; max-width: min(73.75rem, 88vw); max-height: 74dvh; width: auto; height: auto; object-fit: contain; border-radius: 8px; } .ajs-zoom__controls { position: relative; display: flex; align-items: center; gap: 1.125rem; } /* Pojedyncze zdjecie — strzalki i licznik nie maja czym sterowac. */ .ajs-zoom--single .ajs-zoom__controls { display: none; } .ajs-zoom__nav { width: 44px; height: 44px; border: 0; border-radius: 9999px; background: color-mix(in srgb, var(--ajs-muted) 40%, transparent); color: var(--ajs-bg); display: grid; place-items: center; cursor: pointer; } .ajs-zoom__counter { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ajs-bg); min-width: 4.25rem; text-align: center; } .ajs-zoom__close { position: absolute; top: 1.5rem; right: 1.625rem; color: var(--ajs-ink); } /* --------------------------------------------------------- Wejscia. */ .ajs-reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .ajs-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ajs-reveal, .ajs-modal__panel, .ajs-modal__backdrop { opacity: 1 !important; transform: none !important; transition: none !important; } }