refactor: migrate tailwind 3 to tailwind 4

src/components/Button.astro

@@ -28,10 +28,10 @@ const {
         isPrimary
           ? 'border-dark bg-dark text-paper shadow-lg'
           : isAlert
-            ? 'bg-red-300 text-dark'
+            ? 'text-dark bg-red-300'
             : !isBordered
               ? 'bg-subtle'
-              : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
+              : '!transition-bg border-dark hover:bg-dark hover:text-paper border-2 hover:shadow-xs',
       ]}
       {...props}
     >
@@ -47,10 +47,10 @@ const {
         isPrimary
           ? 'border-dark bg-dark text-paper shadow-md'
           : isAlert
-            ? 'bg-red-300 text-dark'
+            ? 'text-dark bg-red-300'
             : !isBordered
               ? ''
-              : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
+              : '!transition-bg border-dark hover:bg-dark hover:text-paper border-2 hover:shadow-xs',
       ]}
       {...props}
     >
@@ -58,14 +58,3 @@ const {
     </button>
   )
 }
-<style>
-  button,
-  a {
-    font-size: 0.9rem;
-
-    &[disabled] {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-</style>

src/components/Features.astro

@@ -242,7 +242,7 @@ const descriptions = Object.values(features.featureTabs).map(tab => tab.descript
 
 <style>
   .feature {
-    @apply w-full cursor-pointer select-none rounded-lg p-4 opacity-0 hover:bg-subtle;
+    @apply hover:bg-subtle w-full cursor-pointer rounded-lg p-4 opacity-0 select-none;
     transition: background 0.2s ease-in-out;
 
     &[data-active='true'] {
@@ -251,7 +251,7 @@ const descriptions = Object.values(features.featureTabs).map(tab => tab.descript
   }
 
   .feature-tab {
-    @apply rounded-lg px-4 py-2 text-lg font-medium opacity-0 hover:bg-subtle;
+    @apply hover:bg-subtle rounded-lg px-4 py-2 text-lg font-medium opacity-0;
     transition: background 0.2s ease-in-out;
 
     &[data-active='true'] {

src/components/ModsList.astro

@@ -33,10 +33,10 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
 <div id="mods-list-container" class="flex flex-1 flex-col">
   <div class="flex flex-col items-center gap-4">
     <div
-      class="flex w-full flex-row items-center justify-center rounded-full border-2 border-dark pr-6"
+      class="border-dark flex w-full flex-row items-center justify-center rounded-full border-2 pr-6"
     >
       <input
-        class="w-full rounded-full bg-transparent py-2 pl-6 pr-4 text-lg outline-none"
+        class="w-full rounded-full bg-transparent py-2 pr-4 pl-6 text-lg outline-hidden"
         id="search"
         placeholder={translations.search}
         type="text"
@@ -44,7 +44,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
       <button
         id="clear-search"
         title="Clear search"
-        class="hidden rounded-full p-1 transition-colors duration-150 hover:bg-subtle"
+        class="hover:bg-subtle hidden rounded-full p-1 transition-colors duration-150"
         aria-label="Clear search"
         tabindex="0"
       >
@@ -55,7 +55,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
     <div class="mb-1 flex w-full items-center justify-between gap-4 sm:mb-2">
       <div class="flex items-start gap-4">
         <button
-          class="flex items-center gap-2 rounded-full border border-subtle px-5 py-1 text-sm font-semibold shadow-sm transition-colors hover:bg-muted focus:bg-coral/10 sm:text-base"
+          class="border-subtle hover:bg-muted focus:bg-coral/10 flex items-center gap-2 rounded-full border px-5 py-1 text-sm font-semibold shadow-xs transition-colors sm:text-base"
           id="created-sort"
           type="button"
         >
@@ -67,7 +67,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
           </span>
         </button>
         <button
-          class="flex items-center gap-2 rounded-full border border-subtle px-5 py-1 text-sm font-semibold shadow-sm transition-colors hover:bg-muted focus:bg-coral/10 sm:text-base"
+          class="border-subtle hover:bg-muted focus:bg-coral/10 flex items-center gap-2 rounded-full border px-5 py-1 text-sm font-semibold shadow-xs transition-colors sm:text-base"
           id="updated-sort"
           type="button"
         >
@@ -84,7 +84,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
         <label class="text-md font-semibold" for="limit">
           {translations.sort.perPage}
         </label>
-        <select class="rounded border border-dark bg-paper px-2 py-1 text-sm" id="limit">
+        <select class="border-dark bg-paper rounded-xs border px-2 py-1 text-sm" id="limit">
           <option value="12">12</option>
           <option value="24">24</option>
           <option value="48">48</option>
@@ -103,7 +103,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
           class="mod-card flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
           href={getLocalePath(`/mods/${mod.id}`)}
         >
-          <div class="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
+          <div class="border-dark relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 object-cover shadow-md">
             <img
               alt={mod.name}
               class="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
@@ -140,7 +140,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
             <input
               id="page-input"
               aria-label="Page number"
-              class="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
+              class="border-dark w-16 rounded-xs border bg-transparent px-2 py-1 text-center text-sm"
               type="text"
               value="1"
             />
@@ -152,7 +152,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
             </span>
           </form>
           <a
-            class="px-3 py-2 text-dark hover:text-gray-600"
+            class="text-dark px-3 py-2 hover:text-gray-600"
             href={getLocalePath('/mods?page=2')}
             data-page="2"
           >
@@ -660,7 +660,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
           <input
             id="page-input"
             aria-label="Page number"
-            class="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
+            class="w-16 rounded-xs border border-dark bg-transparent px-2 py-1 text-center text-sm"
             type="text"
             value="${this.state.page}"
           />

src/components/NavBar.astro

@@ -22,7 +22,7 @@ const {
 <!-- Desktop Navigation -->
 <Astronav>
   <MenuItems
-    class="container relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6"
+    class="bg-paper relative z-20 container grid w-full grid-cols-2 items-center gap-2 py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6"
   >
     <a class="flex items-center gap-2 text-lg font-bold" href={getLocalePath('/')}>
       <Logo class="text-coral" />
@@ -121,7 +121,7 @@ const {
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
         for="mobile-menu-toggle"
-        class="cursor-pointer p-2 text-dark lg:hidden"
+        class="text-dark cursor-pointer p-2 lg:hidden"
         aria-label="Open menu"
       >
         <MenuIcon class="h-6 w-6" />
@@ -132,29 +132,3 @@ const {
 
 <!-- Mobile Hamburger Menu Content -->
 <MobileMenu />
-
-<style>
-  .navbar-dropdown {
-    @apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm;
-    & .dropdown-item {
-      @apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200;
-
-      &:hover {
-        @apply bg-muted;
-      }
-
-      & .dropdown-title {
-        @apply font-bold;
-      }
-
-      & .dropdown-description {
-        @apply text-sm;
-      }
-    }
-  }
-</style>
-<style is:global>
-  #theme-switcher * {
-    @apply text-dark;
-  }
-</style>

src/components/ReleaseNoteItem.astro

@@ -115,7 +115,7 @@ generateItems(props.knownIssues, 'known')
     {
       isTwilight ? (
         <a
-          class="!mb-2 block w-fit rounded-full bg-coral px-3 py-1 text-xs text-paper"
+          class="bg-coral text-paper !mb-2 block w-fit rounded-full px-3 py-1 text-xs"
           href={getLocalePath('/download?twilight')}
         >
           {releaseNoteItem.twilight}
@@ -142,7 +142,7 @@ generateItems(props.knownIssues, 'known')
               <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
               <a
                 rel="noopener noreferrer"
-                class="text-xs text-coral underline decoration-wavy opacity-80"
+                class="text-coral text-xs underline decoration-wavy opacity-80"
                 href={`https://www.mozilla.org/en-US/firefox/${ffVersion}/releasenotes/`}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -155,7 +155,7 @@ generateItems(props.knownIssues, 'known')
         <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
         <a
           rel="noopener noreferrer"
-          class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
+          class="zen-link text-xs whitespace-nowrap !no-underline opacity-80"
           target="_blank"
           href={`https://github.com/zen-browser/desktop/releases/tag/${isTwilight ? 'twilight' : props.version}`}
           >{releaseNoteItem.githubRelease}</a
@@ -166,7 +166,7 @@ generateItems(props.knownIssues, 'known')
               <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
               <a
                 rel="noopener noreferrer"
-                class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
+                class="zen-link text-xs whitespace-nowrap !no-underline opacity-80"
                 target="_blank"
                 href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}
               >
@@ -181,7 +181,7 @@ generateItems(props.knownIssues, 'known')
               <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
               <a
                 rel="noopener noreferrer"
-                class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
+                class="zen-link text-xs whitespace-nowrap !no-underline opacity-80"
                 target="_blank"
                 href={compareLink}
               >
@@ -230,44 +230,4 @@ generateItems(props.knownIssues, 'known')
       }
     </div>
   </div>
-  <style is:global>
-    .ac-accordion-item-title {
-      @apply !text-dark;
-      flex-direction: row-reverse !important;
-
-      &:hover {
-        opacity: 0.8 !important;
-      }
-
-      & > svg {
-        color: var(--zen-dark) !important;
-      }
-    }
-
-    .ac-accordion-item {
-      transition: height 0.2s ease-in-out !important;
-
-      & li {
-        opacity: 0.5;
-      }
-    }
-    .ac-accordion {
-      &.ac-accordion--light {
-        > * + * {
-          border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
-          width: 100%;
-        }
-      }
-    }
-
-    .extra {
-      & a {
-        @apply !text-coral underline underline-offset-4;
-      }
-    }
-
-    .release-note-item {
-      border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
-    }
-  </style>
 </section>

src/components/download/ButtonCard.astro

@@ -21,7 +21,7 @@ const { label, href, checksum } = Astro.props
 <div class="relative flex flex-col">
   <a
     href={href}
-    class="download-link group flex flex-1 items-center justify-between rounded-2xl border border-subtle p-4 transition-all duration-200 hover:border-coral hover:shadow-sm data-[twilight='true']:hover:border-zen-blue dark:hover:shadow-md"
+    class="download-link group border-subtle hover:border-coral data-[twilight='true']:hover:border-zen-blue flex flex-1 items-center justify-between rounded-2xl border p-4 transition-all duration-200 hover:shadow-xs dark:hover:shadow-md"
     rel="noopener noreferrer"
     tabindex="0"
   >
@@ -32,7 +32,7 @@ const { label, href, checksum } = Astro.props
           <span class="group/checksum relative hidden items-center md:flex">
             <button
               type="button"
-              class="checksum-icon-btn text-muted-foreground flex items-center justify-center rounded-full p-1 transition-colors duration-150 hover:text-coral focus:outline-none focus:ring-2 focus:ring-coral data-[twilight='true']:hover:text-zen-blue data-[twilight='true']:focus:ring-zen-blue"
+              class="checksum-icon-btn text-muted-foreground hover:text-coral focus:ring-coral data-[twilight='true']:hover:text-zen-blue data-[twilight='true']:focus:ring-zen-blue flex items-center justify-center rounded-full p-1 transition-colors duration-150 focus:ring-2 focus:outline-hidden"
               aria-label="Show SHA-256 checksum"
               tabindex="0"
             >
@@ -50,14 +50,14 @@ const { label, href, checksum } = Astro.props
                 <path d="M9 12l2 2 4-4" />
               </svg>
             </button>
-            <span class="absolute -top-10 left-1/2 z-50 hidden min-w-[120px] -translate-x-1/2 select-none whitespace-nowrap rounded-md border border-subtle bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs text-gray-700 opacity-100 shadow transition-opacity duration-150 group-focus-within/checksum:hidden group-hover/checksum:flex group-focus-within/checksum:group-hover/checksum:hidden dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
+            <span class="border-subtle absolute -top-10 left-1/2 z-50 hidden min-w-[120px] -translate-x-1/2 rounded-md border bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs whitespace-nowrap text-gray-700 opacity-100 shadow-sm transition-opacity duration-150 select-none group-focus-within/checksum:hidden group-hover/checksum:flex group-focus-within/checksum:group-hover/checksum:hidden dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
               {buttonCard.showChecksum}
             </span>
-            <span class="checksum-tooltip popover absolute -left-14 -top-12 z-50 hidden min-w-[220px] items-center gap-2 whitespace-nowrap rounded-md border border-subtle bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs text-gray-700 opacity-100 shadow transition-opacity duration-150 group-focus-within/checksum:flex dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
+            <span class="checksum-tooltip popover border-subtle absolute -top-12 -left-14 z-50 hidden min-w-[220px] items-center gap-2 rounded-md border bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs whitespace-nowrap text-gray-700 opacity-100 shadow-sm transition-opacity duration-150 group-focus-within/checksum:flex dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
-              <span class="font-mono flex-1 truncate text-xs">{checksum}</span>
+              <span class="flex-1 truncate font-mono text-xs">{checksum}</span>
               <button
                 type="button"
-                class="copy-btn rounded bg-coral px-2 py-1 text-xs text-white hover:bg-coral/80 data-[twilight='true']:bg-zen-blue data-[twilight='true']:hover:bg-zen-blue/80"
+                class="copy-btn bg-coral hover:bg-coral/80 data-[twilight='true']:bg-zen-blue data-[twilight='true']:hover:bg-zen-blue/80 rounded-xs px-2 py-1 text-xs text-white"
               >
                 {buttonCard.copy}
               </button>
@@ -69,12 +69,12 @@ const { label, href, checksum } = Astro.props
     <div class="flex flex-col items-end gap-2">
       <div class="flex items-center gap-2">
         <span
-          class="release-type-tag rounded-full bg-coral/10 px-2 py-1 text-xs font-medium text-coral transition-colors duration-200 group-hover:bg-coral/20 data-[twilight='true']:bg-zen-blue/10 data-[twilight='true']:text-zen-blue data-[twilight='true']:group-hover:bg-zen-blue/20"
+          class="release-type-tag bg-coral/10 text-coral group-hover:bg-coral/20 data-[twilight='true']:bg-zen-blue/10 data-[twilight='true']:text-zen-blue data-[twilight='true']:group-hover:bg-zen-blue/20 rounded-full px-2 py-1 text-xs font-medium transition-colors duration-200"
         >
           {buttonCard.beta}
         </span>
         <div
-          class="download-arrow-icon text-muted-foreground rounded-xl border border-subtle p-2 transition-colors duration-200 group-hover:border-coral group-hover:text-coral data-[twilight='true']:group-hover:border-zen-blue data-[twilight='true']:group-hover:text-zen-blue"
+          class="download-arrow-icon text-muted-foreground border-subtle group-hover:border-coral group-hover:text-coral data-[twilight='true']:group-hover:border-zen-blue data-[twilight='true']:group-hover:text-zen-blue rounded-xl border p-2 transition-colors duration-200"
         >
           <svg
             width="16"

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import '~/styles/global.css'
+
 interface Props {
   title: string
   description?: string
@@ -98,77 +100,10 @@ const locale = getLocale(Astro)
     </script>
   </head>
   <body
-    class="min-h-[max(100dvh,_64rem)] overflow-x-hidden text-balance bg-paper font-['bricolage-grotesque'] text-dark"
+    class="bg-paper text-dark font-bricolage min-h-[max(100dvh,_64rem)] overflow-x-hidden text-balance"
   >
     <NavBar />
     <slot />
     <Footer />
   </body>
 </html>
-<style is:global>
-  @font-face {
-    font-family: 'Junicode';
-    src: url('/fonts/JunicodeVF-Roman-subset.woff2') format('woff2');
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Junicode-Italic';
-    src: url('/fonts/JunicodeVF-Italic-subset.woff2') format('woff2');
-    font-display: swap;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  :root {
-    --zen-paper: #f2f0e3;
-    --zen-dark: #2e2e2e;
-    --zen-muted: rgba(0, 0, 0, 0.05);
-    --zen-subtle: rgba(0, 0, 0, 0.05);
-
-    &[data-theme='dark'] {
-      --zen-paper: #1f1f1f;
-      --zen-dark: #d1cfc0;
-      --zen-muted: rgba(255, 255, 255, 0.05);
-      --zen-subtle: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  html {
-    scroll-behavior: smooth;
-  }
-
-  body,
-  body > * {
-    font-family: 'Bricolage Grotesque', sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-weight: 500;
-    font-variation-settings: 'width' 100;
-  }
-
-  h1 .italic {
-    font-family: 'Junicode-Italic', serif;
-    font-weight: 400;
-    font-feature-settings: 'swsh' 0;
-    font-style: normal;
-  }
-
-  .zen-link {
-    @apply text-coral underline underline-offset-4;
-  }
-</style>
-<style is:global>
-  /* Declare a custom CSS class to make the icon look right */
-  .svg-inline--fa {
-    overflow: visible;
-    box-sizing: content-box;
-    display: inline-block;
-    height: 1em;
-    vertical-align: -0.125em;
-  }
-</style>

src/pages/[...locale]/download.astro

@@ -36,20 +36,20 @@ const platformDescriptions = download.platformDescriptions
 <DownloadScript />
 
 <Layout title={layout.download.title} description={layout.download.description}>
-  <main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
+  <main class="data-[os='windows']:bg-zen-blue flex min-h-screen flex-col px-6">
-    <div class="container relative mx-auto py-12">
+    <div class="relative container mx-auto py-12">
-      <div class="mb-6 mt-12 flex flex-col gap-4">
+      <div class="mt-12 mb-6 flex flex-col gap-4">
         <Description id="download-title" class="text-6xl font-bold">{download.title}</Description>
         <Description class="max-w-xl text-pretty">
           {download.description}
         </Description>
         <div
           id="twilight-info"
-          class="hidden max-w-xl items-center justify-center gap-3 text-pretty rounded-xl border border-zen-blue/20 bg-zen-blue/5 p-4 text-left data-[twilight='true']:flex"
+          class="border-zen-blue/20 bg-zen-blue/5 hidden max-w-xl items-center justify-center gap-3 rounded-xl border p-4 text-left text-pretty data-[twilight='true']:flex"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="mt-0.5 h-5 w-5 flex-shrink-0 text-zen-blue"
+            class="text-zen-blue mt-0.5 h-5 w-5 shrink-0"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -68,10 +68,10 @@ const platformDescriptions = download.platformDescriptions
       <!-- Platform selector -->
       <div class="mb-6 flex">
         <div
-          class="inline-flex rounded-3xl bg-[rgba(255,255,255,0.4)] p-2 shadow-md dark:bg-[rgba(0,0,0,0.3)] dark:shadow-sm"
+          class="inline-flex rounded-3xl bg-[rgba(255,255,255,0.4)] p-2 shadow-md dark:bg-[rgba(0,0,0,0.3)] dark:shadow-xs"
         >
           <button
-            class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
+            class="platform-selector data-[active='true']:bg-subtle rounded-2xl px-5 py-2.5 transition-all duration-200"
             data-platform="mac"
           >
             <span class="flex items-center gap-2">
@@ -80,7 +80,7 @@ const platformDescriptions = download.platformDescriptions
             </span>
           </button>
           <button
-            class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
+            class="platform-selector data-[active='true']:bg-subtle rounded-2xl px-5 py-2.5 transition-all duration-200"
             data-platform="windows"
           >
             <span class="flex items-center gap-2">
@@ -89,7 +89,7 @@ const platformDescriptions = download.platformDescriptions
             </span>
           </button>
           <button
-            class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
+            class="platform-selector data-[active='true']:bg-subtle rounded-2xl px-5 py-2.5 transition-all duration-200"
             data-platform="linux"
           >
             <span class="flex items-center gap-2">
@@ -152,10 +152,10 @@ const platformDescriptions = download.platformDescriptions
                 </p>
               </div>
               <div
-                class="grid aspect-square h-12 w-12 place-items-center rounded-xl border border-subtle transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-10"
+                class="border-subtle hover:bg-coral/10 group-hover:border-coral/10 grid aspect-square h-12 w-12 place-items-center rounded-xl border transition-all duration-100"
               >
                 <div
-                  class="text-muted-foreground transition-all duration-200 group-hover:text-coral"
+                  class="text-muted-foreground group-hover:text-coral transition-all duration-200"
                 >
                   <Fragment set:html={githubIcon.html} />
                 </div>
@@ -177,10 +177,10 @@ const platformDescriptions = download.platformDescriptions
                 </p>
               </div>
               <div
-                class="rounded-xl border border-subtle p-3 transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-20"
+                class="border-subtle hover:bg-coral/10 group-hover:border-coral/20 rounded-xl border p-3 transition-all duration-100"
               >
                 <ExternalLinkIcon
-                  class="h-5 w-5 transition-all duration-200 group-hover:text-coral"
+                  class="group-hover:text-coral h-5 w-5 transition-all duration-200"
                 />
               </div>
             </div>
@@ -189,8 +189,8 @@ const platformDescriptions = download.platformDescriptions
       </section>
 
       <!-- Security Notice -->
-      <div class="grid grid-cols-[auto,1fr] gap-4 rounded-2xl bg-subtle bg-opacity-10 p-6">
+      <div class="bg-subtle grid grid-cols-[auto_1fr] gap-4 rounded-2xl p-6">
-        <div class="h-fit rounded-xl bg-subtle p-3">
+        <div class="bg-subtle h-fit rounded-xl p-3">
           <LockIcon class="h-5 w-5" />
         </div>
 
@@ -204,23 +204,3 @@ const platformDescriptions = download.platformDescriptions
     </div>
   </main>
 </Layout>
-
-<style is:global>
-  /* Download card icon */
-  .download-card__icon {
-    @apply flex h-10 w-10 items-center justify-center rounded-full bg-subtle p-2 text-coral data-[twilight='true']:text-zen-blue;
-  }
-
-  /* Make FontAwesome icons match size */
-  .download-card__icon svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-</style>
-
-<style is:global>
-  .os-icon svg {
-    height: 3rem;
-    width: 3rem;
-  }
-</style>

src/pages/[...locale]/index.astro

@@ -20,18 +20,3 @@ const { layout } = getUI(locale)
     <Community />
   </main>
 </Layout>
-<style>
-  @keyframes headerSlideIn {
-    0% {
-      transform: translateY(100%);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  #header-browser-image {
-    animation: headerSlideIn 0.5s ease-in-out;
-  }
-</style>
-<script></script>

src/pages/[...locale]/mods/[...slug].astro

@@ -61,7 +61,7 @@ const {
   ogImage={mod.image}
 >
   <main class="container mt-6 2xl:mt-0">
-    <div class="mx-auto mb-24 mt-12 flex flex-col gap-6 lg:mt-32">
+    <div class="mx-auto mt-12 mb-24 flex flex-col gap-6 lg:mt-32">
       <div
         id="install-theme-error"
         class="flex flex-col items-center justify-center gap-2 rounded-xl bg-red-200 p-2 pl-4 md:flex-row md:justify-between dark:bg-red-700"
@@ -74,7 +74,7 @@ const {
         </div>
         <Button
           href="/download"
-          class="inline-flex flex-shrink-0 whitespace-nowrap !rounded-lg bg-red-300 dark:bg-red-800"
+          class="inline-flex shrink-0 !rounded-lg bg-red-300 whitespace-nowrap dark:bg-red-800"
           isAlert
         >
           {slug.alert.button}
@@ -89,10 +89,10 @@ const {
       <img
         src={mod.image}
         alt={mod.name}
-        class="h-full w-full rounded-xl border-2 border-dark object-cover shadow"
+        class="border-dark object-cover-sm h-full w-full rounded-xl border-2"
       />
       <div class="flex flex-col justify-between gap-2 sm:flex-row">
-        <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
+        <div class="flex shrink-0 flex-col gap-2 font-normal">
           <p
             set:html={slug.createdBy
               .replace(
@@ -134,8 +134,8 @@ const {
       -->
     </div>
     <div></div>
-  </main></Layout
+  </main>
->
+</Layout>
 
 <script>
   const backButton = document.getElementById('back-button') as HTMLAnchorElement

src/pages/[...locale]/release-notes/index.astro

@@ -21,7 +21,7 @@ const {
   <main
     class="container flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
   >
-    <div id="release-notes" class="py-42 flex min-h-screen w-full flex-col justify-center gap-8">
+    <div id="release-notes" class="flex min-h-screen w-full flex-col justify-center gap-8 py-42">
       <Description class="mt-48 text-6xl font-bold">{releaseNotes.topSection.title}</Description>
       <p
         class="text-base opacity-55"
@@ -46,7 +46,7 @@ const {
       {releaseNotesData.map(notes => <ReleaseNoteItem {...notes} />)}
     </div>
   </main>
-  <Button id="scroll-top" isPrimary class="fixed bottom-8 right-8" onclick="window.scrollTo(0, 0)">
+  <Button id="scroll-top" isPrimary class="fixed right-8 bottom-8" onclick="window.scrollTo(0, 0)">
     <p class="hidden items-center gap-2 sm:flex">
       {releaseNotes.backToTop}
       <ArrowUpIcon aria-hidden="true" class="size-4" />
@@ -54,17 +54,17 @@ const {
     <ArrowUpIcon aria-label="Back to the top" class="size-4 sm:hidden" />
   </Button>
 </Layout>
-<Modal id="version-modal" class="m-auto border border-[--zen-dark] !bg-paper">
+<Modal id="version-modal" class="!bg-paper m-auto border border-[--zen-dark]">
   <ModalHeader class="border-b border-[--zen-dark]">
-    <p class="text-4xl font-bold text-dark">{releaseNotes.chooseVersion}</p>
+    <p class="text-dark text-4xl font-bold">{releaseNotes.chooseVersion}</p>
   </ModalHeader>
   <ModalBody>
-    <div id="version-list" class="flex flex-col gap-2 text-xl text-dark">
+    <div id="version-list" class="text-dark flex flex-col gap-2 text-xl">
       {
         releaseNotesData.map(note => (
           <button
             aria-label={`Navigate to version ${note.version}`}
-            class="w-full text-left transition-colors duration-150 hover:text-coral"
+            class="hover:text-coral w-full text-left transition-colors duration-150"
             data-version={note.version}
           >
             {note.version}
@@ -131,9 +131,3 @@ const {
     }
   })
 </script>
-
-<style is:global>
-  #version-modal > * {
-    font-family: 'Bricolage Grotesque', sans-serif !important;
-  }
-</style>

src/styles/global.css

@@ -0,0 +1,210 @@
+@import 'tailwindcss';
+
+@font-face {
+  font-family: 'Junicode';
+  src: url('/fonts/JunicodeVF-Roman-subset.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Junicode-Italic';
+  src: url('/fonts/JunicodeVF-Italic-subset.woff2') format('woff2');
+  font-display: swap;
+}
+
+@theme {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+
+  --color-paper: #f2f0e3;
+  --color-coral: #f76f53;
+  --color-dark: #2e2e2e;
+  --color-subtle: rgba(0, 0, 0, 0.05);
+  --color-muted: rgba(0, 0, 0, 0.05);
+  --color-zen-blue: #6287f5;
+  --color-zen-green: #63f78b;
+  --font-junicode: 'Junicode, serif';
+  --font-junicode-italic: 'Junicode-Italic, serif';
+  --font-junicode--font-feature-settings: 'swsh' 1;
+  --font-bricolage: 'Bricolage Grotesque', sans-serif;
+  --font-bricolage--font-variation-settings: 'wdth' 100;
+  --default-font-family: var(--font-bricolage);
+
+  --animate-fade-in: fadeIn 2s ease-in-out;
+  --animate-breathe: breathe 5s ease-in-out infinite;
+  --animate-header-slide-in: headerSlideIn 0.5s ease-in-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes breathe {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+  }
+
+  @keyframes headerSlideIn {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body,
+body > * {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: 500;
+  font-variation-settings: 'wdth' 100;
+}
+
+h1 .italic {
+  font-family: 'Junicode-Italic', serif;
+  font-weight: 400;
+  font-feature-settings: 'swsh' 0;
+  font-style: normal;
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@layer base {
+  @variant dark {
+    --color-paper: #1f1f1f;
+    --color-dark: #d1cfc0;
+    --color-subtle: rgba(255, 255, 255, 0.1);
+    --color-muted: rgba(255, 255, 255, 0.05);
+  }
+}
+
+@utility container {
+  @apply mx-auto w-full px-4;
+
+  @media (min-width: 100%) {
+    @apply w-full max-w-full px-4;
+  }
+
+  @variant sm {
+    @apply w-full max-w-full;
+  }
+
+  @variant md {
+    @apply w-full max-w-256;
+  }
+
+  @variant lg {
+    @apply w-full max-w-256 px-6;
+  }
+
+  @variant xl {
+    @apply w-full max-w-320 px-8;
+  }
+}
+
+@layer components {
+  #theme-switcher * {
+    @apply text-dark;
+  }
+
+  #version-modal > * {
+    @apply font-bricolage!;
+  }
+
+  .zen-link {
+    @apply text-coral underline underline-offset-4;
+  }
+
+  .ac-accordion-item-title {
+    @apply !text-dark [&>svg]:text-dark! flex-row-reverse! hover:opacity-80!;
+  }
+
+  .ac-accordion-item {
+    @apply transition-[height]! duration-200! ease-in-out! [&>li]:opacity-50!;
+  }
+
+  .ac-accordion {
+    &.ac-accordion--light {
+      > * + * {
+        @apply w-full;
+
+        border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
+      }
+    }
+  }
+
+  .extra {
+    & a {
+      @apply !text-coral underline underline-offset-4;
+    }
+  }
+
+  .release-note-item {
+    border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+  }
+
+  .svg-inline--fa {
+    @apply box-border inline-block h-4 overflow-visible align-[-0.125em];
+  }
+
+  /* Download card icon */
+  .download-card__icon {
+    @apply bg-subtle text-coral data-[twilight='true']:text-zen-blue flex h-10 w-10 items-center justify-center rounded-full p-2;
+  }
+
+  /* Make FontAwesome icons match size */
+  .download-card__icon svg {
+    @apply h-6 w-6;
+  }
+
+  .os-icon svg {
+    @apply h-12 w-12;
+  }
+
+  button,
+  a {
+    font-size: 0.9rem;
+
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .navbar-dropdown {
+    @apply border-dark bg-paper absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 p-3 shadow-xs;
+    & .dropdown-item {
+      @apply flex cursor-pointer flex-col gap-2 rounded-lg p-4 transition-colors duration-200 select-none;
+
+      &:hover {
+        @apply bg-muted;
+      }
+
+      & .dropdown-title {
+        @apply font-bold;
+      }
+
+      & .dropdown-description {
+        @apply text-sm;
+      }
+    }
+  }
+}