/* ============================================ DRUKARNIA DPI — Design System Custom Properties, Reset, Typography ============================================ */ @layer reset, design-system, layout, components, sections, animations, utilities; /* --- Kroje pisma --- Przeniesione na własny serwer: patrz css/fonts.css (ładowany -iem w ). Wcześniejszy @import z fonts.googleapis.com przekazywał adres IP każdego odwiedzającego do Google, a jako @import blokował się dodatkowo za pobraniem tego arkusza. */ /* ============================================ RESET ============================================ */ @layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100dvh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; line-height: 1.2; } p { overflow-wrap: break-word; } } /* ============================================ DESIGN SYSTEM — Custom Properties ============================================ */ @layer design-system { :root { /* Colors — Primary */ --color-primary: #E91E8C; --color-primary-hover: #D01A7E; --color-primary-active: #B8156E; /* Ciemniejszy róż pod BIAŁY tekst w małym rozmiarze. #E91E8C z bielą daje 4.18:1 (za mało), ten 5.08:1 — zdaje AA przy 11px. */ --color-primary-deep: #D01A7E; --color-primary-deepest: #A01260; /* Jaśniejszy róż na TEKST leżący na ciemnym tle. #E91E8C jako tekst na #1A1A2E daje 4.08:1, ten 5.17:1. */ --color-primary-on-dark: #F13D97; /* Jeszcze jaśniejszy — na tło pól i kafelków #2A2A3E, gdzie #F13D97 daje tylko 3.91:1. Ten osiąga 5.26:1. */ --color-primary-on-surface: #FF6BB0; --color-primary-glow: rgba(233, 30, 140, 0.15); --color-primary-glow-strong: rgba(233, 30, 140, 0.3); /* Colors — Backgrounds */ --color-bg-dark: #1A1A2E; --color-bg-darker: #121220; --color-bg-surface: #2A2A3E; --color-bg-light: #F5F5F5; /* Colors — Borders */ --color-border: #3A3A4E; --color-border-hover: #E91E8C; /* Colors — Text */ --color-text-primary: #FFFFFF; --color-text-secondary: #A0A0B0; --color-text-muted: #6B6B7B; --color-text-dark: #1A1A2E; /* Colors — Tagatic */ --color-tagatic: #FFDC00; --color-tagatic-hover: #E6C600; --color-tagatic-text: #000000; /* Wariant przycisku — cieplejszy żółty, lepiej odcina się od jasnego tła sekcji */ --color-tagatic-btn: #FFB300; --color-tagatic-btn-hover: #E89F00; /* Typography */ --font-heading: 'Outfit', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing (8px base) */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-section: 8rem; /* Layout */ --container-max: 1280px; --container-padding: clamp(1.5rem, 5vw, 4rem); --nav-height: 72px; /* Animation */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.22, 1.36, 0.36, 1); --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 800ms; --duration-reveal: 1200ms; /* Borders */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Mouse tracking (updated by JS) */ --mouse-x: 0.5; --mouse-y: 0.5; } /* Typography */ body { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-primary); background-color: var(--color-bg-dark); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); } h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.2; letter-spacing: -0.01em; } h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; line-height: 1.3; } p { color: var(--color-text-secondary); line-height: 1.7; } /* Odstęp między akapitami = dokładnie jeden wiersz tekstu */ p + p { margin-top: 1.7em; margin-top: 1lh; } /* Nagłówek nie może kleić się do akapitu pod nim */ h2 + p, h3 + p, h4 + p, blockquote + p { margin-top: 1.275em; margin-top: 0.75lh; } /* Selection */ ::selection { background: var(--color-primary); color: white; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-darker); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }