- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- +
-
+
-
+ View Changelog
+
+
+
+ What's new
+
+
+ + The latest features and improvements shipping across Cloudflare. +
+
+
+
+
+
+
+
+
+
+ {featured.products[0] && (
+
+ {featured.products[0].name}
+
+ )}
+
+
+
+
+ Read update
+ + {featured.title} +
+ ++ {featured.description} +
+
+
+
+ {entry.products[0]?.name}
+
+
+
+
+
+
+ Read more
+ + {entry.title} +
+ ++ {entry.description} +
+
+ {
+ showPrompt && (
+
+ )
+ }
+
+
+
+
+
+
diff --git a/src/components/landing/CommunityGrid.astro b/src/components/landing/CommunityGrid.astro
new file mode 100644
index 000000000000000..c4e2699202fde8f
--- /dev/null
+++ b/src/components/landing/CommunityGrid.astro
@@ -0,0 +1,85 @@
+---
+import CornerMarks from "./CornerMarks.astro";
+import SectionHeading from "./SectionHeading.astro";
+
+const cards = [
+ {
+ label: "Community",
+ heading: "Join the conversation",
+ desc: "Share ideas, answers, and code with the Cloudflare community.",
+ links: [
+ { label: "Discord", href: "https://discord.cloudflare.com/" },
+ { label: "X", href: "https://x.com/cloudflare" },
+ { label: "Forum", href: "https://community.cloudflare.com/" },
+ ],
+ },
+ {
+ label: "Open Source",
+ heading: "View the source",
+ desc: "Cloudflare contributes to the open-source ecosystem in a variety of ways, including:",
+ links: [
+ { label: "GitHub", href: "https://github.com/cloudflare" },
+ { label: "Sponsors", href: "https://github.com/sponsors/cloudflare" },
+ { label: "Style guide", href: "/style-guide/" },
+ ],
+ },
+ {
+ label: "Blog",
+ heading: "Read the latest",
+ desc: "Get the latest news on Cloudflare products, technologies, and culture.",
+ links: [
+ { label: "blog.cloudflare.com", href: "https://blog.cloudflare.com/" },
+ ],
+ },
+];
+---
+
+
+ {command}
+
+
+
+
+
+ Connect with Cloudflare
+
+
+
+ + Find community, read the blog, and explore open source projects. +
+
+
+
+
+ {card.label}
+
+
+ ))
+ }
+ + {card.heading} +
++ {card.desc} +
+ +
+ {card.links.map((link) => (
+
+ {link.label}
+
+ ))}
+
+ + Cloudflare Developer Docs +
+ ++ Compute, storage, AI, and security — ship applications instead of managing + and securing infrastructure +
+ +
+
+
+
+
+
+
+ {product}
+
+
+
+ + {scenario} +
++ {detail} +
+ + + {cta} + + + + + diff --git a/src/components/landing/ProductCardGrid.astro b/src/components/landing/ProductCardGrid.astro new file mode 100644 index 000000000000000..748ec9961eef584 --- /dev/null +++ b/src/components/landing/ProductCardGrid.astro @@ -0,0 +1,25 @@ +--- +import CornerMarks from "./CornerMarks.astro"; + +interface Props { + label?: string; +} + +const { label } = Astro.props; +--- + +
+ {
+ label && (
+
diff --git a/src/components/landing/RightArrow.astro b/src/components/landing/RightArrow.astro
new file mode 100644
index 000000000000000..0a98a910a5a1406
--- /dev/null
+++ b/src/components/landing/RightArrow.astro
@@ -0,0 +1,52 @@
+---
+type Variant = "line" | "chevron";
+
+interface Props {
+ variant?: Variant;
+ size?: number;
+ strokeWidth?: number;
+ class?: string;
+}
+
+const {
+ variant = "line",
+ size = 14,
+ strokeWidth = variant === "chevron" ? 1.5 : 2,
+ class: className = "",
+} = Astro.props;
+---
+
+{
+ variant === "line" ? (
+
+ ) : (
+
+ )
+}
diff --git a/src/components/landing/SectionHeading.astro b/src/components/landing/SectionHeading.astro
new file mode 100644
index 000000000000000..d39eea68d8a1e8a
--- /dev/null
+++ b/src/components/landing/SectionHeading.astro
@@ -0,0 +1,18 @@
+---
+interface Props {
+ id?: string;
+ class?: string;
+}
+
+const { id, class: className = "" } = Astro.props;
+---
+
++ {label} +
+ ) + } +
+
+
+
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
new file mode 100644
index 000000000000000..a40d8e741cd8be7
--- /dev/null
+++ b/src/components/landing/SecureSection.astro
@@ -0,0 +1,107 @@
+---
+import ProductCard from "./ProductCard.astro";
+import ProductCardGrid from "./ProductCardGrid.astro";
+import SectionHeading from "./SectionHeading.astro";
+
+const categories = [
+ {
+ label: "Public websites & apps",
+ threats: [
+ {
+ scenario: "Protect your applications without sacrificing performance",
+ product: "WAF",
+ href: "/waf/",
+ icon: "ddos-protection",
+ detail:
+ "Identify and block malicious payloads before they can compromise your application.",
+ cta: "Harden your app with WAF",
+ },
+ {
+ scenario: "Encrypt your site in minutes",
+ product: "SSL/TLS",
+ href: "/ssl/",
+ icon: "ssl",
+ detail: "Streamline TLS Certificate Management.",
+ cta: "Set up SSL/TLS",
+ },
+ {
+ scenario: "Verify visitors without CAPTCHA",
+ product: "Turnstile",
+ href: "/turnstile/",
+ icon: "turnstile",
+ detail:
+ "Confirm web visitors are real and block unwanted bots without slowing down web experiences for real users.",
+ cta: "Add Turnstile protection",
+ },
+ ],
+ },
+ {
+ label: "Corporate and home networks",
+ category: "zero-trust" as const,
+ threats: [
+ {
+ scenario:
+ "Securely connect origins with post-quantum encrypted tunnels",
+ product: "Tunnel",
+ href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+ icon: "tunnel",
+ detail: "Outbound-only encrypted tunnels, no open ports.",
+ cta: "Create a secure Tunnel",
+ },
+ {
+ scenario: "Secure internal applications with Cloudflare Access",
+ product: "Access",
+ href: "/cloudflare-one/access-controls/",
+ icon: "access",
+ detail:
+ "Identity-first, quantum-safe access to private applications and infrastructure.",
+ cta: "Set up Cloudflare Access",
+ },
+ {
+ scenario: "Secure Internet browsing without disruptions",
+ product: "Gateway",
+ href: "/cloudflare-one/traffic-policies/",
+ icon: "gateway",
+ detail:
+ "Cloud-native Secure Web Gateway (SWG) that inspects browser traffic without disruption.",
+ cta: "Create Gateway policies",
+ },
+ ],
+ },
+];
+---
+
++ Everything you need to secure applications, APIs, and infrastructure. +
+ +
+ {
+ categories.map((cat) => (
+
+ {cat.threats.map((t) => (
+
+ ))
+ }
+
+
+
+
+ {
+ tabs.map((t) => {
+ const active = t.id === activeId;
+ return (
+
+ );
+ })
+ }
+
+
+
diff --git a/src/components/landing/ViewAllLink.astro b/src/components/landing/ViewAllLink.astro
new file mode 100644
index 000000000000000..91467edf45ac9fa
--- /dev/null
+++ b/src/components/landing/ViewAllLink.astro
@@ -0,0 +1,26 @@
+---
+import RightArrow from "./RightArrow.astro";
+
+interface Props {
+ href: string;
+ class?: string;
+}
+
+const { href, class: className = "" } = Astro.props;
+---
+
+
+
-
diff --git a/src/icons/dns.svg b/src/icons/dns.svg
index 81ed4783609480f..b8f6acebd01476f 100644
--- a/src/icons/dns.svg
+++ b/src/icons/dns.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/icons/kv.svg b/src/icons/kv.svg
index d6740f2d26e1158..df28e6e67296073 100644
--- a/src/icons/kv.svg
+++ b/src/icons/kv.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f0c4ba074d61e47..3fc006c3118b168 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,512 +1,361 @@
---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import { Image } from "astro:assets";
-
-import AgentsIllustration from "~/assets/agents.svg";
-
-import HeroImageDark from "~/assets/Dev-Docs-Header-Illustration-Dark-Mode-cropped.svg";
-import HeroImageLight from "~/assets/Dev-Docs-Header-Illustration-Light-Mode-cropped.svg";
-
-import SectionImageDeveloperPlatformDark from "~/assets/developer-platform-dark.svg";
-import SectionImageDeveloperPlatformLight from "~/assets/developer-platform-light.svg";
-import SectionImageZeroTrustDark from "~/assets/zero-trust-dark.svg";
-import SectionImageZeroTrustLight from "~/assets/zero-trust-light.svg";
-import PromptCopyBlock from "~/components/agent-setup/PromptCopyBlock.astro";
-
-import {
- FourCardGrid,
- ListCard,
- TryItSection,
- FeaturedContentSection,
- RecommendedContentSection,
- FooterHeroBlock,
-} from "~/components";
-
-const frontmatter = {
- title: "Welcome to Cloudflare",
- description:
- "Explore guides and tutorials to start building on Cloudflare's platform",
- template: "splash",
- hero: {
- title: "Welcome to Cloudflare",
- tagline:
- "Explore guides and tutorials to start building on Cloudflare's platform",
- image: {
- dark: HeroImageDark,
- light: HeroImageLight,
- },
- },
-} as const;
-
-const topCards = [
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+import StructuralGrid from "~/components/landing/StructuralGrid.astro";
+import FullPageLines from "~/components/landing/FullPageLines.astro";
+import Hero from "~/components/landing/Hero.astro";
+import BuildFromScratch from "~/components/landing/BuildFromScratch.astro";
+import SecureSection from "~/components/landing/SecureSection.astro";
+import AccelerateSection from "~/components/landing/AccelerateSection.astro";
+import AgentSetup from "~/components/landing/AgentSetup.astro";
+import ChangelogSection from "~/components/landing/ChangelogSection.astro";
+import CommunityGrid from "~/components/landing/CommunityGrid.astro";
+import "../styles/landing.css";
+
+const heading = (icon: string) => ({
+ text: icon,
+ variant: "default" as const,
+ class: "sidebar-heading",
+});
+
+const groupIcon = (icon: string) => ({
+ text: icon,
+ variant: "default" as const,
+ class: "sidebar-group-icon",
+});
+
+const sidebar = [
{
- title: "Featured",
- links: [
- { text: "Docs for agents", href: "/docs-for-agents/" },
+ label: "Get started",
+ collapsed: false,
+ badge: heading("heading-get-started"),
+ items: [
+ { label: "Overview", link: "/" },
+ { label: "API", link: "/api/" },
+ { label: "Agent Setup", link: "/agent-setup/" },
+ { label: "Directory", link: "/directory/" },
{
- text: "Troubleshoot errors",
- href: "/support/troubleshooting/http-status-codes/",
+ label: "Resources",
+ collapsed: true,
+ items: [
+ {
+ label: "Learning paths",
+ link: "/resources/?filter-pcx_content_type=learning-path",
+ },
+ { label: "Use cases", link: "/use-cases/" },
+ { label: "Reference architecture", link: "/reference-architecture/" },
+ ],
},
- { text: "Register a domain", href: "/registrar/" },
- { text: "Setup 1.1.1.1", href: "/1.1.1.1/setup/" },
{
- text: "Get started with Cloudflare",
- href: "/learning-paths/get-started/concepts/",
+ label: "API & IaC",
+ collapsed: true,
+ items: [
+ { label: "API reference", link: "/api/" },
+ { label: "Terraform", link: "/terraform/" },
+ { label: "Pulumi", link: "/pulumi/" },
+ { label: "SDKs", link: "/fundamentals/api/reference/sdks/" },
+ ],
},
+ { label: "Support", link: "/support/" },
],
- cta: {
- text: "View all docs",
- href: "/directory/",
- },
- },
- {
- title: "Developer Products",
- links: [
- { text: "Workers", href: "/workers/" },
- { text: "Pages", href: "/pages/" },
- { text: "R2", href: "/r2/" },
- { text: "Images", href: "/images/" },
- { text: "Stream", href: "/stream/" },
- ],
- cta: {
- text: "View all developer products",
- href: "/directory/?product-group=Developer+platform",
- },
},
{
- title: "AI Products",
- links: [
- { text: "AI Search", href: "/ai-search/" },
- { text: "Workers AI", href: "/workers-ai/" },
- { text: "AI Crawl Control", href: "/ai-crawl-control/" },
- { text: "AI Gateway", href: "/ai-gateway/" },
- { text: "AI Agents", href: "/agents/" },
- ],
- cta: {
- text: "View all AI products",
- href: "/directory/?product-group=AI",
- },
- },
- {
- title: "Zero Trust",
- links: [
- { text: "Access", href: "/cloudflare-one/access-controls/policies/" },
+ label: "Build",
+ collapsed: false,
+ badge: heading("heading-build"),
+ items: [
{
- text: "Tunnel",
- href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+ label: "Compute",
+ collapsed: true,
+ badge: groupIcon("workers"),
+ items: [
+ { label: "Workers", link: "/workers/" },
+ { label: "Containers", link: "/containers/" },
+ { label: "Durable Objects", link: "/durable-objects/" },
+ { label: "Queues", link: "/queues/" },
+ { label: "Workflows", link: "/workflows/" },
+ { label: "Browser Run", link: "/browser-run/" },
+ { label: "Pipelines", link: "/pipelines/" },
+ { label: "Workers VPC", link: "/workers-vpc/" },
+ {
+ label: "Cloudflare for Platforms",
+ link: "/cloudflare-for-platforms/",
+ },
+ { label: "Email Service", link: "/email-service/" },
+ ],
},
- { text: "Gateway", href: "/cloudflare-one/traffic-policies/" },
{
- text: "Browser Isolation",
- href: "/cloudflare-one/remote-browser-isolation/",
+ label: "AI",
+ collapsed: true,
+ badge: groupIcon("workers-ai"),
+ items: [
+ { label: "Workers AI", link: "/workers-ai/" },
+ { label: "AI Gateway", link: "/ai-gateway/" },
+ { label: "Vectorize", link: "/vectorize/" },
+ { label: "AI Search", link: "/ai-search/" },
+ { label: "AI Crawl Control", link: "/ai-crawl-control/" },
+ ],
},
{
- text: "Replace your VPN",
- href: "/learning-paths/replace-vpn/concepts/",
+ label: "Storage & Database",
+ collapsed: true,
+ badge: groupIcon("kv"),
+ items: [
+ { label: "R2", link: "/r2/" },
+ { label: "D1", link: "/d1/" },
+ { label: "KV", link: "/kv/" },
+ { label: "Hyperdrive", link: "/hyperdrive/" },
+ ],
+ },
+ {
+ label: "Media",
+ collapsed: true,
+ badge: groupIcon("images"),
+ items: [
+ { label: "Images", link: "/images/" },
+ { label: "Stream", link: "/stream/" },
+ { label: "Realtime", link: "/realtime/" },
+ ],
},
],
- cta: {
- text: "View all Cloudflare One products",
- href: "/directory/?product-group=Cloudflare+One",
- },
},
-];
-
-const featuredSections = [
{
- title: "Developer Platform",
- text: "The Cloudflare Developer Platform provides a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.",
- image: {
- light: SectionImageDeveloperPlatformLight,
- dark: SectionImageDeveloperPlatformDark,
- },
- imagePosition: "before",
- cards: [
- // Currently unused.
- // {
- // title: "Create API Tokens",
- // text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
- // cta: {
- // title: "Create Tokens",
- // href: "/fundamentals/api/get-started/create-token/",
- // },
- // },
- // {
- // title: "View Workers Examples",
- // text: "Review fully functional sample scripts to get started with Workers.",
- // cta: {
- // title: "View Examples",
- // href: "/workers/examples/",
- // },
- // },
+ label: "Protect & Connect",
+ collapsed: false,
+ badge: heading("heading-protect-connect"),
+ items: [
+ {
+ label: "Application Security",
+ collapsed: true,
+ badge: groupIcon("waf"),
+ items: [
+ { label: "WAF", link: "/waf/" },
+ { label: "DDoS Protection", link: "/ddos-protection/" },
+ { label: "SSL/TLS", link: "/ssl/" },
+ { label: "Bots", link: "/bots/" },
+ { label: "API Shield", link: "/api-shield/" },
+ { label: "Page Shield", link: "/page-shield/" },
+ { label: "Turnstile", link: "/turnstile/" },
+ { label: "Security Center", link: "/security-center/" },
+ ],
+ },
+ {
+ label: "Cloudflare One",
+ collapsed: true,
+ badge: groupIcon("cloudflare-one"),
+ items: [
+ { label: "Overview", link: "/cloudflare-one/" },
+ {
+ label: "Access",
+ link: "/cloudflare-one/access-controls/policies/",
+ },
+ {
+ label: "Tunnel",
+ link: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+ },
+ { label: "Gateway", link: "/cloudflare-one/traffic-policies/" },
+ {
+ label: "Browser Isolation",
+ link: "/cloudflare-one/remote-browser-isolation/",
+ },
+ { label: "WARP Client", link: "/warp-client/" },
+ { label: "Email Security", link: "/email-security/" },
+ ],
+ },
+ {
+ label: "Domains & DNS",
+ collapsed: true,
+ badge: groupIcon("dns"),
+ items: [
+ { label: "DNS", link: "/dns/" },
+ { label: "1.1.1.1", link: "/1.1.1.1/" },
+ { label: "Registrar", link: "/registrar/" },
+ { label: "Email Routing", link: "/email-routing/" },
+ { label: "DMARC Management", link: "/dmarc-management/" },
+ ],
+ },
+ {
+ label: "Networking",
+ collapsed: true,
+ badge: groupIcon("network"),
+ items: [
+ { label: "Magic Transit", link: "/magic-transit/" },
+ { label: "Magic WAN", link: "/cloudflare-wan/" },
+ { label: "Network Interconnect", link: "/network-interconnect/" },
+ { label: "Spectrum", link: "/spectrum/" },
+ { label: "BYOIP", link: "/byoip/" },
+ ],
+ },
+ {
+ label: "Delivery & Performance",
+ collapsed: true,
+ badge: groupIcon("speed"),
+ items: [
+ { label: "Cache", link: "/cache/" },
+ { label: "Speed", link: "/speed/" },
+ { label: "Load Balancing", link: "/load-balancing/" },
+ { label: "Waiting Room", link: "/waiting-room/" },
+ { label: "Argo Smart Routing", link: "/argo-smart-routing/" },
+ { label: "Zaraz", link: "/zaraz/" },
+ ],
+ },
],
},
{
- title: "Zero Trust",
- text: "Cloudflare Zero Trust replaces legacy security perimeters with our global network, making the Internet faster and safer for teams around the world.",
- image: {
- light: SectionImageZeroTrustLight,
- dark: SectionImageZeroTrustDark,
- },
- imagePosition: "after",
- cards: [
+ label: "Manage & Observe",
+ collapsed: false,
+ badge: heading("heading-other"),
+ items: [
{
- title: "Install the WARP Client",
- text: "The Cloudflare WARP client allows individuals and organizations to have a faster, more secure, and more private experience online.",
- cta: {
- title: "Get started",
- href: "/cloudflare-one/team-and-resources/devices/warp/",
- },
- },
- {
- title: "Set up a tunnel",
- text: "Cloudflare Tunnel provides you with a secure way to connect your resources to Cloudflare without a publicly routable IP address.",
- cta: {
- title: "Set up a tunnel",
- href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
- },
+ label: "Observe",
+ collapsed: true,
+ badge: groupIcon("analytics"),
+ items: [
+ { label: "Analytics", link: "/analytics/" },
+ { label: "Web Analytics", link: "/web-analytics/" },
+ { label: "Logs", link: "/logs/" },
+ { label: "Log Explorer", link: "/log-explorer/" },
+ { label: "Health Checks", link: "/health-checks/" },
+ ],
},
],
},
];
-const recommendedSection = {
- title: "Other docs you might also like",
- cards: [
- {
- title: "Install an Origin CA certificate",
- text: "Use Origin Certificate Authority (CA) certificates to encrypt traffic between Cloudflare and your origin web server and reduce origin bandwidth.",
- cta: {
- title: "Install Origin CA",
- href: "/ssl/origin-configuration/origin-ca/",
- },
- },
- {
- title: "Change your nameservers",
- text: "Make Cloudflare your primary DNS provider by updating your authoritative nameservers at your domain registrar.",
- cta: {
- title: "Update nameservers",
- href: "/dns/zone-setups/full-setup/setup/",
- },
- },
- {
- title: "SSL/TLS Encryption mode",
- text: "Your domain's encryption mode controls how Cloudflare connects to your origin server and how SSL certificates at your origin will be validated.",
- cta: {
- title: "Set encryption mode",
- href: "/ssl/origin-configuration/ssl-modes/",
- },
- },
- {
- title: "Allow traffic from specific countries only",
- text: "Block requests based on a list of allowed countries by configuring a custom rule in the Web Application Firewall (WAF).",
- cta: {
- title: "Allow traffic from specific countries only",
- href: "/waf/custom-rules/use-cases/allow-traffic-from-specific-countries/",
- },
- },
- ],
-};
+const props = {
+ frontmatter: {
+ title: "Cloudflare Developer Docs",
+ description: "Connect, protect, and build everywhere.",
+ template: "doc",
+ tableOfContents: false,
+ },
+ sidebar,
+ hasSidebar: true,
+ hideBreadcrumbs: true,
+ hideTitle: true,
+ headings: [],
+} as StarlightPageProps;
---
-
-
- {
- topCards.map((card) => (
-
-
- ))
- }
-
-
-
-
- {card.links.map((link) => (
-
- - - {link.text} - - - ))} -
- - {card.cta.text} - -
-
-
- -
-
-
- - { - featuredSections.map((section) => ( - <> -
- - )) - } +
+
- -
-
-
- - - { - featuredSections.map((section) => ( - <> -
- - )) - } +
+
+
+
+
-
-
-
-
diff --git a/src/styles/landing.css b/src/styles/landing.css
new file mode 100644
index 000000000000000..2e9eb6bba9131d4
--- /dev/null
+++ b/src/styles/landing.css
@@ -0,0 +1,230 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@media (prefers-reduced-motion: no-preference) {
+ html {
+ scroll-behavior: smooth;
+ }
+}
+
+@theme {
+ /*
+ * Semantic colour tokens for the landing page.
+ *
+ * Naming convention is **role-based, not luminance-based**:
+ * - `background` — canonical page / panel surface
+ * - `background-muted` — recessed surface (tab strip, inset card)
+ * - `background-subtle` — deepest recess (hover/pressed surface)
+ * - `foreground` — primary text
+ * - `foreground-muted` — body / detail text
+ * - `foreground-subtle` — captions / eyebrows
+ *
+ * Brightness flips between light and dark themes — the role does
+ * not. `foreground` is always the most prominent text colour
+ * regardless of theme; in light mode that's near-black, in dark
+ * mode it's near-white. Don't read the names as a luminance scale.
+ *
+ * Brand orange lives on `accent-100` (canonical) + `accent-200`
+ * (lighter / hover). `accent-100` is used as both a fill (CTA
+ * panels, primary buttons) and a foreground (eyebrows, links,
+ * focus rings) — there is no separate "fill" alias.
+ *
+ * Theme switching is handled via the .landing-root scope further
+ * below.
+ */
+ --color-background: #ffffff;
+ --color-background-muted: #fafafa;
+ --color-background-subtle: #f4f4f5;
+ --color-foreground: #18181b;
+ --color-foreground-muted: #52525b;
+ --color-foreground-subtle: #71717a;
+ --color-accent-100: #ff5e1f; /* primary */
+ --color-accent-200: #ff7038; /* hover/secondary */
+ --color-light-foreground: #fffbf5;
+ --color-border-100: #e4e4e7;
+
+ /*
+ * Selection — borrowed from workers.cloudflare.com. Peach background +
+ * deep-orange text in light mode, dark-brown background + lighter-orange
+ * text in dark. Applied via the `::selection` rule on `.landing-root`.
+ */
+ --color-selection-bg: #ffe9e0;
+ --color-selection-text: #ff500a;
+
+ @keyframes v27-enter {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes v27-broadcast-ring {
+ 0% {
+ opacity: 0.3;
+ transform: translate(-50%, -50%) scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(2);
+ }
+ }
+
+ /*
+ * Changelog "live" pulse — used by ChangelogSection.astro on the
+ * featured card date dot. Registered as a Tailwind v4 animation
+ * token so it can be applied via `animate-cl-pulse` (with
+ * `motion-reduce:animate-none` for the reduced-motion fallback).
+ */
+ --animate-cl-pulse: cl-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+
+ @keyframes cl-pulse {
+ 0% {
+ transform: scale(0.4);
+ opacity: 0.6;
+ }
+ 100% {
+ transform: scale(1.6);
+ opacity: 0;
+ }
+ }
+}
+
+/*
+ * scrollbar-hide — for horizontally-scrollable strips (TabBar, etc.).
+ * Visually hides the scrollbar while preserving keyboard/touch scroll.
+ */
+@utility scrollbar-hide {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+@utility v27-broadcast {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 0.3;
+ animation: v27-broadcast-ring 4s ease-out infinite;
+ pointer-events: none;
+ will-change: transform, opacity;
+
+ @media (prefers-reduced-motion: reduce) {
+ animation: none !important;
+ opacity: 0.15;
+ }
+}
+
+@utility v27-origin-static {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+}
+
+@layer base {
+ :root {
+ --tw-accent-200: var(--orange-accent-200);
+ --tw-accent-600: var(--orange-accent-600);
+ --tw-accent-900: var(--orange-accent-900);
+ }
+
+ * {
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ body {
+ font-family:
+ Inter,
+ ui-sans-serif,
+ system-ui,
+ -apple-system,
+ Segoe UI,
+ Roboto,
+ Helvetica,
+ Arial,
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+}
+
+/*
+ * Landing page root — font and layout only.
+ * StructuralGrid CSS variables live here because they need
+ * complex values (radial-gradient backgrounds) with no Tailwind equivalent.
+ */
+.landing-root {
+ /*
+ * Token overrides — these MUST live on `.landing-root` (not in @theme)
+ * because starlight-tailwind declares `--color-accent-100` etc. in an
+ * UNLAYERED `:root` block, which outranks anything inside @layer theme.
+ * `.landing-root` is more specific than `:root, :host` so wins.
+ */
+ --color-background: #ffffff;
+ --color-background-muted: #fafafa;
+ --color-background-subtle: #f4f4f5;
+ --color-foreground: #18181b;
+ --color-foreground-muted: #52525b;
+ --color-foreground-subtle: #71717a;
+ --color-accent-100: #ff5e1f; /* primary */
+ --color-accent-200: #ff7038; /* hover/secondary */
+ --color-light-foreground: #fffbf5;
+ --color-border-100: #e4e4e7;
+ --color-selection-bg: #ffe9e0;
+ --color-selection-text: #ff500a;
+
+ --l-section-pad: max(2rem, 4vw);
+ --l-pad-top: var(--l-section-pad);
+ overflow-x: clip;
+ line-height: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: var(--color-foreground);
+
+ --l-dot-color: #efeff1;
+ --l-dot-size: 18px 18px;
+ --l-grid-mark: rgba(0, 0, 0, 0.08);
+ --l-grid-mark-accent: rgba(0, 0, 0, 0.12);
+}
+
+.landing-root ::selection {
+ background-color: var(--color-selection-bg);
+ color: var(--color-selection-text);
+}
+
+@media (max-width: 800px) {
+ .landing-root {
+ --l-pad-top: 4rem; /* 64px — pt-16, more breathing room on mobile */
+ }
+}
+
+:root[data-theme="dark"] .landing-root {
+ /* Dark-mode token overrides — keeps original neutral docs palette */
+ --color-background: #1d1d1d;
+ --color-background-muted: #252525;
+ --color-background-subtle: #2a2a2a;
+ --color-foreground: #fafafa;
+ --color-foreground-muted: #a1a1aa;
+ --color-foreground-subtle: #71717a;
+ --color-accent-100: #ff4801;
+ --color-accent-200: #ff7038;
+ --color-light-foreground: #fffbf5;
+ --color-border-100: #2a2a2a;
+ --color-selection-bg: #3d1f0f;
+ --color-selection-text: #ff7038;
+
+ color: var(--color-foreground);
+ --l-dot-color: rgba(255, 255, 255, 0.05);
+ --l-dot-size: 22px 22px;
+ --l-grid-mark: rgba(255, 255, 255, 0.1);
+ --l-grid-mark-accent: rgba(255, 255, 255, 0.16);
+}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 1c77577eab49f13..8ed5bbd89fe8bd9 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -55,14 +55,24 @@ main > .content-panel + .content-panel {
/* ── Right Sidebar (TOC) Alignment ── */
.right-sidebar-panel {
- padding-top: var(--layout-space-6);
- padding-left: var(--layout-space-6);
+ padding-top: var(--layout-space-6) !important;
+ padding-left: var(--layout-space-6) !important;
}
-/* ── Dividers ── */
-/* TOC vertical divider — whitespace does the separation work */
-.right-sidebar {
- border-inline-start: none;
+/* ── Right Sidebar (TOC) Positioning ── */
+/* Override Starlight's position: fixed with sticky.
+ Starlight scopes its styles with [data-astro-cid-*] attribute selectors,
+ giving them specificity 0,2,0 which beats our bare class selectors (0,1,0).
+ We must use !important to override the scoped declarations. */
+@media (min-width: 72rem) {
+ .right-sidebar {
+ position: sticky !important;
+ top: var(--sl-nav-height) !important;
+ height: auto !important;
+ max-height: calc(100vh - var(--sl-nav-height));
+ padding-top: 0 !important;
+ border-inline-start: none !important;
+ }
}
/* Header/body horizontal divider — replaced by spacing only */
@@ -92,8 +102,8 @@ starlight-tabs [role="tablist"] {
}
.right-sidebar-panel .sl-container {
- width: 100%;
- max-width: var(--layout-toc-width);
+ width: 100% !important;
+ max-width: var(--layout-toc-width) !important;
}
/* ── Breadcrumb Spacing ── */
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 445b71653afaf42..fd1f3232e53a930 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -7,6 +7,80 @@
padding: 0rem 1.5rem 1.5rem 1.5rem;
}
+/* ── Non-clickable section headings ──
+ Groups with a .sidebar-heading badge render as static labels
+ that visually separate sidebar sections without being interactive. */
+.sidebar-heading {
+ display: none !important;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary {
+ pointer-events: none;
+ cursor: default;
+ margin-top: 0.75rem;
+ margin-bottom: 0.25rem;
+}
+
+.sidebar-content
+ details:has(> summary .sidebar-heading)
+ > summary
+ .group-label {
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+}
+
+.sidebar-content
+ details:has(> summary .sidebar-heading)
+ > summary
+ .group-label
+ > span {
+ font-size: 0.6875rem;
+ font-weight: 500;
+ color: var(--sidebar-text-strong);
+ opacity: 0.45;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary .caret {
+ display: none;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary:hover {
+ background-color: transparent !important;
+}
+
+/* First heading group needs no top margin */
+.sidebar-content
+ > .top-level
+ > li:first-child
+ details:has(> summary .sidebar-heading)
+ > summary {
+ margin-top: 0;
+}
+
+/* ── Animated group icons ──
+ Product icons on sub-group summaries that animate on hover. */
+.sidebar-group-icon {
+ display: none !important;
+}
+
+.sidebar-content summary .group-label > astro-island {
+ display: contents;
+}
+
+.sidebar-content summary .group-icon {
+ flex-shrink: 0;
+ color: var(--sidebar-text);
+}
+
+.sidebar-content summary .group-label:has(.group-icon) {
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+}
+
/* ── Light theme ── */
:root[data-theme="light"] {
--sl-color-bg-nav: var(--color-cl1-white);
@@ -33,8 +107,8 @@
--sidebar-hover-text: var(--sidebar-text-strong);
--sidebar-active-bg: var(--color-cl1-gray-2);
--sidebar-active-text: var(--sidebar-text-strong);
- --sidebar-border: var(--color-cl1-gray-2);
- --sidebar-border-hover: var(--color-cl1-gray-3);
+ --sidebar-border: color-mix(in srgb, white 5%, transparent);
+ --sidebar-border-hover: color-mix(in srgb, white 10%, transparent);
--sl-color-sidebar-active: var(--sidebar-text-strong);
--sl-color-sidebar-hover: var(--color-cl1-gray-2);
}
+
-