Styleguide

System kolorów

Primary Green: #009472

HEX: #009472
RGB: rgb(0, 148, 114)
HSL: hsl(166, 100%, 29%)

Zastosowania: Główny kolor brandu, używany w przyciskach primary (`.x-btn-1`), akcentach, nagłówkach sekcji (`.x-title-small`), gradientach.

Kiedy używać: Przyciski akcji, linki aktywne, elementy wymagające uwagi użytkownika.

Kombinacje: Dobrze komponuje się z białym (#FFFFFF) na tekście, czarnym (#000000) na tle, oraz z Dark Green (#013B2D) w gradientach.

Dark Green: #013B2D

HEX: #013B2D
RGB: rgb(1, 59, 45)
HSL: hsl(166, 97%, 12%)

Zastosowania: Używany w gradientach (np. `.x-content-box-5`), tłach sekcji, elementach dekoracyjnych.

Kiedy używać: Tła sekcji z gradientem, elementy pomocnicze wymagające głębszego koloru.

Kombinacje: Używany w gradientach z czernią (#000000) i Primary Green (#009472).

Dark Blue: #09153A

HEX: #09153A
RGB: rgb(9, 21, 58)
HSL: hsl(225, 73%, 13%)

Zastosowania: Używany w menu mobile (`.menu-rsp`, `.header-rsp`), elementach nawigacji.

Kiedy używać: Tła menu mobilnego, elementy nawigacyjne wymagające kontrastu.

Kombinacje: Dobrze komponuje się z białym (#FFFFFF) na tekście.

Black: #000000

HEX: #000000
RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)

Zastosowania: Tekst główny (body), tła sekcji (`.x-content-box-2`, `.x-content-box-4`), elementy kontrastowe.

Kiedy używać: Tekst na jasnych tłach, tła sekcji wymagające kontrastu.

Kombinacje: Używany z białym (#FFFFFF) na tekście, Primary Green (#009472) na akcentach.

White: #FFFFFF

HEX: #FFFFFF
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)

Zastosowania: Tekst na ciemnych tłach, tła sekcji, przyciski secondary (`.x-btn-1-1`).

Kiedy używać: Tekst na ciemnych sekcjach, przyciski na ciemnych tłach, tła boxów.

Kombinacje: Używany z czernią (#000000) na tekście, Primary Green (#009472) na akcentach.

Grey: #F6F6F6

HEX: #F6F6F6
RGB: rgb(246, 246, 246)
HSL: hsl(0, 0%, 96%)

Zastosowania: Tła sekcji (`.z-bg-1`), boxy (`.x-box-3`, `.x-boxes-3a`), elementy pomocnicze.

Kiedy używać: Tła sekcji wymagające delikatnego kontrastu, boxy z treścią.

Kombinacje: Używany z czernią (#000000) na tekście.

Styleguide

Typografia

Rodzina fontów: Silka

Weight 400 (Regular) - tekst podstawowy
Używany w: paragrafach, listach, tekście ciągłym (body text).

Weight 500 (Medium) - akcenty
Używany w: datach (`.data-rsp`), małych akcentach, elementach pomocniczych.

Weight 600 (SemiBold) - nagłówki, akcenty
Używany w: nagłówkach sekcji (`.x-title h2`), tytułach (`.x-title-small`), przyciskach (`.x-btn-1`).

Weight 700 (MonoBold) - mocne akcenty
Używany w: mocnych wyróżnieniach, CTA, elementach wymagających uwagi.

Rozmiary i hierarchia

Base (16px): Tekst podstawowy - używany w body, paragrafach, listach.

Small (11px): Tekst pomocniczy - używany w `.data-rsp`.

H2 (20px): Standardowe nagłówki - używany w `body h2`.

H1/Large (48px): Główne nagłówki - używany w `.x-title h2`.

Subtitle (24px): Podtytuły - używany w `.x-content-box-3 .txt`, `.text h3`.

Line-height

Standardowo: 150% (1.5) - używany w body, paragrafach, większości elementów tekstowych.

Przykłady typografii

H1 - Główny nagłówek (48px, SemiBold)

H2 - Standardowy nagłówek (20px, SemiBold)

H3 - Podtytuł (24px, SemiBold)

Body text - Tekst podstawowy (16px, Regular, line-height 150%). Używany w paragrafach, listach i tekście ciągłym.

Small text - Tekst pomocniczy (11px, Medium)

Styleguide

System spacing

Paddingi

Container: 40px (mobile), 30px (desktop) - `.container`
Section padding: 90px - `.x-padding-1`
Button padding: `0 20px`, height `44px` - `.x-btn-1`
Box padding: Różne w zależności od kontekstu:
- 15px - `.x-boxes-2a .row-box .col-box`
- 20px - `.x-boxes-1 .row-box .col-box`
- 25px - `.x-boxes-2 .row-box .col-box`, `.x-boxes-3 .row-box .col-box`
- 30px - `.x-boxes-3a .row-box .col-box .x-box-3a`

Marginesy

Section margins: 90px - `.x-mt-1`, `.x-mb-1`
Paragraph margin-bottom: 25px - `body p`
Title margin-bottom: 60px - `.x-title`
Title-small margin-bottom: 20px - `.x-title-small`
List padding-left: 16px (ul), 20px (ol)
Button margin-right: 30px (w grupie) - `.x-content-box-1 .x-button-box a`

Gaps między elementami

Box margin w row-box: -20px, -25px (z padding 20px, 25px w col-box)

Styleguide

Layout Grid

Container

Width: 1220px (max-width 100%)
Padding: 40px (mobile), 30px (desktop)
Klasa: `.container`

Breakpoints

System oparty na Bootstrap:
- Mobile: < 1199px
- Desktop: ≥ 1199px

Column System

Row: `.row-box` - flex container
Column: `.col-box` - flex item

Warianty:
- `.cols3` - 3 kolumny (33.3333%)
- `.cols4` - 4 kolumny (25%)
- `.cols5` - 5 kolumn (20%)

Domyślnie: 2 kolumny (50%) w `.z-content-box-1-1`

Styleguide

Border Radius

Zaokrąglenia

Buttons: 22px - `.x-btn-1` (border-radius)
Images: 10px - niektóre obrazy (border-radius)
Boxes: 10px - `.x-box-2 figure img`, `.x-box-3`, `.x-boxes-3a .x-box-3a`

Styleguide

Transitions & Animations

Transitions

Duration: `0.15s linear` - standardowe przejścia
Używane w: `.logo, img, a, button`

Hover Effects

Buttons: `translateY(-5px)` z `opacity: 0.9` - `.x-btn-1:hover`
Images/Links: `translateY(-5px)` z `opacity: 0.9` - `.x-content-box-1 .x-button-box a:hover`
Social icons: `translateY(-2px)` - `.social-box a:hover`

Box-shadow

Header mobile: `0 0 7px rgba(0, 0, 0, 0.5)` - `.header-rsp`

Z-index hierarchy

Header: z-index 10 - `body header`
Menu mobile: z-index 100-101 - `.menu-rsp`, `.header-rsp`
Content: standardowy flow