diff --git a/src/assets/images/background.png b/src/assets/images/background.png
index 5d0ea53..0d2ad2a 100644
Binary files a/src/assets/images/background.png and b/src/assets/images/background.png differ
diff --git a/src/assets/images/background_3.png b/src/assets/images/background_3.png
new file mode 100644
index 0000000..5d0ea53
Binary files /dev/null and b/src/assets/images/background_3.png differ
diff --git a/src/components/Header.astro b/src/components/Header.astro
index fa8d03d..5e0f236 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,7 +9,6 @@ const home = localePath(lang, '/');
const items = [
{ href: `${home}#capabilities`, label: ui.nav.capabilities },
{ href: localePath(lang, '/cipherverifier'), label: ui.nav.product },
- { href: `${home}#sectors`, label: ui.nav.sectors },
{ href: localePath(lang, '/insights'), label: ui.nav.insights },
{ href: localePath(lang, '/team'), label: ui.nav.team },
];
@@ -60,13 +59,20 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
padding-block: var(--space-3);
transition:
max-width var(--dur-slow) var(--ease),
- padding-inline var(--dur-slow) var(--ease);
+ padding var(--dur-slow) var(--ease);
}
- /* Once the page scrolls, the bar widens from the content column to the viewport. */
+ /* Once the page scrolls, the bar docks: full width, flush to the top, and as tall as the header
+ so nothing below moves. Its outer crosses would sit off-screen (and the side ones would make
+ the page scroll sideways), so they go, with the top and side borders; the bottom line stays. */
.header[data-scrolled] .header__shell {
max-width: 100%;
- padding-inline: var(--header-inset-scrolled);
+ padding: 0;
}
+ .header[data-scrolled] .header__bar {
+ min-height: var(--header-height);
+ border-width: 0 0 var(--line);
+ }
+ .header[data-scrolled] .header__bar::after { content: none; }
.header__bar {
pointer-events: auto;
isolation: isolate;
@@ -80,7 +86,10 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
line-height: 1;
letter-spacing: var(--track-caps);
text-transform: uppercase;
- transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
+ transition:
+ color var(--dur) var(--ease),
+ border-color var(--dur) var(--ease),
+ min-height var(--dur-slow) var(--ease);
}
/* The glass sits on a pseudo-element rather than the bar itself: a backdrop-filter on the bar
would make it a backdrop root, and the mobile panel inside it could then blur nothing. */
@@ -183,6 +192,12 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
.header__nav.hud-frame { border: var(--line) solid var(--frame-color); }
.header__nav.hud-frame::after { content: ''; }
.header__nav[data-open] { display: block; }
+ /* Docked: the panel hangs straight off the bar's bottom line, edge to edge. */
+ .header[data-scrolled] .header__nav {
+ top: calc(100% + var(--line));
+ border-width: 0 0 var(--line);
+ }
+ .header[data-scrolled] .header__nav.hud-frame::after { content: none; }
.header__list { flex-direction: column; }
.header__list li { border-left: 0; }
.header__list li + li { border-top: var(--line) solid var(--frame-color); }
diff --git a/src/components/home/Hero.astro b/src/components/home/Hero.astro
index 235ddaf..e309a0b 100644
--- a/src/components/home/Hero.astro
+++ b/src/components/home/Hero.astro
@@ -68,7 +68,10 @@ const ui = t(lang);
width: 100%;
padding-block: var(--space-9);
}
- .hero__title { max-width: 12em; }
+ .hero__title {
+ max-width: 12em;
+ font-size: var(--step-hero);
+ }
.hero__line {
display: block;
opacity: 0;
diff --git a/src/data/team.ts b/src/data/team.ts
index aa1f1e3..e82c085 100644
--- a/src/data/team.ts
+++ b/src/data/team.ts
@@ -14,18 +14,15 @@ export interface Person {
name: string;
role: RoleKey;
portrait: ImageMetadata;
- github?: string;
- linkedin?: string;
- email: string;
}
export const team: Person[] = [
- { name: 'Dr. Felix Klement', role: 'ceo', portrait: felix, github: 'https://github.com/fklement', linkedin: 'https://www.linkedin.com/in/felix-klement', email: 'felix.klement@ciphercell.de' },
- { name: 'Dr. Florian Frank', role: 'cto', portrait: florian, github: 'https://github.com/FlorianFrank', linkedin: 'https://www.linkedin.com/in/florianfrank93/', email: 'florian.frank@ciphercell.de' },
- { name: 'Alexander Braml', role: 'engineer', portrait: alexander, github: 'https://github.com/AlexanderBraml', linkedin: 'https://www.linkedin.com/in/alexanderbraml/', email: 'alexander.braml@ciphercell.de' },
- { name: 'Erik Foris', role: 'engineer', portrait: erik, github: 'https://github.com/ErikForis', email: 'erik.foris@ciphercell.de' },
- { name: 'Marc Schlotzhauer', role: 'bizdev', portrait: marc, email: 'marc.schlotzhauer@ciphercell.de' },
- { name: 'Philipp Mayr', role: 'engineer', portrait: philipp, github: 'https://github.com/truePhilipp', linkedin: 'https://www.linkedin.com/in/philipp-mayr/', email: 'philipp.mayr@ciphercell.de' },
- { name: 'Karin Kaufmann', role: 'studentF', portrait: karin, email: 'karin.kaufmann@ciphercell.de' },
- { name: 'Valentin Hirte', role: 'studentM', portrait: valentin, email: 'valentin.hirte@ciphercell.de' },
+ { name: 'Dr. Felix Klement', role: 'ceo', portrait: felix },
+ { name: 'Dr. Florian Frank', role: 'cto', portrait: florian },
+ { name: 'Alexander Braml', role: 'engineer', portrait: alexander },
+ { name: 'Erik Foris', role: 'engineer', portrait: erik },
+ { name: 'Marc Schlotzhauer', role: 'bizdev', portrait: marc },
+ { name: 'Philipp Mayr', role: 'engineer', portrait: philipp },
+ { name: 'Karin Kaufmann', role: 'studentF', portrait: karin },
+ { name: 'Valentin Hirte', role: 'studentM', portrait: valentin },
];
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index b2b6b60..2ede9d3 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -220,7 +220,6 @@ const en = {
title: ['Researchers,', 'engineers,', 'architects.'],
intro: 'The people who go deep on the problems that matter, from network software and private 5G to hardware and cloud-native systems.',
photoAlt: 'The CipherCell team on a staircase in the offices in Passau.',
- links: { github: 'GitHub', linkedin: 'LinkedIn', email: 'Email' },
roles: {
ceo: 'Founder and CEO',
cto: 'Founder and CTO',
@@ -437,7 +436,6 @@ const de: typeof en = {
title: ['Forschende,', 'Ingenieure,', 'Architekten.'],
intro: 'Die Menschen, die sich in die Probleme vertiefen, auf die es ankommt: von Netzsoftware und privaten 5G-Netzen bis zu Hardware und Cloud-nativen Systemen.',
photoAlt: 'Das CipherCell-Team auf einer Treppe in den Büros in Passau.',
- links: { github: 'GitHub', linkedin: 'LinkedIn', email: 'E-Mail' },
roles: {
ceo: 'Gründer und CEO',
cto: 'Gründer und CTO',
diff --git a/src/pages/_Team.astro b/src/pages/_Team.astro
index 67606ff..6250a57 100644
--- a/src/pages/_Team.astro
+++ b/src/pages/_Team.astro
@@ -53,11 +53,6 @@ const ui = t(lang);
/>
{p.name}
{ui.team.roles[p.role]}
-
))}
@@ -91,8 +86,6 @@ const ui = t(lang);
}
.person { display: grid; gap: var(--space-2); align-content: start; }
.person__img, :global(.person__img) { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-2); }
- .person__links { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
- .person__links a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }
@media (min-width: 30rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index a5e3ec2..f176fde 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -29,6 +29,8 @@
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
+ /* Home hero headline: about 10% below display, so the image keeps more of the frame. */
+ --step-hero: clamp(2.5rem, 1.1rem + 5.6vw, 6.25rem);
--step-h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem);
--step-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
/* Card and footer titles: between h2 and h3, for headings that name rather than claim. */
@@ -84,9 +86,6 @@
/* Chrome */
--header-height: 4.5rem;
- /* Side inset of the menu bar once the page scrolls: it widens to the viewport, keeping the
- same air as above and below so the corner crosses stay visible. */
- --header-inset-scrolled: var(--space-3);
/* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
--hud-line-width: 1px;