ci: restrict pages deployment to master and main branches

Fixes Hugo warnings about missing layout files for "section" and
"taxonomy" kinds.

.gitignore

@@ -1,2 +1,3 @@
 public/
-resources/
+resources/
+node_modules/

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 #
 #   All available Hugo versions are listed under https://gitlab.com/pages/hugo/container_registry.
 #
-image: hugomods/hugo:base
+image: hugomods/hugo:exts-non-root
 
 stages:
   - build
@@ -9,7 +9,10 @@ stages:
 pages:
   stage: build
   script:
+    - npm ci
     - hugo
   artifacts:
     paths:
       - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == "master" || $CI_COMMIT_BRANCH == "main"

.woodpecker.yaml

@@ -6,8 +6,9 @@ when:
 
 steps:
   - name: build
-    image: hugomods/hugo:base
+    image: hugomods/hugo:exts
     commands:
+      - npm ci
       - hugo
     environment:
       HUGO_ENVIRONMENT: production
@@ -21,7 +22,7 @@ steps:
       ftp_password:
         from_secret: ovh_ftp_password
       clean_dir: true
-      pre_action: 'set ftp:passive-mode true'
+      pre_action: "set ftp:passive-mode true"
       secure: false
       src_dir: /public/
       dest_dir: /www/

assets/scss/bootstrap.scss

@@ -0,0 +1,970 @@
+// ============================================================================
+// happyDomain × Bootstrap 5 — SCSS Customization
+// ----------------------------------------------------------------------------
+// Drop-in override for a Bootstrap 5 (>=5.3) build.
+//
+// Usage:
+//   1. Have Bootstrap's SCSS source available (`bootstrap/scss/...`)
+//   2. Compile this file as your single entry point:
+//        sass happydomain-bootstrap.scss happydomain-bootstrap.css
+//   3. Include the compiled CSS.
+//
+// Targets Bootstrap 5.3+ (uses the `$theme-colors`, `$utilities`,
+// `data-bs-theme` and color-mode CSS-var system).
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  1. FONTS  — Brand display + UI + Mono
+// ─────────────────────────────────────────────────────────────────────────────
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  2. BRAND TOKENS  (mirror of colors_and_type.css — kept as Sass scalars so
+//     they can drive Bootstrap maps before `@import "bootstrap"`.)
+// ─────────────────────────────────────────────────────────────────────────────
+
+// — Brand plum ramp ──────────────────────────────────────────────────────────
+$hd-plum-50: #f7f1fa;
+$hd-plum-100: #ecdcf2;
+$hd-plum-200: #d6b1e3;
+$hd-plum-300: #b985ce;
+$hd-plum-400: #985bb3;
+$hd-plum-500: #743b91;
+$hd-plum-600: #54206c;
+$hd-plum-700: #360b48; // BRAND DARK ANCHOR
+$hd-plum-800: #240630;
+$hd-plum-900: #14031c;
+
+// — Brand dark semantic roles (plum surface system) ───────────────────────────
+$hd-brand-dark: $hd-plum-700; // canonical plum surface
+$hd-brand-dark-hover: $hd-plum-800; // deepen on hover/active
+$hd-brand-dark-fg: $hd-plum-50; // primary text on plum surface
+$hd-brand-dark-muted: $hd-plum-200; // secondary text / eyebrows on plum surface
+$hd-brand-dark-border: $hd-plum-600; // dividers within plum surfaces
+$hd-brand-dark-subtle: $hd-plum-50; // subtle plum tint on light backgrounds
+
+// — Dark mode canvas (plum-tinted, replaces green-tinted #0c0f0e) ─────────────
+$hd-bg-canvas-dark: #0f0a11;
+
+// — Brand green ramp ──────────────────────────────────────────────────────────
+$hd-green-50: #edfaf5;
+$hd-green-100: #d0f2e6;
+$hd-green-200: #9de4ca;
+$hd-green-300: #56c8a4;
+$hd-green-400: #2dba93;
+$hd-green-500: #1cb487; // PRIMARY
+$hd-green-600: #17a377;
+$hd-green-700: #128f67;
+$hd-green-800: #0d7254;
+$hd-green-900: #084d38;
+
+// — Neutrals (light) ─────────────────────────────────────────────────────────
+$hd-bg-canvas: #ffffff;
+$hd-bg-default: #fafafa;
+$hd-bg-subtle: #f4f4f5;
+$hd-bg-inset: #eeeeef;
+
+$hd-fg-1: #0a0a0b;
+$hd-fg-2: #3f3f46;
+$hd-fg-3: #71717a;
+$hd-fg-4: #a1a1aa;
+
+$hd-border-1: #e4e4e7;
+$hd-border-2: #d1d1d6;
+$hd-border-3: #a1a1aa;
+
+// — Semantic ─────────────────────────────────────────────────────────────────
+$hd-success: $hd-green-500;
+$hd-success-bg: $hd-green-50;
+$hd-danger: #e5484d;
+$hd-danger-bg: #fff1f2;
+$hd-warning: #f59e0b;
+$hd-warning-bg: #fffbeb;
+$hd-info: #0ea5e9;
+$hd-info-bg: #f0f9ff;
+
+// — Focus ring ───────────────────────────────────────────────────────────────
+$hd-focus-ring: rgba(28, 180, 135, 0.22);
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  3. BOOTSTRAP VARIABLE OVERRIDES
+//     (declared BEFORE importing bootstrap/scss/variables)
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ── Color system ────────────────────────────────────────────────────────────
+// Re-point Bootstrap's $green to our brand ramp so the generated utilities
+// (`text-success`, `bg-success`, etc) match exactly.
+$primary: $hd-green-500;
+$secondary: $hd-fg-3;
+$success: $hd-green-500;
+$info: $hd-info;
+$warning: $hd-warning;
+$danger: $hd-danger;
+$light: $hd-bg-subtle;
+$dark: $hd-fg-1;
+
+// Bootstrap 5.3 builds its grayscale from $gray-* — align it to Zinc-ish.
+$white: #ffffff;
+$gray-100: $hd-bg-subtle;
+$gray-200: $hd-bg-inset;
+$gray-300: $hd-border-1;
+$gray-400: $hd-border-2;
+$gray-500: $hd-border-3;
+$gray-600: $hd-fg-3;
+$gray-700: $hd-fg-2;
+$gray-800: #27272a;
+$gray-900: $hd-fg-1;
+$black: #000000;
+
+// Custom theme color: "accent" — same green but available as a separate slot
+// so designers can use `.btn-accent`, `.text-accent`, etc.
+$custom-theme-colors: (
+    "accent": $hd-green-500,
+    "brand": $hd-green-500,
+    "plum": $hd-plum-500,
+);
+
+// ── Body / surfaces ─────────────────────────────────────────────────────────
+$body-bg: $hd-bg-default;
+$body-color: $hd-fg-2;
+$body-secondary-color: $hd-fg-3;
+$body-secondary-bg: $hd-bg-subtle;
+$body-tertiary-color: $hd-fg-4;
+$body-tertiary-bg: $hd-bg-inset;
+$body-emphasis-color: $hd-fg-1;
+
+// ── Borders ─────────────────────────────────────────────────────────────────
+$border-color: $hd-border-1;
+$border-color-translucent: $hd-border-1;
+
+$border-radius: 6px; // --hd-radius
+$border-radius-sm: 4px; // --hd-radius-sm
+$border-radius-lg: 8px; // --hd-radius-md
+$border-radius-xl: 12px; // --hd-radius-lg
+$border-radius-xxl: 12px;
+$border-radius-pill: 9999px;
+
+// ── Links ───────────────────────────────────────────────────────────────────
+$link-color: $hd-green-500;
+$link-hover-color: $hd-green-700;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// ── Typography ──────────────────────────────────────────────────────────────
+$font-family-sans-serif:
+    "Hanken Grotesk Variable",
+    "Hanken Grotesk",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+$font-family-monospace:
+    "JetBrains Mono Variable", JetBrainsMono, "Fantasque Sans Mono", "SFMono-Regular", Menlo,
+    Consolas, monospace;
+$font-family-base: $font-family-sans-serif;
+
+$font-size-root: null; // honour browser default
+$font-size-base: 0.9375rem; // 15px — --hd-text-base
+$font-size-sm: 0.8125rem; // --hd-text-sm
+$font-size-lg: 1.0625rem; // --hd-text-md
+
+$font-weight-lighter: 300;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-base: $font-weight-normal;
+
+$line-height-base: 1.5; // --hd-leading-normal
+$line-height-sm: 1.375; // --hd-leading-snug
+$line-height-lg: 1.625; // --hd-leading-relaxed
+
+// Heading scale (matches --hd-text-*xl)
+$h1-font-size: 2.25rem; // --hd-text-3xl
+$h2-font-size: 1.875rem; // --hd-text-2xl
+$h3-font-size: 1.5rem; // --hd-text-xl
+$h4-font-size: 1.25rem; // --hd-text-lg
+$h5-font-size: 1.0625rem; // --hd-text-md
+$h6-font-size: 0.9375rem; // --hd-text-base
+
+$headings-font-family: $font-family-sans-serif;
+$headings-font-weight: 600;
+$headings-line-height: 1.2;
+$headings-color: $hd-fg-1;
+
+$display-font-family: "Quicksand Variable", "Quicksand", sans-serif;
+$display-font-weight: 700;
+$display-line-height: 1.2;
+
+$small-font-size: 0.8125rem;
+$text-muted: $hd-fg-3;
+
+// ── Spacing (Bootstrap's spacer scale — kept default, but explicit) ─────────
+$spacer: 1rem;
+$spacers: (
+    0: 0,
+    1: $spacer * 0.25,
+    // 4px
+    2: $spacer * 0.5,
+    // 8px
+    3: $spacer * 0.75,
+    // 12px
+    4: $spacer,
+    // 16px
+    5: $spacer * 1.25,
+    // 20px
+    6: $spacer * 1.5,
+    // 24px
+    7: $spacer * 2,
+    // 32px
+    8: $spacer * 2.5,
+    // 40px
+    9: $spacer * 3,
+    // 48px
+    10: $spacer * 4,
+    // 64px
+    11: $spacer * 5, // 80px
+);
+
+// ── Shadows — flat system, separation by border ─────────────────────────────
+$enable-shadows: false;
+$enable-gradients: false;
+$enable-rounded: true;
+$enable-transitions: true;
+$enable-reduced-motion: true;
+$enable-smooth-scroll: true;
+
+$box-shadow: none;
+$box-shadow-sm: none;
+$box-shadow-lg: none;
+$box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+
+// ── Focus ring ──────────────────────────────────────────────────────────────
+$focus-ring-width: 3px;
+$focus-ring-opacity: 1;
+$focus-ring-color: $hd-focus-ring;
+$focus-ring-blur: 0;
+$focus-ring-box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
+
+// ── Components ──────────────────────────────────────────────────────────────
+
+// Buttons
+$btn-font-weight: 500;
+$btn-border-radius: $border-radius;
+$btn-border-radius-sm: $border-radius-sm;
+$btn-border-radius-lg: $border-radius-lg;
+$btn-padding-y: 0.5rem;
+$btn-padding-x: 0.875rem;
+$btn-focus-width: 3px;
+$btn-focus-box-shadow: $focus-ring-box-shadow;
+$btn-disabled-opacity: 0.5;
+$btn-transition:
+    color 0.12s ease-in-out,
+    background-color 0.12s ease-in-out,
+    border-color 0.12s ease-in-out;
+
+// Forms
+$input-bg: $hd-bg-canvas;
+$input-color: $hd-fg-1;
+$input-border-color: $hd-border-1;
+$input-border-radius: $border-radius;
+$input-border-radius-sm: $border-radius-sm;
+$input-border-radius-lg: $border-radius-lg;
+$input-padding-y: 0.5rem;
+$input-padding-x: 0.75rem;
+$input-placeholder-color: $hd-fg-4;
+$input-focus-border-color: $hd-green-400;
+$input-focus-box-shadow: $focus-ring-box-shadow;
+$input-box-shadow: $box-shadow-inset;
+
+$form-label-color: $hd-fg-2;
+$form-label-font-weight: 500;
+$form-label-font-size: $font-size-sm;
+
+$form-check-input-border: 1px solid $hd-border-2;
+$form-check-input-checked-bg-color: $hd-green-500;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow;
+
+// Cards
+$card-border-color: $hd-border-1;
+$card-border-radius: $border-radius-lg;
+$card-inner-border-radius: subtract($card-border-radius, 1px);
+$card-cap-bg: $hd-bg-subtle;
+$card-cap-color: $hd-fg-1;
+$card-bg: $hd-bg-canvas;
+$card-box-shadow: none;
+$card-spacer-y: 1rem;
+$card-spacer-x: 1.25rem;
+
+// Navbar
+$navbar-padding-y: 0.75rem;
+$navbar-light-color: $hd-fg-2;
+$navbar-light-hover-color: $hd-fg-1;
+$navbar-light-active-color: $hd-green-700;
+$navbar-light-brand-color: $hd-fg-1;
+$navbar-light-brand-hover-color: $hd-fg-1;
+
+// Dropdowns
+$dropdown-bg: $hd-bg-canvas;
+$dropdown-border-color: $hd-border-1;
+$dropdown-border-radius: $border-radius-lg;
+$dropdown-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+$dropdown-link-hover-bg: $hd-bg-subtle;
+$dropdown-link-active-bg: $hd-green-50;
+$dropdown-link-active-color: $hd-green-700;
+
+// Modals
+$modal-content-bg: $hd-bg-canvas;
+$modal-content-border-color: $hd-border-1;
+$modal-content-border-radius: $border-radius-xl;
+$modal-content-box-shadow-xs: 0 8px 24px rgba(0, 0, 0, 0.08);
+$modal-content-box-shadow-sm-up: 0 16px 48px rgba(0, 0, 0, 0.12);
+$modal-backdrop-bg: #0a0a0b;
+$modal-backdrop-opacity: 0.4;
+
+// Alerts
+$alert-border-radius: $border-radius;
+$alert-border-width: 1px;
+$alert-padding-y: 0.75rem;
+$alert-padding-x: 1rem;
+
+// Badges
+$badge-font-size: 0.75em;
+$badge-font-weight: 600;
+$badge-padding-y: 0.25em;
+$badge-padding-x: 0.5em;
+$badge-border-radius: $border-radius-sm;
+
+// Tables
+$table-border-color: $hd-border-1;
+$table-striped-bg: $hd-bg-subtle;
+$table-hover-bg: $hd-bg-subtle;
+$table-color: $hd-fg-2;
+
+// Code
+$code-color: $hd-green-700;
+$code-font-size: 0.9em;
+$kbd-bg: $hd-fg-1;
+$pre-color: $hd-fg-2;
+
+// Tooltip / popover
+$tooltip-bg: $hd-fg-1;
+$tooltip-color: $hd-bg-canvas;
+$tooltip-border-radius: $border-radius-sm;
+$tooltip-font-size: $font-size-sm;
+$popover-bg: $hd-bg-canvas;
+$popover-border-color: $hd-border-1;
+$popover-border-radius: $border-radius-lg;
+$popover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  4. BOOTSTRAP IMPORT
+//     Adjust this path to your `bootstrap/scss/` location.
+// ─────────────────────────────────────────────────────────────────────────────
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Extend $theme-colors with our custom slots
+$theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+// Now pull the rest of Bootstrap in
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities/api";
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  5. happyDomain CSS CUSTOM PROPERTIES
+//     Exposed alongside Bootstrap's so existing `--hd-*` references keep working.
+// ─────────────────────────────────────────────────────────────────────────────
+
+:root,
+[data-bs-theme="light"] {
+    // Plum ramp
+    --hd-plum-50: #{$hd-plum-50};
+    --hd-plum-100: #{$hd-plum-100};
+    --hd-plum-200: #{$hd-plum-200};
+    --hd-plum-300: #{$hd-plum-300};
+    --hd-plum-400: #{$hd-plum-400};
+    --hd-plum-500: #{$hd-plum-500};
+    --hd-plum-600: #{$hd-plum-600};
+    --hd-plum-700: #{$hd-plum-700};
+    --hd-plum-800: #{$hd-plum-800};
+    --hd-plum-900: #{$hd-plum-900};
+
+    // Brand dark roles
+    --hd-brand-dark: #{$hd-brand-dark};
+    --hd-brand-dark-hover: #{$hd-brand-dark-hover};
+    --hd-brand-dark-fg: #{$hd-brand-dark-fg};
+    --hd-brand-dark-muted: #{$hd-brand-dark-muted};
+    --hd-brand-dark-border: #{$hd-brand-dark-border};
+    --hd-brand-dark-subtle: #{$hd-brand-dark-subtle};
+
+    // Brand ramp
+    --hd-green-50: #{$hd-green-50};
+    --hd-green-100: #{$hd-green-100};
+    --hd-green-200: #{$hd-green-200};
+    --hd-green-300: #{$hd-green-300};
+    --hd-green-400: #{$hd-green-400};
+    --hd-green-500: #{$hd-green-500};
+    --hd-green-600: #{$hd-green-600};
+    --hd-green-700: #{$hd-green-700};
+    --hd-green-800: #{$hd-green-800};
+    --hd-green-900: #{$hd-green-900};
+
+    // Surfaces
+    --hd-bg-canvas: #{$hd-bg-canvas};
+    --hd-bg-default: #{$hd-bg-default};
+    --hd-bg-subtle: #{$hd-bg-subtle};
+    --hd-bg-inset: #{$hd-bg-inset};
+    --hd-bg-overlay: rgba(0, 0, 0, 0.04);
+
+    // Foreground
+    --hd-fg-1: #{$hd-fg-1};
+    --hd-fg-2: #{$hd-fg-2};
+    --hd-fg-3: #{$hd-fg-3};
+    --hd-fg-4: #{$hd-fg-4};
+    --hd-fg-inverse: #ffffff;
+
+    // Borders
+    --hd-border-1: #{$hd-border-1};
+    --hd-border-2: #{$hd-border-2};
+    --hd-border-3: #{$hd-border-3};
+
+    // Accent
+    --hd-accent: #{$hd-green-500};
+    --hd-accent-hover: #{$hd-green-600};
+    --hd-accent-fg: #ffffff;
+    --hd-accent-subtle: #{$hd-green-50};
+    --hd-accent-muted: #{$hd-green-100};
+    --hd-accent-border: #{$hd-green-200};
+    --hd-focus-ring: #{$hd-focus-ring};
+
+    // Semantic
+    --hd-success: #{$hd-success};
+    --hd-success-bg: #{$hd-success-bg};
+    --hd-danger: #{$hd-danger};
+    --hd-danger-bg: #{$hd-danger-bg};
+    --hd-warning: #{$hd-warning};
+    --hd-warning-bg: #{$hd-warning-bg};
+    --hd-info: #{$hd-info};
+    --hd-info-bg: #{$hd-info-bg};
+
+    // DNS diff
+    --hd-diff-add: #{$hd-green-500};
+    --hd-diff-add-bg: #{$hd-green-50};
+    --hd-diff-add-line: #{$hd-green-100};
+    --hd-diff-del: #{$hd-danger};
+    --hd-diff-del-bg: #{$hd-danger-bg};
+    --hd-diff-del-line: #ffd6d8;
+    --hd-diff-mod: #{$hd-warning};
+    --hd-diff-mod-bg: #{$hd-warning-bg};
+
+    // Fonts
+    --hd-font-brand: "Quicksand Variable", "Quicksand", sans-serif;
+    --hd-font-ui: "DM Sans", system-ui, -apple-system, sans-serif;
+    --hd-font-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
+
+    // Radii
+    --hd-radius-none: 0;
+    --hd-radius-xs: 2px;
+    --hd-radius-sm: 4px;
+    --hd-radius: 6px;
+    --hd-radius-md: 8px;
+    --hd-radius-lg: 12px;
+    --hd-radius-full: 9999px;
+
+    // Shadows
+    --hd-shadow-none: none;
+    --hd-shadow-focus: 0 0 0 3px var(--hd-focus-ring);
+    --hd-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  6. DARK MODE  (Bootstrap 5.3 `data-bs-theme="dark"`)
+//     Mirrors the dark-mode block in colors_and_type.css.
+// ─────────────────────────────────────────────────────────────────────────────
+
+[data-bs-theme="dark"] {
+    // Bootstrap CSS vars
+    --bs-body-bg: #111514; // content default (green-tinted surfaces unchanged)
+    --bs-body-bg-rgb: 17, 21, 20;
+    --bs-body-color: #b8c4bf;
+    --bs-body-color-rgb: 184, 196, 191;
+    --bs-emphasis-color: #f4f7f6;
+    --bs-secondary-color: #7a9189;
+    --bs-secondary-bg: #181d1b;
+    --bs-tertiary-color: #4a5e58;
+    --bs-tertiary-bg: #1e2422;
+    --bs-dark: #f4f7f6;
+    --bs-dark-rgb: 244, 247, 246;
+    --bs-light: #1e2422;
+    --bs-light-rgb: 30, 36, 34;
+
+    --bs-border-color: #1f2c27;
+    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
+    --bs-link-color: #22d3a3;
+    --bs-link-color-rgb: 34, 211, 163;
+    --bs-link-hover-color: #56c8a4;
+    --bs-code-color: #56c8a4;
+    --bs-primary: #22d3a3;
+    --bs-primary-rgb: 34, 211, 163;
+    --bs-primary-bg-subtle: #0d2a22;
+    --bs-primary-border-subtle: #1a5c47;
+    --bs-primary-text-emphasis: #56c8a4;
+    --bs-success: #22d3a3;
+    --bs-success-rgb: 34, 211, 163;
+    --bs-success-bg-subtle: #0d2a22;
+    --bs-danger: #f87171;
+    --bs-danger-rgb: 248, 113, 113;
+    --bs-danger-bg-subtle: #2a1010;
+    --bs-warning: #fbbf24;
+    --bs-warning-rgb: 251, 191, 36;
+    --bs-warning-bg-subtle: #2a1f00;
+    --bs-info: #38bdf8;
+    --bs-info-rgb: 56, 189, 248;
+    --bs-info-bg-subtle: #0c1e2a;
+
+    // happyDomain CSS vars
+    --hd-bg-canvas: #{$hd-bg-canvas-dark}; // plum-tinted, replaces green #0c0f0e
+    --hd-bg-default: #111514;
+    --hd-bg-subtle: #181d1b;
+    --hd-bg-inset: #1e2422;
+    --hd-bg-overlay: rgba(255, 255, 255, 0.04);
+
+    --hd-fg-1: #f4f7f6;
+    --hd-fg-2: #b8c4bf;
+    --hd-fg-3: #7a9189;
+    --hd-fg-4: #4a5e58;
+    --hd-fg-inverse: #0c0f0e;
+
+    --hd-border-1: #1f2c27;
+    --hd-border-2: #293c36;
+    --hd-border-3: #3a5249;
+
+    --hd-accent: #22d3a3;
+    --hd-accent-hover: #1cb487;
+    --hd-accent-fg: #0c0f0e;
+    --hd-accent-subtle: #0d2a22;
+    --hd-accent-muted: #0f3329;
+    --hd-accent-border: #1a5c47;
+    --hd-focus-ring: rgba(34, 211, 163, 0.25);
+
+    --hd-success: #22d3a3;
+    --hd-success-bg: #0d2a22;
+    --hd-danger: #f87171;
+    --hd-danger-bg: #2a1010;
+    --hd-warning: #fbbf24;
+    --hd-warning-bg: #2a1f00;
+    --hd-info: #38bdf8;
+    --hd-info-bg: #0c1e2a;
+
+    --hd-diff-add: #22d3a3;
+    --hd-diff-add-bg: #0d2a22;
+    --hd-diff-add-line: #0f3329;
+    --hd-diff-del: #f87171;
+    --hd-diff-del-bg: #2a1010;
+    --hd-diff-del-line: #3a1515;
+    --hd-diff-mod: #fbbf24;
+    --hd-diff-mod-bg: #2a1f00;
+
+    --hd-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C.25%29'/%3e%3c/svg%3e");
+}
+
+[data-bs-theme="dark"] .modal-content {
+    --bs-modal-bg: var(--hd-bg-canvas);
+    --bs-modal-color: var(--hd-fg-2);
+    --bs-modal-border-color: var(--hd-border-1);
+    --bs-modal-header-border-color: var(--hd-border-1);
+    --bs-modal-footer-border-color: var(--hd-border-1);
+}
+
+[data-bs-theme="dark"] .table {
+    --bs-table-color: var(--hd-fg-2);
+    --bs-table-bg: transparent;
+    --bs-table-border-color: var(--hd-border-1);
+    --bs-table-striped-color: var(--hd-fg-2);
+    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
+    --bs-table-hover-color: var(--hd-fg-1);
+    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
+    --bs-table-active-bg: rgba(255, 255, 255, 0.06);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  7. COMPONENT REFINEMENTS  — small tweaks to align Bootstrap with the system
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Use brand font for `.display-*` headings
+.display-1,
+.display-2,
+.display-3,
+.display-4,
+.display-5,
+.display-6 {
+    font-family: var(--hd-font-brand);
+    letter-spacing: -0.02em;
+}
+
+// Tighten button hover — flat system, no shadow lift
+.btn-primary,
+.btn-success {
+    --bs-btn-bg: var(--hd-accent);
+    --bs-btn-border-color: var(--hd-accent);
+    --bs-btn-hover-bg: var(--hd-accent-hover);
+    --bs-btn-hover-border-color: var(--hd-accent-hover);
+    --bs-btn-active-bg: var(--hd-accent-hover);
+    --bs-btn-active-border-color: var(--hd-accent-hover);
+    --bs-btn-color: var(--hd-accent-fg);
+    --bs-btn-hover-color: var(--hd-accent-fg);
+    --bs-btn-active-color: var(--hd-accent-fg);
+}
+
+.btn-outline-primary {
+    --bs-btn-color: var(--hd-accent);
+    --bs-btn-border-color: var(--hd-accent-border);
+    --bs-btn-hover-bg: var(--hd-accent-subtle);
+    --bs-btn-hover-border-color: var(--hd-accent);
+    --bs-btn-hover-color: var(--hd-accent-hover);
+    --bs-btn-active-bg: var(--hd-accent);
+    --bs-btn-active-border-color: var(--hd-accent);
+    --bs-btn-active-color: var(--hd-accent-fg);
+}
+
+// Inputs: subtle inset, focus ring uses brand
+.form-control,
+.form-select {
+    background-color: var(--hd-bg-canvas);
+    border-color: var(--hd-border-1);
+    color: var(--hd-fg-1);
+    &:focus {
+        background-color: var(--hd-bg-canvas);
+        border-color: var(--hd-accent);
+        color: var(--hd-fg-1);
+        box-shadow: 0 0 0 3px var(--hd-focus-ring);
+    }
+}
+
+.input-group-text {
+    background-color: var(--hd-bg-subtle);
+    border-color: var(--hd-border-1);
+    color: var(--hd-fg-2);
+}
+
+// Card: flat, 1px border separation
+.card {
+    --bs-card-bg: var(--hd-bg-canvas);
+    --bs-card-border-color: var(--hd-border-1);
+    box-shadow: none;
+}
+
+[data-bs-theme="dark"] .offcanvas,
+[data-bs-theme="dark"] .offcanvas-sm,
+[data-bs-theme="dark"] .offcanvas-md,
+[data-bs-theme="dark"] .offcanvas-lg,
+[data-bs-theme="dark"] .offcanvas-xl,
+[data-bs-theme="dark"] .offcanvas-xxl {
+    --bs-offcanvas-bg: var(--hd-bg-subtle);
+    --bs-offcanvas-border-color: var(--hd-border-1);
+    --bs-offcanvas-color: var(--hd-fg-2);
+}
+
+[data-bs-theme="dark"] .dropdown-menu {
+    --bs-dropdown-bg: var(--hd-bg-subtle);
+    --bs-dropdown-border-color: var(--hd-border-1);
+    --bs-dropdown-color: var(--hd-fg-2);
+    --bs-dropdown-link-color: var(--hd-fg-2);
+    --bs-dropdown-link-hover-bg: var(--hd-bg-inset);
+    --bs-dropdown-link-hover-color: var(--hd-fg-1);
+    --bs-dropdown-link-active-bg: var(--hd-accent-subtle);
+    --bs-dropdown-link-active-color: var(--hd-accent);
+    --bs-dropdown-divider-bg: var(--hd-border-1);
+}
+
+[data-bs-theme="dark"] .card {
+    --bs-card-bg: var(--hd-bg-canvas);
+    --bs-card-cap-bg: var(--hd-bg-default);
+    --bs-card-cap-color: var(--hd-fg-1);
+    --bs-card-color: var(--hd-fg-2);
+    --bs-card-border-color: var(--hd-border-1);
+}
+
+// Alerts: tint background + colored border to match diff/semantic system
+.alert-success {
+    background-color: var(--hd-success-bg);
+    border-color: var(--hd-accent-border);
+    color: #0d6651;
+}
+.alert-danger {
+    background-color: var(--hd-danger-bg);
+    border-color: var(--hd-diff-del-line);
+    color: #9b2c2f;
+}
+.alert-warning {
+    background-color: var(--hd-warning-bg);
+    border-color: #fcd34d;
+    color: #92400e;
+}
+.alert-info {
+    background-color: var(--hd-info-bg);
+    border-color: #bae6fd;
+    color: #075985;
+}
+
+[data-bs-theme="dark"] {
+    .btn-light {
+        --bs-btn-bg: var(--hd-bg-inset);
+        --bs-btn-border-color: var(--hd-border-2);
+        --bs-btn-color: var(--hd-fg-1);
+        --bs-btn-hover-bg: var(--hd-bg-subtle);
+        --bs-btn-hover-border-color: var(--hd-border-1);
+        --bs-btn-hover-color: var(--hd-fg-1);
+        --bs-btn-active-bg: var(--hd-bg-default);
+        --bs-btn-active-border-color: var(--hd-border-1);
+        --bs-btn-active-color: var(--hd-fg-1);
+    }
+
+    .btn-dark {
+        --bs-btn-bg: var(--hd-fg-1);
+        --bs-btn-border-color: var(--hd-fg-1);
+        --bs-btn-color: var(--hd-fg-inverse);
+        --bs-btn-hover-bg: var(--hd-fg-2);
+        --bs-btn-hover-border-color: var(--hd-fg-2);
+        --bs-btn-hover-color: var(--hd-fg-inverse);
+        --bs-btn-active-bg: var(--hd-fg-2);
+        --bs-btn-active-border-color: var(--hd-fg-2);
+        --bs-btn-active-color: var(--hd-fg-inverse);
+    }
+
+    .alert-success {
+        color: var(--hd-success);
+        border-color: var(--hd-accent-border);
+    }
+    .alert-danger {
+        color: var(--hd-danger);
+        border-color: var(--hd-diff-del-line);
+    }
+    .alert-warning {
+        color: var(--hd-warning);
+        border-color: rgba(251, 191, 36, 0.4);
+    }
+    .alert-info {
+        color: var(--hd-info);
+        border-color: rgba(56, 189, 248, 0.35);
+    }
+}
+
+// Code styling
+code,
+.hd-code {
+    font-family: var(--hd-font-mono);
+    background: var(--hd-bg-subtle);
+    border: 1px solid var(--hd-border-1);
+    border-radius: var(--hd-radius-xs);
+    padding: 0.1em 0.35em;
+    color: var(--hd-fg-1);
+}
+
+// Focus visibility — system-wide
+:focus-visible {
+    outline: none;
+    box-shadow: var(--hd-shadow-focus);
+}
+
+// Brand-dark surface — hero blocks, inverse cards, marketing slabs, quote panels
+.hd-brand-dark-surface {
+    background-color: var(--hd-brand-dark);
+    color: var(--hd-brand-dark-fg);
+
+    // Eyebrows, labels, secondary copy inside a plum surface
+    .hd-muted,
+    .text-muted,
+    small {
+        color: var(--hd-brand-dark-muted) !important;
+    }
+
+    // Dividers within the surface
+    hr,
+    .hd-divider {
+        border-color: var(--hd-brand-dark-border);
+        opacity: 1;
+    }
+
+    // Green CTA on plum background — the accent sings here
+    .btn-primary,
+    .btn-success,
+    .btn-accent {
+        --bs-btn-bg: var(--hd-accent);
+        --bs-btn-border-color: var(--hd-accent);
+        --bs-btn-hover-bg: var(--hd-accent-hover);
+        --bs-btn-hover-border-color: var(--hd-accent-hover);
+        --bs-btn-color: var(--hd-accent-fg);
+        --bs-btn-hover-color: var(--hd-accent-fg);
+    }
+
+    &:hover {
+        background-color: var(--hd-brand-dark-hover);
+    }
+}
+
+// Subtle plum callout — quote blocks, testimonials, light-page accents
+.hd-brand-subtle-surface {
+    background-color: var(--hd-brand-dark-subtle);
+    border: 1px solid #{$hd-plum-100};
+    border-radius: var(--hd-radius-md);
+
+    .hd-eyebrow,
+    .hd-label {
+        color: #{$hd-plum-500};
+    }
+
+    h2,
+    h3,
+    h4 {
+        color: #{$hd-plum-800};
+    }
+
+    p,
+    .hd-body {
+        color: #{$hd-plum-600};
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  8. BRAND TYPOGRAPHY UTILITIES  (parity with colors_and_type.css)
+// ─────────────────────────────────────────────────────────────────────────────
+
+.hd-display {
+    font-family: var(--hd-font-brand);
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+}
+.hd-h1 {
+    font-family: var(--hd-font-ui);
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    color: var(--hd-fg-1);
+}
+.hd-h2 {
+    font-family: var(--hd-font-ui);
+    font-size: 1.875rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--hd-fg-1);
+}
+.hd-h3 {
+    font-family: var(--hd-font-ui);
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.375;
+    color: var(--hd-fg-1);
+}
+.hd-body {
+    font-family: var(--hd-font-ui);
+    font-size: 0.9375rem;
+    line-height: 1.625;
+    color: var(--hd-fg-2);
+}
+.hd-small {
+    font-family: var(--hd-font-ui);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--hd-fg-3);
+}
+.hd-label {
+    font-family: var(--hd-font-ui);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--hd-fg-3);
+}
+.hd-mono {
+    font-family: var(--hd-font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.625;
+    color: var(--hd-fg-2);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  9. DNS DIFF UTILITIES  — happyDomain-specific
+// ─────────────────────────────────────────────────────────────────────────────
+
+.hd-diff-add {
+    background: var(--hd-diff-add-bg);
+    border-left: 3px solid var(--hd-diff-add);
+    color: var(--hd-diff-add);
+}
+.hd-diff-del {
+    background: var(--hd-diff-del-bg);
+    border-left: 3px solid var(--hd-diff-del);
+    color: var(--hd-diff-del);
+}
+.hd-diff-mod {
+    background: var(--hd-diff-mod-bg);
+    border-left: 3px solid var(--hd-diff-mod);
+    color: var(--hd-diff-mod);
+}
+
+// Plum text-bg helper (Bootstrap doesn't generate this for custom theme colors)
+.text-bg-plum {
+    color: color-contrast($hd-plum-500) !important;
+    background-color: $hd-plum-500 !important;
+}
+
+// DNS record-type chip (e.g. A, AAAA, MX, TXT, CNAME)
+.hd-record-type {
+    display: inline-block;
+    font-family: var(--hd-font-mono);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 0.15em 0.45em;
+    border-radius: var(--hd-radius-sm);
+    background: var(--hd-bg-inset);
+    color: var(--hd-fg-2);
+    border: 1px solid var(--hd-border-1);
+}

config.yml

@@ -34,14 +34,12 @@ languages:
       DefaultDescription: "L'interface qui vous rend heureux de gérer vos noms de domaines."
 
       others_links:
-        - text: "S'inscrire"
-          href: "//app.happydomain.org/register"
-          class: "btn btn-secondary"
-          icon: "bi-person-plus-fill"
         - text: "S'identifier"
-          href: "//app.happydomain.org/login"
+          href: "/fr/beta/"
-          class: "btn btn-outline-primary"
+          class: "btn btn-link text-dark"
-          icon: "bi-person-check-fill"
+        - text: "Essayer en ligne →"
+          href: "//try.happydomain.org/"
+          class: "btn btn-primary btn-sm"
 
       carousel:
         - title: "domains-lists"
@@ -73,12 +71,12 @@ languages:
           image: "/img/screenshots/domain-logs.webp"
 
         - title: "domain-abstract-list"
-          description: "Une zone simplifiée, sous forme de liste, plus rapide à modifier"
+          description: "Les enregistrements bruts de la zone"
-          image: "/img/screenshots/domain-abstract-list.webp"
+          image: "/img/screenshots/domain-abstract-records.webp"
 
         - title: "sources"
-          description: "Liste des hébergeurs existantes où récupérer les domaines"
+          description: "Liste des hébergeurs existants où récupérer les domaines"
-          image: "/img/screenshots/sources.png"
+          image: "/img/screenshots/providers-list.webp"
 
 params:
   author:
@@ -89,15 +87,35 @@ params:
   survey: "https://feedback.happydomain.org/"
   tryit: "https://try.happydomain.org/"
 
+  # Screenshots cycled in the hero browser mockup (jumbo partial).
+  jumboscreen:
+    - image: "/img/screenshots/domains-list.webp"
+      path: "/domains"
+      alt: "List of your domains in happyDomain"
+      weight: 10
+
+    - image: "/img/screenshots/checks-dashboard.webp"
+      path: "/domains/happydomain.org"
+      alt: "Each domain has extensive checks"
+      weight: 20
+
+    - image: "/img/screenshots/domain-abstract.webp"
+      path: "/domains/happydomain.org/editor"
+      alt: "A zone organized by service"
+      weight: 30
+
+    - image: "/img/screenshots/zone-diff.webp"
+      path: "/zone/happydomain.org/records"
+      alt: "Reviewing changes before applying them"
+      weight: 40
+
   others_links:
-    - text: "Sign up"
-      href: "//app.happydomain.org/register"
-      class: "btn btn-secondary"
-      icon: "bi-person-plus-fill"
     - text: "Sign in"
-      href: "//app.happydomain.org/login"
+      href: "/en/beta/"
-      class: "btn btn-outline-primary"
+      class: "btn btn-link text-dark"
-      icon: "bi-person-check-fill"
+    - text: "Try it online →"
+      href: "//try.happydomain.org/"
+      class: "btn btn-primary btn-sm"
 
   carousel:
     - title: "domains-lists"
@@ -129,12 +147,12 @@ params:
       image: "/img/screenshots/domain-logs.webp"
 
     - title: "domain-abstract-list"
-      description: "Simplified zone in list, for quicker editing"
+      description: "Raw records of the zone"
-      image: "/img/screenshots/domain-abstract-list.webp"
+      image: "/img/screenshots/domain-abstract-records.webp"
 
     - title: "sources"
       description: "Existing name service providers where pull domains"
-      image: "/img/screenshots/sources.png"
+      image: "/img/screenshots/providers-list.webp"
 
 menu:
   main:
@@ -153,6 +171,31 @@ menu:
       url: "https://blog.happydomain.org/"
       weight: 30
 
+module:
+  mounts:
+    - source: content
+      target: content
+    - source: static
+      target: static
+    - source: layouts
+      target: layouts
+    - source: data
+      target: data
+    - source: assets
+      target: assets
+    - source: i18n
+      target: i18n
+    - source: archetypes
+      target: archetypes
+    - source: node_modules/@fontsource-variable/hanken-grotesk
+      target: static/fonts/hanken-grotesk
+    - source: node_modules/@fontsource-variable/jetbrains-mono
+      target: static/fonts/jetbrains-mono
+    - source: node_modules/@fontsource-variable/quicksand
+      target: static/fonts/quicksand
+    - source: node_modules/bootstrap/dist/js
+      target: static/js
+
 markup:
   goldmark:
     renderer:

content/beta.en.md

@@ -0,0 +1,54 @@
++++
+title = "Join the beta"
+description = "Public registrations on app.happydomain.org are closed. Join the beta program or self-host happyDomain to get started."
++++
+
+## Online version closed
+
+Public registrations on `app.happydomain.org` are paused while we
+polish the next release.
+
+### happyDomain is evolving
+
+happyDomain will soon let you **continuously test the security of
+your domains** and **monitor every service exposed through DNS**
+(web, mail, VPN, etc.) — all of this **with zero configuration**,
+working straight from your existing records.
+
+We are rolling out this new version **progressively**, to gather
+feedback from our users and refine the service before reopening it
+to everyone. Your input at this stage is invaluable in helping us
+deliver the best possible product.
+
+Two ways to use happyDomain right now:
+
+### 1. Join the beta program
+
+Subscribe below and we will send you an invitation once a spot opens up.
+
+<form
+  class="card card-body bg-light my-4"
+  method="post"
+  action="https://lists.happydomain.org/subscription/form"
+>
+  <input type="hidden" name="nonce" />
+  <input type="hidden" name="l" value="ef8b61ad-fa7d-4f1a-a20f-bb34ac37a3bf" />
+  <input type="hidden" name="lang" value="en" />
+  <div class="mb-3">
+    <label for="beta-email" class="form-label">Your email</label>
+    <input type="email" id="beta-email" name="email" required placeholder="j.postel@isi.edu" class="form-control" />
+  </div>
+  <altcha-widget floating class="mb-3 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
+  <button type="submit" class="btn btn-primary" data-umami-event="beta-page-join">
+    Request beta access
+  </button>
+</form>
+
+### 2. Self-host happyDomain
+
+happyDomain is open source. You can run it on your own machine in minutes:
+
+- **Binary:** download a [release for your platform](/#downloads).
+- **Docker:** `docker run -p 8081:8081 happydomain/happydomain`.
+
+Source code and documentation live on [git.happydomain.org](https://git.happydomain.org/).

content/beta.fr.md

@@ -0,0 +1,55 @@
++++
+title = "Rejoindre la bêta"
+description = "Les inscriptions publiques sur app.happydomain.org sont fermées. Rejoignez le programme bêta ou auto-hébergez happyDomain pour commencer."
++++
+
+## Version en ligne fermée
+
+Les inscriptions publiques sur `app.happydomain.org` sont suspendues
+le temps de finaliser la prochaine version.
+
+### happyDomain se transforme
+
+happyDomain va bientôt vous permettre de **tester en continu la
+sécurité de vos domaines** et de **superviser l'ensemble des services
+exposés via le DNS** (web, mail, VPN, etc.) — le tout **sans
+configuration**, en s'appuyant directement sur vos enregistrements.
+
+Nous déployons cette nouvelle version **progressivement**, afin de
+recueillir les avis de nos utilisateurs et d'ajuster le service avant
+sa réouverture publique. Votre retour à ce stade est précieux pour
+nous aider à offrir le meilleur produit possible.
+
+Deux manières d'utiliser happyDomain dès maintenant :
+
+### 1. Rejoindre le programme bêta
+
+Inscrivez-vous ci-dessous, nous vous enverrons une invitation
+dès qu'une place se libère.
+
+<form
+  class="card card-body bg-light my-4"
+  method="post"
+  action="https://lists.happydomain.org/subscription/form"
+>
+  <input type="hidden" name="nonce" />
+  <input type="hidden" name="l" value="ef8b61ad-fa7d-4f1a-a20f-bb34ac37a3bf" />
+  <input type="hidden" name="lang" value="fr" />
+  <div class="mb-3">
+    <label for="beta-email" class="form-label">Votre email</label>
+    <input type="email" id="beta-email" name="email" required placeholder="j.postel@isi.edu" class="form-control" />
+  </div>
+  <altcha-widget floating class="mb-3 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
+  <button type="submit" class="btn btn-primary" data-umami-event="beta-page-join">
+    Demander un accès bêta
+  </button>
+</form>
+
+### 2. Auto-héberger happyDomain
+
+happyDomain est libre. Vous pouvez le faire tourner sur votre propre machine en quelques minutes :
+
+- **Binaire :** téléchargez une [version pour votre plateforme](/fr/#downloads).
+- **Docker :** `docker run -p 8081:8081 happydomain/happydomain`.
+
+Le code source et la documentation sont sur [git.happydomain.org](https://git.happydomain.org/).

content/legal-notice.en.md

@@ -16,8 +16,8 @@ De facto association "happyDNS"
 <address style="margin-left: 2em; margin-top: -.5em">
 Association happyDNS<br>
 ABS Pierre-Olivier Mercier<br>
-40 avenue Raspail<br>
+8 avenue Georges Clemenceau<br>
-94250 GENTILLY
+14000 CAEN
 </address>
 
 

content/legal-notice.fr.md

@@ -18,8 +18,8 @@ Siège social :
 <address style="margin-left: 2em; margin-top: -.5em">
 Association happyDNS<br>
 ABS Pierre-Olivier Mercier<br>
-40 avenue Raspail<br>
+8 avenue Georges Clemenceau<br>
-94250 GENTILLY
+14000 CAEN
 </address>
 
 ### Hébergement

content/newsletter.en.html

@@ -6,7 +6,7 @@ title = "Subscribe to our newsletter"
   Join the happyDomain newsletter
 </h2>
 
-<div class="mt-4 card bg-secondary text-light" style="border-radius: 1rem; box-shadow: 3px 3px 5px #999">
+<div class="mt-4 card bg-primary-subtle" style="border-radius: 1rem">
   <div class="card-body p-4">
     <div class="row">
       <div class="col-lg-6 d-flex flex-column justify-content-center">
@@ -25,7 +25,7 @@ title = "Subscribe to our newsletter"
         <input type="hidden" name="lang" value="en" />
         <input type="email" name="email" required placeholder="j.postel@isi.edu" class="form-control mb-3">
         <input type="text" name="name" placeholder="Name (optional)" class="form-control mb-3">
-        <div class="mb-2 mx-auto h-captcha" data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"></div>
+        <altcha-widget floating class="mb-2 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
         <button type="submit" class="btn btn-lg btn-primary py-2" data-umami-event="cta-newsletter-join">
           Join our newsletter
         </button>

content/newsletter.fr.html

@@ -6,7 +6,7 @@ title = "Rejoindre notre newsletter"
   S'inscrire à la lettre d'information d'happyDomain
 </h2>
 
-<div class="mt-4 card bg-secondary text-light" style="border-radius: 1rem; box-shadow: 3px 3px 5px #999">
+<div class="mt-4 card bg-primary-subtle" style="border-radius: 1rem">
   <div class="card-body p-4">
     <div class="row">
       <div class="col-lg-6 d-flex flex-column justify-content-center">
@@ -25,7 +25,7 @@ title = "Rejoindre notre newsletter"
         <input type="hidden" name="lang" value="en" />
         <input type="email" name="email" required placeholder="j.postel@isi.edu" class="form-control mb-3">
         <input type="text" name="name" placeholder="Nom (optionnel)" class="form-control mb-3">
-        <div class="mb-2 mx-auto h-captcha" data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"></div>
+        <altcha-widget floating class="mb-2 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
         <button type="submit" class="btn btn-lg btn-primary py-2" data-umami-event="cta-newsletter-join">
           Rejoindre notre newsletter
         </button>

content/use-happyDomain/cio.en.html

@@ -19,12 +19,12 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Keep track of every change with the built-in history.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you to go back at any time in case of a problem.
+          happy<span class="fw-bold">Domain</span> allows you to go back at any time in case of a problem.
         </p>
         <p>
           The history allows you to easily track the latest changes, keeping track of who made them.
@@ -37,14 +37,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the management of zones between your teams.
           <small class="text-muted">
             (coming soon)
@@ -55,7 +55,7 @@ layout = "usage"
           Reduce friction between your teams by allowing them to manage records related to their projects (internal or even public).
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> implements a powerful access control system allowing you to delegate all or part of a zone, up to the recording.
+          happy<span class="fw-bold">Domain</span> implements a powerful access control system allowing you to delegate all or part of a zone, up to the recording.
         </p>
       </div>
     </div>
@@ -66,12 +66,12 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Centralize and synchronize your domain portfolios.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> connects to more than 25 hosting providers worldwide. You can manage them in the interface with one click.
+          happy<span class="fw-bold">Domain</span> connects to more than 25 hosting providers worldwide. You can manage them in the interface with one click.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -81,14 +81,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Keep track of the purpose of each sub-domain.
           <small class="text-muted">
             (coming soon)
@@ -96,7 +96,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you to set an expiration date on your subdomains so that a temporary event and its servers do not remain accessible, simply because a closing ticket has not been processed. We take care of it automatically.
+          happy<span class="fw-bold">Domain</span> allows you to set an expiration date on your subdomains so that a temporary event and its servers do not remain accessible, simply because a closing ticket has not been processed. We take care of it automatically.
         </p>
       </div>
     </div>

content/use-happyDomain/cio.fr.html

@@ -19,12 +19,12 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Garder une trace de chaque modification avec l'historique intégré.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet de revenir en arrière à n'importe quel moment en cas de problème.
+          happy<span class="fw-bold">Domain</span> vous permet de revenir en arrière à n'importe quel moment en cas de problème.
         </p>
         <p>
           L'historique vous permet de vous repérer facilement dans les dernières modifications, en gardant une trace des intervenants.
@@ -37,14 +37,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion des zones entre vos équipes.
           <small class="text-muted">
             (bientôt disponible)
@@ -55,7 +55,7 @@ layout = "usage"
           Réduisez les points de frictions entre vos équipes en leur permettant de gérer les enregistrements relatifs à leurs projets (internes ou publics).
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> met en place un puissant système de contrôle d'accès permettant de déléguer tout ou partie d'une zone, jusqu'à l'enregistrement.
+          happy<span class="fw-bold">Domain</span> met en place un puissant système de contrôle d'accès permettant de déléguer tout ou partie d'une zone, jusqu'à l'enregistrement.
         </p>
       </div>
     </div>
@@ -66,12 +66,12 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Centraliser et synchroniser vos portefeuilles de domaines.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> se connecte à plus de 25 hébergeurs à travers le monde. Vous pouvez les gérer dans l'interface en un clic.
+          happy<span class="fw-bold">Domain</span> se connecte à plus de 25 hébergeurs à travers le monde. Vous pouvez les gérer dans l'interface en un clic.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -81,14 +81,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Garder une trace de la raison d'être de chaque sous-domaine.
           <small class="text-muted">
             (bientôt disponible)
@@ -96,7 +96,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet de fixer une date d'expiration sur vos sous-domaines pour éviter qu'un événement temporaire et ses serveurs restent accessibles simplement parce qu'un ticket de fermeture n'a pas été traité. On s'en occupe automatiquement.
+          happy<span class="fw-bold">Domain</span> vous permet de fixer une date d'expiration sur vos sous-domaines pour éviter qu'un événement temporaire et ses serveurs restent accessibles simplement parce qu'un ticket de fermeture n'a pas été traité. On s'en occupe automatiquement.
         </p>
       </div>
     </div>

content/use-happyDomain/devops.en.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           All your domains' operations<br>
           accessible via a REST API.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Everything that's done in the happy<span class="font-weight-bold">Domain</span> web interface can easily be done with the API, in your language of choice.
+          Everything that's done in the happy<span class="fw-bold">Domain</span> web interface can easily be done with the API, in your language of choice.
         </p>
         <p>
           Our REST API is fully documented, and thanks to Swagger, you can browse it and easily generate a tool using it in any supported language.
@@ -40,20 +40,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Forget about the complexity of each hosting company.<br>
           Take advantage of our unified interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Don't be afraid of discovering a new host. happy<span class="font-weight-bold">Domain</span> manages over 25 hosts worldwide:
+          Don't be afraid of discovering a new host. happy<span class="fw-bold">Domain</span> manages over 25 hosts worldwide:
         </p>
         <ul class="text-left">
           <li class="mb-1"><strong>cloud services&nbsp;:</strong> Route53, Azure DNS, Google Cloud DNS, DigitalOcean, Linode, Oracle Cloud, ...</li>
@@ -73,13 +73,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Respond to all requests<br>
           with ease.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -89,14 +89,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/sdk-python.webp" alt="Python SDK usage">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Many tools are already available for you, DevOps.
         </h4>
         <hr class="bg-light mx-5">
@@ -107,8 +107,8 @@ layout = "usage"
             </a>
             <span class="text-hilight px-1 text-dark">add or modify zone records,</span>
             manage new domains through their registrar,
-            manage happy<span class="font-weight-bold">Domain</span>'s users,
+            manage happy<span class="fw-bold">Domain</span>'s users,
-            or deploy happy<span class="font-weight-bold">Domain</span> using the official Ansible collection.
+            or deploy happy<span class="fw-bold">Domain</span> using the official Ansible collection.
           </li>
           <li class="mb-2">
             <a href="https://pypi.org/project/happydomain/" target="_blank">

content/use-happyDomain/devops.fr.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Tous vos domaines<br>
           accessibles par une API REST.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Tout ce qui se fait dans l'interface web d'happy<span class="font-weight-bold">Domain</span> peut se faire facilement avec l'API, dans votre langage de prédilection.
+          Tout ce qui se fait dans l'interface web d'happy<span class="fw-bold">Domain</span> peut se faire facilement avec l'API, dans votre langage de prédilection.
         </p>
         <p>
           Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la parcourir et générer aisément un outil l'utilisant dans tous les langages supportés.
@@ -40,20 +40,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Oubliez la complexité de chaque hébergeur.<br>
           Profitez de notre interface unifiée.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="font-weight-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde&nbsp;:
+          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="fw-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde&nbsp;:
         </p>
         <ul class="text-left">
           <li class="mb-1"><strong>services de cloud&nbsp;:</strong> Route53, Azure DNS, Google Cloud DNS, DigitalOcean, Linode, Oracle Cloud, ...</li>
@@ -73,13 +73,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à toutes les demandes<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -89,14 +89,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/sdk-python.webp" alt="Utilisation du SDK Python">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Déjà de nombreux outils disponibles pour les DevOps.
         </h4>
         <hr class="bg-light mx-5">
@@ -107,8 +107,8 @@ layout = "usage"
             </a>
             <span class="text-hilight px-1 text-dark">ajouter ou modifier les enregistrements d'une zone,</span>
             gérer les bureaux d'enregistrement,
-            gérer les utilisateurs d'happy<span class="font-weight-bold">Domain</span>,
+            gérer les utilisateurs d'happy<span class="fw-bold">Domain</span>,
-            ou encore déployer happy<span class="font-weight-bold">Domain</span> grâce à la collection Ansible officielle.
+            ou encore déployer happy<span class="fw-bold">Domain</span> grâce à la collection Ansible officielle.
           </li>
           <li class="mb-2">
             <a href="https://pypi.org/project/happydomain/" target="_blank">

content/use-happyDomain/freelance.en.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           All domain names<br>
           grouped by customer.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          No matter how many customers you follow, happy<span class="font-weight-bold">Domain</span> always gives you a clear overview.
+          No matter how many customers you follow, happy<span class="fw-bold">Domain</span> always gives you a clear overview.
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -34,20 +34,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Forget about the complexity of each hosting company.<br>
           Take advantage of our unified interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Don't be afraid of discovering a new host. happy<span class="font-weight-bold">Domain</span> manages over 25 hosts worldwide. Your customers are probably using them.
+          Don't be afraid of discovering a new host. happy<span class="fw-bold">Domain</span> manages over 25 hosts worldwide. Your customers are probably using them.
         </p>
       </div>
     </div>
@@ -58,13 +58,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Respond to all requests<br>
           with ease.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -74,14 +74,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the management of the area with your client, his teams or your collaborators.
           <small class="text-muted">
             (coming soon)
@@ -89,7 +89,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whether it is permanent or in preparation for a particular event, happy<span class="font-weight-bold">Domain</span> offers you the possibility to collaborate on the editing of the same area.
+          Whether it is permanent or in preparation for a particular event, happy<span class="fw-bold">Domain</span> offers you the possibility to collaborate on the editing of the same area.
         </p>
         <p>
           Delegate to your client's teams all or only part of the area, it's up to you.

content/use-happyDomain/freelance.fr.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Tous les domaines<br>
           regroupés par client.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit le nombre de clients que vous suivez, happy<span class="font-weight-bold">Domain</span> vous <span class="text-stroke">donne un aperçu toujours clair</span>.
+          Quel que soit le nombre de clients que vous suivez, happy<span class="fw-bold">Domain</span> vous <span class="text-stroke">donne un aperçu toujours clair</span>.
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -34,20 +34,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Oubliez la complexité de chaque hébergeur.<br>
           Profitez de notre interface unifiée.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="font-weight-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde. Vos clients les utilisent sûrement.
+          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="fw-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde. Vos clients les utilisent sûrement.
         </p>
       </div>
     </div>
@@ -58,13 +58,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à toutes les demandes<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -74,14 +74,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion de la zone avec votre client, ses équipes ou vos collaborateurs.
           <small class="text-muted">
             (bientôt disponible)
@@ -89,7 +89,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Que ce soit de façon permanente ou en préparation d'un événement particulier, happy<span class="font-weight-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
+          Que ce soit de façon permanente ou en préparation d'un événement particulier, happy<span class="fw-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
         </p>
         <p>
           Déléguez aux équipes de votre client tout ou partie de la zone, c'est vous qui choisissez.

content/use-happyDomain/geek.en.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Discover a simple and clear interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whatever the host of your zones, happy<span class="font-weight-bold">Domain</span> displays them in a clear way to limit errors.
+          Whatever the host of your zones, happy<span class="fw-bold">Domain</span> displays them in a clear way to limit errors.
         </p>
         <p>
-          By installing happy<span class="font-weight-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration.
+          By installing happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration.
           <span class="text-muted">(coming soon)</span>
         </p>
       </div>
@@ -37,19 +37,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Self-hosting made easy.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you with the same interface to manage your DNS zone with a third party provider, or to manage your own DNS servers.
+          happy<span class="fw-bold">Domain</span> allows you with the same interface to manage your DNS zone with a third party provider, or to manage your own DNS servers.
         </p>
         <p>
           Don't be afraid to edit a zone text file, we take care of it!
@@ -66,13 +66,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Meet all your needs<br>
           in all simplicity.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused on the expected result.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused on the expected result.
         </p>
         <p>
           We are committed to providing the latest in DNS registration and services.
@@ -85,14 +85,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/service-caa.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Manage easily, even special zones.
           <small class="text-muted">
             (coming soon)
@@ -104,7 +104,7 @@ layout = "usage"
           Or a <a href="https://en.wikipedia.org/wiki/DNSBL">Real-time Blockhole List (DNSBL)</a> zone? Or a DNS <a href="https://www.dnsrpz.info/">Response Policy Zones</a> (DNS-RPZ)?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> understands them and allows you to manage them unequivocally.
+          happy<span class="fw-bold">Domain</span> understands them and allows you to manage them unequivocally.
         </p>
       </div>
     </div>

content/use-happyDomain/geek.fr.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Découvrez une interface simple et claire.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit l'hébergeur de vos zones, happy<span class="font-weight-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
+          Quel que soit l'hébergeur de vos zones, happy<span class="fw-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
         </p>
         <p>
-          En installant happy<span class="font-weight-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration.
+          En installant happy<span class="fw-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration.
           <span class="text-muted">(bientôt disponible)</span>
         </p>
       </div>
@@ -37,19 +37,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Auto-hébergement facilité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet avec la même interface de gérer votre zone DNS auprès d'un fournisseur tiers, ou de gérer votre/vos propres serveurs DNS.
+          happy<span class="fw-bold">Domain</span> vous permet avec la même interface de gérer votre zone DNS auprès d'un fournisseur tiers, ou de gérer votre/vos propres serveurs DNS.
         </p>
         <p>
           N'ayez plus peur de mal éditer un fichier texte de zone, on s'en occupe&nbsp;!
@@ -66,13 +66,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à tous vos besoins<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur le résultat attendu.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur le résultat attendu.
         </p>
         <p>
           Nous avons à cœur de mettre à disposition les dernières nouveautés en terme d'enregistrement DNS et de services.
@@ -85,14 +85,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/service-caa.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Gérez simplement, même les zones spéciales.
           <small class="text-muted">
             (bientôt disponible)
@@ -103,7 +103,7 @@ layout = "usage"
           Vous recherchez une interface qui affiche d'une manière humaine les zones de <span class="font-italic">reverse</span> IPv4/IPv6&nbsp;? ou une zone <a href="https://fr.wikipedia.org/wiki/DNSBL"><span class="font-italic">Real-time Blockhole List</span> (DNSBL)</a>&nbsp;? Ou encore une zone de politique <a href="https://www.dnsrpz.info/">de filtrage des réponses DNS (DNS-RPZ)</a>&nbsp;?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
+          happy<span class="fw-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
         </p>
       </div>
     </div>

content/use-happyDomain/sysadmin.en.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Edit your zone files more efficiently.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whatever the host of your zones, happy<span class="font-weight-bold">Domain</span> displays them in a clear way to limit errors.
+          Whatever the host of your zones, happy<span class="fw-bold">Domain</span> displays them in a clear way to limit errors.
         </p>
         <p>
-          By installing happy<span class="font-weight-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration. <span class="text-muted">(coming soon)</span>
+          By installing happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration. <span class="text-muted">(coming soon)</span>
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -36,19 +36,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Review and confirm the changes that will be applied">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           View your changes before applying them.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Before publishing your changes, happy<span class="font-weight-bold">Domain</span> shows you what changes will be made. A preview that will avoid many mistakes.
+          Before publishing your changes, happy<span class="fw-bold">Domain</span> shows you what changes will be made. A preview that will avoid many mistakes.
         </p>
         <p>
           You can even select which changes you want to release now and which ones should wait.
@@ -62,7 +62,7 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the zone management with your teams or collaborators.
           <small class="text-muted">
             (coming soon)
@@ -70,7 +70,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whether it's permanent or in preparation for a particular event, happy<span class="font-weight-bold">Domain</span> gives you the ability to collaborate on editing the same area.
+          Whether it's permanent or in preparation for a particular event, happy<span class="fw-bold">Domain</span> gives you the ability to collaborate on editing the same area.
         </p>
         <p>
           Delegate to your teams all or only part of the area, it's up to you.
@@ -83,14 +83,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domains-list.png" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Manage simply, even the special zones.
           <small class="text-muted">
             (coming soon)
@@ -102,7 +102,7 @@ layout = "usage"
           Or a <a href="https://en.wikipedia.org/wiki/DNSBL">Real-time Blockhole List (DNSBL)</a> zone? Or a DNS <a href="https://www.dnsrpz.info/">Response Policy Zones</a> (DNS-RPZ)?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> understands them and allows you to manage them unequivocally.
+          happy<span class="fw-bold">Domain</span> understands them and allows you to manage them unequivocally.
         </p>
       </div>
     </div>

content/use-happyDomain/sysadmin.fr.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Éditez plus efficacement vos fichiers de zone.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit l'hébergeur de vos zones, happy<span class="font-weight-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
+          Quel que soit l'hébergeur de vos zones, happy<span class="fw-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
         </p>
         <p>
-          En installant happy<span class="font-weight-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration. <span class="text-muted">(bientôt disponible)</span>
+          En installant happy<span class="fw-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration. <span class="text-muted">(bientôt disponible)</span>
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -36,19 +36,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Visualisez les modifications apportées avant de les appliquer.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Avant de publier vos changements, happy<span class="font-weight-bold">Domain</span> vous montre quelles modifications seront faites. Une prévisualisation qui évitera bien des erreurs.
+          Avant de publier vos changements, happy<span class="fw-bold">Domain</span> vous montre quelles modifications seront faites. Une prévisualisation qui évitera bien des erreurs.
         </p>
         <p>
           Vous pouvez même sélectionner les changements que vous souhaitez diffuser maintenant et ceux qui doivent attendre.
@@ -62,7 +62,7 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion de la zone avec vos équipes ou vos collaborateurs.
           <small class="text-muted">
             (bientôt disponible)
@@ -70,7 +70,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Que ce soit permanent ou en préparation d'un événement particulier, happy<span class="font-weight-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
+          Que ce soit permanent ou en préparation d'un événement particulier, happy<span class="fw-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
         </p>
         <p>
           Déléguez à vos équipes tout ou partie de la zone, c'est vous qui choisissez.
@@ -83,14 +83,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domains-list.png" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Gérez simplement, même les zones spéciales.
           <small class="text-muted">
             (bientôt disponible)
@@ -101,7 +101,7 @@ layout = "usage"
           Vous recherchez une interface qui affiche d'une manière humaine les zones de <span class="font-italic">reverse</span> IPv4/IPv6&nbsp;? ou une zone <a href="https://fr.wikipedia.org/wiki/DNSBL"><span class="font-italic">Real-time Blockhole List</span> (DNSBL)</a>&nbsp;? Ou encore une zone de politique <a href="https://www.dnsrpz.info/">de filtrage des réponses DNS (DNS-RPZ)</a>&nbsp;?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
+          happy<span class="fw-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
         </p>
       </div>
     </div>

data/features.toml

@@ -8,12 +8,12 @@ id = "registrar"
     en = "Choose your provider"
 
   [features.title]
-  fr = "Gérer les zones hébergées chez des prestataires d'hébergement"
+  fr = "Gérer les zones de votre fournisseur de noms de domaine"
-  en = "Manage your zones hosted on hosting providers"
+  en = "Manage zones at your registrar"
 
   [features.content]
-  fr = "happyDomain peut regrouper les domaines que vous possédez dans différents bureaux d'enregistrement. Nous supportons aujourd'hui plus de 55 fournisseurs tels que OVH, Gandi, DigitalOcean, ..."
+  fr = "Connectez OVH, Gandi, DigitalOcean, Cloudflare et plus de 50 autres. happyDomain lit, édite et synchronise les zones pour vous."
-  en = "happyDomain can group the domains you own in different registrars. We currently support 55+ providers like OVH, Gandi, DigitalOcean, ..."
+  en = "Connect OVH, Gandi, DigitalOcean, Cloudflare and 50+ more. happyDomain reads, edits and synchronizes their zones for you."
 
   [features.link]
   link = "https://app.happydomain.org/providers/features"
@@ -32,16 +32,16 @@ id = "dynamicDNS"
   [features.img]
   src = "/img/screenshots/features/dyndns.png"
     [features.img.alt]
-    fr = "Une interface au dessus de votre serveur existant"
+    fr = "Gérez votre propre serveur de noms"
-    en = "An interface on top of your existing server"
+    en = "Drive your own name server"
 
   [features.title]
   fr = "Gérer les zones de vos serveurs BIND, Knot, PowerDNS, ..."
   en = "Manage your zones backed by BIND, Knot, PowerDNS, ..."
 
   [features.content]
-  fr = "happyDomain peut s'utiliser comme interface au dessus d'un serveur faisant autorité. Il utilise pour cela le Dynamic DNS (RFC 2136), implémenté dans de nombreux serveurs."
+  fr = "Utilisez happyDomain comme interface conviviale devant BIND, Knot ou PowerDNS via le DNS dynamique (RFC 2136). Implémenté dans de nombreux serveurs faisant autorité."
-  en = "happyDomain can be used as an interface above an authoritative name server. It uses the Dynamic DNS (RFC 2136), implemented in many server software."
+  en = "Use happyDomain as a friendly UI in front of BIND, Knot or PowerDNS via Dynamic DNS (RFC 2136). Implemented in many authoritative servers."
 
   [features.link]
   link = "https://help.happydomain.org/fr/deploy/"
@@ -59,12 +59,12 @@ id = "diff"
     en = "Sample diff"
 
   [features.title]
-  fr = "Visualiser clairement les changements"
+  fr = "Visualiser chaque changement"
-  en = "Clearly visualize changes"
+  en = "Visualize every change"
 
   [features.content]
-  fr = "Avant de publier vos modifications, happyDomain vous montre quels seront exactement les changements (ajouts, modifications, suppressions, ...) qui seront effectués sur la zone. C'est le bon moment pour se relire."
+  fr = "Avant de publier, vérifiez précisément quels enregistrements seront ajoutés, modifiés ou supprimés. Vous pouvez relire attentivement les changements avant d'appuyer sur le bouton."
-  en = "Before publishing your changes, happyDomain shows you exactly what changes (additions, modifications, deletions, ...) will be made to your zone. This is a good time to reread."
+  en = "Before publishing, see exactly which records will be added, modified or deleted. Read-through your zone before you press the button."
 
 
 [[features]]
@@ -77,8 +77,8 @@ id = "resolver"
     en = "DNS Resolver"
 
   [features.title]
-  fr = "Tester ou déboguer votre zone en ligne"
+  fr = "Tester et déboguer votre zone"
-  en = "Test or debug your zone online"
+  en = "Test & debug your zone"
 
   [features.content]
   fr = "happyDomain intégre un résolveur DNS simple d'utilisation, qui vous permet de vous connecter sans effort à une cinquantaine de résolveurs publics. Vous pouvez facilement voir la propagation de vos modifications."
@@ -90,29 +90,6 @@ id = "resolver"
   en = "I want to test this now!"
 
 
-[[features]]
-id = "rest"
-
-  [features.img]
-  src = "/img/screenshots/features/rest.png"
-    [features.img.alt]
-    fr = "API REST"
-    en = "REST API"
-
-  [features.title]
-  fr = "Utiliser happyDomain comme API REST"
-  en = "Use happyDomain as a API REST"
-
-  [features.content]
-  fr = "happyDomain expose une API REST que vous pouvez utiliser pour automatiser des tâches de création de sous-domaine à la volée, par exemple dans votre système de déploiement continu."
-  en = "happyDomain exposes a REST API that you can use to automate sub-domain creation tasks on the fly, for example in your continuous deployment system."
-
-  [features.link]
-  link = "https://app.happydomain.org/swagger/index.html"
-  fr = "Montrez-moi l'API !"
-  en = "Show me the API!"
-
-
 [[features]]
 id = "history"
 
@@ -124,8 +101,31 @@ id = "history"
 
   [features.title]
   fr = "Garder une trace des modifications"
-  en = "Keeping track of changes"
+  en = "Versioned, undoable"
 
   [features.content]
-  fr = "happyDomain ne se contente pas de vous montrer votre zone telle qu'elle est publiée. Chaque modification est enregistrée afin de garder un historique de vos changements. En cas de problème, revenez à une version précédente en 2 clics."
+  fr = "Chaque modification publiée est enregistrée. Revenez à n'importe quelle version précédente de votre zone en deux clics. Auditez qui a effectué quelles modifications."
-  en = "happyDomain doesn't just show you your zone as it is published. Every modification is saved to keep a history of your changes. In case of problem, go back to a previous version in 2 clicks."
+  en = "Every published change is saved. Roll back to any previous version of your zone in two clicks. Audit who did what."
+
+
+[[features]]
+id = "rest"
+
+  [features.img]
+  src = "/img/screenshots/features/rest.png"
+    [features.img.alt]
+    fr = "API REST"
+    en = "REST API"
+
+  [features.title]
+  fr = "API REST, scripter vos domaines"
+  en = "REST API, ready to script"
+
+  [features.content]
+  fr = "Automatisez la création de domaines à la volée : idéal pour le déploiement continu et la mise en place de locataires."
+  en = "Automate domain creation tasks on the fly: perfect for continuous deployment and tenant provisioning."
+
+  [features.link]
+  link = "https://app.happydomain.org/swagger/index.html"
+  fr = "Montrez-moi l'API !"
+  en = "Show me the API!"

i18n/en.yaml

@@ -1,15 +1,16 @@
 - id: slogan
   translation: |
-    <span class="font-weight-bolder" style="color: var(--secondary-subtle)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--secondary-subtle)">One</span> interface.
+    <span class="font-weight-bolder" style="color: var(--bs-primary)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--bs-primary)">One</span> interface.
 
 - id: lead
-  translation: "is a free web interface that brings all your domain names together in one simple space."
+  translation: |
+    brings every DNS zone you manage (across registrars, providers and self-hosted name servers) into one calm space, clearly organized by service.
 
 - id: tryit
-  translation: "Try it online now"
+  translation: "Try it online"
 
 - id: downloadit
-  translation: "Download now"
+  translation: "Self-host it"
 
 - id: learnhow
   translation: "Learn how"
@@ -44,12 +45,15 @@
 - id: press-kit
   translation: "Press Kit"
 
-- id: features-title
+- id: features-eyebrow
   translation: "Main features"
 
+- id: features-title
+  translation: "Everything DNS, calm and connected."
+
 - id: features-lead
   translation: |
-    Find out how happyDomain can simplify your domain name management.
+    happyDomain works as a smart layer above your existing infrastructure: connecting to registrars, hosting providers and authoritative servers so you can manage them all from one place.
 
 - id: features-grid-title
   translation: What can happyDomain do for you today?
@@ -119,7 +123,9 @@
 
     We publish a [Docker image](https://hub.docker.com/r/happydomain/happydomain/), feel free to test it thanks to:
 
-            docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
+    docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
 
     Precompiled binaries are also availables on <https://get.happydomain.org/>.
 
@@ -199,6 +205,12 @@
 - id: footer-us-button-link
   translation: "/en/who-we-are/"
 
+- id: footer-tagline
+  translation: "Free, open-source DNS management. Propagating happiness, one domain at a time."
+- id: footer-made-eu
+  translation: "Made with care in the EU"
+- id: footer-product
+  translation: "Product"
 - id: footer-happydomain-features
   translation: "Features"
 - id: footer-happydomain-testimonials
@@ -224,13 +236,17 @@
 - id: footer-resources-faq
   translation: "FAQ"
 - id: footer-company
-  translation: "Our association"
+  translation: "Project"
 - id: footer-company-about
   translation: "About us"
+- id: footer-company-license
+  translation: "License (AGPL)"
 - id: footer-company-contact
   translation: "Contact"
 - id: footer-follow
   translation: "Follow us"
+- id: footer-legal
+  translation: "Legal"
 
 - id: cta-account-title
   translation: "Ready to simplify your domain management?"
@@ -239,6 +255,13 @@
 - id: cta-account-button
   translation: "Create my online space"
 
+- id: beta-alert-title
+  translation: "Online version closed, beta access only"
+- id: beta-alert-text
+  translation: 'happyDomain is evolving: soon, continuously test your domains'' security and monitor every service exposed through DNS — with zero configuration. We''re rolling out this new version progressively to gather feedback and deliver the best possible service. <a href="/en/beta/">Learn more</a>.'
+- id: beta-alert-button
+  translation: "Join the beta"
+
 - id: cta-newsletter-title
   translation: "Stay a step ahead!"
 - id: cta-newsletter-text
@@ -258,3 +281,8 @@
   translation: "https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/"
 - id: conf-fosdem24-body-2
   translation: "on the FOSDEM website, along with the video."
+
+- id: usage-discover-pre
+  translation: "Discover"
+- id: usage-discover-post
+  translation: "for:"

i18n/fr.yaml

@@ -1,15 +1,16 @@
 - id: slogan
   translation: |
-    <span class="font-weight-bolder" style="color: var(--secondary-subtle)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--secondary-subtle)">Une</span> interface.
+    <span class="font-weight-bolder" style="color: var(--bs-primary)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--bs-primary)">Une</span> interface.
 
 - id: lead
-  translation: "est une interface web libre qui rassemble tous vos noms de domaine dans un endroit simple."
+  translation: |
+    rassemble toutes les zones DNS que vous gérez (qu'elles proviennent de bureaux d'enregistrement, de prestataires de cloud ou de serveurs de noms auto-hébergés) au sein d'un espace unique et clair, organisé clairement par service.
 
 - id: tryit
   translation: "Essayer maintenant"
 
 - id: downloadit
-  translation: "Télécharger"
+  translation: "Hébergez-le"
 
 - id: learnhow
   translation: "Découvrez comment"
@@ -44,9 +45,12 @@
 - id: press-kit
   translation: "Dossier de presse"
 
-- id: features-title
+- id: features-eyebrow
   translation: "Principales fonctionnalités"
 
+- id: features-title
+  translation: "Tout le DNS, sereinement connecté."
+
 - id: features-lead
   translation: "Découvrez comment happyDomain peut faciliter la gestion de vos noms de domaine."
 
@@ -118,7 +122,9 @@
 
     Vous préférez une [image Docker](https://hub.docker.com/r/happydomain/happydomain/) ? Essayez-la
 
-            docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
+    docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
 
     Les binaires précompilés sont disponibles sur <https://get.happydomain.org/>.
 
@@ -198,6 +204,12 @@
 - id: footer-us-button-link
   translation: "/fr/qui-sommes-nous/"
 
+- id: footer-tagline
+  translation: "Gestion DNS libre et open-source. Propager le bonheur, un domaine à la fois."
+- id: footer-made-eu
+  translation: "Fabriqué avec soin en Europe"
+- id: footer-product
+  translation: "Produit"
 - id: footer-happydomain-features
   translation: "Fonctionnalités"
 - id: footer-happydomain-testimonials
@@ -223,13 +235,17 @@
 - id: footer-resources-faq
   translation: "FAQ"
 - id: footer-company
-  translation: "L'association"
+  translation: "Projet"
 - id: footer-company-about
   translation: "À propos"
+- id: footer-company-license
+  translation: "Licence (AGPL)"
 - id: footer-company-contact
   translation: "Contact"
 - id: footer-follow
   translation: "Suivez-nous"
+- id: footer-legal
+  translation: "Légal"
 
 - id: cta-account-title
   translation: "Prêt à simplifier votre gestion de domaines ?"
@@ -238,6 +254,13 @@
 - id: cta-account-button
   translation: "Créer mon espace en ligne"
 
+- id: beta-alert-title
+  translation: "Version en ligne fermée, accès bêta uniquement"
+- id: beta-alert-text
+  translation: 'happyDomain se transforme : bientôt, testez en continu la sécurité de vos domaines et supervisez l''ensemble des services exposés via le DNS, sans configuration. Nous déployons cette nouvelle version progressivement pour recueillir vos retours et offrir le meilleur service possible. <a href="/fr/beta/">En savoir plus</a>.'
+- id: beta-alert-button
+  translation: "Rejoindre la bêta"
+
 - id: cta-newsletter-title
   translation: "Gardez une longueur d'avance !"
 - id: cta-newsletter-text
@@ -257,3 +280,8 @@
   translation: "https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/"
 - id: conf-fosdem24-body-2
   translation: "sur le site du FOSDEM, avec la captation vidéo !"
+
+- id: usage-discover-pre
+  translation: "Découvrez"
+- id: usage-discover-post
+  translation: "pour :"

layouts/_default/list.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="{{ .Site.LanguageCode }}" style="background-color: var(--bs-dark)">
+    {{ partial "head.html" . }}
+
+    <body>
+        <div id="all">
+            {{ partial "nav.html" . }} {{ partial "breadcrumbs.html" . }}
+
+            <div
+                id="content"
+                class="mt-5 mb-5"
+                style="min-height: calc(80vh - 152px)"
+            >
+                <div class="container">
+                    <header>
+                        <h1>{{ .Title }}</h1>
+                    </header>
+
+                    {{ with .Content }}
+                    <div>{{ . }}</div>
+                    {{ end }}
+
+                    <ul class="list-unstyled mt-4">
+                        {{ range .Pages }}
+                        <li class="mb-3">
+                            <a href="{{ .RelPermalink }}"><h3>{{ .Title }}</h3></a>
+                            {{ with .Description }}<p>{{ . }}</p>{{ end }}
+                        </li>
+                        {{ end }}
+                    </ul>
+                </div>
+                <!-- /.container -->
+            </div>
+            <!-- /#content -->
+        </div>
+        <!-- /#all -->
+
+        {{ partial "footer.html" . }} {{ partial "scripts.html" . }}
+    </body>
+</html>

layouts/_default/single.html

@@ -1,51 +1,39 @@
-<!DOCTYPE html>
+<!doctype html>
-<html lang="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}" style="background-color: var(--bs-dark)">
+    {{ partial "head.html" . }}
 
-  {{ partial "head.html" . }}
+    <body>
+        <div id="all">
+            {{ partial "nav.html" . }} {{ partial "breadcrumbs.html" . }}
 
-  <body>
+            <div
+                id="content"
+                class="mt-5 mb-5"
+                style="min-height: calc(80vh - 152px)"
+            >
+                {{ if isset .Params "id" }} {{ partial .Params.id . }} {{ else
+                }}
 
-    <div id="all">
+                <div class="container">
+                    {{ if .Params.toc }}
+                    <aside>
+                        <header>
+                            <h1>{{ .Title }}</h1>
+                        </header>
+                        {{ .TableOfContents }}
+                    </aside>
+                    {{ end }}
 
-      {{ partial "nav.html" . }}
+                    <div>{{ .Content }}</div>
-
+                </div>
-      {{ partial "breadcrumbs.html" . }}
+                <!-- /.container -->
-
-      <div id="content" class="mt-5 mb-5" style="min-height: calc(80vh - 180px)">
-        {{ if isset .Params "id" }}
-
-        {{ partial .Params.id . }}
-
-        {{ else }}
-
-        <div class="container">
-
-          {{ if .Params.toc }}
-          <aside>
-            <header>
-              <h1>{{ .Title }}</h1>
-            </header>
-            {{ .TableOfContents }}
-          </aside>
-          {{ end }}
-
-          <div>
-            {{ .Content }}
-          </div>
 
+                {{ end }}
+            </div>
+            <!-- /#content -->
         </div>
-        <!-- /.container -->
+        <!-- /#all -->
 
-        {{ end }}
+        {{ partial "footer.html" . }} {{ partial "scripts.html" . }}
-      </div>
+    </body>
-      <!-- /#content -->
-
-    </div>
-    <!-- /#all -->
-
-    {{ partial "footer.html" . }}
-
-    {{ partial "scripts.html" . }}
-
-  </body>
 </html>

layouts/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}" style="background-color: #3A0B4D">
+<html lang="{{ .Site.LanguageCode }}" style="background-color: var(--bs-dark)">
 
   {{ partial "head.html" . }}
 
@@ -13,10 +13,14 @@
 
       {{ partial "jumbo.html" . }}
 
-      {{ partial "carousel.html" . }}
+      {{ partial "work-with.html" . }}
+
+      {{ partial "big-idea.html" . }}
 
       {{ partial "features.html" . }}
 
+      {{ partial "carousel.html" . }}
+
       {{ partial "discover.html" . }}
 
       {{/* partial "testimonials.html" . */}}

layouts/partials/big-idea.html

@@ -0,0 +1,72 @@
+<!-- ── The big idea: services not records ─────────────── -->
+<section class="section section--paper" id="idea">
+  <div class="container">
+    <div class="section-head">
+      <span class="eyebrow"><span class="dot"></span>The big idea</span>
+      <h2 class="h2">Stop reading zone files.<br>Start managing services.</h2>
+      <p class="lede">DNS records are an implementation detail. happyDomain groups them by what they actually <em>do</em> — your email, your website, your delegation — so you can edit with intent instead of decoding RFCs.</p>
+    </div>
+
+    <div class="idea-grid">
+      <div class="idea-col">
+        <div class="idea-tag"><span class="num">A</span>Without happyDomain</div>
+        <h3><span class="strike">happydomain.org</span> · zone file</h3>
+<pre class="zone-pre"><span class="c">; Zone: happydomain.org.</span>
+<span class="c">; TTL = 3600</span>
+
+@      IN <span class="k">SOA</span>   ns1 admin 2024010101 3600 900 604800 300
+@      IN <span class="k">NS</span>    ns1.happydomain.org.
+@      IN <span class="k">NS</span>    ns2.happydomain.org.
+@      IN <span class="k">A</span>     <span class="v">93.184.216.34</span>
+@      IN <span class="k">AAAA</span>  <span class="v">2606:2800:220:1:248:1893:25c8:1946</span>
+@      IN <span class="k">MX</span>    10 mail.happydomain.org.
+@      IN <span class="k">TXT</span>   <span class="v">"v=spf1 include:_spf.eu ~all"</span>
+_dmarc IN <span class="k">TXT</span>   <span class="v">"v=DMARC1; p=none; rua=…"</span>
+mail   IN <span class="k">A</span>     <span class="v">93.184.216.40</span>
+www    IN <span class="k">CNAME</span> @
+@      IN <span class="k">CAA</span>   <span class="v">0 issue "letsencrypt.org"</span></pre>
+      </div>
+      <div class="idea-col">
+        <div class="idea-tag"><span class="num">B</span>With happyDomain</div>
+        <h3>happydomain.org · services</h3>
+        <div class="svc">
+          <div class="svc-row">
+            <div class="svc-l">
+              <div class="svc-ico"><i class="bi bi-globe2"></i></div>
+              <div><div class="svc-name">Website</div><div class="svc-desc">A, AAAA on @ · CNAME on www</div></div>
+            </div>
+            <div class="svc-r"><span class="svc-cnt">3</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
+          </div>
+        </div>
+        <div class="svc">
+          <div class="svc-row">
+            <div class="svc-l">
+              <div class="svc-ico"><i class="bi bi-envelope"></i></div>
+              <div><div class="svc-name">Email</div><div class="svc-desc">MX, SPF and DMARC policy</div></div>
+            </div>
+            <div class="svc-r"><span class="svc-cnt">3</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
+          </div>
+        </div>
+        <div class="svc">
+          <div class="svc-row">
+            <div class="svc-l">
+              <div class="svc-ico"><i class="bi bi-diagram-3"></i></div>
+              <div><div class="svc-name">Delegation</div><div class="svc-desc">2 nameservers</div></div>
+            </div>
+            <div class="svc-r"><span class="svc-cnt">2</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
+          </div>
+        </div>
+        <div class="svc">
+          <div class="svc-row">
+            <div class="svc-l">
+              <div class="svc-ico"><i class="bi bi-shield-check"></i></div>
+              <div><div class="svc-name">TLS / Security</div><div class="svc-desc">CAA · Let's Encrypt only</div></div>
+            </div>
+            <div class="svc-r"><span class="svc-cnt">1</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
+          </div>
+        </div>
+        <p style="font-size:12.5px; color: var(--fg-3); margin: 16px 0 0;">Same zone. Edit by intent, not by record type.</p>
+      </div>
+    </div>
+  </div>
+</section>

layouts/partials/breadcrumbs.html

@@ -1,4 +1,4 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef">
+<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
     <ol class="breadcrumb container">
         <li class="breadcrumb-item"><a href="../">{{ i18n "home" }}</a></li>
         <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>

layouts/partials/breadcrumbs_usage.html

@@ -1,20 +1,14 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef">
+<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
-  <div class="container d-flex">
+    <div class="container d-flex gap-1">
-    <div class="align-self-center">
+        <div class="align-self-center">
-      Découvrez
+            {{ i18n "usage-discover-pre" }} <span style="font-family: var(--hd-font-brand)">happy<strong>Domain</strong></span> {{ i18n "usage-discover-post" }}
-      <svg version="1.1" viewBox="7 5 100 15" aria-labelledby="title" style="height: 1em">
+        </div>
-        <title>happyDomain</title>
+        <ol class="breadcrumb mb-0">
-        <g fill="#000" stroke="#000" stroke-width=".4" aria-label="happy"><path d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z" /><path d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z" /><path d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z" /></g>
+            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
-        <g fill="#000" aria-label="Domain"><path d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z" /><path d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z" /><path d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z" /><path d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z" /><path d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z" /><path d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z" /></g>
+            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
-      </svg>
+            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
-      pour :
+            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
+            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
+        </ol>
     </div>
-    <ol class="breadcrumb mb-0">
-      <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
-      <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
-      <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
-      <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
-      <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
-    </ol>
-  </div>
 </nav>

layouts/partials/carousel.html

@@ -1,11 +1,15 @@
 {{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
 <section
     id="screenshots"
-    class="carousel text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
+    class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
-    style="gap: 1em 1em; overflow-x: scroll"
+    style="
+        background-color: var(--hd-plum-600);
+        gap: 1em 1em;
+        overflow-x: scroll;
+    "
 >
     {{ range sort .Site.Params.carousel "weight" }}
-    <figure class="my-5 mr-5 text-center" style="min-width: 65vw">
+    <figure class="my-5 me-5 text-center" style="min-width: 65vw">
         <a href="{{ .image }}">
             <img
                 class="rounded img-thumbnail"

layouts/partials/cta-join.html

@@ -2,7 +2,7 @@
 <section id="cta">
     <div class="container">
         <div class="cta-content">
-            <h2 class="display-5 font-weight-bold mb-4">
+            <h2 class="display-5 fw-bold mb-4">
                 {{ i18n "cta-account-title" }}
             </h2>
             <div class="row mb-4">
@@ -13,7 +13,7 @@
                 </p>
             </div>
             <a
-                href="/register"
+                href="/beta/"
                 class="btn btn-lg btn-light px-4"
                 style="border-radius: 2em"
                 data-umami-event="cta-join"

layouts/partials/cta-newsletter.html

@@ -9,7 +9,7 @@
                     <div
                         class="col-lg-7 d-flex flex-column justify-content-center"
                     >
-                        <h2 class="font-weight-bold">
+                        <h2 class="fw-bold">
                             {{ i18n "cta-newsletter-title" }}
                         </h2>
                         <p class="lead mb-0">
@@ -39,10 +39,11 @@
                             placeholder="j.postel@isi.edu"
                             class="form-control my-3"
                         />
-                        <div
+                        <altcha-widget
-                            class="my-2 mx-auto h-captcha"
+                            floating
-                            data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"
+                            class="my-2 mx-auto"
-                        ></div>
+                            challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"
+                        ></altcha-widget>
                         <button
                             type="submit"
                             class="btn btn-lg btn-primary py-2"
@@ -50,7 +51,7 @@
                         >
                             {{ i18n "cta-newsletter-button1" }}
                         </button>
-                        <small class="form-text text-justify my-2">
+                        <small class="form-text my-2">
                             {{ i18n "cta-newsletter-no-spam" }}
                         </small>
                     </form>

layouts/partials/discover.html

@@ -1,4 +1,4 @@
-<section id="discover" class="py-5" style="background: linear-gradient(to right, var(--secondary-ultralight) 0%, white 100%)">
+<section id="discover" class="py-5" style="background: var(--hd-green-50)">
     <div class="container">
         <div class="section-title text-center mb-5">
             <h2 class="mb-3 display-4">

layouts/partials/downloads.html

@@ -12,7 +12,7 @@
                 />
             </div>
             <div class="col">
-                <h3 class="font-weight-bolder">
+                <h3 class="fw-bolder">
                     {{ i18n "downloads-title" }}
                     <span class="text-muted">
                         {{ i18n "downloads-subtitle" }}

layouts/partials/features.html

@@ -1,20 +1,58 @@
-<section id="features" class="bg-light" style="scroll-margin-top: 2em">
+<section id="features" class="section" style="scroll-margin-top: 2em">
-    <div class="container py-4">
+    <div class="container">
-        <div class="section-title text-center mt-5 mb-5">
+        <div class="section-head">
-            <h2 class="mb-3 display-4">{{ i18n "features-title" }}</h2>
+            <span class="eyebrow"
-            <div class="row">
+                ><span class="dot"></span>{{ i18n "features-eyebrow" }}</span
-                <p
+            >
-                    class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted"
+            <h2 class="h2">{{ i18n "features-title" }}</h2>
-                    style="font-size: 1.15rem"
+            <p class="lede">{{ i18n "features-lead" }}</p>
-                >
-                    {{ i18n "features-lead" }}
-                </p>
-            </div>
         </div>
 
-        <div class="alert alert-warning my-5 d-flex">
+        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
+            {{ range $index, $element := $.Site.Data.features.features }} {{ if
+            index .title $.Language.Lang }}
+            <div class="col mb-5">
+                <div class="h-100 card" id="feature-{{ .id }}">
+                    {{ if and .img .img.src }}
+                    <img
+                        src="{{ .img.src }}"
+                        class="card-img-top"
+                        alt="{{ index .img.alt $.Language.Lang }}"
+                    />
+                    {{ end }}
+                    <div class="card-body align-items-center">
+                        <div class="d-flex flex-column justify-content-center">
+                            <h4 class="card-title fw-bolder">
+                                {{ index .title $.Language.Lang }}
+                            </h4>
+                            <p class="card-text">
+                                {{ index .content $.Language.Lang }}
+                            </p>
+                            {{ if and .link .link.link }}
+                            <a
+                                href="{{ .link.link }}"
+                                class="card-link"
+                                data-umami-event="features-{{ .id }}"
+                                >{{ index .link $.Language.Lang }}</a
+                            >
+                            {{ end }} {{ if and .link2 .link2.link }}
+                            <br /><a
+                                href="{{ .link2.link }}"
+                                class="card-link mt-2"
+                                data-umami-event="features-{{ .id }}-2"
+                                >{{ index .link2 $.Language.Lang }}</a
+                            >
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{ end }} {{ end }}
+        </div>
+
+        <div class="alert alert-warning mt-5 d-flex">
             <div class="display-2">🏗️</div>
-            <div class="ml-2 flex-fill">
+            <div class="ms-2 flex-fill">
                 <p class="lead">{{ i18n "features-wip-lead" }}</p>
                 <p>
                     {{ i18n "features-wip-p1-start" }}
@@ -44,47 +82,5 @@
                 </p>
             </div>
         </div>
-
-        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-            {{ range $index, $element := $.Site.Data.features.features }} {{ if
-            index .title $.Language.Lang }}
-            <div class="col mb-5">
-                <div class="h-100 card" id="feature-{{ .id }}">
-                    {{ if and .img .img.src }}
-                    <img
-                        src="{{ .img.src }}"
-                        class="card-img-top"
-                        alt="{{ index .img.alt $.Language.Lang }}"
-                    />
-                    {{ end }}
-                    <div class="card-body align-items-center">
-                        <div class="d-flex flex-column justify-content-center">
-                            <h4 class="card-title font-weight-bolder">
-                                {{ index .title $.Language.Lang }}
-                            </h4>
-                            <p class="card-text text-justify">
-                                {{ index .content $.Language.Lang }}
-                            </p>
-                            {{ if and .link .link.link }}
-                            <a
-                                href="{{ .link.link }}"
-                                class="card-link"
-                                data-umami-event="features-{{ .id }}"
-                                >{{ index .link $.Language.Lang }}</a
-                            >
-                            {{ end }} {{ if and .link2 .link2.link }}
-                            <br /><a
-                                href="{{ .link2.link }}"
-                                class="card-link mt-2"
-                                data-umami-event="features-{{ .id }}-2"
-                                >{{ index .link2 $.Language.Lang }}</a
-                            >
-                            {{ end }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {{ end }} {{ end }}
-        </div>
     </div>
 </section>

layouts/partials/footer.html

@@ -1,81 +1,70 @@
-<footer class="pt-3 pb-2 bg-dark text-light">
+<footer class="pt-5 pb-3 bg-dark text-light">
   <div class="container">
-    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-5 g-4 mb-4">
-      <div class="col">
+      <div class="col footer-brand-col">
-        <h3>
+        <div class="footer-logo mb-3">
-         <svg version="1.1" viewBox="7 5 100 15" aria-labelledby="title" height="1.1em">
+          {{ partial "logo.html" (dict "height" "1.4em") }}
-          <title>happyDomain</title>
+        </div>
-          <g fill="#fff" stroke="#fff" stroke-width=".4" aria-label="happy"><path d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z" /><path d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z" /><path d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z" /></g>
+        <p class="footer-tagline">{{ i18n "footer-tagline" }}</p>
-          <g fill="#fff" aria-label="Domain"><path d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z" /><path d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z" /><path d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z" /><path d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z" /><path d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z" /><path d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z" /></g>
+        <div class="footer-social d-flex flex-wrap gap-2 mt-3">
-         </svg>
+          <a href="https://framagit.org/happyDomain/happydomain" target="_blank" rel="noopener" title="Framagit" data-umami-event="footer-framagit">
-        </h3>
-        <ul class="footer-links">
-          <li><a href="#features">{{ i18n "footer-happydomain-features" }}</a></li>
-          <li><a href="#discover">{{ i18n "discover-title" }}</a></li>
-          <li><a href="https://try.happydomain.org/" data-umami-event="footer-tryit">{{ i18n "tryit" }}</a></li>
-          <!--li><a href="#testimonials">{{ i18n "footer-happydomain-testimonials" }}</a></li-->
-          <li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
-          <!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
-          <li><a href="https://github.com/happyDomain/happydomain/" data-umami-event="footer-github">{{ i18n "footer-happydomain-github" }}</a></li>
-        </ul>
-      </div>
-      <div class="col">
-        <h3>{{ i18n "footer-resources" }}</h3>
-        <ul class="footer-links">
-          <li><a href="https://help.happydomain.org/{{ .Site.Language.Lang }}/" target="_blank" rel="noopener" data-umami-event="footer-docs">{{ i18n "footer-resources-docs" }}</a></li>
-          <li><a href="https://app.happydomain.org/swagger/index.html" target="_blank" rel="noopener" data-umami-event="footer-api">{{ i18n "footer-resources-api" }}</a></li>
-          <li><a href="https://blog.happydomain.org/" data-umami-event="footer-blog">{{ i18n "footer-resources-blog" }}</a></li>
-          <li><a href="/{{ .Site.Language.Lang }}/newsletter/" data-umami-event="footer-newsletter">{{ i18n "footer-resources-newsletter" }}</a></li>
-          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-community">{{ i18n "footer-resources-community" }}</a></li>
-          <!--li><a href="#">{{ i18n "footer-resources-faq" }}</a></li-->
-        </ul>
-      </div>
-      <div class="col">
-        <h3>{{ i18n "footer-company" }}</h3>
-        <ul class="footer-links">
-          <li><a href="{{ i18n "footer-us-button-link" }}" data-umami-event="footer-about">{{ i18n "footer-company-about" }}</a></li>
-          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-contact">{{ i18n "footer-company-contact" }}</a></li>
-          <li><a href="/{{ .Site.Language.Lang }}/legal-notice/">
-              {{ i18n "legal-notice" }}
-          </a></li>
-        </ul>
-      </div>
-      <div class="col">
-        <h3>{{ i18n "footer-follow" }}</h3>
-        <div class="d-flex flex-wrap justify-content-between footer-links" style="gap: .5em; font-size: 2em">
-          <a href="https://framagit.org/happyDomain/happydomain" target="_blank" rel="noopener" data-umami-event="footer-framagit">
             <i class="bi bi-gitlab"></i>
           </a>
-          <a href="https://github.com/happyDomain/happydomain" target="_blank" rel="noopener" data-umami-event="footer-github-social">
+          <a href="https://github.com/happyDomain/happydomain" target="_blank" rel="noopener" title="GitHub" data-umami-event="footer-github-social">
             <i class="bi bi-github"></i>
           </a>
-          <a href="https://feedback.happydomain.org/" target="_blank" rel="noopener" data-umami-event="footer-feedback">
+          <a href="https://floss.social/@happyDomain" target="_blank" rel="noopener" title="Mastodon" data-umami-event="footer-mastodon">
-            <i class="bi bi-lightbulb-fill"></i>
-          </a>
-          <a href="https://floss.social/@happyDomain" target="_blank" rel="noopener" data-umami-event="footer-mastodon">
             <i class="bi bi-mastodon"></i>
           </a>
+          <a href="https://feedback.happydomain.org/" target="_blank" rel="noopener" title="Feedback" data-umami-event="footer-feedback">
+            <i class="bi bi-lightbulb-fill"></i>
+          </a>
           <a
             href="#"
             data-contact="Y29udGFjdEBoYXBweWRvbWFpbi5vcmc="
             onfocus="this.href = 'mailto:' + atob(this.dataset.contact)"
+            title="Email"
             data-umami-event="footer-email"
           >
             <i class="bi bi-envelope-at"></i>
           </a>
         </div>
       </div>
+      <div class="col">
+        <h4 class="footer-heading">{{ i18n "footer-product" }}</h4>
+        <ul class="footer-links">
+          <li><a href="#features">{{ i18n "footer-happydomain-features" }}</a></li>
+          <li><a href="#discover">{{ i18n "discover-title" }}</a></li>
+          <li><a href="https://try.happydomain.org/" data-umami-event="footer-tryit">{{ i18n "tryit" }}</a></li>
+          <!--li><a href="#">{{ i18n "footer-happydomain-testimonials" }}</a></li-->
+          <li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
+          <!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
+        </ul>
+      </div>
+      <div class="col">
+        <h4 class="footer-heading">{{ i18n "footer-resources" }}</h4>
+        <ul class="footer-links">
+          <li><a href="https://help.happydomain.org/{{ .Site.Language.Lang }}/" target="_blank" rel="noopener" data-umami-event="footer-docs">{{ i18n "footer-resources-docs" }}</a></li>
+          <li><a href="https://app.happydomain.org/swagger/index.html" target="_blank" rel="noopener" data-umami-event="footer-api">{{ i18n "footer-resources-api" }}</a></li>
+          <li><a href="https://blog.happydomain.org/" data-umami-event="footer-blog">{{ i18n "footer-resources-blog" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/newsletter/" data-umami-event="footer-newsletter">{{ i18n "footer-resources-newsletter" }}</a></li>
+          <!--li><a href="#">{{ i18n "footer-resources-faq" }}</a></li-->
+        </ul>
+      </div>
+      <div class="col">
+        <h4 class="footer-heading">{{ i18n "footer-company" }}</h4>
+        <ul class="footer-links">
+          <li><a href="{{ i18n "footer-us-button-link" }}" data-umami-event="footer-about">{{ i18n "footer-company-about" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-community">{{ i18n "footer-resources-community" }}</a></li>
+          <li><a href="https://git.happydomain.org/happydomain" target="_blank" rel="noopener" data-umami-event="footer-license">{{ i18n "footer-company-license" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-contact">{{ i18n "footer-company-contact" }}</a></li>
+        </ul>
+      </div>
+      <div class="col">
+        <h4 class="footer-heading">{{ i18n "footer-legal" }}</h4>
+        <ul class="footer-links">
+          <li><a href="/{{ .Site.Language.Lang }}/legal-notice/">{{ i18n "legal-notice" }}</a></li>
+        </ul>
+      </div>
     </div>
-    <div>
-      <p class="pt-2 pb-0 text-center">
-        &copy;
-        2019-{{ now.Year }}
-        <svg version="1.1" viewBox="7 5 100 15" aria-labelledby="title" height="1.1em">
-          <title>happyDomain</title>
-          <g fill="#fff" stroke="#fff" stroke-width=".4" aria-label="happy"><path d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z" /><path d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z" /><path d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z" /></g>
-          <g fill="#fff" aria-label="Domain"><path d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z" /><path d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z" /><path d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z" /><path d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z" /><path d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z" /><path d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z" /></g>
-        </svg>
-      </p>
-    </div>
-  </div>
 </footer>

layouts/partials/head.html

@@ -1,4 +1,5 @@
 <head>
+    <script>document.documentElement.setAttribute('data-bs-theme',window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light')</script>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
@@ -49,15 +50,21 @@
     <!-- Mastodon proof -->
     <link rel="me" href="https://floss.social/@happyDomain">
 
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <!-- Variable fonts (Hanken Grotesk, JetBrains Mono, Quicksand) — served from node_modules via Hugo mounts -->
-    <link rel="stylesheet" href="/icons/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="/fonts/hanken-grotesk/wght.css">
+    <link rel="stylesheet" href="/fonts/jetbrains-mono/wght.css">
+    <link rel="stylesheet" href="/fonts/quicksand/wght.css">
 
-    <!-- Theme stylesheet, if possible do not edit this stylesheet -->
+    <!-- Bootstrap (compiled from SCSS) -->
-    {{ if and (isset .Site.Params "style") .Site.Params.style }}
+    {{ $scss := resources.Get "scss/bootstrap.scss" }}
-    <link href="{{ .Site.BaseURL }}css/style.{{ .Site.Params.style }}.css" rel="stylesheet" id="theme-stylesheet">
+    {{ $opts := dict "transpiler" "libsass" "includePaths" (slice "node_modules") }}
-    {{ else }}
+    {{ $css := $scss | css.Sass $opts }}
-    <link href="{{ .Site.BaseURL }}css/style.default.css" rel="stylesheet" id="theme-stylesheet">
+    {{ if hugo.IsProduction }}
+    {{ $css = $css | minify | fingerprint }}
     {{ end }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+
+    <link rel="stylesheet" href="/icons/font/bootstrap-icons.min.css">
 
     <!-- Custom stylesheet - for your changes -->
     <link href="{{ .Site.BaseURL }}css/custom.css" rel="stylesheet">

layouts/partials/jumbo.html

@@ -1,85 +1,491 @@
-<section
+<style>
-    class="jumbotron mt-n1 mb-0"
+    .jumbo-hero {
-    style="
+        padding: 8rem 0 5rem;
         background: linear-gradient(
             135deg,
-            var(--primary-ultralight) 0%,
+            var(--hd-accent-subtle, #f0fdf4) 0%,
-            white 100%
+            var(--hd-bg-canvas, white) 60%
         );
-    "
+    }
->
+    .hero-eyebrow {
-    <div class="container-fluid">
+        display: flex;
-        <div class="row">
+        align-items: center;
-            <div class="col-md-3 d-flex flex-column mb-5 align-items-center">
+        flex-wrap: wrap;
-                <img
+        gap: 0.75rem;
-                    src="/img/screenshots/happydomain-rounded.webp"
+        margin-bottom: 1.5rem;
-                    alt="happyDomain logo"
+        font-size: 0.875rem;
-                    style="width: 100%; max-width: 40vw"
+        color: var(--hd-fg-3, #6b7280);
-                />
+    }
-            </div>
+    .hero-eyebrow .badge-os {
-            <div class="col">
+        display: inline-flex;
-                <div class="row">
+        align-items: center;
-                    <div
+        gap: 0.35rem;
-                        class="col col-sm-8 offset-sm-2 col-md-10 offset-md-1 col-xl-8 offset-xl-2"
+        padding: 0.25em 0.75em;
-                    >
+        background: var(--hd-accent-subtle, #f0fdf4);
-                        <h2
+        border: 1px solid var(--hd-accent, #22c55e);
-                            class="display-4 text-center text-dark font-weight-bold"
+        border-radius: 2em;
-                        >
+        color: var(--hd-accent, #22c55e);
-                            {{ i18n "slogan" | safeHTML }}
+        font-weight: 600;
-                        </h2>
+        font-size: 0.8rem;
-                    </div>
+    }
-                </div>
+    .hero-meta {
-                <p class="mt-5 lead text-center text-muted">
+        display: flex;
-                    happy<strong>Domain</strong>
+        flex-wrap: wrap;
-                    {{ i18n "lead" | markdownify }}
+        gap: 1rem;
-                </p>
+        margin-top: 1.5rem;
-                <div class="mt-5 py-2 d-none d-md-flex justify-content-center">
+        font-size: 0.875rem;
-                    <a
+        color: var(--hd-fg-3, #6b7280);
-                        class="btn btn-lg btn-primary px-4 mr-3"
+    }
-                        data-umami-event="jumbo-tryit"
+    .hero-meta .check {
-                        href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
+        color: var(--hd-accent, #22c55e);
-                        style="border-radius: 2em"
+        margin-right: 0.25rem;
-                        >{{ i18n "tryit" }} &#187;</a
+    }
-                    >
+    /* Browser mockup */
-                    <a
+    .hero-stack {
-                        class="btn btn-lg btn-outline-secondary px-4 ml-3"
+        position: relative;
-                        data-umami-event="jumbo-downloads"
+    }
-                        href="#downloads"
+    .hero-stack .browser:last-child {
-                        style="border-radius: 2em"
+        position: absolute;
-                        >{{ i18n "downloadit" }}</a
+        bottom: 0;
-                    >
+        right: 0;
-                </div>
+        width: 86%;
-                <div
+        z-index: 0;
-                    class="container mt-5 py-2 d-flex d-md-none flex-column justify-content-center"
+        opacity: 0.45;
+        pointer-events: none;
+    }
+    .hero-stack .browser:first-child {
+        position: relative;
+        z-index: 1;
+    }
+    .browser {
+        background: var(--hd-bg-canvas, #fff);
+        border-radius: 10px;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+        overflow: hidden;
+        border: 1px solid var(--hd-border, #e5e7eb);
+    }
+    .browser-bar {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.55rem 1rem;
+        background: var(--hd-bg-subtle, #f9fafb);
+        border-bottom: 1px solid var(--hd-border, #e5e7eb);
+    }
+    .browser-dots {
+        display: flex;
+        gap: 5px;
+    }
+    .browser-dots span {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--hd-border, #e5e7eb);
+    }
+    .browser-url {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.01rem;
+        background: var(--hd-bg-canvas, #fff);
+        border-radius: 4px;
+        padding: 0.22rem 0.6rem;
+        font-size: 0.75rem;
+        color: var(--hd-fg-3, #6b7280);
+    }
+    .browser-url .lock {
+        color: var(--hd-accent, #22c55e);
+        font-size: 0.7rem;
+    }
+
+    /* ── Screenshot carousel ── */
+    .browser {
+        position: relative;
+    }
+    /* window dots double as carousel indicators */
+    .browser-dots .bdot {
+        width: 10px;
+        height: 10px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: var(--hd-border, #e5e7eb);
+        cursor: pointer;
+        transition:
+            background 0.35s ease,
+            transform 0.35s ease,
+            box-shadow 0.35s ease;
+    }
+    .browser-dots .bdot:hover {
+        transform: scale(1.18);
+    }
+    .browser-dots .bdot.active {
+        background: var(--hd-accent, #22c55e);
+        transform: scale(1.25);
+        box-shadow: 0 0 0 3px var(--hd-accent-subtle, #f0fdf4);
+    }
+    /* URL path swaps with the slide */
+    .browser-url .url-path {
+        transition: opacity 0.25s ease;
+    }
+    .browser.loading .url-path {
+        opacity: 0.35;
+    }
+    /* loading sweep, like a browser navigating */
+    .browser-load {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 2px;
+        width: 0;
+        background: var(--hd-accent, #22c55e);
+        opacity: 0;
+        z-index: 6;
+        pointer-events: none;
+        border-radius: 0 2px 2px 0;
+    }
+    .browser.loading .browser-load {
+        animation: browserLoad 0.7s ease-out;
+    }
+    @keyframes browserLoad {
+        0% {
+            width: 0;
+            opacity: 1;
+        }
+        70% {
+            width: 85%;
+            opacity: 1;
+        }
+        100% {
+            width: 100%;
+            opacity: 0;
+        }
+    }
+    /* the carousel viewport */
+    .carousel-window {
+        position: relative;
+        overflow: hidden;
+        aspect-ratio: 1920 / 980;
+        background: var(--hd-bg-subtle, #f9fafb);
+    }
+    .carousel-track {
+        position: absolute;
+        inset: 0;
+    }
+    .carousel-track .slide {
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        transition: opacity 0.8s ease;
+        pointer-events: none;
+    }
+    .carousel-track .slide.active {
+        opacity: 1;
+        pointer-events: auto;
+        z-index: 2;
+    }
+    .carousel-track .slide img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top left;
+        display: block;
+    }
+    /* 7s progress indicator */
+    .carousel-progress {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 3px;
+        width: 100%;
+        background: rgba(0, 0, 0, 0.06);
+        z-index: 4;
+    }
+    .carousel-progress span {
+        display: block;
+        height: 100%;
+        width: 0;
+        background: var(--hd-accent, #22c55e);
+    }
+    .carousel-progress span.run {
+        animation: carProg 7s linear forwards;
+    }
+    @keyframes carProg {
+        from {
+            width: 0;
+        }
+        to {
+            width: 100%;
+        }
+    }
+    /* pause the progress timer on hover */
+    .browser.paused .carousel-progress span {
+        animation-play-state: paused;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .carousel-track .slide {
+            transition: none;
+        }
+        .carousel-progress span.run {
+            animation: none;
+        }
+        .browser.loading .browser-load {
+            animation: none;
+        }
+    }
+</style>
+
+<section class="jumbo-hero">
+    <div class="container">
+        <div class="row align-items-center g-5">
+            <!-- Copy column -->
+            <div class="col-lg-5">
+                <a
+                    class="hero-eyebrow"
+                    href="https://git.happydomain.org/"
+                    target="_blank"
                 >
+                    <span class="badge-os"
+                        ><i class="bi bi-git"></i> Open source</span
+                    >
+                </a>
+
+                <h1 class="display-4 fw-bold mb-5" style="text-wrap: balance">
+                    {{ i18n "slogan" | safeHTML }}
+                </h1>
+
+                <p class="lead mb-5 pb-2">
+                    happy<strong>Domain</strong> {{ i18n "lead" | markdownify }}
+                </p>
+
+                <div class="d-flex flex-wrap gap-3">
                     <a
-                        class="btn btn-lg btn-primary px-4 mb-3"
+                        class="btn btn-lg btn-primary px-4"
                         data-umami-event="jumbo-tryit"
                         href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
-                        style="border-radius: 2em"
-                        >{{ i18n "tryit" }} &#187;</a
                     >
+                        {{ i18n "tryit" }} <i class="bi bi-arrow-right"></i>
+                    </a>
                     <a
-                        class="btn btn-lg btn-outline-secondary px-4"
+                        class="btn btn-lg btn-outline-dark px-4"
                         data-umami-event="jumbo-downloads"
                         href="#downloads"
-                        style="border-radius: 2em"
-                        >{{ i18n "downloadit" }}</a
                     >
+                        <i class="bi bi-box-seam"></i> {{ i18n "downloadit" }}
+                    </a>
                 </div>
 
-                <!--div class="mt-5 card bg-secondary text-light flex-row align-items-center" style="border-radius: .3rem">
+                <div class="hero-meta">
-          <div class="card-body">
+                    <span
-            <h3>{{ i18n "conf-fosdem24-title" }}</h3>
+                        ><i class="bi bi-check2 check"></i
-            <p class="card-text">
+                        ><strong>No account</strong> needed for the demo</span
-              {{ i18n "conf-fosdem24-body-1" }}
+                    >
-              <a href="{{ i18n "conf-fosdem24-href" }}" target="_blank" rel="noopener"><em>{{ i18n "conf-fosdem24-link" }}</em></a>
+                    <span
-              {{ i18n "conf-fosdem24-body-2" }}
+                        ><i class="bi bi-check2 check"></i
-            </p>
+                        ><strong>~30s</strong> to first zone</span
-          </div>
+                    >
-          <img src="/img/assets/FOSDEM24_logo.png" alt="FOSDEM 2024" style="height: 10em">
+                    <span
-        </div-->
+                        ><i class="bi bi-check2 check"></i
+                        ><strong>55+</strong> providers</span
+                    >
+                </div>
+            </div>
+
+            <!-- Visual column -->
+            <div class="col-lg-7 d-none d-lg-block">
+                <div class="hero-stack">
+                    <!-- Front browser frame: screenshot carousel -->
+                    <div class="browser" id="hero-carousel">
+                        <span class="browser-load"></span>
+                        <div class="browser-bar">
+                            <div
+                                class="browser-dots"
+                                role="tablist"
+                                aria-label="Screenshots"
+                            >
+                                {{ range $i, $s := sort .Site.Params.jumboscreen "weight" }}
+                                <button
+                                    type="button"
+                                    class="bdot{{ if eq $i 0 }} active{{ end }}"
+                                    data-slide="{{ $i }}"
+                                    role="tab"
+                                    aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}"
+                                    aria-label="{{ $s.alt }}"
+                                ></button>
+                                {{ end }}
+                            </div>
+                            <div class="browser-url">
+                                <i class="bi bi-lock-fill lock me-1"></i>
+                                <span>app.</span><strong>happydomain.org</strong
+                                ><span class="url-path"
+                                    >{{ with index (sort .Site.Params.jumboscreen "weight") 0 }}{{ .path }}{{ end }}</span
+                                >
+                            </div>
+                        </div>
+                        <div class="carousel-window">
+                            <div class="carousel-track">
+                                {{ range $i, $s := sort .Site.Params.jumboscreen "weight" }}
+                                <figure
+                                    class="slide{{ if eq $i 0 }} active{{ end }}"
+                                    data-path="{{ $s.path }}"
+                                >
+                                    <img
+                                        src="{{ $s.image }}"
+                                        alt="{{ $s.alt }}"
+                                        loading="lazy"
+                                        decoding="async"
+                                    />
+                                </figure>
+                                {{ end }}
+                            </div>
+                            <div class="carousel-progress"><span></span></div>
+                        </div>
+                    </div>
+                    <!-- Back browser frame, peeking -->
+                    <div class="browser" aria-hidden="true">
+                        <div class="browser-bar">
+                            <div class="browser-dots">
+                                <span></span><span></span><span></span>
+                            </div>
+                            <div class="browser-url">
+                                <i class="bi bi-lock-fill lock"></i
+                                ><span>try.</span
+                                ><strong>happydomain.org</strong>
+                            </div>
+                        </div>
+                        <div
+                            style="
+                                padding: 14px 16px;
+                                height: 120px;
+                                background: var(--hd-bg-subtle, #f9fafb);
+                            "
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="alert alert-warning mt-5 mb-0" role="alert">
+            <div class="row align-items-center g-3">
+                <div class="col-lg-7">
+                    <h5 class="alert-heading mb-1">
+                        <i class="bi bi-info-circle"></i>
+                        {{ i18n "beta-alert-title" }}
+                    </h5>
+                    <p class="mb-0">{{ i18n "beta-alert-text" | safeHTML }}</p>
+                </div>
+                <form
+                    class="col-lg-5 d-flex flex-column flex-sm-row gap-2"
+                    method="post"
+                    action="https://lists.happydomain.org/subscription/form"
+                >
+                    <input type="hidden" name="nonce" />
+                    <input type="hidden" name="l" value="ef8b61ad-fa7d-4f1a-a20f-bb34ac37a3bf" />
+                    <input type="hidden" name="lang" value="{{ site.LanguageCode }}" />
+                    <input
+                        type="email"
+                        name="email"
+                        required
+                        placeholder="j.postel@isi.edu"
+                        class="form-control"
+                    />
+                    <altcha-widget
+                        floating
+                        challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"
+                    ></altcha-widget>
+                    <button
+                        type="submit"
+                        class="btn btn-primary text-nowrap"
+                        data-umami-event="beta-join"
+                    >
+                        {{ i18n "beta-alert-button" }}
+                    </button>
+                </form>
             </div>
         </div>
     </div>
 </section>
+
+<script>
+    (function () {
+        var root = document.getElementById("hero-carousel");
+        if (!root) return;
+
+        var slides = Array.prototype.slice.call(
+            root.querySelectorAll(".slide"),
+        );
+        var dots = Array.prototype.slice.call(root.querySelectorAll(".bdot"));
+        var pathEl = root.querySelector(".url-path");
+        var prog = root.querySelector(".carousel-progress span");
+        var paths = slides.map(function (slide) {
+            return slide.getAttribute("data-path");
+        });
+
+        var DURATION = 7000;
+        var i = 0,
+            timer = null;
+        var reduce =
+            window.matchMedia &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+        function restartProgress() {
+            if (!prog || reduce) return;
+            prog.classList.remove("run");
+            void prog.offsetWidth; // force reflow so the animation restarts
+            prog.classList.add("run");
+        }
+
+        function go(n) {
+            n = ((n % slides.length) + slides.length) % slides.length;
+            if (n === i) return;
+
+            // mimic a real page navigation: brief loading sweep + dimmed URL
+            root.classList.add("loading");
+            window.setTimeout(function () {
+                root.classList.remove("loading");
+            }, 700);
+
+            slides[i].classList.remove("active");
+            dots[i].classList.remove("active");
+            dots[i].setAttribute("aria-selected", "false");
+
+            i = n;
+
+            slides[i].classList.add("active");
+            dots[i].classList.add("active");
+            dots[i].setAttribute("aria-selected", "true");
+            if (pathEl) pathEl.textContent = paths[i];
+
+            restartProgress();
+        }
+
+        function schedule() {
+            window.clearInterval(timer);
+            if (reduce) return;
+            timer = window.setInterval(function () {
+                go(i + 1);
+            }, DURATION);
+        }
+
+        dots.forEach(function (dot, idx) {
+            dot.addEventListener("click", function () {
+                go(idx);
+                schedule(); // reset the timer so the chosen slide gets its full 7s
+            });
+        });
+
+        // Pause while the visitor is inspecting a screenshot.
+        root.addEventListener("mouseenter", function () {
+            root.classList.add("paused");
+            window.clearInterval(timer);
+        });
+        root.addEventListener("mouseleave", function () {
+            root.classList.remove("paused");
+            schedule();
+        });
+
+        restartProgress();
+        schedule();
+    })();
+</script>

layouts/partials/logo.html

@@ -0,0 +1,51 @@
+{{- $height := .height | default "25" -}}
+<svg
+    version="1.1"
+    viewBox="7 5 100 15"
+    aria-labelledby="title"
+    height="{{ $height }}"
+>
+    <title>happyDomain</title>
+    <g
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width=".4"
+        aria-label="happy"
+    >
+        <path
+            d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z"
+        />
+        <path
+            d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z"
+        />
+        <path
+            d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z"
+        />
+        <path
+            d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z"
+        />
+        <path
+            d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z"
+        />
+    </g>
+    <g fill="currentColor" aria-label="Domain">
+        <path
+            d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z"
+        />
+        <path
+            d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z"
+        />
+        <path
+            d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z"
+        />
+        <path
+            d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z"
+        />
+        <path
+            d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z"
+        />
+        <path
+            d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z"
+        />
+    </g>
+</svg>

layouts/partials/nav.html

@@ -1,65 +1,17 @@
-<nav
+<nav class="navbar navbar-expand-md fixed-top" id="mainnav">
-    class="navbar navbar-expand-md sticky-top navbar-light bg-light"
-    id="mainnav"
->
     <div class="container">
-        <a class="h1 navbar-brand mb-0" href="/{{ .Site.Language.Lang }}/">
+        <a
-            <svg
+            class="h1 navbar-brand d-flex align-items-top gap-2 mb-0"
-                version="1.1"
+            href="/{{ .Site.Language.Lang }}/"
-                viewBox="7 5 100 15"
+        >
-                aria-labelledby="title"
+            <img src="/img/apple-touch-icon.png" alt="" style="height: 24px" />
-                height="25"
+            {{ partial "logo.html" (dict "height" "25") }}
-            >
-                <title>happyDomain</title>
-                <g
-                    fill="#000"
-                    stroke="#000"
-                    stroke-width=".4"
-                    aria-label="happy"
-                >
-                    <path
-                        d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z"
-                    />
-                    <path
-                        d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z"
-                    />
-                    <path
-                        d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z"
-                    />
-                    <path
-                        d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z"
-                    />
-                    <path
-                        d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z"
-                    />
-                </g>
-                <g fill="#000" aria-label="Domain">
-                    <path
-                        d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z"
-                    />
-                    <path
-                        d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z"
-                    />
-                    <path
-                        d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z"
-                    />
-                    <path
-                        d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z"
-                    />
-                    <path
-                        d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z"
-                    />
-                    <path
-                        d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z"
-                    />
-                </g>
-            </svg>
         </a>
         <button
             class="navbar-toggler"
             type="button"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
-            data-target="#navbarCollapse"
+            data-bs-target="#navbarCollapse"
             aria-controls="navbarCollapse"
             aria-expanded="false"
             aria-label="Toggle navigation"
@@ -78,7 +30,7 @@
                         href="#"
                         id="navbarDropdown"
                         role="button"
-                        data-toggle="dropdown"
+                        data-bs-toggle="dropdown"
                         aria-haspopup="true"
                         aria-expanded="false"
                     >
@@ -100,7 +52,30 @@
                 </li>
                 {{ end }}
             </ul>
-            <div class="d-flex">
+            <div class="d-flex align-items-center">
+                <div class="nav-item dropdown">
+                    <a
+                        class="btn btn-sm btn-outline-plum dropdown-toggle"
+                        href="#"
+                        id="navbarLangDropdown"
+                        role="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                    >
+                        <i class="bi bi-translate"></i> {{ .Language.Lang |
+                        upper }}
+                    </a>
+                    <div
+                        class="dropdown-menu dropdown-menu-end"
+                        aria-labelledby="navbarLangDropdown"
+                    >
+                        {{ range .Site.Home.AllTranslations }}
+                        <a href="{{ .Permalink }}" class="dropdown-item">
+                            {{ .Language }}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
                 <div class="nav-item nav-ext-links">
                     {{ if .Site.Params.others_links }} {{ range
                     .Site.Params.others_links }}
@@ -110,34 +85,12 @@
                         class="nav-icon-link {{ .class }}"
                         data-umami-event="nav-{{ .id }}"
                     >
+                        {{ if .icon }}
                         <i class="bi {{ .icon }}"></i>
-                        {{ .text }}
+                        {{ end }} {{ .text }}
                     </a>
                     {{ end }} {{ end }}
                 </div>
-                <div class="nav-item dropdown">
-                    <a
-                        class="nav-link dropdown-toggle"
-                        href="#"
-                        id="navbarDropdown"
-                        role="button"
-                        data-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                    >
-                        {{ .Language }}
-                    </a>
-                    <div
-                        class="dropdown-menu dropdown-menu-right"
-                        aria-labelledby="navbarDropdown"
-                    >
-                        {{ range .Site.Home.AllTranslations }}
-                        <a href="{{ .Permalink }}" class="dropdown-item"
-                            >{{ .Language }}</a
-                        >
-                        {{ end }}
-                    </div>
-                </div>
             </div>
         </div>
     </div>

layouts/partials/scripts.html

@@ -1,7 +1,9 @@
-<script src="/js/jquery.slim.min.js"></script>
+<script src="/js/bootstrap.bundle.min.js"></script>
-<script src="/js/bootstrap.min.js"></script>
+<script src="https://lists.happydomain.org/public/static/altcha.umd.js" async defer></script>
-<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 <script>
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+        document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
+    });
     window.addEventListener("scroll", function () {
         if (window.scrollY > 100) {
             document.getElementById("mainnav").classList.add("scrolled");

layouts/partials/survey.html

@@ -17,15 +17,13 @@
         <div class="col align-self-center font-weigth-bolder">
             <button
                 type="button"
-                class="close float-right"
+                class="btn-close btn-close-white float-end"
                 aria-label="Close"
                 onclick="
                     document.getElementById('voxppl').style.display = 'none';
                     return false;
                 "
-            >
+            ></button>
-                <span aria-hidden="true">&times;</span>
-            </button>
             <strong>{{ i18n "survey-title" | markdownify }}</strong><br />
             {{ i18n "survey-text" | markdownify }}
         </div>

layouts/partials/usage_footer.html

@@ -2,13 +2,13 @@
 <div class="container mt-5 mb-4">
   <div class="row py-5">
     <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
-      <h4 class="font-weight-bold mb-3">
+      <h4 class="fw-bold mb-3">
         {{ i18n "footer-try-title-line1" }}<br>
         {{ i18n "footer-try-title-line2" }}
       </h4>
 
       <p>
-        happy<span class="font-weight-bold">Domain</span> {{ i18n "footer-try-text" }}
+        happy<span class="fw-bold">Domain</span> {{ i18n "footer-try-text" }}
       </p>
 
       <p>
@@ -16,7 +16,7 @@
         <a class="btn btn-primary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-tryit" data-umami-event-lang="{{ .Page.Language.Lang }}" href="{{ .Site.Params.tryit }}">
           {{ i18n "tryit" }} &#187;
         </a>
-        <a class="btn btn-outline-secondary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
+        <a class="btn btn-outline-dark mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
           {{ i18n "downloadit" }} &#187;
         </a>
       </p>
@@ -56,21 +56,21 @@
   </div>
 </div>
 
-<div class="container-fluid bg-secondary text-light text-center py-5">
+<div class="container-fluid text-center py-5" style="background: var(--hd-plum-100)">
   <div class="container my-4">
     <div class="row">
       <div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
-        <h3 class="font-weight-bolder">{{ i18n "footer-us-title" }}</h3>
+        <h3 class="fw-bolder">{{ i18n "footer-us-title" }}</h3>
       </div>
       <div class="order-1 col-md-5">
-        <h4 class="font-weight-bold mb-3">
+        <h4 class="fw-bold mb-3">
           {{ i18n "footer-us-text-lead" }}
         </h4>
 
         <p>
           {{ i18n "footer-us-text-1" }}<span class="text-dark text-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
         </p>
-        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-light" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
+        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-dark" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
           {{ i18n "footer-us-button" }}
         </a>
       </div>

layouts/partials/work-with.html

@@ -0,0 +1,18 @@
+<!-- ── Trust strip ──────────────────────────────────────── -->
+<section class="trust">
+  <div class="container trust-grid">
+    <div class="trust-tag"><span class="dot"></span>Works with</div>
+    <div class="trust-list">
+      <span><i class="bi bi-globe2"></i>OVH</span>
+      <span><i class="bi bi-leaf"></i>Gandi</span>
+      <span><i class="bi bi-droplet"></i>DigitalOcean</span>
+      <span><i class="bi bi-cloud"></i>Cloudflare</span>
+      <span><i class="bi bi-server"></i>Hetzner</span>
+      <span><i class="bi bi-tag"></i>Namecheap</span>
+      <span><i class="bi bi-terminal"></i>BIND</span>
+      <span><i class="bi bi-hdd-network"></i>Knot DNS</span>
+      <span><i class="bi bi-cpu"></i>PowerDNS</span>
+    </div>
+    <a class="trust-more" href="https://app.happydomain.org/providers/features" target="_blank" rel="noopener">+ 46 more →</a>
+  </div>
+</section>

package-lock.json

@@ -0,0 +1,90 @@
+{
+  "name": "happydomain-website",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "happydomain-website",
+      "dependencies": {
+        "@fontsource-variable/hanken-grotesk": "^5.2.8",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
+        "@fontsource-variable/quicksand": "^5.2.10",
+        "bootstrap": "^5.3.0",
+        "bootstrap-icons": "^1.13.0"
+      }
+    },
+    "node_modules/@fontsource-variable/hanken-grotesk": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/hanken-grotesk/-/hanken-grotesk-5.2.8.tgz",
+      "integrity": "sha512-K7hu09ZKReBc7EifRLeM4K94NZBrxFEg0nGcISmVwlFQOJo4EmYkLXTWEwr5JcNW4z2hr5zy8vLS2sxC8JDmrQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/quicksand": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/quicksand/-/quicksand-5.2.10.tgz",
+      "integrity": "sha512-1uzkzGDwWgtFnxquAXuD7fZV9wHkALb49UPzRXxGTVeeLsNrGnIU0O/pcz6m1U7RDtpHz2qx77JhCpKaq7FrUg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    }
+  }
+}

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "happydomain-website",
+  "private": true,
+  "dependencies": {
+    "@fontsource-variable/hanken-grotesk": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/quicksand": "^5.2.10",
+    "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.13.0"
+  }
+}

static/_redirects

@@ -1,4 +1,4 @@
 /domains/* https://app.happydomain.org/domains/:splat
-/join https://app.happydomain.org/register
+/join /beta/
-/login https://app.happydomain.org/login
+/login /beta/
-/register https://app.happydomain.org/register
+/register /beta/

static/css/custom.css

@@ -1,86 +1,64 @@
-:root {
-    --primary: #1cb487;
-    --primary-dark: #169c73;
-    --primary-light: #5ed1b0;
-    --primary-ultralight: #e7f7f2;
-    --secondary: #360b48;
-    --secondary-dark: #29083a;
-    --secondary-subtle: #871cb4;
-    --secondary-light: #4e1566;
-    --secondary-ultralight: #f0e6f3;
-    --dark: #2c3e50;
-    --light: #f8f9fa;
-    --gray: #6c757d;
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Montserrat'), local('Montserrat-Regular'), url(/fonts/Montserrat.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-html {
-    background-color: #343a40;
-}
-body {
-    font-family: Montserrat,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji,sans;
-}
 nav.navbar {
-    background: var(--light);
+    background: var(--hd-bg-canvas);
-    box-shadow: 0 0px 3px 0 #1cb487;
+    box-shadow: 0 0px 3px 0 var(--hd-accent);
-    border-bottom: 1px solid #1cb487;
+    border-bottom: 1px solid var(--hd-accent);
     z-index: 1024;
     transition: background 1s linear;
 }
 nav.navbar.beginscroll {
-    background: linear-gradient(90deg, var(--primary-ultralight) 0%, white 150%);
+    background:
+        linear-gradient(90deg, var(--hd-accent-subtle) 0%, white 100%),
+        var(--hd-accent-subtle);
     box-shadow: none;
     border-bottom: none;
 }
 nav.navbar.scrolled {
-    background: var(--light);
+    background: var(--hd-bg-canvas);
-    box-shadow: 0 0px 3px 0 #1cb487;
+    box-shadow: 0 0px 3px 0 var(--hd-accent);
-    border-bottom: 1px solid #1cb487;
+    border-bottom: 1px solid var(--hd-accent);
 }
 
 a.card {
-    background: #f6f7f8;
+    background: var(--hd-bg-subtle);
     transition: transform 250ms;
 }
 a.card:hover {
-    background: #e9ecef;
+    background: var(--hd-bg-inset);
     transform: scale(1.14);
 }
 
 .section-title::after {
-    content: '';
+    content: "";
     width: 120px;
     height: 4px;
-    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+    background: linear-gradient(
+        90deg,
+        var(--hd-accent) 0%,
+        var(--hd-brand-dark) 100%
+    );
     display: block;
     margin: 10px auto 0;
     border-radius: 2px;
 }
 
-.link-rounded, .circle-head {
+.link-rounded,
+.circle-head {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     height: 1.8em;
     line-height: 1em;
     width: 1.8em;
-    background: #1cb487;
+    background: var(--hd-accent);
     border-radius: 100%;
-    color: #f8f9fa;
+    color: var(--hd-accent-fg);
     font-size: 1.5rem;
 }
 .link-rounded:hover {
-    background-color: #127255;
+    background-color: var(--hd-green-800);
 }
 .link-rounded:hover > div {
-    color: #f8f9fa;
+    color: var(--hd-accent-fg);
 }
 
 .anchor {
@@ -88,10 +66,6 @@ a.card:hover {
     height: 60px;
 }
 
-.carousel {
-    background-color: #430c59;
-}
-
 .text-hilight {
     background-color: yellow;
 }
@@ -104,37 +78,19 @@ a.card:hover {
     bottom: 5vh;
     right: 5vw;
     border-radius: 5px;
-    background-color: #9332bbee;
+    background-color: color-mix(in srgb, var(--hd-plum-400) 93%, transparent);
     z-index: 1023;
     max-width: 98%;
 }
 #voxppl a:hover {
     text-decoration: none;
-    background-color: #9332bb;
+    background-color: var(--hd-plum-400);
 }
 
 img {
     max-width: 100%;
 }
 
-#features .card {
-    background-color: white;
-    border-radius: 10px;
-    padding-top: 3px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    transition: transform 0.3s;
-    border-top: 4px solid var(--primary);
-}
-
-#features .col:nth-child(even) .card {
-    border-top: 4px solid var(--secondary);
-}
-
-#features .card:hover {
-    transform: translateY(-10px);
-}
-
-
 #discover .steps {
     display: flex;
     justify-content: space-between;
@@ -144,13 +100,17 @@ img {
 }
 
 #discover .steps::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 25px;
     left: 10%;
     width: 80%;
     height: 2px;
-    background: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
+    background: linear-gradient(
+        to right,
+        var(--hd-accent) 0%,
+        var(--hd-brand-dark) 100%
+    );
     z-index: 1;
 }
 
@@ -162,7 +122,11 @@ img {
 }
 
 #discover .step-number {
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    background: linear-gradient(
+        135deg,
+        var(--hd-accent) 0%,
+        var(--hd-brand-dark) 100%
+    );
     color: white;
     width: 50px;
     height: 50px;
@@ -181,20 +145,25 @@ img {
 }
 
 #discover .step p {
-    color: var(--gray);
+    color: var(--hd-fg-3);
 }
 
 #cta {
     padding: 100px 0;
-    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+    background: linear-gradient(
+        135deg,
+        var(--hd-brand-dark) 0%,
+        var(--hd-accent) 100%
+    );
     color: white;
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
-#cta::before, #cta::after {
+#cta::before,
-    content: '';
+#cta::after {
+    content: "";
     position: absolute;
     width: 300px;
     height: 300px;
@@ -224,43 +193,225 @@ img {
 }
 
 footer {
-    border-top: 3px solid #9332bb;
+    border-top: 3px solid var(--hd-plum-400);
+}
+
+.footer-tagline {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.55;
+    max-width: 260px;
+    margin-bottom: 0;
+}
+
+.footer-heading {
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.45);
+    margin-bottom: 1rem;
 }
 
 .footer-links {
     list-style: none;
     padding: 0;
-}
+    display: flex;
-
+    flex-direction: column;
-.footer-links li {
+    gap: 8px;
-    margin-bottom: 12px;
+    margin: 0;
 }
 
 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
+    font-size: 0.875rem;
     text-decoration: none;
-    transition: color 0.3s;
+    transition: color 0.2s;
 }
 
 .footer-links a:hover {
     color: white;
 }
 
+.footer-social a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.6);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition:
+        color 0.2s,
+        border-color 0.2s,
+        background-color 0.2s;
+}
+
+.footer-social a:hover {
+    color: white;
+    border-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.footer-bottom-text {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.footer-git-link {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.4);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-git-link:hover {
+    color: rgba(255, 255, 255, 0.8);
+}
+
 #download-house {
     animation: floatinghouse 6s linear infinite;
 }
 @keyframes floatinghouse {
-    0% { top: 0; left: 0; }
+    0% {
-    10% { top: -2px; }
+        top: 0;
-    20% { top: -4px; }
+        left: 0;
-    30% { top: -6px; }
+    }
-    40% { top: -2px; }
+    10% {
-    50% { top: 0px;  }
+        top: -2px;
-    60% { top: 4px;  }
+    }
-    70% { top: 6px;  }
+    20% {
-    80% { top: 8px;  }
+        top: -4px;
-    90% { top: 4px;  }
+    }
-    100% { top: 0;   }
+    30% {
+        top: -6px;
+    }
+    40% {
+        top: -2px;
+    }
+    50% {
+        top: 0px;
+    }
+    60% {
+        top: 4px;
+    }
+    70% {
+        top: 6px;
+    }
+    80% {
+        top: 8px;
+    }
+    90% {
+        top: 4px;
+    }
+    100% {
+        top: 0;
+    }
+}
+
+/* ── Trust strip ── */
+.trust {
+    padding: 20px 0;
+    border-top: 1px solid var(--bs-border-color);
+    border-bottom: 1px solid var(--bs-border-color);
+    background: var(--hd-bg-canvas);
+}
+
+.trust-grid {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.trust-tag {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--hd-accent);
+    white-space: nowrap;
+}
+
+.trust-tag .dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--hd-accent);
+    animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.5;
+        transform: scale(0.75);
+    }
+}
+
+.trust-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    flex: 1;
+}
+
+.trust-list span {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    border-radius: 20px;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--hd-fg-3);
+    background: transparent;
+    transition:
+        border-color 0.2s,
+        color 0.2s,
+        background 0.2s;
+}
+
+.trust-list span:hover {
+    border-color: var(--hd-accent);
+    color: var(--hd-accent);
+    background: color-mix(in srgb, var(--hd-accent) 8%, transparent);
+}
+
+.trust-list span i {
+    font-size: 0.9em;
+    opacity: 0.7;
+}
+
+.trust-more {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--hd-accent);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.trust-more:hover {
+    opacity: 0.7;
 }
 
 @media (min-width: 768px) {
@@ -268,6 +419,247 @@ footer {
         width: 50% !important;
     }
     #community > div > div:first-child {
-        border-right: 1px solid #9332bb;
+        border-right: 1px solid var(--hd-plum-400);
+    }
+}
+
+/* ── Big idea section ── */
+.section {
+    padding: 96px 0;
+}
+
+.section--paper {
+    background: var(--hd-bg-subtle);
+    border-top: 1px solid var(--hd-border-1);
+    border-bottom: 1px solid var(--hd-border-1);
+}
+
+.section-head {
+    margin-bottom: 56px;
+}
+
+.section-head .eyebrow {
+    display: flex;
+    margin-bottom: 14px;
+}
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--hd-fg-3);
+}
+
+.eyebrow .dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--hd-accent);
+    flex-shrink: 0;
+}
+
+.h2 {
+    font-size: clamp(1.5rem, 4vw, 2.25rem);
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    color: var(--hd-fg-1);
+    margin: 0;
+}
+
+.section-head .h2 {
+    max-width: 720px;
+}
+
+.cta-content h2 {
+    color: var(--bs-light);
+}
+
+.lede {
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    color: var(--hd-fg-2);
+    margin-top: 14px;
+    max-width: 640px;
+}
+
+.idea-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--hd-bg-canvas);
+}
+
+.idea-col {
+    padding: 28px 28px 24px;
+}
+
+.idea-col + .idea-col {
+    border-left: 1px solid var(--hd-border-1);
+}
+
+.idea-tag {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--hd-fg-4);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.idea-tag .num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    background: var(--hd-bg-subtle);
+    color: var(--hd-fg-3);
+    font-size: 9px;
+}
+
+.idea-col h3 {
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--hd-fg-1);
+    letter-spacing: -0.015em;
+    margin: 0 0 18px;
+}
+
+.idea-col h3 .strike {
+    text-decoration: line-through;
+    color: var(--hd-fg-4);
+    font-weight: 600;
+}
+
+.zone-pre {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 11.5px;
+    line-height: 1.7;
+    color: var(--hd-fg-3);
+    background: var(--hd-bg-subtle);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 8px;
+    padding: 14px 16px;
+    margin: 0;
+    white-space: pre;
+    overflow: auto;
+}
+
+.zone-pre .k {
+    color: var(--hd-fg-1);
+    font-weight: 500;
+}
+.zone-pre .v {
+    color: var(--hd-fg-2);
+}
+.zone-pre .c {
+    color: var(--hd-fg-4);
+}
+.zone-pre .a {
+    color: var(--hd-accent);
+}
+
+.svc {
+    border: 1px solid var(--hd-border-1);
+    border-radius: 8px;
+    margin-bottom: 6px;
+    background: var(--hd-bg-canvas);
+    overflow: hidden;
+}
+
+.svc-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 9px 12px;
+}
+
+.svc-row + .svc-row {
+    border-top: 1px solid var(--hd-bg-subtle);
+}
+
+.svc-l {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+}
+
+.svc-ico {
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    background: var(--hd-accent-subtle);
+    border: 1px solid var(--hd-accent-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--hd-accent);
+    font-size: 13px;
+    flex-shrink: 0;
+}
+
+[data-bs-theme="dark"] .svc-ico {
+    background: var(--hd-accent-muted);
+}
+
+.svc-name {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--hd-fg-1);
+}
+
+.svc-desc {
+    font-size: 10.5px;
+    color: var(--hd-fg-3);
+    margin-top: 1px;
+}
+
+.svc-r {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.svc-cnt {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 10px;
+    color: var(--hd-fg-4);
+    background: var(--hd-bg-subtle);
+    padding: 2px 6px;
+    border-radius: 9999px;
+}
+
+.svc-ok {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--hd-accent);
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+@media (max-width: 767px) {
+    .idea-grid {
+        grid-template-columns: 1fr;
+    }
+    .idea-col + .idea-col {
+        border-left: none;
+        border-top: 1px solid var(--hd-border-1);
+    }
+    .section {
+        padding: 64px 0;
     }
 }