Style Guide
Kompletny przegląd tokenów, typografii, komponentów i wzorców używanych na stronie ENERGOMET.
Kolory
Dark
--color-dark
#1c1b1a
Tło główne
Accent
--color-accent
#caccb0
CTA, wyróżnienia
Light
--color-light
#fafafa
Tło jasne
White
--color-white
#ffffff
Tekst na ciemnym
Text Dark
--color-text-dark
#030213
Tekst na jasnym
Warianty opacity (accent)
accent-50
accent-30
accent-20
accent-10
accent-05
Spacing & Transitions
Spacing
- --container-max: 90rem
- --container-px: 1.5rem
- --section-py: 6rem
- --section-py-md: 8rem
- --section-py-lg: 12rem
Transitions & Shadows
- --transition-fast: 200ms ease-out
- --transition-base: 300ms ease-out
- --transition-slow: 500ms ease-out
- --shadow-card: 0 10px 15px...
- --shadow-elevated: 0 25px 50px...
- --shadow-accent: 0 10px 20px...
Nagłówki & tekst
.heading-hero
Heading Hero — 3rem / md:4.5rem
.heading-section
Heading Section — 2.25rem / md:3rem
.heading-subsection
Heading Subsection — 1.875rem / md:2.25rem
.heading-card
Heading Card — 1.25rem, waga 500
Labele & body text
.section-label-dark
Label na ciemnym tle.section-label-light
Label na jasnym tle.section-label-accent
Label na tle accent.text-lead
Tekst lead — 1.125rem / md:1.25rem, lh:1.75. Służy do podsumowań pod nagłówkami.
.text-body-dark / .text-body-light
Text body dark (na ciemnym tle) — gray-400
Text body light (na jasnym tle) — dark/60
Fonty
--font-heading · Hubot Sans
Hubot Sans — ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Nagłówki, buttony, linki, labele, nawigacja
--font-sans · Work Sans
Work Sans — ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Body text, opisy, paragrafy
Buttony
Modyfikatory
Karty
.card-dark
Card Dark
Karta na ciemnym tle z accent/5 bg i border.
.card-feature
Card Feature
Bordered, bez tła. Hover: border-accent/30.
.card-stat
.card-light
Card Light
Na jasnym tle. Hover: shadow + translate.
Ikony
.icon-box
Standard (0.75rem padding, accent/10 bg)
.icon-box-sm
Small (0.5rem padding, border)
Ikony Lucide (używane)
Sekcje & Layout
.section-dark
bg: --color-dark
.section-light
bg: --color-light
.section-accent
bg: --color-accent
Klasy layout
| Klasa | Opis |
|---|---|
| .container-site | max-w 90rem, auto margins, px 1.5rem |
| .section | py 6rem / md:8rem |
| .section-lg | lg: py 12rem |
| .section-cta | py 4rem / md:6rem (mniejszy) |
| .page-hero | mt 4rem (fixed header), py 8rem / md:12rem |
| .hero-bg | Absolute cover bg image |
| .hero-overlay | Dark 80% overlay |
| .hero-content | z-index 2, relative |
Listy & inne
.check-item
.feature-item
Tytuł feature
Opis elementu feature z ikoną i tekstem.
Drugi feature
Kolejny element z ikoną i opisem.
Divider & utilities
.divider-accent
.fade-in (animacja scroll)
Elementy z klasą .fade-in + data-animate pojawiają się z opacity 0 → 1 i translateY 30px → 0 przy wejściu w viewport (IntersectionObserver).
.img-cover / .img-hover-zoom
Obrazy: object-fit cover + group-hover scale(1.05) na 700ms.
Klasy nawigacji
| Klasa | Opis |
|---|---|
| .nav-link | Link nawigacji: 0.875rem, weight 600, hover:accent |
| .nav-cta | CTA w nawigacji z animacją fill |
| .nav-cta-border | Border absolutny, hover: transparent |
| .nav-cta-fill | Animowany fill bg (scaleX 0→1) |
| .dropdown-menu | Dropdown: absolute, 16rem, dark bg, shadow |
| .dropdown-item | Element dropdown z hover state |
| .footer-link | Link footera z animated line |
| .footer-contact | Blok kontaktowy footera z ikoną |
| .social-icon | Ikona social z hover fill + translateY |