/* ============================================================================ WojtekAI — Brand Design System · RETRO build colors_and_type.css — foundational + semantic tokens ---------------------------------------------------------------------------- Aesthetic: retro-futurism / bajkowy cyberpunk, ale RETRO. CRT / VHS / terminal lat 80-90, retro-Matrix, boot sequence. Magenta + cyan PRZYGASZONE ("przepuszczone przez stary ekran") — tekstura (scanline/grain) zamiast bloom. Litery "wydrukowane na ekranie", nie świecące w ciemności. Dark mode bazowo. Fonts: IBM Plex Mono (nagłówki/labelki/dane — terminal feel) + IBM Plex Sans (body). Ładowane przez w (preconnect) zamiast @import. API kompatybilne wstecz: stare nazwy tokenów (--bg-base, --magenta, --r-lg, --glow-*, --grad-neon, --fg-1..4, --font-sans...) są zachowane, ale dostają retro wartości — dzięki temu reszta CSS-a staje się retro bez przepisywania. ========================================================================== */ :root { /* ---------------------------------------------------------------- TYPE -- */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --font-display: var(--font-mono); /* nagłówki = mono terminal */ /* Weights (IBM Plex: 400-700; extrabold/black mapowane na 700) */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 700; --w-black: 700; /* Fluid display + heading scale */ --fs-display: clamp(3rem, 7vw, 6.5rem); /* 48 → 104 hero */ --fs-h1: clamp(2.25rem, 4.5vw, 4rem); /* 36 → 64 */ --fs-h2: clamp(1.75rem, 3vw, 2.75rem); /* 28 → 44 */ --fs-h3: clamp(1.375rem, 2vw, 1.875rem); /* 22 → 30 */ --fs-h4: 1.25rem; /* 20 */ --fs-body-lg: 1.1875rem; /* 19 */ --fs-body: 1.0625rem; /* 17 */ --fs-small: 0.9375rem; /* 15 */ --fs-eyebrow: 0.8125rem; /* 13 mono, tracked-out */ --fs-micro: 0.6875rem; /* 11 mono caps */ --lh-tight: 1.06; --lh-snug: 1.16; --lh-body: 1.58; /* Mono potrzebuje więcej powietrza niż Geist — luźniejszy tracking */ --tracking-display: -0.01em; --tracking-h: -0.005em; --tracking-body: 0em; --tracking-eyebrow: 0.22em; /* mono eyebrows: terminal label */ --tracking-mono: 0.02em; /* -------------------------------------------------------------- COLOR -- */ /* Backgrounds — the void (deep navy-black, próbkowane z assetów) */ --bg-void: #050409; /* deepest — page base extreme */ --bg-base: #07060D; /* primary canvas */ --bg-surface: #0E0C18; /* lifted card */ --bg-elevated: #15121F; /* menus, popovers */ --bg-inset: #0A0913; /* wells, code blocks */ /* Brand accents — PRZYGASZONE, nigdy pełny neon */ --magenta: #CF4D92; --magenta-bright: #E06AA8; --magenta-deep: #8A3A66; --cyan: #3FB0CC; --cyan-bright: #6FC8DD; --cyan-deep: #2A7488; --violet: #8A5A9E; /* zdesaturowany midpoint, nie rave-fiolet */ /* Sygnaturowy gradient — muted magenta → cyan (bez rave-fioletu) */ --grad-neon: linear-gradient(100deg, #CF4D92 0%, #7C5C8E 52%, #3FB0CC 100%); --grad-neon-soft: linear-gradient(100deg, #CF4D92 0%, #3FB0CC 100%); --grad-text: linear-gradient(100deg, #E06AA8 0%, #6FC8DD 100%); /* Foreground — phosphor off-white & lavender greys */ --fg-1: #E9E7F2; /* primary text — phosphor off-white */ --fg-2: #A9A3C0; /* secondary text (czytelny na dark) */ --fg-3: #6E6885; /* muted / captions */ --fg-4: #46415A; /* disabled / faint */ --fg-on-neon: #07060D; /* text on accent fills */ /* Lines & strokes */ --border-faint: rgba(255, 255, 255, 0.05); --border-soft: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.15); --border-magenta: rgba(207, 77, 146, 0.45); --border-cyan: rgba(63, 176, 204, 0.45); /* Glass fills (przygaszone) */ --glass-1: rgba(255, 255, 255, 0.03); --glass-2: rgba(255, 255, 255, 0.06); --glass-mag: rgba(207, 77, 146, 0.08); --glass-cyan: rgba(63, 176, 204, 0.08); /* Semantic (zdesaturowane, screen-filtered) */ --info: var(--cyan); --success: #5FB97E; --warning: #D9A441; --danger: #D7596A; /* ------------------------------------------------------ RADIUS / SPACE -- */ /* Niskie, twarde krawędzie — panele CRT */ --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 999px; /* tylko status chips / badge */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ------------------------------------------------- SHADOW / GLOW / BLOOM */ /* Płaskie, ciemne cienie. Jedyny dozwolony "glow" = ciasny 1px edge ring. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --edge-magenta: 0 0 0 1px rgba(207, 77, 146, 0.55); --edge-cyan: 0 0 0 1px rgba(63, 176, 204, 0.55); /* "glow" tokeny zmapowane na ciasne edge ringi (zero bloom halo) */ --glow-magenta: var(--edge-magenta); --glow-cyan: var(--edge-cyan); --glow-magenta-lg: var(--edge-magenta); --glow-cyan-lg: var(--edge-cyan); --bloom: none; /* ------------------------------------------------------------- MOTION -- */ /* Retro: snappy + step. Nie smooth glow pulse. */ --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-float: cubic-bezier(0.45, 0, 0.55, 1); --ease-step: steps(8, end); --t-fast: 90ms; --t-base: 160ms; --t-slow: 360ms; /* Retro screen overlay */ --scanline: repeating-linear-gradient( to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px); } /* ============================================================================ SEMANTIC ELEMENT STYLES — opt in by adding the .wai-type scope. ========================================================================== */ .wai-type { font-family: var(--font-sans); color: var(--fg-1); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Nagłówki = IBM Plex Mono (retro terminal). Body zostaje sans. */ .wai-type .display, .wai-display, .wai-type h1, .wai-h1, .wai-type h2, .wai-h2, .wai-type h3, .wai-h3, .wai-type h4, .wai-h4 { font-family: var(--font-display); } .wai-type .display, .wai-display { font-weight: var(--w-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-wrap: balance; } .wai-type h1, .wai-h1 { font-weight: var(--w-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); text-wrap: balance; } .wai-type h2, .wai-h2 { font-weight: var(--w-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); text-wrap: balance; } .wai-type h3, .wai-h3 { font-weight: var(--w-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: 0; } .wai-type h4, .wai-h4 { font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: 1.32; } .wai-type p, .wai-p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; } .wai-lead { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--fg-2); } /* Mono eyebrow — terminal label (np. "> CO ROBIĘ") */ .wai-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--w-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cyan); } .wai-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; } .wai-micro { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } /* Muted gradient text — tylko na kluczowe słowa */ .wai-grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } code, .wai-code { font-family: var(--font-mono); font-size: 0.92em; color: var(--cyan-bright); background: var(--bg-inset); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 0.12em 0.42em; } /* Retro scanline overlay utility (dekoracja; pointer-events: none) */ .ds-scanlines { position: relative; } .ds-scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--scanline); mix-blend-mode: overlay; opacity: .6; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }