/* Desigra · plik złożony przez tools/build.js z css/src/. Nie edytuj tutaj, zmieniaj pliki źródłowe. */ /* ==== css/src/01-base.css ==== */ /* Podstawa: reset, elementy HTML, siatka, typografia, pomocnicze klasy, reveal */ /* Desigra 3.26 · style strony (kolejność reguł jak w 3.25). Fonty: fonts.css. */ /* Warianty krojów (do porównania) */ /* 3.4: Urbanist w nagłówkach (700) i w treści (OFL, Google Fonts) */ /* Urbanist z Google Fonts nie ma znaków ł i Ł (U+0141–0142), więc przeglądarka brała je z czcionki systemowej. Od 3.9 podzbiór latin ma dorysowane ł i Ł (zmienna grubość 100–900). */ /* 3.16 · jedyny zestaw: Sora (nagłówki) + Inter (tekst) */ :root { color-scheme: light; /* Kolor */ --red: #F13450; /* kolor marki: płaszczyzny, duże akcenty */ --red-deep: #D61F3D; /* tło przycisków z białym tekstem (5:1) */ --red-ink: #C8102E; /* czerwony tekst w małym stopniu (5.8:1) */ --red-soft: #FDECEF; /* bardzo jasny odcień: dostępne dni, tła */ --ink: #111114; --ink-2: #1F1F24; --paper: #FFFFFF; --g1: #F5F5F6; --g2: #E7E7EA; --g3: #C9C9CF; --mute: #63636C; /* 5.9:1 na białym */ --mute-d: #A3A3AD; /* 7:1 na ink */ --error: #B4102B; --f: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fh: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; /* nagłówki */ --trk: 1; /* mnożnik ujemnego światła liter (zależny od kroju) */ --w-light: 300; /* „lekki” stopień tekstu (w 3.3 nadpisany na 400) */ /* Skala typografii 3.2: cztery stopnie wystawowe + tekst. XL: hero, zakończenie, nazwa projektu; L: manifest, osoba; H1/H2: podstrony i sekcje. */ --fs-hero: clamp(46px, 8.7vw, 132px); --fs-xl: clamp(50px, 9vw, 144px); --fs-l: clamp(46px, 7.6vw, 124px); --fs-h1: clamp(44px, 6.6vw, 104px); --fs-h2: clamp(36px, 4.9vw, 78px); --fs-h3: clamp(26px, 2.7vw, 42px); --fs-body: clamp(17px, 1.2vw, 19px); --fs-lead: clamp(19px, 1.5vw, 22px); --fs-meta: 14px; --fs-small: 13px; /* najmniejszy stopień w serwisie (podpisy, metadane) */ --gut: clamp(20px, 4.4vw, 64px); --w-text: 1160px; /* 3.0: szerokość treści z wersji 2.1 */ --w-wide: 1440px; /* 3.0: szerokie kadry: nagłówek, hero, portfolio, stopka */ --gap: clamp(14px, 1.7vw, 24px); --max: 1760px; --sec: clamp(96px, 11vw, 176px); --r: clamp(18px, 2vw, 30px); /* duże kadry */ --r-m: 16px; /* karty, panele, podglądy */ --r-s: 12px; /* pola, notatki, sloty */ --ease: cubic-bezier(.22, .8, .16, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); /* Tempo ruchu: reakcja na działanie / zmiana stanu / wejście kadru */ --t-1: .25s; --t-2: .6s; --t-3: 1.1s; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: var(--fs-body); font-weight: 400; line-height: 1.55; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } [hidden] { display: none !important; } a { color: inherit; } button { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--red); color: var(--paper); } :focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; border-radius: 4px; } .dark :focus-visible { outline-color: var(--paper); } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: calc(var(--w-text) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); } .wrap--wide { max-width: calc(var(--w-wide) + 2 * var(--gut)); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .grid > * { min-width: 0; } .hero-t, .h1, .h2 { font-weight: 500; letter-spacing: calc(-0.045em * var(--trk)); line-height: .96; text-wrap: balance; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: calc(-0.035em * var(--trk)); } .h2--light { font-weight: var(--w-light); letter-spacing: calc(-0.02em * var(--trk)); } .h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: calc(-0.03em * var(--trk)); line-height: 1.08; } .meta { font-size: var(--fs-meta); font-weight: 500; letter-spacing: .01em; color: var(--mute); } .dark .meta { color: var(--mute-d); } .muted { color: var(--mute); } .dark .muted { color: var(--mute-d); } .red { color: var(--red); } .line { display: block; } .sec { padding-block: var(--sec); position: relative; } .dark { background: var(--ink); color: var(--paper); } .soft { background: var(--g1); } .mono { border-radius: 50%; background: var(--red); color: var(--ink); display: grid; place-items: center; font-weight: 600; letter-spacing: calc(-.02em * var(--trk)); flex: none; } .load .reveal { animation: up 1.1s var(--ease) both; } .load .reveal.d1 { animation-delay: .08s; } .load .fade { animation: fade 1s .45s var(--ease) both; } .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .step { background: var(--g1); border-radius: var(--r); padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 16px; align-content: start; min-height: 360px; grid-template-rows: auto 1fr auto auto; transition: background-color .4s, color .4s; } .step:hover { background: var(--ink); color: var(--paper); } .step:hover p.you { background: rgba(255,255,255,.08); color: var(--paper); } .step:hover .muted { color: var(--mute-d); } .step h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: calc(-.025em * var(--trk)); line-height: 1.12; } .step .you { font-size: 15px; background: var(--paper); border-radius: 12px; padding: 12px 14px; transition: background-color .4s; } .next { display: block; text-decoration: none; background: var(--ink); color: var(--paper); } .next .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: clamp(64px, 8vw, 128px); align-items: center; row-gap: 24px; } .next .lbl { grid-column: 1 / -1; color: var(--mute-d); font-size: 15px; } .print-only { display: none; } /* reveal przy przewijaniu */ .motion .rv { transition: opacity 1s var(--ease), transform 1s var(--ease); } .motion .rv.pre { opacity: 0; transform: translateY(40px); } main { transition: opacity .3s ease; } main.leaving { opacity: 0; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } } .nowrap { white-space: nowrap; } body { font-weight: 450; } :is(.h2--light, .cv__name .line:first-child) { font-weight: 400; } /* Dotyk (Android/iOS): bez niebieskiego podświetlenia i zaznaczania tekstu przy stuknięciu w przyciski, pigułki formularza, karty i linki. Zamiast tego delikatne „wciśnięcie”. Fokus z klawiatury zostaje (:focus-visible). */ html { -webkit-tap-highlight-color: rgba(0,0,0,0); } *, *::before, *::after { -webkit-tap-highlight-color: rgba(0,0,0,0); } a, button, label, summary, [role="button"], .sf__opt span, .sf__chip span, .sf__check span, .xcta, .btn, .work, .pf-pill__a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } :is(button, a, label):focus:not(:focus-visible) { outline: none; } /* 3.7 · Następny projekt: tło w kolorze marki, żeby nie zlewało się z czarną sekcją „Masz projekt? Porozmawiajmy.” tuż pod spodem. */ .next { background: var(--red); color: var(--ink); } .next .lbl { color: var(--ink); opacity: .78; font-weight: 500; } .next:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; } /* 3.9 · Wersja ciemna (inwersja): . Tokeny jasnych powierzchni zamieniają się z ciemnymi; sekcje .dark zostają ciemne, ale o ton jaśniejsze od strony, żeby nie zlewały się z tłem. */ html[data-theme="dark"] { color-scheme: dark; --paper: #0B0B0D; --ink: #F2F2F4; --ink-2: #DADADF; --g1: #151518; --g2: #2A2A30; --g3: #4A4A53; --mute: #A3A3AD; --mute-d: #8A8A94; --red-ink: #FF5C76; --red-soft: #2B1016; --error: #FF6B80; } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) body { background: var(--paper); color: var(--ink); } html[data-theme="dark"] ::selection { background: var(--red); color: #fff; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; } /* 5. Sora (nagłówki) + Inter (tekst ciągły), od 3.16 na stałe */ html body { font-weight: 400; } html:root body :is(h1, h2, h3) { overflow-wrap: normal; hyphens: manual; text-wrap: balance; } html:root body p { text-wrap: pretty; } /* h2 podstron */ html:root body :is(main .h2:not(.pf-sec .h2), .sv__h, .ap__t, .nx__t, .cs__cta h2, #talk .write__head h2) { font-family: var(--fh); font-size: var(--t-h2); font-weight: var(--w-sub); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } /* Kropka na końcu nagłówka: tylko w hasłach z dwóch zdań (hero, H1 „… Poznajmy się.”, H1 usług „… I równie dobrze działa.”). Pozostałe kropki mają klasę dot-x i są ukryte; panel testowy pokazuje je do porównania (html[data-dots="all"]). */ .dot-x { display: none; } html[data-dots="all"] .dot-x { display: inline; } html:root body [data-pf-scope] { display: flex; flex-direction: column; } /* Ikony z kolorem marki wpisanym w SVG też biorą kolor z tokenu. */ svg [fill="#F13450"] { fill: var(--red); } /* ==== css/src/02-tokens.css ==== */ /* Zmienne: kolory obu motywów, skala typografii, odstępy, akcent */ @media (min-width: 1800px) { :root { --fs-body: 20px; } } /* Tła: lekko złamana biel (jasna) i złamana czerń (ciemna) */ :root { --paper: #FAF9F6; --g1: #F1F0EC; --g2: #E4E3DE; --g3: #C8C7C1; } html[data-theme="dark"] { --paper: #141416; --ink: #F1F1F3; --g1: #1C1C1F; --g2: #2E2E33; --g3: #4B4B52; } /* Typografia: na stałe Sora (nagłówki) + Inter (tekst). Sora jest szersza od Urbanist, więc skala wystawowa jest ok. 10% mniejsza. */ :root { --fs-hero: clamp(42px, 7.8vw, 118px); --fs-xl: clamp(44px, 8vw, 128px); --fs-l: clamp(40px, 6.8vw, 110px); --fs-h1: clamp(40px, 5.9vw, 94px); --fs-h2: clamp(32px, 4.4vw, 70px); --fs-h3: clamp(24px, 2.5vw, 38px); } /* Jedna skala dla całej strony. Rozmiary, wagi, interlinia, tracking i odstępy ustawiamy tylko tutaj, przez zmienne. Każdy nagłówek ma jedną rolę: display hasło w hero strony głównej (Sora 700) sekcja nagłówki sekcji strony głównej i „Opowiedz o projekcie” (Sora 700) h1 / h2 / h3 podstrony (Sora, waga --w-sub: 600) lead, tekst, mały, podpis (Inter) Ten blok stoi na końcu i ma pierwszeństwo nad starszymi warstwami (3.0–3.16). Stare zmienne --fs-* wskazują na nową skalę, żeby nic nie liczyło się po staremu. */ html:root { /* rozmiary: płynnie od 320 do 1440 px */ --t-display: clamp(44px, calc(27px + 6.1vw), 116px); --t-sec: clamp(34px, calc(21px + 4.1vw), 78px); --t-h1: clamp(32px, calc(24.1px + 3.05vw), 68px); --t-h2: clamp(28px, calc(24.6px + 1.34vw), 44px); --t-h3: clamp(20px, calc(19px + .62vw), 28px); --t-lead: clamp(17px, calc(16.3px + .33vw), 21px); --t-body: clamp(16px, calc(15.3px + .19vw), 18px); --t-small: 14px; --t-cap: 13px; /* wagi */ --w-display: 700; --w-sec: 700; --w-sub: 600; /* interlinia i tracking */ --lh-display: .95; --tr-display: -.035em; --lh-sec: 1; --tr-sec: -.03em; --lh-h1: 1.02; --tr-h1: -.028em; --lh-h2: 1.08; --tr-h2: -.02em; --lh-h3: 1.18; --tr-h3: -.012em; --lh-lead: 1.5; --lh-body: 1.6; /* odstępy */ --s-crumb: clamp(16px, 1.6vw, 24px); /* okruszki → H1 */ --s-head: clamp(20px, 2.2vw, 32px); /* H1 → lead, lead → CTA */ --s-h2: clamp(24px, 2.8vw, 40px); /* H2 → treść */ --s-sec: clamp(72px, 8.5vw, 136px); /* sekcja → sekcja */ --s-top: clamp(112px, 10.5vw, 168px); /* góra podstrony (pod menu) */ /* jedna siatka: treść podstron wyrównana do logo i menu */ --w-text: var(--w-wide); /* stare zmienne → nowa skala */ --fs-hero: var(--t-display); --fs-xl: var(--t-sec); --fs-end: var(--t-sec); --fs-l: var(--t-sec); --fs-h1: var(--t-h1); --fs-h2: var(--t-h2); --fs-h3: var(--t-h3); --fs-lead: var(--t-lead); --fs-body: var(--t-body); --fs-meta: var(--t-small); --fs-small: var(--t-cap); } /* Porównanie wag na żywych komponentach: (panel testowy) */ html[data-wsub="700"] { --w-sub: 700; } /* Dalej ten sam system: rozmiary z --t-*, wagi z --w-*, odstępy z --s-*. Nowe w 3.18: odstęp sekcji --sec = --s-sec na całej stronie, rola „teza” (--t-h3, Sora 500) dla krótkich zdań w case study, kolor akcentu wyłącznie przez tokeny --red*. */ html:root { --sec: var(--s-sec); --w-thesis: 500; --lh-thesis: 1.28; } /* Wariant #FE003E (panel testowy: html[data-accent="fe"]). Biały tekst tylko na --red-deep (5,4:1), mały czerwony tekst na jasnym tle w --red-ink (5,3:1), na ciemnym jaśniejszy --red-ink (6,2:1). */ html[data-accent="fe"] { --red: #FE003E; --red-deep: #D60035; --red-ink: #D10034; --red-soft: #FFE5EB; } html[data-accent="fe"][data-theme="dark"] { --red: #FE003E; --red-deep: #D60035; --red-ink: #FF5C7E; --red-soft: #2B0A12; } /* ==== css/src/03-animations.css ==== */ /* Wszystkie @keyframes */ @keyframes pop { from { opacity: 0; transform: translateY(-6px); } } @keyframes up { from { transform: translateY(105%); } } @keyframes fade { from { opacity: 0; transform: translateY(18px); } } @keyframes xpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes xring { 0%, 100% { opacity: 0; transform: scale(.97); } 50% { opacity: .6; transform: scale(1.03); } } @keyframes xspin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } } @keyframes xripple { from { opacity: .5; width: 0; height: 0; } to { opacity: 0; width: 640px; height: 640px; } } @keyframes dsg-in{ from{opacity:0; transform:translateY(calc(var(--dsg-y) + 12px)) scale(.97); clip-path:inset(0 22% 0 22% round 999px)} to{opacity:1; transform:translateY(var(--dsg-y)) scale(1); clip-path:inset(0 0 0 0 round 999px)} } @keyframes gx-ants { to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; } } @keyframes gx-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 60% { box-shadow: 0 0 0 14px transparent; } } @keyframes gx-rot { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-100%); } 50%, 70% { transform: translateY(-200%); } 75%, 95% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } } @keyframes cur-tick { to { transform: translateX(-100%); } } @keyframes rkt-star { to { transform: translateY(90px); } } @keyframes rkt-bob { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2.5px); } } @keyframes rkt-shake { from { transform: translate(-.6px, 0) rotate(-1.6deg); } to { transform: translate(.6px, -1px) rotate(1.6deg); } } @keyframes rkt-flame { from { transform: scale(.85, .5); } to { transform: scale(1, .72); } } @keyframes rkt-flame-big { from { transform: scale(.9, .95); } to { transform: scale(1.06, 1.3); } } @keyframes rkt-flame-max { from { transform: scale(1, 1.4); } to { transform: scale(1.15, 1.9); } } @keyframes rkt-launch { 0% { transform: translateY(0); } 16% { transform: translateY(3px); } 100% { transform: translateY(-110px); } } @keyframes rkt-land { from { transform: translateY(90px); } 70% { transform: translateY(-3px); } to { transform: translateY(0); } } @keyframes rkt-puff { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .7; } 100% { opacity: 0; transform: translateY(12px) scale(2.8); } } @keyframes px-in { 0% { opacity: 0; } 35% { opacity: max(var(--o, 1), .5); } 100% { opacity: var(--o, 1); } } @keyframes px-flick { 0%, 100% { opacity: var(--o, 1); } 50% { opacity: .45; } } @keyframes hs-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes hs-sink { to { transform: translateY(-3%) scale(.985); filter: brightness(.92); } } /* ==== css/src/04-button.css ==== */ /* Przyciski: .btn, CTA-sygnatura .xcta, linki tekstowe .tlink, roll tekstu */ .btn { --bg: var(--ink); --fg: var(--paper); --hov: var(--red-deep); --hfg: var(--paper); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font-size: 17px; font-weight: 500; letter-spacing: calc(-.005em * var(--trk)); text-decoration: none; cursor: pointer; transition: color .45s var(--ease), transform .4s var(--ease), box-shadow .3s; } .btn::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: 100%; height: 220%; background: var(--hov); border-radius: 50%; transition: top .6s var(--ease), border-radius .6s var(--ease); } .btn:hover::before, .btn:focus-visible::before { top: -60%; border-radius: 0; } .btn:hover, .btn:focus-visible { color: var(--hfg); } .btn .roll { display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3; } .btn .roll > span { grid-area: 1 / 1; transition: transform .5s var(--ease); } .btn .roll > span + span { transform: translateY(105%); } .btn:hover .roll > span:first-child, .btn:focus-visible .roll > span:first-child { transform: translateY(-105%); } .btn:hover .roll > span + span, .btn:focus-visible .roll > span + span { transform: none; } .btn--red { --bg: var(--red-deep); --fg: var(--paper); --hov: var(--ink); } .btn--line { --bg: transparent; --fg: var(--ink); --hov: var(--ink); --hfg: var(--paper); box-shadow: inset 0 0 0 1.5px var(--g3); } .btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .dark .btn--line { --fg: var(--paper); --hov: var(--paper); --hfg: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); } .btn--lg { min-height: 68px; padding: 0 38px; font-size: 19px; } .btn:active { transform: scale(.97); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn[disabled]::before { display: none; } .tlink { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; text-decoration: none; position: relative; padding-bottom: 4px; width: fit-content; } .tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); } .tlink:hover::after { transform: scaleX(0); } .tlink .arr { transition: transform .45s var(--ease); } .tlink:hover .arr { transform: translateX(5px); } .x-btn { border: 0; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; background: var(--g1); display: grid; place-items: center; transition: background-color .25s, transform .4s var(--ease); flex: none; } .x-btn:hover { background: var(--g2); transform: rotate(90deg); } .x-btn svg { width: 14px; height: 14px; } .linkbtn { background: none; border: 0; cursor: pointer; padding: 0; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; } .linkbtn:hover { color: var(--red-ink); } .xcta-shell { --xh: 68px; --xi: 40px; position: relative; display: inline-flex; border-radius: 999px; } .xcta-shell--sm { --xh: 50px; --xi: 30px; } .xcta-shell::before { content: ""; position: absolute; inset: -6px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(45deg, var(--red), #FF5A72, var(--red)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; animation: xring 4s ease-in-out 2s infinite; } .xcta-shell--sm::before { inset: -4px; } .xcta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--xh); padding: 0 calc(var(--xh) * .16) 0 calc(var(--xh) * .44); border: 2px solid #333; border-radius: 999px; background: linear-gradient(145deg, #030303, #0a090d); color: var(--paper); font: 500 19px/1.2 var(--f); letter-spacing: calc(-.01em * var(--trk)); white-space: nowrap; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .35s cubic-bezier(.25,.46,.45,.94), color .35s cubic-bezier(.25,.46,.45,.94), border-color .35s cubic-bezier(.25,.46,.45,.94); -webkit-tap-highlight-color: transparent; } .xcta--sm { font-size: 16px; gap: 10px; } .xcta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); transform: translateX(-100%); transition: transform .6s cubic-bezier(.25,.46,.45,.94); pointer-events: none; } .xcta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, var(--red), #FF4D66); opacity: 0; transition: opacity .35s cubic-bezier(.25,.46,.45,.94); } .xcta__label, .xcta__ic { position: relative; z-index: 2; } .xcta__ic { flex: 0 0 var(--xi); width: var(--xi); height: var(--xi); display: grid; place-items: center; animation: xpulse 3s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(241,52,80,.6)); } .xcta__ic svg { display: block; width: 100%; height: 100%; } .xcta__ic rect, .xcta__ic path { transition: fill .35s; } .xcta:is(:hover, :focus-visible) { transform: scale(1.05); color: var(--ink); border-color: var(--red); } .xcta:is(:hover, :focus-visible)::after { opacity: 1; } .xcta:is(:hover, :focus-visible)::before { transform: translateX(100%); } .xcta:is(:hover, :focus-visible) .xcta__ic { animation: xspin .8s cubic-bezier(.25,.46,.45,.94) both; } .xcta:is(:hover, :focus-visible) .xcta__ic rect { fill: var(--ink); } .xcta:is(:hover, :focus-visible) .xcta__ic path { fill: var(--red); } .xcta:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 10px; border-radius: 999px; } .xcta:active { transform: scale(1.02); } .xcta__ripple { position: absolute; z-index: 1; width: 0; height: 0; border-radius: 50%; background: rgba(241,52,80,.35); transform: translate(-50%, -50%); pointer-events: none; animation: xripple .6s ease-out forwards; } @media (max-width: 860px) { .xcta-shell--sm { --xh: 44px; --xi: 26px; } .xcta--sm { font-size: 15px; gap: 8px; } } @media (max-width: 400px) { .xcta-shell { --xh: 60px; --xi: 34px; } .xcta { font-size: 17px; } .xcta-shell--sm { --xh: 42px; --xi: 24px; } .xcta--sm { font-size: 14px; padding: 0 6px 0 14px; gap: 6px; } } @media (prefers-reduced-motion: reduce) { .xcta-shell::before, .xcta__ic, .xcta:is(:hover, :focus-visible) .xcta__ic { animation: none !important; } .xcta-shell::before { opacity: .45; } .xcta:is(:hover, :focus-visible) { transform: none; } .xcta__ripple { display: none; } } /* CTA w nagłówku: pełne „Opowiedz o projekcie”, na telefonie krótko */ .xcta__label .l-short { display: none; } @media (max-width: 560px) { .xcta__label .l-long { display: none; } .xcta__label .l-short { display: inline; } } button.tlink { background: none; border: 0; padding: 0 0 4px; font: inherit; font-weight: 500; color: inherit; cursor: pointer; } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .xcta { color: #FFFFFF; background: linear-gradient(145deg, #1A1A1F, #111114); border-color: #3A3A42; } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .xcta:is(:hover, :focus-visible) { color: #111114; border-color: var(--red); } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .xcta:is(:hover, :focus-visible) .xcta__ic rect { fill: #111114; } /* 1. Jasna: „pływająca” obwódka CTA w barwach Pink Velocity jasnej (róż → fiolet), hover bez zmian */ html:is(:not([data-theme]), [data-theme="dark"]) .xcta-shell::before { background: linear-gradient(45deg, #FF2D8A, #7861FF, #FF2D8A) border-box; } @media (max-width: 440px) { html:root body .xcta--lg { max-width: 100%; font-size: 17px; } html:root body .xcta--lg .xcta__label { white-space: normal; text-wrap: balance; text-align: left; line-height: 1.2; } } html[data-accent="fe"]:is(:not([data-theme]), [data-theme="dark"]) .xcta-shell::before { background: linear-gradient(45deg, #FE003E, #FF7A93, #FE003E) border-box; } /* ==== css/src/05-header.css ==== */ /* Nagłówek: logo, przełącznik motywu, CTA, pigułka realizacji, widget kontaktu */ .skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; text-decoration: none; transition: top .2s; } .skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); } .hdr { position: fixed; inset: 0 0 auto 0; z-index: 70; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; transition: transform .5s var(--ease); } .hdr.up { transform: translateY(-110%); } .hdr::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .35s, background-color .35s; } .hdr.solid::before { opacity: 1; } .hdr.solid[data-tone="dark"]::before { background: rgba(17,17,20,.86); } .menu-open .hdr::before { opacity: 0; } .hdr__in { position: relative; } .hdr__in { display: flex; align-items: center; justify-content: space-between; height: 92px; } .hdr__in > * { pointer-events: auto; } .logo { color: var(--ink); display: inline-flex; padding: 8px 0; transition: color .3s; } .logo svg { width: 118px; height: auto; } .hdr[data-tone="dark"] .logo { color: var(--paper); } .menu-open .hdr .logo { color: var(--paper); } .hdr__act { display: flex; gap: 10px; align-items: center; } .hdr .btn { min-height: 50px; padding: 0 24px; font-size: 16px; } .burger { border: 0; cursor: pointer; height: 50px; padding: 0 20px 0 22px; border-radius: 999px; background: var(--g1); color: var(--ink); display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; transition: background-color .3s, color .3s; } .burger:hover { background: var(--g2); } .hdr[data-tone="dark"] .burger { background: rgba(255,255,255,.12); color: var(--paper); } .menu-open .burger { background: var(--paper); color: var(--ink); } .burger .bars { width: 18px; height: 10px; position: relative; } .burger .bars::before, .burger .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); } .burger .bars::before { top: 0; } .burger .bars::after { top: 8px; } .burger[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); } .burger[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); } .burger .lbl { display: inline-grid; } .burger .lbl > span { grid-area: 1/1; transition: opacity .3s, transform .45s var(--ease); } .burger .l-close { opacity: 0; transform: translateY(8px); } .burger[aria-expanded="true"] .l-open { opacity: 0; transform: translateY(-8px); } .burger[aria-expanded="true"] .l-close { opacity: 1; transform: none; } .widget { position: fixed; z-index: 60; right: max(16px, var(--gut)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -16px rgba(17,17,20,.55); transition: transform .55s var(--ease), opacity .4s, background-color .3s; text-align: left; } .widget:hover { background: #000; } .widget .mono { width: 46px; height: 46px; font-size: 16px; } .widget .live { position: absolute; left: 41px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--ink); } .widget .t { font-size: 16px; font-weight: 500; line-height: 1.15; display: grid; } .widget .t small { font-size: 13px; color: var(--mute-d); font-weight: 400; } .widget.away { transform: translateY(160%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .2s; } @media (max-width: 860px) { .hdr__in { height: 76px; } .logo svg { width: 100px; } .hdr .btn { min-height: 44px; padding: 0 16px; font-size: 15px; } .burger { height: 44px; } } @media (max-width: 560px) { .widget { right: 12px; left: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px 16px 6px 6px; } .widget .mono { width: 40px; height: 40px; font-size: 14px; } .widget .live { left: 36px; top: 5px; } .widget .t { font-size: 15px; } .widget .t small { display: none; } .burger { padding: 0 16px; } } @media (max-width: 370px) { .burger .bars { display: none; } .logo svg { width: 88px; } .hdr__act { gap: 6px; } } .dark .xcta:focus-visible, .menu .xcta:focus-visible, .hdr[data-tone="dark"] .xcta:focus-visible { outline-color: var(--paper); } @media (max-width: 374px) { /* bardzo wąskie ekrany: CTA w nagłówku jako sama plakietka (nazwa zostaje dla czytników) */ .hdr .xcta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hdr .xcta--sm { padding: 0 8px; } } .pf-pill { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 30; height: 100px; display: flex; justify-content: center; pointer-events: none; } .pf-pill__a { position: absolute; bottom: 20px; pointer-events: auto; display: inline-flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 8px 0 28px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 30px rgba(17,17,20,.22); transition: background-color .3s; } .pf-pill__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--ink); transition: transform .45s var(--ease); } .pf-pill__a:hover .pf-pill__ic, .pf-pill__a:focus-visible .pf-pill__ic { transform: translateX(4px); } .pf-pill__a:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 4px; } @media (max-width: 560px) { .pf-pill__a { min-height: 54px; font-size: 16px; padding-left: 22px; } .pf-pill__ic { width: 40px; height: 40px; } } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .hdr::before { background: rgba(11,11,13,.86); } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .hdr.solid[data-tone="dark"]::before { background: rgba(24,24,28,.9); } .hdr::before { background: rgba(250,249,246,.86); } html[data-theme="dark"] .hdr::before { background: rgba(20,20,22,.86); } html[data-theme="dark"] .hdr.solid[data-tone="dark"]::before { background: rgba(30,30,34,.9); } /* Alpine jasna z żółtym #FCFF00 jako głównym akcentem zamiast różu. Żółty tylko jako wypełnienie (przyciski, kropki, podkreślenia) z granatowym tekstem #0A1030; na jasnym tle akcenty tekstowe są granatowe z żółtym podkreśleniem-markerem. */ /* Wszystkie palety poza Jasną i Ciemną: tło strony to nieruchomy gradient pod treścią (body::before, position: fixed), a sekcje ciemne, „Masz projekt?” i menu mają własny gradient. Górna krawędź gradientu sekcji = jej dotychczasowy kolor, więc pasek nagłówka w przypiętej sekcji obszarów (.hz__head) płynnie się z nim łączy. */ .mode { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--g1); color: var(--ink); transition: background-color .3s, transform .4s var(--ease); } .mode:hover { background: var(--g2); } .mode:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; } .hdr[data-tone="dark"] .mode { background: rgba(255,255,255,.12); color: var(--paper); } .mode__ic { width: 22px; height: 22px; overflow: visible; } .mode__sun, .mode__moon { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease), opacity .35s; } .mode__sun circle { fill: currentColor; } .mode__sun path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .mode__moon { fill: currentColor; } /* w trybie jasnym widać księżyc (przejście do ciemnego), w ciemnym słońce */ .mode[aria-pressed="false"] .mode__sun { opacity: 0; transform: rotate(-90deg) scale(.4); } .mode[aria-pressed="true"] .mode__moon { opacity: 0; transform: rotate(90deg) scale(.4); } .mode:active { transform: scale(.92); } @media (max-width: 560px) { .mode { width: 44px; height: 44px; } .mode__ic { width: 20px; height: 20px; } } @media (max-width: 440px) { .hdr__act { gap: 8px; } .burger { padding: 0 15px; } .burger .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .mode__sun, .mode__moon { transition: none; } } /* 320–440 px: przycisk menu 44×44 z kreskami, długie CTA łamią etykietę zamiast wychodzić za ekran */ html:root body .hdr__act > * { flex: none; } @media (max-width: 440px) { html:root body .burger { width: 44px; height: 44px; padding: 0; justify-content: center; } html:root body .burger .bars { display: block; } } @media (max-width: 360px) { html:root body .hdr__act { gap: 6px; } html:root body .mode { width: 40px; height: 40px; } } /* ==== css/src/06-menu.css ==== */ /* Menu pełnoekranowe */ .menu { position: fixed; inset: 0; z-index: 65; visibility: hidden; pointer-events: none; } .menu.is-open, .menu.is-closing { visibility: visible; } .menu.is-open { pointer-events: auto; } .menu__scrim { position: absolute; inset: 0; background: rgba(17,17,20,.35); opacity: 0; transition: opacity .6s var(--ease); } .menu.is-open .menu__scrim { opacity: 1; } .menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--ink); color: var(--paper); transform: translateX(102%); transition: transform .8s var(--ease-io); overflow: auto; overscroll-behavior: contain; padding: calc(120px + env(safe-area-inset-top, 0px)) clamp(24px, 5vw, 80px) calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: 1fr auto; gap: 48px; } .menu.is-open .menu__panel { transform: none; } /* fokus awaryjny na karcie warstwy (Safari bez fokusu linków): bez obrysu, jak dotąd */ .menu__panel:focus, .dlg__card:focus { outline: none; } .menu__nav li { overflow: hidden; } .menu__nav a { display: flex; align-items: center; gap: 20px; text-decoration: none; font-size: clamp(40px, min(5.4vw, 7.4vh), 76px); font-weight: 500; letter-spacing: calc(-.045em * var(--trk)); line-height: 1.12; transform: translateY(110%); transition: transform .8s var(--ease), color .3s; } .menu.is-open .menu__nav a { transform: none; transition-delay: calc(.22s + var(--i) * .05s); } .menu__nav a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .45s var(--ease); flex: none; } .menu__nav a:hover::before, .menu__nav a[aria-current="page"]::before { transform: scale(1); } .menu__nav a:hover { color: var(--mute-d); } .menu__nav a[aria-current="page"] { color: var(--paper); } .menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; opacity: 0; transform: translateY(16px); transition: opacity .5s .45s, transform .7s .45s var(--ease); } .menu.is-open .menu__foot { opacity: 1; transform: none; } .menu__foot a { text-decoration: none; font-size: 20px; } .menu__foot a:hover { color: var(--red); } .menu__foot .meta { margin-bottom: 8px; } @media (max-width: 860px) { .menu__foot { grid-template-columns: 1fr; } } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) :is(.menu__scrim, .dlg__scrim) { background: rgba(0,0,0,.6); } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .menu__panel { box-shadow: -1px 0 0 rgba(255,255,255,.08); } /* 2. Menu: zaokrąglony panel odsunięty od krawędzi ekranu, rozmyte tło strony */ .menu__scrim { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .menu__panel { top: 12px; right: 12px; bottom: 12px; width: min(620px, calc(100% - 24px)); border-radius: 28px; transform: translateX(calc(100% + 24px)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.55); padding: calc(104px + env(safe-area-inset-top, 0px)) clamp(24px, 4vw, 56px) calc(28px + env(safe-area-inset-bottom, 0px)); } .menu__lbl { margin: 0 0 14px; opacity: .6; } .menu__nav a { font-size: clamp(36px, min(4.6vw, 6.8vh), 64px); } .menu__foot { padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); } .menu__foot .xcta-shell, .menu__foot .xcta { width: 100%; } @media (max-width: 560px) { .menu__panel { top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); border-radius: 22px; padding-top: calc(92px + env(safe-area-inset-top, 0px)); } } .menu__nav a { font-family: var(--fh); } /* menu: etykiety „Nawigacja”, „Napisz”, „Zadzwoń” na ciemnym panelu (było 1,9–3,3:1) */ html:root body .menu__panel .meta { color: #A3A3AD; opacity: 1; } /* ==== css/src/07-dialog.css ==== */ /* Panel „Opowiedz o projekcie”: okno, zakładki Napisz / Zaproponuj termin */ .dlg { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; display: grid; place-items: center; padding: 24px; } .dlg.is-open, .dlg.is-closing { visibility: visible; } .dlg.is-open { pointer-events: auto; } .dlg__scrim { position: absolute; inset: 0; background: rgba(17,17,20,.55); opacity: 0; transition: opacity .45s var(--ease); } .dlg.is-open .dlg__scrim { opacity: 1; } .dlg__card { position: relative; width: min(1120px, 100%); max-height: min(760px, calc(100dvh - 48px)); background: var(--paper); color: var(--ink); border-radius: var(--r); display: grid; grid-template-rows: auto 1fr; overflow: hidden; opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .45s var(--ease), transform .6s var(--ease); box-shadow: 0 40px 100px -30px rgba(0,0,0,.5); } .dlg.is-open .dlg__card { opacity: 1; transform: none; } .dlg__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--g2); } .dlg__bar .tabs { display: flex; gap: 6px; } .tab { border: 0; cursor: pointer; background: transparent; height: 42px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--mute); } .tab:hover { color: var(--ink); background: var(--g1); } .tab[aria-selected="true"] { background: var(--ink); color: var(--paper); } .dlg__body { overflow: auto; overscroll-behavior: contain; min-height: 0; } .mob-back { display: none; } .write { padding: 32px clamp(24px, 4vw, 56px); display: grid; gap: 24px; max-width: 860px; } .write h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: calc(-.035em * var(--trk)); line-height: 1.05; } @media (max-width: 860px) { /* panel rezerwacji: sekwencja kroków */ .dlg { padding: 0; place-items: stretch; } .dlg__card { width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(40px); } .mob-back { display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; font-weight: 600; font-size: 15px; cursor: pointer; } .write { padding: 22px 20px; } } @media (max-width: 560px) { .dlg__bar { padding: 10px 12px 10px 14px; } .tab { padding: 0 12px; font-size: 14px; } } /* formularz na białym tle (panel, kontakt): te same komponenty */ .write { gap: 28px; max-width: 760px; } .write__head { display: grid; gap: 8px; } .write__head p { color: var(--mute); } #talk .dlg__card { height: min(780px, calc(100dvh - 48px)); width: min(1120px, 100%); } #talk .dlg__bar { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 12px; padding: 14px 16px; } #talk .dlg__bar .tabs { grid-column: 2; justify-self: center; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--g1); box-shadow: inset 0 0 0 1px var(--g2); } #talk .dlg__bar .x-btn { grid-column: 3; } #talk .tab { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } #talk .tab:hover { background: var(--paper); color: var(--ink); } #talk .tab[aria-selected="true"] { background: var(--red-deep); color: var(--paper); box-shadow: 0 8px 18px -10px rgba(214,31,61,.75); } #talk .tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } #talk .write { max-width: 760px; margin-inline: auto; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 4vw, 48px) 48px; gap: 32px; text-align: center; } #talk .write__head { justify-items: center; gap: 10px; } #talk .write__head h2 { font-size: clamp(32px, 3.2vw, 46px); } #talk .write__head p { font-size: 17px; } @media (max-width: 860px) { #talk .dlg__card { height: 100dvh; } #talk .write { padding: 28px 20px 40px; gap: 26px; } } @media (max-width: 560px) { #talk .dlg__bar { grid-template-columns: 40px minmax(0, 1fr) 46px; padding: 10px 12px; gap: 8px; } #talk .tab { height: 40px; padding: 0 14px; font-size: 14px; } } /* Panel: nagłówek bliżej linii paska */ #talk .write { gap: 28px; } #talk .write__head { gap: 6px; } /* ==== css/src/08-booking.css ==== */ /* Rezerwacja: kalendarz, godziny, dane, podsumowanie */ /* rezerwacja */ .bk { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(200px, 250px); min-height: 100%; } .bk__info { padding: 32px 28px; border-right: 1px solid var(--g2); display: grid; gap: 20px; align-content: start; } .bk__brand { display: flex; align-items: center; gap: 12px; } .bk__brand .mono { width: 48px; height: 48px; font-size: 17px; } .bk__brand p { font-size: 15px; color: var(--mute); line-height: 1.3; } .bk__brand b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; } .bk__info h2 { font-size: 30px; font-weight: 500; letter-spacing: calc(-.03em * var(--trk)); line-height: 1.08; } .bk__info > p { color: var(--mute); font-size: 16px; } .bk__facts { display: grid; gap: 10px; font-size: 15px; font-weight: 500; } .bk__facts li { display: flex; gap: 10px; align-items: center; } .bk__facts svg { width: 18px; height: 18px; color: var(--mute); flex: none; } .demo-note { font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--red-soft); border-radius: 12px; padding: 12px 14px; } .demo-note b { color: var(--red-ink); font-weight: 600; } .bk__alt { font-size: 15px; } .bk__alt button { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .bk__alt button:hover { color: var(--red-ink); } .bk__cal { padding: 32px 28px; display: grid; gap: 18px; align-content: start; } .bk__h { font-size: 18px; font-weight: 600; letter-spacing: calc(-.01em * var(--trk)); } .cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cal__month { font-size: 18px; font-weight: 500; text-transform: none; } .cal__nav { display: flex; gap: 6px; } .cal__nav button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--g1); cursor: pointer; display: grid; place-items: center; transition: background-color .2s; } .cal__nav button:hover:not([disabled]) { background: var(--g2); } .cal__nav button[disabled] { opacity: .35; cursor: default; } .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; } .cal__dow { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mute); padding-bottom: 6px; text-transform: uppercase; } .day { aspect-ratio: 1; max-width: 56px; width: 100%; margin-inline: auto; border: 0; border-radius: 50%; font-size: 16px; font-variant-numeric: tabular-nums; position: relative; background: transparent; color: #9A9AA3; cursor: default; display: grid; place-items: center; } .day.av { background: var(--red-soft); color: var(--red-ink); font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, transform .3s var(--ease); } .day.av:hover { background: #FAD3DA; } .day[aria-pressed="true"] { background: var(--red-deep); color: var(--paper); } .day.today::after { content: ""; position: absolute; bottom: 14%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; } .day.out { visibility: hidden; } .cal__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--mute); } .cal__legend span { display: inline-flex; gap: 8px; align-items: center; } .cal__legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--red-soft); box-shadow: inset 0 0 0 1px #F5B9C4; } .cal__legend i.na { background: var(--g1); box-shadow: none; } .bk__times { padding: 32px 24px; border-left: 1px solid var(--g2); display: grid; gap: 14px; align-content: start; } .bk__day { font-size: 16px; font-weight: 600; } .times { display: grid; gap: 8px; max-height: 420px; overflow: auto; padding: 2px; } .slot { display: grid; grid-template-columns: 1fr; gap: 6px; } .time { height: 50px; border-radius: 12px; border: 1.5px solid var(--g2); background: var(--paper); cursor: pointer; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s, color .2s; } .time:hover { border-color: var(--ink); } .time[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .slot .next { height: 50px; border-radius: 12px; border: 0; background: var(--red-deep); color: var(--paper); font-weight: 600; cursor: pointer; animation: pop .45s var(--ease); } .slot .next:hover { background: var(--ink); } .times__empty { font-size: 15px; color: var(--mute); } .bk__step { padding: 32px clamp(24px, 3vw, 40px); display: grid; gap: 22px; align-content: start; grid-column: 2 / -1; } .chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--g1); } .chosen p { font-weight: 600; } .chosen small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; } .summary { display: grid; gap: 18px; } .summary__date { font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: calc(-.03em * var(--trk)); line-height: 1.1; } .summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 16px; } .summary dt { color: var(--mute); } .summary dd { font-weight: 500; overflow-wrap: anywhere; } @media (max-width: 1100px) { .bk { grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(180px, 220px); } .bk__info, .bk__cal, .bk__times { padding: 26px 20px; } } @media (max-width: 860px) { .bk { grid-template-columns: 1fr; } .bk__info { border-right: 0; border-bottom: 1px solid var(--g2); padding: 22px 20px; gap: 14px; } .bk__purpose { display: none; } .demo-note { font-size: 12.5px; padding: 10px 12px; } .bk__info h2 { font-size: 26px; } .bk__facts { grid-template-columns: 1fr 1fr; } .bk__times { border-left: 0; padding: 22px 20px; } .bk__cal { padding: 22px 20px; } .bk[data-step="day"] .bk__times { display: none; } .bk[data-step="time"] .bk__cal, .bk[data-step="time"] .bk__info { display: none; } .bk__step { grid-column: 1; padding: 22px 20px; } .bk[data-step="details"] .bk__info, .bk[data-step="summary"] .bk__info { display: none; } .times { max-height: none; } } @media (max-width: 370px) { .bk__facts { grid-template-columns: 1fr; } } .slot.sel { grid-template-columns: 1fr 1fr; } /* Rezerwacja: alternatywa zawsze widoczna */ .bk__alt a { font-weight: 600; text-underline-offset: 4px; } .bk__alt a:hover { color: var(--red-ink); } /* Strona rezerwacji Google w panelu (BOOKING.embed, oficjalne osadzenie „Inline booking page”); bez embed nieużywane. */ .bk[data-step="embed"] { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } .bk__embed { gap: 14px; padding: 20px clamp(16px, 2vw, 28px); } .bk__embar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 15px; } .bk__embar button, .bk__embar a { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .bk__embar button:hover, .bk__embar a:hover { color: var(--red-ink); } .bk__embed iframe { display: block; width: 100%; height: min(720px, calc(100dvh - 310px)); min-height: 460px; border: 0; border-radius: 14px; background: #fff; } @media (max-width: 860px) { .bk[data-step="embed"] { grid-template-columns: 1fr; } .bk[data-step="embed"] .bk__info { display: none; } .bk__embed { padding: 14px 12px; } .bk__embed iframe { height: calc(100dvh - 190px); min-height: 460px; border-radius: 10px; } } /* Telefon: krótszy wstęp do rezerwacji (krótszy opis, mniejsze odstępy) i kalendarz na całą wolną wysokość panelu, bez przewijania panelu i ramki naraz (przewija się tylko strona Google w ramce). Desktop bez zmian. */ .bk__less { display: none; } @media (max-width: 860px) { .dlg__body:has(.bk[data-step="embed"]) { overflow: hidden; display: flex; flex-direction: column; } .dlg__body:has(.bk[data-step="embed"]) > [data-pane="book"] { flex: 1; min-height: 0; display: flex; flex-direction: column; } .bk[data-step="embed"] { flex: 1; min-height: 0; display: flex; flex-direction: column; } .bk[data-step="embed"] .bk__embed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; } .bk[data-step="embed"] .bk__embed iframe { flex: 1; height: auto; min-height: 0; } } @media (max-width: 560px) { .bk__more { display: none; } .bk__less { display: inline; } .bk__info { padding: 16px 20px; gap: 10px; } .bk__facts { gap: 8px; } .bk__step { padding: 18px 20px 24px; gap: 14px; } .bk__step .summary { gap: 12px; } } /* Cal.com w panelu (BOOKING.provider "cal"). Ramka Cal.com sama dopasowuje wysokość do treści, więc przewija się tylko panel (jeden obszar przewijania), a pasek „Wróć” zostaje przyklejony u góry. */ .bk[data-step="cal"] { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } .bk__calbox { gap: 0; padding: 0 0 24px; align-content: start; } .bk__calbox .bk__embar { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 14px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--g2); } .bk__calstat:empty { display: none; } .bk__calstat { margin: 14px clamp(16px, 2vw, 28px) 0; padding: 12px 14px; border-radius: 10px; background: var(--red-soft); font-size: 15px; font-weight: 500; } .bk__calload { margin: 16px clamp(16px, 2vw, 28px) 0; color: var(--mute); font-size: 15px; } .bk__calload a { color: inherit; font-weight: 600; text-underline-offset: 4px; } .bk__calload.is-err { color: var(--ink); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--g2); background: var(--g1); } .bk__calhost { min-width: 0; padding: 8px clamp(4px, 1vw, 12px) 0; } .bk__calhost iframe { max-width: 100%; } @media (max-width: 860px) { .bk[data-step="cal"] { grid-template-columns: 1fr; } .bk[data-step="cal"] .bk__info { display: none; } .bk__calbox .bk__embar { padding: 10px 16px; } .bk__calhost { padding: 4px 0 0; } } /* ==== css/src/09-media.css ==== */ /* Kadry obrazów i filmów (.media), sterowanie wideo */ .media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--g1); aspect-ratio: var(--ar, 16 / 10); isolation: isolate; } .media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; } .media > video { opacity: 0; } .media.playing > video { opacity: 1; } .media__ph { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: clamp(18px, 2.4vw, 36px); background: var(--g1); color: var(--ink); overflow: hidden; } .media__ph::after { content: ""; position: absolute; right: -8%; bottom: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--red); opacity: .9; transition: transform 1.2s var(--ease); } .media__ph .k { position: relative; z-index: 1; font-size: 14px; font-weight: 500; opacity: .75; } .media__ph b { position: relative; z-index: 1; align-self: end; font-size: clamp(40px, 7vw, 120px); font-weight: 500; letter-spacing: calc(-.055em * var(--trk)); line-height: .9; } .media__ph .s { position: relative; z-index: 1; font-size: 13px; opacity: .7; } .media__ph.c-ink { background: var(--ink); color: var(--paper); } .media__ph.c-red { background: var(--red); color: var(--ink); } .media__ph.c-red::after { background: var(--paper); } .media__ph.c-soft { background: var(--red-soft); } .media__ph.c-grey { background: var(--g2); } .media__ph.c-grey::after { background: var(--ink); width: 36%; } .media.loaded .media__ph { display: none; } .media .tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-size: 13px; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.88); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 999px; } /* dodatki: sterowanie wideo, wybrany termin */ .media__pp { position: absolute; right: 14px; top: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.9); display: grid; place-items: center; } .media__pp span { width: 12px; height: 12px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); } .media__pp.paused span { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ink); border-right: 0; margin-left: 3px; } /* materiały pionowe w poziomym kadrze, galeria projektu */ .media.contain > img, .media.contain > video { object-fit: contain; } .media.contain.c-ink { background: var(--ink); } .media.contain.c-red { background: var(--red); } .media.contain.c-soft { background: var(--red-soft); } .media.contain.c-grey { background: var(--g2); } /* Film zakrywa kadr z zapasem 1 px, a plakat znika, gdy film gra: przy jasnych klatkach nie prześwituje ciemny plakat ani tło na krawędziach. */ .media > video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); } .media.playing > img { opacity: 0; } /* kadr dopasowany (contain) w tonie „ink”: w trybie ciemnym --ink jest jasne, więc pionowy materiał dostawał białe pasy po bokach. Ton ink zostaje ciemny w obu motywach. */ html[data-theme="dark"] .media.contain.c-ink { background: #18181C; } /* ==== css/src/10-capsule.css ==== */ /* Kapsuła w hero (Thinking Capsule) i motyw kadru */ .kadr { position: relative; isolation: isolate; } /* Desigra · Thinking Capsule Rozmiar w em, więc kapsuła skaluje się z nagłówkiem i nie zmienia line-height. --dsg-delay: opóźnienie wejścia względem nagłówka (domyślnie 300 ms). */ .dsg-capsule{ --dsg-delay:.3s; --dsg-w:2.08em; --dsg-h:.833em; --dsg-y:.035em; display:inline-block; flex:none; position:relative; width:var(--dsg-w); height:var(--dsg-h); border-radius:999px; overflow:hidden; background:#08070d; vertical-align:middle; transform:translateY(var(--dsg-y)); isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(#fff,#000); /* Safari: przycięcie wideo do zaokrągleń */ pointer-events:auto; cursor:default; user-select:none; animation:dsg-in .8s cubic-bezier(.22,1,.36,1) var(--dsg-delay) backwards; } .dsg-capsule > video, .dsg-capsule > canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; } .dsg-capsule > canvas{opacity:0; transition:opacity .35s ease} .dsg-capsule.is-gl > canvas{opacity:1} @media (hover:hover) and (pointer:fine) { .dsg-capsule{transition:transform .3s cubic-bezier(.22,1,.36,1)} .dsg-capsule:hover{transform:translateY(calc(var(--dsg-y) - 2px))} } @media (prefers-reduced-motion:reduce) { .dsg-capsule{animation:none; transition:none} .dsg-capsule:hover{transform:translateY(var(--dsg-y))} } /* ==== css/src/11-cursor.css ==== */ /* Kursor dla precyzyjnego wskaźnika */ .cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, opacity .3s; display: grid; place-items: center; opacity: 0; } .cursor span { color: var(--paper); font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .2s; white-space: nowrap; } .cursor.on { opacity: 1; } .cursor.big { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--red-deep); } .cursor.big span { opacity: 1; } .cursor.hide { opacity: 0; } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* Kursor „Zobacz” na kartach z obrazem: kapsuła-lupa. Otwiera się z punktu, pokazuje powiększony (×2,2) detal pod wskaźnikiem, przechyla się w stronę ruchu, a w dolnej pigułce przewija się „Zobacz”. Nad podpisem karty lupa zamyka się do samej pigułki. */ .cursor__lens { position: absolute; left: 50%; top: 50%; width: 196px; height: 120px; margin: -60px 0 0 -98px; border-radius: 999px; overflow: hidden; background: var(--red-deep); opacity: 0; clip-path: inset(50% 50% 50% 50% round 999px); transform: rotate(var(--tilt, 0deg)); transition: clip-path .6s cubic-bezier(.22,1,.36,1), opacity .25s; } .cursor__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), inset 0 0 26px rgba(0,0,0,.28); } .cursor__lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; } .cursor__x { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; mix-blend-mode: difference; transition: opacity .3s; } .cursor__x::before, .cursor__x::after { content: ""; position: absolute; background: #fff; } .cursor__x::before { left: 7px; top: 0; width: 2px; height: 16px; } .cursor__x::after { top: 7px; left: 0; width: 16px; height: 2px; } .cursor__tag { position: absolute; left: 50%; bottom: 10px; width: 100px; height: 28px; margin-left: -50px; border-radius: 999px; background: var(--red-deep); color: #fff; overflow: hidden; display: flex; align-items: center; font: 600 13px/1 var(--f); white-space: nowrap; z-index: 1; } .cursor__tag em { font-style: normal; flex: none; padding-right: .3em; animation: cur-tick 3.4s linear infinite; } .cursor.lens { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: transparent; } .cursor.lens .cursor__lens { opacity: 1; clip-path: inset(0 0 0 0 round 999px); } .cursor.lens.cap .cursor__lens { clip-path: inset(82px 48px 10px 48px round 999px); } .cursor.lens.cap canvas, .cursor.lens.cap .cursor__x { opacity: 0; } .cursor__lbl { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 16px; border-radius: 999px; background: var(--red); color: #111114; font: 600 14px/1 var(--fb, Inter), system-ui, sans-serif; white-space: nowrap; transform-origin: 0 0; scale: .08; opacity: 0; rotate: calc(var(--tilt, 0deg) * .35); transition: scale .35s var(--ease), opacity .25s; } .cursor__lbl svg { width: 12px; height: 12px; rotate: -45deg; } .cursor.lbl { background: transparent; } .cursor.lbl .cursor__lbl { scale: 1; opacity: 1; } /* Pigułka „Zobacz projekt”: siedzi obok wskaźnika (nie pod nim), rośnie z kropki miękko i bez przestrzelenia, znika szybciej niż się pojawia. Pochylenie liczy JS (najwyżej 3°). */ .cursor__lbl { left: 14px; top: 14px; rotate: var(--lt, 0deg); will-change: scale, opacity; transition: scale .42s cubic-bezier(.22, 1, .36, 1), opacity .22s ease-out; } .cursor:not(.lbl) .cursor__lbl { transition: scale .22s ease-in, opacity .16s ease-in; } .cursor.lbl { will-change: transform; } /* pigułka „Zobacz projekt”: na czerwonych i pomarańczowych kadrach zlewała się z obrazem. Biała obwódka 2 px i cień oddzielają ją od każdego materiału (biel na czerwieni 3,6:1). */ html:root body .cursor__lbl { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(17, 17, 20, .16), 0 12px 28px -10px rgba(17, 17, 20, .5); } /* ==== css/src/12-intro.css ==== */ /* Intro: hasło na środku ekranu */ /* Paleta ze zdjęć bolidu A525: granat, elektryczny błękit, róż BWT, żółć. */ /* Jasna odmiana palety A525: chłodna złamana biel, granat jako tekst i sekcje ciemne, róż BWT na przyciskach, żółć tylko na granacie (na bieli ma za mały kontrast). */ /* Intro: hasło na środku ekranu odjeżdża na swoje miejsce w hero */ .intro { position: fixed; inset: 0; z-index: 300; background: var(--paper); cursor: pointer; transition: opacity .6s var(--ease); } .intro.out { opacity: 0; pointer-events: none; } .intro .dsg-capsule > canvas { display: none; } /* 3. Intro: hasło wjeżdża wersami z maski, tło znika w trakcie lotu, a klon ląduje dokładnie na miejscu nagłówka (bez drugiego wejścia i bez przenikania). */ html .intro, html[data-theme] .intro { background: none !important; } .intro::before { content: ""; position: absolute; inset: 0; background: var(--grad-page, linear-gradient(var(--paper), var(--paper))), var(--paper); transition: opacity 1s cubic-bezier(.65,0,.35,1); } .intro.fly::before { opacity: 0; transition-duration: var(--fly, 1s); } .intro.out { opacity: 0; transition: opacity .3s; } /* ==== css/src/13-hero.css ==== */ /* Hero strony głównej i sekwencja nagłówka */ .hero-t { font-size: var(--fs-hero); font-weight: 600; letter-spacing: calc(-0.05em * var(--trk)); line-height: .93; } .lead { font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.55; max-width: 32em; text-wrap: pretty; color: #26262C; } .dark .lead { color: #E9E9EC; } .hero { padding-top: clamp(140px, 15vw, 210px); } .hero__top { align-items: end; row-gap: 40px; } .hero h1 { grid-column: 1 / -1; } .hero h1 .line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .hero h1 .in { display: inline-flex; align-items: center; gap: .18em; } .hero__desc { grid-column: 1 / span 5; } .hero__cta { grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-self: end; } .hero__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 15px; } @media (max-width: 1100px) { .hero__desc { grid-column: 1 / span 7; } .hero__cta { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 860px) { .hero__desc { grid-column: 1 / -1; } } @media (max-width: 560px) { .hero { padding-top: 116px; } .hero-t { font-size: min(13.4vw, 60px); letter-spacing: calc(-.05em * var(--trk)); } .hero__cta .btn { flex: 1 1 auto; } .hero__cap { flex-direction: column; gap: 4px; } } .hero h1 .in.reveal { display: inline-flex; } .hero__top { position: relative; } .hero__cta { align-items: center; gap: 14px 18px; } :is(.hero-t, .h1, .h2, .h3, .write h2, .work__t, .of__btn .t, .step h3, .end h2, .idx .nm, .cs h1, .next .nm, .fcard h3, .principle h3, .cv__name, .cv-approach h3, .mf__t, .ofx__t, .ps__t, .pr__t, .pr-step h3, .sf__q, .pfo__cap b) { font-family: var(--fh); } .lead { font-weight: 450; } .hero h1 .line { padding-bottom: .2em; margin-bottom: -.2em; } .hero { padding-bottom: clamp(24px, 3vw, 48px); } .hero + .pf-zone .pf-sec { padding-top: clamp(40px, 5vw, 80px); } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .lead { color: #D2D2D8; } /* osadzenie w nagłówku Desigry */ .hero h1 .in:has(.dsg-capsule) { white-space: nowrap; } @media (max-width: 560px) { .hero-t .dsg-capsule { --dsg-w: 1.9em; --dsg-h: .76em; } } html .hero-t { font-weight: 600; } html :is(.hero-t, .h1, .h2, .h3, .write h2, .work__t, .of__btn .t, .step h3, .end h2, .idx .nm, .cs h1, .next .nm, .fcard h3, .principle h3, .cv__name, .cv-approach h3, .mf__t, .ofx__t, .ps__t, .pr__t, .pr-step h3, .sf__q, .pfo__cap b) { --trk: .55; } html.intro-on .hero-t { cursor: pointer; } /* display: tylko hero */ html:root body .hero-t { font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); } /* tekst */ html:root body .lead { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 400; max-width: 34em; } @media (max-width: 560px) { /* hero: osobna kompozycja w czterech wersach, bez dopasowywania w JS */ html:root body .hero-t { font-size: min(14.4vw, 60px); line-height: .97; } html:root body .hero h1 .in:has(.dsg-capsule) { display: block; white-space: normal; } html:root body .hero-t .dsg-capsule { --dsg-w: 1.7em; --dsg-h: .72em; display: inline-block; vertical-align: -.06em; margin-right: .16em; } } /* ==== css/src/14-work.css ==== */ /* Realizacje: karty, filtr, układ Editorial, mini lista */ .work:hover .media__ph::after { transform: translate(-6%, -8%) scale(1.05); } .pf .p3 .media__ph b, .next .media__ph b { font-size: clamp(32px, 4vw, 64px); } /* portfolio */ .pf__head { align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 96px); } .pf__head h2 { grid-column: 1 / span 7; } .pf__head .side { grid-column: 9 / -1; justify-self: end; display: grid; gap: 14px; justify-items: end; text-align: right; } .pf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(80px, 9vw, 150px); } .pf > * { min-width: 0; } /* 3.0: karta i układ z wersji 2.1, zaokrąglenia kadrów z wersji 9 (--r) */ .pf-sec { padding-bottom: clamp(128px, 13vw, 208px); } .pf { row-gap: clamp(72px, 8vw, 136px); } .work { display: grid; gap: 18px; text-decoration: none; color: inherit; align-self: start; } .work .media > img, .work .media > video { transform: scale(1.001); transform-origin: 50% 40%; } .work:hover .media > img, .work:hover .media > video, .work:focus-visible .media > img, .work:focus-visible .media > video { transform: scale(1.03) translateY(-.8%); } .work .media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,17,20,0) 55%, rgba(17,17,20,.2)); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; } .work:hover .media::before, .work:focus-visible .media::before { opacity: 1; } .work:focus-visible { outline-offset: 8px; border-radius: var(--r); } .work__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 6px; align-items: baseline; } .work__t { font-size: clamp(22px, 1.9vw, 30px); font-weight: 400; letter-spacing: calc(-.02em * var(--trk)); line-height: 1.1; transition: transform .6s var(--ease); } .work:hover .work__t, .work:focus-visible .work__t { transform: translateX(5px); } .pf .p1 { grid-column: 1 / -1; } .pf .p1 .media { --ar: 16 / 7.6; } .pf .p1 .work__t { font-size: clamp(26px, 2.4vw, 38px); } .pf .p2 { grid-column: 1 / span 7; grid-row: 2; } .pf .p2 .media { --ar: 16 / 11; } .pf .p3 { grid-column: 9 / -1; grid-row: 2; margin-top: clamp(96px, 13vw, 220px); } .pf .p3 .media { --ar: 3 / 4; } .pfl { display: grid; gap: clamp(88px, 10vw, 160px); padding-bottom: var(--sec); } .pfl .work .media { --ar: 16 / 8.6; } .pfl .work:nth-child(even) { width: 82%; justify-self: end; } .pfl .work:nth-child(even) .media { --ar: 16 / 10; } .pfl .work.portrait { width: min(640px, 100%); } .pfl .work.portrait .media { --ar: 3 / 4; } @media (max-width: 860px) { .pf { row-gap: 64px; } .pf .p1, .pf .p2, .pf .p3 { grid-column: 1 / -1; grid-row: auto; margin-top: 0; } .pf .p1 .media { --ar: 4 / 3.4; } .pf .p2 .media { --ar: 4 / 3; } .pf .p3 { width: 76%; justify-self: end; } .work__cap { grid-template-columns: 1fr; } .pfl .work:nth-child(even) { width: 100%; } } @media (max-width: 560px) { .pf .p3 { width: 100%; } } @media (max-width: 860px) { .pfl .work.portrait { width: 100%; } } @media (max-width: 560px) { .hero__cta .xcta-shell { flex: 1 1 auto; } .hero__cta .xcta { width: 100%; } } /* 1. Ekspansja ostatniej realizacji. Bez JS / przy ograniczonym ruchu / na telefonie: zwykły układ (stan końcowy). Klasa .pfo--live włącza scenę. */ .pf-sec { padding-bottom: clamp(72px, 7vw, 120px); } /* Motyw kadru Desigry: kapsuła otwiera się w pełny kadr (od detalu do całości). Ten sam ruch przy wejściu realizacji, zmianie kadru w ofercie i zdjęciu osoby. */ .motion .work.rv .media { clip-path: inset(0 round var(--r)); transition: clip-path var(--t-3) var(--ease); } .motion .work.rv.pre .media { clip-path: inset(9% 12% round 999px); } /* „Zobacz wszystkie projekty”: pigułka przypięta do dolnej krawędzi ekranu, dopóki widać realizacje; po ich końcu zostaje pod ostatnim kadrem. */ .pf-zone { position: relative; } /* Bryksy jako pierwsza realizacja: pełny kadr filmu 16:9, na telefonie 4:5 */ .pf .p1 .media { --ar: 16 / 9; } @media (max-width: 860px) { .pf .p1 .media { --ar: 4 / 5; } } .work__cap { display: grid; grid-template-columns: 1fr; gap: 10px; } .work__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .work__t, .pf .p1 .work__t { font-size: clamp(22px, 1.9vw, 30px); } .work__tags { display: flex; flex-wrap: wrap; gap: 6px; } .work__tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--g1); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; } .work__line { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.35; color: var(--mute); max-width: 32em; } .work__go-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g3); color: var(--ink); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); } .work__go-ic svg { width: 16px; height: 16px; transition: transform .45s var(--ease); } .work:hover .work__go-ic, .work:focus-visible .work__go-ic { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); color: var(--paper); } .work:hover .work__go-ic svg { transform: translateX(3px); } .work:hover .work__t, .work:focus-visible .work__t { transform: none; } @media (max-width: 860px) { .work__go-ic { width: 36px; height: 36px; } } /* SameTesty: zwykła karta na pełną szerokość (16:9), od razu widoczna w całości, z takim samym podpisem jak karty wyżej (zamiast rozszerzanego kadru .pfo). */ .pf .pw4 { grid-column: 1 / -1; grid-row: auto; } .pf .pw4 .media { --ar: 16 / 9; } @media (max-width: 860px) { .pf .pw4 { grid-column: 1 / -1; width: 100%; } .pf .pw4 .media { --ar: 16 / 9; } } .motion .pf .pw4.rv.pre .media { clip-path: inset(0 round var(--r)); } /* 3.8 · Filtr realizacji */ .pff { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 3vw, 40px); } .pff__b { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 18px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--g2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); } .pff__b:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .pff__n { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--g1); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .pff__b[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; } .pff__b[aria-pressed="true"] .pff__n { background: var(--red-deep); color: var(--paper); } .pff__b:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; } .pfl [hidden] { display: none !important; } /* O mnie: wybrane prace jako małe kafelki, trzy w rzędzie */ .mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .mini__a { display: grid; gap: 14px; text-decoration: none; color: var(--ink); } .mini__m { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--g1); } .mini__m img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .mini__a:hover .mini__m img { transform: scale(1.04); } .mini__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mini__t { font-family: var(--fh); font-weight: 700; font-size: 21px; letter-spacing: -.02em; } .mini__tag { font-size: 13px; color: var(--mute); white-space: nowrap; } .mini__l { font-size: 15px; color: var(--mute); margin-top: -8px; } .mini__a:hover .mini__t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } @media (max-width: 860px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mini { grid-template-columns: 1fr; } } .work__tags { align-items: center; } /* sekcja: nagłówki strony głównej */ html:root body :is(.pf-sec .h2, .pw__t, .hz__t, .gx__t, .end h2) { font-family: var(--fh); font-size: var(--t-sec); font-weight: var(--w-sec); line-height: var(--lh-sec); letter-spacing: var(--tr-sec); } html:root body [data-pf-scope] .pfl { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(48px, 5vw, 80px); } html:root body [data-pf-scope] .pfl .work { width: 100%; justify-self: stretch; } html:root body [data-pf-scope] .pfl .work .media { --ar: 4 / 3; } html:root body .pff { position: relative; } @media (max-width: 860px) { html:root body [data-pf-scope] .pfl { grid-template-columns: minmax(0, 1fr); } html:root body .pff { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); } html:root body .pff::-webkit-scrollbar { display: none; } html:root body .pff__b { flex: none; } } /* Obraz nie powiększa się. Gra wideo w kadrze, w rogu zapalają się kafelki w kolorze akcentu, tytuł dostaje podkreślenie, a za wskaźnikiem z opóźnieniem płynie etykieta „Zobacz projekt”. */ html:root body .work:is(:hover, :focus-visible) .media > :is(img, video) { transform: none; } html:root body .work__t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); } html:root body .work:is(:hover, :focus-visible) .work__t { background-size: 100% 2px; transform: none; } .work:is(:hover, :focus-visible) .px i { animation: px-in .7s steps(1, end) var(--d, 0s) both; } .work:is(:hover, :focus-visible) .px i.f { animation: px-in .7s steps(1, end) var(--d, 0s) both, px-flick 2.4s steps(1, end) calc(var(--d, 0s) + .8s) infinite; } /* przełącznik wariantów na stronie Realizacje (panel testowy) */ html:not([data-pfv="a"]) main [data-pf-scope] .pfl { display: none; } html[data-pfv="a"] main [data-pf-scope] .pfl { margin-top: clamp(24px, 3vw, 40px); } html:not([data-pfv="b"]) main [data-pf-scope] .pfl { display: grid; margin-top: clamp(24px, 3vw, 40px); } html[data-pfv="b"] main [data-pf-scope] .pfl { display: none; } .work:is(:hover, :focus-visible) .px i { animation: px-in .6s steps(1, end) var(--d, 0s) both; } .work:is(:hover, :focus-visible) .px i.f { animation: px-in .6s steps(1, end) var(--d, 0s) both, px-flick 3.2s steps(1, end) calc(var(--d, 0s) + .9s) infinite; } @media (min-width: 861px) { /* 3.21-END */ /* 3.22-START · (3.24: kolaż .hx usunięty, zastąpiony hero .hs w bloku 3.24) */ /* Realizacje (karty A): ostatnia widoczna karta na nieparzystym miejscu zajmuje całą szerokość, żeby nie stała sama w wierszu (liczy się po filtrze). */ html:root body [data-pf-scope] .pfl .work:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])) { grid-column: 1 / -1; } html:root body [data-pf-scope] .pfl .work:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])) .media { --ar: 2 / 1; } } /* 3.24-END */ /* 3.25-START */ /* Realizacje w układzie Editorial (do porównania w panelu, domyślnie karty A z 3.24) i jeden szablon case study dla wszystkich projektów. Wszystkie realizacje to na tym etapie dane demo: układ nie zależy od konkretnych nazw ani kadrów. */ main [data-pf-scope] .ped { display: none; } html[data-pfv="c"] main [data-pf-scope] .pfl { display: none; } html[data-pfv="c"] main [data-pf-scope] .ped { display: grid; } .ped { order: 2; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(72px, 8vw, 136px); margin-top: clamp(32px, 4vw, 56px); padding-bottom: var(--sec); align-items: start; } .ped > .work { grid-column: 1 / -1; width: 100%; min-width: 0; gap: 18px; } .ped .media { --ar: 4 / 3; } .ped [data-slot="l7"] { grid-column: 1 / span 7; } .ped [data-slot="r5"] { grid-column: 8 / -1; margin-top: clamp(56px, 9vw, 152px); } .ped [data-slot="r5"] .media { --ar: 1 / 1; } .ped [data-slot="pano"] .media { --ar: 21 / 9; } .ped [data-slot="l5"] { grid-column: 1 / span 5; } .ped [data-slot="l5"] .media { --ar: 1 / 1; } .ped [data-slot="r7"] { grid-column: 6 / -1; align-self: end; } .ped [data-slot="r7"] .media { --ar: 16 / 10; } /* wyróżniona realizacja: kadr 8 kolumn, opis 4 kolumny wyrównany do dołu kadru; co druga w odbiciu lustrzanym */ .ped [data-slot="feat"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .ped [data-slot="feat"] > .media { grid-column: 1 / span 8; grid-row: 1; --ar: 3 / 2; } .ped [data-slot="feat"] > .ed__cap { grid-column: 9 / -1; grid-row: 1; } .ped [data-slot="feat"][data-flip] > .media { grid-column: 5 / -1; } .ped [data-slot="feat"][data-flip] > .ed__cap { grid-column: 1 / span 4; } .ped [data-slot="feat"] .work__head { flex-direction: column; align-items: flex-start; gap: 14px; } html:root body .ped [data-slot="feat"] .work__t { font-size: clamp(26px, 2.5vw, 40px); } /* podpisy: ten sam układ w każdym miejscu rytmu; długie nazwy łamią się w słowach, nie wychodzą poza kolumnę */ .ed__cap { align-content: start; } .ed__n { display: block; font-size: var(--t-cap, 13px); font-weight: 600; letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; } html:root body .ped .work__t { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; max-width: 100%; } .ped .work__head { flex-wrap: wrap; align-items: flex-start; } .ped [data-slot="pano"] .ed__cap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .ped [data-slot="pano"] .ed__cap > * { grid-column: 1 / -1; } .ped [data-slot="pano"] .work__line { grid-column: 1 / span 7; } @media (min-width: 861px) and (max-width: 1100px) { .ped [data-slot="feat"] > .media { grid-column: 1 / span 7; } .ped [data-slot="feat"] > .ed__cap { grid-column: 8 / -1; } .ped [data-slot="feat"][data-flip] > .media { grid-column: 6 / -1; } .ped [data-slot="feat"][data-flip] > .ed__cap { grid-column: 1 / span 5; } } @media (max-width: 860px) { /* tablet pionowy i telefon: jedna kolumna, proporcje kadrów zostają zróżnicowane */ .ped { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 10vw, 72px); } .ped > .work, .ped > .work[data-slot] { grid-column: 1 / -1; margin-top: 0; align-self: start; } .ped [data-slot="feat"] { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } .ped [data-slot="feat"] > .media, .ped [data-slot="feat"] > .ed__cap, .ped [data-slot="feat"][data-flip] > .media, .ped [data-slot="feat"][data-flip] > .ed__cap { grid-column: 1 / -1; grid-row: auto; } .ped [data-slot="feat"] > .media { --ar: 4 / 3; } .ped [data-slot="pano"] .media { --ar: 16 / 9; } .ped [data-slot] .media.contain { --ar: 4 / 3; } .ped [data-mob] .media { --ar: 4 / 5; } .ped [data-slot="feat"] .work__head { flex-direction: row; align-items: flex-start; gap: 8px 16px; } html:root body .ped [data-slot="feat"] .work__t { font-size: clamp(24px, 6.4vw, 32px); } .ped [data-slot="pano"] .work__line { grid-column: 1 / -1; } } /* aktywny filtr: liczba na czerwonym tle zawsze biała (5,1:1), w ciemnym była czarna (3,4:1) */ html:root body .pff__b[aria-pressed="true"] .pff__n { color: #FFFFFF; } /* ==== css/src/15-case-study.css ==== */ /* Case study: szablon .csx, galeria, pokaz ekranów, nawigacja poprzedni/następny */ /* szczegóły */ .cs { padding-top: clamp(150px, 15vw, 220px); } .cs h1 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: calc(-.06em * var(--trk)); line-height: .88; overflow-wrap: anywhere; } .cs h1 { font-size: clamp(46px, 6vw, 96px); } /* 3.8 · Następny projekt: jasna karta w stylu kart realizacji */ .nx { padding-block: clamp(64px, 7vw, 112px); background: var(--paper); } .nx__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; } .nx__count { margin-left: 10px; color: var(--mute); font-variant-numeric: tabular-nums; } .nx__all { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); } .nx__all span { display: inline-grid; transition: transform .45s var(--ease); } .nx__all:hover span { transform: translateX(4px); } html:root body .cs__cta { padding-block: clamp(64px, 8vw, 128px) clamp(24px, 3vw, 48px); } html:root body .cs__cta .grid { align-items: end; row-gap: 24px; } html:root body .cs__cta h2 { grid-column: 1 / span 7; } html:root body .cs__cta .cs__cta-r { grid-column: 9 / -1; justify-self: end; } @media (max-width: 860px) { html:root body .cs__cta :is(h2, .cs__cta-r) { grid-column: 1 / -1; justify-self: start; } } html:root body .tlink .arr, html:root body .nx__all span { color: var(--red-ink); } .csx__head .csx__top { row-gap: var(--s-head); align-items: end; } html:root body .csx__head h1 { grid-column: 1 / span 6; } .csx__head .lead { grid-column: 8 / -1; justify-self: end; max-width: 30em; } .csx__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--gap); margin: clamp(32px, 4vw, 56px) 0 0; padding-top: 20px; border-top: 1px solid var(--g2); } .csx__facts dt { margin-bottom: 6px; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .csx__facts dd { margin: 0; font-size: var(--t-body); line-height: 1.45; font-weight: 500; } .csx__facts ul { list-style: none; margin: 0; padding: 0; } .csx__hero { padding-block: clamp(32px, 4vw, 56px) 0; } .csx__hero .media { border-radius: calc(var(--r) * 1.3); } .csx__sec { padding-block: var(--s-sec); } .csx__sec:not(.dark) + .csx__sec:not(.dark) { padding-top: 0; } .csx__k { display: flex; gap: 14px; align-items: baseline; margin: 0; font-family: inherit; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .csx__k span { color: var(--red-ink); font-variant-numeric: tabular-nums; } .dark .csx__k { color: #A9A9B2; } .dark .csx__k span { color: var(--red); } .csx__thesis { margin: 0; font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-thesis); line-height: var(--lh-thesis); letter-spacing: var(--tr-h3); text-wrap: balance; } .csx__h { margin: 0; font-family: var(--fh); font-size: var(--t-h2); font-weight: var(--w-sub); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); text-wrap: balance; } .csx__p { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--mute); max-width: 34em; } .dark .csx__p { color: #B9B9C2; } /* B. Wyzwanie: etykieta po lewej, teza szeroko, dwa krótkie akapity przesunięte w prawo */ .csx__ch .grid { row-gap: clamp(28px, 3.4vw, 48px); align-items: start; } .csx__ch .csx__k { grid-column: 1 / span 3; padding-top: .55em; } .csx__ch .csx__thesis { grid-column: 4 / span 8; font-size: clamp(24px, calc(19.4px + 1.45vw), 40px); } .csx__ab { grid-column: span 4; } .csx__ab:first-of-type { grid-column: 4 / span 4; } .csx__ab h3 { margin: 0 0 10px; font-family: var(--fh); font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; } /* C. Rozwiązanie: naprzemienne wiersze tekst + zbliżenie */ .csx__sh { row-gap: var(--s-head); margin-bottom: clamp(40px, 5vw, 80px); align-items: end; } .csx__sh .csx__k { grid-column: 1 / -1; } .csx__sh .csx__h { grid-column: 1 / span 7; } .csx__sh .csx__p { grid-column: 9 / -1; } .csx__row { align-items: center; row-gap: 24px; } .csx__row + .csx__row { margin-top: clamp(56px, 7vw, 120px); } .csx__txt { grid-column: 1 / span 4; display: grid; gap: 12px; align-content: start; } .csx__fig { grid-column: 6 / -1; margin: 0; } .csx__row--r .csx__txt { grid-column: 9 / -1; grid-row: 1; } .csx__row--r .csx__fig { grid-column: 1 / span 7; grid-row: 1; } .csx__n { font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; color: var(--red-ink); font-variant-numeric: tabular-nums; } .csx__txt h3 { margin: 0; font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } .csx__frame { position: relative; display: grid; gap: clamp(12px, 1.6vw, 20px); padding: clamp(16px, 3.2vw, 56px); border-radius: calc(var(--r) * 1.3); background: linear-gradient(160deg, #EEF0F7, #E2E5F0); overflow: hidden; } .csx__frame--duo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; } .csx__frame img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -32px rgba(10,16,48,.45), 0 0 0 1px rgba(10,16,48,.06); } html[data-theme="dark"] .csx__frame { background: linear-gradient(160deg, #23232B, #1B1B22); } .csx figcaption, .csx__cap { margin-top: 12px; font-size: var(--t-cap); line-height: 1.45; color: var(--mute); } .dark .csx__cap { color: #A9A9B2; } /* D. Projekt w całości: ciemna sekcja, kadr na szerokość, para asymetryczna, billboard */ .csx__show { overflow: hidden; } .csx__show .csx__sh .csx__h { color: var(--paper); } .csx__wide img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) * 1.3); } .csx__pair { margin-top: clamp(24px, 3vw, 48px); align-items: start; row-gap: 24px; } .csx__pair > figure { grid-column: 4 / -1; margin: 0; } .csx__pair img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) * 1.1); } .csx__pair .media { border-radius: calc(var(--r) * 1.1); } .csx__bill { margin-top: clamp(56px, 7vw, 120px); align-items: end; row-gap: 20px; } .csx__bill figure { grid-column: 1 / span 8; margin: 0; } .csx__bill figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) * 1.1); } .csx__bill .csx__txt { grid-column: 10 / -1; } .csx__bill .csx__txt h3 { color: var(--paper); } /* E. W ruchu */ .csx__mo .grid { row-gap: var(--s-head); } .csx__mo .csx__vid { grid-column: 2 / span 10; margin: 0; } .csx__mo .csx__vid .media { border-radius: calc(var(--r) * 1.3); } /* F. Efekt */ .csx__re .grid { row-gap: var(--s-head); align-items: start; } .csx__re .csx__k { grid-column: 1 / span 3; padding-top: .55em; } .csx__re .csx__h { grid-column: 4 / span 5; } .csx__done { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--g2); } .csx__done li { display: flex; gap: 12px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--g2); font-size: var(--t-body); line-height: 1.45; } .csx__done li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translateY(-2px); } .csx__live { grid-column: 4 / -1; display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; font-size: var(--t-small); font-weight: 600; color: var(--ink); } .csx__live svg { width: 12px; height: 12px; rotate: -45deg; color: var(--red-ink); } @media (max-width: 1023px) { html:root body .csx__head h1, .csx__head .lead { grid-column: 1 / -1; justify-self: start; } .csx__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csx__ch .csx__k, .csx__ch .csx__thesis, .csx__ab, .csx__ab:first-of-type { grid-column: 1 / -1; } .csx__sh .csx__h, .csx__sh .csx__p { grid-column: 1 / -1; } .csx__txt, .csx__row--r .csx__txt, .csx__fig, .csx__row--r .csx__fig { grid-column: 1 / -1; grid-row: auto; } .csx__pair > figure { grid-column: 3 / -1; } .csx__bill figure, .csx__bill .csx__txt { grid-column: 1 / -1; } .csx__mo .csx__vid { grid-column: 1 / -1; } .csx__re .csx__k, .csx__re .csx__h, .csx__done, .csx__live { grid-column: 1 / -1; } } @media (max-width: 600px) { .csx__facts { grid-template-columns: minmax(0, 1fr); gap: 16px; } .csx__frame--duo { grid-template-columns: minmax(0, 1fr); } .csx__pair > figure { grid-column: 1 / -1; } .csx__done { grid-template-columns: minmax(0, 1fr); } } .csx__facts:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .csx__ch .csx__thesis { font-size: clamp(22px, calc(17.6px + 1.25vw), 36px); } .csx__sh { margin-bottom: clamp(48px, 6vw, 96px); } .csx__row + .csx__row { margin-top: clamp(72px, 9vw, 152px); } /* kadr: mniej tła wokół zrzutu, zrzut w naturalnej wielkości (bez rozciągania ponad plik) */ .csx__frame { padding: clamp(14px, 2.8vw, 48px); justify-items: center; } .csx__frame img { width: auto; max-width: 100%; } .csx__frame--duo img { width: 100%; } .csx__frame--bare { padding: 0; background: none !important; border-radius: calc(var(--r) * 1.3); } .csx__frame--bare img { width: 100%; border-radius: calc(var(--r) * 1.3); box-shadow: none; } /* wiersz „wide” i „duo”: tytuł i opis w jednej linii nad kadrem na całą szerokość */ .csx__row--wide .csx__txt, .csx__row--duo .csx__txt { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; align-items: start; } .csx__row--wide .csx__n, .csx__row--duo .csx__n { grid-column: 1 / -1; } .csx__row--wide .csx__txt h3, .csx__row--duo .csx__txt h3 { grid-column: 1 / span 5; } .csx__row--wide .csx__txt .csx__p, .csx__row--duo .csx__txt .csx__p { grid-column: 7 / span 5; } .csx__row--wide .csx__fig, .csx__row--duo .csx__fig { grid-column: 1 / -1; } .csx__row--wide, .csx__row--duo { row-gap: clamp(24px, 3vw, 40px); } /* zwykłe wiersze: zrzut szerzej (7 kolumn), tekst wyrównany do góry kadru, nie do środka */ .csx__row--l, .csx__row--r { align-items: start; } .csx__row--l .csx__txt, .csx__row--r .csx__txt { padding-top: clamp(0px, 2vw, 32px); } @media (max-width: 1023px) { .csx__row--wide .csx__txt h3, .csx__row--duo .csx__txt h3, .csx__row--wide .csx__txt .csx__p, .csx__row--duo .csx__txt .csx__p { grid-column: 1 / -1; } .csx__row--l .csx__txt, .csx__row--r .csx__txt { padding-top: 0; } .csx__facts:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { /* telefon: fakty w dwóch kolumnach (zakres na całą szerokość), kadr główny od krawędzi do krawędzi */ .csx__facts, .csx__facts:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } .csx__facts > div:has(ul) { grid-column: 1 / -1; } .csx__facts > div:has(ul) ul { display: flex; flex-wrap: wrap; gap: 4px 14px; } .csx__hero { padding-inline: 0; } .csx__hero .media { border-radius: 0; } .csx__row + .csx__row { margin-top: 64px; } .csx__frame { padding: 12px; border-radius: var(--r); } .csx__frame--bare, .csx__frame--bare img { border-radius: var(--r); } .csx__sec { padding-block: clamp(64px, 16vw, 88px); } } .legal { padding-top: 0; } .legal .grid { row-gap: 24px; } .legal__draft, .legal__body { grid-column: 3 / span 8; } .legal__draft { margin: 0; padding: 14px 18px; border-radius: var(--r-s, 12px); background: var(--red-soft); color: #111114; font-size: var(--t-small); line-height: 1.5; } .legal__body h2 { margin: clamp(32px, 3.4vw, 48px) 0 10px; font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } .legal__body h2:first-child { margin-top: 8px; } .legal__body p { margin: 0 0 14px; max-width: 40em; font-size: var(--t-body); line-height: var(--lh-body); color: var(--mute); } .legal__body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } html[data-theme="dark"] .legal__draft { background: #3A1A22; color: #F4F4F6; } @media (max-width: 1023px) { .legal__draft, .legal__body { grid-column: 1 / -1; } } /* 3.19-END */ /* 3.20-START · case study Bryksy: notka o roli studia pod faktami */ .csx__note { max-width: 62ch; margin: 20px 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--mute); } @media (max-width: 600px) { .csx__note { margin-top: 16px; } } /* 3.20-END */ /* 3.21-START · case study Staybuddy: dwa kadry równej szerokości (flaga even) i pięć faktów w jednym wierszu */ .csx__frame--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } @media (min-width: 1024px) { .csx__facts:has(> div:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 860px) { .csx__frame--even { grid-template-columns: minmax(0, 1fr); } } /* 3.22-END */ /* 3.24-START · hero case study „jeden ekran, zmiana zasłoną” (cs.heroSeq): kadr zawsze jasny */ .hs { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r) * 1.3); overflow: hidden; isolation: isolate; container-type: inline-size; background: radial-gradient(70% 90% at 8% 100%, var(--hs-glow, rgba(30, 90, 255, .08)), transparent 70%), radial-gradient(60% 70% at 100% 0%, rgba(255, 255, 255, .7), transparent 70%), #EDEEF1; } .hs__scr, .hs__ph { position: absolute; overflow: hidden; } .hs__scr { left: 6%; top: 9%; width: 72%; aspect-ratio: 16 / 9; z-index: 1; background: #fff; border-radius: 1cqw; outline: 1px solid rgba(16, 24, 40, .09); box-shadow: 0 .15cqw .4cqw rgba(16, 24, 40, .06), 0 2.4cqw 5cqw -1.6cqw rgba(16, 24, 40, .28); } .hs__ph { left: 72.5%; top: 21%; width: 17.6%; aspect-ratio: 9 / 19.5; z-index: 2; background: #0D0D0F; border-radius: 2.5cqw; padding: .45cqw; box-shadow: 0 .2cqw .5cqw rgba(16, 24, 40, .1), 0 2.6cqw 4.4cqw -1.4cqw rgba(16, 24, 40, .4); } .hs__in { position: relative; height: 100%; border-radius: 2.08cqw; overflow: hidden; background: #fff; } .hs__lay { position: absolute; inset: 0; } .hs__lay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .hs__lay:not(.on):not(.in):not(.out) { visibility: hidden; } .hs__lay.in { z-index: 2; animation: hs-wipe 1.05s cubic-bezier(.77, 0, .18, 1) both; } .hs__lay.out { z-index: 1; animation: hs-sink 1.05s cubic-bezier(.77, 0, .18, 1) both; } .hs__ph .hs__lay.in { animation-delay: .12s; } .hs__cap { position: absolute; left: 6%; right: 30%; bottom: 4.2%; display: flex; align-items: center; gap: 1.6cqw; color: #111114; } .hs__t { position: relative; margin: 0; height: 1.9cqw; min-height: 18px; min-width: 16cqw; flex: 0 0 auto; overflow: hidden; font-family: var(--fh); font-weight: 600; font-size: max(12px, 1.2cqw); line-height: 1.6; letter-spacing: -.01em; } .hs__t span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .6s cubic-bezier(.77, 0, .18, 1), opacity .6s; } .hs__t span.next { transform: translateY(110%); opacity: 0; } .hs__t span.prev { transform: translateY(-110%); opacity: 0; } .hs__bars { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5cqw; } .hs__bars i { position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(17, 17, 20, .14); } .hs__bars b { position: absolute; inset: 0; background: #111114; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } .hs__pp { flex: 0 0 auto; display: grid; place-items: center; width: max(32px, 2.6cqw); height: max(32px, 2.6cqw); padding: 0; border-radius: 50%; border: 1px solid rgba(17, 17, 20, .18); background: rgba(255, 255, 255, .6); color: #111114; cursor: pointer; } .hs__pp svg { width: 40%; height: 40%; } .hs__pp:focus-visible { outline: 2px solid var(--red-deep, #D60035); outline-offset: 2px; } @media (max-width: 600px) { .hs { aspect-ratio: 4 / 5; border-radius: 0; } .hs__scr { left: 5%; top: 6%; width: 90%; } .hs__ph { left: 50%; top: 37%; width: 40%; } .hs__cap { left: 5%; right: 52%; bottom: 4%; } .hs__t { min-width: 0; flex: 1; height: 22px; } .hs__bars { display: none; } } @media (prefers-reduced-motion: reduce) { .hs__lay.in, .hs__lay.out { animation: none; } } /* kadr pionowy nie zajmuje kilku ekranów; obraz nie jest powiększany ponad plik */ .csx__frame:not(.csx__frame--duo) img { max-height: min(78vh, 760px); } .csx__frame--bare { justify-items: start; } .csx__frame--bare img { width: auto; max-width: 100%; max-height: min(78vh, 760px); } .csx__frame--duo img { max-height: min(70vh, 640px); object-fit: contain; } /* galeria: panorama na całą szerokość, pary 7/5 i 5/7, ostatni bez pary na 8 kolumn pośrodku */ .csx__gal .csx__sh { margin-bottom: clamp(32px, 4vw, 64px); } .csg { row-gap: clamp(40px, 5vw, 80px); align-items: start; } .csg__f { grid-column: 1 / -1; margin: 0; display: grid; gap: 12px; justify-items: start; min-width: 0; } .csg__f--s7 { grid-column: span 7; } .csg__f--s5 { grid-column: span 5; } .csg__f--solo { grid-column: 3 / span 8; } .csg__f > img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(80vh, 760px); border-radius: calc(var(--r) * 1.1); } .csg__f--full > img { width: 100%; max-height: none; } .csg__f > .media { width: 100%; border-radius: calc(var(--r) * 1.1); } .csx__hero .media.contain { --ar: 16 / 9; } html:root body .csx__top h1 { overflow-wrap: break-word; hyphens: auto; } @media (max-width: 860px) { .csg__f, .csg__f--s7, .csg__f--s5, .csg__f--solo { grid-column: 1 / -1; } .csx__hero .media.contain { --ar: 4 / 5; } } .pn__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; margin-top: clamp(24px, 3vw, 40px); } .pn__c { display: grid; gap: 18px; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--r); } .pn__c--prev { grid-column: 1 / span 5; } .pn__c--next { grid-column: 6 / -1; } .pn__grid--one .pn__c--next { grid-column: 1 / span 7; } .pn__m .media { border-radius: var(--r); } .pn__txt { display: grid; justify-items: start; gap: 8px; min-width: 0; } .pn__d { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-cap, 13px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pn__ar { display: inline-grid; color: var(--red-ink); transition: transform .45s var(--ease); } .pn__c--prev .pn__ar svg { transform: rotate(180deg); } .pn__c--prev:is(:hover, :focus-visible) .pn__ar { transform: translateX(-4px); } .pn__c--next:is(:hover, :focus-visible) .pn__ar { transform: translateX(4px); } .pn__t { font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: 1.1; letter-spacing: var(--tr-h3, -.02em); overflow-wrap: break-word; hyphens: auto; max-width: 100%; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); } .pn__c--next .pn__t { font-size: clamp(28px, 3vw, 48px); line-height: 1.02; } .pn__c:is(:hover, :focus-visible) .pn__t { background-size: 100% 2px; } .pn__l { font-size: var(--t-small, 15px); line-height: 1.4; color: var(--mute); max-width: 34em; } .pn__c:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 6px; } @media (max-width: 600px) { .pn__grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .pn__c, .pn__c--prev, .pn__c--next, .pn__grid--one .pn__c--next { grid-column: 1 / -1; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; } .pn__m .media { --ar: 1 / 1 !important; border-radius: calc(var(--r) * .7); } .pn__t, .pn__c--next .pn__t { font-size: 22px; } .pn__l { display: none; } } /* długa nazwa projektu: nagłówek o stopień mniejszy, żeby pierwszy ekran nie był samym tytułem */ html:root body .csx__top--long h1 { font-size: var(--t-h2); line-height: var(--lh-h2, 1.05); } .csg__f--solo { justify-items: center; } /* ==== css/src/16-services.css ==== */ /* Usługi: indeks .svx, podstrony usług, oferta, FAQ, makieta social media */ .fcard { border-radius: var(--r); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-height: 330px; background: var(--g1); } .fcard:nth-child(1) { background: var(--ink); color: var(--paper); } .fcard:nth-child(1) .meta { color: var(--mute-d); } .fcard h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: calc(-.035em * var(--trk)); line-height: 1.04; } .fcard ul { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; } .fcard li { display: flex; gap: 10px; align-items: baseline; } .fcard li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; transform: translateY(-2px); } .faq { row-gap: 36px; } .faq h2 { grid-column: 1 / span 4; } .faq__list { grid-column: 6 / -1; border-top: 1.5px solid var(--ink); } .faq details { border-bottom: 1px solid var(--g2); } .faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 24px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: calc(-.015em * var(--trk)); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.3em; line-height: .8; color: var(--red-ink); transition: transform .4s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding-bottom: 26px; max-width: 40em; color: var(--mute); } @media (max-width: 860px) { .fcard { min-height: 0; } .faq h2, .faq__list { grid-column: 1 / -1; } } .ofx__visual { position: sticky; top: 112px; aspect-ratio: 5 / 4.1; border-radius: var(--r); overflow: hidden; background: var(--g1); isolation: isolate; } @media (max-width: 860px) { .ofx__visual { display: none; } } .ofx__visual.is-missing { background: var(--g1); } /* Wspólne elementy pozycji oferty */ .of4__item { min-width: 0; } .of4__n { font-size: 14px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; } .of4__name { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.025em; } .of4__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .of4__txt { max-width: 30em; } .of4__scope { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 15px; color: var(--mute); } .of4__scope li:not(:last-child)::after { content: "·"; margin: 0 10px; color: #A3A3AD; } .of4__fig { margin: 0; min-width: 0; } .of4__m { aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--g1); } .of4__m img { display: block; width: 100%; height: 100%; object-fit: cover; } .of4__m--duo { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; background: none; border-radius: 0; } .of4__m--duo img { border-radius: 10px; background: var(--g1); min-width: 0; } .of4__fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--mute); } /* Wariant „lista”: cztery wiersze jak spis treści, kadr po prawej */ [data-of="lista"] .of4__grid { border-bottom: 1px solid var(--g2); } [data-of="lista"] .of4__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; padding-block: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--g2); } [data-of="lista"] .of4__n { grid-column: 1; padding-top: .9em; } [data-of="lista"] .of4__name { grid-column: 2 / span 4; } [data-of="lista"] .of4__body { grid-column: 6 / span 3; padding-top: 6px; } [data-of="lista"] .of4__fig { grid-column: 9 / -1; } /* Wariant „kadry”: asymetryczna siatka 7/5 i 5/7, równa wysokość kadrów w rzędzie */ [data-of="kadry"] .of4__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(64px, 7vw, 112px); } [data-of="kadry"] .of4__item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 12px; align-content: start; } [data-of="kadry"] .of4__item:nth-child(4n+1), [data-of="kadry"] .of4__item:nth-child(4n) { grid-column: span 7; } [data-of="kadry"] .of4__item:nth-child(4n+2), [data-of="kadry"] .of4__item:nth-child(4n+3) { grid-column: span 5; } [data-of="kadry"] .of4__fig { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; } [data-of="kadry"] .of4__item:nth-child(4n+2) .of4__m, [data-of="kadry"] .of4__item:nth-child(4n+3) .of4__m { aspect-ratio: 15 / 14; } [data-of="kadry"] .of4__n { grid-row: 2; padding-top: .75em; } [data-of="kadry"] .of4__name { grid-row: 2; } [data-of="kadry"] .of4__body { grid-column: 2; grid-row: 3; } @media (max-width: 860px) { [data-of="lista"] .of4__item { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 14px; } [data-of="lista"] .of4__n { grid-column: 1; grid-row: 1; padding-top: .75em; } [data-of="lista"] .of4__name { grid-column: 2; grid-row: 1; } [data-of="lista"] .of4__fig { grid-column: 1 / -1; grid-row: 2; margin-block: 8px 6px; } [data-of="lista"] .of4__body { grid-column: 1 / -1; grid-row: 3; padding-top: 0; } } @media (max-width: 720px) { [data-of="kadry"] .of4__item { grid-column: 1 / -1 !important; } [data-of="kadry"] .of4__item .of4__m { aspect-ratio: 3 / 2 !important; } } @media (max-width: 560px) { .of4__name { font-size: 27px; } } .of4__item { position: relative; } .of4__link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 16px; } .of4__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .of4__link:focus-visible { outline: none; } .of4__item:has(.of4__link:focus-visible) { outline: 3px solid var(--red-deep); outline-offset: 10px; border-radius: 12px; } .of4__go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(17,17,20,.25); color: var(--ink); transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease); } .of4__go svg { width: 16px; height: 16px; } .of4__m img { transition: transform 1.2s var(--ease); } @media (hover: hover) { .of4__item:hover .of4__go { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); transform: translateX(6px); } .of4__item:hover .of4__m img { transform: scale(1.03); } } .of4__item:has(.of4__link:focus-visible) .of4__go { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); } /* Lista: linia nad wierszem jako osobny element, żeby mogła się „narysować” */ [data-of="lista"] .of4__item { border-top: 0; } [data-of="lista"] .of4__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g2); transform-origin: left; transition: transform 1.1s var(--ease); } /* Wejście: linia rysuje się od lewej, numer i nazwa wysuwają się spod maski, opis dochodzi chwilę później, kadr odsłania się kurtyną od dołu z lekkim oddaleniem. Każdy wiersz osobno, gdy wchodzi w ekran. */ .motion .of4__item.rv, .motion .of4__item.rv.pre { opacity: 1; transform: none; } .motion .of4__item .of4__n, .motion .of4__item .of4__name, .motion .of4__item .of4__body { transition: opacity .9s var(--ease), transform .9s var(--ease); } .motion .of4__item .of4__name { transition-delay: .08s; } .motion .of4__item .of4__body { transition-delay: .2s; } .motion .of4__item .of4__m { clip-path: inset(0 0 0 0 round 10px); transition: clip-path 1.3s var(--ease) .12s; } .motion .of4__item .of4__fig figcaption { transition: opacity .8s var(--ease) .5s; } .motion .of4__item.pre::before { transform: scaleX(0); } .motion .of4__item.pre .of4__n, .motion .of4__item.pre .of4__name { opacity: 0; transform: translateY(28px); } .motion .of4__item.pre .of4__body { opacity: 0; transform: translateY(18px); } .motion .of4__item.pre .of4__m { clip-path: inset(100% 0 0 0 round 10px); } .motion .of4__item.pre .of4__m img { transform: scale(1.12); } .motion .of4__item.pre .of4__fig figcaption { opacity: 0; } @media (max-width: 560px) { .of4__go { width: 38px; height: 38px; } } /* 3.6 · Oferta: film w kadrze identyfikacji. Plakat pod spodem, film pojawia się, gdy gra. Przycisk pauzy leży w
, nad warstwą linku całego wiersza. */ .of4__fig[data-media] { position: relative; } .of4__m--video { position: relative; } .of4__m--video > img, .of4__m--video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .of4__m--video > video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; transition: opacity .6s; } .of4__fig.playing .of4__m--video > video { opacity: 1; } .of4__fig > .media__pp { z-index: 3; } /* 3.8 · Studio, Podejście: nagłówek po lewej, zasady jako lista wierszy */ .ap__grid { row-gap: clamp(40px, 5vw, 64px); align-items: start; } .ap__head { grid-column: 1 / span 5; position: sticky; top: 120px; display: grid; gap: 18px; } .ap__t { font-family: var(--fh); font-weight: 700; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.03em; color: var(--paper); text-wrap: balance; } .ap__lead { color: var(--mute-d); max-width: 26em; font-size: 17px; } .ap__list { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); } .ap__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; row-gap: 10px; padding: clamp(26px, 2.6vw, 38px) 0; border-bottom: 1px solid rgba(255,255,255,.14); } .ap__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); } .ap__row:hover::after { transform: scaleX(1); } .ap__n { grid-row: 1 / span 2; font-size: 14px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; padding-top: .55em; } .ap__row h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -.02em; color: var(--paper); transition: transform .5s var(--ease); } .ap__row p { color: var(--mute-d); max-width: 34em; } @media (hover: hover) { .ap__row:hover h3 { transform: translateX(6px); } } @media (max-width: 860px) { .ap__head, .ap__list { grid-column: 1 / -1; position: static; } .ap__row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } } /* 3.9 · Usługi: podstrony (problem, zakres, przebieg, dowody) i stopka */ .sv-ph__side { display: grid; gap: 28px; align-content: start; justify-items: start; } .sv__grid { align-items: start; row-gap: 32px; } .sv__head { grid-column: 1 / span 4; position: sticky; top: 120px; } .sv__h { font-family: var(--fh); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.03em; margin-top: 10px; } .sv__probs, .sv__deliver { grid-column: 6 / -1; display: grid; } .sv__probs li { position: relative; padding: 26px 0 26px 44px; border-top: 1px solid var(--g2); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.4; letter-spacing: -.01em; } .sv__probs li:last-child { border-bottom: 1px solid var(--g2); } .sv__probs li::before { content: ""; position: absolute; left: 4px; top: 38px; width: 18px; height: 2px; background: var(--red); } .sv__deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); } .sv__deliver li { padding: 28px 0 32px; border-top: 1px solid var(--g2); } .sv__deliver h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(21px, 1.7vw, 25px); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; } .sv__deliver p { color: var(--mute); } .sv .nx__head { margin-bottom: clamp(40px, 5vw, 72px); } .sv__works.pfl { padding-bottom: 0; } .sv__figs { display: grid; gap: var(--gap); } .sv__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv__figs .of4__fig { margin: 0; position: relative; } .sv__figs--1 .of4__m img, .sv__figs--1 .of4__m video { aspect-ratio: 16 / 9; } .sv__figs figcaption { margin-top: 12px; font-size: 14px; color: var(--mute); } .sv-more { padding-top: 0; } .sv__others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 20px; } .sv__other { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 30px; border: 1px solid var(--g2); border-radius: var(--r); text-decoration: none; color: var(--ink); font-family: var(--fh); font-weight: 700; font-size: clamp(21px, 1.8vw, 28px); letter-spacing: -.02em; transition: border-color .3s var(--ease), background .3s var(--ease); } .sv__other:hover { border-color: var(--ink); background: var(--g1); } .sv__other .work__go-ic { flex: none; transition: transform .4s var(--ease); } .sv__other:hover .work__go-ic { transform: translateX(4px); } .of4--svc { padding-top: 0; } .sv-ph .ph__grid h1 { grid-column: 1 / -1; } .sv-ph__side { grid-column: 7 / -1; } .sv-ph .ph__grid .sv-ph__side .lead { grid-column: auto; } @media (max-width: 900px) { .sv__head, .sv-ph__side { position: static; grid-column: 1 / -1; } .sv__probs, .sv__deliver { grid-column: 1 / -1; } .sv__deliver, .sv__figs--2, .sv__others { grid-template-columns: 1fr; } } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .of4__go { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); } /* Usługi: cztery obszary, pozostałe trzy w rzędzie */ .sv__others { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .sv__others { grid-template-columns: 1fr; } } /* Ilustracja social media */ .sm-mock { position: relative; margin: 0; border-radius: var(--r); background: linear-gradient(150deg, var(--g1), var(--g2)); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; } .sv__figs .sm-mock { aspect-ratio: 16 / 9; } .sm-mock__phone { width: 38%; max-width: 260px; aspect-ratio: 9 / 16; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(17,17,20,.4), 0 0 0 6px #111114; padding: 10% 6% 6%; display: grid; grid-template-rows: auto 1fr; gap: 8%; rotate: -4deg; } .sm-mock__bar { display: flex; align-items: center; gap: 8px; } .sm-mock__av { width: 22%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--red), #FFB347, var(--red)); box-shadow: inset 0 0 0 3px #fff; } .sm-mock__nm { height: 8px; flex: 1; border-radius: 4px; background: #E4E4E8; } .sm-mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-content: start; } .sm-mock__t { aspect-ratio: 1; background: #111114; } .sm-mock__t--a, .sm-mock__t--e, .sm-mock__t--i { background: var(--red); } .sm-mock__t--b, .sm-mock__t--g { background: #F1F0EC; background-image: radial-gradient(circle at 50% 60%, #111114 0 22%, transparent 23%); } .sm-mock__t--c, .sm-mock__t--h { background: #E4E3DE; background-image: linear-gradient(transparent 62%, #111114 62% 72%, transparent 72%); } .sm-mock__t--d { background: #FFD9DF; } .sm-mock__t--f { background: #111114; background-image: linear-gradient(135deg, transparent 45%, var(--red) 45%); } .sm-mock__story { position: absolute; right: 12%; bottom: 14%; width: 18%; aspect-ratio: 9 / 16; border-radius: 14px; background: linear-gradient(170deg, var(--red), #8E1230); box-shadow: 0 20px 40px -20px rgba(17,17,20,.5); rotate: 6deg; display: grid; align-content: end; padding: 10%; color: #fff; font-size: clamp(9px, .8vw, 13px); font-weight: 700; line-height: 1.1; } .sm-mock__story span { position: absolute; top: 8%; left: 10%; right: 10%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.6); } .sm-mock figcaption { position: absolute; left: 20px; bottom: 16px; margin: 0; font-size: 13px; color: var(--mute); } .of4__item .sm-mock { aspect-ratio: auto; min-height: 100%; } .of4__item .sm-mock figcaption { display: none; } /* h3 */ html:root body :is(.of4 .of4__name, .fcard h3, .sv__deliver h3, .ap__row h3, .kf__t, .sf__q, .skills h3, .cv-approach h3, .work__t, .proc__txt h3, .principle h3, .pr-step h3) { font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } html:root body main :is(.sv__probs li, .sv__deliver p, .ap__row p, .fcard p, .faq p, .xp__desc, .cv-approach p, .of4__text) { font-size: var(--t-body); line-height: var(--lh-body); } html:root body .sv-ph .ph__grid h1 { grid-column: 1 / span 10; } html:root body .sv-ph__side { min-width: 0; grid-template-columns: minmax(0, 1fr); } html:root body .sv-ph__side > * { max-width: 100%; } @media (max-width: 860px) { html:root body .sv-ph + .sv { padding-top: clamp(40px, 8vw, 64px); } } html:root body .svx { color: var(--paper); } html:not([data-theme]) .svx { background: radial-gradient(70% 55% at 100% 100%, rgba(241,52,80,.2), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(120,97,255,.14), transparent 70%), linear-gradient(180deg, var(--ink) 0%, #17161D 55%, #201420 100%); } html[data-theme="dark"] .svx { background: radial-gradient(70% 55% at 100% 100%, rgba(83,97,216,.32), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(255,124,185,.12), transparent 70%), linear-gradient(180deg, #14142B 0%, #111126 55%, #1B1742 100%); } .svx__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-head); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); } .svx__k { grid-column: 1 / -1; margin: 0; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #A9A9B2; } .svx__k b { color: var(--red); font-weight: 600; } html:root body .svx__t { grid-column: 1 / span 7; margin: 0; font-family: var(--fh); font-size: var(--t-h2); font-weight: var(--w-sec); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--paper); } .svx__lead { grid-column: 9 / -1; margin: 0; font-size: var(--t-body); line-height: var(--lh-body); color: #C9C9D0; max-width: 30em; } .svx__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .svx__list { grid-column: 1 / span 6; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); } .svx__it { border-bottom: 1px solid rgba(255,255,255,.16); scroll-margin-top: 88px; } .svx__row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; column-gap: 16px; align-items: start; padding-block: clamp(18px, 2vw, 28px); } .svx__n { padding-top: .5em; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; color: #8E8E98; font-variant-numeric: tabular-nums; transition: color .3s; } html:root body .svx__h { margin: 0; font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--paper); transition: color .3s; } .svx__a, .svx__tg { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; } .svx__a::after { content: ""; position: absolute; inset: 0; } .svx__a:focus-visible { outline: none; } .svx__row:has(.svx__a:focus-visible), .svx__row:has(.svx__tg:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 6px; } .svx__tg { display: none; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } .svx__tg:focus-visible { outline: none; } .svx__txt { grid-column: 2; margin: 8px 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: #B9B9C2; max-width: 34em; } .svx__go { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); color: var(--paper); transition: background-color .3s, box-shadow .3s, color .3s, transform .3s var(--ease); } .svx__go svg { width: 14px; height: 14px; } .svx__it.on .svx__n { color: var(--red); } .svx__it.on .svx__go { background: var(--red); box-shadow: none; color: #111114; } .svx__m { margin: 0; } .svx__fig .of4__fig { margin: 0; } .svx__fig .of4__m { aspect-ratio: 3 / 2; border-radius: 16px; background: #24232B; } .svx__fig .sm-mock { aspect-ratio: 3 / 2; border-radius: 16px; } .svx__fig .sm-mock figcaption { display: none; } .svx__fig figcaption { margin-top: 10px; font-size: var(--t-cap); line-height: 1.45; color: #A9A9B2; } .svx__scope { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; } .svx__scope li { padding: 6px 12px; border-radius: 999px; font-size: var(--t-cap); font-weight: 500; color: #E3E3E8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); } .svx__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 44px; font-size: var(--t-small); font-weight: 600; color: var(--paper); text-decoration: none; } .svx__more span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #111114; transition: transform .3s var(--ease); } .svx__more svg { width: 12px; height: 12px; } .svx__more:hover span { transform: translateX(4px); } @media (min-width: 1024px) { .svx__list:hover .svx__it:not(.on) .svx__h { color: rgba(255,255,255,.55); } /* podgląd: prawa kolumna (7–12), zmienia się razem ze wskazanym obszarem */ .svx__m { position: absolute; top: 0; left: calc(7 * (100% + var(--gap)) / 12); right: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .16s linear, transform .35s var(--ease), visibility 0s linear .16s; } .svx__it.on .svx__m { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease) .1s, transform .35s var(--ease) .1s, visibility 0s; } .svx__grid { min-height: clamp(520px, 44vw, 660px); } } @media (max-width: 1023px) { .svx__t, .svx__lead { grid-column: 1 / -1; } .svx__list { grid-column: 1 / -1; } .svx__a { display: none; } .svx__tg { display: block; } .svx__row { grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; } .svx__n { padding-top: 0; } .svx__go svg { transform: rotate(90deg); transition: transform .3s var(--ease); } .svx__it.open .svx__go svg { transform: rotate(-90deg); } .svx__it.open .svx__go { background: var(--red); box-shadow: none; color: #111114; } .svx__it.on:not(.open) .svx__go { background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); color: var(--paper); } .svx__it.on:not(.open) .svx__n { color: #8E8E98; } .svx__it.open .svx__n { color: var(--red); } .svx__txt { grid-column: 1 / -1; margin-top: 4px; } .svx__it:not(.open) .svx__txt, .svx__it:not(.open) .svx__m { display: none; } .svx__m { padding: 4px 0 clamp(20px, 4vw, 28px); } } .svx__head { margin-bottom: clamp(40px, 4.6vw, 64px); } .svx__row { column-gap: 12px; padding-block: clamp(20px, 2vw, 26px); } .svx__txt { margin-top: 6px; } .svx__fig .of4__m, .svx__fig .sm-mock { aspect-ratio: 4 / 3; } .svx__fig .of4__m img, .svx__fig .of4__m video { width: 100%; height: 100%; object-fit: cover; } .svx__fig .of4__m--video img, .svx__fig .of4__m--video video { object-fit: contain; } .svx__scope { margin-top: 14px; } .svx__more { margin-top: 12px; } @media (min-width: 1024px) { /* podgląd na wysokości środka listy, a nie przy jej górnej krawędzi; bez pustego pola pod spodem */ .svx__grid { min-height: 0; align-items: center; } .svx__m { top: 50%; translate: 0 -50%; } .svx__mi { max-width: 560px; } } @media (max-width: 1023px) { html:root body .svx__t, html:root body .svx__lead { grid-column: 1 / -1; } /* akordeon: opis i podgląd rozwijają się płynnie (Chrome, Edge); gdzie przeglądarka nie umie animować wysokości „auto”, otwierają się od razu */ .svx { interpolate-size: allow-keywords; } .svx__it .svx__txt, .svx__it .svx__m { display: block; overflow: hidden; height: auto; opacity: 1; visibility: visible; transition: height .4s var(--ease), opacity .3s ease .08s, margin .4s var(--ease), padding .4s var(--ease), visibility 0s; } .svx__it:not(.open) .svx__txt, .svx__it:not(.open) .svx__m { display: block; height: 0; opacity: 0; margin-top: 0; padding-block: 0; visibility: hidden; transition: height .35s var(--ease), opacity .15s ease, margin .35s var(--ease), padding .35s var(--ease), visibility 0s linear .35s; } } @media (prefers-reduced-motion: reduce) { .svx__it .svx__txt, .svx__it .svx__m { transition: none !important; } } /* Oferta (.svx) jest zawsze ciemną sekcją: w trybie ciemnym tekst brał --paper motywu (prawie czarny) i znikał */ html[data-theme="dark"] .svx { --paper: #FAF9F6; --ink: #111114; } /* karta „System” na jasnym tle w trybie ciemnym: etykieta była za jasna (3,0:1) */ html[data-theme="dark"] .fcard:nth-child(1) .meta { color: #55555E; } /* podpis makiety social media leżał na grafice telefonu (2,5:1 w ciemnym na 390 px): dostaje własne tło */ html:root body .sm-mock figcaption { z-index: 2; left: 12px; right: auto; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 12px; border-radius: 999px; background: var(--paper); color: var(--mute); box-shadow: 0 0 0 1px var(--g2); } /* ==== css/src/17-page-header.css ==== */ /* Nagłówki podstron (.ph), okruszki */ .ph { padding-top: clamp(150px, 15vw, 220px); padding-bottom: clamp(56px, 6vw, 96px); } .ph .kick { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 28px; } .ph .kick a { text-decoration: none; } .ph .kick a:hover { color: var(--ink); text-decoration: underline; } .ph__grid { row-gap: 32px; align-items: end; } .ph__grid h1 { grid-column: 1 / span 9; } .ph__grid .lead { grid-column: 1 / span 6; } .ph__grid .side { grid-column: 9 / -1; justify-self: end; } @media (max-width: 860px) { .pf__head h2, .pf__head .side { grid-column: 1 / -1; justify-self: start; justify-items: start; text-align: left; } .ph__grid h1, .ph__grid .lead, .ph__grid .side { grid-column: 1 / -1; justify-self: start; } } .kicker { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .dark .kicker { color: var(--mute-d); } .ph { padding-bottom: clamp(48px, 5vw, 80px); } .ap__kick { color: var(--mute-d); } /* h1 podstron */ html:root body :is(.ph .h1, .ct__l .h1, .cs h1, .cv__role) { font-family: var(--fh); font-size: var(--t-h1); font-weight: var(--w-sub); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } html:root body .kicker { font-size: var(--t-cap); letter-spacing: .08em; } html:root body .kick { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-small); margin-bottom: var(--s-crumb); } html:root body :is(.ph, .cs, .ct) { padding-top: var(--s-top); } html:root body .ph { padding-bottom: clamp(36px, 4vw, 64px); } html:root body .ph__grid { row-gap: var(--s-head); align-items: end; } @media (min-width: 1024px) { /* Realizacje i Usługi: H1 po lewej, lead po prawej (od 1024 px) */ html:root body :is(.ph--pf, .ph--svc) .ph__grid h1 { grid-column: 1 / span 6; } html:root body :is(.ph--pf, .ph--svc) .ph__grid .lead { grid-column: 8 / -1; justify-self: end; max-width: 30em; } } html:root body .ph--svc + .of4--svc { padding-top: clamp(16px, 2vw, 32px); } html:root body main:has(.ph--pf) .gx { display: none; } @media (max-width: 860px) { html:root body .ph .ph__grid :is(h1, .lead, .sv-ph__side) { grid-column: 1 / -1; } } @media (max-width: 560px) { /* H1 podstron: każdy wers z desktopu zostaje osobnym blokiem i sam się wyrównuje */ html:root body :is(.ph .h1, .ct__l .h1, .cv__role) .line { display: block; text-wrap: balance; } } /* Drobne akcenty, wspólne dla obu kolorów: aktywny filtr, okruszki, strzałki tekstowe */ html:root body .kick a:hover { color: var(--red-ink); } /* ==== css/src/18-process.css ==== */ /* Proces współpracy: etapy, artefakty, galeria procesu */ /* Współpraca: jeden kadr, trzy etapy */ .proc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .proc__side { display: grid; gap: clamp(28px, 3vw, 44px); } .proc__nav { display: grid; border-top: 1.5px solid var(--ink); } .proc__nav button { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; text-align: left; border: 0; background: none; cursor: pointer; padding: 20px 0; border-bottom: 1px solid var(--g2); color: var(--mute); } .proc__nav .n { font-size: 14px; font-variant-numeric: tabular-nums; } .proc__nav .t { font-size: clamp(26px, 2.6vw, 40px); font-weight: var(--w-light); letter-spacing: calc(-.02em * var(--trk)); line-height: 1.05; transition: color .3s; } .proc__nav button::after { content: ""; width: 44px; height: 18px; border-radius: 999px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .proc__nav button:hover .t { color: var(--ink); } .proc__nav button[aria-selected="true"] { color: var(--ink); } .proc__nav button[aria-selected="true"] .t { font-weight: 400; } .proc__nav button[aria-selected="true"]::after { transform: none; } .proc__txt { display: grid; gap: 12px; min-height: 13em; } .proc__txt h3 { font-size: 22px; font-weight: 500; letter-spacing: calc(-.015em * var(--trk)); } .proc__txt p { color: var(--mute); max-width: 34em; } .proc__txt .you { color: var(--ink); background: var(--g1); border-radius: 14px; padding: 14px 16px; font-size: 16px; width: fit-content; } .proc__stage { position: relative; aspect-ratio: 7 / 6; padding-bottom: 40px; border-radius: calc(var(--r) * 1.2); background: var(--g1); overflow: hidden; display: grid; place-items: center; } .proc__frame { position: relative; width: 52%; height: 82%; border-radius: 22px; background: var(--paper); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(17,17,20,.45); transition: width .9s var(--ease-io), height .9s var(--ease-io), background-color .6s, border-radius .9s var(--ease-io); } .proc__frame[data-shape="1"] { width: 84%; height: 66%; } .proc__frame[data-shape="2"] { width: 90%; height: 54%; background: var(--red); border-radius: 26px; } .proc__scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; } .proc__scene.on { opacity: 1; transition-delay: .3s; } .proc__par { position: absolute; inset: 0; } .proc__note { position: absolute; left: 18px; bottom: 14px; right: 18px; font-size: 13px; color: var(--mute); } .pz { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; font-family: var(--f); } .pz__cap { display: inline-block; width: .9em; height: .52em; border-radius: 999px; background: var(--red); vertical-align: .02em; margin: 0 .03em; } .pz--brief .pz__grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(17,17,20,.07) 27px 28px); } .pz--brief .pz__word { position: relative; font-size: clamp(34px, 3.6vw, 56px); font-weight: var(--w-light); letter-spacing: calc(-.02em * var(--trk)); color: var(--ink); } .pz--brief .pz__notes { position: absolute; left: 10%; right: 10%; bottom: 12%; display: grid; gap: 8px; } .pz--brief .pz__notes li { font-size: 13px; color: var(--mute); padding-left: 14px; position: relative; } .pz--brief .pz__notes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } .pz--brief .pz__cap--dash { position: absolute; top: 12%; left: 10%; width: 64px; height: 26px; background: none; border: 1.5px dashed var(--red); } .pz--var { align-content: center; gap: clamp(8px, 1.2vw, 16px); justify-items: start; padding-left: 12%; } .pz--var p { display: flex; align-items: baseline; gap: 18px; font-size: clamp(30px, 3.4vw, 54px); letter-spacing: calc(-.03em * var(--trk)); line-height: 1.05; color: #9A9AA3; transition: color .4s; } .pz--var p.on { color: var(--ink); } .pz--var .pz__k { font-size: 13px; letter-spacing: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 500; transform: translateY(-.3em); } .pz--var p.on .pz__k { background: var(--red); color: var(--ink); box-shadow: none; } .pz--final { align-content: center; gap: 22px; color: var(--paper); } .pz--final .pz__lock { font-size: clamp(48px, 5.6vw, 92px); font-weight: 500; letter-spacing: calc(-.045em * var(--trk)); line-height: 1; } .pz--final .pz__cap { background: var(--paper); } .pz--final .pz__files { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pz--final .pz__files li { font-size: 13px; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.9); padding: 6px 12px; border-radius: 999px; } @media (max-width: 860px) { .proc { grid-template-columns: 1fr; } .proc__stage { aspect-ratio: 1 / 1; order: -1; } .proc__txt { min-height: 0; } .proc__frame { width: 60%; } .proc__frame[data-shape="1"] { width: 88%; height: 62%; } .proc__frame[data-shape="2"] { width: 92%; height: 52%; } } @media (max-width: 560px) { .proc__note { font-size: 12px; } } /* artefakty: art-directowane kompozycje (kroje i paleta strony) */ .pr-art { position: relative; margin-top: 14px; aspect-ratio: 4 / 3.1; border-radius: var(--r); background: var(--g1); overflow: hidden; font-size: 14px; line-height: 1.4; } .pr-art [class*="pa-"] { box-sizing: border-box; } @media (max-width: 860px) { .pr-art { aspect-ratio: 4 / 3.6; font-size: 12px; } } .pw__t { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } .pw { padding-top: 0; } .pw__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); padding-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--g2); } .pw__head .kicker { grid-column: 1 / -1; } .pw__t { grid-column: 1 / span 7; } .pw__side { grid-column: 8 / -1; display: grid; gap: 18px; } .pw__side .lead { font-size: var(--fs-body); color: var(--mute); max-width: 30em; } .pw__links { display: flex; flex-wrap: wrap; gap: 12px 28px; } .pw__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .pw__step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--ink); min-width: 0; } .pw__n { font-size: 14px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; } .pw__step h3 { font-size: clamp(24px, 1.95vw, 28px); line-height: 1.12; letter-spacing: -.02em; } .pw__step > p { max-width: 30em; } @media (max-width: 960px) { .pw__t { grid-column: 1 / -1; } .pw__side { grid-column: 1 / -1; } } @media (max-width: 860px) { .pw__steps { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 560px) { .pw__t { font-size: min(9.2vw, 40px); } .pw__step h3 { font-size: 25px; } } /* Ikony procesu (3.6): statyczny, wyraźny kontur 2 px, jeden czerwony akcent */ .pw__icrow { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .pw__ic { width: 60px; height: 60px; overflow: visible; fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pw__ic .acc { stroke: var(--red-deep); } .pw__step > p { color: #26262C; } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) :is(.pw__step > p, .pr-step.on .pr-step__p, .pr-step .pr-step__p) { color: #C9C9D0; } /* Obszary w stylu listy słów (sekcja 05 Hone): słowa po lewej, panel po prawej */ /* tryb przewijania (od 961 px) */ /* Realizacje: karty składają się w grid */ .gx { padding-block: 0 var(--sec); } .gx__stage { position: relative; } .gx__head { margin-bottom: clamp(24px, 3vw, 40px); } .gx__t { font-family: var(--fh); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.03em; margin-top: 10px; } .gx__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); height: min(68vh, 680px); grid-template-areas: "b b b m m s" "b b b m m s" "t t y c c s"; } .gx__c--b { grid-area: b; } .gx__c--m { grid-area: m; } .gx__c--s { grid-area: s; } .gx__c--t { grid-area: t; } .gx__c--y { grid-area: y; } .gx__c--c { grid-area: c; } .gx__c { position: relative; min-height: 0; transform-origin: 50% 50%; will-change: transform; } .gx__c > a, .gx__info, .gx__cta { position: relative; display: block; height: 100%; border-radius: var(--r-m); overflow: hidden; text-decoration: none; } .gx__m { position: absolute; inset: 0; background: var(--g1); } .gx__m img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .gx__c > a:hover .gx__m img { transform: scale(1.04); } .gx__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(transparent, rgba(17,17,20,.72)); } .gx__nm { font-family: var(--fh); font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -.02em; } .gx__ic { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111114; flex: none; transition: transform .4s var(--ease); } .gx__ic svg { width: 14px; height: 14px; } .gx__c > a:hover .gx__ic { transform: rotate(-45deg); } .gx__info { display: grid; align-content: end; gap: 4px; padding: 16px; background: var(--ink); color: var(--paper); } .gx__info b { font-family: var(--fh); font-size: clamp(34px, 3.4vw, 56px); line-height: 1; letter-spacing: -.04em; } .gx__info span { font-size: 13px; opacity: .8; } .gx__cta { width: 100%; border: 0; cursor: pointer; text-align: left; display: grid; align-content: space-between; padding: 16px 18px; background: var(--red); color: #111114; font: inherit; } .gx__cta b { font-family: var(--fh); font-size: clamp(22px, 2vw, 32px); letter-spacing: -.03em; line-height: 1; } .gx__cta span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .gx__cta svg { width: 14px; height: 14px; } .gx--on { height: 270vh; padding: 0; } .gx--on .gx__stage { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; overflow: hidden; padding-top: 70px; } .gx--on .gx__head { opacity: var(--gx-t, 1); transform: translateY(calc((1 - var(--gx-t, 1)) * 30px)); } .gx--on .gx__cap, .gx--on .gx__info > *, .gx--on .gx__cta > * { opacity: calc(var(--gx-t, 1) * 1.6 - .6); } @media (max-width: 960px) { .gx__grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(150px, 42vw, 260px); grid-template-areas: "b b" "m s" "t s" "y c"; } } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .gx__info { background: var(--g1); color: var(--ink); } /* przenikanie liczone w JS: wyłączone przejścia klasowe, kolor słów stały, jasność z opacity */ /* 7. „Pracujesz bezpośrednio…”: jedno CTA w kształcie pigułki „Zobacz wszystkie projekty” */ .pw__links .pw__pill { position: static; } .pw__links { margin: 0; } html .gx__c .gx__new { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto auto; gap: 6px; padding: 18px 20px; background-color: var(--g1); color: var(--ink); overflow: hidden; --dash: var(--red); background-image: linear-gradient(90deg, var(--dash) 50%, transparent 0), linear-gradient(90deg, var(--dash) 50%, transparent 0), linear-gradient(0deg, var(--dash) 50%, transparent 0), linear-gradient(0deg, var(--dash) 50%, transparent 0); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 14px 2px, 14px 2px, 2px 14px, 2px 14px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: gx-ants 1.2s linear infinite; } .gx__new::after { content: ""; position: absolute; z-index: -1; width: 160%; aspect-ratio: 1; left: -30%; top: 55%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 28%, transparent), transparent); transition: transform .8s var(--ease); } .gx__new:hover::after { transform: translateY(-18%); } .gx__plus { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--red); animation: gx-pulse 2.4s ease-in-out infinite; transition: transform .6s var(--ease); } .gx__plus::before, .gx__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.5px; border-radius: 2px; background: #111114; translate: -50% -50%; } .gx__plus::after { rotate: 90deg; } .gx__new:hover .gx__plus { transform: rotate(90deg) scale(1.08); } html .gx__new b { align-self: end; font-family: var(--fh); font-size: clamp(22px, 2vw, 32px); letter-spacing: -.03em; line-height: 1; } html .gx__new .gx__rot { display: block; height: 1.3em; overflow: hidden; font-size: 15px; font-weight: 500; color: var(--mute); } html .gx__new .gx__rot span { display: block; height: 1.3em; line-height: 1.3em; animation: gx-rot 8s cubic-bezier(.7,0,.3,1) infinite; } html .gx__new .gx__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin-top: 4px; } .gx__go svg { width: 14px; height: 14px; transition: transform .45s var(--ease); } .gx__new:hover .gx__go svg { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { html .gx__c .gx__new, .gx__plus, html .gx__new .gx__rot span { animation: none; } } .px { position: absolute; top: 0; right: 0; z-index: 2; width: 8%; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; } .px i { aspect-ratio: 1; background: var(--red); opacity: 0; } @media (prefers-reduced-motion: reduce) { .px { display: none; } } /* Kwadraty w rogu: mniejsze, spokojniejsze. Jedno krótkie zapalenie przy wejściu, potem stoją; miga tylko jeden kwadrat, wolno i bez gaśnięcia do zera. */ .px { width: 5.5%; min-width: 22px; max-width: 44px; } /* ==== css/src/19-about.css ==== */ /* O mnie: CV, zasady, osoba, formy współpracy */ /* studio */ .st { row-gap: 56px; align-items: end; } .st h2 { grid-column: 1 / span 8; } /* współpraca */ .co__head { margin-bottom: clamp(48px, 6vw, 88px); row-gap: 20px; align-items: end; } .co__head h2 { grid-column: 1 / span 7; } .co__head p { grid-column: 9 / -1; } /* o mnie */ .cv { padding-top: clamp(150px, 15vw, 220px); } .cv__intro { margin-top: clamp(36px, 4vw, 64px); row-gap: 28px; align-items: start; } .cv__role { grid-column: 1 / span 5; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: calc(-.02em * var(--trk)); line-height: 1.2; } .cv__intro .lead { grid-column: 7 / -1; } .cv__bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cv-sec { padding-block: clamp(64px, 7vw, 112px); row-gap: 28px; align-items: start; border-top: 1px solid var(--g2); } .cv-sec:first-of-type { margin-top: clamp(56px, 6vw, 96px); } .cv-sec > h2 { grid-column: 1 / span 3; font-size: 15px; font-weight: 500; color: var(--mute); } .cv-sec > .body { grid-column: 4 / -1; } .cv-approach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gap); } .cv-approach h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: calc(-.025em * var(--trk)); margin-bottom: 8px; line-height: 1.15; } .cv-approach p { color: var(--mute); } .skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); } .skills h3 { font-size: 16px; font-weight: 600; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); margin-bottom: 10px; } .skills li { padding: 5px 0; } /* kontakt (podstrona) */ .ct { padding-top: clamp(150px, 15vw, 220px); padding-bottom: var(--sec); row-gap: 56px; align-items: start; } .ct__l { grid-column: 1 / span 5; display: grid; gap: 32px; position: sticky; top: 120px; } .ct__l h1 .line:last-child { color: var(--red); } .ct__r { grid-column: 7 / -1; display: grid; gap: 28px; } .ct__card { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--g2); } .ct__card a.big { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: calc(-.02em * var(--trk)); text-decoration: none; overflow-wrap: anywhere; } .ct__card a.big:hover { color: var(--red-ink); } .ct__row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } @media (max-width: 1100px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .st h2 { grid-column: 1 / -1; } .co__head h2, .co__head p { grid-column: 1 / -1; } .cv__role, .cv__intro .lead { grid-column: 1 / -1; } .cv-sec > h2, .cv-sec > .body { grid-column: 1 / -1; } .cv-approach { grid-template-columns: 1fr; } .ct__l, .ct__r { grid-column: 1 / -1; position: static; } } @media (max-width: 560px) { .skills { grid-template-columns: 1fr 1fr; } } .write .sf__err, .ct__form .sf__err { color: var(--error); } .write .sf__err::before, .ct__form .sf__err::before { background: var(--error); } .write .bad input[type="text"], .write .bad textarea, .ct__form .bad input[type="text"], .ct__form .bad textarea { border-bottom-color: var(--error); } .write .sf__check input:checked + span::before, .ct__form .sf__check input:checked + span::before { background-color: var(--ink); } .ct__form { padding: clamp(24px, 3vw, 44px); background: var(--g1); border-radius: var(--r); } /* 3.7 · O mnie: bez dużego imienia i nazwiska. Nagłówkiem strony (H1) jest rola, imię i nazwisko zostaje w małej linii nad nim. */ .cv__kick { margin-bottom: 24px; } .cv__intro--top { margin-top: 0; } .cv__intro--top .cv__role { grid-column: 1 / span 7; font-family: var(--fh); font-weight: 700; font-size: clamp(34px, 3.8vw, 60px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; } .cv__intro--top .lead { grid-column: 9 / -1; padding-top: .4em; } @media (max-width: 860px) { .cv__intro--top .cv__role, .cv__intro--top .lead { grid-column: 1 / -1; padding-top: 0; } } /* 3.8 · Hero podstron: mniejsze tytuły */ .ph .h1, .ct__l .h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; } .ct__form .kf .sf__err { color: var(--error); } .ct__form .kf .sf__err::before { background: var(--error); } .cv-ap { margin-top: clamp(64px, 7vw, 112px); } .cv--rest .cv-sec:first-of-type { margin-top: 0; border-top: 0; } /* małe nagłówki-etykiety (O mnie: Kompetencje, Współpraca…) = kicker */ html:root body .cv-sec > h2 { font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html:root body .cv__intro--top { row-gap: var(--s-head); } html:root body .cv__intro--top .cv__role { grid-column: 1 / span 7; } html:root body .cv__intro--top .lead { grid-column: 1 / span 6; padding-top: 0; } html:root body .cv__intro--top .cv__bar { grid-column: 1 / span 7; } html:root body .cv__ph { grid-column: 9 / -1; grid-row: 1 / span 3; margin: 0; align-self: start; aspect-ratio: 4 / 5; border-radius: calc(var(--r) * 1.3); background: var(--g1); display: grid; place-items: center; color: var(--mute); font-size: var(--t-small); text-align: center; padding: 24px; border: 1px dashed var(--g3); } @media (max-width: 860px) { html:root body .cv__ph { grid-column: 1 / -1; grid-row: auto; order: 5; width: min(100%, 420px); aspect-ratio: 4 / 4.4; } html:root body .cv__intro--top :is(.cv__role, .lead, .cv__bar) { grid-column: 1 / -1; } html:root body .ct { display: flex; flex-direction: column; row-gap: var(--s-head); } html:root body .ct__l { display: contents; } html:root body .ct__l > div { order: 1; } html:root body .ct__l > .lead { order: 2; } html:root body .ct__r { order: 3; } html:root body .ct__l > .ct__card { order: 4; } html:root body .ct__l > .tlink { order: 5; align-self: flex-start; } } @media (min-width: 861px) and (max-width: 1279px) { /* 861–1279 px: szersze kolumny dla H1 O mnie i metadanych case study */ html:root body .cv__intro--top .cv__role { grid-column: 1 / span 8; } } @media (min-width: 861px) { html:root body .cv__intro--top .cv__role { grid-column: 1 / span 7; } html:root body .cv__intro--top .lead { grid-column: 1 / span 6; } } html:root body .cv__ph { grid-column: 8 / -1; grid-row: 1 / span 4; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; background: var(--g1); box-shadow: inset 0 0 0 1.5px var(--g2); color: var(--mute); font-size: var(--t-cap); line-height: 1.5; text-align: center; } html:root body .cv__ph--img { box-shadow: none; background: var(--g1); } .cv__ph--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cv-xp { margin-top: clamp(72px, 9vw, 144px); padding-bottom: clamp(72px, 9vw, 144px); } .cv-xp__grid { align-items: end; row-gap: 20px; border-top: 1px solid var(--g2); padding-top: clamp(28px, 3vw, 44px); } .cv-xp__y { grid-column: 1 / span 6; margin: 0; font-family: var(--fh); font-size: var(--t-display); font-weight: var(--w-display); line-height: .9; letter-spacing: var(--tr-display, -.04em); color: inherit; font-variant-numeric: tabular-nums; } .cv-xp__b { grid-column: 8 / -1; display: grid; gap: 6px; } .cv-xp__k { margin: 0 0 14px; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .cv-xp__role { margin: 0; font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } .cv-xp__org { margin: 0 0 12px; font-size: var(--t-small); color: var(--mute); } .cv-xp__desc { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--mute); max-width: 34em; } @media (max-width: 860px) { html:root body .cv__intro--top :is(.cv__role, .lead, .cv__bar) { grid-column: 1 / -1; } html:root body .cv__intro--top .cv__role { order: 1; } html:root body .cv__ph { order: 2; grid-row: auto; grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 5; } html:root body .cv__intro--top .lead { order: 3; } html:root body .cv__intro--top .cv__bar { order: 4; } .cv-xp__y, .cv-xp__b { grid-column: 1 / -1; } .cv-xp__y { font-size: clamp(72px, 26vw, 140px); } } @media (min-width: 861px) and (max-width: 1100px) { html:root body .cv__intro--top .cv__role, html:root body .cv__intro--top .cv__bar { grid-column: 1 / span 7; } } /* ==== css/src/20-contact.css ==== */ /* Zakończenie strony i kontakt (.end) */ .end :focus-visible, .sf :focus-visible { outline-color: var(--ink); } [tabindex="-1"]:focus { outline: none; } .end .lead { font-weight: 400; color: var(--ink); } .mail { border: 1.5px solid var(--g2); border-radius: 16px; overflow: hidden; } .mail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 16px 20px; border-bottom: 1.5px solid var(--g2); font-size: 15px; } .mail dt { color: var(--mute); } .mail dd { font-weight: 500; overflow-wrap: anywhere; } .mail pre { margin: 0; padding: 18px 20px; font-family: var(--f); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; } /* kontakt — zakończenie */ .end { background: var(--red); color: var(--ink); padding-top: var(--sec); padding-bottom: clamp(56px, 7vw, 104px); border-radius: calc(var(--r) * 1.6) calc(var(--r) * 1.6) 0 0; } .end h2 { grid-column: 1 / -1; font-size: var(--fs-xl); font-weight: 500; letter-spacing: calc(-.055em * var(--trk)); line-height: .9; color: var(--paper); } .end__direct { display: grid; gap: 6px; } .end__direct a { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; letter-spacing: calc(-.03em * var(--trk)); text-decoration: none; color: var(--paper); width: fit-content; } .end__direct a:hover { color: var(--ink); } .end__r { grid-column: 7 / -1; background: var(--paper); border-radius: var(--r); padding: clamp(24px, 3vw, 44px); display: grid; gap: 24px; } .end__r h3 { font-size: 26px; font-weight: 500; letter-spacing: calc(-.025em * var(--trk)); } @media (max-width: 860px) { .end__r { grid-column: 1 / -1; } } @media (max-width: 560px) { .end h2 { font-size: min(12.4vw, 60px); } } .end__r .form .row { grid-template-columns: 1fr 1fr; } @media (max-width: 1100px) { .end__r .form .row { grid-template-columns: 1fr; } } /* 6. Kontakt: formularz w trzech krokach na czerwonym tle, bez białej karty. */ .end__r--step { background: none; padding: 0; border-radius: 0; gap: 0; align-self: start; } .end__book { background: none; border: 0; padding: 0 0 4px; cursor: pointer; font-size: 16px; color: var(--ink); } .end .sf__q, .sf__q { font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: calc(-.04em * var(--trk)); line-height: 1; display: flex; gap: 16px; align-items: baseline; } .end__r--step .preview { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 2.6vw, 36px); } .end__r--step .sf-done { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 2.6vw, 36px); } /* A · ciemny kontakt, formularz na białej karcie, czerwona stopka */ [data-contact="dark"] .end { background: var(--ink); color: var(--paper); } [data-contact="dark"] .end h2 { color: var(--paper); } [data-contact="dark"] .end h2 .line:last-child { color: var(--red); } [data-contact="dark"] .end .lead { color: #E9E9EC; } [data-contact="dark"] .end__direct a { color: var(--paper); } [data-contact="dark"] .end__direct a:hover { color: var(--red); } [data-contact="dark"] .end__book { color: #E9E9EC; } [data-contact="dark"] .end :focus-visible { outline-color: var(--paper); } /* B · jasny kontakt (jasnoszare tło, biała karta), czerwona stopka */ /* wspólne: formularz na białej karcie */ :is([data-contact="dark"], [data-contact="light"]) .end__r--step { background: var(--paper); color: var(--ink); border-radius: var(--r); padding: clamp(22px, 3vw, 44px); box-shadow: 0 30px 80px -50px rgba(0,0,0,.5); } :is([data-contact="dark"], [data-contact="light"]) .end .sf :focus-visible { outline-color: var(--red-deep); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__opt input:focus-visible + span, :is([data-contact="dark"], [data-contact="light"]) .end .sf__chip input:focus-visible + span, :is([data-contact="dark"], [data-contact="light"]) .end .sf__check input:focus-visible + span::before, :is([data-contact="dark"], [data-contact="light"]) .end .sf__next:focus-visible, :is([data-contact="dark"], [data-contact="light"]) .end .sf__send:focus-visible { outline-color: var(--red-deep); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__opt input:checked + span { background: var(--red-deep); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__opt input:checked + span i { color: var(--paper); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__prog li.on::before, :is([data-contact="dark"], [data-contact="light"]) .end .sf__prog li.done::before { background: var(--red); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__err { color: var(--error); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__err::before { background: var(--error); } :is([data-contact="dark"], [data-contact="light"]) .end .bad input[type="text"], :is([data-contact="dark"], [data-contact="light"]) .end .bad textarea { border-bottom-color: var(--error); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__field input:focus, :is([data-contact="dark"], [data-contact="light"]) .end .sf__field textarea:focus { border-bottom-color: var(--red-deep); box-shadow: 0 2px 0 0 var(--red-deep); } :is([data-contact="dark"], [data-contact="light"]) .end__r--step .preview, :is([data-contact="dark"], [data-contact="light"]) .end__r--step .sf-done { padding: 0; } :is([data-contact="dark"], [data-contact="light"]) .end__r--step { grid-column: 7 / -1; align-self: stretch; } @media (max-width: 860px) { :is([data-contact="dark"], [data-contact="light"]) .end__r--step { grid-column: 1 / -1; } } .end__book { text-align: left; } @media (max-width: 400px) { :is([data-contact="dark"], [data-contact="light"]) .end__r--step { padding: 20px 18px; } } :is(.hero-t, .h1, .h2, .h3, .write h2, .work__t, .step h3, .idx .nm, .cs h1, .next .nm, .fcard h3, .principle h3, .cv__name, .cv-approach h3, .sf__q, .pfo__cap b, .of4__t, .of4__name, .pw__t, .pw__step h3) { font-family: var(--fh); font-weight: 700; } .end--split { padding-bottom: var(--sec); } .end__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; align-items: stretch; } .end__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; } .end--split h2 { font-family: var(--fh); font-size: clamp(44px, 4.5vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: .95; } .end--split .end__intro > .lead { max-width: 30em; font-size: var(--fs-body); } .end--split .end__direct { margin-top: auto; padding-top: 24px; } .end--split .end__direct a { font-family: var(--fh); font-weight: 700; } .end--split .end__r--step { grid-column: 7 / -1; align-self: stretch; } @media (max-width: 960px) { .end__intro, .end--split .end__r--step { grid-column: 1 / -1; } .end--split .end__direct { margin-top: 8px; padding-top: 0; } } @media (max-width: 560px) { .end--split h2 { font-size: min(11vw, 46px); } } .end { --end-p: 0; --end-ins: calc(var(--end-p) * clamp(12px, 3vw, 48px)); --end-rad: calc(var(--r) * 1.6); clip-path: inset(0 var(--end-ins) 0 var(--end-ins) round var(--end-rad) var(--end-rad) calc(var(--end-p) * clamp(20px, 3vw, 44px)) calc(var(--end-p) * clamp(20px, 3vw, 44px))); will-change: clip-path; } @media (prefers-reduced-motion: reduce) { .end { clip-path: none; } } :is([data-contact="dark"], [data-contact="light"]) .end .sf__prog li.on::before, :is([data-contact="dark"], [data-contact="light"]) .end .sf__prog li.done::before { background: var(--red); } html[data-theme="dark"] :is(.dark, .end, .menu__panel) { --paper: #FFFFFF; --ink: #18181C; --ink-2: #222228; --g1: #1E1E23; --g2: #2E2E35; --g3: #4A4A53; --mute: #A3A3AD; --mute-d: #A3A3AD; --red-ink: #FF5C76; background: var(--ink); color: var(--paper); } html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) :is(.dark, .end) .lead { color: #E9E9EC; } html[data-theme="dark"] :is(.dark, .end, .menu__panel) { --ink: #1E1E22; --ink-2: #26262B; --g1: #26262B; --g2: #34343A; } /* Karta formularza w ciemnych wersjach: zawsze jasne tokeny (krok 1 bez czarnego tła) */ html:is([data-theme="dark"], [data-theme="alpine"], [data-theme="velocity"], [data-theme="editorial"]) .end__r--step { --paper: #FFFFFF; --ink: #111114; --g1: #F4F4F5; --g2: #E4E4E8; --g3: #C9C9CF; --mute: #63636C; --red-soft: #FDECEF; color: var(--ink); } /* Jak Alpine jasna, ale sekcje „ciemne” (zasady, przebieg, obszary, Masz projekt?, menu) są żółte z granatowym tekstem; róż zostaje kolorem akcentu. */ html[data-theme="alpine-inv"] [data-contact="dark"] .end h2 .line:last-child { color: #D42A93; } html[data-theme="alpine-inv"] [data-contact="dark"] :is(.end .lead, .end__l .lead, .end .copy-mini, .end__book) { color: #2A3360; } html[data-theme="alpine-inv"] [data-contact="dark"] .end :is(h2, .end__direct a) { color: #0A1030; } /* Paleta 1: grafitowa baza #080E14 / #151A24, róż #FF2D8A jako główny akcent, fiolet #7861FF tylko w detalach (kropki, poświaty, zaznaczenie), jasny #F4F5F7. */ html[data-theme="velocity"] [data-contact="dark"] .end h2 .line:last-child { color: var(--red); } /* Jasna odmiana palety 1: tło #F4F5F7, grafit #080E14 (tekst i sekcje ciemne), róż #FF2D8A / #E0127A jako akcent, fiolet #7861FF tylko w detalach. */ html[data-theme="velocity-light"] [data-contact="dark"] .end h2 .line:last-child { color: #FF2D8A; } /* Granatowo-czarna baza #0B0B17, róż #FF7CB9 jako akcent i przyciski z ciemnym tekstem, lila #C9B7FF w podtytułach i detalach, błękit #5361D8 w poświatach, jasny #F7F1F7. Bardziej editorial niż cyberpunk: duży nagłówek wersalikami, drugi wers różowy. */ html[data-theme="editorial"] [data-contact="dark"] .end h2 .line:last-child { color: var(--red); } html:root body .end .sf__q { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } /* numery w kolorze akcentu na ciemnych sekcjach: jaśniejszy odcień akcentu (5,6:1 zamiast 4,2:1) */ html[data-theme="dark"] :is(.dark, .end) :is(.csx__k span, .ap__n) { color: var(--red-ink); } /* ==== css/src/21-form.css ==== */ /* Formularze: krok po kroku (.sf), kontaktowy (.kf), pola, błędy, podgląd szkicu */ /* formularz */ .form { display: grid; gap: 22px; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .field { display: grid; gap: 8px; min-width: 0; } .field label, .field legend { font-size: 15px; font-weight: 500; } .field input, .field textarea { width: 100%; font: inherit; font-size: 18px; color: var(--ink); background: var(--g1); border: 1.5px solid transparent; border-radius: 14px; padding: 15px 18px; transition: border-color .2s, background-color .2s, box-shadow .2s; } .field textarea { min-height: 150px; resize: vertical; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: #7C7C85; } .field input:hover, .field textarea:hover { background: var(--g2); } .field input:focus, .field textarea:focus { outline: none; background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(241,52,80,.18); } .field .hint { font-size: 14px; color: var(--mute); } .field .err { font-size: 14px; color: var(--error); font-weight: 500; display: none; } .field.invalid input, .field.invalid textarea { border-color: var(--error); background: #FFF5F6; } .field.invalid .err { display: block; } fieldset.field { border: 0; padding: 0; margin: 0; } .form__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; } .form__note { font-size: 14px; color: var(--mute); max-width: 36em; } .form-error-summary { background: #FFF1F3; color: var(--error); border-radius: 12px; padding: 14px 18px; font-weight: 500; font-size: 15px; } .preview { display: grid; gap: 20px; } /* po wysłaniu: wysokość z treści, nawet gdy kolumna formularza jest rozciągnięta (kontakt na karcie); przycisk jak inne przyciski */ .sf-done { align-content: start; } .sf-done .actions { align-items: flex-start; } .sf-done .actions .btn { min-height: 60px; } .status { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--red-soft); border-radius: 16px; padding: 18px 20px; } .status .ico { width: 28px; height: 28px; border-radius: 50%; background: var(--red-deep); color: var(--paper); display: grid; place-items: center; font-weight: 600; font-size: 14px; } .status p { font-size: 15px; } .status strong { display: block; font-size: 17px; font-weight: 600; } .actions { display: flex; flex-wrap: wrap; gap: 10px; } .copy-state { font-size: 14px; font-weight: 500; color: var(--red-ink); min-height: 1.4em; } .forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } @media (max-width: 860px) { .forms { grid-template-columns: 1fr; } .form .row { grid-template-columns: 1fr; } } .sf { display: grid; gap: 18px; color: var(--ink); } .sf__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(17,17,20,.9); } .sf__prog { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .sf__prog b { font-weight: 600; } .sf__back { background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; flex: none; font-size: 15px; font-weight: 500; color: var(--ink); } .sf__back:hover { text-decoration: underline; text-underline-offset: 3px; } .sf__vp { position: relative; transition: height .45s var(--ease); } .sf__step { border: 0; margin: 0; padding: 8px 0 0; min-width: 0; display: grid; gap: 18px; transition: opacity .3s var(--ease), transform .45s var(--ease); } .sf__step.out { opacity: 0; transform: translateY(-12px); } .sf__step.pre { opacity: 0; transform: translateY(16px); transition: none; } .sf__q:focus { outline: none; } .sf__hint { font-size: 15px; margin-top: -6px; } .sf__opts { display: flex; flex-wrap: wrap; gap: 10px; } .sf__opt { position: relative; } .sf__opt input, .sf__chip input, .sf__check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .sf__opt span { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(17,17,20,.6); font-size: 18px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; } .sf__opt span i { width: 0; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; opacity: 0; transition: width .25s, opacity .2s; } .sf__opt:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); } .sf__opt input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; } .sf__opt input:checked + span i { width: 5px; opacity: 1; } .sf__opt input:focus-visible + span, .sf__chip input:focus-visible + span, .sf__check input:focus-visible + span::before { outline: 3px solid var(--ink); outline-offset: 3px; } .sf__field { display: grid; gap: 8px; min-width: 0; } .sf__field label, .sf__lbl { font-size: 15px; font-weight: 500; } .sf__lbl span { font-weight: 400; } .sf__field input[type="text"], .sf__field textarea { font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid rgba(17,17,20,.7); border-radius: 0; padding: 10px 0; width: 100%; transition: border-color .25s; } .sf__field textarea { resize: vertical; min-height: 96px; line-height: 1.45; } .sf__field input::placeholder, .sf__field textarea::placeholder { color: rgba(17,17,20,.66); } .sf__field input:focus, .sf__field textarea:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); } .sf__pair { display: grid; gap: 18px; } .sf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .sf__chip { position: relative; } .sf__chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(17,17,20,.6); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; } .sf__chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); } .sf__chip input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; } .sf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sf__check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; position: relative; } .sf__check span { display: flex; gap: 12px; } .sf__check span::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); margin-top: 1px; transition: background-color .2s; } .sf__check input:checked + span::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3L16 7.5' fill='none' stroke='%23F13450' stroke-width='2.2'/%3E%3C/svg%3E") center / 100% no-repeat; } .sf__err { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: center; } .sf__err::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; } .bad input[type="text"], .bad textarea { border-bottom-color: var(--ink); border-bottom-width: 2.5px; } .sf__nav { display: flex; padding-top: 6px; } .sf__nav--end { display: grid; gap: 12px; justify-items: start; } .sf__next, .sf__send { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 18px; font-family: inherit; font-weight: 500; cursor: pointer; transition: transform .35s var(--ease), background-color .3s; } .sf__next span, .sf__send span { transition: transform .45s var(--ease); } .sf__next:hover span, .sf__send:hover span { transform: translateX(5px); } .sf__next:focus-visible, .sf__send:focus-visible, .sf__back:focus-visible, .end__book:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .sf__note { font-size: 14px; max-width: 34em; } @media (max-width: 560px) { .sf__row { grid-template-columns: 1fr; } .sf__opt span { min-height: 50px; padding: 0 16px; font-size: 16px; } .sf__next, .sf__send { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .sf__vp, .sf__step { transition: none; } } /* Formularz w trzech krokach: postęp z nazwą kroku */ .sf__top { align-items: center; border-bottom: 0; padding-bottom: 4px; } .sf__prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1; min-width: 0; font-size: 14px; letter-spacing: 0; } .sf__prog li { display: grid; gap: 10px; align-content: start; min-width: 0; font-weight: 400; color: var(--ink); } .sf__prog li::before { content: ""; height: 3px; border-radius: 2px; background: rgba(17,17,20,.22); transition: background-color var(--t-2) var(--ease); } .sf__prog li.on::before, .sf__prog li.done::before { background: var(--ink); } .sf__prog li.on { font-weight: 600; } .sf__prog li.done { cursor: pointer; } .sf__prog li.done:hover .sf__pl { text-decoration: underline; text-underline-offset: 3px; } .sf__pn { font-variant-numeric: tabular-nums; margin-right: 6px; } .sf__pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .sf__prog .sf__pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .sf__q { scroll-margin-top: 104px; } .sf__q:focus-visible { outline: none; } .sf-pv, .sf-done { scroll-margin-top: 104px; } .sf__group { border: 0; margin: 0; padding: 0; min-width: 0; } .sf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sf__send[disabled] { opacity: .7; cursor: progress; } .sf__fail { font-size: 15px; font-weight: 500; background: var(--paper); color: var(--error); border-radius: var(--r-s); padding: 12px 16px; } .sf__fail .linkbtn { color: inherit; font-size: inherit; } .sf__err { color: var(--ink); } .status--ok .ico { background: var(--ink); } @media (prefers-reduced-motion: reduce) { .sf__prog li::before { transition: none; } } .cf { padding-block: var(--sec) 28px; } .cf :focus-visible { outline-color: var(--paper); } /* Focus: wyraźny w formularzu i w linkach */ .sf__field input[type="text"]:focus-visible, .sf__field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; } .tlink:focus-visible { outline-offset: 6px; } @media (hover: none) { .sf__opt span, .sf__chip span, .sf__next, .sf__send, .sf__back, .xcta, .btn { transition: transform .15s var(--ease); } .sf__opt:active span, .sf__chip:active span, .sf__next:active, .sf__send:active, .sf__back:active, .xcta:active, .btn:active { transform: scale(.97); } } #talk .sf { gap: 26px; } #talk .sf__back:hover { color: var(--ink); } #talk .sf__step { gap: 22px; justify-items: stretch; } #talk .sf__q { justify-content: center; font-size: clamp(28px, 2.6vw, 38px); } #talk .sf__hint { color: var(--mute); margin-top: -10px; } #talk .sf__opts, #talk .sf__chips { justify-content: center; gap: 10px; } #talk .sf__opt span { min-height: 52px; padding: 0 22px; font-size: 16px; box-shadow: inset 0 0 0 1.5px var(--g2); background: var(--paper); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } #talk .sf__chip span { min-height: 44px; padding: 0 18px; box-shadow: inset 0 0 0 1.5px var(--g2); background: var(--paper); } #talk .sf__opt:hover span, #talk .sf__chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); } #talk .sf__opt input:checked + span, #talk .sf__chip input:checked + span { background: var(--red-deep); color: var(--paper); box-shadow: none; } #talk .sf__opt input:focus-visible + span, #talk .sf__chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; } #talk .sf__group legend { margin-inline: auto; margin-bottom: 4px; } #talk .sf__pair { gap: 26px; } #talk .sf__field, #talk .sf__row { text-align: left; } #talk .sf__field input[type="text"], #talk .sf__field textarea { border: 1.5px solid var(--g2); border-radius: 14px; padding: 14px 16px; background: var(--paper); font-size: 17px; transition: border-color .2s, box-shadow .2s; } #talk .sf__field input[type="text"]:hover, #talk .sf__field textarea:hover { border-color: #C9C9CF; } #talk .sf__field input:focus, #talk .sf__field textarea:focus, #talk .sf__field input:focus-visible, #talk .sf__field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(241,52,80,.16); } #talk .sf__field.bad input[type="text"], #talk .sf__field.bad textarea, #talk .bad input[type="text"], #talk .bad textarea { border-color: var(--error); } #talk .sf__field input::placeholder, #talk .sf__field textarea::placeholder { color: #8A8A94; } #talk .sf__check { justify-content: flex-start; } #talk .sf__opts + .sf__err { justify-content: center; } #talk .sf__nav { justify-content: center; padding-top: 10px; } #talk .sf__nav--end { justify-items: center; } #talk .sf__next, #talk .sf__send { min-width: 220px; justify-content: center; } #talk .sf__note { margin-inline: auto; color: var(--mute); } #talk .sf-pv, #talk .sf-done { text-align: left; } @media (max-width: 560px) { #talk .sf__opt span { min-height: 48px; padding: 0 16px; font-size: 15px; } #talk .sf__next, #talk .sf__send { width: 100%; } } .sf__top { display: contents; } .sf__prog { order: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; flex: none; font-size: 14px; letter-spacing: 0; } .sf__prog li { position: relative; display: grid; grid-template-columns: none; justify-items: center; align-content: start; row-gap: 10px; text-align: center; min-width: 0; color: var(--mute); font-weight: 500; } .sf__prog li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; border-radius: 2px; background: var(--g2); transition: background-color .4s var(--ease); } .sf__prog li:first-child::before { display: none; } .sf__prog li.on::before, .sf__prog li.done::before { background: var(--red); } .sf__pn { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--g2); color: var(--mute); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); } .sf__prog li.on, .sf__prog li.done { color: var(--ink); } .sf__prog li.on { font-weight: 600; } .sf__prog li.on .sf__pn { background: var(--red-deep); color: var(--paper); box-shadow: 0 0 0 6px rgba(241,52,80,.14); } .sf__prog li.done .sf__pn { background: var(--red-soft); color: var(--red-deep); box-shadow: inset 0 0 0 2px var(--red-deep); } .sf__prog li.done:hover .sf__pn { background: var(--red-deep); color: var(--paper); } .sf__pl { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf__vp { order: 2; } .sf__back { order: 3; justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--mute); font-weight: 500; } .sf__back:hover { color: var(--ink); } .sf__back[hidden] { display: none !important; } /* Opcje bez ptaszka: wybór pokazuje kolor tła. */ .sf__opt span i { display: none; } .sf__opt input:checked + span, .sf__chip input:checked + span, :is([data-contact="dark"], [data-contact="light"]) .end .sf__opt input:checked + span { background: var(--red-deep); color: var(--paper); box-shadow: none; } /* Budżet w jednej linii */ .sf__chips--one .sf__chip span { padding: 0 14px; font-size: 14.5px; white-space: nowrap; } @media (min-width: 561px) { .sf__chips--one { flex-wrap: nowrap; } } /* Zgoda: kwadrat wyrównany do pierwszej linii tekstu, wyraźny biały znacznik. */ .sf__check { display: flex; align-items: flex-start; gap: 0; cursor: pointer; } .sf__check span { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 22px; } .sf__check span::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px #A9A9B2; transition: background-color .2s, box-shadow .2s; } .sf__check:hover span::before { box-shadow: inset 0 0 0 1.5px var(--ink); } .sf .sf__check input:checked + span::before, .kf .sf__check input:checked + span::before, #talk .sf__check input:checked + span::before { background: var(--red-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.4l3.3 3.2L16.2 7.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important; box-shadow: none !important; } .bad .sf__check span::before { box-shadow: inset 0 0 0 1.5px var(--error); } #talk .sf { gap: 28px; } /* 3.8 · Kontakt: prosty formularz */ .kf__t { font-family: var(--fh); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: -.02em; } .kf { display: grid; gap: 20px; } .kf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .kf__field { display: grid; gap: 8px; min-width: 0; } .kf__field > label:not(.sf__check) { font-size: 15px; font-weight: 500; } .kf__field > label span { color: var(--mute); font-weight: 400; } .kf__field input, .kf__field textarea { font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--g2); border-radius: 14px; padding: 14px 16px; width: 100%; transition: border-color .2s, box-shadow .2s; } .kf__field textarea { resize: vertical; min-height: 140px; line-height: 1.45; } .kf__field input:hover, .kf__field textarea:hover { border-color: #C9C9CF; } .kf__field input:focus, .kf__field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(241,52,80,.16); } .kf__field.bad input, .kf__field.bad textarea { border-color: var(--error); } .kf__field textarea::placeholder { color: #8A8A94; } .kf__send { display: grid; gap: 12px; justify-items: start; padding-top: 4px; } .kf__send .sf__note { color: var(--mute); } @media (max-width: 560px) { .kf__row { grid-template-columns: 1fr; } .kf__send .sf__send { width: 100%; justify-content: center; } } /* Kroki formularza: małe, płaskie znaczniki; ukończony = ptaszek */ .sf__pn { width: 30px; height: 30px; box-shadow: inset 0 0 0 1.5px var(--g3); background: var(--paper); font-size: 13px; } .sf__pnn { display: block; line-height: 1; } .sf__pnc { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sf__prog li::before { top: 14px; height: 1.5px; left: calc(-50% + 22px); right: calc(50% + 22px); } .sf__prog li.on .sf__pn { background: var(--ink); color: var(--paper); box-shadow: none; } .sf__prog li.done .sf__pn { background: var(--red-deep); color: #fff; box-shadow: none; } .sf__prog li.done .sf__pnn { display: none; } .sf__prog li.done .sf__pnc { display: block; } .sf__prog li.done:hover .sf__pn { background: var(--ink); color: var(--paper); } :is([data-contact="dark"], [data-contact="light"]) .end .sf__prog li.on::before, .sf__prog li.on::before { background: var(--red-deep); } #talk .sf__prog li.on .sf__pn, .end .sf__prog li.on .sf__pn { background: var(--ink); color: var(--paper); box-shadow: none; } /* Pola tekstowe: spokojna ramka, czytelny fokus bez czerwonej poświaty */ .sf__field input[type="text"], .sf__field textarea, #talk .sf__field input[type="text"], #talk .sf__field textarea, .kf__field input, .kf__field textarea { background: var(--paper); border: 1px solid var(--g3); border-radius: 12px; padding: 14px 16px; font-size: 17px; line-height: 1.45; color: var(--ink); box-shadow: 0 1px 2px rgba(17,17,20,.04); transition: border-color .2s, box-shadow .2s; } .sf__field textarea, #talk .sf__field textarea { min-height: 120px; } .sf__field input[type="text"]:hover, .sf__field textarea:hover, .kf__field input:hover, .kf__field textarea:hover, #talk .sf__field input[type="text"]:hover, #talk .sf__field textarea:hover { border-color: var(--mute); } .sf__field input:focus, .sf__field textarea:focus, .sf__field input:focus-visible, .sf__field textarea:focus-visible, #talk .sf__field input:focus-visible, #talk .sf__field textarea:focus-visible, .kf__field input:focus, .kf__field textarea:focus, :is([data-contact="dark"], [data-contact="light"]) .end .sf__field input:focus, :is([data-contact="dark"], [data-contact="light"]) .end .sf__field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,20,.08); border-radius: 12px; } .sf__field input::placeholder, .sf__field textarea::placeholder, .kf__field input::placeholder, .kf__field textarea::placeholder, #talk .sf__field input::placeholder, #talk .sf__field textarea::placeholder { color: var(--mute); opacity: .8; } .sf__field label, .kf__field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; } .bad input[type="text"], .bad textarea, :is([data-contact="dark"], [data-contact="light"]) .end .bad input[type="text"], :is([data-contact="dark"], [data-contact="light"]) .end .bad textarea { border-color: var(--error); } /* Wstecz: ten sam przycisk co Dalej, w obrysie, w jednej linii */ .sf__nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sf__back, #talk .sf__back { order: 0; justify-self: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 18px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s; } .sf__back:hover, #talk .sf__back:hover { background: var(--ink); color: var(--paper); text-decoration: none; } .sf__back svg { transition: transform .45s var(--ease); } .sf__back:hover svg { transform: translateX(-4px); } .sf__nav--end { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sf__nav--end > p { flex-basis: 100%; } #talk .sf__nav, #talk .sf__nav--end { justify-content: center; } #talk .sf__back { min-width: 160px; justify-content: center; } @media (max-width: 560px) { .sf__nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .sf__nav--end { display: grid; grid-template-columns: 1fr 1fr; } .sf__nav--end > p { grid-column: 1 / -1; } .sf__nav--end > .sf__send:first-child { grid-column: 1 / -1; } .sf__back, #talk .sf__back { min-width: 0; justify-content: center; padding: 0 16px; } .sf__next, .sf__send { padding: 0 16px; } } /* pola formularza: obramowanie widoczne na tle karty (było 1,5:1 i 2,0:1) */ html:root body :is(.kf__field input, .kf__field textarea) { border-color: #76767F; } html[data-theme="dark"] body :is(.kf__field input, .kf__field textarea) { border-color: #74747D; } html:root body :is(.kf__field.bad input, .kf__field.bad textarea) { border-color: var(--error); } /* 3.29 · Turnstile (form-send.js): bez miejsca w układzie, dopóki Cloudflare nie poprosi o potwierdzenie; wtedy nad przyciskiem */ .sf__ts:not(.on) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .sf__ts.on { order: -1; flex-basis: 100%; grid-column: 1 / -1; max-width: 100%; } /* ==== css/src/22-footer.css ==== */ /* Stopka, przycisk „Na górę” (rakieta) */ @media (max-width: 560px) { .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* 7. Stopka: cicha, jak napisy końcowe. */ .foot { background: var(--ink); color: var(--paper); padding-block: clamp(72px, 8vw, 128px) 28px; font-size: 15px; } .foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: 40px var(--gap); align-items: start; } .foot__logo { color: var(--paper); width: fit-content; } .foot__logo svg { width: 112px; } .foot .meta { margin-bottom: 12px; display: block; } .foot__col { display: grid; align-content: start; gap: 2px; color: var(--mute-d); } .foot__col ul { display: grid; gap: 2px; } .foot__col a { text-decoration: none; display: inline-block; padding: 3px 0; color: #E9E9EC; width: fit-content; transition: color .3s; } .foot__col a:hover { color: var(--red); } .foot__legal { margin-top: clamp(72px, 8vw, 128px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--mute-d); } .foot__up { background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--paper); } .foot__up span { display: inline-block; transition: transform .45s var(--ease); } .foot__up:hover span { transform: translateY(-3px); } @media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__logo { grid-column: 1 / -1; } } @media (max-width: 400px) { .foot__grid { grid-template-columns: 1fr; } } /* stopka czerwona: ciemna typografia (#111114 na #F13450 = 4,8:1) */ :is([data-contact="dark"], [data-contact="light"]) .foot { background: var(--red); color: var(--ink); } :is([data-contact="dark"], [data-contact="light"]) .foot .meta, :is([data-contact="dark"], [data-contact="light"]) .foot__col, :is([data-contact="dark"], [data-contact="light"]) .foot__legal { color: var(--ink); } :is([data-contact="dark"], [data-contact="light"]) .foot .meta { font-weight: 600; } :is([data-contact="dark"], [data-contact="light"]) .foot__col a, :is([data-contact="dark"], [data-contact="light"]) .foot__logo, :is([data-contact="dark"], [data-contact="light"]) .foot__up { color: var(--ink); } :is([data-contact="dark"], [data-contact="light"]) .foot__col a:hover { color: var(--paper); } :is([data-contact="dark"], [data-contact="light"]) .foot__legal { border-top-color: rgba(17,17,20,.25); } :is([data-contact="dark"], [data-contact="light"]) .foot :focus-visible { outline-color: var(--ink); } .foot { background: var(--red); color: var(--ink); } .foot__logo { color: var(--ink); } .foot__col { color: var(--ink); } .foot__col a { color: var(--ink); } .foot__col a:hover { color: var(--paper); } .foot__legal { border-top-color: rgba(17,17,20,.25); color: var(--ink); } .foot__up { color: var(--ink); } .foot :focus-visible { outline-color: var(--ink); } html[data-contact] .foot { background: var(--paper); color: var(--ink); } html[data-contact] .foot__logo { color: var(--ink); } html[data-contact] .foot__col { color: var(--mute); } html[data-contact] .foot__col a { color: var(--ink); } html[data-contact] .foot__col a:hover { color: var(--red-ink, var(--red)); } html[data-contact] .foot__legal { border-top-color: var(--g2, rgba(17,17,20,.12)); color: var(--mute); } html[data-contact] .foot__up { color: var(--ink); } html[data-contact] .foot__up:hover { color: var(--red-ink, var(--red)); } html[data-contact] .foot :focus-visible { outline-color: var(--ink); } html[data-contact] .foot .meta { color: var(--mute); font-weight: 500; } /* 3.7 · Stopka: ten sam układ i kolory, mocniejsza typografia, duży znak na całą szerokość i rakieta „Na górę”. */ html[data-contact] .foot { padding-block: clamp(80px, 9vw, 140px) 28px; } html[data-contact] .foot .meta { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; } .foot__col { gap: 4px; } .foot__col ul { gap: 4px; } html[data-contact] .foot__col a { position: relative; font-size: 17px; font-weight: 500; padding: 4px 0; color: var(--ink); background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease), color .3s; } html[data-contact] .foot__col a:hover { color: var(--ink); background-size: 100% 2px; } .foot__grid > .foot__col:nth-child(2) > a:first-of-type { font-family: var(--fh); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; } .foot__col p { font-size: 16px; line-height: 1.5; color: var(--mute); margin-bottom: 8px; } .foot__logo svg { width: 132px; } html[data-contact] .foot__legal { margin-top: 28px; font-size: 14px; } /* Rakieta: hover = drgania i płomień, klik = start, strona jedzie w górę, rakieta wraca od dołu. */ .foot__up { display: inline-flex; align-items: center; gap: 14px; padding: 4px 0; font-size: 14px; font-weight: 600; } html[data-contact] .foot__up:hover { color: var(--ink); } .foot__up:focus-visible { outline: none; } @media (max-width: 560px) { html[data-contact] .foot__col a { font-size: 16px; } } .foot__pp { color: inherit; } .foot__pp:hover { color: var(--red); } /* Na górę: trzy warianty: obrot | pioro (domyślny) | winda */ .foot__up.up { position: relative; display: inline-grid; place-items: center; padding: 0; min-height: 44px; color: var(--ink); } .foot__up.up span { transition: none; } .foot__up.up:hover span { transform: none; } /* Na górę: rakieta. Spokojnie unosi się na tle gwiazd; hover = drgania, większy płomień i smugi; klik = start, strona jedzie w górę, rakieta ląduje od dołu. */ .foot__up.rkt { display: inline-flex; align-items: center; gap: 16px; padding: 0; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 600; } .rkt__t { font-weight: 600; transition: transform .45s var(--ease); } .rkt__pad { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease); } .foot__up.rkt:focus-visible { outline: none; } .foot__up.rkt:focus-visible .rkt__pad { outline: 3px solid var(--red-deep); outline-offset: 4px; } .rkt__sky { position: absolute; inset: 0; z-index: -1; } .rkt__sky i { position: absolute; top: -12px; width: 2px; height: 2px; border-radius: 2px; background: var(--paper); opacity: .5; animation: rkt-star 2.8s linear infinite; transition: height .3s; } .rkt__sky i:nth-child(1) { left: 16%; animation-delay: -.4s; } .rkt__sky i:nth-child(2) { left: 30%; animation-delay: -1.9s; animation-duration: 3.4s; } .rkt__sky i:nth-child(3) { left: 46%; animation-delay: -1.1s; opacity: .3; } .rkt__sky i:nth-child(4) { left: 62%; animation-delay: -2.5s; animation-duration: 2.4s; } .rkt__sky i:nth-child(5) { left: 76%; animation-delay: -.9s; animation-duration: 3.1s; opacity: .35; } .rkt__sky i:nth-child(6) { left: 86%; animation-delay: -2.1s; } .rkt__ship { display: block; width: 26px; height: 39px; animation: rkt-bob 2.4s ease-in-out infinite; } .rkt__ship svg { display: block; width: 100%; height: 100%; overflow: visible; } .rkt__body { fill: var(--paper); } .rkt__win { fill: var(--red); stroke: var(--ink); stroke-width: 1.6; } .rkt__fin { fill: var(--red); } .rkt__noz { fill: var(--g3); } .rkt__flame { fill: #FFB23F; transform-origin: 16px 33.5px; animation: rkt-flame .18s ease-in-out infinite alternate; } .rkt__core { fill: #FFF1C2; transform-origin: 16px 33.8px; animation: rkt-flame .14s ease-in-out infinite alternate; } .rkt__puff { position: absolute; left: 50%; bottom: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); opacity: 0; z-index: -1; } @media (hover: hover) { .foot__up.rkt:hover .rkt__t { transform: translateX(-4px); } .foot__up.rkt:hover .rkt__pad { transform: scale(1.06); } .foot__up.rkt:hover .rkt__ship { animation: rkt-shake .1s linear infinite alternate; } .foot__up.rkt:hover :is(.rkt__flame, .rkt__core) { animation-name: rkt-flame-big; } .foot__up.rkt:hover .rkt__sky i { height: 9px; } } .foot__up.rkt.launch .rkt__ship { animation: rkt-launch 1s cubic-bezier(.55,0,.85,.35) forwards; } .foot__up.rkt.launch :is(.rkt__flame, .rkt__core) { animation: rkt-flame-max .08s linear infinite alternate; } .foot__up.rkt.launch .rkt__sky i { height: 16px; animation-duration: .5s; } .foot__up.rkt.launch .rkt__puff { animation: rkt-puff 1s var(--ease) forwards; } .foot__up.rkt.launch .rkt__puff:nth-of-type(2) { animation-delay: .1s; translate: -12px 0; } .foot__up.rkt.launch .rkt__puff:nth-of-type(3) { animation-delay: .2s; translate: 12px 0; } .foot__up.rkt.land .rkt__ship { animation: rkt-land .9s cubic-bezier(.22,1,.36,1) both; } @media (prefers-reduced-motion: reduce) { .rkt__ship, .rkt__flame, .rkt__core, .rkt__sky i, .rkt__puff { animation: none !important; } .rkt__flame, .rkt__core { transform: scale(.9, .6); } } html:root body .foot__up:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; } /* ==== css/src/23-pix.css ==== */ /* Piksele (.pix) */ .pix { position: relative; margin-top: clamp(24px, 3vw, 40px); } .pix__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g2); } .pix__it { border-bottom: 1px solid var(--g2); } .pix__a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; column-gap: 16px; align-items: center; padding-block: clamp(22px, 2.6vw, 40px); color: var(--ink); text-decoration: none; } .pix__a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; } .pix__n { align-self: start; padding-top: .9em; font-size: var(--t-cap); font-weight: 600; letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; transition: color .3s; } .pix__tx { display: grid; justify-items: start; gap: 10px; min-width: 0; } .pix__nm { font-family: var(--fh); font-size: var(--t-h1); font-weight: var(--w-sub); line-height: 1; letter-spacing: var(--tr-h1); transition: opacity .3s var(--ease); } .pix__d { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-small); color: var(--mute); } .pix__d b { font-weight: 600; color: var(--ink); } .pix__go { grid-column: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g3); transition: background-color .3s, box-shadow .3s, color .3s; } .pix__go svg { width: 14px; height: 14px; } .pix__th { display: none; } .pix__pv { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(280px, 30vw, 460px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none; background: var(--g1); box-shadow: 0 40px 80px -40px rgba(17,17,20,.5); opacity: 0; scale: .96; transition: opacity .3s var(--ease), scale .3s var(--ease); } .pix.show .pix__pv { opacity: 1; scale: 1; } .pix__f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .3s var(--ease); } .pix__f.on { opacity: 1; } .pix__f img { width: 100%; height: 100%; object-fit: cover; display: block; } .pix__f.contain { background: var(--ink); } .pix__f.contain img { object-fit: contain; } @media (hover: hover) and (min-width: 861px) { .pix.act .pix__it:not(.on) .pix__nm { opacity: .28; } .pix__it.on .pix__n { color: var(--red-ink); } .pix__it.on .pix__go { background: var(--ink); box-shadow: none; color: var(--paper); } } @media (hover: none), (max-width: 860px) { .pix__pv { display: none; } .pix__a { grid-template-columns: clamp(76px, 22vw, 132px) minmax(0, 1fr); column-gap: clamp(14px, 3vw, 24px); padding-block: 16px; } .pix__th { display: block; grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--g1); } .pix__th.contain { background: var(--ink); } .pix__th img { width: 100%; height: 100%; object-fit: cover; display: block; } .pix__th.contain img { object-fit: contain; } .pix__n, .pix__go { display: none; } .pix__tx { grid-column: 2; gap: 6px; } .pix__nm { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } .pix__d { font-size: var(--t-cap); } } @media (max-width: 600px) { /* telefon: obraz projektu na całą szerokość nad nazwą, zawsze widoczny (bez hovera) */ .pix__a { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 14px; column-gap: 12px; padding-block: 20px 24px; } .pix__th { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 14px; } .pix__tx { grid-column: 1; grid-row: 2; } .pix__go { display: grid; grid-column: 2; grid-row: 2; align-self: start; width: 44px; height: 44px; } .pix__d { font-size: var(--t-small); } } html[data-pfv="a"] main [data-pf-scope] .pix { display: none; } @media (prefers-reduced-motion: reduce) { .svx__m, .svx__go, .svx__go svg, .pix__pv, .pix__f, .pix__nm, .work__t, .cursor__lbl { transition: none !important; } .pix__pv { scale: 1; } } /* 3.19-START */ /* Ten sam system co 3.17 i 3.18. Ten blok tylko stroi istniejące elementy; nie dodaje nowych efektów. */ html:not([data-pfv="b"]) main [data-pf-scope] .pix { display: none; } html[data-pfv="b"] main [data-pf-scope] .pix { display: block; } /* ==== css/src/24-print.css ==== */ /* Druk */ @page { size: A4; margin: 16mm; } @media print { /* druk profilu */ body { font-size: 10.5pt; line-height: 1.45; padding: 0; } .hdr, .menu, .dlg, .widget, .skip, .foot, .cursor, .no-print, .cv__bar { display: none !important; } .print-only { display: block !important; } .rv { opacity: 1 !important; transform: none !important; } .cv { padding-top: 0; } .cv-sec { padding-block: 12pt; break-inside: avoid; } .cv-sec:first-of-type { margin-top: 16pt; } .cv-sec > h2, .cv-sec > .body { grid-column: 1 / -1; } .skills { grid-template-columns: repeat(4, 1fr); } main { opacity: 1 !important; } .cv__intro--top .cv__role { font-size: 24pt; } } /* 3.8 · O mnie */ .cv__intro--top .cv__role { font-size: clamp(36px, 4.2vw, 64px); } .cv--rest { padding-top: 0; } /* ==== css/src/25-overrides.css ==== */ /* Nadpisania między komponentami, które muszą być na końcu kaskady */ .end__direct .row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; } /* Stopka: bez wielkiego logo i bez „Kopiuj” */ .end__direct .row { gap: 0; } /* ==== css/src/26-not-found.css ==== */ /* Strona 404 (js/src/views/not-found.js): duże „404” z kapsułą zamiast zera, nagłówek, lista „Może szukasz”. Tylko klasy .nf / .nf-go; kolory z tokenów obu motywów. */ .nf { padding-top: var(--s-top); padding-bottom: clamp(48px, 5vw, 80px); } .nf .kick { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: clamp(8px, 1vw, 16px); } .nf .kick a { text-decoration: none; } .nf .kick a:hover { color: var(--ink); text-decoration: underline; } .nf__code { display: flex; align-items: center; gap: .04em; margin: 0 0 clamp(28px, 3.4vw, 52px) -.04em; font-family: var(--fh); font-weight: 700; font-size: clamp(112px, 25vw, 380px); line-height: .8; letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; } .nf__code .dsg-capsule { --dsg-w: 1.2em; --dsg-h: .66em; --dsg-y: 0em; --dsg-delay: .15s; margin: 0 .05em; } .nf__grid { row-gap: var(--s-head); align-items: end; } .nf__t { grid-column: 1 / span 7; font-size: var(--t-h1); font-weight: var(--w-sub); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } .nf__lead { grid-column: 1 / span 6; color: var(--mute); max-width: 34em; } .nf__cta { grid-column: 8 / -1; grid-row: 1 / span 2; justify-self: end; align-self: end; margin: 0; } .nf-go { padding-bottom: var(--s-sec); } .nf-go__h { grid-column: 1 / span 3; margin: 0; padding-top: 22px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--t-cap); } .nf-go__list { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); } .nf-go__list li { border-bottom: 1px solid var(--g2); } .nf-go__a { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 8px 24px; padding: clamp(18px, 1.8vw, 26px) 0; color: var(--ink); text-decoration: none; } .nf-go__n { font-size: 14px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; } .nf-go__nm { font-family: var(--fh); font-size: var(--t-h3); font-weight: var(--w-sub); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); transition: transform .45s var(--ease); } .nf-go__tx { color: var(--mute); font-size: var(--t-small); line-height: 1.5; } .nf-go__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--g3); color: var(--ink); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease); } .nf-go__a:hover .nf-go__nm, .nf-go__a:focus-visible .nf-go__nm { transform: translateX(8px); } .nf-go__a:hover .nf-go__ic, .nf-go__a:focus-visible .nf-go__ic { background: var(--red-deep, var(--red)); border-color: var(--red-deep, var(--red)); color: #fff; transform: rotate(-45deg); } .nf-go__a:hover .nf-go__n { color: var(--red-ink, var(--red)); } @media (max-width: 860px) { .nf__t, .nf__lead, .nf__cta { grid-column: 1 / -1; grid-row: auto; justify-self: start; } .nf-go__h, .nf-go__list { grid-column: 1 / -1; } .nf-go__h { padding-top: 0; } .nf-go__a { grid-template-columns: 2.4em minmax(0, 1fr) auto; } .nf-go__tx { grid-column: 2 / 3; grid-row: 2; } .nf-go__ic { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .nf-go__nm, .nf-go__ic { transition: none; } .nf-go__a:hover .nf-go__nm, .nf-go__a:focus-visible .nf-go__nm { transform: none; } } /* czerwona kropka jak w haśle na stronie głównej; w CSS, żeby treść nagłówka pozostała „Nie znaleziono strony” */ .nf__t::after { content: "." / ""; color: var(--red); }