/** * Code The Cube — terminal + paleta jak scena Spline: czerń, gradient cyan → niebieski → fiolet → magenta, neon glow. */ /** * Tryb `SECTION_TEST_KEEP` w main.js: po odcięciu sekcji dodawana jest klasa `section-test-active` na . * Odcina drogie warstwy (scanline na cały viewport, blur nagłówka, mocny text-shadow na body) — bez wyłączania glitchu wordmarku w hero. */ html.section-test-active { scroll-behavior: auto !important; } html.section-test-active .theme-terminal::after { display: none !important; } html.section-test-active body.theme-terminal, html.section-test-active body.theme-terminal .hero__tagline, html.section-test-active body.theme-terminal .hero__pillars { text-shadow: none !important; } html.section-test-active .site-header { backdrop-filter: none; background: var(--color-ink); } :root { --color-black: #000000; --color-ink: #06060a; --color-surface: #0c0c12; --color-surface-raised: #14141f; /* Kotwice gradientu (jak obramówki / podłoże siatek w Spline) */ --brand-cyan: #00e8ff; --brand-blue: #5280ff; --brand-violet: #a855f7; --brand-magenta: #ff2d92; --gradient-brand-h: linear-gradient( 90deg, var(--brand-cyan) 0%, var(--brand-blue) 38%, var(--brand-violet) 68%, var(--brand-magenta) 100% ); --gradient-brand-diag: linear-gradient(125deg, var(--brand-cyan) 0%, var(--brand-blue) 45%, var(--brand-magenta) 100%); --color-border: rgba(0, 232, 255, 0.14); --color-border-strong: rgba(255, 45, 146, 0.22); --color-text: #eef3ff; --color-text-muted: #8b9cc4; --color-text-dim: #5c678a; /* Zgodność ze starymi selektorami: „prompt” = cyan, drugi akcent = magenta */ --accent-cyan: var(--brand-cyan); --accent-magenta: var(--brand-magenta); --accent-terminal: var(--brand-cyan); --accent-terminal-dim: #3d6fb8; --color-danger: #ff6b6b; --color-amber: #e8c547; /* Symulator: oszczędność po wdrożeniu — neon zielony */ --sim-savings-neon: #39ff14; --font-display: "Syne", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-pixel: "Silkscreen", cursive; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --radius: 6px; --radius-sm: 4px; --max-width: 72rem; --header-strip-h: 1.75rem; --header-bar-h: 3.25rem; --header-total-h: calc(var(--header-strip-h) + var(--header-bar-h)); --term-glow: 0 0 28px color-mix(in srgb, var(--brand-cyan) 22%, transparent), 0 0 52px color-mix(in srgb, var(--brand-magenta) 14%, transparent); --term-scanline-strength: 0.04; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @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; } .glitch::before, .glitch::after { display: none !important; } .hero-cta-hint { transition: none !important; } .theme-terminal::after { display: none !important; } .code-rail__line::after { animation: none !important; opacity: 1 !important; } .theme-terminal .section-label { animation: none !important; background-position: 0% 50% !important; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-black); -webkit-font-smoothing: antialiased; } /* Cała strona jak sesja w terminalu: mono, tło, subtelny „CRT” */ .theme-terminal { font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.65; background: radial-gradient(ellipse 90% 55% at 50% 100%, color-mix(in srgb, var(--brand-magenta) 10%, transparent) 0%, transparent 55%), radial-gradient(ellipse 70% 45% at 0% 0%, color-mix(in srgb, var(--brand-cyan) 12%, transparent) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 100% 30%, color-mix(in srgb, var(--brand-violet) 8%, transparent) 0%, transparent 45%), var(--color-black); color: var(--color-text); text-shadow: 0 0 1px color-mix(in srgb, var(--brand-cyan) 18%, transparent), 0 0 12px color-mix(in srgb, var(--brand-magenta) 6%, transparent); } .theme-terminal::after { content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 9998; background: repeating-linear-gradient( 0deg, rgb(0 0 0 / var(--term-scanline-strength)) 0 1px, transparent 1px 3px ); opacity: 1; } .theme-terminal .hero__title-brand { font-family: var(--font-display); } /* Glow na faktycznym tekście wordmarku (wewnątrz .glitch) */ .theme-terminal .hero__title-brand .glitch { text-shadow: 0 0 48px color-mix(in srgb, var(--brand-cyan) 35%, transparent), 0 0 80px color-mix(in srgb, var(--brand-magenta) 22%, transparent), 0 0 2px color-mix(in srgb, var(--brand-cyan) 40%, transparent); } .theme-terminal .hero__tagline { font-family: var(--font-display); text-shadow: 0 0 18px color-mix(in srgb, var(--brand-cyan) 14%, transparent), 0 0 1px color-mix(in srgb, var(--color-text) 18%, transparent); } main { flex: 1; } img, picture, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent-cyan); text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; } a:hover { color: var(--brand-magenta); text-decoration: underline; text-shadow: 0 0 12px color-mix(in srgb, var(--brand-magenta) 35%, transparent); } .mono { font-family: var(--font-mono); } .skip-link { position: absolute; left: -9999px; top: var(--space-sm); z-index: 10000; padding: var(--space-xs) var(--space-sm); background: var(--gradient-brand-h); color: var(--color-black); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-sm); } .skip-link:focus { left: var(--space-sm); } .container { width: min(100% - var(--space-md) * 2, var(--max-width)); margin-inline: auto; } /* —— Nagłówek (terminal: pasek sesji + belka nawigacji) —— */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; flex-direction: column; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-ink) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-cyan) 12%, transparent), 0 2px 24px color-mix(in srgb, var(--brand-magenta) 6%, transparent); } .term-session-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.75rem; min-height: var(--header-strip-h); margin: 0; padding: 0.2rem var(--space-md); font-size: 0.68rem; color: var(--color-text-dim); border-bottom: 1px solid var(--color-border); background: var(--color-black); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-cyan) 8%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-magenta) 8%, transparent); animation: term-strip-glow 6.8s ease-in-out infinite; } .term-session-strip__user { color: var(--accent-cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-cyan) 35%, transparent); animation: term-strip-flicker-cyan 5.2s steps(2, end) infinite; } .term-session-strip__at, .term-session-strip__path { color: var(--color-text-muted); } .term-session-strip__prompt { margin-right: 0.35rem; color: var(--accent-terminal); font-weight: 700; text-shadow: 0 0 8px color-mix(in srgb, var(--accent-terminal) 38%, transparent), 0 0 16px color-mix(in srgb, var(--brand-magenta) 16%, transparent); animation: term-strip-prompt-pulse 2.4s ease-in-out infinite; } .term-session-strip__meta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text-dim); animation: term-strip-meta-shift 8.5s ease-in-out infinite; } .term-session-strip__msg { color: inherit; } .term-session-strip__sep { color: var(--color-text-dim); } .term-session-strip__status { display: inline-flex; align-items: center; gap: 0.28rem; } .term-session-strip__status.is-ok .term-session-strip__ok { color: var(--accent-terminal); } .term-session-strip__status.is-info .term-session-strip__ok { color: var(--brand-cyan); } .term-session-strip__status.is-warn .term-session-strip__ok { color: var(--color-amber); } .term-session-strip__status.is-busy .term-session-strip__ok { color: #ff5a6e; } .term-session-strip__ok { color: var(--accent-terminal); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-terminal) 55%, transparent), 0 0 20px color-mix(in srgb, var(--accent-terminal) 25%, transparent); animation: term-strip-online 1.5s ease-in-out infinite; } @keyframes term-strip-glow { 0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-cyan) 8%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-magenta) 8%, transparent); } 50% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-cyan) 18%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-magenta) 14%, transparent); } } @keyframes term-strip-flicker-cyan { 0%, 85%, 100% { opacity: 1; } 88% { opacity: 0.8; } 90% { opacity: 0.96; } } @keyframes term-strip-prompt-pulse { 0%, 100% { opacity: 0.92; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.5px); } } @keyframes term-strip-meta-shift { 0%, 100% { color: var(--color-text-dim); } 45% { color: color-mix(in srgb, var(--color-text-dim) 72%, var(--brand-cyan)); } 70% { color: color-mix(in srgb, var(--color-text-dim) 75%, var(--brand-magenta)); } } @keyframes term-strip-online { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--header-bar-h); width: 100%; max-width: var(--max-width); margin: 0 auto; padding-inline: var(--space-md); } .brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--color-text); text-decoration: none; letter-spacing: 0.06em; font-weight: 700; font-size: 0.75rem; } .brand:hover { color: var(--color-text); text-decoration: none; } .brand__mark { display: flex; color: var(--brand-cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-cyan) 55%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--brand-magenta) 35%, transparent)); } .brand__cube { display: block; } .brand__wordmark { font-family: var(--font-mono); letter-spacing: 0.1em; } .site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); list-style: none; margin: 0; padding: 0; } .site-nav a { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; } .site-nav a:hover { color: var(--brand-magenta); text-decoration: none; text-shadow: 0 0 14px color-mix(in srgb, var(--brand-magenta) 40%, transparent); } .nav-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 12.8rem; padding: 0.35rem 0.85rem; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; line-height: 1.2; border: 1px solid color-mix(in srgb, var(--brand-cyan) 32%, var(--color-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-cyan) 5%, var(--color-black)); color: var(--brand-cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 55%, transparent), 0 0 22px color-mix(in srgb, var(--brand-cyan) 24%, transparent); transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease; } .nav-cta:hover { border-color: color-mix(in srgb, var(--brand-magenta) 52%, var(--color-border)); color: color-mix(in srgb, var(--brand-magenta) 88%, var(--color-text)); box-shadow: 0 0 16px color-mix(in srgb, var(--brand-magenta) 18%, transparent); } .nav-cta.is-promo { border-color: color-mix(in srgb, var(--brand-cyan) 72%, var(--brand-magenta)); color: var(--brand-magenta); text-shadow: 0 0 10px color-mix(in srgb, var(--brand-magenta) 58%, transparent), 0 0 22px color-mix(in srgb, var(--brand-magenta) 30%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--brand-cyan) 32%, transparent), 0 0 34px color-mix(in srgb, var(--brand-magenta) 22%, transparent); animation: nav-cta-glitch 0.95s steps(3, end); } @keyframes nav-cta-glitch { 0%, 100% { transform: translate3d(0, 0, 0); filter: saturate(1); } 16% { transform: translate3d(1px, -0.8px, 0) skewX(1deg); filter: hue-rotate(8deg) saturate(1.24); } 34% { transform: translate3d(-1.4px, 0.7px, 0) skewX(-1deg); filter: hue-rotate(-10deg) saturate(1.3); } 54% { transform: translate3d(1.2px, 0.6px, 0); } 72% { transform: translate3d(-0.9px, -0.5px, 0); } } @media (max-width: 760px) { :root { --header-strip-h: 1.5rem; --header-bar-h: auto; } .term-session-strip { gap: 0.18rem 0.45rem; padding: 0.15rem var(--space-sm); font-size: 0.62rem; } .term-session-strip__msg { max-width: 68vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-inner { min-height: auto; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.45rem var(--space-sm) 0.55rem; } .brand { gap: 0.5rem; } .brand__cube { width: 32px; height: 32px; } .brand__wordmark { letter-spacing: 0.08em; font-size: 0.68rem; } .site-nav { width: 100%; } .site-nav ul { width: 100%; gap: 0.35rem 0.75rem; } .site-nav a { font-size: 0.75rem; } .site-nav li:last-child { width: 100%; } .nav-cta { width: 100%; min-width: 0; justify-content: center; font-size: 0.82rem; padding: 0.5rem 0.75rem; } } /* —— Hero —— */ .section-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: calc(100svh - var(--header-total-h)); padding-block: var(--space-xl); overflow: clip; } .hero__spline-bg { position: absolute; inset: 0; z-index: 0; background: var(--color-black); pointer-events: none; } .hero__code-host { pointer-events: none; position: absolute; inset: -4% 0; z-index: 0; overflow: hidden; opacity: 0.5; mask-image: radial-gradient(ellipse 80% 72% at 50% 45%, #000 20%, transparent 90%); } .hero__code-host--sim { inset: 0; opacity: 0.41; mask-image: radial-gradient(ellipse 88% 82% at 50% 45%, #000 18%, transparent 96%); } .hero-code-stream { position: absolute; top: -14%; left: 0; width: min(24rem, 32vw); padding: 0.7rem 0.95rem; border: 1px solid color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 10%, transparent); border-radius: 0.45rem; background: linear-gradient(180deg, color-mix(in srgb, var(--color-black) 48%, transparent), transparent 28%), color-mix(in srgb, var(--color-black) 68%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 8%, transparent), 0 0 24px color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 7%, transparent); transform: translate3d(0, var(--code-y-start, -8%), 0); animation: hero-code-drift var(--code-dur, 22s) linear infinite; animation-delay: var(--code-delay, 0s); will-change: transform, opacity; } .hero__code-host--sim .hero-code-stream { width: min(20rem, 34vw); padding-inline: 0.8rem; } .hero-code-stream::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 6%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 4%, transparent), transparent 40%); opacity: 0.75; } .hero-code-stream__line { position: relative; display: block; margin: 0; font-family: var(--font-mono); font-size: clamp(0.58rem, 1vw, 0.72rem); line-height: 1.45; letter-spacing: 0.03em; color: color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 38%, var(--color-text-muted)); white-space: nowrap; text-shadow: 0 0 10px color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 10%, transparent); opacity: 0.46; animation: hero-code-flicker var(--line-flicker, 4.6s) steps(8, end) infinite, hero-code-jitter var(--line-jitter, 8s) ease-in-out infinite; animation-delay: var(--line-delay, 0s); } .hero-code-stream__line + .hero-code-stream__line { margin-top: 0.18rem; } .hero-code-stream__line--hot { color: color-mix(in srgb, var(--code-accent, var(--brand-cyan)) 65%, white); opacity: 0.68; } .hero-code-stream__line::before { content: attr(data-prefix); margin-right: 0.5rem; color: color-mix(in srgb, var(--brand-magenta) 30%, transparent); } /* Spadające sześciany 3D: perspective na każdej scenie (stabilny kształt); generowane w hero-falling-cubes.js */ .hero__falling-host { pointer-events: none; position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero-fall-cube { --cube-edge: clamp(2.85rem, 6.2vw, 4rem); --cube-half: calc(var(--cube-edge) * 0.5); pointer-events: auto; position: absolute; top: 0; width: var(--cube-edge); height: var(--cube-edge); transform: translate3d(calc(-50% + var(--x0, 0px)), -140%, 0); transform-style: preserve-3d; animation: hero-fall-cube var(--fall-dur, 18s) linear infinite; animation-delay: var(--fall-delay, 0s); will-change: transform; z-index: 0; } /* Spadek tylko translacja — obrót zostaje w .hero-fall-cube__spin (bez „rozciągania” sześcianu). */ @keyframes hero-fall-cube { 0% { transform: translate3d(calc(-50% + var(--x0, 0px)), -140%, 0); opacity: 0; } 5% { opacity: 0.9; } 92% { opacity: 0.82; } 100% { transform: translate3d(calc(-50% + var(--x1, 0px)), calc(100vh + 100%), 0); opacity: 0; } } @keyframes hero-code-drift { 0% { transform: translate3d(0, var(--code-y-start, -8%), 0); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate3d(0, calc(100% + 18vh), 0); opacity: 0; } } @keyframes hero-code-flicker { 0%, 100% { opacity: 0.18; } 12% { opacity: 0.42; } 16% { opacity: 0.28; } 22% { opacity: 0.52; } 45% { opacity: 0.24; } 62% { opacity: 0.48; } 74% { opacity: 0.3; } 86% { opacity: 0.56; } } @keyframes hero-code-jitter { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(0.06rem); } 34% { transform: translateX(-0.04rem); } 57% { transform: translateX(0.08rem); } 76% { transform: translateX(-0.05rem); } } .hero-fall-cube__scene { width: 100%; height: 100%; perspective: min(720px, 55vw); perspective-origin: 50% 45%; transform-style: preserve-3d; } .hero-fall-cube__spin { width: 100%; height: 100%; transform-style: preserve-3d; animation: hero-cube-self-spin var(--spin-dur, 10s) linear infinite; } .hero-fall-cube--spin-reverse .hero-fall-cube__spin { animation-direction: reverse; } @keyframes hero-cube-self-spin { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(348deg) rotateY(360deg); } } .hero-fall-cube__box { position: relative; width: var(--cube-edge); height: var(--cube-edge); transform-style: preserve-3d; } .hero-fall-cube__face { position: absolute; left: 0; top: 0; width: var(--cube-edge); height: var(--cube-edge); box-sizing: border-box; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid color-mix(in srgb, var(--cube-accent, #00e8ff) 42%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-black) 55%, transparent); } @media (hover: hover) { .hero-fall-cube:hover { z-index: 4; } /* Bez `filter` na .__box — filter spłaszcza preserve-3d. Świecenie = box-shadow na ścianach w przestrzeni 3D. */ .hero-fall-cube:hover .hero-fall-cube__face { border-color: color-mix(in srgb, var(--cube-accent, #00e8ff) 72%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-black) 42%, transparent), inset 0 0 14px color-mix(in srgb, var(--cube-accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--cube-accent) 42%, transparent), 0 0 26px color-mix(in srgb, var(--cube-accent) 22%, transparent); } .hero-fall-cube:hover .hero-fall-cube__face--front { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-black) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--cube-accent) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--cube-accent) 14%, transparent), 0 0 20px color-mix(in srgb, var(--cube-accent) 52%, transparent), 0 0 36px color-mix(in srgb, var(--cube-accent) 30%, transparent); } .hero-fall-cube:hover .hero-fall-cube__tag { color: color-mix(in srgb, var(--color-text) 88%, var(--cube-accent)); text-shadow: 0 0 16px color-mix(in srgb, var(--cube-accent) 55%, transparent), 0 0 28px color-mix(in srgb, var(--cube-accent) 25%, transparent); } } .hero-fall-cube__face--front { transform: rotateY(0deg) translateZ(var(--cube-half)); background: linear-gradient( 145deg, color-mix(in srgb, var(--cube-face, #0a0a12) 82%, var(--cube-accent) 18%), var(--cube-face, #0a0a12) ); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cube-accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--cube-accent) 22%, transparent); } .hero-fall-cube__face--back { transform: rotateY(180deg) translateZ(var(--cube-half)); background: color-mix(in srgb, var(--cube-face, #0a0a12) 72%, black); } .hero-fall-cube__face--right { transform: rotateY(90deg) translateZ(var(--cube-half)); background: linear-gradient( 180deg, color-mix(in srgb, var(--cube-face) 55%, var(--cube-accent) 18%), color-mix(in srgb, var(--cube-face) 78%, black) ); } .hero-fall-cube__face--left { transform: rotateY(-90deg) translateZ(var(--cube-half)); background: linear-gradient( 180deg, color-mix(in srgb, var(--cube-face) 70%, var(--cube-accent) 8%), color-mix(in srgb, var(--cube-face) 85%, black) ); } .hero-fall-cube__face--top { transform: rotateX(90deg) translateZ(var(--cube-half)); background: color-mix(in srgb, var(--cube-face) 62%, var(--cube-accent) 22%); } .hero-fall-cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); background: color-mix(in srgb, var(--cube-face) 55%, black); } .hero-fall-cube__front-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; padding: 0.26rem; } .hero-fall-cube__icon-wrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 52%; aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--cube-accent) 24%, var(--color-black)); } .hero-fall-cube__icon-wrap--fallback { font-family: var(--font-mono); font-size: clamp(0.48rem, 1.15vw, 0.62rem); font-weight: 800; letter-spacing: 0.02em; color: color-mix(in srgb, var(--cube-accent) 90%, white); } .hero-fall-cube__icon { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; } .hero-fall-cube__tag { font-size: clamp(0.38rem, 0.95vw, 0.5rem); font-weight: 700; line-height: 1.05; letter-spacing: 0.04em; text-align: center; color: color-mix(in srgb, var(--color-text) 92%, var(--cube-accent)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 12px color-mix(in srgb, var(--cube-accent) 35%, transparent); } @media (prefers-reduced-motion: reduce) { .hero__code-host, .hero__falling-host { display: none; } } /* Lekki vignette na czarnym tle; mniej przyciemnienia w centrum */ .hero__scrim { pointer-events: none; position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, color-mix(in srgb, var(--brand-cyan) 12%, transparent) 0%, transparent 32%), linear-gradient(-105deg, color-mix(in srgb, var(--brand-magenta) 11%, transparent) 0%, transparent 32%), linear-gradient(to bottom, color-mix(in srgb, var(--color-black) 45%, transparent) 0%, transparent 28%), linear-gradient(to top, color-mix(in srgb, var(--color-black) 50%, transparent) 0%, transparent 50%), radial-gradient(ellipse 95% 75% at 50% 45%, transparent 35%, color-mix(in srgb, var(--color-black) 22%, transparent) 100%); } .hero__grid-lines { pointer-events: none; position: absolute; inset: 0; z-index: 3; background-image: linear-gradient(color-mix(in srgb, var(--brand-cyan) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand-magenta) 5%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 15%, transparent 75%); opacity: 0.45; } .hero__inner { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } /* Blok tekstowy: linki/CTA z własnym pointer-events. */ .hero__copy { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 2.5vw, 1.25rem); max-width: min(100%, 38rem); padding-inline: var(--space-sm); } .hero__copy * { pointer-events: none; } .hero__actions, .hero__actions * { pointer-events: auto; } /* Wordmark + opis: kolumna, bez justify (naturalne odstępy między wyrazami). */ .hero__title--stack { display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 2.2vw, 1.15rem); margin: 0; max-width: 100%; text-align: center; } /* Mocna linia — CODE THE CUBE (+ .glitch wewnątrz) */ .hero__title-brand { display: block; margin: 0; font-size: clamp(2rem, 8.2vw, 4.65rem); font-weight: 800; line-height: 1.02; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-text); text-align: center; } .hero__title-brand .glitch { isolation: isolate; max-width: 100%; } /* Opis pod wordmarkiem: mniejszy niż CTC, wyraźnie widoczny */ .hero__tagline { display: flex; flex-direction: column; align-items: center; margin: 0; max-width: min(100%, 42rem); width: fit-content; margin-inline: auto; padding-inline: var(--space-xs); font-size: clamp(1.466rem, 4.07vw, 2.277rem); font-weight: 600; line-height: 1.38; letter-spacing: 0.02em; text-transform: none; text-align: center; hyphens: none; color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted)); } .hero__tagline-line { display: block; width: fit-content; max-width: 100%; } .hero__tagline-line:first-child { white-space: nowrap; transform: translateX(-4rem); } .hero__tagline-line + .hero__tagline-line { margin-top: 0.12em; } .hero__tagline-line--accent { color: color-mix(in srgb, var(--color-text) 94%, var(--brand-cyan)); text-wrap: balance; } /* Trzecia linia: filary oferty */ .hero__pillars { display: flex; align-items: center; justify-content: center; min-height: 1.8em; margin: 0; max-width: 34rem; font-size: clamp(0.6rem, 1.65vw, 0.75rem); font-weight: 600; line-height: 1.55; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } .hero__pillars-rotator { display: inline-flex; align-items: center; justify-content: center; min-height: 1.55em; } .hero__pillars-sep { color: color-mix(in srgb, var(--brand-cyan) 45%, var(--color-text-muted)); font-weight: 500; letter-spacing: 0.06em; } .hero__pillars-item { white-space: nowrap; } .hero__pillars-caret { margin-left: 0.28rem; color: var(--brand-cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 45%, transparent), 0 0 18px color-mix(in srgb, var(--brand-magenta) 18%, transparent); animation: hero-pillars-caret 0.95s steps(1, end) infinite; } @keyframes hero-pillars-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero__actions { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-lg); margin-top: clamp(0.25rem, 1.5vw, 0.5rem); } /* Dymek przy hover/focus głównego CTA w hero (tekst dodatkowy dla czytników: aria-describedby). */ .hero__cta-primary-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; } .hero-cta-hint { position: absolute; z-index: 2; top: calc(100% + 0.55rem); left: 50%; padding: 0.45rem 0.85rem; font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; text-transform: lowercase; color: var(--color-text); white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; transform: translate(-50%, -10px) scale(0.94); transform-origin: 50% 0%; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--brand-magenta) 45%, var(--brand-cyan)); background: color-mix(in srgb, var(--color-black) 82%, var(--brand-cyan) 6%); box-shadow: 0 0 24px color-mix(in srgb, var(--brand-magenta) 18%, transparent), 0 0 12px color-mix(in srgb, var(--brand-cyan) 12%, transparent); transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s; } /* Strzałka w górę — „wyrasta” spod przycisku */ .hero-cta-hint::after { content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 1px; border: 6px solid transparent; border-bottom-color: color-mix(in srgb, var(--brand-magenta) 35%, var(--brand-cyan)); filter: drop-shadow(0 -1px 3px color-mix(in srgb, var(--color-black) 35%, transparent)); } .hero__cta-primary-wrap:is(:hover, :focus-within) .hero-cta-hint { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } .hero__cta-secondary { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .hero__cta-secondary:hover { color: var(--brand-magenta); } @media (max-width: 760px) { #offer-bot-panel { scroll-margin-top: calc(var(--header-total-h) + 0.65rem); } #pathway-console-panel { scroll-margin-top: calc(var(--header-total-h) + 0.65rem); } .section-hero { min-height: max(30rem, calc(100svh - var(--header-total-h))); padding-block: var(--space-lg); } .hero__title--stack { gap: 0.65rem; } .hero__title-brand { font-size: clamp(1.55rem, 10vw, 2.2rem); letter-spacing: 0.045em; white-space: normal; line-height: 1.06; } .hero__tagline { font-size: clamp(1rem, 5.9vw, 1.42rem); line-height: 1.33; max-width: 21rem; } .hero__pillars-item { white-space: normal; } .hero__actions { width: 100%; flex-direction: column; gap: 0.65rem; } .hero__cta-primary-wrap { width: 100%; } .hero__cta-primary-wrap .btn, .hero__cta-secondary { width: 100%; justify-content: center; text-align: center; } .hero-cta-hint { white-space: normal; max-width: min(90vw, 17rem); text-align: center; } } /* Glitch (tylko wizualnie; treść w DOM pozostaje czytelna dla czytników) */ .glitch { position: relative; display: inline-block; color: var(--color-text); } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; clip-path: inset(0 0 0 0); pointer-events: none; } .glitch::before { color: var(--brand-cyan); animation: glitch-shift 2.8s infinite linear alternate-reverse; opacity: 0.9; } .glitch::after { color: var(--brand-magenta); animation: glitch-shift 3.2s infinite linear alternate; mix-blend-mode: screen; opacity: 0.65; } .glitch--subtle::before, .glitch--subtle::after { opacity: 0.35; } .glitch--slow::before { animation-duration: 5s; } .glitch--slow::after { animation-duration: 5.5s; } @keyframes glitch-shift-hero { 0% { transform: translate(0, 0); clip-path: inset(0 0 92% 0); } 10% { transform: translate(-3px, 2px); clip-path: inset(8% 0 80% 0); } 20% { transform: translate(4px, -2px); clip-path: inset(25% 0 55% 0); } 30% { transform: translate(-2px, 3px); clip-path: inset(40% 0 35% 0); } 40% { transform: translate(3px, -3px); clip-path: inset(55% 0 20% 0); } 50% { transform: translate(0, 0); clip-path: inset(70% 0 8% 0); } 60% { transform: translate(4px, 2px); clip-path: inset(15% 0 70% 0); } 100% { transform: translate(0, 0); clip-path: inset(0 0 92% 0); } } /* Wordmark w hero — mocniejszy offset + szybszy rytm niż domyślny .glitch */ .glitch--hero::before { opacity: 0.95; animation: glitch-shift-hero 2.2s infinite linear alternate-reverse; } .glitch--hero::after { opacity: 0.75; animation: glitch-shift-hero 2.6s infinite linear alternate; } @keyframes glitch-shift { 0% { transform: translate(0, 0); clip-path: inset(0 0 92% 0); } 10% { transform: translate(-2px, 1px); clip-path: inset(8% 0 80% 0); } 20% { transform: translate(2px, -1px); clip-path: inset(25% 0 55% 0); } 30% { transform: translate(-1px, 2px); clip-path: inset(40% 0 35% 0); } 40% { transform: translate(1px, -2px); clip-path: inset(55% 0 20% 0); } 50% { transform: translate(0, 0); clip-path: inset(70% 0 8% 0); } 60% { transform: translate(2px, 1px); clip-path: inset(15% 0 70% 0); } 100% { transform: translate(0, 0); clip-path: inset(0 0 92% 0); } } /* —— Sekcje ogólne —— */ .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } .section--alt { background: linear-gradient(180deg, var(--color-ink) 0%, #08050c 100%); border-block: 1px solid var(--color-border); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-cyan) 6%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-magenta) 4%, transparent); } /* Pathway: ciemne tło (`section--alt`); kostki i strumienie kodu są w sekcji symulatora kosztów */ #proces { position: relative; isolation: isolate; overflow: hidden; } #proces > .container { position: relative; z-index: 1; } /* Symulator kosztu: kostki + strumienie kodu w tle (jak w hero), treść nad warstwą dekoracji */ #symulator-kosztu { position: relative; isolation: isolate; overflow: hidden; } #symulator-kosztu > .container { position: relative; z-index: 1; } .section-head { max-width: 40rem; margin-bottom: var(--space-lg); } .section-label { margin: 0 0 var(--space-xs); font-family: var(--font-pixel); font-size: 0.7rem; color: var(--brand-cyan); letter-spacing: 0.04em; } @keyframes spline-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .theme-terminal .section-label { background-image: var(--gradient-brand-h); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand-cyan) 25%, transparent)); animation: spline-gradient-shift 12s ease-in-out infinite; } .section-title { margin: 0 0 var(--space-sm); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; } .theme-terminal .section-title { font-family: var(--font-mono); font-size: clamp(1rem, 2.8vw, 1.25rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); text-shadow: 0 0 24px color-mix(in srgb, var(--brand-cyan) 20%, transparent), 0 0 40px color-mix(in srgb, var(--brand-magenta) 12%, transparent); } .section-lead { margin: 0; color: var(--color-text-muted); font-size: 1.05rem; } @media (min-width: 900px) { #symulator-kosztu .section-head, #opinie .section-head, #proces .section-head { max-width: 100%; } #symulator-kosztu .section-lead, #opinie .section-lead, #proces .section-lead { white-space: nowrap; } } /* —— Oferta: kolumna kart + panel asystenta tej samej wysokości (wyrównanie do najniższej karty) —— */ .offer-split { display: grid; gap: var(--space-lg); align-items: stretch; } @media (min-width: 900px) { .offer-split { /* Lewa kolumna szersza — miejsce na 3 karty w rzędzie */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); gap: var(--space-xl); align-items: start; } } .offer-stack { display: flex; flex-direction: column; gap: var(--space-sm); } /* Oferta: trzy filary (Zespół · AI · Tech), każdy z własną siatką kart */ .offer-stack--grouped { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; } .offer-group { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; } .offer-group__head { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); } @media (min-width: 640px) { .offer-group__head { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem; } } .offer-group__pillar { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-terminal); } .offer-group--zespol .offer-group__pillar { color: color-mix(in srgb, var(--brand-cyan) 88%, var(--color-text-muted)); } .offer-group--ai .offer-group__pillar { color: color-mix(in srgb, var(--brand-violet) 88%, var(--color-text-muted)); } .offer-group--tech .offer-group__pillar { color: color-mix(in srgb, var(--brand-magenta) 88%, var(--color-text-muted)); } .offer-group__tags { font-size: 0.59rem; line-height: 1.45; color: var(--color-text-dim); font-weight: 500; max-width: 42rem; } /* Zawsze 2 kolumny (jak blok AI: Asystenci + Szkolenia); jedna wysokość w rzędzie */ .offer-group__grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } /* * Karty w ofercie: pełna komórka siatki, przycisk rozciąga się — jednolity rozmiar w rzędzie. */ .offer-stack--grouped .offer-card { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; min-height: 0; } .offer-stack--grouped .offer-card__toggle { flex: 1 1 auto; display: flex; align-items: center; padding: 0.65rem 0.8rem; gap: 0.65rem; min-height: 4.75rem; height: 100%; } .offer-stack--grouped .offer-card__body { gap: 0; min-width: 0; } .offer-stack--grouped .offer-card__title { font-size: 0.78rem; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; } .offer-stack--grouped .offer-card__icon { width: 2.05rem; height: 2.05rem; } .offer-stack--grouped .offer-card__icon--svg svg { width: 1.15rem; height: 1.15rem; } /* * Panel asystenta: rozciąga się w rzędzie gridu obok stosu kart (ta sama wysokość kolumny). */ .offer-robot { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; align-self: stretch; } /* Dymek na całą wysokość panelu — treść scrolluje w środku */ .offer-robot__bubble { position: relative; z-index: 2; flex: 1 1 auto; align-self: stretch; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-black); box-shadow: var(--term-glow), inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 8%, transparent); overflow: hidden; isolation: isolate; animation: offer-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } .offer-robot__bubble[hidden] { display: none !important; } @keyframes offer-bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .offer-robot__bubble-chrome { --offer-bubble-chrome-h: 2.125rem; position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; min-height: var(--offer-bubble-chrome-h); padding: 0.45rem 0.65rem; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: none; color: color-mix(in srgb, var(--color-text-dim) 88%, var(--color-text-muted)); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, #000); background: color-mix(in srgb, var(--color-surface) 72%, var(--color-black)); } .offer-robot__bubble-chrome-copy { position: relative; flex: 1; min-width: 0; min-height: 1.1em; } .offer-robot__bubble-chrome-label { transition: opacity 0.22s ease; } .offer-robot__bubble-chrome-label--hover { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: color-mix(in srgb, var(--brand-cyan) 55%, var(--color-text)); text-shadow: 0 0 12px color-mix(in srgb, var(--brand-cyan) 35%, transparent); } .offer-robot__bubble:hover .offer-robot__bubble-chrome-label--default, .offer-robot__bubble:focus-within .offer-robot__bubble-chrome-label--default { opacity: 0; } .offer-robot__bubble:hover .offer-robot__bubble-chrome-label--hover, .offer-robot__bubble:focus-within .offer-robot__bubble-chrome-label--hover { opacity: 1; } /* Stałe miejsce na 3 kropki (box-shadow wystaje poza 6px — zapas z prawej, żeby nie nachodzić na tytuł) */ .offer-robot__bubble-dots { flex-shrink: 0; align-self: center; display: inline-block; width: 6px; height: 6px; margin-right: 1.35rem; border-radius: 50%; background: var(--brand-cyan); box-shadow: 10px 0 var(--brand-violet), 20px 0 var(--brand-magenta); } .offer-robot__bubble-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; padding: var(--space-md) var(--space-md) var(--space-lg); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; /* Treść od góry — bez flex-end, który przyklejał blok do dołu wysokiego panelu */ display: block; background: var(--color-black); } .offer-robot__bubble-text { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-muted); } .offer-robot__value { margin: 0.95rem 0 0; font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sim-savings-neon); text-shadow: 0 0 10px color-mix(in srgb, var(--sim-savings-neon) 45%, transparent), 0 0 22px color-mix(in srgb, var(--sim-savings-neon) 18%, transparent); } /* Ukryj placeholder dopóki nie zacznie się dopisywanie OUTCOME (main.js). */ .offer-robot__value:empty { margin-top: 0; min-height: 0; visibility: hidden; } /* Podświetlenia w dymku oferty: klucz merytoryczny (coral) vs korzyść dla klienta (neon zielony) */ .offer-robot__emphasis--key, .offer-robot__emphasis { color: #ff5a6e; text-shadow: 0 0 10px color-mix(in srgb, #ff5a6e 55%, transparent), 0 0 24px color-mix(in srgb, #ff5a6e 28%, transparent); } .offer-robot__emphasis--value { color: var(--sim-savings-neon); text-shadow: 0 0 10px color-mix(in srgb, var(--sim-savings-neon) 45%, transparent), 0 0 22px color-mix(in srgb, var(--sim-savings-neon) 18%, transparent); } .offer-robot__bubble-text [data-offer-bot-msg] { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .offer-robot__bubble-caret { display: inline; margin-left: 1px; font-size: 0.85rem; line-height: inherit; vertical-align: baseline; color: var(--brand-magenta); animation: offer-bot-caret 0.9s step-end infinite; opacity: 1; } .offer-robot__bubble:not(.is-typing) .offer-robot__bubble-caret { animation: none; opacity: 0; } @keyframes offer-bot-caret { 50% { opacity: 0; } } .offer-robot__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .offer-robot__bubble { animation: none; } .offer-robot__bubble-caret { animation: none !important; opacity: 0 !important; } .offer-robot__bubble-chrome-label { transition: none !important; } } .offer-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .offer-card:hover, .offer-card.is-active { border-color: color-mix(in srgb, var(--accent-cyan) 45%, var(--color-border)); box-shadow: var(--term-glow), inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 12%, transparent); } .offer-card__toggle { display: flex; align-items: flex-start; gap: var(--space-sm); width: 100%; padding: var(--space-md); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .offer-card__toggle:focus-visible { outline: 2px solid var(--accent-terminal); outline-offset: 2px; } .offer-card__icon { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-terminal); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-black); } .offer-card__icon--svg { color: color-mix(in srgb, var(--accent-terminal) 92%, var(--brand-violet)); } .offer-card__icon--svg svg { display: block; } .offer-card__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .offer-card__title { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; } .offer-card__summary { font-size: 0.68rem; line-height: 1.45; color: var(--color-text-dim); font-weight: 500; } /* —— Pathway: lista etapów + terminal (jak oferta + konsola) —— */ .pathway-split { display: grid; gap: var(--space-lg); align-items: start; } @media (min-width: 900px) { .pathway-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-xl); align-items: stretch; } .pathway-stack { height: 100%; justify-content: space-between; } } .pathway-console { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; } .pathway-console__inner { overflow: hidden; border-radius: var(--radius-sm); } /* .pathway-console__bar — wspólny wygląd: .term-window__bar */ .pathway-console__chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0.55rem var(--space-md); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 90%, var(--color-black)); } .pathway-console__chat-meta { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .pathway-console__chat-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--accent-cyan); } .pathway-console__chat-sub { font-size: 0.56rem; letter-spacing: 0.06em; color: var(--color-text-dim); } .pathway-console__chat-head img { display: block; width: 3.4rem; height: 3.4rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--brand-cyan) 40%, var(--color-border)); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-cyan) 24%, transparent), 0 0 30px color-mix(in srgb, var(--brand-magenta) 16%, transparent); } .pathway-console__body { min-height: clamp(16rem, 36vh, 23rem); padding: var(--space-md) var(--space-md) var(--space-lg); font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-muted); background: var(--color-black); } /* Pathway cards: spójna wysokość kafli i wyrównany dół tekstów. */ .pathway-stack .offer-card { display: flex; } .pathway-stack .offer-card__toggle { min-height: 6.9rem; height: 100%; } .pathway-stack .offer-card__body { min-height: 100%; } .pathway-stack .offer-card__summary { margin-top: auto; } .pathway-console__cmd { margin: 0 0 var(--space-md); font-size: 0.78rem; color: var(--accent-cyan); word-break: break-word; max-width: 100%; } .pathway-console__cmd .tok-g { margin-right: 0.25rem; color: var(--brand-magenta); } .pathway-console__desc p { margin: 0 0 var(--space-sm); } .pathway-console__desc p:last-child { margin-bottom: 0; } .pathway-console__emphasis--key, .pathway-console__emphasis { color: #ff5a6e; text-shadow: 0 0 10px color-mix(in srgb, #ff5a6e 55%, transparent), 0 0 24px color-mix(in srgb, #ff5a6e 28%, transparent); } .pathway-console__emphasis--value { color: var(--sim-savings-neon); text-shadow: 0 0 10px color-mix(in srgb, var(--sim-savings-neon) 45%, transparent), 0 0 22px color-mix(in srgb, var(--sim-savings-neon) 18%, transparent); } @media (max-width: 740px) { .pathway-console__chat-head { padding: 0.5rem var(--space-sm); } .pathway-console__chat-head img { width: 3rem; height: 3rem; } } /* Wizualizacja „ścieżki” pod terminalem — kropki + linie + rakieta (start po pełnej kolei 00→04) */ .pathway-viz { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-surface) 88%, var(--color-black)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 6%, transparent); } .pathway-viz__hint { margin: 0 0 var(--space-sm); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--color-text-dim); } .pathway-viz__track { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; width: 100%; min-height: 3.25rem; } .pathway-viz__stop { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex-shrink: 0; } .pathway-viz__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-text-dim) 70%, transparent); background: var(--color-black); box-shadow: inset 0 0 0 1px var(--color-ink); transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.45s ease; } .pathway-viz__stop.is-done .pathway-viz__dot { border-color: var(--brand-cyan); background: color-mix(in srgb, var(--brand-cyan) 35%, var(--color-black)); box-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 55%, transparent), 0 0 18px color-mix(in srgb, var(--brand-magenta) 25%, transparent); } .pathway-viz__lbl { font-size: 0.55rem; color: var(--color-text-dim); letter-spacing: 0.06em; } .pathway-viz__stop.is-done .pathway-viz__lbl { color: var(--accent-cyan); } .pathway-viz__line { flex: 1 1 12px; min-width: 6px; height: 3px; margin: 0 2px; margin-bottom: 1.1rem; align-self: center; border-radius: 2px; background: color-mix(in srgb, var(--color-border) 80%, transparent); position: relative; overflow: hidden; } .pathway-viz__line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gradient-brand-h); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 40%, transparent); } .pathway-viz__line.is-lit::after { transform: scaleX(1); } .pathway-viz__trophy { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin-left: 2px; margin-bottom: 0.85rem; color: color-mix(in srgb, var(--color-text-dim) 75%, transparent); transition: color 0.45s ease, filter 0.45s ease, transform 0.35s ease; filter: grayscale(0.85) brightness(0.75); } .pathway-viz__rocket-wrap { display: flex; justify-content: center; align-items: flex-end; transform-origin: 50% 100%; will-change: transform; } .pathway-viz__rocket { display: block; } .pathway-viz__rocket-flame { opacity: 0; transform-origin: 24px 32px; transition: opacity 0.2s ease; } .pathway-viz__rocket-wrap.is-liftoff { animation: pathway-rocket-liftoff 4.2s cubic-bezier(0.33, 1, 0.32, 1) both; } .pathway-viz__rocket-wrap.is-liftoff .pathway-viz__rocket-flame { opacity: 0.92; animation: pathway-rocket-flame 0.12s ease-in-out infinite alternate; } @keyframes pathway-rocket-liftoff { 0% { transform: translateY(0) scale(1); filter: brightness(1); } 8% { transform: translateY(3px) scale(0.96); filter: brightness(1.15); } 18% { transform: translateY(0) scale(1.12); filter: brightness(1.45) drop-shadow(0 0 14px color-mix(in srgb, var(--brand-magenta) 70%, transparent)); } 32% { transform: translateY(-56px) scale(1.04); filter: brightness(1.25) drop-shadow(0 8px 22px color-mix(in srgb, var(--brand-cyan) 45%, transparent)); } 38%, 62% { transform: translateY(-92px) scale(1); filter: brightness(1.2) drop-shadow(0 4px 18px color-mix(in srgb, var(--brand-magenta) 50%, transparent)); } 82% { transform: translateY(-18px) scale(1.02); filter: brightness(1.1); } 100% { transform: translateY(0) scale(1); filter: brightness(1); } } @keyframes pathway-rocket-flame { 0% { transform: scaleY(0.88) scaleX(0.95); opacity: 0.75; } 100% { transform: scaleY(1.12) scaleX(1.05); opacity: 1; } } .pathway-viz__trophy-cap { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; opacity: 0.75; } .pathway-viz__trophy.is-complete { color: var(--brand-magenta); filter: grayscale(0) brightness(1.05) drop-shadow(0 0 12px color-mix(in srgb, var(--brand-magenta) 65%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--brand-cyan) 35%, transparent)); transform: scale(1.06); } .pathway-viz__trophy.is-complete .pathway-viz__trophy-cap { color: var(--brand-cyan); opacity: 1; } @media (max-width: 520px) { .pathway-viz__track { flex-wrap: wrap; justify-content: center; row-gap: 0.35rem; } .pathway-viz__line { margin-bottom: 0; min-width: 10px; flex: 1 1 20px; max-width: 100%; } .pathway-viz__line--to-rocket { flex: 1 1 40px; } .pathway-viz__trophy { margin-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .pathway-viz__dot, .pathway-viz__line::after, .pathway-viz__trophy { transition: none !important; } .pathway-viz__rocket-wrap { animation: none !important; } .pathway-viz__rocket-wrap.is-liftoff .pathway-viz__rocket-flame, .pathway-viz__rocket-flame { animation: none !important; opacity: 0 !important; } } /* —— Social proof: karty + panel szczegółów po kliknięciu —— */ .social-proof { display: flex; flex-direction: column; gap: var(--space-md); } .social-proof__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 768px) { .social-proof__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } } .sp-card { margin: 0; height: 100%; } .sp-card__toggle { height: 100%; min-height: 9.5rem; width: 100%; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; text-align: left; padding: var(--space-md); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .sp-card__toggle:hover, .sp-card__toggle:focus-visible { border-color: color-mix(in srgb, var(--brand-cyan) 35%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-cyan) 12%, transparent); } .sp-card.is-active .sp-card__toggle { border-color: color-mix(in srgb, var(--brand-magenta) 42%, var(--color-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-cyan) 10%, transparent), 0 0 16px color-mix(in srgb, var(--brand-magenta) 16%, transparent); transform: translateY(-1px); } .sp-card__body { min-width: 0; display: flex; flex-direction: column; height: 100%; gap: 0.55rem; } .sp-card__quote { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; color: var(--color-text); margin-bottom: auto; } .sp-card__meta { display: flex; flex-direction: column; gap: 0.18rem; margin-top: var(--space-xs); font-size: 0.64rem; line-height: 1.35; color: var(--color-text-muted); } .sp-card__person { font-weight: 700; color: var(--color-text-muted); } .sp-card__company { font-weight: 600; } .sp-card__meta .tok-s { color: var(--accent-terminal); } .sp-details { overflow: hidden; border-radius: var(--radius-sm); } .sp-details__body { padding: var(--space-md) var(--space-md) var(--space-lg); background: var(--color-black); } .sp-details__title { margin: 0; font-size: 0.78rem; letter-spacing: 0.07em; color: var(--accent-cyan); } .sp-details__meta { margin: 0.35rem 0 0; font-size: 0.66rem; } .sp-details__text { margin: var(--space-sm) 0 0; font-size: 0.86rem; line-height: 1.65; color: var(--color-text-muted); } .sp-details__used { margin: var(--space-sm) 0 0; } .sp-details__used-title { margin: 0; font-size: 0.62rem; letter-spacing: 0.06em; color: color-mix(in srgb, var(--brand-cyan) 72%, var(--color-text-dim)); } .sp-details__used-list { margin: 0.45rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; } .sp-details__used-item { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent); border-radius: 999px; padding: 0.22rem 0.5rem 0.22rem 0.38rem; background: color-mix(in srgb, var(--color-surface) 84%, var(--color-black)); } .sp-details__used-icon { display: inline-flex; color: color-mix(in srgb, var(--accent-terminal) 92%, var(--brand-violet)); } .sp-details__used-icon svg { display: block; } .sp-details__used-label { font-size: 0.62rem; line-height: 1.3; color: var(--color-text-muted); } .sp-details__benefit { margin: var(--space-sm) 0 0; font-size: 0.7rem; line-height: 1.45; letter-spacing: 0.04em; color: var(--sim-savings-neon); text-shadow: 0 0 10px color-mix(in srgb, var(--sim-savings-neon) 45%, transparent), 0 0 22px color-mix(in srgb, var(--sim-savings-neon) 18%, transparent); } .sp-details__hint { margin: var(--space-sm) 0 0; font-size: 0.62rem; letter-spacing: 0.04em; } /* —— Symulator kosztu ręcznej pracy —— */ .sim-panel { overflow: hidden; border-radius: var(--radius-sm); } /* .sim-panel__bar — .term-window__bar */ .sim-panel__body { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-md) var(--space-md) var(--space-lg); background: var(--color-black); } .sim-fields { display: grid; gap: var(--space-md); grid-template-columns: 1fr; } @media (min-width: 720px) { .sim-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sim-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .sim-field__label { font-size: 0.7rem; color: var(--accent-cyan); letter-spacing: 0.04em; } .sim-field input { padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-size: 0.85rem; } .sim-field input:focus-visible { outline: 2px solid var(--accent-terminal); outline-offset: 2px; } .sim-field__hint { font-size: 0.62rem; line-height: 1.35; color: var(--color-text-dim); } .sim-results { display: flex; flex-direction: column; gap: var(--space-md); } .sim-results__highlight { border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); border: 1px solid color-mix(in srgb, var(--brand-cyan) 35%, var(--color-border)); background: radial-gradient( 120% 120% at 12% 0%, color-mix(in srgb, var(--brand-magenta) 12%, transparent), transparent 52% ), radial-gradient( 90% 80% at 100% 80%, color-mix(in srgb, var(--brand-cyan) 10%, transparent), transparent 45% ), radial-gradient( 70% 90% at 100% 50%, color-mix(in srgb, var(--sim-savings-neon) 6%, transparent), transparent 55% ), color-mix(in srgb, var(--color-surface) 88%, var(--color-black)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-cyan) 10%, transparent), 0 12px 32px color-mix(in srgb, #000000 38%, transparent); } .sim-results__highlight-grid { display: grid; gap: var(--space-sm) var(--space-md); align-items: start; } @media (min-width: 640px) { .sim-results__highlight-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sim-results__save { padding-left: var(--space-md); border-left: 1px solid color-mix(in srgb, var(--sim-savings-neon) 22%, var(--color-border)); text-align: right; } } .sim-results__kicker { margin: 0 0 0.4rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-dim); } .sim-results__annual { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: inherit; font-weight: inherit; letter-spacing: inherit; } .sim-results__value { font-size: clamp(1.85rem, 5.5vw, 2.85rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--brand-magenta); text-shadow: 0 0 22px color-mix(in srgb, var(--brand-magenta) 42%, transparent), 0 0 36px color-mix(in srgb, var(--brand-cyan) 18%, transparent); } .sim-results__unit { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 90%, transparent); } .sim-results__equiv { margin: 0.55rem 0 0; font-size: 0.74rem; line-height: 1.45; max-width: 40rem; } .sim-results__equiv:empty { display: none; } .sim-results__cost { min-width: 0; } .sim-results__save-kicker { margin: 0 0 0.35rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--sim-savings-neon) 55%, var(--color-text-dim)); } .sim-results__save-annual { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.45rem; } .sim-results__save { min-width: 0; } @media (max-width: 639px) { .sim-results__save { padding-top: var(--space-sm); border-top: 1px solid color-mix(in srgb, var(--sim-savings-neon) 18%, var(--color-border)); } .sim-results__save-annual { justify-content: flex-start; } } .sim-results__save-value { font-size: clamp(1.5rem, 4.5vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--sim-savings-neon); text-shadow: 0 0 20px color-mix(in srgb, var(--sim-savings-neon) 45%, transparent), 0 0 40px color-mix(in srgb, var(--sim-savings-neon) 18%, transparent); } .sim-results__save-unit { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .sim-results__save-note { margin: 0.45rem 0 0; font-size: 0.65rem; line-height: 1.45; max-width: 22rem; } @media (min-width: 640px) { .sim-results__save-note { margin-left: auto; } } .sim-results__monthly { margin: 0; font-size: 0.78rem; } /* Jak podświetlenie merytoryki w dymku oferty (`.offer-robot__emphasis--key`) — coral neon */ .sim-results__disclaimer { margin: 0; font-size: 0.62rem; line-height: 1.45; max-width: 100%; white-space: nowrap; color: #ff5a6e; text-shadow: 0 0 10px color-mix(in srgb, #ff5a6e 55%, transparent), 0 0 24px color-mix(in srgb, #ff5a6e 28%, transparent); } .sim-run-wrap { margin: var(--space-md) 0 0; } .sim-run-wrap .sim-run-btn { width: 100%; } @media (min-width: 520px) { .sim-run-wrap .sim-run-btn { width: auto; } } .sim-chart-block { display: flex; flex-direction: column; gap: var(--space-xs); } .sim-chart-block__title { margin: 0 0 var(--space-sm); font-size: 0.65rem; letter-spacing: 0.06em; color: var(--color-text-dim); } .sim-chart-layout { display: flex; align-items: stretch; gap: 0.45rem; min-width: 0; } .sim-y-axis { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0 0.1rem 1rem 0; min-height: clamp(8.5rem, 26vw, 10.5rem); font-size: 0.58rem; letter-spacing: 0.03em; color: var(--color-text-dim); white-space: nowrap; } .sim-y-axis--flat { justify-content: flex-end; } .sim-chart-area { position: relative; flex: 1; min-width: 0; min-height: clamp(8.5rem, 26vw, 10.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-ink) 80%, var(--color-black)); overflow: hidden; display: flex; flex-direction: column; } .sim-chart-grid { position: absolute; left: 0; right: 0; bottom: 1rem; top: 0; pointer-events: none; border-left: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); background: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--brand-cyan) 16%, transparent), color-mix(in srgb, var(--brand-cyan) 16%, transparent) 1px, transparent 1px, transparent 25% ); opacity: 0.5; } .sim-line-chart-host { position: relative; z-index: 2; flex: 1 1 auto; min-height: clamp(8.5rem, 26vw, 10.5rem); width: 100%; } .sim-line-chart-svg { display: block; width: 100%; height: 100%; } .sim-line-chart-zone { pointer-events: none; } .sim-line-chart-zone--risk { fill: color-mix(in srgb, #ff5a6e 12%, transparent); } .sim-line-chart-zone--after-payback { fill: color-mix(in srgb, var(--sim-savings-neon) 12%, transparent); } .sim-line-chart-line--risk { stroke: #ff4d5f; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .sim-line-chart-line--after-payback { stroke: var(--sim-savings-neon); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sim-savings-neon) 35%, transparent)); } .sim-line-chart-month-tick { fill: var(--color-text-dim); font-size: 7px; font-family: var(--font-mono, "JetBrains Mono", monospace); pointer-events: none; } .sim-line-chart-empty { fill: var(--color-text-dim); font-size: 10px; font-family: var(--font-mono, "JetBrains Mono", monospace); } .sim-chart-block__legend { margin: 0.25rem 0 0; font-size: 0.6rem; line-height: 1.45; color: var(--color-text-dim); } @media (max-width: 520px) { .sim-y-axis { font-size: 0.52rem; padding-right: 0; } .sim-results__highlight { padding: var(--space-sm) var(--space-md); } } @media (prefers-reduced-motion: reduce) { .sim-line-chart-line--risk, .sim-line-chart-line--after-payback { transition: none; } } /* —— Kawa online / booking —— */ .coffee-block { display: flex; flex-direction: column; gap: var(--space-xl); } /* —— Kontakt —— */ .section-contact { padding-bottom: var(--space-xl); } .contact-layout--booking { grid-template-columns: 1fr; width: 100%; } .booking-intro { margin: 0; font-size: 0.74rem; line-height: 1.55; color: var(--color-text-muted); max-width: 62rem; } .contact-layout { display: grid; gap: var(--space-lg); } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; } .contact-layout.contact-layout--booking { grid-template-columns: 1fr; } } .booking-panel { overflow: hidden; border-radius: var(--radius-sm); width: 100%; } .booking-panel__body { padding: var(--space-md) var(--space-md) var(--space-lg); background: var(--color-black); display: flex; flex-direction: column; gap: var(--space-md); } .booking-panel__lead { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--color-text-muted); } .booking-panel__actions { display: flex; flex-direction: column; gap: var(--space-sm); } @media (min-width: 580px) { .booking-panel__actions { flex-direction: row; align-items: center; flex-wrap: wrap; } } .booking-btn--ghost { border-color: color-mix(in srgb, var(--brand-cyan) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-surface) 92%, var(--color-black)); color: var(--color-text-muted); } .booking-btn--ghost:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--brand-magenta) 45%, var(--color-border)); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-magenta) 18%, transparent); } .booking-slots__label { margin: 0 0 0.45rem; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--color-text-dim); } .booking-calendar { display: grid; gap: 0.6rem; grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 980px) { .booking-calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .booking-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .booking-calendar__day { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-surface) 92%, var(--color-black)); padding: 0.45rem; display: flex; flex-direction: column; gap: 0.4rem; } .booking-calendar__head { margin: 0; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--color-text-dim); } .booking-calendar__slots { display: grid; gap: 0.3rem; } .booking-slot { display: inline-flex; justify-content: center; align-items: center; min-height: 1.7rem; padding: 0.25rem 0.4rem; border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-black) 75%, var(--color-surface)); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--accent-terminal); text-decoration: none; } .booking-slot.is-busy { color: #ff5a6e; border-color: color-mix(in srgb, #ff5a6e 62%, var(--color-border)); background: color-mix(in srgb, #ff5a6e 12%, var(--color-black)); cursor: not-allowed; pointer-events: none; text-shadow: 0 0 10px color-mix(in srgb, #ff5a6e 35%, transparent), 0 0 20px color-mix(in srgb, #ff5a6e 20%, transparent); } .booking-slot:hover { border-color: color-mix(in srgb, var(--brand-cyan) 50%, var(--color-border)); box-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 20%, transparent), 0 0 18px color-mix(in srgb, var(--brand-magenta) 10%, transparent); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--brand-cyan) 55%, var(--brand-magenta)); background: color-mix(in srgb, var(--brand-cyan) 10%, var(--color-black)); color: var(--brand-cyan); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; text-shadow: 0 0 14px color-mix(in srgb, var(--brand-cyan) 25%, transparent); } .btn:hover { background: var(--gradient-brand-h); background-size: 150% 100%; color: var(--color-black); border-color: transparent; box-shadow: var(--term-glow); } .btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } .tok-g { color: var(--accent-terminal); } .tok-muted { color: var(--color-text-dim); } /* Tokeny „edytora” (reuse w innych miejscach) */ .tok-k { color: var(--accent-cyan); } .tok-s { color: var(--accent-terminal); } .tok-n { color: var(--color-amber); } /* —— Stopka —— */ .site-footer { margin-top: auto; padding-block: var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-ink); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; text-align: center; } .footer-exit { width: 100%; margin: 0 0 var(--space-xs); padding-bottom: var(--space-sm); border-bottom: 1px dashed var(--color-border); font-size: 0.75rem; color: var(--color-text-muted); text-align: left; } .footer-exit__hint { color: var(--color-text-dim); } @media (min-width: 600px) { .footer-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; align-items: flex-end; } .footer-exit { flex: 1 0 100%; margin-bottom: var(--space-sm); } } .footer-brand { margin: 0; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--color-text-muted); } .footer-copy { margin: 0; font-size: 0.8125rem; color: var(--color-text-dim); } /* —— Wstawka „edytor” między sekcjami (dekor) —— */ .section-deco { margin: 0 auto var(--space-md); max-width: var(--max-width); padding-inline: var(--space-md); } .code-rail-wrap { position: relative; max-width: 100%; } .code-rail { display: flex; align-items: center; gap: var(--space-sm); width: 100%; max-width: 100%; padding: 0.5rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-dim); text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .code-rail:hover { border-color: color-mix(in srgb, var(--brand-cyan) 35%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-cyan) 12%, transparent); } .code-rail:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; } .code-rail[aria-expanded="true"] { border-color: color-mix(in srgb, var(--brand-magenta) 40%, var(--color-border)); } .code-rail--armed { border-color: color-mix(in srgb, var(--brand-amber) 45%, var(--color-border)); box-shadow: 0 0 14px color-mix(in srgb, var(--brand-amber) 15%, transparent); } .code-rail__prompt { color: var(--accent-terminal); flex-shrink: 0; } .code-rail__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .code-rail__line::after { content: "▋"; margin-left: 2px; color: var(--brand-magenta); animation: term-caret 1s step-end infinite; text-shadow: 0 0 10px color-mix(in srgb, var(--brand-magenta) 70%, transparent); } .code-rail__arm-hint { margin: 0.35rem 0 0; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--color-amber); } .code-rail__run-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.55rem; padding: 0.18rem 0.5rem; border: 1px solid color-mix(in srgb, var(--brand-amber) 60%, var(--color-border)); border-radius: 4px; background: color-mix(in srgb, var(--color-black) 82%, var(--brand-amber) 10%); color: var(--color-amber); font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .code-rail__run-btn:hover, .code-rail__run-btn:focus-visible { color: var(--color-text); border-color: color-mix(in srgb, var(--brand-amber) 75%, var(--color-border)); box-shadow: 0 0 12px color-mix(in srgb, var(--brand-amber) 24%, transparent); outline: none; } @media (max-width: 760px) { .code-rail__run-btn { padding: 0.24rem 0.65rem; font-size: 0.68rem; } } .code-rail__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 0.35rem 0; list-style: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-ink); box-shadow: var(--term-glow), 0 12px 40px rgba(0, 0, 0, 0.55); } .code-rail__menu li { margin: 0; } .code-rail__option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.45rem 0.65rem; border: none; background: transparent; font: inherit; font-size: 0.68rem; color: var(--color-text-muted); text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .code-rail__option:hover, .code-rail__option:focus-visible { background: color-mix(in srgb, var(--brand-cyan) 8%, transparent); color: var(--color-text); outline: none; } .code-rail__option[aria-selected="true"] { background: color-mix(in srgb, var(--brand-magenta) 10%, transparent); color: var(--color-text); } .code-rail__cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .code-rail__badge { flex-shrink: 0; padding: 0.12rem 0.4rem; border-radius: 3px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .code-rail__badge--confetti { color: var(--brand-magenta); background: color-mix(in srgb, var(--brand-magenta) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand-magenta) 35%, transparent); } .code-rail__badge--glitch { color: var(--brand-cyan); background: color-mix(in srgb, var(--brand-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-cyan) 30%, transparent); font-family: var(--font-mono); } .code-rail__badge--greet { color: var(--brand-violet); background: color-mix(in srgb, var(--brand-violet) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-violet) 32%, transparent); } /* Pełnoekranowy „glitch” + canvas (matrix) — komenda z code-rail */ .code-rail-glitch-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; background: rgba(2, 4, 10, 0.82); opacity: 0; animation: code-rail-glitch-shell 2.8s ease-out forwards; } @keyframes code-rail-glitch-shell { 0% { opacity: 0; transform: translate(0, 0) skewX(0deg); filter: contrast(1) saturate(1); } 4% { opacity: 1; } 8% { transform: translate(-12px, 6px) skewX(-1.2deg); filter: contrast(1.35) saturate(1.9) hue-rotate(40deg); } 18% { transform: translate(14px, -10px) skewX(1deg); filter: contrast(1.5) saturate(2.4) hue-rotate(-30deg); } 32% { transform: translate(-8px, 4px) skewX(-0.6deg); filter: contrast(1.4) saturate(2.1) hue-rotate(120deg); } 48% { transform: translate(10px, -6px) skewX(0.5deg); filter: contrast(1.55) saturate(2.3) hue-rotate(-80deg); } 65% { opacity: 1; transform: translate(-4px, 2px) skewX(-0.2deg); } 85% { opacity: 0.75; filter: contrast(1.2) saturate(1.5); } 100% { opacity: 0; transform: translate(0, 0) skewX(0deg); filter: contrast(1) saturate(1); } } .code-rail-glitch-matrix { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: screen; opacity: 0.95; } .code-rail-glitch-vhs { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.09) 0px, rgba(0, 0, 0, 0.09) 1px, transparent 1px, transparent 3px ), linear-gradient( 90deg, rgba(255, 0, 100, 0.07) 0%, transparent 35%, transparent 65%, rgba(0, 255, 220, 0.08) 100% ); animation: code-rail-glitch-vhs-flicker 0.12s steps(2) infinite; mix-blend-mode: overlay; } .code-rail-glitch-rgb { position: absolute; inset: 0; box-shadow: inset 8px 0 0 -6px rgba(255, 0, 80, 0.22), inset -10px 0 0 -6px rgba(0, 255, 230, 0.2); animation: code-rail-glitch-rgb-shift 0.06s steps(2) infinite; pointer-events: none; } @keyframes code-rail-glitch-vhs-flicker { 0% { opacity: 1; transform: translateX(0); } 50% { opacity: 0.88; transform: translateX(2px); } 100% { opacity: 1; transform: translateX(-1px); } } @keyframes code-rail-glitch-rgb-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(4px, -2px); } 100% { transform: translate(0, 0); } } .code-rail-toast { position: fixed; bottom: var(--space-md); left: 50%; z-index: 9999; max-width: min(32rem, calc(100vw - 2rem)); padding: 0.85rem 1.1rem; translate: -50% 120%; opacity: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-ink); box-shadow: var(--term-glow); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--color-text-muted); transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .code-rail-toast.is-visible { translate: -50% 0; opacity: 1; } .code-rail-toast__who { display: block; margin-top: 0.35rem; font-size: 0.65rem; color: var(--brand-cyan); letter-spacing: 0.1em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .code-rail-glitch-overlay, .code-rail-glitch-vhs, .code-rail-glitch-rgb { animation: none !important; opacity: 0 !important; } } @keyframes term-caret { 50% { opacity: 0; } } /* * Okna „terminalowe”: obramowanie + czarne tło; pasek tytułu — .term-window__bar (kropki R/Y/G, tytuł nie nachodzi). */ .term-window { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-black); box-shadow: var(--term-glow), inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 8%, transparent); } .term-window__bar { display: flex; align-items: center; gap: 0.45rem; min-height: 2.125rem; padding: 0.45rem 0.65rem; box-sizing: border-box; font-size: 0.62rem; letter-spacing: 0.07em; color: color-mix(in srgb, var(--color-text-dim) 88%, var(--color-text-muted)); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, #000); background: #0a0a0c; } .term-window__bar-copy { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kropki zamknięcia w stylu macOS — zapas z prawej pod box-shadow (12px / 24px) */ .term-window-dots { display: block; width: 6px; height: 6px; flex-shrink: 0; align-self: center; border-radius: 50%; background: #ff5f57; box-shadow: 12px 0 #febc2e, 24px 0 #28c840; margin-right: 1.5rem; }