/* * upgrade-v2.css - AI Upgrade Lab (Phase 2b Migration) * Bazuje na Lab Club v2 DNA (tokens/core/components/legacy) * Wymaga stacku v2: * v2/tokens.css + v2/fonts.css + v2/core.css + v2/components.css + v2/legacy.css * * DNA v2: * - Geist sans + Instrument Serif italic accent + JetBrains Mono * - Border-based depth (zero soft brick shadows) * - Single accent: #FF5630 (jedyny akcent) * - Radius jednolite 14px (cards), 10px (small), 999px (pills) * - Minimal animations (<350ms) * - Grid layout, zero dekoracyjnych gradient blobs * * Unikalne widgety upgrade: * - stones-system (6 kamieni w kręgu + animowane scenariusze SVG) * - wrong-train (japońska mądrość - pociąg w złym kierunku) * - ai-console (terminal-look live typing widget) * - agenda-modal (modale z listami modułów akademii) * - spire-framework (Harvard SPIRE+ mapping) * - infinity-stones-grid (6 kart kamieni) * - schedule-roadmap (warsztaty sobotnie) * - testimonial-wall (grid + marquee opinii) * - final-cta-section (ostatni blok z opinią + CTA) */ /* ============================================================ BODY PAGE SCOPE .upgrade-page + .premium-page na ============================================================ */ body.upgrade-page, body.premium-page.upgrade-page { font-family: var(--font-sans); background: var(--bg); color: var(--text); } /* Wspólne z v2/product-page.css: scroll-progress, section.section, bg-light, content-section, content-surface, section-title, section-intro, section-subtitle. Tutaj upgrade-specific override: section-title/intro max-width 760 (premium ma 720 w shared), section-title/intro p max-width 640. */ .section-title, .section-intro { max-width: 760px; } .section-title p, .section-intro p { max-width: 640px; } /* ============================================================ HERO - upgrade-specific Bazowe hero/hero-content/hero-eyebrow/hero-buttons/hero-visual w v2/product-page.css. Upgrade: hero-container 1.05fr, hero-content gap 18, hero-title mniejszy clamp, hero-description 1.05rem max-width 56ch, hero-buttons z align-items+p mono note. ============================================================ */ .hero-container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .hero-content { gap: 18px; } .hero-title { font-family: var(--font-sans); font-size: clamp(2.2rem, 4.8vw, 3.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); margin: 4px 0 8px; text-wrap: balance; } .hero-description, .hero-subheadline { font-size: 1.05rem; line-height: 1.6; color: var(--text-dim); max-width: 56ch; margin: 0; text-wrap: balance; } .hero-description strong, .hero-subheadline strong { color: var(--text); font-weight: 600; } .hero-buttons { margin-top: 10px; align-items: center; } .hero-buttons p { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.02em; margin: 0; width: 100%; max-width: none; } /* Hero social proof (avatary + licznik "515 uczestników") */ .hero-social-proof { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } /* ============================================================ STONES SYSTEM (6 kamieni w kręgu + SVG connections + scenariusze) Kluczowy widget hero. 6 kamieni dookoła koła (TIME/SPACE/POWER/ MIND/REALITY/SOUL). Pozycje: TIME(12:00), SPACE(2:00), POWER(4:00), MIND(6:00), REALITY(8:00), SOUL(10:00). Viewport 400x400. Klasa scenario-X na active jarzy dany zestaw kamieni. ============================================================ */ .stones-system { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* Warstwa połączeń SVG (krzywe między kamieniami) */ .stones-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .connections-layer { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; } .connection { opacity: 0; stroke-dasharray: 4 6; transition: opacity 0.6s ease; } .connection.active, .stones-system .connection[data-active="true"] { opacity: 0.65; animation: connectionFlow 3s linear infinite; } @keyframes connectionFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } } /* Warstwa z 6 węzłami (kamieniami) */ .stones-nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .stone-node { position: absolute; width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; pointer-events: auto; transition: transform 0.3s ease; } /* Kamienie Infinity - kolory per kamien (Avengers Infinity Stones palette) */ .stone-node.stone-time { --stone-color: #28A956; --stone-color-soft: rgba(40, 169, 86, 0.12); --stone-color-line: rgba(40, 169, 86, 0.45); } .stone-node.stone-space { --stone-color: #2D7BCB; --stone-color-soft: rgba(45, 123, 203, 0.12); --stone-color-line: rgba(45, 123, 203, 0.45); } .stone-node.stone-power { --stone-color: #CB2D31; --stone-color-soft: rgba(203, 45, 49, 0.12); --stone-color-line: rgba(203, 45, 49, 0.45); } .stone-node.stone-mind { --stone-color: #6D3CC9; --stone-color-soft: rgba(109, 60, 201, 0.12); --stone-color-line: rgba(109, 60, 201, 0.45); } .stone-node.stone-reality{ --stone-color: #E8871E; --stone-color-soft: rgba(232, 135, 30, 0.12); --stone-color-line: rgba(232, 135, 30, 0.45); } .stone-node.stone-soul { --stone-color: #E6733C; --stone-color-soft: rgba(230, 115, 60, 0.12); --stone-color-line: rgba(230, 115, 60, 0.45); } /* Pozycje kamieni (center of stone = na okręgu) */ /* TIME 12:00 (góra) */ .stone-node.stone-time { top: 0; left: 50%; transform: translate(-50%, 0); } /* SPACE 2:00 (prawa góra) */ .stone-node.stone-space { top: 20%; right: 0; transform: translate(0, -50%); } /* POWER 4:00 (prawa dół) */ .stone-node.stone-power { bottom: 20%; right: 0; transform: translate(0, 50%); } /* MIND 6:00 (dół) */ .stone-node.stone-mind { bottom: 0; left: 50%; transform: translate(-50%, 0); } /* REALITY 8:00 (lewa dół) */ .stone-node.stone-reality { bottom: 20%; left: 0; transform: translate(0, 50%); } /* SOUL 10:00 (lewa góra) */ .stone-node.stone-soul { top: 20%; left: 0; transform: translate(0, -50%); } .stone-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; border-radius: 50%; background: var(--bg-elev-1); border: 1px solid var(--border); padding: 10px; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .stone-node:hover .stone-inner { border-color: var(--stone-color-line, var(--accent-line)); background: var(--stone-color-soft, var(--accent-soft)); transform: scale(1.05); } .stone-gem { width: 22px; height: 22px; border-radius: 50%; background: var(--stone-color, var(--bg-elev-2)); border: 1px solid var(--stone-color, var(--border-strong)); opacity: 0.55; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; } .stone-node:hover .stone-gem, .stone-node.active .stone-gem, .stone-node.is-active .stone-gem { opacity: 1; box-shadow: 0 0 0 4px var(--stone-color-soft, var(--accent-soft)); } .stone-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; line-height: 1; transition: color 0.25s ease; } .stone-node:hover .stone-label, .stone-node.active .stone-label, .stone-node.is-active .stone-label { color: var(--stone-color, var(--accent)); } /* Aktywny kamień (podświetlony przez scenariusz) */ .stone-node.is-active .stone-inner { border-color: var(--stone-color, var(--accent)); background: var(--stone-color-soft, var(--accent-soft)); } /* Scenariusz text - pod kręgiem kamieni (zmienia się automatycznie) */ .stones-scenario { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 180px; z-index: 3; pointer-events: none; } .scenario-text { opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s ease; width: 180px; } .scenario-text.active { opacity: 1; visibility: visible; position: relative; top: auto; left: auto; transform: none; } .scenario-action { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--text); line-height: 1.35; letter-spacing: -0.005em; text-wrap: balance; } /* ============================================================ WRONG TRAIN SECTION (Japońska mądrość - pociąg w złym kierunku) Layout 2-col: ikonka/cytat lewa, treść + CTA prawa ============================================================ */ .wrong-train-section { padding: 72px 0; background: var(--bg-elev-2); } .wrong-train-content { max-width: 780px; margin: 0 auto; display: block; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; } .quote-text { display: flex; flex-direction: column; gap: 18px; } .japanese-proverb { margin: 0; padding: 0; border: 0; } .quote-main { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.55rem); color: var(--text); line-height: 1.4; letter-spacing: -0.005em; margin: 0; max-width: none; text-wrap: balance; } .quote-interpretation { display: flex; flex-direction: column; gap: 10px; } .quote-interpretation p { font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: none; } .quote-interpretation p strong { color: var(--text); font-weight: 600; } .wrong-train-cta { padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .cta-text { font-family: var(--font-sans); font-size: 0.95rem; color: var(--text); line-height: 1.55; margin: 0; max-width: 60ch; } /* ============================================================ TESTIMONIALS HERO TOP - upgrade-specific Bazowe testimonials-hero-grid/testimonial-hero-card/author/avatar w v2/product-page.css Upgrade: padding sekcji 72 (premium ma 80), testimonial-hero-card ma position:relative, result-number mniejszy 1.7rem weight 600, alumni badge hide. ============================================================ */ .testimonials-hero-top { padding: 72px 0; position: relative; z-index: 2; } .testimonial-hero-card { position: relative; } /* Alumni badge - ukryte w design v2 (niepotrzebny corner dekor) */ .alumni-corner-badge { display: none !important; } .result-number { font-family: var(--font-sans); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; } /* PROBLEM - BARRIERS + DIAGNOSTIC QUIZ: całość wspólna z premium-v2 - patrz v2/product-page.css. */ /* ============================================================ HOW-IT-WORKS / PROTOCOL DIAGRAM - upgrade-specific Bazowe how-it-works-section + protocol-diagram/stage w v2/product-page.css. Upgrade: protocol-diagram max-width 820 (shared ma 760), unikalny stage-content. ============================================================ */ .protocol-diagram { max-width: 820px; } .protocol-stage .stage-content { width: 100%; display: flex; flex-direction: column; gap: 10px; } .protocol-stage .stage-content h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.015em; line-height: 1.3; text-align: center; } .protocol-stage .stage-content p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; margin: 0 auto; max-width: 42ch; text-align: center; } .protocol-stage .stage-content ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .protocol-stage .stage-content ul li { font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; padding-left: 20px; position: relative; } .protocol-stage .stage-content ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--accent); } /* icon-bubble + btn-primary + btn-lg są w v2/product-page.css */ /* ============================================================ AI ASSISTANTS SHOWCASE - upgrade-specific Bazowe ai-showcase*, ai-tasks-widget, live-status-bar, tasks-container, task-* assistant-*, showcase-*, counter-*, status-* w v2/product-page.css Upgrade: ai-showcase-head h3 font-weight 600 (premium ma 500), task-item padding 18x20 (premium 20x22), task-item max-width 36ch (premium 32ch). ============================================================ */ .ai-showcase-head h3 { font-family: var(--font-sans); font-size: clamp(1.35rem, 2.8vw, 1.8rem); font-weight: 600; letter-spacing: -0.025em; color: var(--text); margin: 0 auto; line-height: 1.2; max-width: 36ch; text-wrap: balance; } .task-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-sans); font-size: 0.88rem; color: var(--text); transition: border-color 0.15s ease; } /* ============================================================ SPIRE FRAMEWORK SECTION (Harvard: S/P/I/R/E + T=TIME bonus) harvard-insight-card + spire-mapping-grid z kartami SPIRE .key-promises-outer-section padding w v2/product-page.css ============================================================ */ .spire-framework-section { padding: 80px 0; position: relative; z-index: 2; } /* Harvard insight card (cytat Ben-Shahar) */ .harvard-insight-card { max-width: 820px; margin: 0 auto 40px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; transition: border-color 0.2s ease; } .harvard-insight-card:hover { border-color: var(--border-strong); } .harvard-insight-card--antifragile { margin-top: 40px; margin-bottom: 0; background: radial-gradient(500px 220px at 50% 0%, var(--accent-soft), transparent 70%), var(--bg-elev-1); border-color: var(--accent-line); } .insight-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .insight-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .badge-icon { width: 14px; height: 14px; stroke: currentColor; } .insight-source { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.02em; } .insight-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text); line-height: 1.5; letter-spacing: -0.005em; margin: 0; text-wrap: balance; } .insight-context, .insight-application { font-family: var(--font-sans); font-size: 0.92rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: none; } .insight-application strong { color: var(--text); font-weight: 600; } /* SPIRE mapping grid (5+1 kart: S/P/I/R/E + TIME) */ .spire-mapping-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto 40px; } .spire-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.2s ease, transform 0.2s ease; } .spire-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .spire-card--bonus { background: linear-gradient(180deg, rgba(255, 86, 48, 0.05), transparent 60%), var(--bg-elev-1); border-color: var(--accent-line); } .spire-letter { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; font-weight: 400; color: var(--accent); letter-spacing: -0.01em; } .spire-letter--bonus { background: var(--accent); border-color: var(--accent); color: #0A0A0A; font-family: var(--font-sans); font-style: normal; font-weight: 600; } .spire-card h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.015em; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bonus-badge { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--accent); color: #0A0A0A; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 6px; } .spire-definition { font-family: var(--font-sans); font-size: 0.88rem; color: var(--text-faint); margin: 0; line-height: 1.5; max-width: none; } .spire-stone-mapping { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .spire-stone-mapping p { font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin: 0; max-width: none; } /* Stone chips (SOUL, MIND, REALITY, POWER, SPACE, TIME - w ramkach) */ .stone-chip { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; align-self: flex-start; } /* ============================================================ STRUCTURE LIST (Co otrzymujesz: 3 karty warsztatów) structure-list > structure-step.value-card ============================================================ */ .structure-list { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .structure-step { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 32px; display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: flex-start; transition: border-color 0.2s ease, transform 0.2s ease; } .structure-step:hover { border-color: var(--border-strong); transform: translateY(-1px); } .structure-step .value-icon.icon-bubble { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .structure-step .value-icon.icon-bubble svg { width: 28px; height: 28px; stroke: currentColor; } .structure-step .value-content { display: flex; flex-direction: column; gap: 10px; } .structure-step .value-content h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.02em; line-height: 1.3; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .workshop-duration { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 400; color: var(--text-faint); letter-spacing: 0.04em; } .structure-step .value-content p { font-size: 0.94rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: 72ch; } .structure-step .value-content p strong { color: var(--text); font-weight: 600; } .value-outcome { padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.88rem !important; color: var(--text-faint) !important; } .value-outcome strong { color: var(--accent) !important; font-weight: 600 !important; } /* ============================================================ INFINITY STONES GRID (6 kart kamieni z SVG) ============================================================ */ .infinity-stones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto 40px; } .infinity-stone-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; transition: border-color 0.2s ease, transform 0.2s ease; } .infinity-stone-card:hover { border-color: var(--accent-line); transform: translateY(-2px); } .infinity-stone-card .stone-visual { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); width: 100%; } .infinity-stone-card .stone-icon { width: 48px; height: 48px; flex-shrink: 0; } .infinity-stone-card .stone-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); line-height: 1; } .infinity-stone-card h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.02em; line-height: 1.3; } .stone-desc { font-family: var(--font-sans); font-size: 0.92rem; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: none; } .stone-use { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); font-family: var(--font-sans); font-size: 0.86rem; color: var(--text-dim); line-height: 1.55; max-width: none; } .stone-use strong { color: var(--text); font-weight: 600; } /* CTA pod grid infinity */ .infinity-cta { max-width: 640px; margin: 40px auto 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .infinity-cta-subtext { font-family: var(--font-sans); font-size: 1rem; color: var(--text); line-height: 1.6; margin: 0; max-width: 60ch; text-wrap: balance; } .infinity-cta-subtext strong { color: var(--accent); font-weight: 600; } /* ============================================================ SYSTEM FLOW (3 kroki: Snap Lista -> 6 Asystentów -> Zatwierdzasz) ============================================================ */ .system-flow { max-width: 1080px; margin: 0 auto 40px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; } .flow-step { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.2s ease, transform 0.2s ease; } .flow-step:hover { border-color: var(--accent-line); transform: translateY(-2px); } .flow-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--accent); } .flow-step h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.015em; line-height: 1.3; } .flow-step p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: none; } .flow-arrow { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 1.2rem; color: var(--text-faint); padding: 0 4px; } /* ============================================================ SYSTEM RULES (3 zasady: kontrola, perspektywa, asystenci znają Cię) ============================================================ */ .system-rules { max-width: 960px; margin: 0 auto; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 36px; } .system-rules h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0 0 20px; letter-spacing: -0.02em; line-height: 1.3; text-align: center; } .rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rule-item { display: flex; align-items: flex-start; gap: 10px; padding: 18px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.2s ease; } .rule-item:hover { border-color: var(--border-strong); } .rule-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; flex-shrink: 0; margin-top: 2px; } .rule-item p { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; margin: 0; max-width: none; } .rule-item p strong { color: var(--text); font-weight: 600; } /* ============================================================ USP HERO (3 bloki: Najpierw stabilność, Zero teorii, System rośnie) ============================================================ */ .usp-hero { max-width: 960px; margin: 0 auto 18px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 36px; display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: flex-start; transition: border-color 0.2s ease; } .usp-hero:hover { border-color: var(--border-strong); } .usp-hero-number { font-family: var(--font-serif); font-style: italic; font-size: 3rem; font-weight: 400; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } .usp-hero-content h3 { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; color: var(--text); margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.3; } .usp-hero-content p { font-size: 0.95rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: 68ch; } .usp-hero-content p strong { color: var(--text); font-weight: 600; } .lead-text { font-size: 1.05rem !important; color: var(--text) !important; } /* ============================================================ VALUE GRID (akademie VOD - 6 kart z value-card--with-image) ============================================================ */ .value-grid { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .value-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 28px; transition: border-color 0.2s ease, transform 0.2s ease; } .value-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .value-card--with-image { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 32px; } .value-card-text { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: flex-start; } .value-card-text .value-icon.icon-bubble { width: 48px; height: 48px; border-radius: 12px; } .value-content { display: flex; flex-direction: column; gap: 10px; } .value-content h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.02em; line-height: 1.3; } .value-content p { font-size: 0.94rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: 68ch; } .value-content p strong { color: var(--text); font-weight: 600; } .value-card-image { display: flex; flex-direction: column; gap: 14px; justify-content: center; } .value-card-image img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); object-fit: cover; } .value-card-agenda { display: flex; flex-direction: column; gap: 14px; } /* Feature list z checkami */ .feature-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; } .feature-list li { position: relative; padding-left: 26px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; } /* .feature-list--checked li::before w v2/product-page.css */ /* Vimeo wrapper + label (w value-card-agenda) */ .vimeo-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .vimeo-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin: 0; max-width: none; } /* Vimeo iframe wrapper (is-fb36370c, is-c53996e7) */ .is-fb36370c, .is-c53996e7 { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-elev-2); } .is-0f49f71e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Agenda toggle button (Zobacz listę modułów) */ .agenda-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 500; color: var(--text); letter-spacing: -0.01em; cursor: pointer; transition: all 0.18s ease; width: 100%; } .agenda-toggle:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .agenda-toggle-text { flex: 1; text-align: left; } .agenda-toggle-icon { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; transition: transform 0.2s ease; } .agenda-toggle.active .agenda-toggle-icon { transform: rotate(180deg); } /* ============================================================ FUTURE SKILLS SECTION (3 karty value-card + career paths) ============================================================ */ .future-skills-cta { max-width: 1100px; margin: 40px auto 0; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 36px; } .future-skills-cta h3 { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 600; color: var(--text); margin: 0 0 10px; letter-spacing: -0.02em; text-align: center; } .career-intro { font-size: 0.95rem; color: var(--text-dim); line-height: 1.65; margin: 0 auto 24px; max-width: 62ch; text-align: center; } .career-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .career-path { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.2s ease; } .career-path:hover { border-color: var(--accent-line); } .career-path strong { font-family: var(--font-sans); font-size: 0.94rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .career-path p { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; margin: 0; max-width: none; } /* ============================================================ AI CONSOLE (terminal-look widget - live typing effect) Używany wewnątrz value-card-image z data-scenario ============================================================ */ .ai-console { background: #111111; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; font-family: var(--font-mono); display: flex; flex-direction: column; min-height: 280px; } .console-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #161616; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .console-title { font-family: var(--font-mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; } .console-controls { display: inline-flex; gap: 6px; } .console-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .console-dot.red { background: #FF5F57; } .console-dot.yellow { background: #FEBC2E; } .console-dot.green { background: #28C840; } .console-body { flex: 1; padding: 20px 22px; color: rgba(255, 255, 255, 0.92); font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; overflow-y: auto; overflow-x: hidden; position: relative; min-height: 240px; max-height: 340px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .console-body::-webkit-scrollbar { width: 6px; } .console-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } /* console-message: dialog bubble (user / assistant / system) z ai-console-animations.js */ .console-message { display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(4px); transition: opacity 0.7s ease, transform 0.7s ease; } .console-message[style*="opacity: 1"] { opacity: 1 !important; transform: translateY(0); } .console-message .message-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); font-weight: 500; } .console-message .message-content { font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.94); padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); max-width: 92%; } .console-message.user { align-items: flex-end; } .console-message.user .message-content { background: rgba(255, 86, 48, 0.14); border-color: rgba(255, 86, 48, 0.28); color: #FFE8DF; } .console-message.user .message-label { color: rgba(255, 86, 48, 0.7); } .console-message.assistant .message-content { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.09); } .console-message.system { align-items: center; } .console-message.system .message-content { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.25); color: #BEEBC9; font-size: 0.85rem; text-align: center; padding: 8px 14px; } .console-message.system .message-label { display: none; } .console-message .check-icon { color: #4ADE80; font-weight: 700; margin-right: 6px; } /* Typing indicator (3 bouncing dots) */ .console-message.typing-message .message-content { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); padding: 12px 16px; width: fit-content; max-width: none; } .typing-indicator { display: inline-flex; gap: 5px; align-items: center; } .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); animation: typingBounce 1.3s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.18s; } .typing-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes typingBounce { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } } /* ============================================================ FRAMEWORK ROADMAP - upgrade-specific Bazowe framework-icon, framework-content p, framework-realization w v2/product-page.css. Upgrade: container max-width 860, step padding 28x32, h3 font-weight 600. ============================================================ */ .framework-container { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .framework-step { display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: flex-start; padding: 28px 32px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s ease, transform 0.2s ease; } .framework-step:hover { border-color: var(--border-strong); transform: translateY(-1px); } .framework-content h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; line-height: 1.3; } /* ============================================================ FOUNDER SECTION - upgrade-specific Bazowe founder-section/profile-card/photo/content/list w v2/product-page.css. Upgrade: founder-name jako single element (weight 600), founder-title jako mono. ============================================================ */ .founder-name { font-family: var(--font-sans); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0; line-height: 1.2; } .founder-title { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--accent); margin: 0; line-height: 1.4; max-width: none; } /* ============================================================ WORKSHOP SCHEDULE - upgrade-specific Bazowe schedule-roadmap/segment/pill/body/week/week-marker/week-date w v2/product-page.css. Upgrade: segment-meta h3 weight 600, segment-meta p mono, week-number jako pill (premium ma inline tekst), segment-week-content h4 weight 600, segment-week bez marker -> 1fr, segment-week-content p z margin-bottom 10. ============================================================ */ .segment-meta h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 6px; line-height: 1.3; } .segment-meta p { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); line-height: 1.55; margin: 0; max-width: none; letter-spacing: 0.02em; } /* Jesli segment-week nie ma markera (np. Momentum "12 miesiecy"): jedna kolumna full-width */ .segment-week:not(:has(.segment-week-marker)) { grid-template-columns: 1fr; } .segment-week-marker { gap: 6px; } .week-number { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start; } .segment-week-content h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text); margin: 0 0 8px; line-height: 1.3; } .segment-week-content p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; margin: 0 0 10px; max-width: none; } /* ============================================================ ENROLLMENT SECTION - upgrade-specific Bazowe enrollment-section + enrollment-eyebrow w v2/product-page.css. Upgrade: enrollment-header-v2 z flex-column + gap 14 + max-width 760, title i subtitle specyficzne. ============================================================ */ .enrollment-header-v2 { max-width: 760px; margin: 0 auto; text-align: center; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .enrollment-title { font-family: var(--font-sans); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; margin: 0; text-wrap: balance; } .enrollment-subtitle { font-family: var(--font-sans); font-size: 1rem; color: var(--text-dim); line-height: 1.65; margin: 0 auto 10px; max-width: 56ch; text-wrap: balance; } /* ============================================================ TESTIMONIAL WALL - upgrade-specific Bazowe testimonial-wall-section/grid/tile--highlight/wall-content/wall-meta w v2/product-page.css. Upgrade: tile padding 24 gap 16 z position:relative, wall-header bez padding-bottom/border, wall-avatar 42px, wall-tag accent kolor. ============================================================ */ .testimonial-tile { position: relative; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.2s ease, transform 0.2s ease; } .testimonial-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); } .wall-header { display: flex; align-items: center; gap: 12px; min-width: 0; } .wall-header > div { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .wall-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .wall-header strong { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; } .wall-header span { font-family: var(--font-sans); font-size: 0.76rem; color: var(--text-faint); line-height: 1.35; } /* Upgrade wall-content font-size (0.9) */ .wall-content { font-size: 0.9rem; } .wall-tag { display: inline-block; max-width: 100%; padding: 4px 10px; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } /* ============================================================ FAQ - upgrade-specific Bazowe faq-container/item/question/answer w v2/product-page.css. Upgrade: max-height 1200px, faq-answer p font 0.92 (premium ma 0.9), faq-answer ul z unikalnym stylingiem. ============================================================ */ .faq-item.active .faq-answer { max-height: 1200px; padding: 0 22px 22px; } .faq-answer p { font-family: var(--font-sans); font-size: 0.92rem; color: var(--text-dim); line-height: 1.7; margin: 0; max-width: none; } .faq-answer ul { margin: 10px 0; padding-left: 20px; list-style: none; display: flex; flex-direction: column; gap: 6px; } .faq-answer ul li { position: relative; padding-left: 12px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; } .faq-answer ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--accent); } .faq-single .faq-item { margin-bottom: 0; } /* ============================================================ VALUE BREAKDOWN (Co dostaniesz - 4 bloki value-items) bonus-value-summary + price-explanation ============================================================ */ .bonus-value-summary { max-width: 1100px; margin: 0 auto; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; } .value-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 32px; } .value-breakdown > div { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; } .value-breakdown h5 { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 6px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; } .value-breakdown h5 svg { width: 20px; height: 20px; stroke: var(--accent); } .value-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; } .value-item + .value-item { border-top: 1px dashed var(--border); } .value-label { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; padding-left: 16px; position: relative; } .value-label::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--accent); } .price-explanation { text-align: center; padding: 24px 20px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .price-explanation p { font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: 56ch; } .price-explanation p strong { color: var(--text); font-weight: 600; } /* ============================================================ FINAL CTA SECTION (ostatni blok - opinia + CTA na liście) ============================================================ */ .final-cta-section { padding: 80px 0; position: relative; z-index: 2; background: radial-gradient(700px 400px at 50% 100%, rgba(255, 86, 48, 0.05), transparent 70%), var(--bg-elev-2); } .final-cta-content { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } .final-cta-testimonial { display: flex; } .final-testimonial-card { position: relative; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; width: 100%; } .final-quote-mark { font-family: var(--font-serif); font-style: italic; font-size: 4rem; line-height: 1; color: var(--accent); opacity: 0.35; position: absolute; top: 18px; right: 24px; } .final-quote-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--text); line-height: 1.5; letter-spacing: -0.005em; margin: 0; max-width: none; text-wrap: balance; } .final-testimonial-footer { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; } .final-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .final-author-info { display: flex; flex-direction: column; gap: 2px; } .final-author-name { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .final-author-role { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-faint); } .final-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.04em; margin-top: 2px; } .final-cta-action { background: var(--bg-elev-1); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; } .final-cta-heading { font-family: var(--font-sans); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; } .final-cta-subtext { font-family: var(--font-sans); font-size: 0.98rem; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: none; } .final-cta-subtext strong { color: var(--text); font-weight: 600; } /* .final-cta-button - usunięte, konsolidacja do .btn.btn-accent.btn-lg (core.css) */ .final-cta-guarantee { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); line-height: 1.7; letter-spacing: 0.02em; margin: 0; max-width: none; } /* ============================================================ AGENDA MODAL (modal z listą modułów akademii/szkoły) Uruchamiany przez .agenda-toggle[data-target="agenda-xxx"] ============================================================ */ .agenda-modal { position: fixed; inset: 0; z-index: 70; background: rgba(10, 10, 10, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.2s ease; } .agenda-modal.active { display: flex; opacity: 1; } .agenda-modal-content { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(10px); transition: transform 0.25s ease; } .agenda-modal.active .agenda-modal-content { transform: translateY(0); } .agenda-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); gap: 16px; } .agenda-modal-header h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin: 0; line-height: 1.2; } .agenda-modal-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--text-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .agenda-modal-close:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .agenda-modal-body { padding: 20px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .agenda-modal-stats { display: inline-block; align-self: flex-start; padding: 5px 12px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; } .agenda-modal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: agenda-item; } .agenda-modal-list li { counter-increment: agenda-item; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-sans); font-size: 0.92rem; color: var(--text); line-height: 1.4; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; transition: border-color 0.15s ease; } .agenda-modal-list li::before { content: counter(agenda-item, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; } .agenda-modal-list li:hover { border-color: var(--accent-line); } .agenda-modal-list li strong { font-family: var(--font-sans); font-weight: 500; color: var(--text); letter-spacing: -0.01em; } /* ============================================================ IS-* INLINE KLASY Z UPGRADE.HTML (shim v1 -> v2) Nadpisuje atrybuty z oryginalnych inline style ============================================================ */ /* is-0800670f = hero-eyebrow override (background/padding) */ .is-0800670f { display: inline-flex; align-self: flex-start; } /* is-00c2d8b2 = mała tekstowa note pod hero CTA */ .is-00c2d8b2 { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.02em; margin: 0; max-width: none; } /* is-78107b88 = hero-social-proof wrapper */ .is-78107b88 { margin-top: 18px; } /* is-9f907490 = avatary + tekst stack */ .is-9f907490 { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* is-b92078fd = pierwszy avatar */ .is-b92078fd { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); margin-left: 0; position: relative; z-index: 3; } /* is-c368f345 = kolejne avatary (nakładają się) */ .is-c368f345 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); margin-left: -10px; position: relative; } /* is-11c66f43 = text "515 uczestników zbudowało karierę" */ .is-11c66f43 { font-family: var(--font-sans); font-size: 0.86rem; color: var(--text-dim); line-height: 1.4; padding-left: 6px; } .is-778ca662 { color: var(--text); font-weight: 600; } /* is-d7ef5751 = "JAPONSKA MADROSC" eyebrow w wrong-train */ .is-d7ef5751 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0; max-width: none; } /* is-b9fd24c1 = główny cytat w japanese-proverb - zastąpiony przez .quote-main */ .is-b9fd24c1 { /* styl dziedziczony z .quote-main */ } /* is-388bc716 = mały tekst "Zapisy zamknięte wiosna 2026" */ .is-388bc716 { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.02em; margin: 0; max-width: none; } /* is-d1690aa4 = mały tekst "Zapisy zamknięte • Wracamy wiosną 2026" w infinity-cta */ .is-d1690aa4, .is-aece923f { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.02em; margin: 0; max-width: none; } /* is-dd226e1a = "FREE" badge w nav (Darmowe Kredyty, Który Model AI) */ .is-dd226e1a { display: inline-flex; align-items: center; padding: 2px 6px; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; } /* is-2b9e5a3f = "Co dostaniesz" section wrapper */ .is-2b9e5a3f { padding: 80px 0; } .is-acc247d7 { font-family: var(--font-sans); font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; text-align: center; } .is-148c2862 { color: var(--text-dim); font-size: 1rem; line-height: 1.65; margin: 0 auto; max-width: 56ch; text-align: center; text-wrap: balance; } /* is-ad5ec589 = bonus-value-summary override */ .is-ad5ec589 { max-width: 1100px; margin: 40px auto 0; } /* is-283aae9c, is-6b71a206 = kategorie value-breakdown (warsztaty, akademie, szkoły, społeczność) */ .is-283aae9c, .is-6b71a206 { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; } .is-e29d4ac6 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 6px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; } .is-e29d4ac6 svg { width: 20px; height: 20px; stroke: var(--accent); } /* is-12582889 = price-explanation container */ .is-12582889 { text-align: center; padding: 24px 20px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .is-bdd90371 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0; } .is-1cf55be9 { font-family: var(--font-sans); font-size: 0.92rem; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: 56ch; } .is-ae444041 { margin-top: 6px; } /* is-accc6175 = wymagania techniczne section */ .is-accc6175 { padding: 56px 0; } .is-01b74ae4 { max-width: 720px; margin: 0 auto; padding: 28px 32px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; display: flex; flex-direction: column; gap: 10px; } .is-80c9a666 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; color: var(--text); letter-spacing: -0.015em; margin: 0; } .is-35412178 { font-family: var(--font-sans); font-size: 0.92rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: none; } .is-35412178 strong { color: var(--text); font-weight: 600; } /* is-2f872245 = enrollment-header-v2 override */ .is-2f872245 { max-width: 760px; margin: 0 auto; } /* is-bd8d102d = enrollment-title override */ .is-bd8d102d { font-weight: 600; } /* is-2a007670 = enrollment subtitle wrapper text */ .is-2a007670 { font-family: var(--font-sans); font-size: 1rem; color: var(--text-dim); line-height: 1.65; margin: 0 auto 10px; max-width: 58ch; text-wrap: balance; } /* is-6d1dc3ae = enrollment CTA button spacing */ .is-6d1dc3ae { margin-top: 8px; } /* is-ac3ea016 = mały tekst pod enrollment CTA */ .is-ac3ea016 { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); line-height: 1.6; margin: 10px 0 0; max-width: none; letter-spacing: 0.02em; } /* is-4a69a12a = lista FAQ z harmonogramem dnia warsztatu */ .is-4a69a12a { margin: 10px 0; padding-left: 20px; list-style: none; display: flex; flex-direction: column; gap: 6px; } .is-4a69a12a li { position: relative; padding-left: 12px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; } .is-4a69a12a li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--accent); } /* is-24b9620e = "Jeśli nie możesz być na żywo..." info text */ .is-24b9620e { margin-top: 12px !important; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-faint); letter-spacing: 0.02em; } /* is-511ee66c = final-cta-guarantee override */ .is-511ee66c { line-height: 1.8; } /* ============================================================ STONE CHIP COLORS (per kamień - w v2 wszystko akcentowe) stone-chip.stone-soul, stone-chip.stone-mind itd. DNA v2: single accent, nie per-stone różne kolory ============================================================ */ .stone-chip.stone-soul, .stone-chip.stone-mind, .stone-chip.stone-reality, .stone-chip.stone-power, .stone-chip.stone-space, .stone-chip.stone-time { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } /* ============================================================ ANIMATIONS - upgrade-specific reduced-motion (status-dot, connection, console-body) Bazowe anim-on-scroll + fade-in-up w v2/product-page.css. ============================================================ */ @media (prefers-reduced-motion: reduce) { .status-dot, .connection, .console-body::after { animation: none; } } /* feedback widget override w v2/product-page.css */ /* ============================================================ MEDIA QUERIES - RESPONSIVE BREAKPOINTS ============================================================ */ /* Tablet large (1200px) - testimonial-wall-grid w v2/product-page.css */ @media (max-width: 1200px) { .value-breakdown { grid-template-columns: 1fr; } } /* Tablet (1024px) - testimonials-hero-grid w v2/product-page.css */ @media (max-width: 1024px) { .spire-mapping-grid { grid-template-columns: repeat(2, 1fr); } .infinity-stones-grid { grid-template-columns: repeat(2, 1fr); } .career-paths { grid-template-columns: repeat(2, 1fr); } .rules-grid { grid-template-columns: 1fr; } .final-cta-content { grid-template-columns: 1fr; } .value-card--with-image { grid-template-columns: 1fr; } } /* Tablet small (960px) */ @media (max-width: 960px) { .hero { padding: 56px 20px 40px; } .hero-container { grid-template-columns: 1fr; gap: 40px; text-align: center; } .hero-content { text-align: center; align-items: center; } .hero-description, .hero-subheadline { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .hero-visual { order: -1; } .stones-system { max-width: 340px; } .stone-node { width: 72px; height: 72px; } .stone-label { font-size: 0.6rem; } .stone-gem { width: 18px; height: 18px; } .wrong-train-content { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } .testimonial-wall-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile (820px) - wspólne breakpointy (section.section, testimonials-hero-grid, testimonials-hero-top, testimonial-wall-section, founder-*, ai-assistants-*, enrollment-section, schedule-*, segment-header, segment-week, live-status-bar, enrollment-header-v2, protocol-diagram) są w v2/product-page.css. Tu upgrade-specific extras. */ @media (max-width: 820px) { .final-cta-section, .wrong-train-section { padding: 56px 0; } .segment-week { gap: 10px; } .system-flow { grid-template-columns: 1fr; gap: 12px; } .flow-arrow { transform: rotate(90deg); } .usp-hero { grid-template-columns: 1fr; gap: 16px; padding: 24px 24px; } .bonus-value-summary { padding: 28px 22px; } .structure-step { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; } .framework-step { grid-template-columns: 1fr; gap: 14px; padding: 22px 22px; } .spire-mapping-grid { grid-template-columns: 1fr; } .career-paths { grid-template-columns: 1fr; } .final-testimonial-card { padding: 28px 24px; } .final-cta-action { padding: 32px 26px; } } /* Mobile small (720px) - barriers-panel, barrier-item, diagnostic-quiz-container, testimonial-wall-grid w v2/product-page.css. Tu upgrade-specific extras. */ @media (max-width: 720px) { .infinity-stones-grid { grid-template-columns: 1fr; } .harvard-insight-card { padding: 24px 22px; } .value-card--with-image { padding: 24px 22px; } .future-skills-cta { padding: 28px 22px; } .system-rules { padding: 24px 22px; } .enrollment-header-v2 { padding: 28px 22px; } .agenda-modal { padding: 14px; } .agenda-modal-header { padding: 16px 20px; } .agenda-modal-body { padding: 16px 20px 20px; } } /* Mobile tiny (540px) */ @media (max-width: 540px) { .hero-title { font-size: clamp(1.8rem, 7vw, 2.4rem); } .stones-system { max-width: 300px; } .stone-node { width: 64px; height: 64px; } }