:root {
color-scheme: light;
--paper: #F2EBDC;
--paper-deep: #E8DFCB;
--ink: #1A1614;
--ink-soft: #2D2622;
--muted: #75695C;
--muted-soft: #A89B8A;
--accent: #C8331B;
--accent-deep: #9E2614;
--ink-rgb: 26, 22, 20; /* atramentowe bordery/nakladki */
--paper-rgb: 242, 235, 220; /* papierowe highlighty */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
/* CIEMNY MOTYW - wlaczany recznie przelacznikiem: .
Odwracamy relacje papier/atrament i podmieniamy trojki RGB, dzieki czemu
wszystkie bordery i nakladki (oparte o --ink-rgb / --paper-rgb) odwracaja
sie spojnie i pozostaja widoczne na ciemnym tle. */
:root[data-theme="dark"] {
color-scheme: dark;
--paper: #1A1511;
--paper-deep: #241D17;
--ink: #F2EBDC;
--ink-soft: #E4DCCD;
--muted: #A89B8A;
--muted-soft: #80735F;
--accent: #E2502F;
--accent-deep: #C8331B;
--ink-rgb: 242, 235, 220;
--paper-rgb: 26, 21, 17;
}
/* Ciemny motyw - punktowe poprawki powierzchni zaszytych na sztywno
(nie korzystaja ze zmiennych, wiec nie odwracaja sie automatycznie). */
:root[data-theme="dark"] .bm-page { background-color: var(--paper-deep); }
/* System w trybie ciemnym, a uzytkownik NIE wybral ciemnego recznie:
zostajemy w jasnej, papierowej palecie i wypisujemy strone z force-dark
webview (deklaracja obslugi dark + jawne jasne tlo). */
/* Rendering motywu zalezy WYLACZNIE od data-theme (przelacznik), nie od
ustawienia systemowego telefonu. Dzieki temu strona wyglada tak samo
niezaleznie od tego, czy system jest w trybie jasnym czy ciemnym.
(color-scheme ustawiamy punktowo: light dla :root, dark dla [data-theme=dark]). */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
background-color: var(--paper);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
body {
background: var(--paper);
color: var(--ink);
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
cursor: default;
}
/* Paper texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.015) 1px, transparent 1px),
radial-gradient(circle at 70% 80%, rgba(0,0,0,0.02) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
z-index: 1;
opacity: 0.6;
}
/* Typography */
.serif { font-family: 'Fraunces', serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
/* ==================== HEADER ==================== */
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 24px 48px;
display: flex;
justify-content: space-between;
align-items: center;
/* Bez backdrop-filter: blur - na fixed headerze blur byl przeliczany w kazdej
klatce scrolla (szarpanie na desktopie i mobile). Prawie nieprzezroczyste
tlo motywu (--paper-rgb, light/dark) daje ten sam efekt warstwy bez kosztu
per-klatka. */
background: rgba(var(--paper-rgb), 0.97);
border-bottom: 1px solid rgba(var(--ink-rgb), 0.06);
transition: padding 0.4s var(--ease);
}
/* Po przewinięciu nagłówek tylko spłaszcza się w pionie, poziomy padding
zostaje z właściwego breakpointu (48px desktop / 24px mobile), żeby logo,
przełącznik i CTA się nie ściskały na telefonie */
header.scrolled {
padding-top: 16px;
padding-bottom: 16px;
}
/* === NOWE LOGO: Color bar + wordmark === */
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.logo-bar {
display: flex;
flex-direction: column;
width: 5px;
height: 38px;
flex-shrink: 0;
gap: 0;
}
.logo-bar-c { flex: 1; background: #00B7E5; }
.logo-bar-m { flex: 1; background: #E5007A; }
.logo-bar-y { flex: 1; background: #FFD800; }
.logo-bar-k { flex: 1; background: var(--ink); }
.logo-text {
display: flex;
flex-direction: column;
gap: 0;
}
.logo-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 450;
font-style: italic;
font-size: 20px;
line-height: 1;
color: var(--ink);
letter-spacing: -0.01em;
}
.logo-name em {
font-style: italic;
color: var(--accent);
}
.logo-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
padding-left: 1px;
}
@media (prefers-reduced-motion: reduce) {
.logo-bar-c, .logo-bar-m, .logo-bar-y, .logo-bar-k { transition: none; }
}
@media (max-width: 600px) {
.logo-name { font-size: 17px; }
.logo-bar { height: 32px; width: 4px; }
}
/* === Przełącznik języka PL/EN === */
.header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.lang-toggle {
background: transparent;
border: 1px solid rgba(var(--ink-rgb), 0.2);
border-radius: 100px;
padding: 6px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
transition: border-color 0.25s var(--ease);
flex-shrink: 0;
}
.lang-toggle:hover { border-color: var(--ink); }
.lang-opt { transition: color 0.2s ease; }
.lang-opt.is-active { color: var(--accent); font-weight: 500; }
.lang-sep { opacity: 0.35; }
/* Przelacznik motywu jasny/ciemny */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 30px; padding: 0;
background: transparent;
border: 1px solid rgba(var(--ink-rgb), 0.2);
border-radius: 100px;
color: var(--muted); cursor: pointer;
flex-shrink: 0;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { display: block; width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* ===== Pasek postepu czytania ===== */
.read-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 200; pointer-events: none; background: transparent;
}
.read-progress span {
display: block; height: 100%; width: 100%;
background: var(--accent);
transform: scaleX(0); transform-origin: left center;
will-change: transform;
}
/* ===== Przycisk "do gory" ===== */
.to-top {
position: fixed; bottom: 24px; right: 24px;
width: 46px; height: 46px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--ink); color: var(--paper);
border: 1px solid rgba(var(--ink-rgb), 0.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
cursor: pointer; z-index: 900; padding: 0;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.25s var(--ease);
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top svg { display: block; width: 20px; height: 20px; }
@media (max-width: 600px) {
.to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.to-top { transition: opacity 0.2s linear, visibility 0.2s; transform: none; }
.to-top.visible { transform: none; }
}
/* ===== Przyklejony przycisk "Zapytaj o wycene" (tylko mobile) ===== */
.mobile-cta { display: none; }
@media (max-width: 900px) {
.mobile-cta {
position: fixed; bottom: 18px; left: 18px; z-index: 850;
display: inline-flex; align-items: center; gap: 9px;
padding: 12px 18px;
background: var(--ink); color: var(--paper);
border-radius: 100px; text-decoration: none;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.25s var(--ease);
}
.mobile-cta.visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Strony bez plywajacego przycisku wyceny: Kontakt (jest tam formularz),
FAQ i Polityka prywatnosci - ukrycie permanentne, niezalezne od scrolla
i od klasy .visible dodawanej w JS. */
body[data-page="kontakt"] .mobile-cta,
body[data-page="faq"] .mobile-cta,
body[data-page="polityka-prywatnosci"] .mobile-cta { display: none !important; }
.mobile-cta:hover, .mobile-cta:active { background: var(--accent); }
.mobile-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.mobile-cta { transition: opacity 0.2s linear, visibility 0.2s; transform: none; }
.mobile-cta.visible { transform: none; }
}
@media (max-width: 600px) {
.lang-toggle { padding: 5px 10px; font-size: 10px; }
}
nav ul {
display: flex;
gap: 40px;
list-style: none;
}
nav a {
color: var(--ink);
text-decoration: none;
font-size: 14px;
font-weight: 500;
position: relative;
transition: color 0.3s var(--ease);
}
nav a::after {
content: '';
position: absolute;
left: 0; bottom: -4px;
width: 0; height: 1px;
background: var(--accent);
transition: width 0.4s var(--ease);
}
nav a:hover { color: var(--accent); }
nav a:hover::after { width: 100%; }
.header-cta {
padding: 10px 20px;
background: var(--ink);
color: var(--paper);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.4s var(--ease);
display: inline-flex;
align-items: center;
gap: 8px;
}
.header-cta:hover {
background: var(--accent);
transform: scale(1.03);
}
.header-cta svg { transition: transform 0.4s var(--ease); }
.header-cta:hover svg { transform: translate(2px, -2px); }
/* ==================== HERO ==================== */
.hero {
min-height: 100vh;
padding: 160px 48px 80px;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
position: relative;
z-index: 2;
}
.hero-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 32px;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.hero-headline {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(56px, 9vw, 156px);
line-height: 1.06;
letter-spacing: -0.04em;
color: var(--ink);
max-width: 1400px;
}
.hero-headline em {
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
color: var(--accent);
}
.hero-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end;
margin-top: 60px;
}
.hero-desc {
font-size: 19px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 480px;
}
.hero-actions {
display: flex;
gap: 16px;
justify-content: flex-end;
align-items: center;
}
.btn-primary {
padding: 18px 32px;
background: var(--ink);
color: var(--paper);
border: none;
border-radius: 100px;
font-size: 15px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.4s var(--ease);
}
.btn-primary:hover {
background: var(--accent);
transform: scale(1.03);
}
.btn-primary svg { transition: transform 0.4s var(--ease); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost {
padding: 18px 28px;
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
border-radius: 100px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all 0.4s var(--ease);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--paper);
}
/* Decorative ornament */
.hero-ornament {
position: absolute;
right: 48px;
top: 50%;
transform: translateY(-50%);
writing-mode: vertical-rl;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted-soft);
z-index: 3;
}
/* ==================== CLIENT MARQUEE ==================== */
.marquee-section {
padding: 60px 0;
border-top: 1px solid rgba(var(--ink-rgb), 0.08);
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
overflow: hidden;
position: relative;
z-index: 2;
}
.marquee-label {
text-align: center;
margin-bottom: 32px;
}
.marquee {
display: flex;
gap: 80px;
animation: scroll 70s linear infinite;
width: max-content;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
}
.marquee-item {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 500;
font-style: italic;
color: var(--muted);
white-space: nowrap;
}
.marquee-dot {
color: var(--accent);
font-style: normal;
}
@keyframes scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* ==================== BIBLIOTEKA (Bookshelf) ==================== */
.biblioteka {
padding: 140px 48px 120px;
position: relative;
z-index: 2;
}
.section-head {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
margin-bottom: 100px;
align-items: end;
}
.section-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(48px, 6vw, 96px);
line-height: 0.95;
letter-spacing: -0.03em;
}
.section-title em {
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
color: var(--accent);
}
.section-intro {
font-size: 18px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 520px;
}
/* The shelf */
.shelf-wrapper {
position: relative;
perspective: 2000px;
}
.shelf {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 5px;
padding: 0 20px;
min-height: 380px;
position: relative;
transform-style: preserve-3d;
}
.book {
position: relative;
cursor: pointer;
transition: transform 0.6s var(--ease);
transform-origin: bottom center;
display: flex;
align-items: flex-end;
}
/* miękki cień kontaktowy u podstawy, książka „siada" na półce z cieniem */
.book::after {
content: '';
position: absolute;
bottom: -3px;
left: -6px;
right: -6px;
height: 18px;
background: radial-gradient(ellipse 68% 100% at 50% 0%, rgba(0,0,0,0.34), transparent 76%);
filter: blur(3px);
z-index: -1;
pointer-events: none;
}
.book-spine {
--foil: rgba(242, 235, 220, 0.9);
width: var(--w, 38px);
height: var(--h, 320px);
background-color: var(--color, #8B3A2E);
/* faktura płótna (pionowy splot) + zaokrąglenie grzbietu z miękkim, lekko
przesuniętym połyskiem, wrażenie wypukłej, oprawionej książki */
background-image:
repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
linear-gradient(90deg,
rgba(0,0,0,0.42) 0%,
rgba(0,0,0,0.06) 8%,
rgba(255,255,255,0.10) 30%,
rgba(255,255,255,0.17) 47%,
rgba(255,255,255,0.03) 63%,
rgba(0,0,0,0.08) 92%,
rgba(0,0,0,0.44) 100%);
position: relative;
border-radius: 2px 2px 0 0;
overflow: hidden;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.12),
inset 0 -12px 18px -10px rgba(0,0,0,0.38),
0 6px 16px rgba(0,0,0,0.20);
transition: box-shadow 0.5s var(--ease);
}
/* kapitałka u góry (rozjaśnienie) i u dołu (cień styku z półką) */
.book-spine::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 7px;
background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0));
pointer-events: none;
}
.book-spine::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 9px;
background: linear-gradient(0deg, rgba(0,0,0,0.30), rgba(0,0,0,0));
pointer-events: none;
}
/* Górne i dolne podwójne linie foliowe */
.bs-rule {
position: absolute;
left: 17%; right: 17%;
height: 3px;
border-top: 1px solid var(--foil);
border-bottom: 1px solid var(--foil);
opacity: 0.5;
pointer-events: none;
}
.bs-rule--top { top: 16px; }
.bs-rule--bottom { bottom: 16px; }
/* Drobny ornament foliowy przy końcach grzbietu */
.bs-orn {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 7px;
line-height: 1;
color: var(--foil);
opacity: 0.55;
pointer-events: none;
}
.bs-orn--top { top: 6px; }
.bs-orn--bottom { bottom: 6px; }
/* Pionowe linie „szyldzika" flankujące tytuł, tylko część książek (wariacja) */
.bs-panel {
position: absolute;
top: 34px; bottom: 34px;
left: 27%; right: 27%;
border-left: 1px solid var(--foil);
border-right: 1px solid var(--foil);
opacity: 0.3;
pointer-events: none;
}
.book-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transform-origin: center;
white-space: nowrap;
font-family: 'Fraunces', serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--foil);
text-transform: uppercase;
width: var(--h, 320px);
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,0.28);
}
.book:hover {
transform: translateY(-24px);
z-index: 5;
}
.book:hover .book-spine {
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.12),
inset 0 -12px 18px -10px rgba(0,0,0,0.38),
0 24px 46px rgba(0,0,0,0.30);
}
/* The shelf board */
.shelf-board {
height: 18px;
background:
repeating-linear-gradient(91deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 7px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
linear-gradient(180deg, #56432F 0%, #43321F 22%, #34281C 60%, #241A13 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 14px 26px rgba(0,0,0,0.24);
margin-top: -3px;
position: relative;
z-index: 6;
border-radius: 3px;
}
.shelf-board::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(180deg, rgba(255,235,200,0.22), transparent);
border-radius: 3px 3px 0 0;
}
.shelf-board::after {
content: '';
position: absolute;
top: 100%; left: 3%; right: 3%;
height: 46px;
background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,0,0,0.20), transparent 72%);
filter: blur(3px);
}
/* ==================== INTERAKTYWNA BIBLIOTEKA: OTWIERANA KSIĄŻKA ==================== */
.book-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.book-modal.is-open { display: block; }
.book-modal-backdrop {
position: absolute; inset: 0;
background: rgba(18, 14, 10, 0.62);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
opacity: 0; transition: opacity 0.4s ease;
}
.book-modal.is-open .book-modal-backdrop { opacity: 1; }
.book-modal-stage {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.book-modal-close {
position: absolute; top: 12px; right: 12px;
width: 40px; height: 40px; border-radius: 50%;
/* liquid glass: pólprzezroczyste, matowe szklo, widoczne na kremowej karcie */
background: rgba(var(--ink-rgb), 0.34);
-webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
border: 1px solid rgba(var(--paper-rgb), 0.5);
color: var(--paper);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
font-size: 21px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
z-index: 5;
}
.book-modal-close:hover { background: rgba(200, 51, 27, 0.88); border-color: transparent; transform: rotate(90deg); }
.book-modal-close:focus { outline: none; }
.book-modal-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.book-open {
position: relative;
width: min(780px, 94vw);
perspective: 1500px;
opacity: 0; transform: translateY(12px) scale(0.94);
transition: opacity 0.45s ease, transform 0.55s var(--ease);
}
.book-modal.is-open .book-open { opacity: 1; transform: translateY(0) scale(1); }
.book-spread {
position: relative;
display: flex;
transform-style: preserve-3d;
border-radius: 3px 5px 5px 3px;
box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 12px 30px rgba(0,0,0,0.4);
}
.bm-page {
position: relative;
width: 50%;
min-height: 470px;
box-sizing: border-box;
background-color: #F6F0E2;
background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 4px);
padding: 46px 42px;
transition: transform 0.7s var(--ease);
}
.bm-page--left {
transform-origin: right center; transform: rotateY(-92deg);
border-radius: 3px 0 0 3px;
box-shadow: inset -24px 0 38px -26px rgba(0,0,0,0.45);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.bm-page--right {
transform-origin: left center; transform: rotateY(92deg);
border-radius: 0 5px 5px 0;
box-shadow: inset 24px 0 38px -26px rgba(0,0,0,0.45);
display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.book-modal.is-open .bm-page { transform: rotateY(0deg); }
/* grzbiet w środku (kolor klikniętej książki) */
.bm-spine {
position: absolute; top: 0; bottom: 0; left: 50%;
width: 15px; transform: translateX(-50%);
background: linear-gradient(90deg, rgba(0,0,0,0.4), var(--bm-color, #5C4838) 50%, rgba(0,0,0,0.4));
z-index: 3; pointer-events: none;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
/* lewa kartka, dekoracyjna „okładka" */
.bm-plate {
--foil: rgba(242, 235, 220, 0.92); /* foil okladki zawsze kremowy, niezaleznie od motywu */
width: 152px; height: 206px;
background-color: var(--bm-color, #5C4838);
background-image: linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.32) 100%);
border-radius: 2px 3px 3px 2px;
box-shadow: 0 16px 32px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
padding: 22px 18px; text-align: center;
}
.bm-plate-ttl { font-family: 'Fraunces', serif; font-size: 14px; line-height: 1.3; color: var(--foil); text-transform: uppercase; letter-spacing: 0.04em; }
.bm-plate-mark { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--foil); opacity: 0.7; }
.bm-cmyk { display: flex; gap: 6px; }
.bm-cmyk i { width: 12px; height: 12px; border-radius: 2px; }
.bm-cmyk i:nth-child(1) { background: #00B7E5; }
.bm-cmyk i:nth-child(2) { background: #E5007A; }
.bm-cmyk i:nth-child(3) { background: #FFD800; }
.bm-cmyk i:nth-child(4) { background: #1A1614; }
.bm-fromlib { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
/* prawa kartka, informacje */
.bm-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.bm-title { font-family: 'Fraunces', serif; font-size: 30px; line-height: 1.12; color: var(--ink); margin: 0; }
.bm-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.05em; color: var(--muted); }
.bm-role { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.6; color: var(--ink); opacity: 0.8; margin: 6px 0 0; max-width: 300px; }
.bm-cta {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
margin-top: 16px; padding: 13px 22px; border-radius: 30px;
background: var(--ink); color: var(--paper);
font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease;
}
.bm-cta:hover { transform: translateY(-2px); background: var(--accent); }
/* treść prawej kartki pojawia się po otwarciu */
.bm-page--right > * { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.book-modal.is-open .bm-page--right > * { opacity: 1; transform: translateY(0); }
.book-modal.is-open .bm-eyebrow { transition-delay: 0.46s; }
.book-modal.is-open .bm-title { transition-delay: 0.53s; }
.book-modal.is-open .bm-meta { transition-delay: 0.59s; }
.book-modal.is-open .bm-role { transition-delay: 0.65s; }
.book-modal.is-open .bm-cta { transition-delay: 0.72s; }
@media (max-width: 720px) {
.book-open { width: min(360px, 94vw); }
.book-spread { flex-direction: column; max-width: 360px; }
.bm-page { width: 100%; min-height: auto; transform: none !important; }
.bm-page--left { padding-bottom: 32px; }
.bm-page--right { padding-top: 32px; }
.bm-spine { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.book-open, .bm-page, .bm-page--right > * { transition: opacity 0.2s ease !important; transform: none !important; }
}
.shelf-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 60px;
padding-top: 32px;
border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.shelf-hint {
color: var(--muted);
font-size: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.shelf-hint-icon {
display: inline-block;
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.view-all {
color: var(--ink);
text-decoration: none;
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--ink);
padding-bottom: 4px;
transition: all 0.3s var(--ease);
}
.view-all:hover {
color: var(--accent);
border-color: var(--accent);
gap: 16px;
}
/* ==================== ABOUT / STATS ==================== */
.about {
padding: 140px 48px;
background: var(--paper-deep);
position: relative;
z-index: 2;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: start;
}
.about-text h2 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 32px;
}
.about-text h2 em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 300;
}
.about-text p {
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
margin-bottom: 24px;
max-width: 520px;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px 32px;
}
.stat {
border-top: 1px solid var(--ink);
padding-top: 20px;
}
.stat-num {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 72px;
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
display: block;
margin-bottom: 12px;
}
.stat-num em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 300;
}
.stat-label {
font-size: 14px;
color: var(--muted);
line-height: 1.4;
max-width: 200px;
}
/* ==================== USŁUGI ==================== */
.services {
padding: 140px 48px;
position: relative;
z-index: 2;
}
.services-head {
margin-bottom: 80px;
text-align: center;
}
.services-head .label { display: block; margin-bottom: 20px; }
.services-head h2 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(40px, 5vw, 80px);
line-height: 1;
letter-spacing: -0.03em;
max-width: 900px;
margin: 0 auto;
}
.services-head h2 em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 300;
}
.services-list {
max-width: 1100px;
margin: 0 auto;
border-top: 1px solid rgba(var(--ink-rgb), 0.15);
}
.service {
display: grid;
grid-template-columns: 80px 1fr 2fr auto;
gap: 40px;
padding: 32px 16px;
align-items: center;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
cursor: pointer;
transition: all 0.5s var(--ease);
position: relative;
text-decoration: none;
color: var(--ink);
}
.service::before {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease);
z-index: -1;
}
.service:hover {
color: var(--paper);
padding-left: 32px;
}
.service:hover::before { transform: scaleX(1); }
.service:hover .service-num { color: var(--accent); }
.service:hover .service-desc { color: rgba(var(--paper-rgb), 0.7); }
.service-num {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--muted);
transition: color 0.4s var(--ease);
}
.service-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 32px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.service-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.5;
transition: color 0.4s var(--ease);
}
.service-arrow {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid currentColor;
display: grid;
place-items: center;
transition: transform 0.5s var(--ease);
}
.service:hover .service-arrow {
transform: rotate(-45deg);
background: var(--accent);
border-color: var(--accent);
}
/* ==================== CONTACT / FOOTER ==================== */
.contact {
padding: 160px 48px 60px;
background: var(--ink);
color: var(--paper);
position: relative;
z-index: 2;
}
.contact-headline {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(56px, 9vw, 156px);
line-height: 0.92;
letter-spacing: -0.04em;
margin-bottom: 60px;
}
.contact-headline em {
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
color: var(--accent);
}
.contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding-top: 60px;
border-top: 1px solid rgba(var(--paper-rgb), 0.15);
margin-top: 80px;
}
.contact-info > div .label {
color: rgba(var(--paper-rgb), 0.5);
margin-bottom: 12px;
display: block;
}
.contact-info a {
color: var(--paper);
text-decoration: none;
font-family: 'Fraunces', serif;
font-size: 24px;
font-weight: 500;
transition: color 0.3s var(--ease);
}
.contact-info a:hover { color: var(--accent); }
.contact-info p {
font-family: 'Fraunces', serif;
font-size: 24px;
color: var(--paper);
line-height: 1.3;
}
.footer-bottom {
margin-top: 100px;
padding-top: 32px;
border-top: 1px solid rgba(var(--paper-rgb), 0.1);
display: flex;
justify-content: space-between;
align-items: baseline;
color: rgba(var(--paper-rgb), 0.5);
font-size: 13px;
}
/* ==================== SCROLL ANIMATIONS ==================== */
/* === 01 SKŁAD KSIĄŻEK, Interaktywna typografia (typelab) === */
.typelab-section { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.typelab { max-width: 1200px; margin: 56px auto 0; display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.typelab-controls { display: flex; flex-direction: column; gap: 30px; }
.typelab-group { display: flex; flex-direction: column; gap: 12px; }
.typelab-glabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.typelab-glabel .typelab-val { color: var(--accent); font-weight: 500; }
.typelab-toggle { display: flex; border: 1px solid rgba(var(--ink-rgb),0.16); border-radius: 2px; overflow: hidden; }
.typelab-opt { flex: 1; background: transparent; border: none; cursor: pointer; padding: 10px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: background var(--ease) 0.3s, color var(--ease) 0.3s; }
.typelab-opt + .typelab-opt { border-left: 1px solid rgba(var(--ink-rgb),0.16); }
.typelab-opt:hover { color: var(--ink); }
.typelab-opt.is-active { background: var(--ink); color: var(--paper); }
.typelab-range { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: rgba(var(--ink-rgb),0.2); outline: none; cursor: pointer; }
.typelab-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px rgba(var(--ink-rgb),0.2); cursor: pointer; }
.typelab-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px rgba(var(--ink-rgb),0.2); cursor: pointer; }
.typelab-preview { background: var(--paper-deep); border: 1px solid rgba(var(--ink-rgb),0.1); border-radius: 3px; padding: 48px 44px; min-height: 320px; display: flex; align-items: center; position: relative; }
.typelab-preview::before { content: ''; position: absolute; top: 14px; left: 14px; width: 12px; height: 12px; border-top: 1px solid rgba(var(--ink-rgb),0.25); border-left: 1px solid rgba(var(--ink-rgb),0.25); }
.typelab-preview::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 12px; height: 12px; border-bottom: 1px solid rgba(var(--ink-rgb),0.25); border-right: 1px solid rgba(var(--ink-rgb),0.25); }
.typelab-sample { font-family: 'Fraunces', serif; font-size: 16px; line-height: 1.55; max-width: 58ch; color: var(--ink); margin: 0 auto; transition: font-size 0.25s var(--ease), line-height 0.25s var(--ease), max-width 0.3s var(--ease); }
.typelab-readout { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.typelab-readout b { color: var(--accent); font-weight: 500; }
@media (max-width: 860px) {
.typelab-section { padding: 72px 24px; }
.typelab { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
.typelab-preview { padding: 36px 28px; min-height: 0; }
}
/* === STRONA GŁÓWNA, Opinie klientów === */
.opinie-section { padding: 120px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.opinie-section .section-header { text-align: center; }
.opinie-grid { max-width: 1200px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.opinie-card { display: flex; flex-direction: column; gap: 26px; padding-top: 28px; border-top: 2px solid var(--ink); position: relative; }
.opinie-mark { font-family: 'Fraunces', serif; font-size: 56px; line-height: 0.6; color: var(--accent); font-style: italic; height: 28px; }
.opinie-quote { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1.5; color: var(--ink-soft); font-style: italic; flex: 1; }
.opinie-author { display: flex; flex-direction: column; gap: 3px; }
.opinie-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.opinie-role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.opinie-ph { color: var(--muted-soft, #A89B8A); }
/* Link do pelnej listy referencji (pod sekcja opinii) */
.opinie-more { max-width: 1200px; margin: 56px auto 0; text-align: center; }
.opinie-more-link { display: inline-flex; align-items: center; gap: 9px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.25); transition: gap 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.opinie-more-link:hover { gap: 13px; color: var(--accent); border-color: var(--accent); }
.opinie-more-link svg { width: 16px; height: 16px; flex-shrink: 0; }
/* ==================== PODSTRONA: REFERENCJE ==================== */
.page-referencje { padding-top: 60px; }
.ref-body { padding: 24px 48px 110px; }
.ref-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ref-card { display: flex; flex-direction: column; gap: 18px; padding: 34px; background: var(--paper-deep); border-radius: 3px; border: 1px solid rgba(var(--ink-rgb), 0.08); }
.ref-card-top { display: flex; flex-direction: column; gap: 9px; padding-bottom: 18px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.ref-name { font-family: 'Fraunces', serif; font-size: 23px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.ref-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ref-excerpt { font-family: 'Fraunces', serif; font-size: 17px; line-height: 1.55; color: var(--ink-soft); font-style: italic; flex: 1; margin: 0; }
.ref-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; }
.ref-link:hover { gap: 12px; color: var(--accent-deep, var(--accent)); }
.ref-arrow { width: 17px; height: 17px; flex-shrink: 0; }
/* Pasek zaufania (statystyki) pod wstepem */
.ref-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 620px; margin: 46px auto 0; }
.ref-stat { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 38px; }
.ref-stat-num { font-family: 'Fraunces', serif; font-size: 42px; font-weight: 500; line-height: 1; color: var(--ink); }
.ref-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ref-stat-sep { width: 1px; height: 42px; background: rgba(var(--ink-rgb), 0.15); flex-shrink: 0; }
/* Glowa karty: cudzyslow-akcent (jak w opiniach) + numer porzadkowy */
.ref-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.ref-mark { font-family: 'Fraunces', serif; font-size: 52px; line-height: 0.6; height: 26px; color: var(--accent); font-style: italic; }
.ref-num { font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: rgba(var(--ink-rgb), 0.16); }
@media (max-width: 760px) {
.opinie-more { margin-top: 40px; }
.ref-body { padding: 16px 24px 72px; }
.ref-grid { grid-template-columns: 1fr; gap: 18px; }
.ref-card { padding: 26px; }
.ref-stats { max-width: none; gap: 26px 0; margin-top: 34px; }
.ref-stat { padding: 0 22px; }
.ref-stat-num { font-size: 34px; }
.ref-stat-sep { display: none; }
}
.opinie-note { max-width: 1200px; margin: 44px auto 0; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-soft, #A89B8A); }
@media (max-width: 980px) { .opinie-grid { grid-template-columns: 1fr; gap: 44px; } .opinie-section { padding: 80px 24px; } }
/* === Karta do pobrania (checklista PDF) === */
.dlcard-section { padding: 90px 48px 90px; position: relative; z-index: 2; }
.dlcard { max-width: 1200px; margin: 0 auto; background: var(--paper-deep); border: 1px solid rgba(var(--ink-rgb),0.12); border-radius: 3px; padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.dlcard-text { flex: 1; min-width: 260px; }
.dlcard-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.dlcard-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin-top: 12px; }
.dlcard-title em { font-style: italic; color: var(--accent); }
.dlcard-desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; max-width: 60ch; }
.dlcard-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 16px 26px; border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: transform var(--ease) 0.3s, background var(--ease) 0.3s; }
.dlcard-btn:hover { transform: translateY(-2px); background: var(--accent); }
.dlcard-btn .dlcard-meta { font-size: 9px; opacity: 0.6; letter-spacing: 0.1em; }
@media (max-width: 720px) { .dlcard { padding: 32px 26px; } .dlcard-section { padding: 64px 24px 64px; } .dlcard-title { font-size: 22px; } }
/* === Pole załącznika w formularzu === */
.form-file-wrap { position: relative; }
.form-file { display: flex; align-items: center; gap: 14px; border: 1px dashed rgba(var(--ink-rgb),0.25); border-radius: 2px; padding: 14px 16px; cursor: pointer; transition: border-color var(--ease) 0.3s, background var(--ease) 0.3s; }
.form-file:hover { border-color: var(--accent); background: rgba(200,51,27,0.03); }
.form-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-file-icon { color: var(--muted); flex-shrink: 0; }
.form-file-text { font-size: 13px; color: var(--muted); line-height: 1.4; }
.form-file.has-file { border-style: solid; border-color: var(--ink); }
.form-file.has-file .form-file-text { color: var(--ink); }
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Page load stagger for hero - triggered by .page-main.is-loaded */
.page-main .hero-meta { opacity: 0; }
.page-main.is-loaded .hero-meta { animation: fadeUp 1s var(--ease) 0.2s forwards; }
/* hero-headline animation handled by CMYK plate registration below */
.page-main .hero-bottom { opacity: 0; }
.page-main.is-loaded .hero-bottom { animation: fadeUp 1s var(--ease) 0.9s forwards; }
.page-main .hero-ornament { opacity: 0; }
.page-main.is-loaded .hero-ornament { animation: fadeIn 1s var(--ease) 1.2s forwards; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ==================== CMYK SEPARATION + MAGNETIC TYPOGRAPHY ==================== */
.hero-headline {
position: relative;
}
.cmyk-plate {
font: inherit;
letter-spacing: inherit;
line-height: inherit;
color: inherit;
}
.cmyk-c, .cmyk-m, .cmyk-y {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
mix-blend-mode: multiply;
}
.cmyk-c { color: #00B7E5; opacity: 0; }
.cmyk-m { color: #E5007A; opacity: 0; }
.cmyk-y { color: #FFD800; opacity: 0; }
.cmyk-k {
color: var(--ink);
position: relative;
z-index: 1;
opacity: 0;
}
.page-main.is-loaded .cmyk-c { animation: register-c 1.8s cubic-bezier(0.65, 0, 0.25, 1) 0.4s forwards; }
.page-main.is-loaded .cmyk-m { animation: register-m 1.8s cubic-bezier(0.65, 0, 0.25, 1) 0.55s forwards; }
.page-main.is-loaded .cmyk-y { animation: register-y 1.8s cubic-bezier(0.65, 0, 0.25, 1) 0.7s forwards; }
.page-main.is-loaded .cmyk-k { animation: cmyk-k-appear 0.5s ease 0.4s forwards; }
@keyframes register-c {
0% { transform: translate(-22px, -10px); opacity: 0; }
15% { opacity: 0.95; }
100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes register-m {
0% { transform: translate(14px, -18px); opacity: 0; }
15% { opacity: 0.95; }
100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes register-y {
0% { transform: translate(-10px, 20px); opacity: 0; }
15% { opacity: 0.95; }
100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes cmyk-k-appear {
to { opacity: 1; }
}
/* Wszystkie litery inline-block, identyczny układ we wszystkich płytach = idealna rejestracja.
Efekt magnetyczny ustawia transform tylko na .cmyk-k .letter, więc tylko one się ruszają. */
.hero-headline .letter {
display: inline-block;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
/* Responsive */
@media (max-width: 900px) {
header { padding: 20px 24px; }
nav { display: none; }
.hero { padding: 120px 24px 60px; }
.hero-bottom { grid-template-columns: 1fr; gap: 40px; }
.hero-actions { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
/* przyciski hero: jedna linia tekstu + szerokosc dopasowana do tresci.
Bez sciskania (flex-shrink:0) i bez zawijania tekstu (nowrap); jesli oba
nie mieszcza sie obok siebie, rzad sie zawija i drugi schodzi nizej. */
.hero-actions .btn-ghost,
.hero-actions .btn-primary { white-space: nowrap; flex-shrink: 0; }
.section-head { grid-template-columns: 1fr; gap: 24px; }
.about-grid { grid-template-columns: 1fr; gap: 60px; }
.stats { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.stat-num { font-size: 56px; }
.biblioteka, .about, .services, .contact { padding-left: 24px; padding-right: 24px; }
.service { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 20px 8px; }
.service-desc { display: none; }
.service-name { font-size: 22px; }
.contact-info { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.shelf { gap: 2px; min-height: 200px; } /* skalowanie liczy JS (fitShelf), zeby zmiescic cala polke w pionie */
.shelf-wrapper { margin-left: -24px; margin-right: -24px; } /* full-bleed: maksimum szerokosci na polke */
.hero-ornament { display: none; }
}
/* ==================== PAGE SWITCHER (router) ==================== */
.page {
display: none;
}
.page.active {
display: block;
opacity: 0;
transition: opacity 0.28s var(--ease);
}
.page.active.is-loaded {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.page.active { opacity: 1; transition: none; }
}
/* nav active link */
nav a.active {
color: var(--accent);
}
nav a.active::after {
width: 100%;
}
/* ==================== STYLES FROM SERVICE PAGES ==================== */
/* ==================== HEADER ==================== */
nav a.active { color: var(--accent); }
nav a:hover::after, nav a.active::after { width: 100%; }
/* ==================== BREADCRUMB ==================== */
.breadcrumb {
padding: 120px 48px 0;
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}
.breadcrumb a {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.3s var(--ease);
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep {
color: var(--muted-soft);
font-size: 11px;
}
.breadcrumb-current {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink);
}
/* ==================== HERO ==================== */
.page-service .hero {
min-height: auto;
padding: 60px 48px 80px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.hero-number {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 300;
font-size: 180px;
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--accent);
font-style: italic;
}
.hero-number-label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-top: 16px;
font-style: normal;
}
.hero-content h1 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(48px, 7vw, 112px);
line-height: 1.06;
letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: 32px;
}
.hero-content h1 em {
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
color: var(--accent);
}
.hero-lead {
font-size: 22px;
line-height: 1.45;
color: var(--ink-soft);
max-width: 720px;
margin-bottom: 40px;
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 350;
font-style: italic;
}
.page-service .hero-actions {
display: flex;
gap: 16px;
justify-content: flex-start;
align-items: center;
}
/* ==================== SECTION BASE ==================== */
section.content-section {
padding: 100px 48px;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}
/* Wszystkie naglowki sekcji (label + h2 otwierajace nowy temat) wysrodkowane,
spojnie z reszta strony. Tresc pod nimi i tak jest juz wysrodkowana (margin auto). */
.section-header { text-align: center; }
.content-section .section-header { margin-bottom: 48px; }
.section-header h2 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1.02;
letter-spacing: -0.025em;
}
.section-header h2 em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 300;
}
.section-body-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Sekcja "Jak wygląda współpraca" (strona główna): wyśrodkowanie wzgledem
sekcji uslug powyzej + wiekszy przeswit pod naglowkiem, zeby linia pierwszego
kroku nie nachodzila na zejscia liter w slowie "wspolpraca". Tylko #wspolpraca. */
#wspolpraca .section-header { text-align: center; margin-bottom: 60px; }
#wspolpraca .section-body-content { margin: 0 auto; }
/* ==================== CO OBEJMUJE - lista usług ==================== */
.obejmuje-list {
list-style: none;
columns: 2;
column-gap: 60px;
}
.obejmuje-list li {
padding: 14px 0;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
font-size: 16px;
color: var(--ink-soft);
break-inside: avoid;
display: flex;
align-items: flex-start;
gap: 12px;
}
.obejmuje-list li::before {
content: '';
flex-shrink: 0;
margin-top: 9px;
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
}
/* ==================== PROCES PRACY - timeline ==================== */
.process-timeline {
position: relative;
}
.process-step {
display: grid;
grid-template-columns: 80px 1fr;
gap: 40px;
padding: 32px 0;
border-top: 1px solid rgba(var(--ink-rgb), 0.1);
transition: padding 0.4s var(--ease);
}
.process-step:last-child {
border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.process-step:hover {
padding-left: 16px;
}
.process-num {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 300;
font-style: italic;
font-size: 56px;
line-height: 0.95;
color: var(--accent);
letter-spacing: -0.02em;
}
.process-content h3 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 8px;
color: var(--ink);
}
.process-content p {
font-size: 16px;
color: var(--ink-soft);
line-height: 1.55;
max-width: 640px;
}
/* ==================== REALIZACJE - book grid ==================== */
.realizacje-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.realizacja-card {
padding: 24px 24px 64px;
background: var(--paper-deep);
border: 1px solid rgba(var(--ink-rgb), 0.06);
transition: all 0.4s var(--ease);
cursor: pointer;
position: relative;
overflow: hidden;
}
.realizacja-card:hover {
transform: translateY(-6px);
background: var(--ink);
color: var(--paper);
}
.realizacja-card:hover .realizacja-meta,
.realizacja-card:hover .realizacja-arrow {
color: rgba(var(--paper-rgb), 0.6);
}
.realizacja-spine {
width: 100%;
height: 6px;
background: var(--spine-color, #C8331B);
margin-bottom: 24px;
transition: height 0.4s var(--ease);
}
.realizacja-card:hover .realizacja-spine {
height: 12px;
}
.realizacja-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 12px;
color: inherit;
}
.realizacja-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
transition: color 0.4s var(--ease);
}
.realizacja-desc {
font-size: 14px;
line-height: 1.5;
color: inherit;
opacity: 0.85;
}
.realizacja-arrow {
position: absolute;
bottom: 24px;
right: 24px;
color: var(--muted);
transition: all 0.4s var(--ease);
}
.realizacja-card:hover .realizacja-arrow {
transform: rotate(-45deg);
}
/* ==================== SPECYFIKACJA - definition list ==================== */
.spec-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 60px;
}
.spec-item {
padding: 20px 0;
border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.spec-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.spec-value {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 19px;
color: var(--ink);
line-height: 1.4;
}
.spec-value em {
font-style: italic;
color: var(--accent);
}
/* ==================== CTA BOX ==================== */
.cta-section {
padding: 120px 48px;
background: var(--ink);
color: var(--paper);
position: relative;
z-index: 2;
}
.cta-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.cta-label {
color: rgba(var(--paper-rgb), 0.5);
margin-bottom: 24px;
display: block;
}
.cta-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(40px, 6vw, 88px);
line-height: 0.98;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.cta-title em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 300;
}
.cta-desc {
font-size: 19px;
line-height: 1.5;
color: rgba(var(--paper-rgb), 0.75);
max-width: 620px;
margin: 0 auto 40px;
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 350;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary-on-dark {
padding: 18px 32px;
background: var(--paper);
color: var(--ink);
border: none;
border-radius: 100px;
font-size: 15px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.4s var(--ease);
}
.btn-primary-on-dark:hover {
background: var(--accent);
color: var(--paper);
transform: scale(1.03);
}
.btn-ghost-on-dark {
position: relative;
padding: 18px 28px;
background: transparent;
color: var(--paper);
border: 1px solid rgba(var(--paper-rgb), 0.3);
border-radius: 100px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all 0.4s var(--ease);
}
.btn-ghost-on-dark:hover {
background: rgba(var(--paper-rgb), 0.1);
border-color: var(--paper);
}
/* Klik na numer = kopiowanie: czerwone migniecie + dymek "Skopiowano".
Dymek jasny, by kontrastowal z ciemna sekcja CTA. */
.cmask[data-cmcopy] { position: relative; cursor: pointer; }
/* Potwierdzenie kopiowania WEWNATRZ elementu: tresc (numer/mail) znika,
pojawia sie wysrodkowane "Skopiowano" z ptaszkiem. Bez skoku ukladu. */
.cm-num { display: inline-flex; transition: opacity 0.25s var(--ease); }
.cm-copied {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: flex-start; gap: 9px;
opacity: 0; pointer-events: none;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 500; line-height: 1;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent);
transition: opacity 0.25s var(--ease);
white-space: nowrap;
}
.cm-copied svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-ghost-on-dark .cm-copied { justify-content: center; }
.cmask.is-copied .cm-num { opacity: 0; }
.cmask.is-copied .cm-copied { opacity: 1; }
/* miekka ramka tylko dla wariantu przyciskowego (CTA uslug) */
.cmask.btn-ghost-on-dark.is-copied { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* Dwa rowne przyciski w sekcji CTA (taka sama szerokosc, wysrodkowana tresc) */
.cta-actions .btn-primary-on-dark,
.cta-actions .btn-ghost-on-dark {
min-width: 230px;
justify-content: center;
}
.cta-actions .btn-ghost-on-dark { display: inline-flex; align-items: center; }
/* ==================== INNE USŁUGI ==================== */
.other-services {
padding: 100px 48px;
position: relative;
z-index: 2;
}
.other-services-head {
text-align: center;
margin-bottom: 60px;
}
.other-services-head h2 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1.02;
letter-spacing: -0.025em;
}
.other-services-head h2 em {
font-style: italic;
color: var(--accent);
}
.other-services-list {
max-width: 1100px;
margin: 0 auto;
border-top: 1px solid rgba(var(--ink-rgb), 0.15);
}
.other-service {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 40px;
padding: 28px 16px;
align-items: center;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
cursor: pointer;
text-decoration: none;
color: var(--ink);
transition: all 0.5s var(--ease);
position: relative;
}
.other-service::before {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease);
z-index: -1;
}
.other-service:hover {
color: var(--paper);
padding-left: 32px;
}
.other-service:hover::before { transform: scaleX(1); }
.other-service:hover .other-service-num { color: var(--accent); }
.other-service-num {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--muted);
transition: color 0.4s var(--ease);
}
.other-service-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 28px;
letter-spacing: -0.01em;
}
.other-service-arrow {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid currentColor;
display: grid;
place-items: center;
transition: all 0.5s var(--ease);
}
.other-service:hover .other-service-arrow {
transform: rotate(-45deg);
background: var(--accent);
border-color: var(--accent);
}
/* ==================== FOOTER ==================== */
footer {
padding: 60px 48px 32px;
background: var(--paper-deep);
position: relative;
z-index: 2;
border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 24px;
}
.footer-back {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 19px;
font-style: italic;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-back:hover {
color: var(--accent);
gap: 18px;
}
.footer-copyright {
font-size: 13px;
color: var(--muted);
}
/* ==================== SCROLL ANIMATIONS ==================== */
/* Hero animation on page load - triggered by .is-loaded class */
.page-service .breadcrumb { opacity: 0; }
.page-service.is-loaded .breadcrumb { animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
.page-service .hero-number { opacity: 0; }
.page-service.is-loaded .hero-number { animation: fadeUp 1s var(--ease) 0.3s forwards; }
.page-service .hero-content > * { opacity: 0; }
.page-service.is-loaded .hero-content > *:nth-child(1) { animation: fadeUp 1s var(--ease) 0.4s forwards; }
.page-service.is-loaded .hero-content > *:nth-child(2) { animation: fadeUp 1s var(--ease) 0.55s forwards; }
.page-service.is-loaded .hero-content > *:nth-child(3) { animation: fadeUp 1s var(--ease) 0.7s forwards; }
/* Responsive */
@media (max-width: 900px) {
.breadcrumb { padding: 100px 24px 0; flex-wrap: wrap; }
.page-service .hero { padding: 40px 24px 60px; grid-template-columns: 1fr; gap: 24px; }
.hero-number { font-size: 100px; }
.obejmuje-list { columns: 1; }
.realizacje-grid { grid-template-columns: 1fr; gap: 20px; }
.spec-grid { grid-template-columns: 1fr; }
section.content-section { padding: 60px 24px; }
.cta-section { padding: 80px 24px; }
.other-services { padding: 60px 24px; }
.other-service { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 20px 8px; }
.other-service-name { font-size: 20px; }
.process-step { grid-template-columns: 50px 1fr; gap: 20px; }
.process-num { font-size: 38px; }
.process-content h3 { font-size: 22px; }
footer { padding: 40px 24px 24px; }
.footer-inner { flex-direction: column; align-items: flex-start; }
}
/* ==================== UNIQUE SERVICE COMPONENTS ==================== */
/* === 01 SKŁAD KSIĄŻEK, Anatomia rozkładówki === */
.anatomy-section { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.anatomy-wrap { max-width: 1200px; margin: 60px auto 0; position: relative; }
.anatomy-spread {
background: #FBF7ED;
aspect-ratio: 1.6 / 1;
position: relative;
box-shadow: 0 30px 80px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
border-radius: 2px;
}
/* Linia środkowa - oprawa */
.anatomy-spread::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
background: rgba(120, 100, 80, 0.18);
transform: translateX(-50%);
}
/* Baseline grid (tylko fake - kilka linii) */
.anatomy-baseline {
position: absolute;
top: 14%; bottom: 18%;
left: 14%; right: 14%;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 17px,
rgba(200, 51, 27, 0.08) 17px,
rgba(200, 51, 27, 0.08) 18px
);
pointer-events: none;
}
/* Fake tekst na stronach */
.anatomy-text {
position: absolute;
background-image: repeating-linear-gradient(
to bottom,
rgba(40, 30, 20, 0.55) 0,
rgba(40, 30, 20, 0.55) 3px,
transparent 3px,
transparent 18px
);
}
.anatomy-text-left { top: 14%; bottom: 18%; left: 14%; width: 30%; }
.anatomy-text-right { top: 14%; bottom: 18%; right: 14%; width: 30%; }
/* Paginacja */
.anatomy-pagenum {
position: absolute;
bottom: 5.5%;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 13px;
color: #75623F;
}
.anatomy-pagenum.left { left: 14%; }
.anatomy-pagenum.right { right: 14%; }
/* Kolontytuł */
.anatomy-header {
position: absolute;
top: 6%;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #A89B8A;
}
.anatomy-header.left { left: 14%; }
.anatomy-header.right { right: 14%; }
/* Etykiety - linie i opisy */
.anatomy-label {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: var(--paper);
padding: 4px 8px;
border: 1px solid var(--accent);
border-radius: 2px;
white-space: nowrap;
cursor: help;
transition: all 0.3s var(--ease);
z-index: 5;
}
.anatomy-label:hover {
background: var(--accent);
color: var(--paper);
transform: scale(1.05);
}
.anatomy-label::before {
content: '';
position: absolute;
background: var(--accent);
z-index: -1;
}
/* Konkretne pozycje etykiet */
.anatomy-label.l-gutter { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.anatomy-label.l-margin-top { top: -10px; left: 50%; transform: translate(-50%, -100%); }
.anatomy-label.l-margin-top::before { top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 16px; }
.anatomy-label.l-margin-outer-left { top: 50%; left: -20px; transform: translate(-100%, -50%); }
.anatomy-label.l-margin-outer-left::before { left: 100%; top: 50%; transform: translateY(-50%); height: 1px; width: 28px; }
.anatomy-label.l-margin-outer-right { top: 50%; right: -20px; transform: translate(100%, -50%); }
.anatomy-label.l-margin-outer-right::before { right: 100%; top: 50%; transform: translateY(-50%); height: 1px; width: 28px; }
.anatomy-label.l-baseline { top: 30%; left: 8%; transform: translateX(-100%); }
.anatomy-label.l-baseline::before { left: 100%; top: 50%; transform: translateY(-50%); height: 1px; width: 24px; }
.anatomy-label.l-pagenum { bottom: -10px; left: 14%; transform: translateY(100%); }
.anatomy-label.l-pagenum::before { bottom: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 16px; }
.anatomy-label.l-header-line { top: -10px; right: 14%; transform: translateY(-100%); }
.anatomy-label.l-header-line::before { top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 26px; }
.anatomy-legend {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid rgba(var(--ink-rgb),0.08);
text-align: center;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 16px;
color: var(--muted);
}
/* === 02 KATALOGI, Galeria-wystawa === */
.gallery-wystawa { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
max-width: 1400px;
margin: 60px auto 0;
}
.gallery-item {
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.5s var(--ease);
background: var(--item-color, #5C2828);
aspect-ratio: 3/4;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
color: rgba(255,255,255,0.95);
}
.gallery-item:hover { transform: scale(1.02); z-index: 5; }
.gallery-item.span-2 { grid-column: span 4; }
.gallery-item.span-3 { grid-column: span 6; aspect-ratio: 3/2; }
.gallery-item.span-1 { grid-column: span 3; }
.gallery-item-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 8px;
}
.gallery-item-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 22px;
line-height: 1.1;
margin-bottom: 6px;
}
.gallery-item-meta {
font-size: 12px;
color: rgba(255,255,255,0.65);
}
.gallery-item::after {
content: '';
position: absolute;
top: 24px; right: 24px;
width: 20px; height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
opacity: 0.6;
transition: transform 0.4s var(--ease);
}
.gallery-item:hover::after { transform: rotate(-45deg); }
/* Typy katalogów - mini cards */
.types-section { padding: 80px 48px 100px; position: relative; z-index: 2; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }
.types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 60px auto 0; }
.type-card {
padding: 32px 24px;
border: 1px solid rgba(var(--ink-rgb),0.12);
transition: all 0.4s var(--ease);
}
.type-card:hover { background: var(--ink); color: var(--paper); }
.type-card-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 28px;
color: var(--accent);
margin-bottom: 16px;
display: block;
}
.type-card-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 20px;
margin-bottom: 12px;
line-height: 1.15;
}
.type-card-desc {
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
.type-card:hover .type-card-desc { color: rgba(var(--paper-rgb),0.7); }
/* === 03 E-BOOKI, Tabela formatów + mockupy === */
.format-chooser { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.format-table-wrap { max-width: 1200px; margin: 60px auto 0; overflow-x: auto; }
.format-table {
width: 100%;
border-collapse: collapse;
background: var(--paper);
font-size: 14px;
}
.format-table th, .format-table td {
padding: 18px 20px;
text-align: left;
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
vertical-align: top;
}
.format-table thead th {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
border-bottom: 1px solid rgba(var(--ink-rgb),0.25);
}
.format-table thead th:first-child { color: var(--ink); }
.format-table thead th.format-col {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-style: italic;
font-size: 18px;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
}
.format-table tbody td:first-child {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
width: 22%;
}
.format-table tbody td.cell-best { color: var(--accent); font-weight: 500; }
/* Device mockups */
.devices-section { padding: 80px 48px 100px; position: relative; z-index: 2; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }
.devices-grid {
display: grid;
grid-template-columns: 1fr 1.4fr 0.7fr;
gap: 60px;
align-items: end;
max-width: 1100px;
margin: 80px auto 0;
}
.device { position: relative; }
.device-frame {
background: #2A2520;
border-radius: 8px;
padding: 12px;
box-shadow: 0 30px 60px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1);
}
.device-screen {
background: #F2EBDC;
aspect-ratio: var(--aspect, 3/4);
padding: 20px;
overflow: hidden;
}
.device.kindle .device-frame { background: #1A1614; border-radius: 4px; padding: 14px 14px 32px; }
.device.kindle .device-screen { aspect-ratio: 3/4; background: #E8DFCB; }
.device.ipad .device-frame { background: #B5B5B5; border-radius: 14px; padding: 14px; }
.device.ipad .device-screen { aspect-ratio: 4/3; background: #FAF6EC; }
.device.phone .device-frame { background: #1A1614; border-radius: 24px; padding: 10px 8px; }
.device.phone .device-screen { aspect-ratio: 9/19; background: #F2EBDC; padding: 14px; }
/* Wnętrze ekranów */
.screen-content {
font-family: 'Fraunces', serif;
font-size: 10px;
line-height: 1.4;
color: #1A1614;
}
.screen-content h4 {
font-style: italic;
margin-bottom: 8px;
font-size: 12px;
font-weight: 500;
}
.screen-content p {
margin-bottom: 6px;
text-align: justify;
font-size: 8.5px;
}
.screen-content::before {
content: '';
display: block;
width: 40%; height: 1px;
background: var(--accent);
margin-bottom: 6px;
}
.device-label {
text-align: center;
margin-top: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.device-format {
text-align: center;
margin-top: 6px;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 13px;
color: var(--accent);
}
/* === 04 PRZYGOTOWANIE DRUKU, Drukarnie + problemy === */
.printers-section { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.printers-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
max-width: 1200px;
margin: 60px auto 0;
}
.printer-card {
padding: 36px 24px;
background: var(--paper-deep);
border: 1px solid rgba(var(--ink-rgb),0.06);
transition: all 0.4s var(--ease);
position: relative;
}
.printer-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.printer-mark {
width: 32px; height: 32px;
background: var(--ink);
color: var(--paper);
display: grid;
place-items: center;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 18px;
margin-bottom: 20px;
transition: background 0.4s var(--ease);
}
.printer-card:hover .printer-mark { background: var(--accent); }
.printer-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 18px;
line-height: 1.2;
margin-bottom: 8px;
color: var(--ink);
}
.printer-spec {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.printer-desc { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
/* Problems section */
.problems-section { padding: 100px 48px; background: var(--paper-deep); position: relative; z-index: 2; }
.problems-list { max-width: 1100px; margin: 60px auto 0; }
.problem-item {
display: grid;
grid-template-columns: 100px 1fr 1.5fr;
gap: 40px;
padding: 28px 16px;
border-top: 1px solid rgba(var(--ink-rgb),0.12);
align-items: start;
}
.problem-item:last-child { border-bottom: 1px solid rgba(var(--ink-rgb),0.12); }
.problem-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 38px;
line-height: 0.95;
color: var(--accent);
}
.problem-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 20px;
line-height: 1.2;
color: var(--ink);
}
.problem-title small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
font-weight: 400;
font-style: normal;
margin-top: 6px;
}
.problem-fix {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
/* === 05 RETUSZ, Before/After Slider === */
.ba-section { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.ba-grid { max-width: 1100px; margin: 60px auto 0; display: grid; gap: 80px; }
.ba-item { }
.ba-slider {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
cursor: ew-resize;
user-select: none;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
border-radius: 2px;
}
.ba-before, .ba-after {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.ba-after { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); transition: clip-path 0s; }
/* Generated "obrazy" - tylko placeholder demos */
.ba-demo-1-after { background:
radial-gradient(circle at 30% 40%, #C8704D 0%, transparent 50%),
radial-gradient(circle at 70% 60%, #E8A968 0%, transparent 50%),
linear-gradient(135deg, #A04020 0%, #5C2828 100%); }
.ba-demo-1-before { background:
radial-gradient(circle at 30% 40%, #B8A088 0%, transparent 50%),
radial-gradient(circle at 70% 60%, #C8B49C 0%, transparent 50%),
linear-gradient(135deg, #9C8870 0%, #756050 100%); }
.ba-demo-2-after {
background:
radial-gradient(ellipse 35% 50% at center, #F5E9CF 0%, #E8D8B5 70%, transparent 100%),
linear-gradient(180deg, #F5F0E5 0%, #E8DFCB 100%);
}
.ba-demo-2-before {
background:
radial-gradient(ellipse 35% 50% at center, #C8B098 0%, #A08868 70%, transparent 100%),
linear-gradient(180deg, #6B5A4A 0%, #3D2D20 50%, #2A1F18 100%);
}
.ba-demo-3-after {
background:
linear-gradient(135deg, #1F2D4A 0%, #1A1614 100%);
}
.ba-demo-3-after::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 50% 50%, transparent 35%, rgba(255,255,255,0.04) 80%, transparent 100%);
}
.ba-demo-3-before {
background:
linear-gradient(135deg, #75623F 0%, #4A3D28 100%);
}
.ba-demo-3-before::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.18) 80%, transparent 100%);
}
/* Skład: rękopis (before) vs złożona strona (after) - placeholdery do podmiany */
.ba-sklad-1-before { background: #E4DCCC; }
.ba-sklad-1-before::after {
content:''; position:absolute; inset: 8% 7%;
background: repeating-linear-gradient(180deg, rgba(80,70,60,0.5) 0 2px, transparent 2px 11px);
}
.ba-sklad-1-after { background: var(--paper); }
.ba-sklad-1-after::before {
content:''; position:absolute; left:15%; right:15%; top:13%; height:7px; background: var(--accent);
}
.ba-sklad-1-after::after {
content:''; position:absolute; inset: 24% 15% 14%;
background: repeating-linear-gradient(180deg, rgba(var(--ink-rgb),0.62) 0 2px, transparent 2px 14px);
}
.ba-sklad-2-before { background: #E4DCCC; }
.ba-sklad-2-before::after {
content:''; position:absolute; inset: 12% 8%;
background:
repeating-linear-gradient(90deg, rgba(80,70,60,0.4) 0 1px, transparent 1px 23%),
repeating-linear-gradient(180deg, rgba(80,70,60,0.45) 0 2px, transparent 2px 16px);
transform: rotate(-0.6deg);
}
.ba-sklad-2-after { background: var(--paper); }
.ba-sklad-2-after::before {
content:''; position:absolute; left:14%; right:14%; top:16%; height:8px; background: var(--ink); opacity:0.8;
}
.ba-sklad-2-after::after {
content:''; position:absolute; inset: 24% 14% 16%;
background:
repeating-linear-gradient(90deg, rgba(var(--ink-rgb),0.22) 0 1px, transparent 1px 25%),
repeating-linear-gradient(180deg, rgba(var(--ink-rgb),0.16) 0 1px, transparent 1px 20px);
}
.ba-handle {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 12px rgba(0,0,0,0.4);
z-index: 3;
transform: translateX(-50%);
pointer-events: none;
}
.ba-arrows {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 44px; height: 44px;
background: white;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
color: var(--ink);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
font-weight: 600;
}
.ba-labels {
position: absolute;
top: 20px;
left: 0; right: 0;
display: flex;
justify-content: space-between;
padding: 0 24px;
pointer-events: none;
z-index: 4;
}
.ba-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: white;
background: rgba(0,0,0,0.4);
padding: 6px 12px;
backdrop-filter: blur(4px);
}
.ba-caption {
margin-top: 20px;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: baseline;
}
.ba-caption-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 20px;
color: var(--accent);
}
.ba-caption-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 22px;
}
.ba-caption-desc {
grid-column: 2;
font-size: 15px;
color: var(--ink-soft);
line-height: 1.5;
margin-top: 4px;
}
/* === 06 FOLDERY, Wizualizator formatów === */
.formats-section { padding: 100px 48px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); position: relative; z-index: 2; }
.formats-display {
max-width: 1200px;
margin: 60px auto 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.format-box {
background: var(--paper-deep);
border: 1px solid rgba(var(--ink-rgb),0.15);
position: relative;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: all 0.4s var(--ease);
cursor: pointer;
}
.format-box:hover { border-color: var(--accent); background: var(--paper); transform: translateY(-4px); }
.format-name {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 18px;
}
.format-size {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
color: var(--muted);
margin-top: 4px;
}
.format-use {
margin-top: 8px;
font-size: 12px;
color: var(--ink-soft);
font-style: italic;
line-height: 1.3;
}
/* Pilne realizacje - express */
.express-section { padding: 100px 48px; background: var(--paper-deep); position: relative; z-index: 2; }
.express-header { text-align: center; margin-bottom: 60px; }
.express-badge {
display: inline-block;
padding: 6px 14px;
background: var(--accent);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 20px;
}
.express-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.express-step {
padding: 28px;
background: var(--paper);
text-align: center;
}
.express-day {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 14px;
color: var(--accent);
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.express-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 22px;
line-height: 1.15;
margin-bottom: 12px;
}
.express-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
/* Responsive */
@media (max-width: 900px) {
.anatomy-spread { aspect-ratio: 1.2/1; }
.anatomy-label { font-size: 8px; padding: 2px 5px; }
.anatomy-label.l-margin-outer-left, .anatomy-label.l-margin-outer-right { display: none; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-item.span-2, .gallery-item.span-3, .gallery-item.span-1 { grid-column: span 1; }
.gallery-item.span-3 { aspect-ratio: 3/4; }
.types-grid { grid-template-columns: 1fr 1fr; }
.devices-grid { grid-template-columns: 1fr; gap: 40px; max-width: 320px; }
.printers-grid { grid-template-columns: 1fr 1fr; }
.problem-item { grid-template-columns: 60px 1fr; gap: 16px; }
.problem-fix { grid-column: 2; }
.formats-display { gap: 16px; }
.express-grid { grid-template-columns: 1fr; }
.anatomy-section, .gallery-wystawa, .types-section, .format-chooser,
.devices-section, .printers-section, .problems-section,
.ba-section, .formats-section, .express-section {
padding-left: 24px; padding-right: 24px;
}
}
/* ==================== STRONA KONTAKTOWA ==================== */
.page-contact { padding-top: 60px; }
.contact-hero {
padding: 60px 48px 80px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.page-contact .hero-number {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 300;
font-size: 120px;
line-height: 0.8;
color: var(--accent);
font-style: italic;
}
.page-contact .hero-content h1 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 350;
font-size: clamp(54px, 7vw, 96px);
line-height: 0.96;
letter-spacing: -0.022em;
color: var(--ink);
margin-bottom: 32px;
}
.page-contact .hero-content h1 em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 350;
}
.page-contact .hero-lead {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.4;
color: var(--ink-soft);
max-width: 600px;
}
/* Główna sekcja - form + info */
.contact-main {
padding: 100px 48px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 100px;
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Form */
.contact-form-wrap { }
.contact-form-title {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 40px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
}
.contact-form {
display: grid;
gap: 32px;
}
.form-field {
display: grid;
gap: 8px;
}
.form-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.form-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.form-label .required {
color: var(--accent);
font-weight: 700;
}
.form-input, .form-textarea, .form-select {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: var(--ink);
background: transparent;
border: none;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
padding: 10px 0;
transition: border-color 0.3s var(--ease);
outline: none;
width: 100%;
border-radius: 0;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-bottom-color: var(--accent);
}
.form-input::placeholder, .form-textarea::placeholder {
color: var(--muted);
opacity: 0.5;
}
.form-textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
font-family: 'DM Sans', sans-serif;
}
.form-select {
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 24px;
}
.form-submit-wrap {
margin-top: 16px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.form-submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 36px;
background: var(--ink);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.4s var(--ease);
font-weight: 500;
}
.form-submit:hover {
background: var(--accent);
gap: 16px;
}
.form-submit svg {
transition: transform 0.4s var(--ease);
}
.form-submit:hover svg {
transform: rotate(-45deg);
}
.form-info {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
}
/* Komunikat błędu pod polem (inline walidacja) */
.field-error {
display: none;
margin-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
line-height: 1.3;
color: var(--accent);
}
.field-error.visible { display: block; }
.form-input.is-invalid,
.form-textarea.is-invalid { border-bottom-color: var(--accent); }
/* Stan wysyłki na przycisku */
.form-submit.is-sending { opacity: 0.7; cursor: progress; }
/* Skip-to-content: ukryty do czasu fokusu klawiaturą */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 3000;
transform: translateY(-160%);
opacity: 0;
pointer-events: none;
padding: 12px 20px;
background: var(--ink);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
}
.skip-link:focus { transform: translateY(0); opacity: 1; pointer-events: auto; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
/* ==================== WIP NOTICE (TYMCZASOWE - cały blok do usunięcia) ==================== */
.wip-overlay {
position: fixed; inset: 0; z-index: 4000;
display: flex; align-items: center; justify-content: center; padding: 24px;
background: rgba(var(--ink-rgb), 0.55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: wipFade 0.3s var(--ease) both;
}
.wip-overlay.wip-hide { animation: wipFadeOut 0.35s var(--ease) both; }
.wip-card {
position: relative; width: 100%; max-width: 460px;
background: var(--paper); border-radius: 4px; padding: 42px 38px 34px;
box-shadow: 0 30px 80px rgba(0,0,0,0.35); overflow: hidden;
animation: wipRise 0.42s var(--ease) both;
}
.wip-cmyk { position: absolute; top: 0; left: 0; right: 0; height: 4px; display: flex; }
.wip-cmyk span { flex: 1; }
.wip-cmyk span:nth-child(1){ background:#00B7E5; }
.wip-cmyk span:nth-child(2){ background:#E5007A; }
.wip-cmyk span:nth-child(3){ background:#FFD800; }
.wip-cmyk span:nth-child(4){ background:var(--ink); }
.wip-label { display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.wip-title { font-family:'Fraunces',serif; font-size:27px; font-weight:500; line-height:1.2; color:var(--ink); margin:0 0 14px; }
.wip-text { font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 26px; }
.wip-btn { display:inline-flex; align-items:center; gap:9px; padding:13px 24px; background:var(--accent); color:var(--paper); border:none; border-radius:30px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.2s ease, transform 0.2s ease; }
.wip-btn:hover { background:var(--ink); transform:translateY(-2px); }
.wip-btn svg { width:14px; height:14px; }
.wip-btn:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@keyframes wipFade { from{opacity:0} to{opacity:1} }
@keyframes wipFadeOut { from{opacity:1} to{opacity:0} }
@keyframes wipRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce) { .wip-overlay, .wip-card { animation:none; } }
/* ==================== /WIP NOTICE ==================== */
/* Nagłówek fokusowany programowo po nawigacji nie pokazuje obrysu */
[tabindex="-1"]:focus { outline: none; }
/* Komunikat sukcesu */
.form-success {
display: none;
padding: 40px;
background: var(--paper-deep);
border-left: 3px solid var(--accent);
margin-bottom: 32px;
}
.form-success.visible {
display: block;
animation: fadeUp 0.6s var(--ease) forwards;
}
.form-success-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 24px;
margin-bottom: 12px;
color: var(--ink);
}
.form-success-title em {
font-style: italic;
color: var(--accent);
}
.form-success p {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.55;
}
/* Boczna kolumna info */
.contact-side {
display: grid;
gap: 56px;
align-content: start;
padding-top: 4px;
}
.contact-block { }
.contact-block-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.contact-direct {
display: grid;
gap: 14px;
}
.contact-direct-item {
display: grid;
grid-template-columns: 60px 1fr;
gap: 16px;
align-items: baseline;
}
.contact-direct-type {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.contact-direct-value {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 18px;
color: var(--ink);
text-decoration: none;
transition: color 0.3s var(--ease);
}
a.contact-direct-value:hover { color: var(--accent); }
/* ===== Kopiowanie kontaktu (grafika + maly przycisk obok) ===== */
.cmask-row { display: inline-flex; align-items: center; }
.cm-copy {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin-left: 12px; padding: 0;
background: transparent;
border: 1px solid currentColor;
border-color: color-mix(in srgb, currentColor 30%, transparent);
border-radius: 8px;
color: inherit; opacity: 0.78; cursor: pointer; flex-shrink: 0;
transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.cm-copy:hover { border-color: color-mix(in srgb, currentColor 65%, transparent); opacity: 1; }
.cm-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.cm-copy svg { display: block; width: 15px; height: 15px; }
.cm-copy .cm-copy-c { display: none; }
.cm-copy.is-copied { border-color: var(--accent); color: var(--accent); opacity: 1; }
.cm-copy.is-copied .cm-copy-i { display: none; }
.cm-copy.is-copied .cm-copy-c { display: block; }
.cm-copy-tip {
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--ink); color: var(--paper);
font-size: 11px; font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.04em; text-transform: uppercase;
padding: 4px 8px; border-radius: 5px; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.cm-copy.is-copied .cm-copy-tip,
.cmask.is-copied .cm-copy-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
.cm-copy, .cm-copy-tip { transition: none; }
}
.contact-process {
display: grid;
gap: 24px;
}
.contact-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
align-items: start;
}
.contact-step-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 22px;
color: var(--accent);
line-height: 1;
}
.contact-step-text {
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
.contact-step-text strong {
color: var(--ink);
font-weight: 500;
}
.contact-address {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 18px;
line-height: 1.45;
color: var(--ink);
}
.contact-address-meta {
margin-top: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
}
/* Hero animation triggered by .is-loaded */
.page-contact .breadcrumb { opacity: 0; }
.page-contact.is-loaded .breadcrumb { animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
.page-contact .hero-number { opacity: 0; }
.page-contact.is-loaded .hero-number { animation: fadeUp 1s var(--ease) 0.3s forwards; }
.page-contact .hero-content > * { opacity: 0; }
.page-contact.is-loaded .hero-content > *:nth-child(1) { animation: fadeUp 1s var(--ease) 0.4s forwards; }
.page-contact.is-loaded .hero-content > *:nth-child(2) { animation: fadeUp 1s var(--ease) 0.55s forwards; }
@media (max-width: 900px) {
.contact-hero { padding: 40px 24px 60px; grid-template-columns: 1fr; gap: 24px; }
.page-contact .hero-number { font-size: 72px; }
.contact-main { grid-template-columns: 1fr; gap: 60px; padding: 60px 24px; }
.form-field-row { grid-template-columns: 1fr; gap: 32px; }
}
/* ==================== STRONA O STUDIO ==================== */
.page-studio { padding-top: 60px; }
/* HERO */
.studio-hero {
max-width: 980px;
margin: 0 auto;
padding: 60px 48px 100px;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}
.studio-hero-mark {
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
font-size: clamp(80px, 11vw, 140px);
line-height: 0.9;
color: var(--accent);
margin-bottom: 32px;
}
.studio-hero-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 350;
font-size: clamp(48px, 7vw, 92px);
line-height: 0.98;
letter-spacing: -0.022em;
color: var(--ink);
margin-bottom: 36px;
}
.studio-hero-title em {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "wght" 350;
}
.studio-hero-lead {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.45;
color: var(--ink-soft);
max-width: 720px;
}
/* CREDO, magazine essay */
.studio-credo {
padding: 100px 48px;
max-width: 820px;
margin: 0 auto;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}
.credo-text {
margin-top: 56px;
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 19px;
line-height: 1.65;
color: var(--ink-soft);
text-align: left;
}
.credo-text p {
margin-bottom: 26px;
}
.credo-text p:last-child { margin-bottom: 0; }
.credo-text em {
font-style: italic;
color: var(--ink);
}
.credo-first {
font-size: 22px !important;
line-height: 1.5 !important;
}
.dropcap {
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 350;
font-size: 86px;
line-height: 0.85;
float: left;
margin: 10px 14px -6px 0;
color: var(--accent);
}
/* KALENDARIUM */
.studio-timeline {
padding: 100px 48px;
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}
.timeline-list {
margin-top: 60px;
}
.timeline-item {
display: grid;
grid-template-columns: 160px 1fr;
gap: 48px;
padding: 32px 0;
border-top: 1px solid rgba(var(--ink-rgb),0.1);
}
.timeline-item:last-child {
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
}
.timeline-year {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-style: italic;
font-size: 26px;
color: var(--accent);
line-height: 1.1;
}
.timeline-year span {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
display: block;
margin-top: 10px;
}
.timeline-content h3 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 22px;
margin-bottom: 12px;
color: var(--ink);
line-height: 1.2;
}
.timeline-content p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
/* PRACOWNIA / TOOLS */
.studio-tools {
padding: 100px 48px;
background: var(--paper-deep);
position: relative;
z-index: 2;
}
.studio-tools .section-header {
max-width: 1200px;
margin: 0 auto;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 60px auto 0;
}
.tool-cat {
padding: 24px 4px 24px 20px;
border-top: 2px solid var(--ink);
}
.tool-cat h3 {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
font-weight: 500;
}
.tool-cat ul {
list-style: none;
padding: 0;
margin: 0;
}
.tool-cat li {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 15px;
line-height: 1.35;
padding: 10px 0;
color: var(--ink);
border-bottom: 1px dotted rgba(var(--ink-rgb),0.18);
}
.tool-cat li:last-child { border-bottom: none; }
/* Separator "+" w Fraunces jest za cienki i ginie na jasnym tle - renderujemy
go zdecydowanym plusem z DM Sans, bez zmiany reszty pozycji. */
.tool-plus { font-family: 'DM Sans', sans-serif; font-weight: 600; padding: 0 1px; }
/* BIO */
.studio-bio {
padding: 100px 48px;
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.bio-content {
margin-top: 60px;
display: grid;
grid-template-columns: 1fr 1.7fr;
gap: 60px;
align-items: start;
}
.bio-photo-placeholder {
aspect-ratio: 3/4;
background: var(--paper-deep);
border: 1px dashed rgba(var(--ink-rgb),0.22);
display: grid;
place-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
padding: 24px;
position: relative;
}
.bio-photo-placeholder::before {
content: '';
position: absolute;
top: 16px; right: 16px;
width: 24px; height: 24px;
border: 1px solid var(--accent);
border-radius: 50%;
}
.bio-text p {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 18px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 36px;
}
.bio-text em {
font-style: italic;
color: var(--muted);
}
.bio-list {
list-style: none;
padding: 0;
margin: 0;
}
.bio-list li {
display: grid;
grid-template-columns: 160px 1fr;
gap: 24px;
padding: 16px 0;
border-top: 1px solid rgba(var(--ink-rgb),0.1);
font-size: 15px;
color: var(--ink);
align-items: baseline;
}
.bio-list li > span {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.bio-list li:last-child {
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
}
.bio-list .bio-val { font-family: 'DM Sans', sans-serif; font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ink); }
.bio-list .placeholder-text {
color: var(--muted);
font-style: italic;
}
/* Hero animation */
.page-studio .studio-hero-mark { opacity: 0; }
.page-studio.is-loaded .studio-hero-mark { animation: fadeUp 1s var(--ease) 0.2s forwards; }
.page-studio .studio-hero-title { opacity: 0; }
.page-studio.is-loaded .studio-hero-title { animation: fadeUp 1s var(--ease) 0.4s forwards; }
.page-studio .studio-hero-lead { opacity: 0; }
.page-studio.is-loaded .studio-hero-lead { animation: fadeUp 1s var(--ease) 0.6s forwards; }
.page-studio .breadcrumb { opacity: 0; }
.page-studio.is-loaded .breadcrumb { animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
@media (max-width: 900px) {
.studio-hero { padding: 40px 24px 60px; }
.studio-credo, .studio-timeline, .studio-bio { padding: 60px 24px; }
.studio-tools { padding: 60px 24px; }
.studio-tools .section-header, .tools-grid { padding: 0; }
.timeline-item { grid-template-columns: 100px 1fr; gap: 20px; padding: 24px 0; }
.timeline-year { font-size: 20px; }
.tools-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-cat { padding-left: 16px; }
.bio-content { grid-template-columns: 1fr; gap: 40px; }
.bio-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}
/* ==================== STRONA PORTFOLIO ==================== */
.page-portfolio { padding-top: 60px; }
/* HERO */
.portfolio-hero {
max-width: 1100px;
margin: 0 auto;
padding: 60px 48px 80px;
border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
position: relative;
z-index: 2;
}
.portfolio-hero-mark {
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 300;
font-size: clamp(80px, 11vw, 140px);
line-height: 0.9;
color: var(--accent);
margin-bottom: 24px;
}
.portfolio-hero-title {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 350;
font-size: clamp(48px, 7vw, 92px);
line-height: 0.98;
letter-spacing: -0.022em;
color: var(--ink);
margin-bottom: 32px;
}
.portfolio-hero-title em {
font-style: italic;
color: var(--accent);
}
.portfolio-hero-lead {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.5;
color: var(--ink-soft);
max-width: 800px;
margin-bottom: 48px;
}
.portfolio-hero-lead em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.portfolio-hero-stats {
display: flex;
gap: 64px;
margin-top: 32px;
flex-wrap: wrap;
}
.portfolio-hero-stats .stat-item {
display: flex;
flex-direction: column;
}
.portfolio-hero-stats .stat-num {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 48px;
line-height: 1;
color: var(--accent);
font-style: italic;
}
.portfolio-hero-stats .stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 10px;
}
/* FILTRY */
.portfolio-filters {
position: sticky;
top: 64px;
z-index: 50;
/* Bez backdrop-filter: blur - pasek jest sticky nad przewijana siatka 112
kart, wiec blur przeliczalby sie co klatke. Near-opaque tlo motywu zamiast. */
background: rgba(var(--paper-rgb), 0.97);
padding: 20px 48px;
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
display: grid;
gap: 14px;
}
.filter-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.filter-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
min-width: 50px;
}
.filter-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
.filter-chip {
padding: 6px 14px;
border: 1px solid rgba(var(--ink-rgb),0.18);
background: transparent;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--ink-soft);
transition: all 0.25s ease;
border-radius: 2px;
text-transform: uppercase;
}
.filter-chip:hover {
border-color: var(--accent);
color: var(--accent);
}
.filter-chip.active {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.filter-select-wrap {
flex: 1;
max-width: 320px;
}
.filter-select {
width: 100%;
padding: 7px 30px 7px 14px;
border: 1px solid rgba(var(--ink-rgb),0.18);
background: transparent;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
border-radius: 2px;
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-reset {
padding: 6px 14px;
background: transparent;
border: none;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
transition: color 0.25s ease;
}
.filter-reset:hover { color: var(--accent); }
/* COUNT */
.portfolio-count {
max-width: 1300px;
margin: 28px auto 24px;
padding: 0 48px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.portfolio-count #portfolio-count-num {
color: var(--ink);
font-weight: 500;
}
/* GRID */
.portfolio-grid-wrap {
max-width: 1400px;
margin: 0 auto;
padding: 0 48px 80px;
position: relative;
z-index: 2;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.portfolio-card {
background: var(--paper-deep);
display: grid;
grid-template-rows: 1fr auto;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
cursor: pointer;
border-radius: 2px;
overflow: hidden;
/* Pomijaj renderowanie kart poza ekranem (siatka ma do 112 sztuk).
auto + intrinsic-size = przegladarka zapamietuje realny rozmiar po
pierwszym renderze, wiec pasek przewijania nie skacze. */
content-visibility: auto;
contain-intrinsic-size: auto 480px;
}
.portfolio-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.portfolio-card-cover {
aspect-ratio: 3 / 4;
background:
linear-gradient(135deg, var(--cover-color) 0%, rgba(0,0,0,0.4) 100%),
var(--cover-color);
padding: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
color: rgba(255,255,255,0.95);
overflow: hidden;
}
.portfolio-card-cover::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 5px;
background: rgba(255,255,255,0.18);
}
.portfolio-card-pending {
align-self: flex-end;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.portfolio-card-title {
font-family: 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'wght' 450;
font-size: 20px;
line-height: 1.1;
color: rgba(255,255,255,0.97);
padding-left: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.portfolio-card-body {
padding: 18px 22px 22px;
}
.portfolio-card-client {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-soft);
display: block;
margin-bottom: 8px;
line-height: 1.3;
}
.portfolio-card-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.portfolio-card-year {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 14px;
color: var(--ink);
}
.portfolio-card-divider { color: var(--muted); }
.portfolio-card-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
}
.portfolio-card.is-hidden { display: none; }
/* EMPTY STATE */
.portfolio-empty {
display: none;
padding: 80px 48px;
text-align: center;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 20px;
color: var(--muted);
}
.portfolio-empty.visible { display: block; }
.portfolio-empty a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Hero animation */
.page-portfolio .breadcrumb { opacity: 0; }
.page-portfolio.is-loaded .breadcrumb { animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
.page-portfolio .portfolio-hero-mark { opacity: 0; }
.page-portfolio.is-loaded .portfolio-hero-mark { animation: fadeUp 1s var(--ease) 0.2s forwards; }
.page-portfolio .portfolio-hero-title { opacity: 0; }
.page-portfolio.is-loaded .portfolio-hero-title { animation: fadeUp 1s var(--ease) 0.4s forwards; }
.page-portfolio .portfolio-hero-lead { opacity: 0; }
.page-portfolio.is-loaded .portfolio-hero-lead { animation: fadeUp 1s var(--ease) 0.55s forwards; }
.page-portfolio .portfolio-hero-stats { opacity: 0; }
.page-portfolio.is-loaded .portfolio-hero-stats { animation: fadeUp 1s var(--ease) 0.7s forwards; }
@media (max-width: 1100px) {
.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
.portfolio-hero { padding: 40px 24px 60px; }
.portfolio-hero-stats { gap: 32px; }
.portfolio-hero-stats .stat-num { font-size: 36px; }
.portfolio-filters { padding: 16px 24px; top: 60px; }
.filter-row { gap: 8px; }
.filter-label { min-width: 40px; font-size: 9px; }
.filter-chips { gap: 4px; }
.filter-chip { padding: 5px 10px; font-size: 9px; }
.portfolio-count { padding: 0 24px; margin-top: 20px; }
.portfolio-grid-wrap { padding: 0 24px 60px; }
.portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.portfolio-card-title { font-size: 16px; }
.portfolio-card-body { padding: 14px 16px 16px; }
}
/* ==================== COOKIE BANNER ==================== */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
right: auto;
max-width: 480px;
background: var(--ink);
color: var(--paper);
padding: 24px 28px;
z-index: 1000;
box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
opacity: 0;
transform: translateY(40px);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
pointer-events: none;
border-radius: 2px;
}
.cookie-banner.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cookie-banner-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(var(--paper-rgb), 0.5);
margin-bottom: 12px;
display: block;
}
.cookie-banner h3 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 450;
font-size: 22px;
line-height: 1.15;
margin-bottom: 10px;
color: var(--paper);
}
.cookie-banner h3 em {
font-style: italic;
color: var(--accent);
}
.cookie-banner p {
font-size: 13px;
line-height: 1.5;
color: rgba(var(--paper-rgb), 0.78);
margin-bottom: 20px;
}
.cookie-banner a {
color: rgba(var(--paper-rgb), 0.95);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--paper-rgb), 0.4);
transition: text-decoration-color 0.3s;
}
.cookie-banner a:hover { text-decoration-color: var(--accent); }
.cookie-banner-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cookie-btn {
padding: 10px 18px;
background: transparent;
color: var(--paper);
border: 1px solid rgba(var(--paper-rgb), 0.35);
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: all 0.25s ease;
border-radius: 2px;
flex: 1;
min-width: 140px;
}
.cookie-btn:hover {
border-color: var(--paper);
background: rgba(var(--paper-rgb), 0.08);
}
/* "Zarządzaj cookies" link w stopce */
.footer-cookie-link {
background: transparent;
border: none;
color: var(--ink-soft);
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0;
transition: color 0.25s ease;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--ink-rgb), 0.3);
}
.footer-cookie-link:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
/* Wariant na ciemnym tle (main page footer-bottom) */
.footer-cookie-link--on-dark {
color: rgba(var(--paper-rgb), 0.6);
text-decoration-color: rgba(var(--paper-rgb), 0.3);
}
.footer-cookie-link--on-dark:hover {
color: var(--paper);
text-decoration-color: var(--paper);
}
.footer-links--on-dark .footer-links-sep {
color: rgba(var(--paper-rgb), 0.3);
margin: 0 8px;
}
/* ==================== STRONA POLITYKI PRYWATNOŚCI ==================== */
.page-policy { padding-top: 60px; }
.policy-hero {
max-width: 760px;
margin: 0 auto;
padding: 60px 48px 50px;
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
position: relative;
z-index: 2;
}
.policy-hero-mark {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 28px;
display: block;
}
.policy-hero h1 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 350;
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1;
letter-spacing: -0.022em;
color: var(--ink);
margin-bottom: 28px;
}
.policy-hero h1 em {
font-style: italic;
color: var(--accent);
}
.policy-hero-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.15em;
color: var(--muted);
margin-bottom: 24px;
}
.policy-hero-intro {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 18px;
line-height: 1.5;
color: var(--ink-soft);
}
.policy-body {
max-width: 760px;
margin: 0 auto;
padding: 60px 48px 80px;
position: relative;
z-index: 2;
}
.policy-section {
padding: 36px 0;
border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}
.policy-section:last-child { border-bottom: none; }
.policy-section h2 {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 500;
font-size: 24px;
line-height: 1.2;
color: var(--ink);
margin-bottom: 20px;
display: flex;
align-items: baseline;
gap: 14px;
}
.policy-section h2 .paragraph-mark {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 20px;
color: var(--accent);
}
.policy-section h3 {
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "opsz" 144, "wght" 450;
font-size: 17px;
color: var(--ink);
margin-top: 24px;
margin-bottom: 12px;
}
.policy-section p {
font-family: 'Fraunces', serif;
font-variation-settings: "opsz" 144, "wght" 400;
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
margin-bottom: 14px;
text-align: left;
}
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul, .policy-section ol {
font-family: 'Fraunces', serif;
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
padding-left: 0;
list-style: none;
margin-bottom: 14px;
}
.policy-section li {
padding: 6px 0 6px 20px;
position: relative;
}
.policy-section li::before {
content: '·';
position: absolute;
left: 6px;
color: var(--accent);
font-weight: 700;
}
.policy-section strong {
font-weight: 500;
color: var(--ink);
}
.policy-section em.placeholder {
color: var(--muted);
font-style: italic;
background: rgba(200, 51, 27, 0.05);
padding: 1px 4px;
border-radius: 2px;
}
/* Tabela podstaw prawnych */
.policy-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: 'Fraunces', serif;
font-size: 15px;
}
.policy-table th, .policy-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
vertical-align: top;
}
.policy-table thead th {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid rgba(var(--ink-rgb),0.25);
font-weight: 500;
}
.policy-table tbody td { color: var(--ink-soft); }
.policy-table tbody td:first-child { color: var(--ink); }
.policy-contact-box {
margin-top: 32px;
padding: 28px;
background: var(--paper-deep);
border-left: 3px solid var(--accent);
}
.policy-contact-box p { margin-bottom: 8px; text-align: left; }
.policy-contact-box p:last-child { margin-bottom: 0; }
.policy-contact-box a { color: var(--accent); text-decoration: none; }
.policy-contact-box a:hover { text-decoration: underline; }
/* Hero animation */
.page-policy .breadcrumb { opacity: 0; }
.page-policy.is-loaded .breadcrumb { animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
.page-policy .policy-hero > * { opacity: 0; }
.page-policy.is-loaded .policy-hero-mark { animation: fadeUp 0.8s var(--ease) 0.2s forwards; }
.page-policy.is-loaded .policy-hero h1 { animation: fadeUp 1s var(--ease) 0.3s forwards; }
.page-policy.is-loaded .policy-hero-meta { animation: fadeUp 0.8s var(--ease) 0.45s forwards; }
.page-policy.is-loaded .policy-hero-intro { animation: fadeUp 0.8s var(--ease) 0.55s forwards; }
@media (max-width: 800px) {
.cookie-banner {
left: 16px; right: 16px;
max-width: none;
bottom: 16px;
padding: 20px;
}
.cookie-banner h3 { font-size: 19px; }
.cookie-btn { font-size: 9px; padding: 9px 14px; }
.policy-hero, .policy-body { padding-left: 24px; padding-right: 24px; }
}
/* Footer links (RODO) */
.footer-links {
display: inline-flex;
align-items: center;
margin-right: 16px;
}
@media (max-width: 600px) {
.footer-links {
display: block;
margin-right: 0;
margin-bottom: 8px;
}
}
/* ==================== KALKULATOR ORIENTACYJNEJ WYCENY ==================== */
.estimator {
max-width: 1180px;
margin: 0 auto;
padding: 40px 48px 72px;
}
.est-head { max-width: 680px; margin-bottom: 40px; }
.est-head h2 {
font-family: 'Fraunces', serif;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.05; letter-spacing: -0.02em;
color: var(--ink); margin: 14px 0 16px;
}
.est-head h2 em { font-style: italic; color: var(--accent); }
.est-lead { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.est-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 44px;
align-items: start;
}
.est-controls { display: flex; flex-direction: column; gap: 22px; }
.est-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.est-field { display: flex; flex-direction: column; gap: 9px; }
.est-label {
display: flex; justify-content: space-between; align-items: baseline;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.est-val { font-style: normal; font-weight: 700; color: var(--accent); font-size: 13px; letter-spacing: 0.02em; }
.est-select {
width: 100%;
font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: var(--ink);
background-color: var(--paper);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2375695C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
border: 1px solid rgba(var(--ink-rgb),0.2); border-radius: 8px;
padding: 13px 40px 13px 15px;
-webkit-appearance: none; appearance: none; cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.est-select:hover { border-color: rgba(var(--ink-rgb),0.4); }
.est-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,51,27,0.12); }
.est-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 4px; border-radius: 4px;
background: var(--paper-deep);
outline: none; cursor: pointer; margin: 6px 0;
}
.est-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); border: 3px solid var(--paper);
box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer;
transition: transform 0.15s ease;
}
.est-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.est-range::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); border: 3px solid var(--paper);
box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer;
}
.est-checks { display: flex; flex-direction: column; gap: 13px; margin-top: 6px; }
.est-check {
display: flex; align-items: center; gap: 11px;
font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: var(--ink);
cursor: pointer; user-select: none;
}
.est-check input { -webkit-appearance: none; appearance: none; margin: 0;
width: 20px; height: 20px; border: 1px solid rgba(var(--ink-rgb),0.3); border-radius: 5px;
background: var(--paper); cursor: pointer; position: relative; flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease; }
.est-check input:checked { background: var(--accent); border-color: var(--accent); }
.est-check input:checked::after {
content: ''; position: absolute; left: 6px; top: 2px;
width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* panel wyniku */
.est-result {
background: var(--ink);
border-radius: 14px;
padding: 30px 28px;
position: sticky; top: 100px;
box-shadow: 0 24px 60px rgba(var(--ink-rgb),0.22);
}
.est-result-label {
font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--paper-rgb),0.55);
}
.est-amount {
font-family: 'Fraunces', serif; color: var(--paper);
margin: 12px 0 4px; line-height: 1.05; letter-spacing: -0.01em;
}
.est-amount #est-amount-range { font-size: 31px; font-weight: 600; color: #fff; }
.est-net { font-size: 14px; color: rgba(var(--paper-rgb),0.6); font-family: 'DM Sans', sans-serif; }
.est-breakdown {
list-style: none; margin: 20px 0 0; padding: 20px 0 0;
border-top: 1px solid rgba(var(--paper-rgb),0.14);
display: flex; flex-direction: column; gap: 9px;
}
.est-breakdown li {
display: flex; justify-content: space-between; gap: 14px;
font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
color: rgba(var(--paper-rgb),0.7);
}
.est-breakdown li span:last-child { color: var(--paper); white-space: nowrap; }
.est-breakdown li.est-bd-muted { color: rgba(var(--paper-rgb),0.4); }
.est-disclaimer {
font-family: 'DM Sans', sans-serif; font-size: 11.5px; line-height: 1.55;
color: rgba(var(--paper-rgb),0.5); margin: 20px 0 0;
}
.est-cta {
display: block; text-align: center; margin-top: 20px;
padding: 14px 18px; border-radius: 30px;
background: var(--accent); color: var(--paper);
font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
text-decoration: none; transition: background 0.2s ease, transform 0.2s ease;
}
.est-cta:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.est-copy {
display: block; width: 100%; margin-top: 10px; padding: 11px 18px;
background: transparent; border: 1px solid rgba(var(--paper-rgb), 0.22);
border-radius: 30px; color: rgba(var(--paper-rgb), 0.6); cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
letter-spacing: 0.04em; text-transform: uppercase;
transition: border-color 0.2s ease, color 0.2s ease;
}
.est-copy:hover { border-color: var(--paper); color: var(--paper); }
.est-copy.is-copied { border-color: var(--accent); color: var(--accent); }
/* CIEMNY MOTYW: panel wyceny ma byc ciemna, elegancka karta, a nie jasnym
prostokatem. Lokalnie przywracamy "jasne" wartosci zmiennych wewnatrz
panelu - dzieki temu cala zawartosc (kremowy tekst, kwota, lista) renderuje
sie poprawnie na ciemnym, lekko uniesionym tle. Dotyczy desktopu i mobile
(od kiedy mobile ma wlasny przelacznik ciemnego motywu). */
:root[data-theme="dark"] .est-result {
--paper: #F2EBDC;
--paper-rgb: 242, 235, 220;
--ink: #2A231C;
--ink-rgb: 42, 35, 28;
background: var(--ink);
border: 1px solid rgba(var(--paper-rgb), 0.12);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (max-width: 880px) {
.estimator { padding: 32px 24px 56px; }
.est-grid { grid-template-columns: 1fr; gap: 30px; }
.est-result { position: static; }
}
/* ===== Custom select (typ projektu) - ładny zamiennik natywnego