/* ===================================================================== KAROLINA MATJUNIN — GLOBALNY ARKUSZ STYLÓW (zbiorczy) Używany na wszystkich stronach. Design tokens + baza + komponenty. Font: aktiv-grotesk (Adobe Fonts / Typekit) — ładowany w . ===================================================================== */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Kolory */ --c-black: #000000; --c-white: #ffffff; --c-text-muted: #dcdcdc; /* jasnoszary tekst na ciemnym tle */ --c-paper: #ffffff; /* domyślne jasne tło */ --c-ink: #000000; /* tekst na jasnym tle */ /* Motyw ciemny (hero / bright-inverse) */ --bg: var(--c-black); --fg: var(--c-text-muted); --fg-strong: var(--c-white); /* Typografia */ --font-sans: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; --fs-nav: 0.9rem; /* 14.4px */ --fs-title: 2rem; /* ~32px logo/tytuł */ --fs-h4: 1.4rem; /* ~22px podtytuł */ --fs-lead: 1.1rem; /* ~17.6px duży akapit */ --fs-body: 1rem; --lh-body: 1.7; --ls-nav: 0.02em; /* Layout */ --header-h: 73px; --content-max: 1180px; --gutter: clamp(20px, 4vw, 48px); /* Przyciski */ --btn-border-w: 4px; --btn-radius: 300px; --btn-pad-x: 35px; --btn-min-h: 62px; --transition-fast: 0.1s linear; } /* ---------- 2. RESET / BAZA ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* ---------- 3. MOTYWY SEKCJI ---------- */ .theme-dark { --bg: var(--c-black); --fg: var(--c-text-muted); --fg-strong: var(--c-white); background: var(--bg); color: var(--fg); } .theme-light { --bg: var(--c-white); --fg: var(--c-ink); --fg-strong: var(--c-black); background: var(--bg); color: var(--fg); } /* ---------- 4. HEADER / NAWIGACJA ---------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); color: var(--fg-strong); } .site-header--on-dark { color: var(--c-white); } .site-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 2.4vw, 40px); } .main-nav a { font-size: var(--fs-nav); font-weight: 500; letter-spacing: var(--ls-nav); padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color var(--transition-fast); } .main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: currentColor; } /* Hamburger (mobile) */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: var(--fs-lead); font-weight: 500; color: inherit; padding: 6px; } /* ---------- 5. PRZYCISKI ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-min-h); padding: 0 var(--btn-pad-x); font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 500; letter-spacing: var(--ls-nav); line-height: 1; border-radius: var(--btn-radius); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } /* Secondary (pill z obwódką) — jak na stronie głównej */ .btn--secondary { background: transparent; color: var(--fg); border: var(--btn-border-w) solid currentColor; } .btn--secondary:hover { background: var(--fg); color: var(--bg); } /* ---------- 6. KONTENERY / UŻYTKI ---------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .text-center { text-align: center; } /* ---------- 7. STOPKA (pusta w oryginale) ---------- */ .site-footer { } /* ---------- 8. RESPONSYWNOŚĆ ---------- */ @media (max-width: 768px) { :root { --fs-title: 1.5rem; } .nav-toggle { display: inline-block; } .main-nav { position: fixed; inset: 0; background: var(--c-black); color: var(--c-white); display: flex; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.25s ease; } .main-nav.is-open { transform: translateX(0); } .main-nav ul { flex-direction: column; text-align: center; gap: 28px; } .main-nav a { font-size: 1.5rem; } }