style: align sidebar padding and polish header/sidebar typography (#29172)

Author: MohamedH1998

src/components/overrides/Header.astro

@@ -24,7 +24,7 @@ import AgentDirective from "../AgentDirective.astro";
 			<a
 				id="header-login-button"
 				href="https://dash.cloudflare.com/"
-				class="header-login"
+				class="header-login btn-soft"
 			>
 				Log in
 			</a>
@@ -68,15 +68,25 @@ import AgentDirective from "../AgentDirective.astro";
 		align-items: center;
 		justify-content: center;
 		height: 2.25rem;
-		padding: 0 1.25rem;
+		padding: 0 0.875rem;
 		border-radius: 0.5rem;
+		border: 1px solid transparent;
 		font-size: 0.875rem;
 		font-weight: 500;
 		line-height: 1;
 		white-space: nowrap;
 		text-decoration: none;
-		color: var(--color-header-btn-text);
-		background-color: var(--color-header-btn-bg);
+		transition: color 150ms, background-color 150ms, border-color 150ms;
+	}
+
+	.header-login {
+		background-color: var(--color-header-fill);
+		color: var(--color-header-text);
+	}
+
+	.header-login:hover {
+		background-color: var(--color-header-line);
+		color: var(--color-header-hover-text);
 	}
 
 	:global(.site-title) {

src/components/overrides/Sidebar.astro

@@ -10,13 +10,11 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 <div
 	class="sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
 >
-	<div class="sidebar-product-title px-1">
-		<a href={"/" + product + "/"} class="flex items-center gap-2 no-underline">
+	<div class="sidebar-product-title">
+		<a href={"/" + product + "/"} class="flex items-center gap-1 no-underline">
 			<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
-			<span class="text-xl text-black">
-				<strong>
-					{lookupProductTitle(product, module)}
-				</strong>
+			<span class="text-xl font-semibold text-black">
+				{lookupProductTitle(product, module)}
 			</span>
 		</a>
 	</div>

src/styles/sidebar.css

@@ -4,7 +4,7 @@
 
 .sidebar-content {
 	gap: 2px;
-	padding: 0 0.75rem 1rem;
+	padding: 0rem 1.5rem 1.5rem 1.5rem;
 }
 
 /* ── Light theme ── */