Add focus-visible handling and improve styling on Download pages

Author: webstackdev

src/components/Pages/Downloads/index.astro

@@ -24,7 +24,6 @@ const {
   fileType,
   fileSize,
   pages,
-  title,
 } = download.data
 
 const { Content } = await render(download)
@@ -33,72 +32,90 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
 ---
 
 <download-form class="mb-8 md:mb-30">
+  <section class="mb-8 md:mb-12" aria-label="Download header">
+    <div class="rounded-2xl border border-trim-offset bg-page-base p-6 md:p-8 shadow-sm">
+      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-page-inverse">
+        Free Download
+      </p>
+      <p class="leading-relaxed text-content-offset md:text-base">
+        Get the ebook instantly. Review the outline, enter your work email, and open the download in one step.
+      </p>
+    </div>
+  </section>
+
   {/* Two-column layout on desktop: info left, form right */}
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 md:gap-10 lg:gap-12 items-start">
+  <div class="grid grid-cols-1 gap-6 md:gap-10 lg:grid-cols-3 lg:gap-12 items-start">
     {/* Left column: cover, meta, content */}
     <div class="lg:col-span-2">
-      <div class="flex flex-col md:flex-row items-start gap-6mb-8">
-        {
-          cover && (
-            <section
-              class="relative aspect-square w-60 md:w-80 max-w-full mx-auto md:mx-0 rounded-2xl overflow-hidden shrink-0"
-              aria-label="Cover image"
-            >
-              <Picture
-                src={cover}
-                alt={coverAlt}
-                widths={[320, 480, 640]}
-                sizes="(min-width: 768px) 320px, 100vw"
-                formats={['avif', 'webp', 'jpeg']}
-                layout="constrained"
-                fit="cover"
-                position="center"
-                class="absolute inset-0 h-full w-full object-cover"
-                loading="eager"
-              />
-            </section>
-          )
-        }
-
-        {/* Resource Meta Information */}
-        <section
-          class="w-full px-6 md:px-0 md:mx-6 mt-6 md:mt-1"
-          aria-label="Resource details"
-        >
-          <p class="text-lg text-page-inverse leading-relaxed mt-1 mb-6 p-6 bg-page-offset rounded-xl border border-trim">
-            {download.data.description}
-          </p>
+      <div class="overflow-hidden rounded-2xl border border-trim-offset bg-page-base shadow-sm">
+        <div class="flex flex-col items-stretch gap-0 md:flex-row">
+          {
+            cover && (
+              <div class="w-full md:w-1/3 bg-page-offset p-6 md:p-10 flex justify-center items-center">
+                <section
+                  class="relative aspect-square w-56 md:w-full max-w-70 rounded-xl overflow-hidden border-2 border-trim shadow-md"
+                  aria-label="Cover image"
+                >
+                  <Picture
+                    src={cover}
+                    alt={coverAlt}
+                    widths={[320, 480, 640]}
+                    sizes="(min-width: 1024px) 280px, (min-width: 768px) 240px, 100vw"
+                    formats={['avif', 'webp', 'jpeg']}
+                    layout="constrained"
+                    fit="cover"
+                    position="center"
+                    class="absolute inset-0 h-full w-full object-cover"
+                    loading="eager"
+                  />
+                </section>
+              </div>
+            )
+          }
 
-          <dl class="flex items-center justify-center gap-6">
-            <div class="flex items-center gap-2">
-              <Icon icon="document" size={6} color="page-inverse" />
-              <dt class="sr-only">File type</dt>
-              <dd class="text-sm font-medium text-page-inverse">{fileType}</dd>
-            </div>
-            {
-              pages && (
-                <div class="flex items-center gap-2">
-                  <Icon icon="book" size={6} color="page-inverse" />
-                  <dt class="sr-only">Pages</dt>
-                  <dd class="text-sm text-page-inverse">{pages} pages</dd>
-                </div>
-              )
-            }
-            {
-              fileSize && (
-                <div class="flex items-center gap-2">
-                  <Icon icon="file" size={6} color="page-inverse" />
-                  <dt class="sr-only">File size</dt>
-                  <dd class="text-sm text-page-inverse">{fileSize}</dd>
-                </div>
-              )
-            }
-          </dl>
-        </section>
+          {/* Resource Meta Information */}
+          <section
+            class:list={[
+              'w-full bg-page-base p-6 md:p-10 flex flex-col justify-center',
+              cover ? 'md:w-2/3' : '',
+            ]}
+            aria-label="Resource details"
+          >
+            <p class="text-lg md:text-xl text-content leading-relaxed mb-6">
+              {download.data.description}
+            </p>
+
+            <dl class="flex items-center gap-4 md:gap-6 flex-wrap text-content-offset">
+              <div class="flex items-center gap-2 border-r border-trim pr-4 md:pr-6">
+                <Icon icon="document" size={5} color="content-offset" />
+                <dt class="sr-only">File type</dt>
+                <dd class="text-sm font-semibold">{fileType} Download</dd>
+              </div>
+              {
+                pages && (
+                  <div class="flex items-center gap-2 border-r border-trim pr-4 md:pr-6">
+                    <Icon icon="book" size={5} color="content-offset" />
+                    <dt class="sr-only">Pages</dt>
+                    <dd class="text-sm font-semibold">{pages} pages</dd>
+                  </div>
+                )
+              }
+              {
+                fileSize && (
+                  <div class="flex items-center gap-2">
+                    <Icon icon="file" size={5} color="content-offset" />
+                    <dt class="sr-only">File size</dt>
+                    <dd class="text-sm font-semibold">{fileSize}</dd>
+                  </div>
+                )
+              }
+            </dl>
+          </section>
+        </div>
       </div>
 
       <section
-        class="md:mt-4 md:mb-8 pt-4 md:p-4"
+        class="mt-6 md:mt-8 md:mb-8 rounded-2xl border border-trim-offset bg-page-base p-6 md:p-8"
         aria-label="Resource details"
       >
         <Content components={{ ...Components }} />
@@ -107,10 +124,13 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
 
     {/* Right column: download form */}
     <div class="lg:col-span-1 lg:sticky lg:top-24">
-      <div class="bg-(--color-blue-600) p-6 md:p-8 rounded-2xl border border-(--color-blue-800)">
+      <div class="rounded-2xl bg-page-inverse p-6 md:p-8 shadow-lg">
         <div class="mb-6">
-          <h3 class="text-xl md:text-2xl font-semibold mb-2 text-white">{title}</h3>
-          <p class="text-(--color-blue-100)">
+          <p class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-content-inverse-active">
+            Instant Access
+          </p>
+          <h3 class="text-xl md:text-2xl font-semibold mb-2 text-primary-inverse">Get The Ebook</h3>
+          <p class="text-content-inverse-active">
             Fill out the form below to receive your {fileType.toLowerCase()} instantly.
           </p>
         </div>
@@ -124,15 +144,15 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
           <div class="space-y-4">
             {/* First Name */}
             <div class="space-y-2">
-              <label for="firstName" class="block text-(--color-blue-100) text-sm font-medium">
-                First Name <span class="text-(--color-blue-200)">*</span>
+              <label for="firstName" class="block text-content-inverse text-sm font-medium">
+                First Name <span class="text-content-inverse-active">*</span>
               </label>
               <input
                 type="text"
                 id="firstName"
                 name="firstName"
                 autocomplete="given-name"
-                class="w-full px-4 py-3 border border-(--color-blue-400) rounded-xl bg-blue-800/40 text-white placeholder:text-(--color-blue-300) focus:border-(--color-blue-200) focus:ring-0 focus:outline-none focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                class="w-full rounded-xl bg-page-base px-4 py-3 placeholder:text-content-offset hover:bg-page-offset transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
                 required
                 placeholder="John"
                 minlength="2"
@@ -142,15 +162,15 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
 
             {/* Last Name */}
             <div class="space-y-2">
-              <label for="lastName" class="block text-(--color-blue-100) text-sm font-medium">
-                Last Name <span class="text-(--color-blue-200)">*</span>
+              <label for="lastName" class="block text-content-inverse text-sm font-medium">
+                Last Name <span class="text-content-inverse-active">*</span>
               </label>
               <input
                 type="text"
                 id="lastName"
                 name="lastName"
                 autocomplete="family-name"
-                class="w-full px-4 py-3 border border-(--color-blue-400) rounded-xl bg-blue-800/40 text-white placeholder:text-(--color-blue-300) focus:border-(--color-blue-200) focus:ring-0 focus:outline-none focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                class="w-full rounded-xl bg-page-base px-4 py-3 placeholder:text-content-offset hover:bg-page-offset transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
                 required
                 placeholder="Doe"
                 minlength="2"
@@ -161,15 +181,15 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
 
           {/* Work Email */}
           <div class="space-y-2">
-            <label for="workEmail" class="block text-(--color-blue-100) text-sm font-medium">
-              Work Email <span class="text-(--color-blue-200)">*</span>
+            <label for="workEmail" class="block text-content-inverse text-sm font-medium">
+              Work Email <span class="text-content-inverse-active">*</span>
             </label>
             <input
               type="email"
               id="workEmail"
               name="workEmail"
               autocomplete="email"
-              class="w-full px-4 py-3 border border-(--color-blue-400) rounded-xl bg-blue-800/40 text-white placeholder:text-(--color-blue-300) focus:border-(--color-blue-200) focus:ring-0 focus:outline-none focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+              class="w-full rounded-xl bg-page-base px-4 py-3 placeholder:text-content-offset hover:bg-page-offset transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
               required
               placeholder="john.doe@company.com"
             />
@@ -184,13 +204,13 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
           />
 
           {/* Privacy Notice */}
-          <div class="pt-4 border-t border-(--color-blue-500)">
-            <p class="text-xs text-(--color-blue-100) leading-relaxed">
+          <div class="pt-4 border-t border-primary-offset/60">
+            <p class="text-xs text-content-inverse leading-relaxed">
               By submitting this form, you agree to receive marketing communications from Webstack
               Builders. You can unsubscribe at any time. View our
               <a
                 href="/privacy"
-                class="text-white underline hover:text-(--color-blue-100) focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-(--color-blue-600) rounded"
+                class="text-content-inverse underline decoration-current decoration-dotted underline-offset-2 hover:text-content-inverse hover:decoration-current rounded focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
               >
                 Privacy Policy
               </a>.
@@ -204,7 +224,7 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
                 type="submit"
                 id="downloadSubmitBtn"
                 text="Download Now"
-                class="w-full bg-white text-blue-700 font-semibold py-3 px-6 rounded-xl hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-(--color-blue-600) transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed normal-case tracking-normal border-0"
+                class="w-full bg-success-offset text-page-inverse font-semibold py-3 px-6 rounded-xl hover:bg-success focus-visible:bg-success transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed normal-case tracking-normal border-0"
               />
             </div>
           </Confetti>
@@ -215,7 +235,7 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
               href={normalizedDownloadUrl}
               target="_blank"
               rel="noopener noreferrer"
-              class="block w-full bg-(--color-green-600) text-white font-semibold py-3 px-6 rounded-xl hover:bg-(--color-green-700) focus:outline-none focus:ring-2 focus:ring-(--color-green-600) focus:ring-offset-2 transition-all duration-200 text-center"
+              class="block w-full bg-success text-primary-inverse font-semibold py-3 px-6 rounded-xl hover:bg-success-offset focus:outline-none focus:ring-2 focus:ring-success focus:ring-offset-2 focus:ring-offset-page-active transition-all duration-200 text-center"
               id="downloadBtn"
             >
               <Icon icon="download-document" color="inherit" size={5} classes="inline-block mr-2 -mt-1" />

src/content/articles/mtls-certificate-rotation-service-mesh-authentication/download.mdx

@@ -20,6 +20,9 @@ This complete guide teaches you:
 
 <List
   variant="check-icons-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     { text: "One-way versus mutual TLS: identity verification at the network layer" },
     { text: "Certificate anatomy: Subject, SANs, validity periods, and Extended Key Usage" },

src/pages/downloads/[...slug].astro

@@ -33,6 +33,7 @@ const path = `/downloads/${download.id.replace(/\/download$/, '')}`
   path={path}
   breadcrumbTitle={download.data.title}
   section="Downloads"
+  description=""
 >
   <DownloadPage download={download} />
 </PageLayout>