/* ========================================================================= FLISNOW — style Paleta i typografia jak w pierwotnej wersji. Warstwa detali (ruch, pojawianie się, delikatne 3D) jest dołożona ostrożnie: sam CSS + odrobina JavaScriptu, z pełnym poszanowaniem ustawienia „ogranicz animacje". ========================================================================= */ :root { --color-bg: #f5f3ee; --color-text: #2b2b2b; --color-text-muted: #6b6860; --color-accent: #c0392b; --color-surface: #e5e2d8; --color-hint: #9a978d; --color-success: #4f7a5c; --color-info: #4a6c82; --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --page-max: 1100px; --gap: 32px; /* wspólne krzywe wygładzania animacji */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, .hero__title { text-wrap: balance; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Płynne przejście między stronami tam, gdzie przeglądarka to wspiera. */ @view-transition { navigation: auto; } /* Wyłącz ruch, gdy użytkownik prosi o to w ustawieniach systemu. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Nagłówek --- */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; background: color-mix(in srgb, var(--color-bg) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: padding 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .site-header.is-scrolled { padding-block: 12px; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 12%, transparent); } /* Strona główna: nagłówek "pływa" przezroczyście nad zdjęciem hero, dopóki ono jest na ekranie (klasa is-over-hero z main.js). Na każdej innej stronie .has-photo-hero nigdy nie trafia na , więc nic się nie zmienia. */ body.has-photo-hero .site-header.is-over-hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.has-photo-hero .site-header.is-over-hero .site-header__wordmark, body.has-photo-hero .site-header.is-over-hero .site-nav a { color: var(--color-bg); } body.has-photo-hero .site-header.is-over-hero .site-header__mark { display: none; } .site-header__logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .site-header__mark { height: 40px; width: auto; transition: transform 0.4s var(--ease); } .site-header__logo:hover .site-header__mark { transform: translateY(-1px) rotate(-2deg); } .site-header__wordmark { font-size: 22px; font-weight: 700; letter-spacing: 3px; } .site-nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-left: 32px; text-transform: uppercase; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--color-accent); } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } /* --- Sekcja powitalna --- */ .hero { position: relative; --hero-accent: #e8896f; } /* Nagłówek zostaje "sticky" (zajmuje miejsce w normalnym układzie) na każdej stronie — tu podciągamy hero pod niego, żeby zdjęcie zaczynało się na samej górze, a nagłówek "pływał" nad nim (patrz --header-h w main.js; 84px to bezpieczny domyślny wymiar nagłówka, gdy JavaScript jest wyłączony). */ body.has-photo-hero .hero { margin-top: calc(-1 * var(--header-h, 84px)); } /* Scena hero — na czas przewijania „przykleja się" do ekranu, żeby animacja (rozmycie tekstu, przybliżenie zdjęcia, wejście napisu) grała w kadrze. */ .hero__stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; } /* Zdjęcie hero (snowboardzista + chmura pyłu) jako tło, tekst zostaje czytelny dzięki kremowej poświacie u góry. Przy przewijaniu delikatnie się przybliża. */ .hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* Ciemne tło pod zdjęciami — bez tego podczas przenikania między slajdami przebija jasne, kremowe tło strony i cały kadr na chwilę się "wypłukuje". */ background-color: #0a0908; } /* Warstwa, która faktycznie się skaluje przy scrollu (hero-pullback) — osobno od .hero__media, żeby przyciemnienie (::after) zawsze dokładnie pokrywało kadr, niezależnie od chwilowej skali zdjęć pod spodem. */ .hero__media-scale { position: absolute; inset: 0; } /* Cztery zdjęcia nałożone na siebie, przełączają się co ~3s (czysty CSS, bez JS — działa też bez włączonego JavaScriptu). Pełny cykl: 12s / 4 slajdy = 25% na slajd. */ .hero__slide { position: absolute; inset: 0; animation: hero-cycle-1 12s ease-in-out infinite; } .hero__slide--2 { animation-name: hero-cycle-2; } .hero__slide--3 { animation-name: hero-cycle-3; } .hero__slide--4 { animation-name: hero-cycle-4; } /* Każde zdjęcie zaczyna przenikać w drugie, zanim to pierwsze zniknie do końca — okna przenikania (np. 20.8%–25%) muszą się dokładnie pokrywać między sąsiednimi slajdami, inaczej na styku robi się pusto. Slajd 1 dodatkowo "domyka" pętlę (100% = 0%), bo jest widoczny od razu na starcie. */ @keyframes hero-cycle-1 { 0%, 20.8% { opacity: 1; } 25%, 95.8% { opacity: 0; } 100% { opacity: 1; } } @keyframes hero-cycle-2 { 0%, 20.8% { opacity: 0; } 25%, 45.8% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes hero-cycle-3 { 0%, 45.8% { opacity: 0; } 50%, 70.8% { opacity: 1; } 75%, 100% { opacity: 0; } } @keyframes hero-cycle-4 { 0%, 70.8% { opacity: 0; } 75%, 95.8% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero__slide { animation: none; opacity: 0; } .hero__slide:first-child { opacity: 1; } } /* Przyciemnienie góry i dołu zdjęcia — nagłówek i tekst zostają czytelne, środek kadru (jeździec, chmura) zostaje żywy i nasycony. */ .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 9, 8, 0.3) 0%, rgba(10, 9, 8, 0.06) 30%, rgba(10, 9, 8, 0.6) 78%, rgba(10, 9, 8, 1) 100% ); } .hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; } .hero__backdrop--2 { object-position: 42% 40%; } .hero__backdrop--3 { object-position: 40% 35%; } .hero__backdrop--4 { object-position: 38% 42%; } /* Na ekranach pionowych przychodzą osobne kadry 9:16 (patrz w home.html) z riderem już na środku — wystarczy wyśrodkować. */ @media (max-aspect-ratio: 3/4) { .hero__slide .hero__backdrop { object-position: 50% 40%; } } /* Przewijasz w dół → tekst powitalny się rozmywa i znika, zdjęcie snowboardzisty przybliża się i nabiera mocy. Bez wsparcia dla scroll() lub przy prefers-reduced-motion hero po prostu stoi w miejscu. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { /* Dodatkowa wysokość = „droga" przewijania, na której gra animacja. Scena zostaje przyklejona do ekranu przez pierwsze 80vh przewijania, potem odkleja się i wchodzi sekcja „Kolekcja". */ .hero { height: 180vh; } .hero__stage { position: sticky; top: 0; min-height: 0; height: 100vh; height: 100svh; } .hero__content { animation: hero-dissolve linear both; animation-timeline: scroll(root); animation-range: 0 70vh; } @keyframes hero-dissolve { to { filter: blur(14px); opacity: 0; transform: translateY(-26px) scale(0.96); } } /* Delikatny "Ken Burns" — zdjęcia są już pełnoekranowe od startu, więc tylko cichutko dojeżdżają do naturalnej skali, wszystkie trzy naraz (skaluje się wspólna warstwa .hero__media-scale, nie pojedyncze zdjęcie — inaczej przełączanie kadrów by "skakało"). */ .hero__media-scale { animation: hero-pullback linear both; animation-timeline: scroll(root); animation-range: 0 130vh; } @keyframes hero-pullback { from { scale: 1.12; } to { scale: 1; } } } } /* Miękkie zejście sceny powitalnej w „Kolekcję". Zdjęcie samo w sobie ma teksturę (pył, ziarno, jaśniejsze i ciemniejsze plamy) — zwykły dwustopniowy gradient prosto w krem mieszał tę teksturę z tłem strony i wychodziła "brudna" szaro-brązowa smuga. Zamiast tego: najpierw w pełni chowamy zdjęcie pod litą, ciemną barwą (bez przezroczystości — żadna tekstura nie prześwituje), dopiero z tej jednolitej czerni schodzimy w krem. Efekt: czysta czerń, potem czysty krem, bez mieszania kolorów zdjęcia po drodze. */ .hero__stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(260px, 38vh, 460px); background: linear-gradient( to bottom, transparent 0%, #0a0908 55%, #0a0908 72%, var(--color-bg) 100% ); z-index: 1; pointer-events: none; } .hero__content { position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vh, 110px); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 clamp(24px, 5vw, 56px); text-align: left; } .hero__copy { max-width: 640px; } .hero__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hero-accent); } .hero__title { font-size: clamp(32px, 6vw, 46px); line-height: 1.15; margin-bottom: 0; color: var(--color-bg); } .hero__lead { margin: 12px 0 0; font-size: 15px; color: color-mix(in srgb, var(--color-bg) 78%, transparent); max-width: 420px; } .hero__cta { background-color: var(--color-bg); color: var(--color-text); } .hero__cta:hover { background-color: var(--hero-accent); color: var(--color-bg); } .hero__scroll-cue { position: absolute; top: 50%; right: clamp(20px, 4vw, 44px); transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--color-bg) 80%, transparent); text-decoration: none; } .hero__scroll-cue span:not(.hero__scroll-line) { writing-mode: vertical-rl; } .hero__scroll-line { width: 1px; height: 42px; background: color-mix(in srgb, var(--color-bg) 35%, transparent); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ""; position: absolute; inset-block-start: -42px; left: 0; width: 1px; height: 42px; background: var(--color-bg); animation: scroll-travel 1.9s var(--ease) infinite; } @keyframes scroll-travel { to { inset-block-start: 42px; } } @media (prefers-reduced-motion: no-preference) { .hero__title { animation: rise 0.8s var(--ease) both; } .hero__lead { animation: rise 0.8s var(--ease) 0.12s both; } .hero__cta { animation: rise 0.8s var(--ease) 0.24s both; } .hero__scroll-cue { animation: fade-in 1s ease 0.9s both; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } } @keyframes fade-in { from { opacity: 0; } } } /* --- Przycisk --- */ .btn { display: inline-block; background-color: var(--color-text); color: var(--color-bg); text-decoration: none; padding: 14px 32px; font: inherit; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; transition: background-color 0.25s var(--ease), transform 0.25s var(--ease); } .btn:hover { background-color: var(--color-accent); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn:disabled:hover { background-color: var(--color-text); transform: none; } .btn--ghost { background-color: transparent; color: var(--color-text); border: 1px solid var(--color-hint); } .btn--ghost:hover { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); } /* Odstęp między przyciskiem płatności a resztą na stronie statusu/podziękowania. */ .thanks form { margin: 20px 0; } .autopay__note { margin-top: 10px; font-size: 13px; color: var(--color-text-muted); } /* --- Instrukcja przelewu --- */ .bank-transfer { margin: 24px 0; padding: 20px 24px; background: color-mix(in srgb, var(--color-surface) 55%, transparent); border-left: 3px solid var(--color-text); } .bank-transfer h2 { font-size: 15px; margin-bottom: 12px; } .bank-transfer__details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; } .bank-transfer__details dt { color: var(--color-text-muted); } .bank-transfer__account { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .bank-transfer__note { margin-top: 12px; font-size: 12px; color: var(--color-text-muted); } /* --- Siatka produktów --- */ .products { padding: 20px 48px 100px; max-width: var(--page-max); margin: 0 auto; } .products h1, .products h2 { text-align: center; font-size: 28px; margin-bottom: 40px; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .products__empty { grid-column: 1 / -1; text-align: center; color: var(--color-text-muted); } .products__soon { grid-column: 1 / -1; text-align: center; padding: 32px 0 12px; } .products__soon-title { margin-bottom: 10px; font-size: 20px; font-weight: 300; color: var(--color-text); } .products__soon-note { max-width: 42ch; margin: 0 auto; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); } .product-card { --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; text-align: center; text-decoration: none; color: inherit; transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift)); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } @media (hover: hover) and (pointer: fine) { .product-card:hover { --lift: -6px; box-shadow: 0 22px 45px -24px color-mix(in srgb, var(--color-text) 40%, transparent); } } .product-card__image { background-color: var(--color-surface); height: 280px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-card__image > picture > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .product-card:hover .product-card__image > picture > img { transform: scale(1.05); } .product-card__name { font-size: 16px; margin-bottom: 6px; } .price { color: var(--color-text-muted); font-weight: 700; } /* --- Strona produktu --- */ .product { max-width: var(--page-max); margin: 0 auto; padding: 40px 48px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .product__gallery { display: flex; flex-direction: column; gap: 16px; } .product__image { width: 100%; height: auto; /* proporcje z atrybutów width/height (4:5), nie sztywne 2000 px */ background-color: var(--color-surface); } .product__name { font-size: 32px; margin-bottom: 8px; } .product__price { color: var(--color-text-muted); font-weight: 700; font-size: 18px; margin-bottom: 24px; } .product__description { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 32px; } /* --- Rozwijane sekcje na stronie produktu (opis, specyfikacja, rozmiary) --- */ .product-details, .size-guide { margin-bottom: 24px; } .details-toggle { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 4px 0; } .details-toggle::marker { color: var(--color-hint); } .product-details .product__description { margin-top: 16px; margin-bottom: 0; } .product-specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin-top: 16px; font-size: 14px; } .product-specs dt { color: var(--color-text-muted); } .size-guide__table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; } .size-guide__table th, .size-guide__table td { padding: 8px 4px; text-align: right; border-bottom: 1px solid var(--color-surface); font-variant-numeric: tabular-nums; } .size-guide__table th:first-child, .size-guide__table td:first-child { text-align: left; } .size-guide__table thead th { color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; } .size-guide__table tbody th { font-weight: 400; color: var(--color-text-muted); } .size-guide__note { margin-top: 12px; font-size: 12px; color: var(--color-hint); } /* --- Wybór rozmiaru --- */ .size-picker { border: none; margin-bottom: 24px; } .size-picker legend { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .size-option { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 10px 14px; margin: 0 8px 8px 0; border: 1px solid var(--color-hint); cursor: pointer; font-weight: 700; user-select: none; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); } .size-option:hover { border-color: var(--color-text); } .size-option input { position: absolute; opacity: 0; pointer-events: none; } .size-option:has(input:checked) { border-color: var(--color-text); background-color: var(--color-text); color: var(--color-bg); } .size-option--disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; } .size-option--disabled:hover { border-color: var(--color-hint); } .size-picker__empty { color: var(--color-text-muted); } /* --- Podstrona „O nas" (strona założyciela) --- */ .about { max-width: 940px; margin: 0 auto; padding: 88px 24px 120px; display: flex; flex-direction: column; gap: 84px; } .about__lead { max-width: 660px; font-size: clamp(22px, 3.2vw, 32px); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); } .about__figure { margin: 0; } .about__figure img { display: block; width: 100%; height: auto; } .about__figure--feature { align-self: center; width: 100%; max-width: 580px; } .about__figure figcaption { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--color-text-muted); } .about__split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 52px; align-items: center; } .about__split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } .about__text { max-width: 44ch; } .about__eyebrow { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); } .about__name { margin-bottom: 12px; font-size: 22px; color: var(--color-text); } .about__body { font-size: 16px; line-height: 1.75; color: var(--color-text-muted); } .about__body strong { color: var(--color-text); font-weight: 700; } .about__sign { align-self: center; padding-top: 28px; border-top: 1px solid var(--color-hint); font-size: 14px; letter-spacing: 0.04em; color: var(--color-text-muted); } @media (max-width: 760px) { .about { gap: 56px; padding-top: 56px; } .about__split, .about__split--reverse { grid-template-columns: 1fr; gap: 24px; } .about__split--reverse .about__text { order: -1; } } /* Zdjęcie produktu (catalog/_product_photo.html):