/* ============================================================ Chartling Docs — Public Support Portal Matches the app's Ocean Deep palette and token system exactly. Dark mode via .dark class on (same mechanism as the app). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&display=swap'); /* ── Token system — mirrors src/styles.css exactly ── */ :root { --radius: 0.5rem; /* Backgrounds */ --background: oklch(0.99 0.005 240); --foreground: oklch(0.22 0.06 250); --card: oklch(1 0 0); --card-foreground: oklch(0.22 0.06 250); /* Brand */ --primary: oklch(0.38 0.09 240); --primary-foreground: oklch(0.99 0.005 240); --navy: oklch(0.22 0.06 250); --navy-foreground: oklch(0.99 0.005 240); --teal: oklch(0.60 0.10 200); --teal-foreground: oklch(0.99 0.005 240); --teal-light: oklch(0.95 0.025 220); /* UI tokens */ --secondary: oklch(0.96 0.012 235); --secondary-foreground: oklch(0.22 0.06 250); --muted: oklch(0.96 0.012 235); --muted-foreground: oklch(0.42 0.025 240); --accent: oklch(0.95 0.025 220); --accent-foreground: oklch(0.38 0.09 240); --destructive: oklch(0.58 0.22 27); --border: oklch(0.9 0.015 235); --input: oklch(0.9 0.015 235); --ring: oklch(0.38 0.09 240); /* Sidebar */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.22 0.06 250); --sidebar-primary: oklch(0.38 0.09 240); --sidebar-primary-foreground: oklch(0.99 0.005 240); --sidebar-accent: oklch(0.95 0.025 220); --sidebar-accent-foreground: oklch(0.38 0.09 240); --sidebar-border: oklch(0.9 0.015 235); /* Depth system */ --surface-1: oklch(0.965 0.012 235); --surface-2: oklch(0.99 0.006 235); --surface-3: oklch(1 0 0); --surface-sidebar: oklch(0.985 0.008 235); --hairline: oklch(0.88 0.015 235); --elevation-card: 0 1px 0 0 oklch(1 0 0 / 0.6) inset, 0 20px 50px -22px oklch(0.22 0.06 250 / 0.18), 0 8px 20px -12px oklch(0.22 0.06 250 / 0.10); --elevation-panel: 0 1px 0 0 oklch(1 0 0 / 0.5) inset, 0 30px 80px -30px oklch(0.22 0.06 250 / 0.20); --elevation-sidebar: 1px 0 0 0 oklch(0.22 0.06 250 / 0.04), 0 10px 40px -20px oklch(0.22 0.06 250 / 0.12); /* Warning / info callouts */ --warning-bg: oklch(0.98 0.04 90); --warning-border: oklch(0.80 0.12 80); --warning-text: oklch(0.42 0.12 70); --info-bg: oklch(0.97 0.025 230); --info-border: oklch(0.72 0.09 230); --info-text: oklch(0.38 0.09 240); --tip-bg: var(--teal-light); --tip-border: var(--teal); --tip-text: var(--navy); --verify-bg: oklch(0.98 0.03 50); --verify-border: oklch(0.75 0.14 50); --verify-text: oklch(0.40 0.14 40); /* Docs layout */ --nav-h: 56px; --sidebar-w: 248px; --content-w: 720px; } .dark { --background: oklch(0.18 0.04 250); --foreground: oklch(0.96 0.012 235); --card: oklch(0.22 0.04 250); --card-foreground: oklch(0.96 0.012 235); --primary: oklch(0.78 0.09 210); --primary-foreground: oklch(0.18 0.04 250); --navy: oklch(0.50 0.10 250); --navy-foreground: oklch(0.99 0.005 240); --teal: oklch(0.82 0.08 195); --teal-foreground: oklch(0.18 0.04 250); --teal-light: oklch(0.28 0.05 230); --secondary: oklch(0.26 0.04 250); --secondary-foreground: oklch(0.96 0.012 235); --muted: oklch(0.26 0.04 250); --muted-foreground: oklch(0.70 0.015 240); --accent: oklch(0.28 0.05 230); --accent-foreground: oklch(0.78 0.09 210); --destructive: oklch(0.70 0.19 22); --border: oklch(1 0 0 / 0.12); --input: oklch(1 0 0 / 0.15); --ring: oklch(0.78 0.09 210); --sidebar: oklch(0.22 0.04 250); --sidebar-foreground: oklch(0.96 0.012 235); --sidebar-primary: oklch(0.78 0.09 210); --sidebar-primary-foreground: oklch(0.18 0.04 250); --sidebar-accent: oklch(0.28 0.05 230); --sidebar-accent-foreground: oklch(0.78 0.09 210); --sidebar-border: oklch(1 0 0 / 0.10); --surface-1: oklch(0.18 0.04 250); --surface-2: oklch(0.22 0.04 250); --surface-3: oklch(0.26 0.04 250); --surface-sidebar: oklch(0.205 0.04 250); --hairline: oklch(1 0 0 / 0.08); --elevation-card: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 24px 60px -24px oklch(0 0 0 / 0.6), 0 8px 22px -14px oklch(0 0 0 / 0.5); --elevation-panel: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 40px 100px -36px oklch(0 0 0 / 0.65); --elevation-sidebar: 1px 0 0 0 oklch(1 0 0 / 0.04), 0 10px 40px -20px oklch(0 0 0 / 0.5); --warning-bg: oklch(0.26 0.06 80 / 0.5); --warning-border: oklch(0.65 0.14 75 / 0.5); --warning-text: oklch(0.82 0.13 75); --info-bg: oklch(0.26 0.05 230 / 0.5); --info-border: oklch(0.60 0.09 230 / 0.6); --info-text: oklch(0.78 0.09 210); --tip-bg: oklch(0.28 0.05 220 / 0.6); --tip-border: oklch(0.82 0.08 195 / 0.5); --tip-text: oklch(0.82 0.08 195); --verify-bg: oklch(0.26 0.06 50 / 0.5); --verify-border: oklch(0.65 0.14 50 / 0.5); --verify-text: oklch(0.80 0.12 50); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; color-scheme: light; } html.dark { color-scheme: dark; } body { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.65; background: var(--surface-1); color: var(--foreground); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── Top navigation ── */ .docs-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--navy); border-bottom: 1px solid oklch(1 0 0 / 0.08); display: flex; align-items: center; } .dark .docs-nav { background: var(--surface-2); border-bottom-color: var(--hairline); } .nav-inner { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: calc(var(--sidebar-w) + var(--content-w) + 6rem); padding: 0 1.25rem; margin: 0 auto; } .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; margin-right: 0.25rem; } .nav-logo-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--teal); flex-shrink: 0; display: grid; place-items: center; } .nav-logo-text { font-family: 'Space Grotesk', sans-serif; font-size: 0.9375rem; font-weight: 600; color: oklch(1 0 0); letter-spacing: -0.01em; white-space: nowrap; } .nav-logo-suffix { font-weight: 400; opacity: 0.55; margin-left: 0.25rem; } /* Audience / product switcher */ .nav-switcher { display: flex; background: oklch(1 0 0 / 0.10); border: 1px solid oklch(1 0 0 / 0.12); border-radius: calc(var(--radius) - 1px); padding: 2px; gap: 2px; flex-shrink: 0; } .dark .nav-switcher { background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.08); } .nav-switch { font-family: 'Space Grotesk', sans-serif; font-size: 0.8125rem; font-weight: 500; color: oklch(1 0 0 / 0.65); text-decoration: none; padding: 0.25rem 0.75rem; border-radius: calc(var(--radius) - 3px); white-space: nowrap; transition: background 0.12s, color 0.12s; line-height: 1.4; } .nav-switch:hover { color: oklch(1 0 0 / 0.9); background: oklch(1 0 0 / 0.08); } .nav-switch.active { background: var(--teal); color: var(--navy); font-weight: 600; } .dark .nav-switch.active { background: var(--teal); color: oklch(0.18 0.04 250); } /* Search hint */ .nav-search { margin-left: auto; font-size: 0.8125rem; color: oklch(1 0 0 / 0.4); white-space: nowrap; flex-shrink: 0; } .nav-search kbd { display: inline-block; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.18); border-radius: 3px; padding: 0.05em 0.4em; font-size: 0.75rem; font-family: monospace; color: oklch(1 0 0 / 0.65); } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; gap: 1px; background: oklch(1 0 0 / 0.10); border: 1px solid oklch(1 0 0 / 0.12); border-radius: var(--radius); padding: 2px; flex-shrink: 0; } .dark .theme-toggle { background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.08); } .theme-btn { background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: calc(var(--radius) - 3px); font-size: 0.75rem; color: oklch(1 0 0 / 0.5); transition: background 0.1s, color 0.1s; line-height: 1; } .theme-btn:hover { color: oklch(1 0 0 / 0.85); } .theme-btn.active { background: oklch(1 0 0 / 0.15); color: oklch(1 0 0); } /* ── Page layout ── */ .docs-layout { display: flex; max-width: calc(var(--sidebar-w) + var(--content-w) + 6rem); margin: 0 auto; min-height: calc(100vh - var(--nav-h)); } /* ── Sidebar ── */ .docs-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface-sidebar); border-right: 1px solid var(--hairline); box-shadow: var(--elevation-sidebar); padding: 1.5rem 0 3rem; position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar-group { margin-bottom: 1.5rem; } .sidebar-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-foreground); padding: 0 1rem; margin-bottom: 0.25rem; display: block; } .sidebar-nav { list-style: none; padding: 0 0.5rem; } .sidebar-nav li { margin: 0; } .sidebar-link { display: block; font-size: 0.875rem; color: var(--sidebar-foreground); opacity: 0.75; text-decoration: none; padding: 0.3125rem 0.625rem; border-radius: var(--radius-sm, calc(var(--radius) - 4px)); transition: background 0.1s, color 0.1s, opacity 0.1s; line-height: 1.45; } .sidebar-link:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); opacity: 1; } .sidebar-link.active { background: var(--accent); color: var(--primary); opacity: 1; font-weight: 500; } .sidebar-divider { border: none; border-top: 1px solid var(--hairline); margin: 1rem 1rem; } /* ── Main content ── */ .docs-content { flex: 1; min-width: 0; padding: 2.25rem 2.75rem 5rem; max-width: var(--content-w); } /* ── Breadcrumb ── */ .breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted-foreground); margin-bottom: 1.25rem; flex-wrap: wrap; } .breadcrumb a { color: var(--muted-foreground); text-decoration: none; transition: color 0.1s; } .breadcrumb a:hover { color: var(--teal); } /* ── Page header ── */ .page-header { margin-bottom: 1.5rem; } .page-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.875rem; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 0.5rem; } .page-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); } .audience-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 99px; padding: 0.125rem 0.5rem; border: 1px solid; } .badge-clinic { background: var(--accent); color: var(--primary); border-color: color-mix(in oklch, var(--primary) 20%, transparent); } .badge-portal { background: oklch(0.95 0.03 160); color: oklch(0.35 0.10 160); border-color: oklch(0.75 0.10 160 / 0.4); } .badge-portal.dark, .dark .badge-portal { background: oklch(0.28 0.05 160 / 0.5); color: oklch(0.72 0.10 160); } .badge-prospects { background: oklch(0.97 0.025 290); color: oklch(0.40 0.09 290); border-color: oklch(0.75 0.09 290 / 0.4); } .dark .badge-prospects { background: oklch(0.28 0.05 290 / 0.5); color: oklch(0.72 0.09 290); } /* ── On-this-page ── */ .on-this-page { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.875rem 1.125rem; margin-bottom: 2rem; } .on-this-page h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-foreground); margin-bottom: 0.5rem; } .on-this-page ul { list-style: none; } .on-this-page a { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; display: block; padding: 0.2rem 0; transition: color 0.1s; } .on-this-page a:hover { color: var(--teal); } /* ── Typography ── */ .docs-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3125rem; font-weight: 600; color: var(--foreground); letter-spacing: -0.015em; margin-top: 2.5rem; margin-bottom: 0.75rem; scroll-margin-top: calc(var(--nav-h) + 1rem); border-bottom: 1px solid var(--hairline); padding-bottom: 0.5rem; } .docs-content h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; color: var(--foreground); margin-top: 1.75rem; margin-bottom: 0.5rem; scroll-margin-top: calc(var(--nav-h) + 1rem); } .docs-content h4 { font-size: 0.9375rem; font-weight: 500; color: var(--foreground); margin-top: 1.25rem; margin-bottom: 0.375rem; } .docs-content p { margin-bottom: 1rem; color: var(--foreground); opacity: 0.88; } .docs-content ul, .docs-content ol { padding-left: 1.375rem; margin-bottom: 1rem; color: var(--foreground); opacity: 0.88; } .docs-content li { margin-bottom: 0.3rem; line-height: 1.6; } .docs-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in oklch, var(--teal) 40%, transparent); transition: text-decoration-color 0.1s; } .docs-content a:hover { text-decoration-color: var(--teal); } .docs-content strong { font-weight: 500; color: var(--foreground); opacity: 1; } .docs-content code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; font-size: 0.84em; background: var(--accent); border: 1px solid var(--border); border-radius: 3px; padding: 0.1em 0.35em; color: var(--accent-foreground); } .docs-content hr { border: none; border-top: 1px solid var(--hairline); margin: 2.5rem 0; } /* ── Tables ── */ .docs-content table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1.25rem 0 1.5rem; background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--elevation-card); } .docs-content th { font-family: 'Space Grotesk', sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); text-align: left; padding: 0.625rem 0.875rem; background: var(--surface-2); border-bottom: 1px solid var(--hairline); } .docs-content td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--hairline); color: var(--foreground); opacity: 0.88; vertical-align: top; line-height: 1.55; } .docs-content tr:last-child td { border-bottom: none; } /* ── Callouts ── */ .callout { border-radius: var(--radius); padding: 0.875rem 1.125rem; margin: 1.25rem 0; border-left: 3px solid; } .callout-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.3rem; } .callout p { margin: 0; font-size: 0.9rem; line-height: 1.55; opacity: 1; } .callout-tip { background: var(--tip-bg); border-color: var(--teal); } .callout-tip .callout-title, .callout-tip p { color: var(--tip-text); } .callout-info { background: var(--info-bg); border-color: var(--info-border); } .callout-info .callout-title, .callout-info p { color: var(--info-text); } .callout-warning { background: var(--warning-bg); border-color: var(--warning-border); } .callout-warning .callout-title, .callout-warning p { color: var(--warning-text); } .callout-verify { background: var(--verify-bg); border-color: var(--verify-border); } .callout-verify .callout-title, .callout-verify p { color: var(--verify-text); } /* ── Verify badge (inline) ── */ .verify-badge { display: inline-block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--verify-text); background: var(--verify-bg); border: 1px solid var(--verify-border); border-radius: 3px; padding: 0.05rem 0.375rem; vertical-align: middle; margin-left: 0.25rem; } /* ── Checklist ── */ .checklist { list-style: none; padding: 0; } .checklist li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .checklist-icon { flex-shrink: 0; width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; background: var(--accent); border: 1.5px solid var(--teal); border-radius: calc(var(--radius) - 2px); display: grid; place-items: center; } .checklist-icon svg { width: 10px; height: 10px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Step list ── */ .step-list { list-style: none; padding: 0; counter-reset: steps; } .step-list li { counter-increment: steps; display: flex; gap: 1rem; margin-bottom: 1rem; align-items: flex-start; } .step-list li::before { content: counter(steps); flex-shrink: 0; width: 1.625rem; height: 1.625rem; background: var(--primary); color: var(--primary-foreground); border-radius: 50%; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 700; margin-top: 0.05rem; } .step-list li > div > strong { display: block; font-weight: 500; color: var(--foreground); margin-bottom: 0.2rem; } /* ── Pricing cards ── */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.875rem; margin: 1.5rem 0; } .tier-card { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--elevation-card); position: relative; } .tier-card.featured { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--elevation-card); } .tier-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--teal); background: color-mix(in oklch, var(--teal) 12%, transparent); border-radius: 99px; padding: 0.125rem 0.5rem; margin-bottom: 0.75rem; border: 1px solid color-mix(in oklch, var(--teal) 25%, transparent); } .tier-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.2rem; } .tier-price { font-family: 'Space Grotesk', sans-serif; font-size: 1.625rem; font-weight: 700; color: var(--foreground); line-height: 1.1; } .tier-unit { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--muted-foreground); } .tier-tagline { font-size: 0.875rem; color: var(--muted-foreground); margin: 0.4rem 0 1rem; line-height: 1.45; } .tier-features { list-style: none; padding: 0; } .tier-features li { font-size: 0.875rem; color: var(--foreground); opacity: 0.85; padding: 0.25rem 0 0.25rem 1.125rem; position: relative; line-height: 1.45; } .tier-features li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; } /* ── FAQ list ── */ .faq-list { margin-top: 0.5rem; } .faq-item { border-bottom: 1px solid var(--hairline); padding: 1.25rem 0; } .faq-item:first-child { border-top: 1px solid var(--hairline); } .faq-q { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.625rem; line-height: 1.4; } .faq-a { font-size: 0.9375rem; color: var(--foreground); opacity: 0.85; line-height: 1.65; } .faq-a p { margin-bottom: 0.5rem; } .faq-a p:last-child { margin-bottom: 0; } .faq-a a { color: var(--teal); } /* ── Index landing ── */ .docs-hero { background: var(--navy); padding: 3.5rem 2rem; text-align: center; } .dark .docs-hero { background: var(--surface-2); border-bottom: 1px solid var(--hairline); } .docs-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; color: oklch(1 0 0); margin-bottom: 0.75rem; line-height: 1.15; } .docs-hero p { font-size: 1.0625rem; color: oklch(1 0 0 / 0.65); max-width: 480px; margin: 0 auto 1.5rem; line-height: 1.6; } .search-box { display: inline-flex; align-items: center; gap: 0.625rem; background: oklch(1 0 0 / 0.09); border: 1px solid oklch(1 0 0 / 0.15); border-radius: var(--radius); padding: 0.625rem 1.125rem; font-size: 0.9rem; color: oklch(1 0 0 / 0.65); } .search-box kbd { background: oklch(1 0 0 / 0.15); border: 1px solid oklch(1 0 0 / 0.2); border-radius: 3px; padding: 0.1rem 0.45rem; font-family: monospace; font-size: 0.8125rem; color: oklch(1 0 0 / 0.8); } /* Audience sections on landing */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); } .audience-col { padding: 2rem 1.75rem; border-right: 1px solid var(--hairline); } .audience-col:last-child { border-right: none; } .audience-col-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .audience-icon { width: 2rem; height: 2rem; border-radius: var(--radius); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; } .icon-clinic { background: var(--accent); } .icon-portal { background: oklch(0.94 0.04 160); } .icon-prospect { background: oklch(0.94 0.04 290); } .dark .icon-portal { background: oklch(0.28 0.05 160 / 0.5); } .dark .icon-prospect { background: oklch(0.28 0.05 290 / 0.5); } .audience-col-title { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; color: var(--foreground); line-height: 1.3; } .audience-col-desc { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; line-height: 1.5; } .doc-link-list { list-style: none; padding: 0; } .doc-link-list li { margin-bottom: 0.125rem; } .doc-link-list a { font-size: 0.875rem; color: var(--foreground); opacity: 0.75; text-decoration: none; display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0; transition: color 0.1s, opacity 0.1s; } .doc-link-list a::before { content: '→'; font-size: 0.75rem; color: var(--teal); opacity: 0.7; flex-shrink: 0; } .doc-link-list a:hover { color: var(--teal); opacity: 1; } /* Product sections on landing */ .product-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); } .product-col { padding: 2rem 1.75rem; border-right: 1px solid var(--hairline); } .product-col:last-child { border-right: none; } .product-col-logo { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; } .product-mark { width: 2rem; height: 2rem; border-radius: 6px; flex-shrink: 0; } .mark-chartling { background: oklch(0.22 0.06 250); } .product-col-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--foreground); } .product-col-desc { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; line-height: 1.5; } /* Shared section on landing */ .shared-section { background: var(--surface-2); border-top: 1px solid var(--hairline); padding: 1.5rem 1.75rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .shared-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); flex-shrink: 0; } .shared-links { display: flex; flex-wrap: wrap; gap: 0.375rem; } .shared-link { font-size: 0.875rem; color: var(--foreground); opacity: 0.8; text-decoration: none; background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.3125rem 0.75rem; transition: border-color 0.1s, color 0.1s, opacity 0.1s; } .shared-link:hover { border-color: var(--teal); color: var(--teal); opacity: 1; } /* ── Footer ── */ .docs-footer { border-top: 1px solid var(--hairline); padding: 1.25rem 1.75rem; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; background: var(--surface-2); } .docs-footer a { color: var(--muted-foreground); text-decoration: none; } .docs-footer a:hover { color: var(--teal); } /* ── Role cards (homepage) ── */ .role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.125rem; max-width: 1100px; margin: 2.5rem auto; padding: 0 1.75rem; } .role-card { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: calc(var(--radius) + 2px); padding: 1.375rem 1.5rem; box-shadow: var(--elevation-card); } .role-card-icon { width: 2rem; height: 2rem; border-radius: var(--radius); display: grid; place-items: center; font-size: 1.0625rem; margin-bottom: 0.875rem; } .icon-vet { background: var(--accent); } .icon-ops { background: oklch(0.94 0.04 160); } .icon-owner { background: oklch(0.94 0.04 50); } .icon-prospect { background: oklch(0.94 0.04 290); } .dark .icon-ops { background: oklch(0.28 0.05 160 / 0.5); } .dark .icon-owner { background: oklch(0.28 0.05 50 / 0.5); } .dark .icon-prospect { background: oklch(0.28 0.05 290 / 0.5); } .role-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; } .role-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .role-card ul a { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--foreground); opacity: 0.8; text-decoration: none; padding: 0.2rem 0; transition: color 0.1s, opacity 0.1s; } .role-card ul a::before { content: '→'; font-size: 0.7rem; color: var(--teal); flex-shrink: 0; } .role-card ul a:hover { color: var(--teal); opacity: 1; } /* ── All topics (homepage) ── */ .all-topics { max-width: 1100px; margin: 0 auto; padding: 2rem 1.75rem 3.5rem; border-top: 1px solid var(--hairline); } .all-topics-heading { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 1.25rem; } .all-topics-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; } .all-topics-list a { font-size: 0.9375rem; color: var(--foreground); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.1s, border-color 0.1s; } .all-topics-list a:hover { color: var(--teal); border-color: var(--teal); } /* ── Doc support CTA (homepage) ── */ .doc-support { background: var(--surface-1); border-top: 1px solid var(--hairline); padding: 2.5rem 1.75rem; text-align: center; } .doc-support p { font-size: 0.9375rem; color: var(--muted-foreground); margin-bottom: 0.625rem; line-height: 1.6; } .doc-support p:last-child { margin-bottom: 0; } .doc-support a { color: var(--teal); font-weight: 500; } /* ── Page tagline ── */ .page-tagline { font-size: 1.0625rem; color: var(--muted-foreground); margin: 0.125rem 0 2.25rem; line-height: 1.55; max-width: 52ch; } /* ── Page-bottom FAQ ── */ .page-faq { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); } .page-faq-heading { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0; } /* ── Related pages ── */ .related-pages { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); } .related-pages-heading { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.875rem; } .related-pages-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .related-pages-list a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--foreground); text-decoration: none; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.375rem 0.875rem; transition: border-color 0.1s, color 0.1s; } .related-pages-list a::after { content: '→'; font-size: 0.6875rem; color: var(--teal); } .related-pages-list a:hover { border-color: var(--teal); color: var(--teal); } /* ── Support bar (bottom of every doc page) ── */ .docs-support-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #0c2340; padding: 0.875rem 2rem; flex-wrap: wrap; } .support-bar-text { font-size: 0.875rem; color: #94a3b8; margin: 0; line-height: 1.4; } .support-bar-actions { display: flex; gap: 0.625rem; flex-shrink: 0; } .support-bar-btn { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: #cbd5e1; text-decoration: none; padding: 0.375rem 0.875rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; transition: background 0.12s, color 0.12s; white-space: nowrap; } .support-bar-btn:hover { background: rgba(255,255,255,0.08); color: #ffffff; } .support-bar-btn svg { flex-shrink: 0; opacity: 0.8; } /* ── Doc mockup (inline SVG wireframes) ── */ .doc-mockup { margin: 1.75rem 0 2rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-1); box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .doc-mockup svg { display: block; width: 100%; height: auto; } /* ── Mobile ── */ @media (max-width: 860px) { .docs-sidebar { display: none; } .docs-content { padding: 1.5rem 1.125rem 3rem; } .nav-search { display: none; } .theme-toggle { display: none; } .audience-grid { grid-template-columns: 1fr; } .audience-col { border-right: none; border-bottom: 1px solid var(--hairline); } .audience-col:last-child { border-bottom: none; } .product-row { grid-template-columns: 1fr; } .product-col { border-right: none; border-bottom: 1px solid var(--hairline); } .product-col:last-child { border-bottom: none; } .tier-grid { grid-template-columns: 1fr; } .role-grid { grid-template-columns: 1fr 1fr; padding: 0 1.125rem; } .role-grid { margin: 1.75rem auto; } .all-topics { padding: 1.5rem 1.125rem 2.5rem; } } @media (max-width: 540px) { .docs-hero h1 { font-size: 1.625rem; } .nav-switcher { display: none; } .role-grid { grid-template-columns: 1fr; } }