Refine the official site with a more restrained visual identity

.github/workflows/ci.yml

@@ -23,7 +23,6 @@ concurrency:
 
 env:
   CARGO_TERM_COLOR: always
-  HURL_VERSION: 8.0.1
   REGISTRY_USERNAME: lovasoa
   REGISTRY_IMAGE: lovasoa/sqlpage
 
@@ -412,36 +411,6 @@ jobs:
           PATHS_OUTCOME: ${{ steps.paths.outcome }}
           ALL_EXAMPLES: ${{ steps.paths.outputs.all_examples }}
           MATCHED_EXAMPLES: ${{ steps.paths.outputs.changes }}
-      - name: Restore Hurl archive
-        id: hurl-cache
-        if: steps.examples.outputs.examples != '[]'
-        uses: actions/cache@v6
-        with:
-          path: .cache/hurl
-          key: hurl-${{ runner.os }}-x86_64-unknown-linux-gnu-${{ env.HURL_VERSION }}
-      - name: Download Hurl archive
-        if: steps.examples.outputs.examples != '[]' && steps.hurl-cache.outputs.cache-hit != 'true'
-        run: |
-          set -euo pipefail
-          archive="hurl-${HURL_VERSION}-x86_64-unknown-linux-gnu.tar.gz"
-          base_url="https://github.com/Orange-OpenSource/hurl/releases/download/${HURL_VERSION}"
-          mkdir -p .cache/hurl
-          curl --fail --location --retry 5 --retry-delay 2 --output ".cache/hurl/${archive}" "${base_url}/${archive}"
-          curl --fail --location --retry 5 --retry-delay 2 --output ".cache/hurl/${archive}.sha256" "${base_url}/${archive}.sha256"
-          (
-            cd .cache/hurl
-            expected_sha="$(tr -d '[:space:]' < "${archive}.sha256")"
-            actual_sha="$(sha256sum "$archive" | cut -d ' ' -f 1)"
-            test "$expected_sha" = "$actual_sha"
-          )
-      - name: Upload Hurl archive
-        if: steps.examples.outputs.examples != '[]'
-        uses: actions/upload-artifact@v7
-        with:
-          name: hurl-${{ env.HURL_VERSION }}-x86_64-unknown-linux-gnu
-          path: .cache/hurl/*
-          if-no-files-found: error
-          retention-days: 1
 
   hurl:
     name: hurl (${{ matrix.example }})
@@ -457,23 +426,12 @@ jobs:
         example: ${{ fromJSON(needs.hurl_examples.outputs.examples) }}
     steps:
       - uses: actions/checkout@v7
-      - name: Download Hurl archive
-        uses: actions/download-artifact@v8
-        with:
-          name: hurl-${{ env.HURL_VERSION }}-x86_64-unknown-linux-gnu
-          path: ${{ runner.temp }}/hurl
       - name: Install Hurl
+        # Use Ubuntu's build so apt resolves the matching libcurl/libxml2 ABI.
         run: |
-          set -euo pipefail
-          archive="hurl-${HURL_VERSION}-x86_64-unknown-linux-gnu.tar.gz"
-          (
-            cd "$RUNNER_TEMP/hurl"
-            expected_sha="$(tr -d '[:space:]' < "${archive}.sha256")"
-            actual_sha="$(sha256sum "$archive" | cut -d ' ' -f 1)"
-            test "$expected_sha" = "$actual_sha"
-            tar xzf "$archive" -C "$RUNNER_TEMP/hurl"
-          )
-          echo "$RUNNER_TEMP/hurl/hurl-${HURL_VERSION}-x86_64-unknown-linux-gnu/bin" >> "$GITHUB_PATH"
+          sudo apt-get update
+          sudo apt-get install -y --no-install-recommends hurl
+          hurl --version
       - name: Download SQLPage image
         uses: actions/download-artifact@v8
         with:

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## unreleased
 
+- Refined the official website with muted blue accents, simpler navigation, a clearer primary action, and a level SQL ribbon with vertical separators, and a grounded studio scene with brushed metal and physical reflections. Restored visible progress in the streaming comparison animation.
+
 - Restored parameter reuse for repeated variables on SQL Server, PostgreSQL, and SQLite, fixing SQL Server and PostgreSQL queries that repeat a variable-dependent expression in `SELECT` and `GROUP BY`.
 
 ## v0.47.0 (2026-10-15)

examples/official-site/assets/brand/brand.css

@@ -5,14 +5,100 @@
   font-weight: 100 900;
   font-display: swap;
 }
-:root {
-  --brand-ink: #080e11;
-  --brand-graphite: #18262d;
-  --brand-paper: #f4f7f8;
-  --brand-cyan: #58cce0;
-  --brand-teal: #146575;
-  --brand-steel: #9caeb5;
-  --brand-font: Outfit, system-ui, sans-serif;
-  --brand-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  --tblr-font-sans-serif: var(--brand-font);
+/* Official-site overrides use Tabler's existing theme properties directly.
+   Both the standalone landing page and documentation import this file. */
+:root,
+.layout-boxed[data-bs-theme="dark"] {
+  color-scheme: dark;
+  --tblr-font-sans-serif: Outfit, system-ui, sans-serif;
+  --tblr-font-monospace:
+    "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  /* Native Tabler utility colors also serve component foregrounds. Keep their
+     defaults; use the surface properties below for dark page backgrounds. */
+  --tblr-black: #000;
+  --tblr-white: #fff;
+  --tblr-light: #f9fafb;
+  --tblr-dark: #1f2937;
+  --tblr-gray-300: #d1d5db;
+  --tblr-primary-fg: var(--tblr-white);
+
+  /* Core colors refined for better contrast */
+  --tblr-body-color: hsl(225deg 35% 86%);
+  --tblr-secondary-color: hsl(225, 15%, 80%);
+  --tblr-muted-color: hsla(225, 15%, 75%, 0.8);
+
+  /* Background system */
+  --tblr-body-bg: hsl(225deg 44% 9%);
+  --tblr-bg-surface: hsl(225, 47%, 10%);
+  --tblr-bg-surface-secondary: hsl(225, 47%, 12%);
+  --tblr-bg-surface-tertiary: hsl(225, 47%, 14%);
+
+  /* Border colors */
+  --tblr-border-color: hsl(225deg, 26%, 19%);
+  --tblr-border-color-translucent: hsla(225deg 27% 19% / 0.7);
+
+  /* Text secondary RGB */
+  --tblr-text-secondary-rgb:
+    204, 209, 217; /* RGB equivalent of hsl(225, 15%, 80%) */
+
+  /* Code colors */
+  --tblr-code-color: hsl(
+    225deg 45.4% 76.93%
+  ); /* Light code text for dark theme */
+  --tblr-code-bg: hsla(225, 47%, 15%, 0.5); /* Subtle dark background */
+  --tblr-active-bg: var(--tblr-code-bg);
+
+  /* Ethereal accent colors */
+  --tblr-blue-rgb: 84, 151, 213;
+  --tblr-blue: rgb(var(--tblr-blue-rgb));
+  --tblr-blue-lt-rgb: 21, 31, 53;
+  --tblr-blue-lt: rgb(var(--tblr-blue-lt-rgb));
+  --tblr-primary-rgb: 139, 184, 232;
+  --tblr-primary: rgb(var(--tblr-primary-rgb));
+  --tblr-secondary: hsla(247, 60%, 94%, 0.7); /* Nebula purple */
+
+  /* Status + accent colors aligned with the brand palette */
+  --tblr-success-rgb: 16, 132, 86; /* Deep green for white text */
+  --tblr-success: rgb(var(--tblr-success-rgb));
+  --tblr-warning-rgb: 197, 124, 0; /* Deep amber */
+  --tblr-warning: rgb(var(--tblr-warning-rgb));
+  --tblr-danger-rgb: 196, 68, 68; /* Deep crimson */
+  --tblr-danger: rgb(var(--tblr-danger-rgb));
+  --tblr-purple-rgb: 118, 82, 200; /* Deep violet */
+  --tblr-purple: rgb(var(--tblr-purple-rgb));
+  --tblr-cyan-rgb: 0, 149, 168; /* Deep cyan */
+  --tblr-cyan: rgb(var(--tblr-cyan-rgb));
+  --tblr-indigo-rgb: 96, 113, 215; /* Deep indigo */
+  --tblr-indigo: rgb(var(--tblr-indigo-rgb));
+  --tblr-teal: #267d63;
+  --tblr-teal-fg: #20050b;
+
+  --tblr-green: var(--tblr-success);
+  --tblr-yellow: var(--tblr-warning);
+  --tblr-red: var(--tblr-danger);
+
+  /* Luminous links */
+  --tblr-link-color: hsl(212, 70%, 75%); /* Star glow */
+  --tblr-link-hover-color: hsl(212, 70%, 85%); /* Supernova */
+  --tblr-carousel-caption-color: var(--tblr-muted-color);
+
+  /* Ethereal shadows */
+  --tblr-box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px rgba(66, 153, 225, 0.15);
+  --tblr-box-shadow-dropdown:
+    0px 8px 24px rgba(0, 0, 0, 0.25), 1px 9px 20px rgba(174, 62, 201, 0.15);
+
+  /* Pure white emphasis */
+  --tblr-emphasis-color: #ffffff;
+  --tblr-heading-color: #ffffff;
+
+  /* Syntax highlighting colors */
+  --hljs-cosmic-comment: hsl(290, 10%, 60%); /* Distant star */
+  --hljs-cosmic-punctuation: hsl(60, 40%, 85%); /* Stardust */
+  --hljs-cosmic-property: hsl(340, 60%, 65%); /* Red giant */
+  --hljs-cosmic-number: hsl(0, 50%, 75%); /* Solar flare */
+  --hljs-cosmic-boolean: hsl(270, 100%, 75%); /* Purple nebula */
+  --hljs-cosmic-string: hsl(120, 40%, 75%); /* Green aurora */
+  --hljs-cosmic-operator: hsl(0, 0%, 95%); /* White dwarf */
+  --hljs-cosmic-keyword: hsl(210, 100%, 75%); /* Blue giant */
 }

examples/official-site/assets/highlightjs-and-tabler-theme.css

@@ -1,91 +1,6 @@
 @charset "utf-8";
 @import url("./brand/brand.css");
 
-:root,
-.layout-boxed[data-bs-theme="dark"] {
-  color-scheme: dark;
-
-  /* Core colors refined for better contrast */
-  --tblr-body-color: hsl(225deg 35% 86%);
-  --tblr-secondary-color: hsl(225, 15%, 80%);
-  --tblr-muted-color: hsla(225, 15%, 75%, 0.8);
-
-  /* Background system */
-  --tblr-body-bg: hsl(225deg 44% 9%);
-  --tblr-bg-surface: hsl(225, 47%, 10%);
-  --tblr-bg-surface-secondary: hsl(225, 47%, 12%);
-  --tblr-bg-surface-tertiary: hsl(225, 47%, 14%);
-
-  /* Border colors */
-  --tblr-border-color: hsl(225deg, 26%, 19%);
-  --tblr-border-color-translucent: hsla(225deg 27% 19% / 0.7);
-
-  /* Text secondary RGB */
-  --tblr-text-secondary-rgb:
-    204, 209, 217; /* RGB equivalent of hsl(225, 15%, 80%) */
-
-  /* Code colors */
-  --tblr-code-color: hsl(
-    225deg 45.4% 76.93%
-  ); /* Light code text for dark theme */
-  --tblr-code-bg: hsla(225, 47%, 15%, 0.5); /* Subtle dark background */
-  --tblr-active-bg: var(--tblr-code-bg);
-
-  /* Ethereal accent colors */
-  --tblr-blue-rgb: 84, 151, 213;
-  --tblr-blue: rgb(var(--tblr-blue-rgb));
-  --tblr-blue-lt-rgb: 21, 31, 53;
-  --tblr-blue-lt: rgb(var(--tblr-blue-lt-rgb));
-  --tblr-primary-rgb: 95, 132, 169;
-  --tblr-primary: rgb(var(--tblr-primary-rgb));
-  --tblr-secondary: hsla(247, 60%, 94%, 0.7); /* Nebula purple */
-
-  /* Status + accent colors aligned with the brand palette */
-  --tblr-success-rgb: 16, 132, 86; /* Deep green for white text */
-  --tblr-success: rgb(var(--tblr-success-rgb));
-  --tblr-warning-rgb: 197, 124, 0; /* Deep amber */
-  --tblr-warning: rgb(var(--tblr-warning-rgb));
-  --tblr-danger-rgb: 196, 68, 68; /* Deep crimson */
-  --tblr-danger: rgb(var(--tblr-danger-rgb));
-  --tblr-purple-rgb: 118, 82, 200; /* Deep violet */
-  --tblr-purple: rgb(var(--tblr-purple-rgb));
-  --tblr-cyan-rgb: 0, 149, 168; /* Deep cyan */
-  --tblr-cyan: rgb(var(--tblr-cyan-rgb));
-  --tblr-indigo-rgb: 96, 113, 215; /* Deep indigo */
-  --tblr-indigo: rgb(var(--tblr-indigo-rgb));
-  --tblr-teal: #267d63;
-  --tblr-teal-fg: #20050b;
-
-  --tblr-green: var(--tblr-success);
-  --tblr-yellow: var(--tblr-warning);
-  --tblr-red: var(--tblr-danger);
-
-  /* Luminous links */
-  --tblr-link-color: hsl(212, 70%, 75%); /* Star glow */
-  --tblr-link-hover-color: hsl(212, 70%, 85%); /* Supernova */
-  --tblr-carousel-caption-color: var(--tblr-muted-color);
-
-  /* Ethereal shadows */
-  --tblr-box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px rgba(66, 153, 225, 0.15);
-  --tblr-box-shadow-dropdown:
-    0px 8px 24px rgba(0, 0, 0, 0.25), 1px 9px 20px rgba(174, 62, 201, 0.15);
-
-  /* Pure white emphasis */
-  --tblr-emphasis-color: #ffffff;
-  --tblr-heading-color: #ffffff;
-
-  /* Syntax highlighting colors */
-  --hljs-cosmic-comment: hsl(290, 10%, 60%); /* Distant star */
-  --hljs-cosmic-punctuation: hsl(60, 40%, 85%); /* Stardust */
-  --hljs-cosmic-property: hsl(340, 60%, 65%); /* Red giant */
-  --hljs-cosmic-number: hsl(0, 50%, 75%); /* Solar flare */
-  --hljs-cosmic-boolean: hsl(270, 100%, 75%); /* Purple nebula */
-  --hljs-cosmic-string: hsl(120, 40%, 75%); /* Green aurora */
-  --hljs-cosmic-operator: hsl(0, 0%, 95%); /* White dwarf */
-  --hljs-cosmic-keyword: hsl(210, 100%, 75%); /* Blue giant */
-}
-
 .btn-primary {
   --tblr-btn-border-color: var(--tblr-secondary);
   --tblr-btn-active-border-color: transparent;
@@ -249,11 +164,8 @@ pre:has(code) {
 }
 
 /* Self-hosted official-site typography; retain the established documentation theme. */
-:root {
-  --tblr-font-sans-serif: var(--brand-font);
-}
 .layout-boxed {
-  font-family: var(--brand-font);
+  font-family: var(--tblr-font-sans-serif);
 }
 .navbar-brand {
   font-weight: 600;