/* ===================================================================== CloudBackend — site.css Content and page structure: cbe-site (cloudbackend.com package). UI, look and feel: the CloudBackend staging design system v1.0 (tokens.css + site.css from robinsbackend-2-web_staging). Light base by default, with the dark developer-platform theme opt-in on via the nav toggle. Brand blue #2563eb, slash accent #60a5fa, surfaces #070B14 / #0C1322 / #111A2E, hairlines in #94B2DE alpha. Space Grotesk (display) and JetBrains Mono are SELF-HOSTED from assets/fonts — no CDN, no third-party font or script, so the site still practises the sovereignty it sells. ===================================================================== */ /* ---------- Self-hosted typefaces (variable woff2) ---------- */ @font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/SpaceGrotesk-var.woff2") format("woff2-variations"), url("../assets/fonts/SpaceGrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/JetBrainsMono-var.woff2") format("woff2-variations"), url("../assets/fonts/JetBrainsMono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* ===================================================================== Design tokens ===================================================================== */ :root { /* Brand */ --cb-blue-300: #1d4ed8; --cb-blue-400: #2563eb; --cb-blue-500: #2563eb; --cb-blue-600: #1d4ed8; /* hover keeps white text at 6.7:1; the lift and glow carry the state change, because any lighter blue drops white below 4.5:1 (WCAG 1.4.3) */ --cb-blue-hover: #1d4ed8; --cb-slate-800: #1e293b; --cb-slash-outer: #4f8dd3; --cb-slash-mid: #d7ecff; --cb-cyan-400: #2563eb; --cb-green-400: #0d7047; --cb-amber-400: #92400e; --cb-red-400: #b32d2d; /* Neutrals (light base — the default theme) */ --cb-bg-0: #f7f8fa; --cb-bg-1: #f1f5f9; --cb-bg-2: #ffffff; --cb-bg-3: #f8fafc; --cb-line-1: #e6e8eb; --cb-line-2: #cbd5e1; /* Text */ --cb-text-1: #111827; --cb-text-2: #374151; --cb-text-3: #5b6472; --cb-text-invert: #FFFFFF; /* Semantic */ --cb-gradient-brand: linear-gradient(120deg, #2563eb 0%, #60a5fa 60%, #d7ecff 100%); --cb-gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,.12), transparent 60%); --cb-gradient-border: linear-gradient(140deg, rgba(96,165,250,.65), rgba(37,99,235,.12) 30%, rgba(215,236,255,.45) 60%, rgba(37,99,235,.25)); /* Type */ --cb-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --cb-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --cb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --cb-fs-900: clamp(2.6rem, 5.4vw, 4.2rem); --cb-fs-800: clamp(2rem, 3.6vw, 2.9rem); --cb-fs-700: 1.5rem; --cb-fs-600: 1.17rem; --cb-fs-500: 1rem; --cb-fs-400: 0.9rem; --cb-fs-300: 0.78rem; --cb-lh-tight: 1.12; --cb-lh-snug: 1.35; --cb-lh-body: 1.65; /* Spacing (4px scale) */ --cb-sp-1: 4px; --cb-sp-2: 8px; --cb-sp-3: 12px; --cb-sp-4: 16px; --cb-sp-5: 24px; --cb-sp-6: 32px; --cb-sp-7: 48px; --cb-sp-8: 64px; --cb-sp-9: 96px; --cb-sp-10: 128px; /* Radius */ --cb-r-sm: 6px; --cb-r-md: 10px; --cb-r-lg: 16px; --cb-r-pill: 999px; /* Elevation */ --cb-shadow-1: 0 1px 2px rgba(15,23,42,.04); --cb-shadow-2: 0 8px 28px rgba(15,23,42,.10); --cb-shadow-glow: 0 0 0 1px rgba(37,99,235,.25), 0 8px 32px rgba(37,99,235,.16); /* Motion */ --cb-ease: cubic-bezier(.22,.68,.4,1); --cb-dur-fast: 140ms; --cb-dur-med: 260ms; --cb-ring: 0 0 0 2px var(--cb-bg-0), 0 0 0 4px var(--cb-blue-400); /* Surfaces that stay dark in BOTH themes (code, console chrome, navy bands) */ --cb-code-bg: #0A0F1B; --cb-code-bar: #0C1322; --cb-code-line: rgba(148, 178, 222, 0.14); --cb-dark-bg: #070B14; --cb-dark-bg-2: #111A2E; --cb-dark-text-1: #EAF1FB; --cb-dark-text-2: #A8B8D0; --cb-dark-text-3: #8496b2; --nav-h: 64px; } /* ---------- Dark theme (opt-in via the nav toggle) ---------- */ html[data-theme="dark"] { --cb-bg-0: #070B14; --cb-bg-1: #0C1322; --cb-bg-2: #111A2E; --cb-bg-3: #18233C; --cb-line-1: rgba(148, 178, 222, 0.14); --cb-line-2: rgba(148, 178, 222, 0.28); --cb-text-1: #EAF1FB; --cb-text-2: #A8B8D0; --cb-text-3: #8496b2; --cb-text-invert: #06101F; --cb-blue-300: #93c5fd; --cb-blue-400: #60a5fa; --cb-cyan-400: #60a5fa; --cb-green-400: #3ECF8E; --cb-amber-400: #F5B83D; --cb-red-400: #F87171; --cb-blue-hover: #1d4ed8; --cb-gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,.30), transparent 60%); --cb-shadow-1: 0 1px 2px rgba(0,0,0,.4); --cb-shadow-2: 0 8px 28px rgba(2,8,20,.55); --cb-shadow-glow: 0 0 0 1px rgba(96,165,250,.35), 0 8px 40px rgba(37,99,235,.25); } /* ===================================================================== Base ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cb-bg-0); color: var(--cb-text-2); font-family: var(--cb-font-sans); font-size: var(--cb-fs-500); line-height: var(--cb-lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--cb-blue-400); text-decoration: none; } a:hover { color: var(--cb-blue-300); } h1, h2, h3, h4 { font-family: var(--cb-font-display); color: var(--cb-text-1); line-height: var(--cb-lh-tight); margin: 0 0 var(--cb-sp-4); font-weight: 700; letter-spacing: -0.02em; } h1 { font-size: var(--cb-fs-900); font-weight: 800; } h2 { font-size: var(--cb-fs-800); } h3 { font-size: var(--cb-fs-600); font-family: var(--cb-font-sans); } h4 { font-size: var(--cb-fs-500); font-family: var(--cb-font-sans); } p { margin: 0 0 var(--cb-sp-4); } strong { font-weight: 700; color: var(--cb-text-1); } .lead { font-size: var(--cb-fs-600); color: var(--cb-text-2); line-height: var(--cb-lh-snug); } .muted { color: var(--cb-text-3); } .small { font-size: var(--cb-fs-400); } code, kbd { font-family: var(--cb-font-mono); font-size: .9em; background: rgba(96,165,250,.12); color: var(--cb-blue-300); padding: .1em .4em; border-radius: var(--cb-r-sm); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* A skip link that is never visible helps nobody who can see. Reveal on focus. */ a.sr-only:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; clip: auto; overflow: visible; padding: 12px 18px; border-radius: var(--cb-r-md); background: var(--cb-blue-500); color: #fff; font: 600 var(--cb-fs-400)/1 var(--cb-font-sans); box-shadow: var(--cb-shadow-2); } /* Branded selection + scrollbar (dev-platform signature details) */ ::selection { background: rgba(37,99,235,.85); color: #fff; } * { scrollbar-width: thin; scrollbar-color: var(--cb-line-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--cb-line-2); border-radius: 8px; border: 2px solid var(--cb-bg-0); } ::-webkit-scrollbar-track { background: transparent; } /* Focus rings, token-driven */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--cb-ring); border-radius: var(--cb-r-sm); } @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid CanvasText; } } .btn:focus-visible { border-radius: var(--cb-r-md); } /* Gradient-border surface (masked; works on any radius) */ .g-border { border-color: transparent !important; position: relative; } .g-border::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--cb-gradient-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ===================================================================== Layout: container + bands ===================================================================== */ .container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--cb-sp-5); } .container--narrow { max-width: 860px; } .container--prose { max-width: 720px; } .band { padding: var(--cb-sp-9) 0; position: relative; } .band--tight { padding: var(--cb-sp-7) 0; } /* Alternating surface — the staging system's .section--alt */ .band--paper { background: var(--cb-bg-1); border-top: 1px solid var(--cb-line-1); border-bottom: 1px solid var(--cb-line-1); } /* Deep band: stays dark in both themes, like code and console chrome */ .band--navy { background: linear-gradient(180deg, var(--cb-dark-bg-2), var(--cb-dark-bg)); color: var(--cb-dark-text-2); border-top: 1px solid var(--cb-code-line); border-bottom: 1px solid var(--cb-code-line); overflow: hidden; } /* These bands stay dark in both themes, so they keep the dark accent values too — otherwise light-theme accents (dark amber, dark red) land on a dark ground. Surfaces and text already have explicit .band--navy rules below. */ .band--navy, .band--blue, .code, .win--dark, .measure { --cb-blue-300: #93c5fd; --cb-blue-400: #60a5fa; --cb-cyan-400: #60a5fa; --cb-green-400: #3ECF8E; --cb-amber-400: #F5B83D; --cb-red-400: #F87171; --cb-text-1: #EAF1FB; --cb-text-2: #A8B8D0; --cb-text-3: #8496b2; } .band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4, .band--navy strong { color: var(--cb-dark-text-1); } .band--navy .muted, .band--navy .lead { color: var(--cb-dark-text-3); } .band--navy .lead { color: var(--cb-dark-text-2); } .band--navy a:not(.btn) { color: #93c5fd; } .band--navy a:not(.btn):hover { color: #d7ecff; } .band--navy code { background: rgba(96,165,250,.16); color: #93c5fd; } /* Blue band = the staging system's CTA band, run full-bleed */ .band--blue { background: linear-gradient(180deg, var(--cb-dark-bg-2), var(--cb-dark-bg)); color: var(--cb-dark-text-2); border-top: 1px solid var(--cb-line-2); border-bottom: 1px solid var(--cb-line-2); position: relative; overflow: hidden; } .band--blue::before { content: ""; position: absolute; inset: 0; background: var(--cb-gradient-hero); pointer-events: none; } .band--blue > * { position: relative; } .band--blue h1, .band--blue h2, .band--blue h3 { color: var(--cb-dark-text-1); } .band--blue .lead, .band--blue .muted { color: var(--cb-dark-text-3); } .band--blue a:not(.btn) { color: #93c5fd; } .cta { padding: var(--cb-sp-8) 0; } .cta .container { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-sp-5); flex-wrap: wrap; } .cta h2 { font-size: var(--cb-fs-700); margin: 0; } /* The staging system is rectilinear: hairlines and grid, not curved bands */ .band--curve, .band--curve-top { border-radius: 0; } .section-head { max-width: 720px; margin: 0 auto var(--cb-sp-7); text-align: center; } .section-head--left { margin-left: 0; text-align: left; } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { margin-bottom: var(--cb-sp-4); } /* Overline / eyebrow — staging tracking, size and accent; mono kept because the content is technical (paths like singularity://database) */ .eyebrow { display: inline-flex; align-items: center; gap: var(--cb-sp-3); /* long path-like labels (tenant://Settings/Products/Priceplans) must break rather than run off a 320px viewport, where body{overflow-x:hidden} would silently clip them (WCAG 1.4.10) */ flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); font-weight: 500; letter-spacing: .08em; color: var(--cb-cyan-400); margin-bottom: var(--cb-sp-3); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; flex: none; } .band--navy .eyebrow, .band--blue .eyebrow { color: #60a5fa; } .section-head .eyebrow { justify-content: center; } .section-head--left .eyebrow { justify-content: flex-start; } /* ===================================================================== Buttons ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cb-sp-2); font: 600 var(--cb-fs-400)/1 var(--cb-font-sans); padding: 13px 22px; border-radius: var(--cb-r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all var(--cb-dur-fast) var(--cb-ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn--primary { background: var(--cb-blue-500); color: #fff; } .btn--primary:hover { background: var(--cb-blue-hover); color: #fff; box-shadow: var(--cb-shadow-glow); } .btn--ghost { background: transparent; color: var(--cb-text-1); border-color: var(--cb-line-2); } .btn--ghost:hover { border-color: var(--cb-blue-400); color: var(--cb-blue-300); background: rgba(96,165,250,.08); } .btn--white { background: var(--cb-blue-500); color: #fff; } .btn--white:hover { background: var(--cb-blue-hover); color: #fff; box-shadow: var(--cb-shadow-glow); } .btn--outline-white { background: transparent; color: var(--cb-dark-text-1); border-color: var(--cb-line-2); } .btn--outline-white:hover { border-color: var(--cb-blue-400); color: #93c5fd; background: rgba(96,165,250,.10); } .btn--sm { padding: 9px 15px; font-size: var(--cb-fs-300); } .btn--lg { padding: 16px 30px; font-size: var(--cb-fs-500); border-radius: 12px; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--cb-sp-4); align-items: center; } /* Arrow micro-interaction on the primary action */ .btn--primary .arr { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-6px); transition: all var(--cb-dur-med) var(--cb-ease); } .btn--primary:hover .arr { max-width: 1.2em; opacity: 1; transform: none; } /* Pills and tags */ .pill { display: inline-flex; align-items: center; gap: var(--cb-sp-2); font-size: var(--cb-fs-300); font-weight: 600; color: var(--cb-text-2); border: 1px solid var(--cb-line-2); border-radius: var(--cb-r-pill); padding: 6px 14px; background: rgba(255,255,255,.7); backdrop-filter: blur(6px); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cb-green-400); box-shadow: 0 0 8px var(--cb-green-400); } html[data-theme="dark"] .pill { background: rgba(17,26,46,.6); } .tag { display: inline-block; font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--cb-r-pill); background: rgba(96,165,250,.14); color: var(--cb-cyan-400); } .tag--ok { background: rgba(62,207,142,.15); color: var(--cb-green-400); } .tag--alpha { background: rgba(245,184,61,.15); color: var(--cb-amber-400); } .tag--road { background: var(--cb-bg-3); color: var(--cb-text-3); } .tag--white { background: rgba(255,255,255,.12); color: #fff; } .band--navy .tag, .band--blue .tag { background: rgba(96,165,250,.16); color: #93c5fd; } .band--navy .tag--ok { background: rgba(62,207,142,.16); color: #3ECF8E; } .band--navy .tag--alpha { background: rgba(245,184,61,.16); color: #F5B83D; } /* ===================================================================== Navigation — sticky, blurred, 64px, with theme toggle ===================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); background: rgba(247,250,253,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background var(--cb-dur-med) var(--cb-ease), border-color var(--cb-dur-med) var(--cb-ease), box-shadow var(--cb-dur-med) var(--cb-ease); } .nav.is-scrolled { background: rgba(247,250,253,.92); border-bottom-color: var(--cb-line-1); box-shadow: 0 8px 24px rgba(15,23,42,.06); } html[data-theme="dark"] .nav { background: rgba(7,11,20,.55); } html[data-theme="dark"] .nav.is-scrolled { background: rgba(7,11,20,.85); box-shadow: 0 8px 24px rgba(2,8,20,.35); } .nav .container { height: 100%; display: flex; align-items: center; gap: var(--cb-sp-6); } .nav__logo { display: flex; align-items: center; flex: none; } .nav__logo img { height: 20px; width: auto; } .nav__logo .logo-on-dark { display: none; } html[data-theme="dark"] .nav__logo .logo-on-light { display: none; } html[data-theme="dark"] .nav__logo .logo-on-dark { display: block; } .nav__menu { display: flex; align-items: center; gap: var(--cb-sp-2); list-style: none; margin: 0; padding: 0; } .nav__menu > li { position: relative; } .nav__menu a, .nav__menu button { font-family: var(--cb-font-sans); font-size: var(--cb-fs-400); font-weight: 500; white-space: nowrap; color: var(--cb-text-2); padding: 8px 10px; border-radius: var(--cb-r-sm); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color var(--cb-dur-fast) var(--cb-ease), background var(--cb-dur-fast) var(--cb-ease); } .nav__menu a:hover, .nav__menu button:hover, .nav__menu > li.open > button { color: var(--cb-text-1); background: rgba(96,165,250,.08); } .nav__menu a[aria-current="page"] { color: var(--cb-text-1); box-shadow: inset 0 -2px 0 var(--cb-blue-400); border-radius: 0; } .nav__menu .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--cb-dur-fast); opacity: .7; } .nav__menu > li.open .chev { transform: rotate(225deg) translateY(-2px); } .dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 320px; background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); box-shadow: var(--cb-shadow-2); padding: var(--cb-sp-2); display: none; } .nav__menu > li.open .dropdown { display: grid; } .dropdown a { color: var(--cb-text-1); display: block; padding: 10px 12px; border-radius: var(--cb-r-md); font-size: var(--cb-fs-400); font-weight: 600; } .dropdown a:hover { background: var(--cb-bg-3); color: var(--cb-text-1); } .dropdown a small { display: block; color: var(--cb-text-3); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 400; line-height: 1.45; margin-top: 2px; } .dropdown .path { display: block; font-family: var(--cb-font-mono); font-size: .7rem; color: var(--cb-cyan-400); font-weight: 500; } .nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--cb-sp-3); flex: none; } /* Icon buttons (theme toggle, burger) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--cb-r-md); background: transparent; border: 1px solid var(--cb-line-2); color: var(--cb-text-1); cursor: pointer; flex: none; transition: all var(--cb-dur-fast) var(--cb-ease); } .icon-btn:hover { border-color: var(--cb-blue-400); color: var(--cb-blue-300); } .icon-btn svg { width: 17px; height: 17px; } .nav__burger { display: none; flex-direction: column; gap: 4px; } .nav__burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--cb-dur-fast) var(--cb-ease), opacity var(--cb-dur-fast); } .nav-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-open .nav__burger span:nth-child(2) { opacity: 0; } .nav-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ===================================================================== Hero — grid overlay + aurora drift ===================================================================== */ .hero { position: relative; padding: calc(var(--nav-h) + var(--cb-sp-9)) 0 var(--cb-sp-9); background: var(--cb-bg-0); overflow: hidden; text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--cb-gradient-hero), linear-gradient(rgba(21,105,170,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21,105,170,.07) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); } .hero::after { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; background: radial-gradient(620px 300px at 22% 18%, rgba(37,99,235,.20), transparent 70%), radial-gradient(520px 280px at 78% 8%, rgba(96,165,250,.15), transparent 70%), radial-gradient(720px 320px at 55% 0%, rgba(215,236,255,.06), transparent 70%); animation: cb-aurora 16s ease-in-out infinite alternate; opacity: .45; } @keyframes cb-aurora { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 4%, 0) scale(1.07); } } html[data-theme="dark"] .hero::after { opacity: 1; } html[data-theme="dark"] .hero::before { background: var(--cb-gradient-hero), linear-gradient(rgba(148,178,222,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,178,222,.055) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; } .hero .container { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--cb-sp-8); align-items: center; } .hero__title { font-family: var(--cb-font-display); font-weight: 800; font-size: var(--cb-fs-900); line-height: var(--cb-lh-tight); color: var(--cb-text-1); margin: 0 auto var(--cb-sp-4); letter-spacing: -0.03em; max-width: 940px; } .hero__title em { font-style: normal; background: linear-gradient(120deg, #1d4ed8, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="dark"] .hero__title em { background: var(--cb-gradient-brand); -webkit-background-clip: text; background-clip: text; } .hero__sub { font-size: var(--cb-fs-600); color: var(--cb-text-2); max-width: 760px; margin: 0 auto var(--cb-sp-5); line-height: var(--cb-lh-snug); } .hero .btn-row { justify-content: center; } .hero__visual { max-width: 960px; margin: var(--cb-sp-7) auto 0; } .hero__note { margin-top: var(--cb-sp-5); font-size: var(--cb-fs-400); color: var(--cb-text-3); } .hero--simple .hero__title { font-size: var(--cb-fs-800); max-width: 900px; } .hero--simple { padding-bottom: var(--cb-sp-8); } /* Proof numbers — the one place the brand gradient carries a metric */ .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-sp-6); margin-top: var(--cb-sp-8); padding-top: var(--cb-sp-6); border-top: 1px solid var(--cb-line-1); text-align: left; } .proof__num { font-family: var(--cb-font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #1d4ed8, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="dark"] .proof__num { background: var(--cb-gradient-brand); -webkit-background-clip: text; background-clip: text; } .proof__label { margin-top: var(--cb-sp-2); color: var(--cb-text-3); font-size: var(--cb-fs-400); line-height: 1.55; } .proof__label a { color: var(--cb-blue-400); border-bottom: 1px solid var(--cb-line-2); } .proof__label a:hover { border-bottom-color: var(--cb-blue-400); } /* ===================================================================== Cards and grids ===================================================================== */ .grid { display: grid; gap: var(--cb-sp-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { position: relative; background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-6); display: flex; flex-direction: column; transition: border-color var(--cb-dur-med) var(--cb-ease), transform var(--cb-dur-med) var(--cb-ease), box-shadow var(--cb-dur-med) var(--cb-ease); } .card:hover { border-color: var(--cb-line-2); transform: translateY(-3px); box-shadow: var(--cb-shadow-2); } /* Cursor-tracking glow */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s var(--cb-ease); background: radial-gradient(230px 230px at var(--mx, 50%) var(--my, 50%), rgba(96,165,250,.14), transparent 70%); } .card:hover::before { opacity: 1; } .card > * { min-width: 0; position: relative; } .card h3 { font-size: var(--cb-fs-600); margin-bottom: var(--cb-sp-2); } .card p { margin: 0; color: var(--cb-text-3); font-size: var(--cb-fs-400); line-height: 1.6; } .card .path { font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); color: var(--cb-cyan-400); display: block; margin-bottom: var(--cb-sp-3); } .card--link { display: flex; color: inherit; } .card--link:hover { text-decoration: none; } .card__icon { width: 42px; height: 42px; border-radius: var(--cb-r-md); background: rgba(96,165,250,.14); color: var(--cb-blue-300); display: grid; place-items: center; margin-bottom: var(--cb-sp-4); flex: none; } .card__icon img { width: 24px; height: 24px; } .card__icon svg { width: 22px; height: 22px; } .card--flat { background: var(--cb-bg-1); } .card--flat:hover { transform: none; box-shadow: none; } .card--navy { background: rgba(96,165,250,.05); border-color: var(--cb-code-line); color: var(--cb-dark-text-2); } .card--navy h3 { color: var(--cb-dark-text-1); } .card--navy p { color: var(--cb-dark-text-3); } .card--navy:hover { border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.08); } .card--navy .card__icon { background: rgba(96,165,250,.14); color: #93c5fd; } .card > .tag, .card > .eyebrow { align-self: flex-start; } .card__art { height: 76px; display: flex; align-items: center; margin-bottom: var(--cb-sp-3); } .card__art img { height: 68px; width: auto; max-width: 140px; object-fit: contain; } .card .card__link, .benefit .how { margin-top: auto; margin-bottom: 0; padding-top: var(--cb-sp-3); font-size: var(--cb-fs-300); font-weight: 600; color: var(--cb-blue-400); } .card__tail { margin-top: auto; padding-top: var(--cb-sp-4); font-size: var(--cb-fs-300); font-weight: 600; color: var(--cb-blue-400); } .benefit { padding: var(--cb-sp-5) var(--cb-sp-6); } .benefit h3 { font-size: var(--cb-fs-600); margin-bottom: var(--cb-sp-2); } .benefit p { margin: 0; } .benefit .how { display: inline-block; align-self: flex-start; } .benefit .how::after { content: " \2192"; } /* Chips */ .chips { display: flex; flex-wrap: wrap; gap: var(--cb-sp-3); justify-content: center; margin-top: var(--cb-sp-5); } .chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--cb-line-1); background: rgba(255,255,255,.7); border-radius: var(--cb-r-pill); padding: 6px 13px; font-size: var(--cb-fs-300); font-weight: 500; color: var(--cb-text-3); } html[data-theme="dark"] .chip { background: rgba(17,26,46,.4); } .chip code { background: rgba(96,165,250,.14); color: var(--cb-blue-300); } .band--navy .chip { background: rgba(96,165,250,.06); border-color: var(--cb-code-line); color: var(--cb-dark-text-2); } .band--navy .chip code { background: rgba(96,165,250,.16); color: #93c5fd; } /* ===================================================================== Split layouts ===================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-sp-8); align-items: center; } .split > * { min-width: 0; } .split--rev > :first-child { order: 2; } .split--top { align-items: start; } .split h2 { font-size: var(--cb-fs-700); margin-bottom: var(--cb-sp-4); } .checks { list-style: none; padding: 0; margin: var(--cb-sp-4) 0 0; display: grid; gap: var(--cb-sp-3); } .checks li { position: relative; padding-left: 30px; color: var(--cb-text-2); font-size: var(--cb-fs-400); } .checks li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight: 700; display: grid; place-items: center; background: rgba(62,207,142,.15); color: var(--cb-green-400); } .checks li::after { content: none; } .band--navy .checks li { color: var(--cb-dark-text-2); } /* ===================================================================== Console window chrome (the product's own UI vocabulary) ===================================================================== */ .win { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; box-shadow: var(--cb-shadow-2); font-family: var(--cb-font-sans); } .win__bar { display: flex; align-items: center; gap: var(--cb-sp-3); padding: 12px 16px; background: var(--cb-bg-1); border-bottom: 1px solid var(--cb-line-1); color: var(--cb-text-2); } .win__bar .ico { width: 22px; height: 22px; color: var(--cb-blue-300); flex: none; } .win__title { font-size: var(--cb-fs-400); font-weight: 600; color: var(--cb-text-1); } .win__ctrls { margin-left: auto; display: flex; gap: 7px; } .win__note { margin-left: auto; font-family: var(--cb-font-mono); font-size: .78rem; color: var(--cb-blue-600); background: rgba(37,99,235,.10); padding: 2px 8px; border-radius: var(--cb-r-pill); } html[data-theme="dark"] .win__note { color: #93c5fd; background: rgba(96,165,250,.16); } .win__ctrls i { width: 10px; height: 10px; border-radius: 50%; background: var(--cb-line-2); display: block; border: 0; } .win__ctrls i:nth-child(1) { background: #FF5F57; } .win__ctrls i:nth-child(2) { background: #FEBC2E; } .win__ctrls i:nth-child(3) { background: #28C840; } .win__head { background: rgba(96,165,250,.10); color: var(--cb-text-1); padding: 10px 16px; font-size: var(--cb-fs-400); font-weight: 600; border-bottom: 1px solid var(--cb-line-1); } .win__body { padding: var(--cb-sp-4); } .win--dark { background: var(--cb-code-bg); border-color: var(--cb-code-line); } .win--dark .win__bar { background: var(--cb-code-bar); border-color: var(--cb-code-line); color: var(--cb-dark-text-2); } .win--dark .win__title { color: var(--cb-dark-text-1); } .win--dark .win__body { padding: 0; } /* Data grid inside a window */ .dgrid { width: 100%; border-collapse: collapse; font-size: var(--cb-fs-400); } .dgrid th { text-align: left; background: var(--cb-bg-1); color: var(--cb-text-3); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 9px 12px; border-bottom: 1px solid var(--cb-line-1); } .dgrid td { padding: 9px 12px; border-bottom: 1px solid var(--cb-line-1); color: var(--cb-text-2); font-family: var(--cb-font-mono); font-size: .78rem; white-space: nowrap; } .dgrid td:first-child { font-family: var(--cb-font-sans); font-size: var(--cb-fs-400); color: var(--cb-text-1); } .dgrid tr:last-child td { border-bottom: none; } .dgrid tr.is-new td { animation: rowIn .6s var(--cb-ease) both, rowFlash 1.6s ease-out; } .dgrid tr.is-pending td { opacity: .5; font-style: italic; } @keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes rowFlash { 0% { background: rgba(96,165,250,.18); } 100% { background: transparent; } } /* ===================================================================== Code blocks — dark in both themes ===================================================================== */ .code { background: var(--cb-code-bg); color: #C9D7EE; border: 1px solid var(--cb-code-line); border-radius: var(--cb-r-lg); padding: var(--cb-sp-5); font-family: var(--cb-font-mono); font-size: .82rem; line-height: 1.7; overflow-x: auto; max-width: 100%; position: relative; box-shadow: var(--cb-shadow-2); } .code pre { margin: 0; white-space: pre; } .code .t { color: #6FB6F2; } /* tag */ .code .a { color: #38D6D6; } /* attribute */ .code .s { color: #3ECF8E; } /* string */ .code .c { color: #7a8aa6; font-style: italic; } .code .k { color: #F5B83D; } /* keyword / path */ .code .p { color: #3ECF8E; } /* prompt */ .code__label { position: absolute; top: 10px; right: 14px; font-family: var(--cb-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #6E7F9B; } .code .cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--cb-blue-300); vertical-align: -2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .code--light { background: var(--cb-code-bg); color: #C9D7EE; border-color: var(--cb-code-line); box-shadow: none; } .code--light .t { color: #6FB6F2; } .code--light .a { color: #38D6D6; } .code--light .s { color: #3ECF8E; } .code--light .c { color: #7a8aa6; } /* ===================================================================== Tabs ===================================================================== */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--cb-sp-4); } .tabs button { font: 600 var(--cb-fs-300) var(--cb-font-sans); color: var(--cb-text-3); padding: 9px 16px; border-radius: var(--cb-r-md); border: 1px solid var(--cb-line-1); background: var(--cb-bg-2); cursor: pointer; transition: all var(--cb-dur-fast) var(--cb-ease); } .tabs button:hover { color: var(--cb-text-1); border-color: var(--cb-line-2); } .tabs button[aria-selected="true"] { background: rgba(96,165,250,.12); color: var(--cb-blue-300); border-color: var(--cb-blue-400); } .tabpanel[hidden] { display: none; } /* ===================================================================== Bind demo (signature) — declare, bind, share, watch it propagate ===================================================================== */ .bind { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--cb-sp-4); align-items: start; text-align: left; } .bind > * { min-width: 0; } .bind__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--cb-sp-4); flex-wrap: wrap; } .bind__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--cb-sp-2); flex-wrap: wrap; } .bind__steps li { display: flex; align-items: center; gap: var(--cb-sp-2); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 500; color: var(--cb-text-3); padding: 6px 14px 6px 6px; border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-pill); background: var(--cb-bg-2); transition: border-color var(--cb-dur-med) var(--cb-ease), color var(--cb-dur-med) var(--cb-ease); } .bind__steps li b { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--cb-bg-3); color: var(--cb-text-3); display: grid; place-items: center; font-family: var(--cb-font-mono); font-size: .68rem; font-weight: 500; transition: all var(--cb-dur-med); } .bind__steps li.is-active { border-color: var(--cb-blue-400); color: var(--cb-text-1); box-shadow: 0 0 0 3px rgba(96,165,250,.10); } .bind__steps li.is-active b { background: var(--cb-blue-500); color: #fff; } .bind__steps li.is-done { color: var(--cb-text-2); } .bind__steps li.is-done b { background: rgba(62,207,142,.18); color: var(--cb-green-400); } .bind__code .code { height: 330px; overflow: auto; font-size: .78rem; } .bind__code .code pre { padding-right: 90px; } .bind .win { min-height: 330px; position: relative; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--cb-ease), transform .5s var(--cb-ease); } .bind .win.is-on { opacity: 1; transform: none; } .bind .win .identity { margin-left: auto; font-family: var(--cb-font-mono); font-size: .7rem; color: var(--cb-blue-300); background: rgba(96,165,250,.14); padding: 3px 9px; border-radius: var(--cb-r-pill); } .bind__label { font-size: var(--cb-fs-400); font-weight: 600; color: var(--cb-text-1); margin-bottom: var(--cb-sp-2); } .win__lock { position: absolute; left: 0; right: 0; top: 47px; bottom: 0; background: rgba(241,245,249,.95); backdrop-filter: blur(2px); display: grid; place-items: center; text-align: center; color: var(--cb-text-3); font-family: var(--cb-font-sans); font-size: var(--cb-fs-400); padding: var(--cb-sp-5); transition: opacity .6s var(--cb-ease); } html[data-theme="dark"] .win__lock { background: rgba(12,19,34,.94); } .win__lock.is-off { opacity: 0; pointer-events: none; } .win__lock svg { width: 26px; height: 26px; margin: 0 auto var(--cb-sp-2); color: var(--cb-amber-400); } .bind__caption { grid-column: 1 / -1; margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-fs-500); font-weight: 500; color: var(--cb-text-1); min-height: 1.5em; } .bind .dgrid td { font-size: .72rem; padding: 8px 10px; } .bind .dgrid td:first-child { font-size: var(--cb-fs-300); } .bind .dgrid th { padding: 8px 10px; font-size: .64rem; } /* ===================================================================== Stack collapse demo — six invoices become one ===================================================================== */ .stack { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--cb-sp-6); align-items: center; max-width: 980px; margin: 0 auto; } .stack > * { min-width: 0; } .stack__left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-sp-3); } .stack__left .svc { overflow: hidden; flex-direction: column; align-items: flex-start; gap: 6px; } .svc { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-md); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: var(--cb-sp-3); transition: transform 1.6s cubic-bezier(.25,.8,.25,1), opacity 1.4s ease; } .svc.is-gone { transform: translateX(125%) scale(.5); opacity: 0; } .svc__head { display: flex; justify-content: space-between; align-items: center; gap: var(--cb-sp-3); flex-wrap: wrap; } .svc__name { font-family: var(--cb-font-sans); font-weight: 600; color: var(--cb-text-1); overflow-wrap: anywhere; } .svc__bill { font-family: var(--cb-font-mono); font-size: .7rem; white-space: nowrap; color: var(--cb-red-400); background: rgba(248,113,113,.12); padding: 3px 9px; border-radius: var(--cb-r-pill); } .slot { position: relative; border: 1px dashed transparent; border-radius: var(--cb-r-md); transition: border-color 1.2s; } .slot::before { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; padding: 0 16px; font-family: var(--cb-font-sans); font-size: var(--cb-fs-400); color: var(--cb-text-3); text-decoration: line-through; opacity: 0; transition: opacity 1.2s; } .slot.is-empty { border-color: var(--cb-line-2); } .slot.is-empty::before { opacity: 1; } .slot .svc { position: relative; z-index: 1; } .stack__arrow { width: 40px; height: 40px; color: var(--cb-blue-400); } .stack__right .svc { padding: var(--cb-sp-5); border-color: var(--cb-blue-400); box-shadow: var(--cb-shadow-glow); } .stack__right .svc--one { display: block; } .stack__right .svc__bill { color: var(--cb-green-400); background: rgba(62,207,142,.14); } .stack__right .svc__name { font-size: var(--cb-fs-600); } .stack__right .svc-list { list-style: none; padding: 0; margin: var(--cb-sp-4) 0 0; display: grid; gap: 5px; font-size: var(--cb-fs-400); color: var(--cb-text-3); } .stack__right .svc-list li { opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity .8s var(--cb-ease), transform .8s var(--cb-ease), visibility 0s linear .8s; } .stack__right .svc-list li.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } /* ===================================================================== Deployment board ===================================================================== */ .pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cb-sp-2); } .pipe__col { background: var(--cb-bg-1); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-md); min-height: 190px; padding: var(--cb-sp-3); position: relative; transition: border-color var(--cb-dur-med), box-shadow var(--cb-dur-med); } .pipe__col h4 { font-size: var(--cb-fs-400); color: var(--cb-text-1); margin: 0 0 4px; } .pipe__col small { display: block; color: var(--cb-text-3); font-size: .7rem; line-height: 1.4; margin-bottom: var(--cb-sp-3); } .pipe__col.is-active { border-color: var(--cb-blue-400); box-shadow: 0 0 0 3px rgba(96,165,250,.10); } .pipe__card { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-sm); padding: var(--cb-sp-3); font-size: var(--cb-fs-300); box-shadow: var(--cb-shadow-1); position: absolute; left: 12px; right: 12px; top: 62px; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--cb-ease), transform .35s var(--cb-ease); } .pipe__col.is-active .pipe__card { opacity: 1; transform: none; } .pipe__card .v { font-family: var(--cb-font-mono); color: var(--cb-text-2); } .badge { display: inline-block; font-family: var(--cb-font-mono); font-size: .62rem; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; } .badge--unchecked { background: rgba(245,184,61,.15); color: var(--cb-amber-400); } .badge--verified { background: rgba(62,207,142,.15); color: var(--cb-green-400); } .pipe__url { margin-top: var(--cb-sp-3); font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); color: var(--cb-blue-300); background: rgba(96,165,250,.10); border: 1px solid rgba(96,165,250,.25); padding: 9px 13px; border-radius: var(--cb-r-md); opacity: 0; transition: opacity .4s; } .pipe__url.is-on { opacity: 1; } /* ===================================================================== KPI tiles ===================================================================== */ .kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-sp-4); } .kpi__tile { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-5); } .kpi__tile small { display: block; color: var(--cb-text-3); font-size: var(--cb-fs-300); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--cb-sp-2); } .kpi__num { font-family: var(--cb-font-display); font-weight: 800; font-size: 2rem; color: var(--cb-text-1); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .kpi__delta { font-size: var(--cb-fs-300); color: var(--cb-green-400); margin-top: var(--cb-sp-2); font-family: var(--cb-font-mono); } .kpi__spark { width: 100%; height: 56px; margin-top: var(--cb-sp-3); } .kpi__spark path { fill: none; stroke: var(--cb-blue-400); stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 400; } .is-visible .kpi__spark path { animation: draw 1.6s var(--cb-ease) forwards .3s; } @keyframes draw { to { stroke-dashoffset: 0; } } .band--navy .kpi__tile { background: rgba(96,165,250,.05); border-color: var(--cb-code-line); } .band--navy .kpi__num { color: var(--cb-dark-text-1); } .band--navy .kpi__tile small { color: var(--cb-dark-text-3); } /* ===================================================================== Roles matrix ===================================================================== */ .matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--cb-fs-400); background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; } .matrix th, .matrix td { border-bottom: 1px solid var(--cb-line-1); padding: 11px 14px; text-align: center; } .matrix th { background: var(--cb-bg-1); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-text-3); } .matrix td:first-child, .matrix th:first-child { text-align: left; } .matrix td:first-child { color: var(--cb-text-1); font-weight: 500; } .matrix tr:last-child td { border-bottom: none; } .matrix .chk { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--cb-line-2); border-radius: 4px; position: relative; } .matrix .chk.on { border-color: var(--cb-blue-400); background: var(--cb-blue-500); } .matrix .chk.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } /* ===================================================================== ACL bits calculator ===================================================================== */ .acl { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-6); } .acl__bits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-sp-3); margin-bottom: var(--cb-sp-5); } .acl__bit { border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-md); padding: var(--cb-sp-4) var(--cb-sp-3); text-align: center; cursor: default; background: var(--cb-bg-1); color: var(--cb-text-3); font-family: var(--cb-font-sans); transition: background var(--cb-dur-med) var(--cb-ease), border-color var(--cb-dur-med) var(--cb-ease), color var(--cb-dur-med) var(--cb-ease); } .acl__bit:hover { transform: none; } .acl__bit b { display: block; font-family: var(--cb-font-display); font-size: 1.6rem; font-weight: 700; color: var(--cb-text-2); letter-spacing: -0.02em; } .acl__bit span { font-size: var(--cb-fs-300); } .acl__bit.is-on { background: rgba(96,165,250,.14); border-color: var(--cb-blue-400); color: var(--cb-blue-300); } .acl__bit.is-on b { color: var(--cb-blue-300); } .acl__sum { display: flex; align-items: baseline; gap: var(--cb-sp-4); flex-wrap: wrap; } .acl__sum .n { font-family: var(--cb-font-display); font-weight: 800; font-size: 2.6rem; color: var(--cb-text-1); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .acl__sum .name { font-family: var(--cb-font-mono); font-size: var(--cb-fs-400); color: var(--cb-blue-300); } .acl .code { margin-top: var(--cb-sp-4); box-shadow: none; } /* ===================================================================== Scopes demo — tenant:// cannot read home:// ===================================================================== */ .scopes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-sp-6); } .scope { border-radius: var(--cb-r-lg); padding: var(--cb-sp-5); border: 1px solid var(--cb-line-2); background: var(--cb-bg-2); position: relative; min-height: 150px; } .scope--tenant { border-color: var(--cb-blue-400); background: rgba(96,165,250,.07); } .scope h4 { font-family: var(--cb-font-mono); font-weight: 500; color: var(--cb-blue-300); margin: 0 0 var(--cb-sp-2); font-size: var(--cb-fs-400); } .scope p { font-size: var(--cb-fs-400); color: var(--cb-text-3); margin: 0; } .scope .lockbadge { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; color: var(--cb-amber-400); } .probe { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cb-red-400); box-shadow: 0 0 12px rgba(248,113,113,.6); transform: translate(-50%, -50%); opacity: 0; } .is-visible .probe { animation: probe 3.2s ease-in-out infinite 1s; } @keyframes probe { 0% { opacity: 0; transform: translate(-260px, -50%); } 15% { opacity: 1; } 45% { transform: translate(60px, -50%); } 55% { transform: translate(-40px, -50%) scale(1.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-260px, -50%); } } .scope--home .wall { position: absolute; left: -3px; top: 20%; bottom: 20%; width: 3px; background: var(--cb-blue-400); border-radius: 2px; } .is-visible .scope--home .wall { animation: wallHit 3.2s ease-in-out infinite 1s; } @keyframes wallHit { 50% { box-shadow: 0 0 0 6px rgba(248,113,113,.25); } 60% { box-shadow: none; } } /* ===================================================================== Offline / local-first demo ===================================================================== */ .offline { display: grid; grid-template-columns: 220px 1fr; gap: var(--cb-sp-6); align-items: start; } .offline > * { min-width: 0; } .phone { width: 220px; border: 8px solid var(--cb-bg-3); border-radius: 28px; background: var(--cb-bg-2); overflow: hidden; box-shadow: var(--cb-shadow-2); } .phone__bar { display: flex; justify-content: space-between; padding: 9px 14px; font-family: var(--cb-font-mono); font-size: .68rem; background: var(--cb-bg-1); color: var(--cb-text-3); border-bottom: 1px solid var(--cb-line-1); } .phone__bar .net { color: var(--cb-green-400); transition: color .3s; } .phone.is-offline .phone__bar .net { color: var(--cb-red-400); } .phone__list { list-style: none; margin: 0; padding: var(--cb-sp-3); min-height: 190px; font-size: var(--cb-fs-300); } .phone__list li { padding: 9px 11px; border-radius: var(--cb-r-sm); background: var(--cb-bg-1); margin-bottom: 6px; display: flex; justify-content: space-between; gap: var(--cb-sp-2); color: var(--cb-text-2); } .phone__list li.q { background: rgba(245,184,61,.12); } .phone__list li.q::after { content: "queued"; font-family: var(--cb-font-mono); font-size: .62rem; color: var(--cb-amber-400); } .phone__list li.s::after { content: "synced"; font-family: var(--cb-font-mono); font-size: .62rem; color: var(--cb-green-400); } .phone__add { margin: 0 var(--cb-sp-3) var(--cb-sp-3); } .offline__controls { display: flex; gap: var(--cb-sp-3); flex-wrap: wrap; margin-bottom: var(--cb-sp-4); } .offline__log { font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); color: var(--cb-text-3); margin-top: var(--cb-sp-3); min-height: 2.4em; } /* ===================================================================== Key demo — ciphertext travels, the key stays on the device ===================================================================== */ .keydemo { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) 200px; gap: var(--cb-sp-4); align-items: stretch; } .keydemo > * { min-width: 0; } .keydemo__node { display: flex; flex-direction: column; text-align: center; } .keydemo__node .box { flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-5) var(--cb-sp-3); position: relative; } .keydemo__node .box svg { width: 40px; height: 40px; margin: 0 auto var(--cb-sp-2); color: var(--cb-blue-300); } .keydemo__node .box .keyico { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; background: var(--cb-amber-400); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); } .keydemo__node .box .keyico svg { width: 17px; height: 17px; margin: 0; color: #2A1D00; } .keydemo__node small { display: block; margin-top: var(--cb-sp-2); color: var(--cb-text-3); font-size: var(--cb-fs-300); } .keydemo__wire { position: relative; height: 84px; align-self: center; } .keydemo__wire .line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--cb-line-2) 0 10px, transparent 10px 18px); } .keydemo__wire .pkt { position: absolute; top: 50%; left: 0; width: 34px; height: 22px; margin-top: -11px; border-radius: 5px; background: var(--cb-code-bg); border: 1px solid rgba(96,165,250,.35); color: #93c5fd; font-family: var(--cb-font-mono); font-size: .58rem; display: grid; place-items: center; opacity: 0; } .is-visible .keydemo__wire .pkt { animation: pkt 3s linear infinite; } .is-visible .keydemo__wire .pkt:nth-child(3) { animation-delay: 1s; } .is-visible .keydemo__wire .pkt:nth-child(4) { animation-delay: 2s; } @keyframes pkt { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 34px); opacity: 0; } } .keydemo__wire .lbl { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-family: var(--cb-font-mono); font-size: .66rem; line-height: 1.3; color: var(--cb-text-3); } .keydemo__wire .lbl2 { top: auto; bottom: 0; } .band--navy .keydemo__node .box { background: rgba(96,165,250,.05); border-color: var(--cb-code-line); } .band--navy .keydemo__node .box svg { color: #93c5fd; } .band--navy .keydemo__node small { color: var(--cb-dark-text-3); } .band--navy .keydemo__wire .lbl { color: var(--cb-dark-text-3); } /* ===================================================================== Pricing ===================================================================== */ .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-sp-5); align-items: stretch; } .plan { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-6); display: flex; flex-direction: column; position: relative; transition: border-color var(--cb-dur-med) var(--cb-ease), transform var(--cb-dur-med) var(--cb-ease), box-shadow var(--cb-dur-med) var(--cb-ease); } .plan:hover { border-color: var(--cb-line-2); transform: translateY(-3px); box-shadow: var(--cb-shadow-2); } .plan--featured { border-color: var(--cb-blue-500); box-shadow: var(--cb-shadow-glow); } .plan--featured::before { content: "Most teams start here"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 700; background: var(--cb-blue-500); color: #fff; padding: 4px 14px; border-radius: var(--cb-r-pill); white-space: nowrap; } .plan h3 { font-size: var(--cb-fs-600); margin-bottom: 4px; } .plan__ids { font-size: var(--cb-fs-400); color: var(--cb-text-3); } .plan__price { font-family: var(--cb-font-display); font-weight: 800; font-size: 2.4rem; color: var(--cb-text-1); margin: var(--cb-sp-4) 0 2px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .plan__price small { font-family: var(--cb-font-sans); font-size: var(--cb-fs-400); font-weight: 500; color: var(--cb-text-3); letter-spacing: 0; } .plan__mode { font-size: var(--cb-fs-300); color: var(--cb-text-3); margin-bottom: var(--cb-sp-5); } .plan ul { list-style: none; padding: 0; margin: 0 0 var(--cb-sp-5); display: grid; gap: var(--cb-sp-2); font-size: var(--cb-fs-400); } .plan ul li { padding-left: 26px; position: relative; color: var(--cb-text-2); } .plan ul li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; font-weight: 700; display: grid; place-items: center; background: rgba(62,207,142,.15); color: var(--cb-green-400); } .plan .btn { margin-top: auto; justify-content: center; } .pricechart { width: 100%; height: auto; } .pricechart .axis { stroke: var(--cb-line-1); stroke-width: 1; } .pricechart .lbl { font-family: var(--cb-font-mono); font-size: 11px; fill: var(--cb-text-3); } .pricechart .metered { fill: none; stroke: var(--cb-red-400); stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; } .pricechart .flat { fill: none; stroke: var(--cb-blue-400); stroke-width: 3; stroke-dasharray: 900; stroke-dashoffset: 900; } .is-visible .pricechart .metered { animation: draw 2.2s var(--cb-ease) forwards .2s; } .is-visible .pricechart .flat { animation: draw 1.2s var(--cb-ease) forwards .2s; } .bill { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cb-fs-400); background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; } .bill th, .bill td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--cb-line-1); } .bill th { background: var(--cb-bg-1); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-text-3); } .bill td { color: var(--cb-text-2); } .bill td:last-child, .bill th:last-child { text-align: right; font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); white-space: nowrap; font-variant-numeric: tabular-nums; } .bill tfoot td { font-weight: 700; color: var(--cb-text-1); background: rgba(96,165,250,.08); border-bottom: none; } /* ===================================================================== Comparison table ===================================================================== */ .cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cb-fs-400); background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; } .cmp th, .cmp td { border-bottom: 1px solid var(--cb-line-1); padding: 13px 16px; text-align: left; vertical-align: top; } .cmp th { background: var(--cb-bg-1); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-text-3); } .cmp td { color: var(--cb-text-2); } .cmp tr:last-child td { border-bottom: none; } .cmp td.yes { color: var(--cb-green-400); } .cmp td.no { color: var(--cb-text-3); } /* Measured table (on deep bands) */ .measure { width: 100%; max-width: 1040px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: rgba(96,165,250,.04); border: 1px solid var(--cb-code-line); border-radius: var(--cb-r-lg); overflow: hidden; color: var(--cb-dark-text-2); } .measure th, .measure td { padding: 14px 18px; border-bottom: 1px solid var(--cb-code-line); text-align: left; vertical-align: middle; } .measure tr:last-child td { border-bottom: none; } .measure th { font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; color: var(--cb-dark-text-3); letter-spacing: .1em; text-transform: uppercase; } .measure td.app { font-family: var(--cb-font-sans); font-weight: 600; color: var(--cb-dark-text-1); font-size: var(--cb-fs-500); white-space: nowrap; } .measure td.desc { color: var(--cb-dark-text-3); font-size: var(--cb-fs-400); } .measure td.num { font-family: var(--cb-font-display); font-weight: 700; font-size: 1.3rem; color: var(--cb-dark-text-1); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .measure td.num.big { color: #60a5fa; } .measure th.num { text-align: right; } /* ===================================================================== Numbered story (a real sequence, so the numbers stay) ===================================================================== */ .story { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-sp-5); counter-reset: step; } .story .card { position: relative; padding-top: var(--cb-sp-7); } .story .card::after { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: var(--cb-sp-6); width: 30px; height: 30px; border-radius: 50%; background: var(--cb-blue-500); color: #fff; font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); display: grid; place-items: center; } /* ===================================================================== People ===================================================================== */ .people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-sp-6); } .person { display: flex; gap: var(--cb-sp-4); align-items: flex-start; } .person img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--cb-line-2); } .person b { display: block; color: var(--cb-text-1); font-family: var(--cb-font-sans); font-size: var(--cb-fs-500); font-weight: 700; } .person small { display: block; color: var(--cb-cyan-400); font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); letter-spacing: .06em; margin-bottom: 4px; } .person p { font-size: var(--cb-fs-400); color: var(--cb-text-3); margin: 0; } .advisors { columns: 2; column-gap: var(--cb-sp-7); font-size: var(--cb-fs-400); color: var(--cb-text-2); } .advisors p { break-inside: avoid; margin-bottom: var(--cb-sp-3); } /* ===================================================================== Blog ===================================================================== */ .posts { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--cb-sp-5); } .posts > * { min-width: 0; } .post-card { display: block; color: inherit; background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; transition: transform var(--cb-dur-med) var(--cb-ease), border-color var(--cb-dur-med) var(--cb-ease), box-shadow var(--cb-dur-med) var(--cb-ease); } .post-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--cb-line-2); box-shadow: var(--cb-shadow-2); } .post-card__art { background: linear-gradient(160deg, var(--cb-bg-3), var(--cb-code-bg)); padding: var(--cb-sp-6); min-height: 200px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--cb-line-1); position: relative; overflow: hidden; } .post-card__art::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(37,99,235,.28), transparent 65%); } .post-card__art > * { position: relative; } .post-card__body { padding: var(--cb-sp-6); } .post-card__meta { font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); color: var(--cb-cyan-400); margin-bottom: var(--cb-sp-2); } .post-card h3 { margin-bottom: var(--cb-sp-2); font-size: var(--cb-fs-700); font-family: var(--cb-font-display); } .post-card p { color: var(--cb-text-3); font-size: var(--cb-fs-400); margin: 0; } .post-card--soon { opacity: .7; } .article { padding-top: var(--cb-sp-5); } .article__meta { font-family: var(--cb-font-mono); font-size: var(--cb-fs-300); color: var(--cb-cyan-400); margin-bottom: var(--cb-sp-4); } .article h1 { font-size: var(--cb-fs-800); } .article h2 { font-size: var(--cb-fs-700); margin-top: 2.2em; } .article h3 { font-size: var(--cb-fs-600); margin-top: 1.6em; } .article p, .article li { font-size: var(--cb-fs-500); line-height: var(--cb-lh-body); color: var(--cb-text-2); } .article blockquote { margin: 1.6em 0; padding: var(--cb-sp-5) var(--cb-sp-6); border-left: 2px solid var(--cb-blue-400); background: var(--cb-bg-2); border-radius: 0 var(--cb-r-md) var(--cb-r-md) 0; font-family: var(--cb-font-display); font-size: var(--cb-fs-600); color: var(--cb-text-1); } .article .aside { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-5); margin: 1.6em 0; font-size: var(--cb-fs-400); } .article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.4em 0; font-size: var(--cb-fs-400); background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); overflow: hidden; } .article th, .article td { border-bottom: 1px solid var(--cb-line-1); padding: 12px 14px; text-align: left; vertical-align: top; } .article tr:last-child td { border-bottom: none; } .article th { background: var(--cb-bg-1); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-text-3); } .article .sources { font-size: var(--cb-fs-400); color: var(--cb-text-3); } .article .sources li { margin-bottom: 6px; font-size: var(--cb-fs-400); } .progress { position: fixed; top: var(--nav-h); left: 0; height: 2px; width: 0; background: var(--cb-gradient-brand); z-index: 49; } .author { display: flex; gap: var(--cb-sp-4); align-items: center; margin-top: var(--cb-sp-8); padding-top: var(--cb-sp-5); border-top: 1px solid var(--cb-line-1); } .author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cb-line-2); } .author small { color: var(--cb-text-3); display: block; } /* ===================================================================== Docs ===================================================================== */ .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-sp-5); } .docs-grid .card { display: flex; flex-direction: column; min-height: 240px; } .sdk-links { display: flex; flex-wrap: wrap; gap: var(--cb-sp-3); } /* ===================================================================== FAQ / details ===================================================================== */ details { border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-md); padding: 0 var(--cb-sp-5); background: var(--cb-bg-2); margin-bottom: var(--cb-sp-2); transition: border-color var(--cb-dur-fast) var(--cb-ease); } details:hover { border-color: var(--cb-line-2); } details summary { cursor: pointer; padding: var(--cb-sp-4) 0; font-family: var(--cb-font-sans); font-size: var(--cb-fs-500); font-weight: 600; color: var(--cb-text-1); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--cb-sp-4); } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; font-family: var(--cb-font-mono); font-size: 1.2rem; color: var(--cb-blue-400); flex: none; } details[open] summary::after { content: "\2013"; } details p { padding-bottom: var(--cb-sp-4); margin: 0; color: var(--cb-text-3); font-size: var(--cb-fs-400); } .band--navy details { background: rgba(96,165,250,.05); border-color: var(--cb-code-line); } .band--navy details summary { color: var(--cb-dark-text-1); } .band--navy details p { color: var(--cb-dark-text-3); } /* ===================================================================== Callout ===================================================================== */ .callout { border-left: 2px solid var(--cb-blue-400); background: var(--cb-bg-2); border-radius: 0 var(--cb-r-md) var(--cb-r-md) 0; padding: var(--cb-sp-4) var(--cb-sp-5); font-size: var(--cb-fs-400); } .callout--warn { border-left-color: var(--cb-amber-400); } /* Logo strip */ .logos { display: flex; flex-wrap: wrap; gap: var(--cb-sp-6) var(--cb-sp-7); align-items: center; justify-content: center; opacity: .55; } .logos img { height: 32px; width: auto; filter: grayscale(1); } /* ===================================================================== Footer ===================================================================== */ .footer { background: var(--cb-bg-1); border-top: 1px solid var(--cb-line-1); color: var(--cb-text-2); padding: var(--cb-sp-8) 0 var(--cb-sp-6); font-size: var(--cb-fs-400); } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--cb-sp-6); padding-bottom: var(--cb-sp-6); } .footer__brand img { height: 22px; width: auto; margin-bottom: var(--cb-sp-3); } .footer__brand .logo-on-dark { display: none; } html[data-theme="dark"] .footer__brand .logo-on-light { display: none; } html[data-theme="dark"] .footer__brand .logo-on-dark { display: block; } .footer__brand p { color: var(--cb-text-3); font-size: var(--cb-fs-400); max-width: 380px; } .footer h4, .footer__heading { color: var(--cb-text-3); font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--cb-sp-3); } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer a { color: var(--cb-text-2); font-size: var(--cb-fs-400); } .footer a:hover { color: var(--cb-blue-300); } .footer__bot { display: flex; justify-content: space-between; align-items: center; gap: var(--cb-sp-4); flex-wrap: wrap; margin-top: var(--cb-sp-6); padding-top: var(--cb-sp-5); border-top: 1px solid var(--cb-line-1); font-size: var(--cb-fs-300); color: var(--cb-text-3); } .footer__legal { display: flex; gap: var(--cb-sp-4); } .footer__legal a { font-size: var(--cb-fs-300); } .footer__social { display: flex; gap: var(--cb-sp-4); } .footer__social img { width: 20px; height: 20px; opacity: .5; filter: invert(1) brightness(.4); transition: opacity var(--cb-dur-fast); } .footer__social a:hover img { opacity: 1; } html[data-theme="dark"] .footer__social img { filter: none; } /* ===================================================================== Motion — reveal, stagger, ambient ===================================================================== */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--cb-ease), transform .65s var(--cb-ease); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal="left"] { transform: translateX(-24px); } [data-reveal="right"] { transform: translateX(24px); } [data-reveal].is-visible { transform: none; } .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--cb-ease), transform .6s var(--cb-ease); } .stagger.is-visible > * { opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(1) { transition-delay: .04s; } .stagger.is-visible > *:nth-child(2) { transition-delay: .11s; } .stagger.is-visible > *:nth-child(3) { transition-delay: .18s; } .stagger.is-visible > *:nth-child(4) { transition-delay: .25s; } .stagger.is-visible > *:nth-child(5) { transition-delay: .32s; } .stagger.is-visible > *:nth-child(6) { transition-delay: .39s; } .stagger.is-visible > *:nth-child(7) { transition-delay: .46s; } .stagger.is-visible > *:nth-child(8) { transition-delay: .53s; } .stagger.is-visible > *:nth-child(9) { transition-delay: .60s; } .stagger.is-visible > *:nth-child(10) { transition-delay: .67s; } .stagger.is-visible > *:nth-child(11) { transition-delay: .74s; } .stagger.is-visible > *:nth-child(12) { transition-delay: .81s; } /* Ambient glow in deep bands — the staging system's aurora, held back */ .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .30; pointer-events: none; background: radial-gradient(circle, rgba(37,99,235,.75), rgba(96,165,250,.25) 60%, transparent 70%); } .orb--a { width: 420px; height: 420px; right: -120px; top: -140px; animation: orb 16s ease-in-out infinite alternate; } .orb--b { width: 300px; height: 300px; left: -100px; bottom: -120px; animation: orb 20s ease-in-out infinite alternate-reverse; } @keyframes orb { to { transform: translate(-40px, 30px) scale(1.08); } } .demo-note { text-align: center; margin-top: var(--cb-sp-3); color: var(--cb-text-3); } .grid > * { min-width: 0; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1024px) { .hero__grid, .split, .split--rev { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } .plans { grid-template-columns: repeat(2, 1fr); } .kpi { grid-template-columns: repeat(2, 1fr); } .docs-grid { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } .bind { grid-template-columns: 1fr 1fr; } .bind__code { grid-column: 1 / -1; } .stack { grid-template-columns: minmax(0, 1fr); } .stack__arrow { transform: rotate(90deg); margin: 0 auto; } .pipe { grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; } .keydemo { grid-template-columns: minmax(0, 1fr); } .keydemo__wire { height: 96px; } .posts { grid-template-columns: 1fr; } .people { grid-template-columns: 1fr 1fr; } .story { grid-template-columns: 1fr; } } /* Narrow-desktop nav: tighten the row so the inline menu still clears the actions at 1024px rather than sitting exactly on the overflow limit. The bar is position:fixed, so an overflow here is clipped silently. */ @media (min-width: 1024px) and (max-width: 1120px) { .nav .container { gap: var(--cb-sp-4); } .nav__menu { gap: 0; } .nav__menu a, .nav__menu button { padding: 8px 8px; } .nav__cta { gap: var(--cb-sp-2); } } @media (max-width: 1023px) { .nav .container { gap: var(--cb-sp-3); } .nav__menu { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--cb-bg-1); border-bottom: 1px solid var(--cb-line-1); box-shadow: var(--cb-shadow-2); flex-direction: column; align-items: stretch; gap: 0; padding: var(--cb-sp-3) var(--cb-sp-5) var(--cb-sp-5); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .nav-open .nav__menu { display: flex; } .nav__menu > li { border-bottom: 1px solid var(--cb-line-1); } .nav__menu a, .nav__menu button { width: 100%; justify-content: space-between; padding: 13px 4px; font-size: var(--cb-fs-500); } .dropdown { position: static; box-shadow: none; background: transparent; border: 0; border-radius: 0; margin: 0 0 var(--cb-sp-3); min-width: 0; padding: 0; } .dropdown a { padding: 11px 12px; background: var(--cb-bg-2); border-radius: var(--cb-r-md); margin-bottom: 6px; } .nav__burger { display: inline-flex; } .nav__cta .btn--ghost { display: none; } } @media (max-width: 860px) { .band { padding: var(--cb-sp-8) 0; } .band--tight { padding: var(--cb-sp-6) 0; } .btn { white-space: normal; text-align: center; } .measure td.desc, .measure th:nth-child(2) { display: none; } .measure td.app { white-space: normal; } .hero { padding-top: calc(var(--nav-h) + var(--cb-sp-7)); } .proof { grid-template-columns: 1fr; gap: var(--cb-sp-5); } .grid--2, .grid--3, .grid--4, .plans, .kpi, .docs-grid, .footer__top, .people, .scopes, .stack__left, .acl__bits, .bind { grid-template-columns: 1fr; } .offline { grid-template-columns: 1fr; } .advisors { columns: 1; } .cta .container { justify-content: flex-start; } } @media (max-width: 600px) { /* Keep logo, theme toggle, primary action and burger all on one row */ .nav .container { gap: var(--cb-sp-2); padding: 0 var(--cb-sp-4); } .nav__logo img { height: 15px; } .nav__cta { gap: 6px; } .nav__cta .btn { padding: 8px 10px; font-size: .7rem; } .nav__cta .btn--primary .arr { display: none; } .icon-btn { width: 32px; height: 32px; } .icon-btn svg { width: 15px; height: 15px; } .nav__burger span { width: 14px; } .container { padding: 0 var(--cb-sp-4); } } @media (max-width: 380px) { /* Below this the wordmark and the action cannot share a row */ .nav__cta .btn--primary { display: none; } } /* ===================================================================== Reduced motion — render final states, animate nothing ===================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } [data-reveal], .stagger > *, .stack__right .svc-list li { opacity: 1; visibility: visible; transform: none; } .orb, .hero::after { display: none; } .card, .btn, .plan { transition: none; } } /* ===================================================================== Refinements ===================================================================== */ /* Long prices ("€9 999 / month, from") wrap as a unit instead of breaking */ .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; } .plan__price small { line-height: 1.4; } /* Product screenshots and photographs are light-UI assets on a dark page: seat them in the surface with a hairline and the card radius */ .hero__visual > img, .split > img, .split > div > img:not(.card__icon img), .win__body > img, .card__art + img { border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); box-shadow: var(--cb-shadow-2); } .win__body > img { border-radius: var(--cb-r-md); box-shadow: none; } /* The access lock reads as an opaque panel, not a wash */ .win__lock { background: rgba(241,245,249,.98); } html[data-theme="dark"] .win__lock { background: rgba(12,19,34,.97); } /* Reading-progress bar sits below the nav hairline */ .progress { top: var(--nav-h); } /* An odd last card fills its row instead of leaving a hole beside it */ @media (min-width: 861px) { .grid--2 > *:last-child:nth-child(odd) { grid-column: span 2; } } /* ===================================================================== Legal documents — terms, privacy, cookies Two columns: a sticky contents rail and a prose column, in the same card/hairline language as the rest of the site. ===================================================================== */ .legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--cb-sp-8); align-items: start; } .legal > * { min-width: 0; } .legal__side { position: sticky; top: calc(var(--nav-h) + var(--cb-sp-5)); } .legal__side-inner { background: var(--cb-bg-2); border: 1px solid var(--cb-line-1); border-radius: var(--cb-r-lg); padding: var(--cb-sp-5); max-height: calc(100vh - var(--nav-h) - var(--cb-sp-8)); overflow-y: auto; } .legal__side-title { font-family: var(--cb-font-sans); font-size: var(--cb-fs-300); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-text-3); margin: 0 0 var(--cb-sp-3); } .legal__nav { display: grid; gap: 2px; } .legal__nav a { display: block; padding: 7px 10px; border-radius: var(--cb-r-sm); font-size: var(--cb-fs-400); line-height: 1.4; color: var(--cb-text-2); border-left: 2px solid transparent; transition: color var(--cb-dur-fast) var(--cb-ease), background var(--cb-dur-fast) var(--cb-ease), border-color var(--cb-dur-fast) var(--cb-ease); } .legal__nav a:hover { background: rgba(96,165,250,.08); color: var(--cb-text-1); } .legal__nav a.is-current { color: var(--cb-blue-400); border-left-color: var(--cb-blue-400); background: rgba(96,165,250,.10); font-weight: 600; } .legal__main { max-width: 76ch; } .legal__main > p, .legal__main li { font-size: var(--cb-fs-500); line-height: var(--cb-lh-body); color: var(--cb-text-2); } .legal__main h2 { font-size: var(--cb-fs-700); margin: 2.2em 0 var(--cb-sp-4); scroll-margin-top: calc(var(--nav-h) + var(--cb-sp-5)); } .legal__main > h2:first-of-type { margin-top: 1.2em; } .legal__main .legal__doctitle { font-family: var(--cb-font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--cb-fs-700); color: var(--cb-text-1); margin: 0 0 var(--cb-sp-4); padding-bottom: var(--cb-sp-4); border-bottom: 1px solid var(--cb-line-1); } .legal__main .lead { color: var(--cb-text-1); margin-bottom: var(--cb-sp-5); } .legal__list { list-style: none; padding: 0; margin: 0 0 var(--cb-sp-5); display: grid; gap: var(--cb-sp-3); } .legal__list li { position: relative; padding-left: 22px; } .legal__list li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--cb-blue-400); } .legal__main a { border-bottom: 1px solid var(--cb-line-2); } .legal__main a:hover { border-bottom-color: var(--cb-blue-400); } @media (max-width: 1023px) { .legal { grid-template-columns: 1fr; gap: var(--cb-sp-6); } .legal__side { position: static; } .legal__side-inner { max-height: none; } .legal__nav { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .legal__nav { grid-template-columns: 1fr; } .legal__main { max-width: none; } } /* Cookie-consent withdrawal confirmation */ .legal__consent-ok[hidden] { display: none; } .legal__consent-ok { display: inline-flex; align-items: center; gap: var(--cb-sp-2); margin: var(--cb-sp-4) 0 0; padding: 10px 14px; border: 1px solid rgba(62,207,142,.35); border-radius: var(--cb-r-md); background: rgba(62,207,142,.10); color: var(--cb-green-400); font-size: var(--cb-fs-400); font-weight: 600; } .legal__consent-ok::before { content: "\2713"; font-weight: 700; } .btn:disabled { opacity: .55; cursor: default; pointer-events: none; } /* Inline links in prose are underlined, so they are distinguishable without colour (WCAG 1.4.1). Buttons, cards and nav links are excluded — they carry their own non-colour affordances. */ p a:not(.btn):not(.card__link), li a:not(.btn), .proof__label a, .demo-note a, .legal__main a, .article p a, .article li a, dd a, figcaption a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } p a:not(.btn):hover, li a:not(.btn):hover { text-decoration-thickness: 2px; } /* Navigation lists are not prose, so 1.4.1 does not apply — and these need higher specificity than the `li a` rule above to win. */ .nav li a, .nav__menu li a:not(.btn), .dropdown li a, .dropdown a, .footer li a:not(.btn), .footer p a, .footer__legal a, .footer__social a, .legal__nav a, .tabs a, .sdk-links a, .chips a { text-decoration: none; } .legal__main a { border-bottom: 0; } .proof__label a { border-bottom: 0; } /* Horizontally scrollable code blocks need keyboard access (WCAG 2.1.1) */ .code:focus-visible, .legal__side-inner:focus-visible { box-shadow: var(--cb-ring); } /* ===================================================================== Cookie consent Fixed to the bottom, but FIRST in the document so keyboard and screen reader users meet it before the page rather than after it. Starts [hidden]; script reveals it only when no choice has been recorded, so with JavaScript off (and therefore no analytics cookies) it never shows. ===================================================================== */ .consent[hidden] { display: none; } .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--cb-bg-2); border-top: 1px solid var(--cb-line-2); box-shadow: 0 -8px 28px rgba(2,8,20,.28); padding: var(--cb-sp-5) 0; } html[data-theme="dark"] .consent { box-shadow: 0 -8px 28px rgba(2,8,20,.55); } .consent__inner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--cb-sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--cb-sp-6); flex-wrap: wrap; } .consent__text { flex: 1 1 460px; min-width: 0; } .consent__text p { margin: 0; color: var(--cb-text-2); font-size: var(--cb-fs-400); line-height: 1.55; } .consent__text p + p { margin-top: 4px; color: var(--cb-text-3); } .consent__text strong { color: var(--cb-text-1); } .consent__actions { display: flex; gap: var(--cb-sp-3); flex: none; } .consent__actions .btn { min-height: 40px; padding-left: 22px; padding-right: 22px; } @media (max-width: 600px) { .consent { padding: var(--cb-sp-4) 0; } .consent__inner { gap: var(--cb-sp-4); } .consent__actions { width: 100%; } .consent__actions .btn { flex: 1; } }