Relaunch peakscale.ch

.github/workflows/build-preview.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     name: Build Preview Site and Upload Build Artifact
     env:
-      HUGO_VERSION: 0.143.1
+      HUGO_VERSION: 0.161.1
     steps:
       - name: Install Hugo CLI
         run: |

.github/workflows/hugo.yml

@@ -32,7 +32,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.143.1
+      HUGO_VERSION: 0.161.1
     steps:
       - name: Install Hugo CLI
         run: |

.gitignore

@@ -3,3 +3,7 @@
 /public/
 .DS_Store
 .direnv
+.claude
+.idea
+/relaunch/
+/CLAUDE.md

.hugo-version

@@ -0,0 +1 @@
+0.161.1

assets/css/base.css

@@ -0,0 +1,294 @@
+/* =====================================================================
+   BRAND IDENTITY
+
+   Three brand colors, defined by the logo
+   (`static/images/peakscale-logo*.svg`):
+
+     Dark blue    #091836   rgb(9, 24, 54)     → --dark-blue
+     Bright blue  #0580c4   rgb(5, 128, 196)   → --bright-blue
+     White        #ffffff                      → --bg-white
+
+   Everything else is supportive palette — keeps the page readable and
+   gives cards their lift, but is not part of the brand identity. Use
+   sparingly.
+   ===================================================================== */
+
+:root {
+    /* Page surfaces */
+    --bg: rgb(240, 248, 252);                 /* icy blue-white page bg */
+    --bg-white: rgb(255, 255, 255);           /* [BRAND] white */
+
+    /* Brand blues */
+    --dark-blue: rgb(9, 24, 54);              /* [BRAND] display, dark surfaces, hover ink */
+    --bright-blue: rgb(5, 128, 196);          /* [BRAND] eyebrows, dots, links, primary buttons */
+
+    /* Supporting greys */
+    --fg-muted: rgb(81, 87, 99);              /* body copy */
+    --fg-subtle: rgb(165, 171, 183);          /* meta */
+
+    /* Hairlines */
+    --border: rgb(208, 214, 227);
+    --border-faint: rgba(208, 214, 227, .5);
+
+    /* Dark sections */
+    --stroke-on-dark: rgba(255, 255, 255, .16);
+    --text-on-dark: rgba(255, 255, 255, .78);
+    --accent-on-dark: rgb(122, 192, 232);     /* lighter blue for eyebrows / meta */
+
+    /* Accents (small dosage: checkmarks, tags, status, illustration details) */
+    --accent-yellow: rgb(232, 184, 60);       /* warm honey / amber */
+    --accent-yellow-soft: rgb(252, 238, 180); /* pale wash */
+    --accent-green: rgb(125, 175, 75);        /* fresh grass */
+    --accent-green-soft: rgb(228, 240, 210);  /* pale wash */
+
+    /* Photo overlay — subtle navy → blue wash applied above section
+       background-images so the photo stays readable. Used inline in
+       templates as the first layer of `background-image`. */
+    --overlay-photo: linear-gradient(135deg, rgba(7,19,44,.4), rgba(5,128,196,.2));
+
+    /* Shadows */
+    --shadow-brand: 0 3px 6px 0 rgba(5, 128, 196, .10),
+    0 11px 11px 0 rgba(5, 128, 196, .09),
+    0 24px 14px 0 rgba(5, 128, 196, .05),
+    0 43px 17px 0 rgba(5, 128, 196, .01);
+    --shadow-float: 0 8px 24px -8px rgba(9, 24, 54, .18),
+    0 2px 8px -2px rgba(9, 24, 54, .08);
+    --shadow-soft: 0px 6px 12px rgba(9, 24, 54, .05);
+}
+
+/* ---------- Typography ---------- */
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,700;9..40,900&family=Inter:wght@400;600;700&display=swap');
+
+:root {
+    --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
+    --font-ui: 'Inter', system-ui, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+    /* 7-step type scale. Display sizes scale fluidly; the rest are fixed.
+       Pull-quote / lifecycle stage / prose h2 collapse into title-lg. */
+    --text-display:    clamp(40px, 5.6vw, 72px);  /* hero only */
+    --text-display-sm: clamp(28px, 3.4vw, 48px);  /* section headings */
+    --text-title-lg:   22px;                       /* feature cards, pull quote */
+    --text-title:      18px;                       /* all card h3 */
+    --text-body:       16px;                       /* body, hero lead, lead */
+    --text-sm:         14px;                       /* descriptions, captions */
+    --text-eyebrow:    12px;                       /* uppercase labels, nav, micro */
+
+    --w-extralight: 200;
+    --w-light: 300;
+    --w-regular: 400;
+    --w-medium: 500;
+    --w-bold: 700;
+    --w-black: 900;
+
+    --leading-display: 1.1;
+    --leading-tight: 1.2;
+    --leading-snug: 1.4;
+    --leading-normal: 1.6;
+
+    --tracking-tight: -0.02em;
+    --tracking-eyebrow: 0.1em;
+}
+
+/* ---------- Spacing, radius ---------- */
+
+:root {
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+    --space-30: 120px;
+
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-pill: 60px;
+    --radius-full: 9999px;
+
+    --layout-max: 1200px;
+    --layout-gutter: 360px;
+}
+
+/* ---------- Element styles ---------- */
+
+html, body {
+    font-family: var(--font-sans);
+    font-size: var(--text-body);
+    line-height: var(--leading-normal);
+    color: var(--dark-blue);
+    background: var(--bg);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1, .h1 {
+    font-family: var(--font-sans);
+    font-size: var(--text-display);
+    font-weight: var(--w-medium);
+    line-height: var(--leading-display);
+    letter-spacing: var(--tracking-tight);
+    color: var(--dark-blue);
+    margin: 0 0 var(--space-6);
+    text-wrap: balance;
+}
+
+h2, .h2, .display-xl {
+    font-size: var(--text-display-sm);
+    font-weight: var(--w-medium);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    margin: 0 0 var(--space-6);
+    text-wrap: balance;
+}
+
+h3, .h3 {
+    font-size: var(--text-title);
+    font-weight: var(--w-medium);
+    line-height: var(--leading-tight);
+    margin: 0 0 var(--space-4);
+}
+
+h4, .h4 {
+    font-size: var(--text-title-lg);
+    font-weight: var(--w-medium);
+    line-height: var(--leading-tight);
+    margin: 0 0 var(--space-3);
+}
+
+.lead {
+    font-size: var(--text-body);
+    font-weight: var(--w-regular);
+    line-height: var(--leading-normal);
+    color: var(--fg-muted);
+}
+
+p, .body {
+    font-size: var(--text-body);
+    line-height: var(--leading-snug);
+    color: var(--fg-muted);
+    margin: 0 0 var(--space-4);
+    text-wrap: pretty;
+}
+
+.eyebrow {
+    font-family: var(--font-ui);
+    font-size: var(--text-eyebrow);
+    font-weight: var(--w-bold);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-eyebrow);
+    color: var(--bright-blue);
+    display: inline-block;
+}
+
+.mono, code, kbd, samp, pre {
+    font-family: var(--font-mono);
+    font-size: .9em;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: color .18s ease, opacity .18s ease;
+}
+
+a:hover {
+    color: var(--bright-blue);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--border);
+    margin: var(--space-12) 0;
+}
+
+/* ---------- Re-usable element classes ---------- */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 14px 28px;
+    border-radius: var(--radius-pill);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--w-medium);
+    line-height: 1;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
+    white-space: nowrap;
+}
+
+.btn:active {
+    transform: scale(.98);
+}
+
+.btn--primary {
+    background: var(--bright-blue);
+    color: var(--bg-white);
+}
+
+.btn--primary:hover {
+    background: var(--dark-blue);
+}
+
+.btn--inverse {
+    background: var(--bg-white);
+    color: var(--bright-blue);
+    border-color: var(--bg-white);
+}
+
+.btn--inverse:hover {
+    background: var(--bg);
+}
+
+.btn--ghost {
+    background: transparent;
+    color: var(--dark-blue);
+    border-color: var(--border);
+}
+
+.btn--ghost:hover {
+    border-color: var(--bright-blue);
+    color: var(--bright-blue);
+}
+
+.card {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-8);
+    box-shadow: var(--shadow-brand);
+    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
+}
+
+a.card {
+    color: inherit;
+    text-decoration: none;
+}
+
+a.card:hover,
+.card:has(a):hover {
+    transform: translateY(-2px);
+    border-color: var(--bright-blue);
+}
+
+.dot-square {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--bright-blue);
+    transform: rotate(45deg);
+    border-radius: 2px;
+    vertical-align: middle;
+}