/* ============================================================ WPziom Design System v2 - JEDNO ŹRÓDŁO PRAWDY ------------------------------------------------------------ Szkielet jest wspólny, skóra jest wymienna. Użycie: → usługi, oferty, audyty, dokumenty (jasna) → ZiomUp, kursy, społeczność (ciemna) → opcjonalna siatka w tle ZASADA: nie definiuj własnych kolorów ani fontów w plikach docelowych. Potrzebujesz czegoś, czego tu nie ma? Dopisz TUTAJ, nie u siebie. ============================================================ */ /* ---------- FONTY ---------- */ :root { /* Typografia (wspólna dla obu skór) */ --disp: 'Geist', system-ui, -apple-system, sans-serif; --body: 'Inter', system-ui, -apple-system, sans-serif; --fs-h1: clamp(36px, 4.4vw, 58px); --fs-h2: clamp(32px, 3.6vw, 50px); --fs-h3: clamp(19px, 1.5vw, 23px); --fs-lead: clamp(17px, 1.3vw, 19px); --fs-body: 16.5px; --fs-sm: 14px; --fs-xs: 12.5px; --lh-tight: 1.07; --lh-body: 1.68; --ls-h1: -1.6px; --ls-h2: -1.3px; /* Rytm i kształt */ --maxw: 1140px; --maxw-doc: 940px; --pad-x: 24px; --sec-py: var(--sekcja-y); /* zgodność wstecz: stare pliki używają --sec-py */ /* Rytm pionowy (pomiar konferencja.easy.tools 5.09.2026, desktop 1440: 190-266 px białej przestrzeni między sekcjami, 73-83 px od bloku nagłówka do treści). Sekcja ma TEN SAM padding z góry i z dołu - żadnych padding-top:0. */ --sekcja-y: clamp(72px, 8vw, 112px); /* padding sekcji góra i dół -> między treścią sąsiednich sekcji ~220 px na desktopie */ --po-naglowku: clamp(40px, 5vw, 72px); /* blok nagłówka (num + h2 + lead) -> pierwszy blok treści */ --blok: clamp(32px, 4vw, 56px); /* między dużymi blokami wewnątrz sekcji (np. boxy -> ptaszki -> lista) */ --siatka: clamp(16px, 2vw, 28px); /* odstęp między kartami w siatce */ --fs-h2-landing: clamp(36px, 4vw, 56px); /* nagłówek sekcji na landingu (easy: 58 px); dokumenty zostają przy --fs-h2 */ --gap: 20px; --r-lg: 22px; --r: 16px; --r-sm: 11px; --r-pill: 50px; /* Ruch (jeden czas, jedna krzywa) */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t: 0.28s var(--ease); } /* ============================================================ SKÓRA 1: WPZIOM (jasna) - usługi, oferty, audyty, dokumenty Motto: pomarańcz krzyczy, atrament mówi, biel oddycha. ============================================================ */ :root, [data-skin="wpziom"] { --bg: #fdfdfb; --surface: #ffffff; --surface-2: #faf9f6; --line: #e9e6df; --line-soft: #f1efe9; --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8; --accent: #f97316; --accent-strong: #ea580c; --accent-wash: #fff3e8; --ok: #4d7c3f; --ok-bg: #f0f4ec; --warn: #a66a1e; --warn-bg: #fbf3e6; --bad: #b4443c; --bad-bg: #fbeeee; --shadow: 0 1px 3px rgba(15,23,42,0.05), 0 8px 28px rgba(15,23,42,0.05); --shadow-hi: 0 12px 44px rgba(15,23,42,0.10); --btn-fg: #ffffff; } /* ============================================================ SKÓRA 2: ZIOMUP (ciemna) - społeczność, kursy, landing Ten sam szkielet, odwrócona warstwa. ============================================================ */ [data-skin="ziomup"] { --bg: #06090f; --surface: #111827; --surface-2: #0d1420; --line: rgba(255,255,255,0.07); --line-soft: rgba(255,255,255,0.04); --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #8b9bb4; --faint: #5b6b82; /* Akcent ZiomUp jest o włos cieplejszy niż WPziom (decyzja brandowa, landingi/ziomup/CLAUDE.md: "nie zmieniać"). Chcesz jeden wspólny pomarańcz w całej firmie? Podmień na #f97316 tutaj i nigdzie indziej. */ --accent: #f58220; --accent-strong: #ffb366; --accent-wash: rgba(245,130,32,0.08); --ok: #4ade80; --ok-bg: rgba(74,222,128,0.08); --warn: #fbbf24; --warn-bg: rgba(251,191,36,0.08); --bad: #f87171; --bad-bg: rgba(248,113,113,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.35); --shadow-hi: 0 20px 60px rgba(0,0,0,0.45); --btn-fg: #06090f; } /* ============================================================ BAZA ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, .num, .stat-n, .price-n { font-family: var(--disp); color: var(--ink); } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } /* height:auto - bez tego obraz z atrybutami width/height rozciąga się w pionie */ section { padding: var(--sekcja-y) 0; position: relative; } /* Sekcja, która jest ciągiem dalszym poprzedniej (np. rząd kafli tuż pod hero): mniejszy odstęp z góry, zamiast padding-top:0 */ .sekcja--laczona { padding-top: calc(var(--sekcja-y) * 0.35); } /* Landing: większe nagłówki sekcji niż w dokumentach (dodaj klasę landing na body) */ body.landing h2 { font-size: var(--fs-h2-landing); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); } .wrap-doc { max-width: var(--maxw-doc); margin: 0 auto; padding: 0 var(--pad-x); } /* Trzy szerokości: .wrap 1140 (tekst, karty), .wrap--szeroki 1320 (siatka trzech kart z treścią, np. tygodnie wdrożenia), .wrap--pelny 1920 (tylko czyste wizualizacje). Listy i tabele nigdy na pełną szerokość. */ .wrap--szeroki { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-x); } /* Siatka w tle (znak rozpoznawczy, wzięty z easy.tools) */ .grid-bg { position: relative; } .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%); } /* Uwaga: ta reguła ma specyficzność dwóch klas. Element z position:fixed wewnątrz .grid-bg (np. pływające menu) potrzebuje selektora z id, inaczej dostanie relative. */ .grid-bg > :not(.glow-orb) { position: relative; z-index: 1; } /* ============================================================ TYPOGRAFIA I NAGŁÓWKI SEKCJI ============================================================ */ h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-h1); } h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.4px; line-height: 1.35; } .lead { font-size: var(--fs-lead); color: var(--muted); line-height: var(--lh-body); max-width: 46ch; } /* Dwutonowy nagłówek: druga połowa gaśnie. Nasz podpis, jak u easy.tools. */ .dim { color: var(--muted); font-weight: 800; } .on { color: var(--accent); } /* Indeks sekcji "03 / strategia marek" (wzorzec z ofert, zostaje) */ .num { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-strong); letter-spacing: 0.02em; margin-bottom: 12px; } /* Pigułka-etykieta nad nagłówkiem (wariant dla landingów) */ .pill { display: inline-block; padding: 6px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: 0.01em; margin-bottom: 16px; } /* Nagłówek sekcji: tytuł do lewej, wprowadzenie w drugiej kolumnie */ .sec-head { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(0,0.68fr); gap: 28px 56px; align-items: end; margin-bottom: var(--po-naglowku); } .sec-head--center { display: block; text-align: center; max-width: 720px; margin: 0 auto var(--po-naglowku); } .sec-head--center .lead { margin: 0 auto; } @media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; gap: 16px; } } /* Ramka na słowie kluczowym: jedno słowo, max trzy na stronę */ .hl { display: inline-block; padding: 2px 13px; border: 2.5px dashed var(--accent); border-radius: 13px; } .hl--ink { border-color: var(--ink); } .hl--tilt { transform: rotate(-1deg); } /* Cienki dzielnik na pełną szerokość */ .rule { height: 1px; background: var(--line); border: 0; max-width: var(--maxw); margin: 0 auto; } /* ============================================================ PRZYCISKI - jeden wzór, ten sam tekst CTA na całej stronie ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--r-pill); border: 0; cursor: pointer; font-family: var(--body); font-size: 16.5px; font-weight: 700; background: var(--accent); color: var(--btn-fg); text-decoration: none; transition: var(--t); } .btn:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-hi); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { background: var(--surface); box-shadow: var(--shadow); } .btn--ink { background: var(--ink); color: var(--bg); } /* ============================================================ KOMPONENTY ============================================================ */ /* Karta */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; transition: var(--t); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hi); } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--siatka); } /* ZASADA: zero ozdobnych pasków z jednej strony. Kolorowy border-left albo border-top jako dekoracja (callout z pomarańczową belką, karta z kreską u góry) to znak rozpoznawczy generowanych stron. Easy.tools nie ma ani jednego takiego miejsca. Wyróżnienie robi TŁO, odstęp i typografia, nigdy pasek. Wolno: hairline 1px rozdzielający wiersze listy, tabeli albo sekcje. To nie ozdoba, tylko interpunkcja układu. */ /* Ikona: jeden zestaw, jedna waga, kolor z akcentu */ .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-wash); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .ico svg { width: 23px; height: 23px; stroke: var(--accent-strong); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Karta z podglądem produktu (zrzut zamiast ikonki - lekcja z easy.tools) */ .shot { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); } .shot img { width: 100%; } /* Agenda: data / temat / kto. Dowód, nie deklaracja. */ .agenda { border-top: 1px solid var(--line); } .agenda-row { display: grid; grid-template-columns: 116px minmax(0,1fr) 210px; gap: 8px 28px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line); } .agenda-date { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); white-space: nowrap; } .agenda-topic { font-size: 19px; font-weight: 600; line-height: 1.42; color: var(--ink); } .agenda-who { font-size: 15px; color: var(--muted); } .agenda-kind { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .agenda-row--next { background: var(--accent-wash); border-bottom-color: var(--accent); } .agenda-row--next .agenda-topic { color: var(--accent); font-weight: 700; } @media (max-width: 760px) { .agenda-row { grid-template-columns: 1fr; gap: 5px; } } /* Lista numerowana 01-08 zamiast siatki kart (rytm editorial) */ .steps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 56px; border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); } .step-n { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 800; color: var(--accent); padding-top: 5px; } .step p { color: var(--muted); font-size: var(--fs-body); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } /* Statystyka */ .stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .stat { flex: 1 1 160px; padding: 22px 20px; text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat-n { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1; } .stat-l { font-size: 13px; color: var(--muted); margin-top: 6px; } /* Pigułki statusu (audyty, dokumenty) */ .tag { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; } .tag--ok { background: var(--ok-bg); color: var(--ok); } .tag--warn { background: var(--warn-bg); color: var(--warn); } .tag--bad { background: var(--bad-bg); color: var(--bad); } /* Ramka na uwagę (wariant awaryjny, zastrzeżenie) */ .note { background: var(--warn-bg); border-radius: var(--r); padding: 18px 22px; color: var(--warn); font-size: var(--fs-body); } .note strong { color: var(--warn); } /* Cena */ .price-n { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; color: var(--ink); } .price-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; } /* Tabela w karcie */ .table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .table th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); } .table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); } .table tr:last-child td { border-bottom: 0; } /* Pasek przyklejony do dołu (evergreen, bez odliczania) */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 13px 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-hi); transform: translateY(100%); transition: transform 0.4s var(--ease); } .stickybar.is-on { transform: translateY(0); } .stickybar .wrap { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } /* ============================================================ WEJŚCIA I DOSTĘPNOŚĆ Treść jest widoczna bez JS. Klasę .js dodaje skrypt na starcie. ============================================================ */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(22px); transition: 0.42s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ LANDING: komponenty wymagane przez design-system/landing.md Landing bez obrazów nie jest landingiem - patrz bramka jakości. ============================================================ */ /* Sekcja naprzemienna: tekst obok obrazu. Rytm, którego nie da typografia. */ .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(28px,4vw,64px); align-items: center; } .split--rev .split-media { order: -1; } .split-body h2 { margin-bottom: 16px; } .split-body .lead { max-width: 44ch; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 26px; } .split--rev .split-media { order: 0; } } /* Zrzut produktu w ramce. Zawsze zrzut, nigdy abstrakcyjna ikonka. */ .shot { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); } .shot img { width: 100%; display: block; } .shot--pusty { display: grid; place-items: center; text-align: center; min-height: 260px; padding: 26px; border-style: dashed; border-width: 2px; color: var(--faint); font-size: var(--fs-sm); line-height: 1.6; } /* Opinia z twarzą i nazwiskiem. Anonimowy cytat nie liczy się jako dowód. */ .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; } .quote p { font-size: 17.5px; line-height: 1.6; color: var(--ink); } .quote figcaption { display: flex; align-items: center; gap: 13px; margin-top: 20px; } .quote img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .quote .kto { font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--ink); } .quote .rola { font-size: var(--fs-xs); color: var(--muted); } /* Pasek logo albo narzędzi. Dowód, nie dekoracja. */ .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px,4vw,54px); opacity: 0.75; } .logos img { height: 30px; width: auto; } /* Twarze uczestników w rzędzie (dowód społeczny w hero) */ .twarze { display: flex; align-items: center; gap: 12px; } .twarze-stos { display: flex; } .twarze-stos img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -11px; } .twarze-stos img:first-child { margin-left: 0; } .twarze span { font-size: var(--fs-sm); color: var(--muted); }