/* ========================================================================== Davide Services — strona główna Design system: dark + gold, editorial-lux × Apple Zgodny z tokenami sklepu (davide_store): Playfair Display + Inter, złoto #CFB57A na tle #0f0f0f, złote hairline'y, uppercase eyebrow. ========================================================================== */ /* Fonty NIE są tu ładowane przez @import — to szeregowałoby pobranie (CSS -> dopiero potem fonty) i blokowało render. Są wpięte -iem w każdej strony, równolegle z tym arkuszem. */ /* ───────────────────────────── TOKENY ───────────────────────────── */ :root { /* Złoto */ --gold: #CFB57A; --gold-light: #DBCA96; --gold-dark: #B39A56; --gold-muted: #957F43; --gold-bright: #E3D4A4; --gold-ink: #806B2C; /* złoto na jasnym tle — do tekstu/linków (kontrast) */ /* Tła */ --bg: #ffffff; --bg-card: #faf9f7; --bg-elevated: #f2f0ec; --bg-input: #ffffff; /* Tekst */ --text: #111111; --text-secondary: #6b6b6b; --text-tertiary: #767676; --border: #e4e1db; /* Ciemne powierzchnie na jasnej stronie (header, stopka, sekcje na foto) */ --surface-dark: #3a4142; /* header */ --surface-dark-footer: #2e3435; /* stopka */ --on-dark: #ffffff; --on-dark-muted: rgba(255,255,255,.72); --on-dark-border: rgba(255,255,255,.14); /* Fonty */ --serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Promienie */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; /* Cienie */ --shadow-sm: 0 1px 2px hsla(0,0%,7%,.05); --shadow-md: 0 8px 24px hsla(0,0%,7%,.08); --shadow-lg: 0 20px 56px hsla(0,0%,7%,.12); --shadow-gold: 0 10px 28px hsla(42,47%,65%,.3); /* Ruch */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 0.84, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Rytm sekcji */ --section-y: clamp(4.5rem, 8vw, 7.5rem); --section-y-tight: clamp(3rem, 5vw, 5rem); --header-h: 122px; /* solidny pasek: logo + nawigacja (kompaktowo) */ --maxw: 1240px; /* kolumna treści */ --page-max: 1920px; /* twardy limit całej strony — na szerszych ekranach centrujemy */ color-scheme: light; } /* ───────────────────────────── RESET ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); /* obszar poza limitem strony na ekranach > --page-max */ } body { font-family: var(--sans); font-weight: 300; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* clip (nie hidden) — inaczej overflow-y=auto psuje sticky header */ /* Strona nie rozlewa się w nieskończoność — powyżej 1920px centrujemy. Dotyczy też sekcji pełnoszerokościowych (hero, story, marquee, atelier), bo wszystkie są dziećmi body. Elementy fixed trzeba ograniczyć osobno. */ max-width: var(--page-max); margin-inline: auto; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* [hidden] musi zawsze znaczyć ukryty — inaczej .btn{display:inline-flex} to nadpisuje */ [hidden] { display: none !important; } /* Złoty pierścień fokusa (dostępność + spójność z marką) zamiast domyślnego niebieskiego */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } ::selection { background: var(--gold); color: var(--text); } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-muted); } /* ───────────────────────────── LAYOUT ───────────────────────────── */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .section { padding-block: var(--section-y); } /* ───────────────────────────── TYPOGRAFIA ───────────────────────────── */ .eyebrow { display: inline-block; font-family: var(--sans); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .32em; color: var(--gold-ink); margin-bottom: 1.1rem; } .eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: linear-gradient(90deg, var(--gold) 0%, transparent 100%); margin-top: .55rem; } /* Znak podmarki (Occhiello) — zastępuje tekstowy eyebrow, zachowuje kreskę */ .brand-mark { display: inline-block; margin-bottom: 1.1rem; } .brand-mark img { display: block; height: clamp(52px, 6vw, 70px); width: auto; } .brand-mark::after { content: ''; display: block; width: 28px; height: 1px; background: linear-gradient(90deg, var(--gold) 0%, transparent 100%); margin-top: .8rem; } .text-center .eyebrow::after { margin-inline: auto; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); } .display { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.16; letter-spacing: -.005em; color: var(--text); text-wrap: balance; } .display em, .display i { font-style: italic; font-weight: 500; color: var(--gold-ink); } .lead { font-family: var(--sans); font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.8; font-weight: 300; color: var(--text-secondary); max-width: 40rem; text-wrap: pretty; } .text-center .lead { margin-inline: auto; } .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head .lead { margin-top: 1.25rem; } /* ───────────────────────────── PRZYCISKI ───────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 2.2rem; font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--r-sm); transition: all .25s var(--ease-out); white-space: nowrap; } .btn svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease-out); } .btn:hover svg { transform: translateX(3px); } /* Przyciski wg sklepu davide-store: primary ciemny #111/biały (hover gold-ink), outline transparentny z jasną ramką. Ostre rogi (--r-* = 0). BEZ podnoszenia na hover. `transform: translateY(-1px)` wyglądał niewinnie, ale przy krawędzi przycisk uciekał spod kursora: hover się wyłączał, przycisk wracał na miejsce, hover włączał się znowu — i tak kilka razy na sekundę. Zmiana barwy wystarczy za sygnał i niczego nie przesuwa pod kursorem. */ .btn--primary { background: var(--text); border-color: var(--text); color: #fff; } .btn--primary:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; } /* Wariant na ciemnym tle nagłówka: akcja drugorzędna obok wypełnionego przycisku. `btn--outline` się tu nie nadaje, bo ma ciemny tekst na ciemnym tle. */ .btn--on-dark { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; } .btn--on-dark:hover { border-color: var(--gold); color: var(--gold); } .btn--outline { background: transparent; border-color: var(--border); color: var(--text); } .btn--outline:hover { border-color: var(--text); color: var(--text); } /* Wariant złoty (delikatny tint) */ .btn--gold { background: rgba(207,181,122,.08); border-color: rgba(207,181,122,.35); color: var(--gold-ink); } .btn--gold:hover { background: rgba(207,181,122,.16); border-color: rgba(207,181,122,.6); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn--ghost:hover { border-color: var(--text); color: var(--text); } /* Przyciski NA ZDJĘCIU (hero, story, atelier, page-hero) — ciemne foto wymaga jasnych krawędzi. Primary #111/biały zostaje czytelny; outline dostaje biel. */ .hero .btn--outline, .story .btn--outline, .atelier .btn--outline, .page-hero .btn--outline { color: var(--on-dark); border-color: var(--on-dark-border); } .hero .btn--outline:hover, .story .btn--outline:hover, .atelier .btn--outline:hover, .page-hero .btn--outline:hover { color: var(--on-dark); border-color: var(--on-dark); background: rgba(255,255,255,.06); } .btn--lg { padding: 1.1rem 2.8rem; font-size: .82rem; } /* min-height zamiast większego paddingu: pigułka w menu ma zostać wizualnie taka jak jest, a samo 44px dobija tylko brakujące 4px wysokości. */ .btn--sm { padding: .68rem 1.4rem; font-size: .72rem; letter-spacing: .1em; min-height: 44px; } /* ───────────────────── STREFA DOTYKU (WCAG 2.5.5) ───────────────────── Cel: 44x44px pod palcem, zero zmian w wyglądzie. Metoda A (poniżej) — przezroczysty pseudo-element rozciąga obszar klikalny wokół elementu. Nie rusza layoutu ani rysunku, bo jest position:absolute. Rozciągamy TYLKO w pionie: w poziomie te elementy i tak mają >=44px, a poszerzanie groziłoby zderzeniem stref sąsiadów. Uwaga: stosowalne wyłącznie tam, gdzie odstęp sąsiadów jest większy niż przyrost strefy. Dla ciasnych list pionowych (stopka) to NIE zadziała — strefy nachodziłyby na siebie i klik trafiałby w zły link. Tam metoda B: realna wysokość elementu (min-height) zamiast sztuczki na pseudo-elemencie. */ .nav__link::before, .link-arrow::before, .crumbs a::before, .mobile-nav__contact a::before, .footer__by::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; /* bez tła — sam obszar trafienia */ } .link-arrow, .crumbs a, .mobile-nav__contact a, .footer__by { position: relative; } /* Ikony społecznościowe: 40x40 -> strefa 44x44 (odstęp .75rem = 12px, więc po rozszerzeniu zostaje 8px prześwitu — bez kolizji). */ .footer__social a { position: relative; } .footer__social a::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: var(--r-pill); } /* Tekstowy link ze strzałką */ .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); transition: gap .25s var(--ease-out), color .2s; } .link-arrow svg { width: 1rem; height: 1rem; } .link-arrow:hover { color: var(--gold-ink); gap: .85rem; } /* ───────────────────────────── HEADER ───────────────────────────── */ /* Header dwurzędowy: logo wyśrodkowane u góry, nawigacja wyśrodkowana pod nim, akcje pozycjonowane po prawej (logo zostaje realnie na środku). */ /* Header: solidny grafitowy pasek PRZYKLEJONY u góry (jak sklep davide-store). Zawsze widoczny i kompaktowy — bez przezroczystości nad hero, bez morphowania na scrollu, bez pływającej pigułki. Dwa rzędy: logo wyśrodkowane + pasek nawigacji. */ .header { /* Jak sklep davide-store: sticky od góry (w flow — na górze NIE nachodzi na hero, bo hero jest pod nim), a przy scrollu ZWIJA SIĘ płynnie do kompaktu. position:sticky działa, bo body ma overflow-x:clip (nie hidden). */ position: sticky; top: 0; z-index: 100; width: 100%; background: var(--surface-dark); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; padding-block: 1rem; transition: padding .3s var(--ease-out), box-shadow .3s var(--ease-out); } /* Zwinięcie na scrollu (main.js dodaje .is-scrolled) — pasek robi się kompaktowy: mniejszy padding, ciaśniejsze rzędy, mniejsze logo, cień. Płynnie (0.3s), dokładnie jak zwijanie menu na sklepie. */ .header.is-scrolled { padding-block: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.28); } .header.is-scrolled .brand img { height: 34px; } /* Zwinięcie jak na sklepie: z wyśrodkowanego masztu (logo nad menu) w JEDEN rząd wyrównany do LEWEJ — logo po lewej, nawigacja obok, CTA po prawej. Desktop. */ @media (min-width: 901px) { .header.is-scrolled .header__inner { flex-direction: row; align-items: center; gap: 1.75rem; } .header.is-scrolled .header__top { width: auto; padding-bottom: 0; border-bottom: none; } .header.is-scrolled .nav { flex: 1; justify-content: flex-start; width: auto; } .header.is-scrolled .nav__cta { position: static; margin-left: auto; transform: none; } } .header__inner { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 100%; transition: gap .3s var(--ease-out); } .header__top { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.08); /* delikatny dzielnik między rzędami — jak w sklepie */ transition: padding .3s var(--ease-out); } /* Logo (spiętrzony lockup: monogram nad wordmarkiem) — kompaktowe */ .brand img { height: 46px; width: auto; transition: height .3s var(--ease-out); } /* Nawigacja — pasek pod logo, bez pigułki. Linki wyśrodkowane, CTA przy prawej. */ .nav { position: relative; display: flex; justify-content: center; align-items: center; gap: 2.1rem; width: 100%; } .nav__cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: .55rem 1.4rem !important; } .nav__link { position: relative; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); padding: .35rem 0; transition: color .2s; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--gold); transition: width .3s var(--ease-out); } .nav__link:hover { color: var(--gold); } .nav__link:hover::after { width: 100%; } .header__actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 1.25rem; } /* Sklep online. Do 17.09.2026 `display: none` — sklepu nie było pod co podpiąć. Od wdrożenia davide.pl stoi pod /store i musi być z czego osiągalny. Na mobile dalej ukryty: tam wchodzi pozycja w menu (MobileNav.fusion). */ /* „Sklep online" jest akcją GŁÓWNĄ nagłówka — stąd wypełnienie, a nie sam tekst. Wcześniej było odwrotnie: sklep jako wyblakły odnośnik nad wypełnionym „Umów wizytę". Skoro sklep jest dziś częścią serwisu, a nie zapowiedzią, to on ma prowadzić. */ .header__shop { display: inline-flex; align-items: center; padding: .55rem 1.4rem; border: 1px solid var(--text); background: var(--text); color: #fff; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; } .header__shop:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; background: none; border: 0; padding: 4px 0; z-index: 120; } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--on-dark); transition: transform .35s var(--ease-spring), opacity .2s; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ───────────────────────────── HERO ───────────────────────────── */ .hero { position: relative; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .hero__media { position: absolute; inset: 0; /* tło w CSS (nie inline) -> można podać lżejszy obraz na mobile przez media query */ background-image: url('../img/hero/hero-columns.webp'); background-color: var(--surface-dark); background-position: center 25%; background-size: cover; background-repeat: no-repeat; transform: scale(1.06); animation: kenburns 22s ease-out infinite alternate; will-change: transform; } @keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); } } /* Warstwa wideo (self-hosted MP4) — nad zdjęciem-posterem, pod scrimem. Wstrzykiwana przez JS tylko na desktopie; gdy pliku brak / nie da się odtworzyć, zostaje zdjęcie-poster (.hero__media) jako fallback. */ .hero__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.4s var(--ease-out); pointer-events: none; } .hero__video.is-ready { opacity: 1; } .hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; pointer-events: none; } .hero__scrim { position: absolute; inset: 0; z-index: 1; /* Pion + centralna winieta — pod wyśrodkowany tekst (czytelność na sylwetce) */ background: linear-gradient(180deg, rgba(15,15,15,.62) 0%, rgba(15,15,15,.34) 32%, rgba(15,15,15,.5) 68%, rgba(15,15,15,.96) 100%), radial-gradient(78% 62% at 50% 50%, rgba(15,15,15,.5), transparent 72%); } .hero__inner { position: relative; z-index: 2; text-align: center; padding-top: clamp(2rem, 5vh, 3.5rem); padding-bottom: clamp(3.5rem, 8vh, 6rem); } .hero__eyebrow { color: var(--gold); } /* wyśrodkowana kreska pod eyebrow */ .hero__eyebrow::after { margin-inline: auto; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); } .hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.06; letter-spacing: -.015em; color: var(--on-dark); max-width: 18ch; margin-inline: auto; text-wrap: balance; } .hero__title em { font-style: italic; font-weight: 400; color: var(--gold); } .hero__lead { margin-top: 1.75rem; margin-inline: auto; max-width: 36rem; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.75; } .hero__cta { margin-top: 2.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; } .hero__scroll { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-secondary); } .hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(180deg, var(--gold), transparent); animation: scrollPulse 2.4s var(--ease-in-out) infinite; transform-origin: top; } @keyframes scrollPulse { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } /* ───────────────────────────── INTRO / MANIFEST ───────────────────────────── */ .intro { text-align: center; } .intro__text { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.42; letter-spacing: -.01em; color: var(--text); max-width: 24ch; margin-inline: auto; text-wrap: balance; } .intro__text em { font-style: italic; color: var(--gold-ink); } .intro__sign { margin-top: 2.25rem; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-tertiary); } /* ───────────────────────── STORY — NOWY ROZDZIAŁ ───────────────────────── */ .story { position: relative; overflow: hidden; border-block: 1px solid var(--border); } .story__bg { position: absolute; inset: 0; background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.06); } .story__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,.82) 0%, rgba(15,15,15,.6) 45%, rgba(15,15,15,.92) 100%), radial-gradient(130% 120% at 82% 15%, rgba(207,181,122,.12), transparent 55%); } .story__inner { position: relative; z-index: 2; padding-block: clamp(4.5rem, 10vw, 8.5rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .story__body { max-width: 42rem; } /* Delikatny slideshow (przenikanie) — wnętrza nowej siedziby */ .story__slideshow { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .story__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-out); } .story__slide.is-active { opacity: 1; } .story__slide img { width: 100%; height: 100%; object-fit: cover; animation: storyKen 16s ease-in-out infinite alternate; } @keyframes storyKen { from { transform: scale(1.02); } to { transform: scale(1.09); } } @media (max-width: 860px) { .story__inner { grid-template-columns: 1fr; gap: 2.5rem; } .story__slideshow { aspect-ratio: 3 / 2; order: -1; } .story__body { max-width: none; } } .story__status { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.75rem; } .story__badge { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1.05rem; border: 1px solid rgba(207,181,122,.35); border-radius: var(--r-pill); background: rgba(207,181,122,.07); font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .story__badge--soft { border-color: var(--border); background: rgba(255,255,255,.03); color: var(--text-secondary); } .story__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: storyPulse 2.2s var(--ease-in-out) infinite; } @keyframes storyPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(207,181,122,.45); } 50% { opacity: .55; box-shadow: 0 0 0 7px rgba(207,181,122,0); } } .story__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em; color: var(--on-dark); text-wrap: balance; margin-bottom: 1.5rem; } .story__title em { font-style: italic; color: var(--gold); } .story__lead { font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.85; font-weight: 300; color: rgba(255,255,255,.82); max-width: 40rem; margin-bottom: 2.25rem; text-wrap: pretty; } .story__lead strong { color: var(--gold-light); font-weight: 500; } .story__remote { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(20,20,20,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .story__remote-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-md); background: rgba(207,181,122,.1); color: var(--gold); } .story__remote-icon svg { width: 22px; height: 22px; } .story__remote-text { flex: 1; min-width: 15rem; font-size: .95rem; line-height: 1.65; font-weight: 300; color: var(--text-secondary); } .story__remote-text strong { color: var(--gold-light); font-weight: 500; } .story__remote .btn { flex-shrink: 0; } @media (max-width: 560px) { .story__remote { flex-direction: column; align-items: flex-start; } .story__remote .btn { width: 100%; } } /* ───────────────────────────── MARQUEE MAREK ───────────────────────────── */ .marquee { padding-block: var(--section-y-tight); border-block: 1px solid var(--border); overflow: hidden; } .marquee__label { text-align: center; font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2.5rem; } .marquee__viewport { position: relative; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); flex-shrink: 0; animation: marquee 42s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-100%); } } .marquee__item img { height: clamp(26px, 3.4vw, 40px); width: auto; object-fit: contain; opacity: .55; filter: brightness(0); transition: opacity .3s; } .marquee__item:hover img { opacity: 1; } /* ───────────────────────────── USŁUGI ───────────────────────────── */ .services__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .service { display: grid; grid-template-columns: 5.5rem 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--border); position: relative; transition: background .4s var(--ease-out); } .service:hover { background: linear-gradient(90deg, rgba(207,181,122,.04), transparent 70%); } .service__num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: rgba(207,181,122,.55); transition: color .3s, transform .3s var(--ease-out); } .service:hover .service__num { color: var(--gold-ink); transform: translateX(-3px); } .service__body { max-width: 34rem; } .service__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.2; color: var(--gold-ink); margin-bottom: .2rem; } .service__tag { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .9rem; } .service__desc { font-size: .96rem; line-height: 1.7; color: var(--text-secondary); font-weight: 300; } .service__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); } .service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .service:hover .service__media img { transform: scale(1.05); } .service__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15,15,15,.35)); } /* ───────────────────────── SLIDER USŁUG ───────────────────────── */ .svc-slider { position: relative; } /* Zakładki — nazwy usług jako nawigacja */ .svc-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: clamp(2rem, 4vw, 3.25rem); overflow-x: auto; scrollbar-width: none; } .svc-tabs::-webkit-scrollbar { display: none; } .svc-tab { position: relative; flex: 1 0 auto; display: inline-flex; align-items: baseline; gap: .55rem; padding: .9rem 1.15rem 1.15rem; background: transparent; border: 0; color: var(--text-tertiary); font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .05em; white-space: nowrap; transition: color .25s var(--ease-out); } .svc-tab__num { font-family: var(--serif); font-style: italic; font-size: 1rem; color: rgba(207,181,122,.45); transition: color .25s; } .svc-tab:hover { color: var(--text-secondary); } .svc-tab.is-active { color: var(--gold-ink); } .svc-tab.is-active .svc-tab__num { color: var(--gold-ink); } .svc-tab__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--gold); } .svc-tab.is-active .svc-tab__bar { width: 100%; } /* stan spoczynkowy / bez JS */ /* Tor slajdów */ .svc-viewport { overflow: hidden; /* Klip tylko w poziomie (ukrycie sąsiednich slajdów); w pionie daj cieniom obrazu oddech — inaczej overflow:hidden twardo przycina cień = „odcięcie". */ padding-block: 2rem; margin-block: -2rem; } .svc-track { --svc-gap: clamp(2.5rem, 5vw, 4rem); /* odstęp między slajdami — cienie nie zachodzą */ display: flex; gap: var(--svc-gap); transition: transform .7s var(--ease-spring); touch-action: pan-y; } .svc-slide { flex: 0 0 100%; min-width: 0; } .svc-slide__inner { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; } .svc-slide__body { max-width: 32rem; } .svc-slide__num { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1; color: rgba(207,181,122,.5); margin-bottom: 1rem; } .svc-slide__tag { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .75rem; } .svc-slide__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; color: var(--gold-ink); margin-bottom: 1.1rem; } .svc-slide__desc { font-size: clamp(.96rem, 1.1vw, 1.05rem); line-height: 1.75; color: var(--text-secondary); font-weight: 300; margin-bottom: 2rem; } .svc-slide__cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; } .svc-slide__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .svc-slide__media img { width: 100%; height: 100%; object-fit: cover; } /* Sterowanie */ .svc-controls { display: flex; align-items: center; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); } .svc-arrow { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text-secondary); transition: color .25s var(--ease-out), border-color .25s, transform .25s var(--ease-out); } .svc-arrow:hover { color: var(--gold-ink); border-color: var(--gold); transform: translateY(-2px); } .svc-arrow svg { width: 20px; height: 20px; } .svc-counter { font-family: var(--serif); font-size: 1rem; color: var(--text-tertiary); letter-spacing: .1em; } .svc-counter b { color: var(--gold-ink); font-weight: 500; font-style: italic; } @media (max-width: 860px) { .svc-slide__inner { grid-template-columns: 1fr; gap: 1.75rem; } .svc-slide__media { order: -1; aspect-ratio: 16 / 10; } .svc-slide__num { font-size: 2.2rem; } } @media (max-width: 560px) { .svc-tab { flex: 0 0 auto; padding: .8rem .85rem 1rem; font-size: .78rem; } } @media (prefers-reduced-motion: reduce) { .svc-track { transition: none; } } /* ───────────────────────────── SEKCJA SPLIT (Mobile / Care) ───────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .split--reverse .split__media { order: 2; } .split__body { max-width: 34rem; } .split__title { margin-bottom: 1.5rem; } .split__lead { margin-bottom: 1.35rem; } .split__lead strong { color: var(--gold-ink); font-weight: 500; } /* Kroki numerowane */ .steps { margin: 2.25rem 0; } .steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem; align-items: start; padding-block: 1.35rem; border-top: 1px solid rgba(207,181,122,.18); transition: padding-left .3s var(--ease-out), background .3s; } .steps li:last-child { border-bottom: 1px solid rgba(207,181,122,.18); } .steps li:hover { background: linear-gradient(90deg, rgba(207,181,122,.04), transparent 80%); padding-left: .5rem; } .step__num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; color: rgba(207,181,122,.6); transition: color .3s, transform .3s; } .steps li:hover .step__num { color: var(--gold-ink); transform: translateX(-2px); } .step__title { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--gold-ink); margin-bottom: .3rem; } .step__text { display: block; font-size: .92rem; line-height: 1.65; color: var(--text-secondary); font-weight: 300; } /* Statystyki (Wardrobe Care) */ .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-block: 1.75rem; margin: 2rem 0; border-block: 1px solid rgba(207,181,122,.18); } .stat { flex: 1 1 6rem; min-width: 6rem; } .stat__num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 3.5vw, 3rem); line-height: 1; color: var(--gold-ink); } .stat__label { margin-top: .55rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); line-height: 1.5; } /* Media split — stack obrazów */ .split__media { position: relative; } .split__media-main { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); } .split__media-main img { width: 100%; height: 100%; object-fit: cover; } .split__media-accent { position: absolute; width: 42%; aspect-ratio: 3 / 4; right: -1.5rem; bottom: -1.75rem; border-radius: var(--r-md); overflow: hidden; border: 3px solid var(--bg); box-shadow: var(--shadow-md); } .split__media-accent img { width: 100%; height: 100%; object-fit: cover; } .split--reverse .split__media-accent { right: auto; left: -1.5rem; } /* Lista bez numeracji — usługa ciągła, nie proces (Zarządzanie garderobą) */ .check-list { margin: 2.25rem 0; display: grid; gap: 1.15rem; } .check-list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .95rem; align-items: start; font-size: .95rem; line-height: 1.7; font-weight: 300; color: var(--text-secondary); } .check-list li::before { content: ""; width: 1.4rem; height: 1px; margin-top: .82rem; background: linear-gradient(90deg, var(--gold), rgba(207,181,122,.25)); } .check-list strong { color: var(--gold-ink); font-weight: 500; } /* Domknięcie sekcji: przycisk + odnośnik do podstrony */ .section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); } /* ──────────────────── OCCHIELLO — PODRÓŻ GARNITURU ──────────────────── */ .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); } .strip figure { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border); } .strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .strip figure:hover img { transform: scale(1.045); } .strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); background: linear-gradient(180deg, transparent, rgba(15,15,15,.88)); } /* reset zdejmuje punktory tylko z ul — ol niesie własną numerację (.journey__num) */ .journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; } .journey__step { position: relative; padding: 2.25rem 1.5rem 0 0; border-top: 1px solid rgba(207,181,122,.18); } /* Znacznik na osi — kropka na linii nad każdym krokiem */ .journey__step::before { content: ""; position: absolute; top: -3.5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transition: transform .3s var(--ease-out), box-shadow .3s; } .journey__step:hover::before { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(207,181,122,.14); } .journey__num { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.85rem, 2.4vw, 2.4rem); line-height: 1; color: rgba(207,181,122,.6); margin-bottom: .85rem; transition: color .3s; } .journey__step:hover .journey__num { color: var(--gold-ink); } .journey__place { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .5rem; } .journey__title { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--gold-ink); margin-bottom: .5rem; } .journey__text { font-size: .9rem; line-height: 1.7; color: var(--text-secondary); font-weight: 300; } /* ───────────────────────────── LOOKBOOK ───────────────────────────── */ .lookbook__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 22vw, 260px); gap: 1rem; } .lb { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border); } .lb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .lb:hover img { transform: scale(1.06); } .lb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,.55)); opacity: .8; transition: opacity .4s; } .lb:hover::after { opacity: 1; } .lb__cap { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.6); } .lb--a { grid-column: span 5; grid-row: span 2; } .lb--b { grid-column: span 4; grid-row: span 1; } .lb--c { grid-column: span 3; grid-row: span 1; } .lb--d { grid-column: span 4; grid-row: span 1; } .lb--e { grid-column: span 3; grid-row: span 1; } .lb--f { grid-column: span 7; grid-row: span 1; } .lb--g { grid-column: span 5; grid-row: span 1; } /* ───────────────────────────── ATELIER / WIZYTA ───────────────────────────── */ .atelier { position: relative; overflow: hidden; } .atelier__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .atelier__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,.85), rgba(15,15,15,.7)), radial-gradient(120% 120% at 80% 20%, transparent, rgba(15,15,15,.6)); } .atelier__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .atelier__title { margin-bottom: 1.5rem; } /* Sekcja stoi na ciemnym zdjęciu pod ciemną przesłoną, a strona jest jasna: ogólne .eyebrow/.display/.lead dają tu #111 i ciemne złoto na czerni — tekst ginie. Ten sam zabieg co w .story: biel i jasne złoto „na foto”. */ .atelier .eyebrow { color: var(--gold); } .atelier .display { color: var(--on-dark); font-weight: 500; } .atelier .display em, .atelier .display i { color: var(--gold); } .atelier .lead { color: rgba(255,255,255,.82); } .atelier__card { background: rgba(26,26,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--on-dark-border); border-radius: var(--r-lg); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-lg); } .atelier__card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--gold); margin-bottom: 1.5rem; } .info-row { display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--on-dark-border); align-items: flex-start; } .info-row:first-of-type { border-top: 0; } .info-row svg { width: 1.15rem; height: 1.15rem; color: var(--gold); flex-shrink: 0; margin-top: .15rem; } .info-row__label { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .2rem; } .info-row__value { font-size: .95rem; color: var(--on-dark); font-weight: 300; } .info-row__value strong { font-weight: 500; color: var(--gold-light); } /* Dopisek „tylko po wcześniejszym umówieniu” siedzi w treści redakcyjnej z inline'owym color:var(--text-tertiary) — szarość z jasnej strony. !important, bo inaczej inline wygrywa. */ .info-row__value em { color: var(--on-dark-muted) !important; } .atelier__card .btn { width: 100%; margin-top: 1.75rem; } /* Czarny przycisk na grafitowej karcie zlewa się z tłem — jasna krawędź rysuje mu kształt. */ .atelier__card .btn--primary { border-color: rgba(255,255,255,.28); } .atelier__card .btn--primary:hover { border-color: var(--gold-ink); } /* ───────────────────────────── CTA BAND ───────────────────────────── */ .cta-band { text-align: center; } .cta-band__inner { border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem); background: radial-gradient(120% 140% at 50% 0%, rgba(207,181,122,.10), transparent 60%), var(--bg-card); } .cta-band .display { margin-bottom: 1.25rem; } .cta-band .lead { margin-bottom: 2.25rem; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ───────────────────────────── FOOTER ───────────────────────────── */ .footer { /* Ciemna powierzchnia na jasnej stronie: przedefiniowanie tokenów w zasięgu stopki sprawia, że wszystkie dzieci (var(--text-secondary), --border, itd.) dziedziczą ciemny wariant — bez dotykania każdej reguły osobno. */ --text-secondary: var(--on-dark-muted); --text-tertiary: rgba(255,255,255,.6); --border: var(--on-dark-border); --bg-card: var(--surface-dark-footer); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.08); background: var(--surface-dark-footer); padding-top: clamp(3.5rem, 6vw, 5rem); } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--border); } .footer__brand img { height: 56px; width: auto; margin-bottom: 1.5rem; } .footer__brand p { font-size: .9rem; line-height: 1.7; color: var(--text-secondary); max-width: 24rem; font-weight: 300; } .footer__col h4 { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 1.25rem; } /* Metoda B strefy dotyku — patrz komentarz przy .nav__link::before. Lista ma ciasny rytm, więc pseudo-element rozciągnięty do 44px nachodziłby na sąsiada i klik trafiałby w zły link. Zamiast tego linki dostają realną wysokość 44px, a gap znika — sama wysokość daje oddech. */ .footer__col ul { display: flex; flex-direction: column; gap: 0; } .footer__col a, .footer__col li { font-size: .9rem; color: var(--text-secondary); font-weight: 300; transition: color .2s; } .footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; /* krótkie etykiety ("O nas" = 37px) — lista jest pionowa, więc nie ma z czym kolidować */ } .footer__col li { padding-block: .35rem; } .footer__col a:hover { color: var(--gold); } .footer__social { display: flex; gap: .75rem; margin-top: 1.5rem; } .footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-secondary); transition: all .25s; } .footer__social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); } .footer__social svg { width: 1.05rem; height: 1.05rem; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; padding-block: 2rem; font-size: .78rem; color: var(--text-tertiary); } /* Podpis realizacji — Calmfox (jak na copernicon.pl: etykieta nad logo) */ /* Podpis ma być dyskretny, ale czytelny. Wcześniej opacity:.5 na całym bloku ściągało napis do 2.22:1 — żeby wyszedł na AA, opacity musiałoby być ~.93, czyli żadne. Dlatego przygaszamy tylko logo (grafika), a napis dostaje pełny kolor tokenowy. */ .footer__by { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; } .footer__by-label { font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-tertiary); transition: color .25s var(--ease-out); } .footer__by:hover .footer__by-label { color: var(--gold); } .footer__by img { height: 30px; width: auto; display: block; opacity: .55; transition: opacity .25s var(--ease-out); } .footer__by:hover img { opacity: 1; } /* Strefa dotyku — otoczenie ma gap 1.25rem, więc rozciągnięcie w pionie nie zderzy się z sąsiadem (patrz komentarz przy .nav__link::before). */ .footer__bottom a { position: relative; display: inline-flex; align-items: center; min-height: 44px; } .footer__bottom a:hover { color: var(--gold); } /* ───────────────────────────── REVEAL ───────────────────────────── Progressive enhancement: the hidden state applies ONLY when JS is confirmed (html.js). Without JS — or if the observer never runs — content stays fully visible. Never hide content behind JS alone. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal[data-delay="1"] { transition-delay: .1s; } .js .reveal[data-delay="2"] { transition-delay: .2s; } .js .reveal[data-delay="3"] { transition-delay: .3s; } /* Hero jest nad linią zgięcia — nie ma czego obserwować, a czekanie na IntersectionObserver kosztowało 4.25s render delay na telefonie (LCP mierzył .hero__lead, bo tekst wisiał na opacity:0 aż do wykonania main.js). Tu odsłaniamy animacją CSS: rusza, gdy tylko zastosuje się arkusz, bez udziału JS. Reszta strony zostaje na obserwatorze. */ .js .hero .reveal, .js .page-hero .reveal { opacity: 1; /* zdejmuje opacity:0 z ogólnej reguły .reveal — hero nie czeka na JS */ transition: none; animation: hero-in .8s var(--ease-out) both; } .js .hero .reveal[data-delay="1"], .js .page-hero .reveal[data-delay="1"] { animation-delay: .1s; } .js .hero .reveal[data-delay="2"], .js .page-hero .reveal[data-delay="2"] { animation-delay: .2s; } .js .hero .reveal[data-delay="3"], .js .page-hero .reveal[data-delay="3"] { animation-delay: .3s; } /* Bez animowania opacity: LCP mierzy .hero__lead, a Chrome nie liczy pikseli, dopóki element jest przezroczysty — fade odsuwał pomiar o całą swoją długość. Sam ruch daje ten sam efekt wejścia, a tekst jest malowany od pierwszej klatki. */ @keyframes hero-in { from { transform: translateY(28px); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .js .hero .reveal, .js .page-hero .reveal { opacity: 1; transform: none; } } /* ───────────────────────────── MOBILE MENU PANEL ───────────────────────────── */ .mobile-nav { position: fixed; inset: 0; z-index: 130; /* nad headerem (100) — X w środku jest klikalny */ display: flex; flex-direction: column; padding: 0 clamp(1.5rem, 6vw, 2.5rem) env(safe-area-inset-bottom); background: radial-gradient(120% 80% at 100% 0%, rgba(207,181,122,.08), transparent 55%), linear-gradient(160deg, #161616 0%, #0f0f0f 55%, #131110 100%); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .4s var(--ease-out), visibility .4s, transform .5s var(--ease-spring); overflow-y: auto; } .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; } /* Górny pasek: logo + X (X = zawsze klikalny, w środku nakładki) */ .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); flex-shrink: 0; } .mobile-nav__logo { height: 44px; width: auto; } .mobile-nav__close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--r-pill); background: rgba(255,255,255,.03); color: var(--on-dark); transition: color .25s, border-color .25s, transform .35s var(--ease-spring); } .mobile-nav__close:hover, .mobile-nav__close:active { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); } .mobile-nav__close svg { width: 20px; height: 20px; } /* Linki */ .mobile-nav__links { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; } .mobile-nav__links a { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1.1; color: var(--on-dark); border-bottom: 1px solid rgba(207,181,122,.12); opacity: 0; transform: translateX(-14px); transition: color .2s, opacity .5s var(--ease-out), transform .5s var(--ease-out); } .mobile-nav__links a:active, .mobile-nav__links a:hover { color: var(--gold); } .mobile-nav.is-open .mobile-nav__links a { opacity: 1; transform: none; } .mobile-nav.is-open .mobile-nav__links a:nth-child(1) { transition-delay: .06s; } .mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: .11s; } .mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: .16s; } .mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: .21s; } .mobile-nav.is-open .mobile-nav__links a:nth-child(5) { transition-delay: .26s; } .mobile-nav.is-open .mobile-nav__links a:nth-child(6) { transition-delay: .31s; } .mobile-nav__num { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--gold); opacity: .75; } /* Stopka menu: CTA + kontakt */ .mobile-nav__foot { flex-shrink: 0; padding: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; opacity: 0; transition: opacity .5s var(--ease-out) .28s; } .mobile-nav.is-open .mobile-nav__foot { opacity: 1; } .mobile-nav__foot .btn { width: 100%; } .mobile-nav__contact { display: flex; flex-direction: column; gap: .3rem; } .mobile-nav__contact a { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); } .mobile-nav__contact span { font-size: .82rem; letter-spacing: .04em; color: var(--text-secondary); } /* ───────────────────────────── RESPONSIVE ───────────────────────────── */ @media (max-width: 1100px) { .service { grid-template-columns: 4rem 1fr; } .service__media { display: none; } .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 900px) { /* lżejszy hero na mobile (64KB vs 267KB) — LCP */ .hero__media { background-image: url('../img/hero/hero-columns-mobile.webp'); } /* Jeden rząd: logo wyśrodkowane, hamburger po prawej. Menu (tafla) i CTA są w menu mobilnym. */ :root { --header-h: 88px; } .nav, .header__shop { display: none; } .header { padding-block: 1rem; } .header__inner { gap: 0; } /* jeden rząd na mobile: bez dzielnika i dolnego paddingu drugiego rzędu */ .header__top { padding-bottom: 0; border-bottom: none; } .brand img { height: 46px; } .nav-toggle { display: flex; } .split { grid-template-columns: 1fr; gap: 3rem; } .split--reverse .split__media { order: 0; } .split__media-accent { width: 38%; } .journey { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; } .atelier__inner { grid-template-columns: 1fr; } .lookbook__grid { grid-auto-rows: clamp(140px, 30vw, 220px); } .lb--a { grid-column: span 12; grid-row: span 2; } .lb--b, .lb--d, .lb--f, .lb--g { grid-column: span 6; } .lb--c, .lb--e { grid-column: span 6; } } @media (max-width: 560px) { :root { --header-h: 84px; } .service { grid-template-columns: 1fr; gap: .5rem; } .service__num { font-size: 1.6rem; } .hero { align-items: flex-end; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; } /* Treść hero jest tu dosunięta do dołu, a wskaźnik przewijania stoi w tym samym miejscu — na niskich ekranach (np. 375x667) nachodziły na siebie o 43px. Wskaźnik jest dekoracyjny (aria-hidden), więc na telefonie znika. */ .hero__scroll { display: none; } .stats { gap: 1.5rem; } .stat { flex-basis: 5rem; } .split__media-accent { display: none; } .journey { grid-template-columns: 1fr; } .journey__step { padding-right: 0; } /* Trzy kadry obok siebie robią się nieczytelne — przewijany rząd */ .strip { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem)); padding-inline: clamp(1.25rem, 5vw, 3rem); scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } .strip figure { scroll-snap-align: center; } .footer__top { grid-template-columns: 1fr; } .lb__cap { font-size: .9rem; } .lb--b, .lb--c, .lb--d, .lb--e, .lb--f, .lb--g { grid-column: span 12; } .cta-band__actions { flex-direction: column; } .cta-band__actions .btn { width: 100%; } }