niinaad5 · Oct 8, 2026 · Oct 8, 2026 · Oct 8, 2026
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -47,7 +47,7 @@ For a simple local development environment running on PHP, you will need:
 
 #### GNU/Linux Based Operating Systems
 
-First, install Node.js (18.x recommended) from [Nodesource](https://github.com/nodesource/distributions/blob/master/README.md#debian-and-ubuntu-based-distributions).
+First, install Node.js (22.x recommended) from [Nodesource](https://github.com/nodesource/distributions/blob/master/README.md#debian-and-ubuntu-based-distributions).
 
 _If you are on an unsupported version of elementary OS—i.e. during development of a new version—you may need to download the provided installation script, modify it first to map `elementaryOS` and the version codename to `Ubuntu` and its equivalent codename, then `chmod +x` the script and run it as root._
 
@@ -77,7 +77,7 @@ and rebuild on the fly.
 
 First, make sure you have your system updated.
 
-Second, install Node.js (18.x recommended) from [Nodejs.org](https://nodejs.org).
+Second, install Node.js (22.x recommended) from [Nodejs.org](https://nodejs.org).
 
 Then follow these directions from your favorite shell:
 

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v7
         with:
-          node-version: 18 # This Node version matches the server.
+          node-version: 22 # This Node version matches the server.
 
       - name: Install
         run: npm ci

diff --git a/.github/workflows/update_translations.yml b/.github/workflows/update_translations.yml
@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v7
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Setup submodules
         run: git submodule init && git submodule update --force --rebase

diff --git a/_backend/preload.php b/_backend/preload.php
@@ -9,7 +9,7 @@
 $sitewide['author'] = 'elementary, Inc.';
 $sitewide['description'] = 'Thoughtful, capable, and ethical computing';
 $sitewide['image'] = 'https://elementary.io/images/preview.png';
-$sitewide['theme-color'] = '#3689e6';
+$sitewide['theme-color'] = '#fff';
 
 // Autodetect website root path
 $serverRoot = $_SERVER['DOCUMENT_ROOT'];

diff --git a/_styles/main.css b/_styles/main.css
@@ -737,14 +737,26 @@ select,
   text-align: center;
   text-decoration: none;
   text-shadow: 0 1px rgba(255, 255, 255, 0.4);
-  transition: all 100ms ease-in;
+  transition: all 150ms ease;
 }
 
 button,
 .button {
   display: inline-block;
 }
 
+button:hover,
+select:hover,
+.button:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.25);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
+    0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
 button:focus,
 .button:focus {
   border-color: rgba(77, 156, 209, 0.8);
@@ -757,6 +769,19 @@ button:focus,
   text-decoration: none;
 }
 
+button:focus-visible,
+select:focus-visible,
+.button:focus-visible {
+  border-color: rgba(77, 156, 209, 0.9);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
+    0 0 0 2px rgba(77, 156, 209, 0.4),
+    0 3px 6px rgba(12, 128, 200, 0.23);
+  outline: none;
+}
+
 button:active,
 .button:active,
 button.active,
@@ -779,6 +804,37 @@ button.suggested-action,
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 }
 
+button.suggested-action:hover,
+.button.suggested-action:hover {
+  background-color: #70c1f5;
+  background-image: linear-gradient(to bottom, #5cb3ed, #3b94d2);
+  border-color: #2b74a4;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
+    0 2px 4px rgba(18, 92, 146, 0.25);
+}
+
+button.suggested-action:focus,
+.button.suggested-action:focus {
+  border-color: #2b74a4;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
+    0 0 0 2px rgba(77, 156, 209, 0.8),
+    0 3px 6px rgba(12, 128, 200, 0.23);
+}
+
+button.suggested-action:active,
+.button.suggested-action:active {
+  background-color: #328ecc;
+  background-image: linear-gradient(to bottom, #2b7eb6, #3b94d2);
+  border-color: #246590;
+  box-shadow:
+    inset 0 1px 2px rgba(0, 0, 0, 0.2),
+    0 1px 0 0 rgba(255, 255, 255, 0.3);
+}
+
 .button.flat {
   background: rgba(0, 0, 0, 0.07);
   border: none;
@@ -790,7 +846,7 @@ button.suggested-action,
   min-width: 250px;
   padding: 7px;
   text-shadow: none;
-  transition: opacity 200ms ease;
+  transition: all 200ms ease;
 }
 
 .button.flat:focus,
@@ -801,6 +857,12 @@ button.suggested-action,
     0 5px 10px -2px rgba(0, 0, 0, 0.15);
 }
 
+.button.flat:active {
+  background: rgba(0, 0, 0, 0.07);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  opacity: 1;
+}
+
 .light .button.flat,
 .light .button.flat .svg {
   border-color: #fff;

diff --git a/dev/Dockerfile b/dev/Dockerfile
@@ -1,11 +1,11 @@
 # Current server versions (2026-02-28):
 # - PHP: 8.1.2
 # - Nginx: 1.18
-# - Node: 18.17.1
-# - NPM: 9.6.7
+# - Node: 22
+# - NPM: 10
 # - Composer: 2.2.6
 FROM composer:2.5 AS composer
-FROM node:18 AS node
+FROM node:22 AS node
 FROM php:8.1-fpm
 
 COPY --from=composer /usr/bin/composer /usr/bin/composer

diff --git a/docs/_mdr/index.php b/docs/_mdr/index.php
@@ -68,8 +68,6 @@
             'styles/docs.css'
         );
 
-        $page['theme-color'] = '#403757';
-
         include $Templates['Header'];
         echo '<div class="row docs">';
         include $Templates['Alert'];

diff --git a/get-involved.php b/get-involved.php
@@ -2,7 +2,6 @@
 require_once __DIR__.'/_backend/preload.php';
 
 $page['title'] = 'Get Involved with elementary OS';
-$page['theme-color'] = '#3E4E54';
 
 $page['styles'] = array(
     'https://fonts.googleapis.com/css?family=Marck+Script',

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.4.0",
   "engines": {
-    "node": ">=18.17.1"
+    "node": ">=22.0.0"
   },
   "description": "The elementary.io Website http://elementary.io",
   "dependencies": {

diff --git a/thank-you.php b/thank-you.php
@@ -2,7 +2,6 @@
 require_once __DIR__.'/_backend/preload.php';
 
 $page['title'] = 'Thank You for Downloading elementary OS';
-$page['theme-color'] = '#3E4E54';
 
 include $template['header'];
 include $template['alert'];