/* Application styles */ /* Dark mode transition for smooth theme switching */ html { transition: background-color 0.2s ease, color 0.2s ease; } /* Hide scrollbar while keeping scroll functionality */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Alpine.js x-cloak directive - hide elements until Alpine initializes */ [x-cloak] { display: none !important; } /* Documentation-specific styles */ .documentation h1, .documentation h2, .documentation h3, .documentation h4, .documentation h5, .documentation h6 { scroll-margin-top: 5rem; } /* Custom scrollbar for dark mode */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: #27272a; } .dark ::-webkit-scrollbar-thumb { background: #52525b; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #71717a; } /* Markdown tables inside prose (docs and how-to). * * These used to be styled only under `.dark`, which misfired: the head script * adds `dark` to whenever the OS prefers dark, but the site itself is * light-only (a handful of `dark:` utilities aside). Visitors browsing with OS * dark mode therefore got near-white #fafafa header text and washed-out * #a1a1aa body text on a white page — the header was effectively invisible. * Styling tables unconditionally is what actually fixes that; see the note in * layouts/_head.html.erb about the wider dark-mode question. */ .prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.6; } .prose thead th { background-color: #f9fafb; color: #111827; font-weight: 600; text-align: left; padding: 0.625rem 0.875rem; border-bottom: 1px solid #e5e7eb; } .prose thead th:first-child { border-top-left-radius: 0.5rem; } .prose thead th:last-child { border-top-right-radius: 0.5rem; } .prose tbody td { padding: 0.625rem 0.875rem; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } /* Identifiers in the first column read as one token — let the column size to * them rather than breaking `unrecognized_parameter` across three lines. */ .prose table code { white-space: nowrap; } /* Kept so the `.dark` rule set stays complete if dark mode is ever finished. * Inert today — see the note in layouts/_head.html.erb. */ .dark .prose thead th { background-color: #18181b; color: #fafafa; border-bottom-color: #3f3f46; } .dark .prose tbody td { color: #a1a1aa; border-bottom-color: #27272a; } /* HTTP method badges in documentation */ .http-method { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 0.25rem; text-transform: uppercase; letter-spacing: 0.025em; } .http-method-get { background-color: rgba(16, 185, 129, 0.1); color: #059669; } .dark .http-method-get { color: #34d399; } .http-method-post { background-color: rgba(14, 165, 233, 0.1); color: #0284c7; } .dark .http-method-post { color: #38bdf8; } .http-method-put, .http-method-patch { background-color: rgba(245, 158, 11, 0.1); color: #d97706; } .dark .http-method-put, .dark .http-method-patch { color: #fbbf24; } .http-method-delete { background-color: rgba(244, 63, 94, 0.1); color: #e11d48; } .dark .http-method-delete { color: #fb7185; } /* Endpoint badge */ .endpoint-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; background-color: #18181b; border-radius: 0.375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; color: #e4e4e7; } /* Callout styles */ .callout { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem; margin: 1.5rem 0; } .callout-info { background-color: #eff6ff; border-left: 4px solid #3b82f6; } .dark .callout-info { background-color: rgba(59, 130, 246, 0.1); } .callout-warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; } .dark .callout-warning { background-color: rgba(245, 158, 11, 0.1); } .callout-tip { background-color: #ecfdf5; border-left: 4px solid #10b981; } .dark .callout-tip { background-color: rgba(16, 185, 129, 0.1); } .callout-danger { background-color: #fef2f2; border-left: 4px solid #ef4444; } .dark .callout-danger { background-color: rgba(239, 68, 68, 0.1); } /* Property list styles */ .property-list { border: 1px solid #e4e4e7; border-radius: 0.5rem; overflow: hidden; } .dark .property-list { border-color: #3f3f46; } .property-item { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e4e4e7; } .dark .property-item { border-color: #3f3f46; } .property-item:last-child { border-bottom: none; } .property-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.875rem; font-weight: 500; color: #18181b; } .dark .property-name { color: #fafafa; } .property-type { font-size: 0.75rem; color: #71717a; } .property-required { font-size: 0.625rem; font-weight: 500; color: #ef4444; text-transform: uppercase; } .property-description { width: 100%; font-size: 0.875rem; color: #52525b; } .dark .property-description { color: #a1a1aa; } /* Code block enhancements */ .code-block-wrapper { position: relative; margin: 1.5rem 0; } .code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background-color: #27272a; border-radius: 0.5rem 0.5rem 0 0; border-bottom: 1px solid #3f3f46; } .code-block-language { font-size: 0.75rem; font-weight: 500; color: #a1a1aa; text-transform: uppercase; } .code-block-copy { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #a1a1aa; background: transparent; border: none; border-radius: 0.25rem; cursor: pointer; transition: color 0.15s, background-color 0.15s; } .code-block-copy:hover { color: #fafafa; background-color: #3f3f46; } .code-block-copy-success { color: #34d399 !important; } /* Alpine.js collapse animation */ [x-collapse] { overflow: hidden; } /* Pricing reveal animation * Triggered when the pricing section enters the viewport (same threshold as * the `Pricing Section Viewed` Plausible event). The Stimulus * `pricing-reveal` controller adds `pricing-reveal-active` to switch to the * discounted state, plus `pricing-reveal-animate` to play the entrance * transitions. On a return visit within the same session the controller * applies `-active` without `-animate`, so the discounted state appears * immediately without re-animating. */ .pricing-reveal-original { display: inline-block; } .pricing-reveal-sale-wrap { display: inline-grid; grid-template-columns: 0fr; margin-left: 0; vertical-align: baseline; } .pricing-reveal-sale-wrap > span { overflow: hidden; min-width: 0; } .pricing-reveal-sale { display: inline-block; opacity: 0; transform: translateX(-12px); color: #1d4ed8; font-weight: 800; font-size: 3rem; line-height: 1; white-space: nowrap; } .pricing-reveal-bar { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; } .pricing-reveal-bar > div { overflow: hidden; min-height: 0; } /* Active state — final visual for both animated and snap-in variants. */ .pricing-reveal-active .pricing-reveal-original { color: #9ca3af; text-decoration: line-through; text-decoration-thickness: 2px; font-size: 2.25rem; } .pricing-reveal-active .pricing-reveal-sale-wrap { grid-template-columns: 1fr; margin-left: 0.5rem; } .pricing-reveal-active .pricing-reveal-sale { opacity: 1; transform: translateX(0); } .pricing-reveal-active .pricing-reveal-bar { grid-template-rows: 1fr; opacity: 1; margin-top: 1.25rem; } /* Animate-in transitions only run when the controller wants the entrance. */ .pricing-reveal-animate .pricing-reveal-original { transition: color 0.4s ease, font-size 0.4s ease; } .pricing-reveal-animate .pricing-reveal-sale-wrap { transition: grid-template-columns 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s, margin-left 0.45s ease 0.1s; } .pricing-reveal-animate .pricing-reveal-sale { transition: opacity 0.45s ease 0.2s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; } .pricing-reveal-animate .pricing-reveal-bar { transition: grid-template-rows 0.45s ease 0.3s, opacity 0.4s ease 0.3s, margin-top 0.45s ease 0.3s; } .pricing-reveal-timer { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: 0.02em; } @media (prefers-reduced-motion: reduce) { .pricing-reveal-animate .pricing-reveal-original, .pricing-reveal-animate .pricing-reveal-sale, .pricing-reveal-animate .pricing-reveal-sale-wrap, .pricing-reveal-animate .pricing-reveal-bar { transition: none !important; } }