:root { --cdp-public-bg: #0a1626; --cdp-public-panel: rgba(18, 39, 64, 0.54); --cdp-public-panel-soft: rgba(10, 22, 38, 0.44); --cdp-public-line: rgba(225, 234, 241, 0.12); --cdp-public-line-strong: rgba(22, 200, 238, 0.24); --cdp-public-text: #e1eaf1; --cdp-public-muted: rgba(225, 234, 241, 0.72); --cdp-public-soft: #4e6377; --cdp-public-cyan: #16c8ee; } body { font-family: var(--font-body); } .how-page, .pricing-page, .docs-page, #security, #enterprise-section, .detail-container, #faq, .founder-section { color: var(--cdp-public-text); font-family: var(--font-body); } .how-page::before, .pricing-page::before, .docs-page::before, #security::before, #enterprise-section::before, .detail-container::before, #faq::before, .founder-section::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 10%, rgba(22, 200, 238, 0.11), transparent 28%), radial-gradient(circle at 86% 24%, rgba(44, 99, 242, 0.09), transparent 26%), linear-gradient(180deg, rgba(10, 22, 38, 0.72), #07111f 72%); pointer-events: none; } .how-hero, .pricing-hero, .docs-shell, #security, #enterprise-section, .detail-container, #faq, .founder-section { padding-top: clamp(116px, 10vw, 154px) !important; } .how-page .hero-split, .pricing-page, .docs-shell, #enterprise-section, .detail-container, #faq, #security .security-container, .founder-section .about-shell { width: min(1180px, calc(100vw - 40px)); max-width: 1180px; margin-left: auto; margin-right: auto; } .pricing-page, .docs-shell, .detail-container, #enterprise-section, #faq { padding-left: 0 !important; padding-right: 0 !important; } .how-hero-title, .pricing-hero h1, .docs-hero h1, #security > h1, #enterprise-section > .page-title, .detail-container > .page-title, #faq > h2, .founder-section h2 { color: #f7fcff !important; font-family: var(--font-display) !important; font-weight: 900 !important; letter-spacing: 0 !important; line-height: 1.02 !important; text-shadow: none !important; } .how-hero-title span, .pricing-hero h1 span, .docs-hero h1 span, #security > h1 span, #enterprise-section > .page-title span, .detail-container > .page-title span, #faq > h2 span { color: var(--cdp-public-cyan); font-style: italic; } .cdp-eyebrow, .how-hero-kicker, .home-toc-title, .faq-toc-title, .pricing-tier, .docs-section-kicker, .pricing-badge, .cli-section-kicker, .cli-command-label, .how-step-label, .how-principle-index { font-family: var(--font-mono) !important; } .hero-subtitle, .how-section-copy, .pricing-lead, .docs-lead, .enterprise-intro, .summary, .security-note, .faq-lead, .about-lead { color: var(--cdp-public-muted) !important; font-family: var(--font-body) !important; line-height: 1.64; } .how-page .home-toc { top: 76px; z-index: 900; padding-top: 12px; } .how-page .home-toc-inner { gap: 8px 22px !important; padding: 12px 0 !important; border-width: 1px 0 !important; border-radius: 0 !important; border-color: rgba(159, 211, 230, 0.14) !important; background: linear-gradient(90deg, transparent, rgba(10, 22, 38, 0.54), transparent) !important; box-shadow: none !important; backdrop-filter: blur(12px); } .faq-toc, .pricing-section-tabs { border: 1px solid var(--cdp-public-line) !important; background: rgba(10, 22, 38, 0.72) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24) !important; backdrop-filter: blur(18px); } .how-page .home-toc-title { border-right-color: rgba(159, 211, 230, 0.18) !important; } .how-page .home-toc-link { padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(225, 234, 241, 0.72) !important; box-shadow: none !important; } .how-page .home-toc-link::after { display: block !important; left: 0; right: 0; bottom: 1px; height: 1px; background: linear-gradient(90deg, rgba(22, 200, 238, 0.95), rgba(22, 200, 238, 0.2)); opacity: 0; transform: scaleX(0.36); transform-origin: left; transition: opacity 0.18s ease, transform 0.18s ease; } .how-page .home-toc-link:hover, .how-page .home-toc-link.is-active { color: #f7fcff !important; background: transparent !important; border-color: transparent !important; transform: none !important; } .how-page .home-toc-link:hover::after, .how-page .home-toc-link.is-active::after { opacity: 1; transform: scaleX(1); } html[data-color-mode="light"] .how-page .home-toc-inner { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent) !important; } html[data-color-mode="light"] .how-page .home-toc-link { color: rgba(11, 18, 32, 0.68) !important; } html[data-color-mode="light"] .how-page .home-toc-link:hover, html[data-color-mode="light"] .how-page .home-toc-link.is-active { color: var(--cdp-public-ink) !important; } @media (max-width: 720px) { .how-page .home-toc { position: relative; top: auto; padding-top: 6px; } .how-page .home-toc-inner { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; overflow: visible; } .how-page .home-toc-title { flex: 0 0 100%; width: 100% !important; padding: 8px 0 10px !important; margin: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(159, 211, 230, 0.18) !important; } .how-page .home-toc-link { flex: 0 0 auto; white-space: nowrap; } } .pricing-section-tab { font-family: "IBM Plex Sans", Arial, sans-serif !important; } .pricing-section-tab.is-active { color: #061723 !important; background: linear-gradient(180deg, #52dff6, var(--cdp-public-cyan)) !important; box-shadow: 0 14px 34px rgba(22, 200, 238, 0.18) !important; } .docs-shell { min-height: 100vh; } .docs-hero { max-width: 760px; margin: 0 auto clamp(42px, 6vw, 72px); text-align: center; } .docs-hero h1 { margin: 12px 0 18px; font-size: clamp(3rem, 7vw, 5.8rem); } .docs-toc { position: sticky; top: 82px; z-index: 20; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; width: min(980px, 100%); margin: 0 auto clamp(34px, 4vw, 54px); padding: 12px 0; border-width: 1px 0; border-style: solid; border-color: rgba(159, 211, 230, 0.14); background: linear-gradient(90deg, transparent, rgba(10, 22, 38, 0.52), transparent); box-shadow: none; backdrop-filter: blur(12px); } .docs-toc a { position: relative; padding: 8px 0; border-radius: 0; color: rgba(225, 234, 241, 0.78); font-family: "IBM Plex Sans", Arial, sans-serif; font-weight: 740; text-decoration: none; } .docs-toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: linear-gradient(90deg, rgba(22, 200, 238, 0.95), rgba(22, 200, 238, 0.2)); opacity: 0; transform: scaleX(0.36); transform-origin: left; transition: opacity 0.18s ease, transform 0.18s ease; } .docs-toc a:hover, .docs-toc a:focus-visible { color: var(--cdp-public-cyan); background: transparent; outline: none; } .docs-toc a:hover::after, .docs-toc a:focus-visible::after { opacity: 1; transform: scaleX(1); } .docs-section { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr); gap: clamp(22px, 4vw, 56px); width: min(1080px, 100%); margin: 0 auto clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--cdp-public-line); scroll-margin-top: 128px; } .docs-section h2, .docs-next h2 { margin: 0; color: #f7fcff; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: 0; line-height: 1.04; } .docs-section-kicker { margin: 0 0 10px; color: var(--cdp-public-cyan); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; } .docs-card-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--cdp-public-line); border-bottom: 1px solid var(--cdp-public-line); } .docs-card, .docs-copy-block { border: 0; border-radius: 0; background: transparent; } .docs-card { display: grid; gap: 8px; min-height: auto; padding: 18px 0; border-bottom: 1px solid rgba(225, 234, 241, 0.09); color: var(--cdp-public-text); text-decoration: none; } .docs-card:last-child { border-bottom: 0; } .docs-card strong { color: #f7fcff; font-size: 1rem; line-height: 1.2; } .docs-card span, .docs-copy-block p { color: var(--cdp-public-muted); line-height: 1.55; } .docs-card:hover, .docs-card:focus-visible { color: var(--cdp-public-text); background: transparent; outline: none; } .docs-card:hover strong, .docs-card:focus-visible strong { color: var(--cdp-public-cyan); } .docs-copy-block { padding: 0 0 0 22px; border-left: 1px solid var(--cdp-public-line-strong); } .docs-copy-block p { margin: 0 0 18px; } .docs-format-row { display: flex; flex-wrap: wrap; gap: 8px; } .docs-format-row span { padding: 8px 10px; border: 1px solid rgba(22, 200, 238, 0.18); border-radius: 8px; color: var(--cdp-public-cyan); background: rgba(22, 200, 238, 0.055); font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; font-weight: 700; } .docs-next { width: min(1080px, 100%); margin: clamp(44px, 6vw, 74px) auto 0; padding: clamp(26px, 4vw, 42px); border: 1px solid var(--cdp-public-line); border-radius: 8px; background: rgba(10, 22, 38, 0.52); text-align: center; } .docs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; } .how-section, .pricing-offer-section, .enterprise-solution-block, .licence-text, .detail-card, .faq-section { scroll-margin-top: 112px; } .how-section-title, .pricing-section-header h2, .security-container h2, .enterprise-solution-block h3, .licence-text h3, .detail-card h3, .faq-cat-title { color: #f7fcff !important; font-family: "IBM Plex Sans", Arial, sans-serif !important; font-weight: 760 !important; letter-spacing: 0 !important; } .security-container h2, .detail-card h3, .enterprise-solution-block h3, .faq-cat-title { border-bottom: 1px solid var(--cdp-public-line) !important; padding-bottom: 12px; } .how-principle-item, .how-module-item, .how-step, .how-independent-item, .pricing-card, .mode-card, .licence-card, .detail-card, .faq-item, .security-note, .security-table-wrap { border: 1px solid var(--cdp-public-line) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(18, 39, 64, 0.48), rgba(10, 22, 38, 0.2)) !important; box-shadow: none !important; } .pricing-card, .detail-card { backdrop-filter: blur(14px); } .pricing-card:hover, .how-module-item:hover, .detail-card:hover, .faq-item:hover { border-color: var(--cdp-public-line-strong) !important; transform: translateY(-1px); } .how-page .how-principle-item, .how-page .how-module-item, .how-page .how-step, .how-page .how-independent-item { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .how-page .how-principle-item:hover, .how-page .how-module-item:hover, .how-page .how-step:hover, .how-page .how-independent-item:hover { transform: none !important; } .how-page .how-independent-item { padding: 0 0 0 18px !important; color: var(--cdp-public-text) !important; } .how-page .how-independent-item::before { position: absolute; left: 0; } .how-page .split-inner, .how-page .cta-inner { border-color: rgba(22, 200, 238, 0.12) !important; background: linear-gradient(180deg, rgba(10, 22, 38, 0.28), rgba(10, 22, 38, 0.08)) !important; box-shadow: none !important; } .pricing-grid { align-items: stretch; gap: clamp(18px, 2vw, 28px) !important; } .pricing-card { min-height: auto !important; padding: clamp(24px, 2vw, 34px) !important; } .pricing-card ul, .security-container ul, .detail-card ul { color: var(--cdp-public-muted); } .pricing-price, .price-amount { color: #f7fcff; font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; } .pricing-cta, .core-btn, .cta-btn.primary, .cta-btn.buy, .contact-btn { border-radius: 8px !important; background: linear-gradient(180deg, #52dff6, var(--cdp-public-cyan)) !important; color: #061723 !important; border: 1px solid rgba(22, 200, 238, 0.82) !important; box-shadow: 0 14px 34px rgba(22, 200, 238, 0.16) !important; font-family: "IBM Plex Sans", Arial, sans-serif !important; font-weight: 760 !important; } .cta-btn.secondary, .detail-actions .cta-btn.secondary, .cli-actions .cta-btn.secondary, .enterprise-solution-actions .cta-btn.secondary { border-radius: 8px !important; border: 1px solid rgba(22, 200, 238, 0.28) !important; background: rgba(22, 200, 238, 0.07) !important; color: var(--cdp-public-text) !important; box-shadow: none !important; } .security-container { max-width: 960px !important; } .security-container p, .security-container li, .detail-card p, .detail-card li, .enterprise-solution-block p, .enterprise-solution-block li, .faq-a { color: var(--cdp-public-muted) !important; } .security-table { font-family: "IBM Plex Sans", Arial, sans-serif; } .security-table th { color: var(--cdp-public-cyan) !important; font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace !important; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; } .cli-doc-command { border: 1px solid rgba(22, 200, 238, 0.18); border-radius: 8px; background: rgba(2, 8, 15, 0.72); overflow-x: auto; } .cli-doc-command code, .detail-card code { font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; } #faq-search { border-color: rgba(22, 200, 238, 0.24) !important; background: rgba(10, 22, 38, 0.72) !important; font-family: "IBM Plex Sans", Arial, sans-serif !important; } @media (max-width: 760px) { .how-page .hero-split, .pricing-page, .docs-shell, #enterprise-section, .detail-container, #faq, #security .security-container, .founder-section .about-shell { width: min(100% - 28px, 1180px); } .how-hero, .pricing-hero, .docs-shell, #security, #enterprise-section, .detail-container, #faq, .founder-section { padding-top: 84px !important; } .pricing-card, .detail-card { padding: 20px !important; } .docs-hero { text-align: left; } .docs-toc { position: static; justify-content: flex-start; overflow-x: auto; } .docs-toc a { white-space: nowrap; } .docs-section { grid-template-columns: 1fr; gap: 16px; } .docs-card-grid { grid-template-columns: 1fr; } .docs-card { min-height: auto; } }