/* ============================================================
CHLEBOWNIA ONLINE — styles/base.css
Design tokens · Reset · Typography · Utilities · Buttons
Dark mode: prefers-color-scheme: dark
============================================================
UŻYCIE W index.html:
← sekcje
WAŻNE: @import CSS blokuje render — zawsze linkuj przez .
============================================================ */
/* ============================================================
GOOGLE FONTS
Uwaga: preconnect + w szybsze niż @import.
Ten @import zostawiamy dla standalone use; w produkcji
preferuj wariant z HTML (już jest w index.html).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;700&display=swap');
/* ============================================================
DESIGN TOKENS — :root (light mode)
Nazewnictwo:
--color-* → kolory semantyczne
--font-* → font stacks
--space-* → spacing scale (px → rem)
--bp-* → breakpoints (tylko dla JS media queries;
w CSS używaj wartości bezpośrednio)
--ease-* → timing functions
--radius-* → border-radius scale
============================================================ */
:root {
/* --- Kolory (light mode) --- */
--color-bg: #F5EFE0; /* tło główne — ciepła mąka */
--color-bg-alt: #FDFAF4; /* sekcje alternatywne */
--color-bg-dark: #3D2B1F; /* ciemne sekcje: reframe, platform, final CTA */
--color-bg-darkest: #1A1A1A; /* footer */
--color-bg-muted: #E8DECA; /* blob, karty, placeholdery */
--color-text: #3D2B1F; /* tekst główny */
--color-text-mid: #7A4F3A; /* akcenty, labels, secondary text */
--color-text-light: #C4956A; /* tertiary text, borders */
--color-text-on-dark: #F5EFE0; /* tekst na ciemnych sekcjach */
--color-text-on-dark-muted: rgba(245, 239, 224, 0.72); /* secondary na dark */
--color-accent: #D4A853; /* gold — CTA, ceny, highlights */
--color-accent-hover: #c89940; /* gold hover — ciemniejszy */
--color-border: rgba(122, 79, 58, 0.18); /* subtelne linie */
--color-border-accent: #C4956A; /* wyróżnione linie (testimonial left-border) */
/* --- Aliasy semantyczne --- */
--cream: var(--color-bg);
--cream-dark: var(--color-bg-muted);
--warm-white: var(--color-bg-alt);
--brown-dark: var(--color-bg-dark);
--brown-mid: var(--color-text-mid);
--brown-light: var(--color-text-light);
--gold: var(--color-accent);
--charcoal: var(--color-bg-darkest);
/* --- Fonty --- */
--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', monospace; /* dla kodu, jeśli potrzebny */
/* --- Spacing scale (8px base) --- */
--space-xs: 8px; /* 0.5rem */
--space-sm: 16px; /* 1rem */
--space-md: 32px; /* 2rem */
--space-lg: 64px; /* 4rem */
--space-xl: 120px; /* 7.5rem */
--space-2xl: 180px; /* 11.25rem */
/* --- Breakpoints (dla JS: window.matchMedia) --- */
--bp-mobile: 375px;
--bp-tablet: 768px;
--bp-desktop: 1280px;
/* --- Max widths --- */
--max-width: 1200px; /* container główny */
--max-width-narrow: 780px; /* kolumny tekstowe, FAQ */
--max-width-content: 65ch; /* max czytelna długość linii */
/* --- Border radius --- */
--radius-sm: 3px; /* przyciski CTA */
--radius-md: 6px; /* karty, obrazy screenshotów */
--radius-full: 50%; /* avatary */
/* --- Easing functions --- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
/* --- Transitions (skracane przez prefers-reduced-motion) --- */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.45s var(--ease-out);
/* --- Z-index scale --- */
--z-base: 1;
--z-raised: 10;
--z-nav: 100;
--z-sticky: 90;
--z-overlay: 200;
--z-grain: 9998; /* grain texture — ponad wszystkim, pointer-events: none */
}
/* ============================================================
DARK MODE — prefers-color-scheme: dark
Strategia: zamieniamy bg i text; gold zostaje jako akcent.
Ciemne sekcje (.reframe, .platform, .final-cta) w light mode
używają --color-bg-dark. W dark mode te sekcje używają
jeszcze ciemniejszego tła (--color-bg-darkest) żeby
zachować hierarchię.
============================================================ */
@media (prefers-color-scheme: dark) {
:root {
/* Backgrounds */
--color-bg: #1E1510; /* ciepłe ciemne — nie zimny szary */
--color-bg-alt: #261A12; /* sekcje alternatywne */
--color-bg-dark: #120D08; /* ciemne sekcje */
--color-bg-darkest: #0A0705; /* footer */
--color-bg-muted: #2E2018; /* blob, placeholdery */
/* Text */
--color-text: #F0E8D5; /* główny tekst — ciepła biel */
--color-text-mid: #C4956A; /* brown-light staje się mid */
--color-text-light: #8A6448; /* tertiary */
--color-text-on-dark: #F0E8D5;
--color-text-on-dark-muted: rgba(240, 232, 213, 0.65);
/* Akcenty */
--color-accent: #D4A853; /* gold zostaje */
--color-accent-hover: #e8ba65;
/* Borders */
--color-border: rgba(196, 149, 106, 0.15);
--color-border-accent: #7A4F3A;
}
}
/* ============================================================
CSS RESET — Modern Normalize style
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
}
body {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.1vw, 1.125rem);
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Remove list styles only when ul/ol have role=list (VoiceOver bug fix) */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* Unikaj orphans w nagłówkach */
h1, h2, h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: inherit;
text-decoration: none;
}
/* Usuń domyślne style przycisku — resetuj tylko gdy potrzebne */
button {
background: none;
border: none;
cursor: pointer;
}
/* Tabelki */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Details/Summary reset */
details > summary {
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
/* Focus ring — dostępność */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* Ukryj focus ring gdy używasz myszy */
:focus:not(:focus-visible) {
outline: none;
}
/* ============================================================
BASE TYPOGRAPHY
============================================================ */
/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
line-height: 1.15;
color: var(--color-text);
font-weight: 600;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem);
font-weight: 400;
font-style: italic;
color: var(--color-text-mid);
letter-spacing: 0; }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
h5 { font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700; }
h6 { font-size: clamp(0.85rem, 1vw, 0.95rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-mid); }
/* Handcrafted SVG underline na em w H1/H2 */
h1 em,
h2 em {
font-style: italic;
color: var(--color-text-mid);
position: relative;
display: inline;
}
h1 em::after,
h2 em::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,7 C55,1 120,9 185,5 C245,1 282,8 298,6' stroke='%23D4A853' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* --- Body text --- */
p {
font-size: clamp(1rem, 1.1vw, 1.125rem);
line-height: 1.75;
color: var(--color-text);
max-width: var(--max-width-content);
}
/* --- Kicker / eyebrow --- */
.kicker {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-text-mid);
}
/* --- Lists --- */
ul, ol {
padding-left: 0;
list-style: none;
}
/* Listy wewnątrz treści (np. artykuł) */
.prose ul,
.prose ol {
padding-left: var(--space-md);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
margin-bottom: 0.5em;
line-height: 1.7;
}
/* --- Blockquote --- */
blockquote {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
font-weight: 400;
font-style: italic;
line-height: 1.65;
color: var(--color-text);
border-left: 3px solid var(--color-border-accent);
padding-left: var(--space-md);
margin: 0;
}
blockquote cite {
display: block;
font-style: normal;
font-size: 0.82rem;
font-family: var(--font-sans);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-mid);
margin-top: 1rem;
}
/* --- Strong / em --- */
strong {
font-weight: 700;
color: var(--color-text-mid);
}
em {
font-style: italic;
}
/* --- Small text --- */
small {
font-size: 0.8em;
color: var(--color-text-mid);
}
/* --- Links inline --- */
.prose a {
color: var(--color-text-mid);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-underline-offset: 3px;
transition: color var(--transition-fast);
}
.prose a:hover {
color: var(--color-accent);
}
/* --- Horizontal rule --- */
hr {
border: none;
border-top: 1px solid var(--color-border);
margin-block: var(--space-md);
}
/* ============================================================
UTILITY CLASSES
============================================================ */
/* Maksymalna szerokość + horizontalne marginesy */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-sm); /* 16px mobile */
}
@media (min-width: 768px) {
.container {
padding-inline: var(--space-md); /* 32px tablet+ */
}
}
@media (min-width: 1280px) {
.container {
padding-inline: var(--space-sm); /* padding mniejszy bo max-width ogranicza */
}
}
/* Sekcja — pionowy padding */
.section {
padding-block: var(--space-lg); /* 64px mobile */
}
@media (min-width: 768px) {
.section {
padding-block: var(--space-xl); /* 120px tablet+ */
}
}
/* Sekcja ciemna */
.section-dark {
background-color: var(--color-bg-dark);
color: var(--color-text-on-dark);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
color: var(--color-text-on-dark);
}
.section-dark p {
color: var(--color-text-on-dark-muted);
}
/* Sekcja alternatywna (warm-white) */
.section-alt {
background-color: var(--color-bg-alt);
}
/* Wąski kontener — do tekstu, FAQ */
.container-narrow {
width: 100%;
max-width: var(--max-width-narrow);
margin-inline: auto;
padding-inline: var(--space-sm);
}
@media (min-width: 768px) {
.container-narrow {
padding-inline: var(--space-md);
}
}
/* --- Dostępność --- */
/* Ukrij wizualnie, zostaw dla screen readerów */
.visually-hidden,
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Pokaż przy focusie (dla skip links) */
.visually-hidden:focus,
.sr-only:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* Skip link — dostępność klawiaturowa */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-sm);
z-index: var(--z-overlay);
padding: var(--space-xs) var(--space-sm);
background-color: var(--color-accent);
color: var(--color-text);
font-weight: 700;
font-size: 0.875rem;
border-radius: var(--radius-sm);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-sm);
}
/* --- Flex/Grid helpers --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center{ align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
/* --- Text alignment --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
/* --- Display --- */
.hidden { display: none; }
/* --- Grain texture overlay (paper feel) --- */
/* Stosuj na body — nie importuj dwa razy */
.grain-overlay::before {
content: '';
position: fixed;
inset: -50%;
width: 200%;
height: 200%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.032;
pointer-events: none;
z-index: var(--z-grain);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1;
padding: 16px 40px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
text-align: center;
text-decoration: none;
transition:
background-color var(--transition-base),
color var(--transition-base),
border-color var(--transition-base),
transform var(--transition-fast);
}
/* Press feedback */
.btn:active {
transform: translateY(1px);
}
/* --- Primary — gold --- */
.btn-primary,
.btn--primary {
background-color: var(--color-accent);
color: var(--color-bg-dark);
border-color: var(--color-accent);
}
.btn-primary:hover,
.btn--primary:hover {
background-color: var(--color-accent-hover);
border-color: var(--color-accent-hover);
transform: translateY(-2px);
}
/* --- Secondary — outlined --- */
.btn-secondary,
.btn--secondary {
background-color: transparent;
color: var(--color-text);
border-color: var(--color-text);
}
.btn-secondary:hover,
.btn--secondary:hover {
background-color: var(--color-text);
color: var(--color-bg);
transform: translateY(-2px);
}
/* --- Ghost (dark bg) --- */
.btn-ghost {
background-color: transparent;
color: var(--color-text-on-dark);
border-color: rgba(245, 239, 224, 0.4);
}
.btn-ghost:hover {
background-color: var(--color-text-on-dark);
color: var(--color-bg-dark);
border-color: var(--color-text-on-dark);
transform: translateY(-2px);
}
/* --- Size variants --- */
.btn-sm { padding: 10px 24px; font-size: 0.75rem; }
.btn-lg { padding: 20px 52px; font-size: 0.875rem; }
.btn-full{ display: block; width: 100%; text-align: center; }
/* Aliasy z index.html Ani */
.btn--nav { padding: 10px 24px; font-size: 0.75rem; }
.btn--large { padding: 20px 52px; font-size: 0.875rem; }
.btn--sticky { display: block; width: 100%; text-align: center; padding: 16px; }
/* Dark mode: primary zostaje gold, secondary zmienia kontrast */
@media (prefers-color-scheme: dark) {
.btn-secondary,
.btn--secondary {
border-color: rgba(240, 232, 213, 0.35);
color: var(--color-text);
}
.btn-secondary:hover,
.btn--secondary:hover {
background-color: var(--color-text);
color: var(--color-bg-dark);
}
}
/* ============================================================
PREFERS-REDUCED-MOTION
Wyłącz wszystkie transitions i animations.
Marquee spowalniamy zamiast zatrzymywać (motion != animation).
============================================================ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Marquee: nie zatrzymuj — spowalniaj (ruch jest OK, szybki ruch nie) */
.dm-marquee__track {
animation-duration: 120s !important;
animation-iteration-count: infinite !important;
}
/* Elementy które startują jako opacity:0 — pokaż od razu */
[style*="opacity: 0"],
.js-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================================
10 NAJCZĘSTSZYCH BŁĘDÓW CSS — CZEGO UNIKAĆ W TYM PROJEKCIE
1. BRAK will-change po animacji
Problem: will-change: transform pozostawione na elemencie
po zakończeniu GSAP = niepotrzebna warstwa GPU.
Fix: po zakończeniu animacji GSAP ustaw will-change: auto
lub usuń właściwość. W CSS dodawaj tylko na czas animacji.
2. BLOKOWANIE LCP przez opacity: 0 na hero headline
Problem: H1 ze opacity:0 jako stan startowy animacji —
przeglądarka nie zlicza go do LCP (Largest Contentful Paint).
Fix: H1 nigdy nie zaczyna jako opacity:0. Animuj kicker, sub, CTA —
nie główny nagłówek. (Zrobione w style.css)
3. @import CSS w produkcji
Problem: @import blokuje render — przeglądarka musi pobrać
base.css zanim zacznie pobierać właściwy plik.
Fix: linkuj pliki przez w .
Ten plik używa @import tylko jako fallback standalone.
4. Bez width/height na obrazach → CLS
Problem: brak atrybutów width i height na ![]()
= Cumulative Layout Shift.
Fix: ZAWSZE deklaruj width i height — nawet na hero img.
Robi to już index.html Ani.
5. CSS Custom Properties bez fallbacków
Problem: var(--color-text) bez fallbacka = pustka jeśli var nie istnieje
(starsze Safari, błąd typograficzny).
Fix: var(--color-text, #3D2B1F) — dodaj wartość fallback.
6. Margin collapsing przy display: flex / grid
Problem: margin na dzieciach flexa/grida nie collapsuje —
łatwo o podwójny spacing przez nieświadome mieszanie.
Fix: używaj gap zamiast margin-top/-bottom na dzieciach.
7. vh na mobile = viewport z paskiem przeglądarki
Problem: 100vh na mobile = za dużo (obejmuje pasek adresu).
Fix: użyj 100dvh (dynamic viewport height) z fallbackiem na 100vh.
.hero { min-height: 100vh; min-height: 100dvh; }
8. Z-index bez planu = spaghetti
Problem: z-index: 999, 9999, 99999 w różnych miejscach.
Fix: Używaj zmiennych --z-base/raised/nav/sticky/overlay/grain
zdefiniowanych w :root. Nigdy nie hardcoduj wartości > 200.
9. Brak font-display: swap na fontach
Problem: Google Fonts bez display=swap blokuje render tekstu.
Fix: URL Google Fonts zawiera &display=swap (już w index.html).
Sprawdź w DevTools > Network > Font timing.
10. Zbyt wiele selektorów kontekstowych (specificity wars)
Problem: .hero .container .hero__content p { ... } —
specificity 0,3,1 = trudne do nadpisania.
Fix: flat BEM selectors: .hero__sub {} — specificity 0,1,0.
Unikaj zagnieżdżania głębszego niż 2 poziomy.
============================================================ */