/* ========================================================= TIVOLI — DESIGN SYSTEM: base.css Reset, CSS variables (colors, type, spacing, radius, layout), base typography. Every other stylesheet builds on this file. ========================================================= */ /* ---------- Design tokens ---------- */ :root { /* Colors — kremowe/beżowe tła + elegancka zieleń Tivoli + ciemny tekst */ --color-cream: #F7F2E4; --color-cream-soft: #FBF8F1; --color-cream-deep: #EFE6CE; --color-cream-line: #E4D9BB; --color-green-900: #12231A; --color-green-800: #17301F; --color-green-700: #1F4227; --color-green-600: #2B5636; --color-green-500: #3B6E45; --color-green-100: #E3EAE1; --color-gold: #C79A44; --color-gold-soft: #E7CE94; --color-gold-deep: #A67B2E; --color-red: #A83B2C; /* ETAP 17C (audyt 17A) — #F1DAD4 był już de facto ustalonym, konsekwentnie używanym tłem "miękkiego czerwonego" (błąd/ niedostępność) w kilkunastu miejscach w całym motywie, tylko nigdy nie nazwany jako token. Wartość bez zmian — to samo domyślne tło .badge--red sprzed tego etapu. */ --color-red-soft: #F1DAD4; --color-ink: #221C14; --color-ink-soft: #4A4234; --color-white: #FFFFFF; --color-surface: var(--color-cream); --color-surface-alt: var(--color-cream-deep); --color-text: var(--color-ink); --color-text-muted: var(--color-ink-soft); --color-brand: var(--color-green-700); /* Typography */ --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --fs-h1: clamp(2.75rem, 2.1rem + 3vw, 5.25rem); --fs-h2: clamp(2.1rem, 1.75rem + 1.6vw, 3.4rem); --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem); --fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem); --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.35rem); --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.65; /* Spacing scale */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* Radius */ --radius-sm: 10px; --radius-md: 20px; --radius-lg: 32px; --radius-xl: 48px; --radius-full: 999px; /* Layout */ --container-max: 1320px; --container-narrow: 860px; --container-pad: clamp(1.25rem, 4vw, 3rem); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.2s; --dur-base: 0.4s; --dur-slow: 0.8s; /* Shadows */ --shadow-sm: 0 2px 8px rgba(18, 35, 26, 0.06); --shadow-md: 0 12px 32px rgba(18, 35, 26, 0.12); --shadow-lg: 0 28px 60px rgba(18, 35, 26, 0.18); --shadow-header: 0 8px 30px rgba(18, 35, 26, 0.08); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Audyt overflow (2026-08) — body już ma to samo od pierwszego commita (patrz niżej), ale document.documentElement () nigdy nie dostał tej samej osłony. Realny przypadek: elementy z [data-reveal-left]/[data-reveal-right] (assets/js/animations.js) startują z gsap.set(..., {x: ±32}) i stoją w tym stanie, dopóki ScrollTrigger nie uzna ich za widoczne (scroll uzytkownika) — do tego momentu transform wystaje 32px poza normalny box, co body samo skutecznie ukrywa (overflow-x: clip), ale scrollWidth mimo to raportował nadmiar, bo html zostawało na wartości domyślnej "visible". Czysto pomiarowo-defensywne — nie zmienia wyglądu ani działania animacji, tylko domyka tę samą już istniejącą osłonę na poziomie . */ overflow-x: clip; } html:focus-within { scroll-behavior: smooth; } body { min-height: 100svh; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background-color: var(--color-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, picture, svg { max-width: 100%; display: block; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } /* ---------- Base typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-heading); color: var(--color-ink); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 500; } h2 { font-size: var(--fs-h2); font-weight: 500; } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-deep); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; display: inline-block; } .lead { font-size: var(--fs-lead); color: var(--color-text-muted); line-height: 1.55; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .screen-reader-text:focus { position: fixed; top: var(--space-sm); left: var(--space-sm); width: auto; height: auto; padding: var(--space-xs) var(--space-md); background: var(--color-green-800); color: var(--color-cream); border-radius: var(--radius-sm); z-index: 999; clip: auto; } ::selection { background: var(--color-green-700); color: var(--color-cream); }