/* dataminers.pl — style strony glownej wyciagniete z 2026-09-11. Kolejnosc blokow zachowana. Ladowany PO custom.css, wiec kaskada bez zmian. */ .cb-amazing-tabs { background-color: transparent; border-radius: 40px; user-select: none; padding-top: 16px; } .cb-main-tabs-container { padding: 0 16px 32px 16px; margin-bottom: 0rem; } .cb-main-tabs-wrapper { position: relative; } ul.cb-main-tabs { list-style-type: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 0; } ul.cb-main-tabs li { display: inline-flex; position: relative; padding: 0; margin: 0; z-index: 1; } .cb-avatar { height: 64px; width: 64px; border-radius: 6px; pointer-events: none; } .cb-avatar img { height: 100%; width: 100%; object-fit: cover; border-radius: 50%; } .cb-round-button { height: 48px; border-radius: 6px; /* pill shape */ display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; /* adaptive dynamic width via padding */ justify-content: center; color: #212121; transition: color 0.2s ease-in-out; background: transparent; border: none; cursor: pointer; position: relative; z-index: 2; } .cb-round-button:hover, .cb-round-button.active { color: var(--cb-round-button-active-color); } .cb-tab-label { font-size: 1.25rem; font-weight: 400; pointer-events: none; text-align: left; line-height: 1.2; white-space: nowrap; /* Forces text to always stay on a single line */ } .cb-round-button svg, .cb-round-button i { pointer-events: none; height: 24px; width: 24px; min-width: 24px; min-height: 24px; display: block; color: inherit; transform: translateY(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .cb-round-button:hover svg, .cb-round-button:hover i { transform: translateY(-4px) scale(1.1); } .cb-main-slider { pointer-events: none; position: absolute; top: 0; left: 0; padding: 0; z-index: 0; transition: transform 0.2s ease-in-out; } .cb-main-slider-circle { height: var(--cb-slider-height, 48px); width: var(--cb-slider-width, 48px); border-radius: 6px; /* Pill slider */ transition: background-color 0.2s ease-in-out; background-color: #e3f2fd; } .cb-animate-jello { animation: cb-jello-horizontal 0.45s both; } @keyframes cb-jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.15, 0.85, 1); } 40% { transform: scale3d(0.85, 1.15, 1); } 50% { transform: scale3d(1.05, 0.95, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.02, 0.98, 1); } 100% { transform: scale3d(1, 1, 1); } } .cta-dialog h2 { font-family: 'Satoshi', sans-serif; font-weight: 700; color: #0b163f; margin: 0 0 32px; padding: 0 !important; } .cta-dialog p { font-family: 'Satoshi', sans-serif; font-size: 1rem; color: #575757; margin: 0 0 28px; line-height: 1.75; } .cta-dialog .btn { gap: 8px; } .cta-dialog a { font-weight: 400 !important; font-size: 1.25rem !important; line-height: 1.75rem !important; } .pipeline-container { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; } @media (min-width: 992px) { .pipeline-container { flex-direction: row; align-items: stretch; } } .pipeline-card { flex: 1; background: #ffffff; border: 1px solid rgba(11, 22, 63, 0.1); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(11, 22, 63, 0.04); min-width: 0; position: relative; } .pipeline-card-title { font-family: 'Satoshi', sans-serif; font-size: 1.25rem; font-weight: 300; color: #0b163f; margin-bottom: 20px; text-align: center; border-bottom: 1px solid rgba(11, 22, 63, 0.05); padding-bottom: 24px; } /* Tags (Sources & Options) */ .pipeline-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; justify-content: center; min-height: 80px; align-content: flex-start; } @media (min-width: 992px) { .pipeline-tags { min-height: 110px; } } .pipeline-tag { padding: 6px 14px; border-radius: 5px; font-size: 1rem; font-weight: 400; cursor: pointer; transition: all 0.2s ease; background: #f4f6f9; color: #6c757d; border: 0; user-select: none; } .pipeline-tag:hover { background: #e9ecef; } .pipeline-tag.active { background: #e71665; color: #fff; } .pipeline-badge { padding: 6px 14px; border-radius: 5px; font-size: 0.85rem; font-weight: 600; background: #f8f9fa; color: #adb5bd; border: 1px solid #eee; user-select: none; } /* Sticker Arrows */ .pipeline-sticker { display: none; position: absolute; width: 36px; height: 36px; background: #ffffff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); align-items: center; justify-content: center; z-index: 10; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(11, 22, 63, 0.1); color: #e71665; } @media (min-width: 992px) { .pipeline-sticker { display: flex; } } /* Code/Log Windows */ .pipeline-window, .pipeline-window *, .pipeline-window pre, .pipeline-window code { font-family: 'Consolas', 'Courier New', monospace !important; } .pipeline-window pre, .pipeline-window code { white-space: pre-wrap !important; word-break: break-all !important; } .pipeline-window { background: #1a1d20; border-radius: 8px; padding: 16px; height: 400px; overflow-y: auto; overflow-x: hidden; font-size: 0.8rem; line-height: 1.6; text-align: left !important; width: 100%; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } .pipeline-window pre, .pipeline-window code { margin: 0; padding: 0; display: block; width: 100%; } /* Custom Scrollbar for windows */ .pipeline-window::-webkit-scrollbar { width: 6px; } .pipeline-window::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; } .pipeline-window::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 8px; } /* URL List Animation */ .url-item { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; opacity: 0; animation: fadeIn 0.3s forwards; word-break: break-all; } .url-status { width: 12px; height: 12px; border-radius: 50%; background: #6c757d; /* pending gray */ flex-shrink: 0; } .url-status.done { background: #5cc9a7; /* success green */ box-shadow: 0 0 8px rgba(92, 201, 167, 0.4); } .url-text { color: #adb5bd; transition: color 0.3s ease; } .url-item.done .url-text { color: #f8f9fa; /* highlight when done */ } /* Processor Logs Animation */ .log-item { margin-bottom: 20px; color: #adb5bd; border-left: 2px solid transparent; padding-left: 8px; animation: typeLog 0.2s forwards; opacity: 0; text-align: left !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .log-item>div, .log-content-row { text-align: left !important; width: 100% !important; display: block !important; } .log-item.processing { border-left-color: #ffb116; /* warning/processing */ color: #f8f9fa; } .log-item.done { border-left-color: #5cc9a7; } .log-source { color: #50b5ff; /* info blue */ font-weight: bold; } .log-time { color: #728023; /* primary pink */ } .log-size { color: #5cc9a7; } /* Output Highlights */ .json-key { color: #50b5ff; } .json-string { color: #5cc9a7; } .json-number { color: #ffb116; } .json-boolean { color: #e71665; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes typeLog { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } #pipeline-output { font-size: 1rem !important; } .pipeline-output-tabs { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; justify-content: flex-start; min-height: 80px; padding-top: 0; } @media (min-width: 992px) { .pipeline-output-tabs { min-height: 110px; } } .pipeline-output-selectors { display: flex; gap: 12px; } .output-tab { font-size: 1rem; color: #6c757d; font-weight: 600; cursor: pointer; } .output-tab.active { color: #e71665; } .testimonial-video-wrapper:before { display: none !important } .email-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px } @media(max-width:991px) { .email-grid { grid-template-columns: repeat(2, 1fr) } } @media(max-width:575px) { .email-grid { grid-template-columns: 1fr } } .email-snippet { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #e8e8e8 } .email-snippet:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) } .email-header { background: #f6f6f6; padding: 12px 16px; border-bottom: 1px solid #e8e8e8; font-size: 0.8rem; color: #888 !important; font-family: 'Satoshi', sans-serif } .email-header .email-dots { display: flex; gap: 6px; margin-bottom: 8px } .email-header .email-dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block } .email-header .email-dots span:nth-child(1) { background: #ff5f57 } .email-header .email-dots span:nth-child(2) { background: #febc2e } .email-header .email-dots span:nth-child(3) { background: #28c840 } .email-from { display: flex; align-items: center; gap: 8px; margin-bottom: 4px } .email-from .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700; flex-shrink: 0 } .email-from .sender-info { flex: 1; min-width: 0 } .email-from .sender-name { color: #333 !important; font-weight: 600; font-size: 0.85rem } .email-from .sender-email { color: #aaa !important; font-size: 0.75rem } .email-from .email-date { color: #aaa !important; font-size: 0.72rem; flex-shrink: 0 } .email-subject { font-weight: 700; color: #111 !important; font-size: 0.95rem; margin-top: 4px } .email-body { padding: 20px; font-size: 1rem; color: #111 !important; line-height: 1.7; font-family: 'Satoshi', sans-serif } .email-body p { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.7 !important; margin: 0 0 10px 0; color: #111 !important } .email-body .highlight { background: #ffe082; padding: 2px 5px; border-radius: 3px; color: #111 !important } .email-redacted { background: #ddd; border-radius: 3px; display: inline-block; height: 12px; vertical-align: middle } .email-nda { display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; color: #bbb; background: #f5f5f5; padding: 2px 8px; border-radius: 10px; margin-top: 6px } .is-invalid{border:1px solid #dc3545 !important;background-color:#fff8f8 !important;}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;} /* ETL <-> ELT swap animation styles */ .etl-swap-container { display: inline-block; position: relative; } .etl-swap-container::before, .etl-swap-container::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .dissolve-glitch { animation: glitchTextMain 0.5s linear forwards; } .dissolve-glitch::before { opacity: 1; animation: glitchBlinkFast 0.5s linear forwards; color: #fff; z-index: 1; text-shadow: 2px 0 #0ff; } .dissolve-glitch::after { opacity: 1; animation: glitchBlinkFast 0.5s linear reverse forwards; color: #fff; z-index: 2; text-shadow: -2px 0 #f0f; } @keyframes glitchTextMain { 0%, 5% { color: inherit; transform: skewX(0) translateX(0); filter: drop-shadow(0 0 0px transparent); } 6%, 19% { color: inherit; transform: skewX(-15deg) translateX(-2px); filter: drop-shadow(0 0 2px #fff); } 20%, 39% { color: transparent; transform: skewX(20deg) translateX(3px); filter: drop-shadow(0 0 5px #0ff); } 40%, 59% { color: transparent; transform: skewX(-20deg) translateX(-3px); filter: drop-shadow(0 0 5px #f0f); } 60%, 79% { color: transparent; transform: skewX(10deg) translateX(2px); filter: drop-shadow(0 0 5px #fff); } 80%, 94% { color: inherit; transform: skewX(-5deg) translateX(-1px); filter: drop-shadow(0 0 2px #fff); } 95%, 100% { color: inherit; transform: skewX(0) translateX(0); filter: drop-shadow(0 0 0px transparent); } } @keyframes glitchBlinkFast { 0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 1px); } 10% { clip-path: inset(40% 0 10% 0); transform: translate(2px, -1px); } 20% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 2px); } 30% { clip-path: inset(15% 0 20% 0); transform: translate(3px, -2px); } 40% { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 1px); } 50% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -2px); } 60% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 2px); } 70% { clip-path: inset(20% 0 60% 0); transform: translate(3px, -1px); } 80% { clip-path: inset(40% 0 40% 0); transform: translate(-1px, 2px); } 90% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -2px); } 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0; } } /* Animated gradient background */ .animated-gradient-bg { background: url('assets/img/hero-dot-bg.png') no-repeat center right, linear-gradient(90deg, #0F1123, #290040, #091336, #0F1123) !important; background-size: auto, 300% 300% !important; animation: gradientFlow 12s ease infinite !important; background-blend-mode: normal; } @keyframes gradientFlow { 0% { background-position: center right, 0% 50%; } 50% { background-position: center right, 100% 50%; } 100% { background-position: center right, 0% 50%; } }