Relaunch peakscale.ch - #27
Merged
Merged
Conversation
Per specs/relaunch-plan.md sprints 0–5: rebuild the site on Hugo extended
with plain CSS (tokens.css + site.css from the Claude PS Design System)
and ~30 lines of vanilla JS — no Tailwind, no Alpine, no Node toolchain.
- New IA: Home, Services, Produkte (NEW), Team, Impressum, Datenschutz,
in DE (root) and EN (/en/). About and Contact merge into Team and a
prominent mailto CTA. /angebot/, /about/, /contact/, /legalnotice/,
/privacy/ kept as Hugo aliases for redirect continuity.
- New layouts: index, services/list, produkte/list, team/list, plus
partials for header, footer, mobile menu, lang switch, contact-floating,
and per-page hero visuals (compass, blocks, network, mountain, mail).
- Centralised data in data/{customers,partners,team,testimonials}.yaml
and i18n strings in i18n/{de,en}.toml.
- SEO foundation in head.html: per-page title/description, OG/Twitter
tags, canonical, hreflang, JSON-LD (Organization on every page,
WebSite on home), Plausible analytics snippet.
- Migrated existing customer logos and team photos from content/ to
static/images/. Added a read-only design-system-reference/ snapshot of
the Claude PS Design System (tokens, preview pages, JSX component
blueprints).
- Removed the predecessor SCSS pipeline, Disqus/Plausible-helper partials,
blog/portfolio/subscribe sections, contact form, and the old About,
Contact, Legalnotice, and Privacy content directories.
Sprints 6–7 (custom imagery, OG image generator, Lighthouse/Pa11y/
Playwright CI, native EN review, privacy-notice review, DNS switch)
remain open per the punch list.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Templates use the `hugo.Sites` and `hugo.Data` globals (introduced in
Hugo 0.156) to avoid the deprecation warnings on `.Site.Languages` and
`.Site.Data`. CI was still on 0.143.1 and failed to render with
"can't evaluate field Sites in type interface {}".
Bumps both workflow files to 0.161.1, adds `.hugo-version` for asdf/mise
users, and notes the version expectation in shell.nix (Nix users may
need `nix flake update` if `pkgs.hugo` lags behind).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
Replaces the topo-mountain placeholders and the SVG hero partials on the
relaunch site with the curated raster crops from Peak Scale (DEV).fig.
- Heroes: home (low-poly mountain w/ stage pills), services (compass),
produkte (modular blocks, replacing visuals/blocks-large.html), team
(connected nodes, replacing visuals/network-large.html).
- Section media: 4 lifecycle rows on home, 5 values rows on team,
challenges-glass background on home + services, produkte mid-page
banner.
- Why grid: restores the "Peak steht für technische Tiefe" featured tile
(back to 6 cards as in the HiFi) with the dark-blue topo-abstract
anchored to the bottom of the card.
Drops em-dashes from all German content (en-dash is the German
Gedankenstrich), keeping em-dashes in the English siblings via
lang-conditional templates for testimonial citations and the team
LinkedIn aria-label.
Tones the .display-xl cap from 128 px to 88 px since the original
Figma value rendered too large at desktop widths.
Adds /static/_figextract/ to .gitignore (working extracts; only the
curated images under static/images/{hero,section}/ are committed) and
documents the Sprint 6 progress in specs/relaunch-plan.md.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johanngyger
changed the title
Decision (3 May): we do not license the Figma stock placeholders we currently ship. Instead we'll select replacement stock — or commission the in-house alpine shoot per Mathias — once the rest of Sprint 6 is closed, then license only the chosen final set. Picking imagery that actually fits the brand is the bottleneck, not the licensing step. - §16 risk row updated with the deferral and reasoning - §17 decisions: new entry #12 capturing the call - §18 punch-list item 2 sub-bullets reordered: (a) prune dead visuals/*.html partials, (b) review topo-abstract choice, (c) deferred image swap + licensing Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The brand-token SVGs in layouts/partials/visuals/ (compass, blocks, network, mountain, topo, *-large variants) are hand-coded, ~300 lines total, no external dependencies. They are candidates for the OG generator (Sprint 6 item 3), the print stylesheet (§14), and as a fallback for any raster photo that doesn't survive review. Worth keeping; the previous plan note suggesting a prune was wrong. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Treated as optimisation rather than launch-blocking. The single fallback OG (`/images/peakscale-logo-square.png`) keeps share previews working. Revisit only if a stakeholder asks. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bigger Sprint 6 polish pass touching all four main pages: - Header/footer use the proper Peak Scale logo SVG (light + dark); drops the inline brand-mark + text and the header contact CTA. - Footer collapses to 3 columns (brand + about + LinkedIn icon, menu, legal); contact mail joins the bottom row. - New `.accent` helper to colour-highlight single words inside headings; applied across pages. - Home Why grid swaps numeric meta for per-tile icons; new "challenges-glass--split" layout (heading left, stacked cards right, optional featured card). - Home Next-steps becomes a 1+2 mosaic with primary/gold/sage variants and an optional checklist on the primary card. - Produkte own-solutions cards add a "Geeignet für" fit-block; partner cards now show role + themed bullet list. - Services tightens engineering subhead and rewrites assessments/training cards; "Wie wir arbeiten" tag becomes a bulleted list. - Team page refreshes mission, how-we-work, why-cloud-native, values, community and contact copy with footnotes where useful. - data/team.yaml updates roles and focus areas; testimonials.yaml rewrites two of three quotes. - icon.html adds building, messages, lab, globe, doc, spark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johanngyger
changed the title
Replaces the flat greyscale logo strip with auto-scrolling boxed tiles per the Figma reference. Pure-CSS marquee (no extra JS): each customer is duplicated once so the keyframe loop is seamless, hover pauses the animation, and the edges are masked into the section background. prefers-reduced-motion falls back to a static horizontally scrollable row.
Switches the logo strip from a CSS-keyframe marquee to a transform-based slider with explicit left/right arrows. Auto-advance still runs every 3.5s, pauses on hover or keyboard focus, and is suppressed under prefers-reduced-motion. The track loops at both ends so prev from the start jumps to the last full page and vice versa.
Removes ~140 lines of CSS that no template references:
- .icon-tile, .card-meta*, .card--brand + overrides, .card--glass,
.eyebrow--pill, .eyebrow--sm
- The legacy boxed .lifecycle / .lifecycle__stage / .lifecycle__dot
strip (replaced by .lifecycle-rows)
- .mountain-stages*, .stage-list* (only the unused visuals/mountain
partial referenced these)
- .value-tile*, .partner-logos__name, .partner-logos__role
- Empty `.cat-card { /* extends .card */ }` rule
- Stale `.site-footer__social` selector in the print stylesheet
Adds four on-dark text/accent tokens to tokens.css and folds 25
hardcoded rgba/rgb instances through them:
- --text-on-dark (rgba 255,255,255,.78)
- --text-on-dark-strong (rgba 255,255,255,.85)
- --text-on-dark-soft (rgba 255,255,255,.72)
- --accent-on-dark (rgb 122,192,232)
Print stylesheet refreshed to hide testimonial nav and the new
logo-carousel arrows alongside the contact-fab.
CSS surface goes from 1540 → 1450 lines.
Cuts inline `style=""` attributes across the four main layouts from
72 down to 11 (only dynamic background-image URLs remain). The
removed inline styles were almost all rebuilding the same handful
of patterns; they are now expressed as small CSS components.
New components in site.css:
- .checklist (+ .checklist--grid-2, .checklist--md, .checklist--on-dark)
Replaces the manually-marked-up `<li><span style="color:var(--accent-sage)">✓</span>…`
pattern repeated ~12 times across produkte own/partners, services
engineering work-style tag, and services assessments output strip.
- .col-narrow / .col-narrow--md — 880 / 720 px centred columns.
- .section__footnote — small grey centred note (team how-we-work,
community).
- .numbered-step{,__num} — produkte journey row.
- .lifecycle-cards__card.is-stack — swaps the inline icon/title/desc
stack on team how-we-work and services assessments to use the
existing .lifecycle-cards__title / __desc classes.
- .own-card{,__icon,__title,__eyebrow}, .own-cards (Produkte own
solutions stack).
- .partner-cards / .partner-card__{logo,role,themes-title} (Produkte
technology partners 2x2 grid).
- .journey-banner (Produkte mid-page banner).
- .service-stack(--tight), .service-card__items, .card__eyebrow,
.tag-arbeitsweise__list, .assessment-cards, .output-block (Services
page columns and dark glass output strip).
- .heading-xl, .lead--flush, .mission-grid (Team mission row).
- .section--gold, .section__icon--gold, .pill-row--center,
.contact-cta{,__eyebrow,__title,__actions} (Team community + contact
CTA).
- .section--deep — replaces 4 ad-hoc `style="background:var(--fg-deep)"`
on the next-steps sections across all four pages.
- .training-cards margin helper.
Also removes the now-dead `.contact-block` rule from site.css and
fills in `.challenges-glass__intro .lead` so it can render
`var(--text-on-dark-strong)` without an inline override.
Both the relaunch implementation plan (previously specs/relaunch-plan.md) and the read-only Peak Scale Design System reference (previously design/design-system-reference/) move under /relaunch/ on contributor machines. /relaunch/ is now ignored — it is a local working area for plans, design references and Figma exports that are not part of the build. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Logo strip:
- Shuffles tiles in place on every page load (Fisher-Yates).
- Becomes a true infinite carousel: clones the shuffled set so the
track is twice as long, snaps the transform back by one set-width
on each transitionend, and jumps invisibly to the mirror position
before any prev that would go below zero.
- Each img now fills the full tile interior (`width: 100%; height: 100%;
object-fit: contain`) so the visible "border" around every logo
is identical regardless of the source aspect ratio. Generous
18×32 padding gives all tiles a uniform frame.
- freezeAtRendered() halts in-flight transitions on hover/focus and
before clicks so tiles don't slip out from under the cursor.
- Customer SVGs cropped to their visible content:
bfh.svg viewBox 0 0 652 652 → 160 71 322 500
eth.svg viewBox 0 0 320 320 → 3 134 314 51 (also dropped width/height attrs)
ewb.svg viewBox 24.9 0.1 117.9 58.9 → 0 0 144 59 (the old box clipped content)
postfinance.svg now has an explicit viewBox so it can scale.
Brand token rename:
- tokens.css: renames the three brand colors after the logo
(--brand → --bright-blue, --fg → --dark-blue, with --bg-white
staying the white). All call-sites in site.css and the
visuals/*.html SVG partials follow the rename.
File rename - tokens.css → base.css. The file holds design tokens + base element styles + small primitives (.btn, .pill, .card, .dot-square), so "tokens" overstated its scope. head.html and site.css updated to match. Photo-anchored accent colors - --accent-sage / -soft → --accent-green / -soft, value rgb(125, 175, 75) / rgb(228, 240, 210). Sampled from the green rope in static/images/section/platform-engineering.jpg. - --accent-gold / -soft → --accent-yellow / -soft, value rgb(232, 184, 60) / rgb(252, 238, 180). Sampled from the yellow rope on the same image and the warm sky in cloud-architecture.jpg. - The old sage/gold values were too desaturated to read alongside these images. The new pair is the complement of the brand blue (yellow at hue 44° vs dark-blue at 221°) with grass green bridging the two. Drop dead / near-duplicate tokens - --stroke-on-dark-1 (unused), --stroke-on-dark-3 (unused); --stroke-on-dark-2 renamed to --stroke-on-dark. - --text-on-dark-soft (.72α), --text-on-dark-strong (.85α): both visually indistinguishable from --text-on-dark (.78α) on dark navy. - --accent-gold-ink: ~= --accent-gold. - --status-ok, --status-err: unused. - --legacy-fg, --legacy-bg, --legacy-rope: unused. - The entire shadcn :root block (--background, --foreground, --card, --primary, --secondary, --muted, --accent, --border-shadcn, --input, --ring, --radius and their *-foreground variants): all unused. - --shadow-card: unused. Final palette: 15 named color tokens + 3 shadows, down from ~41. Comment cleanup - Header reduced to the brand-identity callout (the three colors with their tokens, plus the brand-vs-supportive distinction). All references to Figma, the design system, hi-fi / lo-fi history, shadcn and "canonical" sourcing removed across base.css. - Per-token comments reduced to short purpose markers (`body copy`, `meta`, `pale wash`, …) where they add something the name doesn't. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johanngyger
marked this pull request as ready for review
August 14, 2026 17:21
imathu
approved these changes
Aug 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Preview: https://peak-scale-relaunch-2026.peakscale.pages.dev
Rebuild peakscale.ch on the new IA, design system and content. Implementation plan tracked locally in
relaunch/plan.md(gitignored working doc)./en/. Old URLs kept as Hugo aliases.base.css+site.css) + ~30 lines of vanilla JS. No Node toolchain, no Hugo theme..icon-tile,.card,.next-steps__card, ...) on top of a ~15-token palette. Brand colors are--bright-blue/--dark-blue/--bg-whiteafter the logo. Photo overlays consolidated into a single--overlay-photovariable.data/*.yaml, UI strings ini18n/{de,en}.toml.static/images/.Open items