/* ============================================================ VIOLETTA LUTATTOO — design system Ciemna paleta wyprowadzona ze zdjęć na Instagramie: głęboka czerń tła, ciepłe bursztynowe bokeh, ton skóry. ============================================================ */ :root { /* --- kolory --- */ --ink: #060607; /* tło strony */ --ink-2: #0b0b0d; /* sekcja "soft" */ --ink-3: #121214; /* tło kafelków */ --text: #e6e3dd; --text-dim: #7e7972; --line: rgba(230, 227, 221, .11); --line-soft: rgba(230, 227, 221, .07); --amber: #d59a52; /* --- rytm (zwarty) --- */ --gut: clamp(20px, 5vw, 68px); --section: clamp(68px, 9vh, 132px); --maxw: 1560px; /* --- ruch --- */ --ease: cubic-bezier(.19, 1, .22, 1); --med: .7s; --fast: .38s; } /* --- zestawy typograficzne (przełącznik w site.json → fontSet) --- */ .fs-atelier { --font-display: "Instrument Serif", "Playfair Display", "Times New Roman", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --display-weight: 400; --display-tracking: -.015em; --display-leading: .92; } .fs-grotesk { --font-display: "Archivo", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --display-weight: 500; --display-tracking: -.035em; --display-leading: .88; } .fs-couture { --font-display: "Bodoni Moda", "Playfair Display", Didot, Georgia, serif; --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --display-weight: 400; --display-tracking: -.01em; --display-leading: .95; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip (nie hidden) — hidden na tworzy własny kontener przewijania i psuje position:fixed oraz 100svh na części przeglądarek. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: clamp(15px, .95rem + .15vw, 16.5px); line-height: 1.6; letter-spacing: .005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.is-locked { overflow: hidden; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--amber); color: var(--ink); } :focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; } /* ziarno — bardzo subtelne, jak w jej zdjęciach */ .grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 6s steps(5) infinite; } @keyframes grain { 0%, 100% { background-position: 0 0; } 20% { background-position: -18px 12px; } 40% { background-position: 14px -20px; } 60% { background-position: -12px -14px; } 80% { background-position: 20px 16px; } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } } /* ============================================================ TYPOGRAFIA ============================================================ */ .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-wrap: balance; } .d-xl { font-size: clamp(3rem, 11.5vw, 10.5rem); } .d-lg { font-size: clamp(2.2rem, 6.2vw, 5.2rem); } .d-md { font-size: clamp(1.8rem, 4vw, 3.2rem); } .eyebrow { font-size: clamp(9.5px, .6rem + .1vw, 11px); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--text-dim); } .lede { font-size: clamp(1rem, .92rem + .45vw, 1.42rem); line-height: 1.45; letter-spacing: -.005em; } .muted { color: var(--text-dim); } /* ============================================================ UKŁAD ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: var(--section); position: relative; } .section--soft { background: var(--ink-2); border-block: 1px solid var(--line-soft); } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-bottom: clamp(22px, 3vw, 44px); border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 56px); } .sec-head .eyebrow + .display { margin-top: 12px; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(15px, 2vw, 26px) var(--gut); color: #fff; transition: transform var(--med) var(--ease), opacity var(--med) var(--ease), background var(--med) var(--ease); } .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6,6,7,.62), rgba(6,6,7,0)); transition: opacity var(--med) var(--ease); } .nav.is-solid { background: rgba(6,6,7,.76); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav.is-solid::before { opacity: 0; } .nav.is-hidden { transform: translateY(-110%); opacity: 0; } body.lb-open .nav { opacity: 0; pointer-events: none; } .nav a, .nav button { color: #fff; } .nav__brand { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; white-space: nowrap; } .nav__links { display: flex; gap: clamp(18px, 2.4vw, 38px); align-items: center; } .nav__links a { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; position: relative; padding-block: 4px; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--fast) var(--ease); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); } .langs { display: flex; gap: 9px; align-items: center; } .langs a { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; opacity: .42; transition: opacity var(--fast) var(--ease); } .langs a:hover { opacity: 1; } .langs a[aria-current="true"] { opacity: 1; } .langs span { opacity: .28; font-size: 10px; } .burger { display: none; width: 26px; height: 14px; position: relative; } .burger i { position: absolute; left: 0; right: 0; height: 1px; background: #fff; transition: transform var(--med) var(--ease); } .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { bottom: 0; } body.menu-open .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.menu-open .burger i:nth-child(2) { transform: translateY(-6.5px) rotate(-45deg); } /* menu mobilne */ .menu { position: fixed; inset: 0; z-index: 480; background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden; } body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; } .menu__link { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.5rem, 12vw, 4.4rem); line-height: 1.06; letter-spacing: var(--display-tracking); padding-block: 6px; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } body.menu-open .menu__link { opacity: 1; transform: none; } body.menu-open .menu__link:nth-of-type(1) { transition-delay: .18s; } body.menu-open .menu__link:nth-of-type(2) { transition-delay: .26s; } body.menu-open .menu__link:nth-of-type(3) { transition-delay: .34s; } .menu__foot { margin-top: 44px; display: flex; gap: 20px; } .menu__foot a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } /* ============================================================ PRZYCISKI ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding: 17px 28px; border: 1px solid var(--line); border-radius: 999px; position: relative; overflow: hidden; transition: color var(--med) var(--ease), border-color var(--med) var(--ease); min-height: 50px; } .btn span { position: relative; z-index: 2; } .btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--text); transform: translateY(101%); transition: transform .6s var(--ease); } .btn:hover { color: var(--ink); border-color: var(--text); } .btn:hover::before { transform: translateY(0); } .btn__arrow { position: relative; z-index: 2; transition: transform var(--med) var(--ease); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--amber { border-color: rgba(213,154,82,.5); color: var(--amber); } .btn--amber::before { background: var(--amber); } .btn--amber:hover { color: var(--ink); border-color: var(--amber); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: clamp(32px, 5vh, 68px); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); animation: heroZoom 2.6s var(--ease) forwards; } @keyframes heroZoom { to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .hero__media img, .hero__media video { animation: none; transform: none; } } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,7,.9) 0%, rgba(6,6,7,.3) 48%, rgba(6,6,7,.5) 100%); } /* wideo na telefonie — kadr jest jasny, wiec przyciemniamy mocniej, zeby biala typografia pozostala czytelna */ .hero__vid { animation: none !important; transform: none !important; } .hero--video .hero__media::after { background: linear-gradient(to top, rgba(6,6,7,.95) 0%, rgba(6,6,7,.5) 45%, rgba(6,6,7,.68) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__eyebrow { margin-bottom: clamp(18px, 2.6vh, 34px); color: rgba(230,227,221,.68); } .hero__title { max-width: 15ch; } .hero__title span { display: block; } .js .hero__title span { opacity: 0; transform: translateY(34px); } .hero__title .l2 { padding-left: clamp(0px, 8vw, 170px); } .hero__title .l3 { padding-left: clamp(0px, 16vw, 320px); font-style: italic; color: var(--amber); } .hero__foot { margin-top: clamp(24px, 4vh, 50px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(230,227,221,.15); padding-top: 20px; } .hero__note { font-size: 13px; letter-spacing: .04em; color: rgba(230,227,221,.76); } .hero__scroll { display: flex; align-items: center; gap: 10px; } .hero__scroll i { display: block; width: 28px; height: 1px; background: currentColor; transform-origin: left; animation: scrollLine 2.6s var(--ease) infinite; } @keyframes scrollLine { 0%, 100% { transform: scaleX(.25); } 50% { transform: scaleX(1); } } .js .hero .anim { opacity: 0; transform: translateY(26px); } .hero.is-in .anim { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); } .hero.is-in .hero__eyebrow { transition-delay: .15s; } .hero.is-in .hero__foot { transition-delay: .74s; } .hero.is-in .hero__title span { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); } .hero.is-in .hero__title .l1 { transition-delay: .3s; } .hero.is-in .hero__title .l2 { transition-delay: .42s; } .hero.is-in .hero__title .l3 { transition-delay: .54s; } /* ============================================================ PORTFOLIO ============================================================ */ .filters { display: flex; flex-wrap: wrap; gap: 7px; } .filters button { font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 500; padding: 10px 17px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease); min-height: 38px; } .filters button:hover { color: var(--text); border-color: rgba(230,227,221,.3); } .filters button[aria-pressed="true"] { color: var(--ink); background: var(--text); border-color: var(--text); } .grid { columns: 1; column-gap: clamp(12px, 2.2vw, 38px); } @media (min-width: 700px) { .grid { columns: 2; } } @media (min-width: 1180px) { .grid { columns: 3; } } .card { break-inside: avoid; margin-bottom: clamp(12px, 2.2vw, 38px); display: block; width: 100%; position: relative; text-align: left; transition: opacity .95s var(--ease), transform .95s var(--ease); } .js .card { opacity: 0; transform: translateY(34px); } .card.is-in { opacity: 1; transform: none; } .card.is-hidden { display: none; } /* asymetria — rytm editorial zamiast równej siatki */ @media (min-width: 700px) { .card:nth-child(4n+2) { width: 80%; margin-left: auto; } .card:nth-child(6n+5) { width: 86%; } .card:nth-child(5n+3) { margin-top: clamp(16px, 3.4vw, 60px); } } .card__media { position: relative; overflow: hidden; background: var(--ink-3); display: block; } .card__media img { width: 100%; height: auto; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); filter: saturate(.95) brightness(.96); } .card:hover .card__media img { transform: scale(1.04); filter: saturate(1.04) brightness(1); } .card__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,7,.66), rgba(6,6,7,0) 55%); opacity: 0; transition: opacity var(--med) var(--ease); } .card:hover .card__veil { opacity: 1; } .card__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 18px; opacity: 0; transform: translateY(12px); transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); } .card:hover .card__meta { opacity: 1; transform: none; } .card__view { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: #fff; } .card__cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); text-align: right; } .grid-empty { color: var(--text-dim); padding: 36px 0; font-size: 14px; display: none; } .grid-empty.is-on { display: block; } .work__more { margin-top: clamp(26px, 4vw, 52px); } /* ============================================================ LIGHTBOX ============================================================ */ .lb { position: fixed; inset: 0; z-index: 9500; background: #040405; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; padding: clamp(48px, 8vh, 88px) clamp(14px, 5vw, 88px); touch-action: pan-y; } .lb.is-open { opacity: 1; visibility: visible; } .lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: scale(.97); opacity: 0; transition: transform .7s var(--ease), opacity .5s var(--ease); } .lb.is-open .lb__img { transform: none; opacity: 1; } .lb__close { position: absolute; top: 18px; right: clamp(14px, 4vw, 38px); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 14px; } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .lb__nav:hover { background: var(--text); color: var(--ink); border-color: var(--text); } .lb__nav--prev { left: clamp(8px, 2.5vw, 32px); } .lb__nav--next { right: clamp(8px, 2.5vw, 32px); } .lb__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .2em; color: var(--text-dim); } .lb__cap { position: absolute; bottom: 18px; left: clamp(14px, 4vw, 38px); font-size: 12px; color: var(--text-dim); max-width: 40ch; } @media (max-width: 760px) { .lb__nav, .lb__cap { display: none; } } /* ============================================================ O MNIE ============================================================ */ .about__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: end; } @media (min-width: 950px) { .about__grid { grid-template-columns: 1.05fr 1fr; } } /* Portret odsłania się stopniowo, w rytmie przewijania: --p to postęp od 0 (jeszcze pod ekranem) do 1 (w pełni widoczny). Wartość ustawia main.js co klatkę. Bez JS zostaje 1, czyli zdjęcie widać od razu. */ .about__portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3); --p: 1; clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); } .about__portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - .12 * var(--p))); opacity: calc(.35 + .65 * var(--p)); will-change: transform; } /* przy "ogranicz ruch" portret nie jedzie z przewijaniem, tylko spokojnie się rozjaśnia (klasę .reveal dokłada main.js) */ @media (prefers-reduced-motion: reduce) { .about__portrait { clip-path: none !important; } .about__portrait img { transform: none !important; opacity: 1 !important; } } /* zastępnik, dopóki nie ma portretu */ .about__ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(230,227,221,.035) 12px 13px), var(--ink-3); border: 1px solid var(--line); } .about__ph span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); } .about__ph small { font-size: 11px; color: var(--text-dim); opacity: .55; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .about__name { margin-top: 12px; margin-bottom: 8px; } .about__role { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .about__bio { margin-top: clamp(20px, 2.6vw, 34px); max-width: 44ch; } .about__facts { margin-top: clamp(26px, 3.4vw, 44px); border-top: 1px solid var(--line); } .about__facts li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .about__facts .k { color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; } .about__facts .v { font-weight: 500; } /* ============================================================ PROCES ============================================================ */ .step { display: grid; gap: 8px 40px; padding-block: clamp(24px, 3.2vw, 40px); border-top: 1px solid var(--line); align-items: baseline; } .step:last-child { border-bottom: 1px solid var(--line); } @media (min-width: 800px) { .step { grid-template-columns: 84px minmax(0, .9fr) minmax(0, 1.4fr); } } .step__n { font-size: 11px; letter-spacing: .2em; color: var(--amber); } .step__t { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.4rem, 2.9vw, 2.3rem); line-height: 1.05; letter-spacing: var(--display-tracking); } .step__d { color: var(--text-dim); max-width: 42ch; } /* ============================================================ STOPKA (zawiera kontakt) ============================================================ */ .footer { border-top: 1px solid var(--line); background: var(--ink-2); padding-block: clamp(52px, 7vw, 92px) clamp(26px, 3.4vw, 40px); } .footer__top { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (min-width: 850px) { .footer__top { grid-template-columns: 1fr auto; } } .footer__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.7rem, 4.6vw, 3.2rem); letter-spacing: var(--display-tracking); line-height: 1; } .footer__tag { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .footer__contact { max-width: 40ch; } @media (min-width: 850px) { .footer__contact { text-align: right; } } .footer__line { color: var(--text-dim); font-size: 14px; } .footer__cta { margin-top: 22px; } .footer__handle { display: block; margin-top: 18px; font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--amber); transition: opacity var(--fast) var(--ease); } .footer__handle:hover { opacity: .7; } .footer__bottom { margin-top: clamp(38px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 11px; letter-spacing: .08em; color: var(--text-dim); } /* ============================================================ REVEAL ============================================================ */ .js .reveal { opacity: 0; transform: translateY(26px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal[data-d="1"].is-in { transition-delay: .1s; } .reveal[data-d="2"].is-in { transition-delay: .2s; } .reveal[data-d="3"].is-in { transition-delay: .3s; } /* delikatny szereg: karty w jednym rzędzie pojawiają się jedna po drugiej */ @media (min-width: 1180px) { .card:nth-child(3n+2).is-in { transition-delay: .09s; } .card:nth-child(3n+3).is-in { transition-delay: .18s; } } @media (min-width: 700px) and (max-width: 1179px) { .card:nth-child(2n).is-in { transition-delay: .09s; } } /* "Ogranicz ruch" w systemie: rezygnujemy z przesunięć i skali, ale samo pojawianie się zostaje — po prostu spokojne rozjaśnienie. */ @media (prefers-reduced-motion: reduce) { .reveal, .card, .hero .anim, .hero__title span, .reveal.is-in, .card.is-in, .hero.is-in .anim, .hero.is-in .hero__title span { transform: none !important; } .reveal.is-in, .card.is-in { transition: opacity 1s var(--ease); } .hero.is-in .anim, .hero.is-in .hero__title span { transition: opacity 1.1s var(--ease); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 860px) { .nav__links { display: none; } .burger { display: block; } .hero__title .l2 { padding-left: 8vw; } .hero__title .l3 { padding-left: 16vw; } .card { width: 100% !important; margin-top: 0 !important; } .step { grid-template-columns: 1fr; } .step__n { margin-bottom: 4px; } } @media (max-width: 480px) { .nav__brand { font-size: 9.5px; letter-spacing: .11em; } .langs { gap: 7px; } .langs a { font-size: 9.5px; letter-spacing: .1em; } .nav__right { gap: 12px; } .filters button { padding: 9px 13px; font-size: 10px; } .footer__bottom { flex-direction: column; gap: 8px; } }