From 21d4b234705ff2ac194c35d9fd9a385b00497a30 Mon Sep 17 00:00:00 2001 From: Arlind Ukshini Date: Fri, 24 Apr 2026 10:20:29 +0200 Subject: [PATCH] mobile: carousel timeline, hero wordmark, arc + illustrations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Timeline: 12 event tiles are now a horizontal scroll-snap carousel instead of a vertical stack. Each card flex-basis: 84vw, snap-align start, with paper-tile styling + a subtle shadow + "NN / 12" index in the top-right. A "Swipe →" hint sits above the track. Zero JS — pure CSS scroll-snap + -webkit-overflow-scrolling. Hero: Fenja wordmark (36px) placed above the "For regulated environments" eyebrow, whole section wrapped in a paper-2 strip with 72/80px top/bottom padding and hairline rules top + bottom. Sits visually as its own chapter instead of a continuation of the previous section. Transition strip ("How Fenja AI addresses this") gets vertical rules above and below and 88px vertical padding so it reads as a deliberate pause between the timeline and the platform sections. Capability cards: 4 per-layer illustrations (ai.png, lightbulb, blocs tools, agents.png — all already in fenja/illustrations/) placed as 72×72 PNGs in the top-right of each card. Card content padding-right bumped to 92px for the num/eyebrow/title rows so long titles wrap around the icon instead of under it. Project Bifrost: the desktop aurora arc reused as a static SVG backdrop. Scaled to 190% viewport width (max 900px) so the arc runs off both edges of the phone screen, matching the desktop's "bridge spans the stage" feel. Treasure-map stops: community.svg, council.svg, pilot.svg sit as 220px-wide illustrations above each stop's text, replacing the text-only mobile rendering. Join CTA: now wrapped in an inset paper tile with a 1.5px ink border, a shadow, and an accent hairline ornament floating above the eyebrow. Enclosing section gets a paper-3 background to push the tile forward. Button grows to 20px serif / 18×34 padding. Section padding standardised to 56-120px vertical so sections breathe. Body overflow-x:hidden on html/body as a safety net for the wide arc + the carousel overflow. Co-Authored-By: Claude Opus 4.7 (1M context) --- protected/mobile/index.html | 235 ++++++++++++++++++--------- protected/mobile/mobile.css | 313 ++++++++++++++++++++++++++++-------- 2 files changed, 403 insertions(+), 145 deletions(-) diff --git a/protected/mobile/index.html b/protected/mobile/index.html index b1b81f3..a87d410 100644 --- a/protected/mobile/index.html +++ b/protected/mobile/index.html @@ -33,102 +33,129 @@

- +
-

The last 18 months, in twelve moments.

+
+

The last 18 months, in twelve moments.

+ +
-
-
EditorialSeptember 2024
-

Three American firms run 70% of Europe’s cloud — and almost all of its AI.

-

Mario Draghi’s verdict to the European Parliament: only four of the world’s top fifty tech companies are European. “It is too late,” he writes, to challenge American cloud providers. Without radical reform, the EU faces “slow agony.”

-
The Draghi Report · Brussels
-
+
-
-
Field NoteDecember 2024
-

Denmark warns: digital society is now “extremely vulnerable.”

-

The expert group on tech giants reports: dependence on a handful of foreign suppliers is no longer a procurement question. It is a national security one. Minister Bodskov: “we need to fence in the tech giants.”

-
Danish Expert Group · Copenhagen
-
+
+
EditorialSeptember 2024
+

Three American firms run 70% of Europe’s cloud — and almost all of its AI.

+

Mario Draghi’s verdict to the European Parliament: only four of the world’s top fifty tech companies are European. “It is too late,” he writes, to challenge American cloud providers. Without radical reform, the EU faces “slow agony.”

+
The Draghi Report · Brussels
+
01 / 12
+
-
-
RuptureJanuary 2025
-

Trump refuses to rule out military force against Greenland.

-

Two weeks before inauguration, the president-elect threatens “very high tariffs” on Denmark. The shock in Copenhagen is total.

-
Mar-a-Lago · Press Conference
-
+
+
Field NoteDecember 2024
+

Denmark warns: digital society is now “extremely vulnerable.”

+

The expert group on tech giants reports: dependence on a handful of foreign suppliers is no longer a procurement question. It is a national security one. Minister Bodskov: “we need to fence in the tech giants.”

+
Danish Expert Group · Copenhagen
+
02 / 12
+
-
-
RuptureMay 2025
-

Microsoft cuts off the ICC chief prosecutor’s email.

-

A US tech company, complying with a US executive order, disables the digital life of an officer of an international tribunal in the Netherlands. The “kill switch” stops being theoretical.

-
Associated Press · The Hague
-
+
+
RuptureJanuary 2025
+

Trump refuses to rule out military force against Greenland.

+

Two weeks before inauguration, the president-elect threatens “very high tariffs” on Denmark. The shock in Copenhagen is total.

+
Mar-a-Lago · Press Conference
+
03 / 12
+
-
-
RegulationJune 2025
-

Microsoft admits under oath: it cannot guarantee European sovereignty.

-

Even data on European soil, with European staff, encrypted with European keys — US authorities can compel disclosure under the CLOUD Act. The legal fiction collapses.

-
French Senate Hearing · Paris
-
+
+
RuptureMay 2025
+

Microsoft cuts off the ICC chief prosecutor’s email.

+

A US tech company, complying with a US executive order, disables the digital life of an officer of an international tribunal in the Netherlands. The “kill switch” stops being theoretical.

+
Associated Press · The Hague
+
04 / 12
+
-
-
Field NoteJune 2025
-

Copenhagen’s Microsoft bill jumps 72% in five years.

-

From 313 to 538 million Danish kroner. Copenhagen and Aarhus announce they will leave Microsoft entirely. The minister of emergency tells companies: “create exit plans for cloud services.”

-
Copenhagen Municipality · Finance Report
-
+
+
RegulationJune 2025
+

Microsoft admits under oath: it cannot guarantee European sovereignty.

+

Even data on European soil, with European staff, encrypted with European keys — US authorities can compel disclosure under the CLOUD Act. The legal fiction collapses.

+
French Senate Hearing · Paris
+
05 / 12
+
-
-
RegulationSummer 2025
-

A Danish minister tells industry: prepare your exit plans for cloud services.

-

Caroline Stage Olsen begins moving her ministry off Microsoft 365. The minister of emergency preparedness urges every Danish company to do the same. Continued dependence is now classified as a vulnerability.

-
Danish Ministry of Digital Affairs
-
+
+
Field NoteJune 2025
+

Copenhagen’s Microsoft bill jumps 72% in five years.

+

From 313 to 538 million Danish kroner. Copenhagen and Aarhus announce they will leave Microsoft entirely. The minister of emergency tells companies: “create exit plans for cloud services.”

+
Copenhagen Municipality · Finance Report
+
06 / 12
+
-
-
RuptureAugust 2025
-

Trump threatens tariffs against any country with digital regulations.

-

“American technology is not the world’s piggy bank.” The DSA, the DMA, the AI Act — all reframed as discriminatory trade barriers. Chip export restrictions are added to the list of consequences.

-
Truth Social · Washington
-
+
+
RegulationSummer 2025
+

A Danish minister tells industry: prepare your exit plans for cloud services.

+

Caroline Stage Olsen begins moving her ministry off Microsoft 365. The minister of emergency preparedness urges every Danish company to do the same. Continued dependence is now classified as a vulnerability.

+
Danish Ministry of Digital Affairs
+
07 / 12
+
-
-
RuptureJanuary 2026
-

Trump imposes tariffs on Denmark and seven European nations.

-

10% in February. 25% from June — until Denmark cedes Greenland. Denmark, Norway, Sweden, Finland, France, Germany, Netherlands, UK. The post-war alliance, weaponised.

-
Presidential Executive Order
-
+
+
RuptureAugust 2025
+

Trump threatens tariffs against any country with digital regulations.

+

“American technology is not the world’s piggy bank.” The DSA, the DMA, the AI Act — all reframed as discriminatory trade barriers. Chip export restrictions are added to the list of consequences.

+
Truth Social · Washington
+
08 / 12
+
-
-
RuptureJanuary 2026
-

Denmark names the United States as a national security threat.

-

For the first time in history, the official Danish threat assessment lists the US alongside Russia and China. Defence committee chair Rasmus Jarlov tells Washington: “You are the threat. Not them.”

-
Danish Defence Intelligence · FE
-
+
+
RuptureJanuary 2026
+

Trump imposes tariffs on Denmark and seven European nations.

+

10% in February. 25% from June — until Denmark cedes Greenland. Denmark, Norway, Sweden, Finland, France, Germany, Netherlands, UK. The post-war alliance, weaponised.

+
Presidential Executive Order
+
09 / 12
+
-
-
ProductFebruary 2026
-

The court that prosecutes war crimes can no longer use American software.

-

The ICC migrates to OpenDesk — an open-source suite delivered by the German Centre for Digital Sovereignty. If a global tribunal cannot trust Microsoft, the implication for every other European institution is unavoidable.

-
Handelsblatt · The Hague
-
+
+
RuptureJanuary 2026
+

Denmark names the United States as a national security threat.

+

For the first time in history, the official Danish threat assessment lists the US alongside Russia and China. Defence committee chair Rasmus Jarlov tells Washington: “You are the threat. Not them.”

+
Danish Defence Intelligence · FE
+
10 / 12
+
-
-
RegulationQ1 2026
-

Europe drafts a sovereignty law as US firms still hold 70% of the cloud.

-

Europe writes rules for infrastructure it does not own. US hyperscalers add €10 billion of European capacity every quarter — more than Gaia-X spent in a decade. The servers stay in Texas. The AI models stay in California. The law changes neither.

-
European Commission · Brussels
-
+
+
ProductFebruary 2026
+

The court that prosecutes war crimes can no longer use American software.

+

The ICC migrates to OpenDesk — an open-source suite delivered by the German Centre for Digital Sovereignty. If a global tribunal cannot trust Microsoft, the implication for every other European institution is unavoidable.

+
Handelsblatt · The Hague
+
11 / 12
+
+ +
+
RegulationQ1 2026
+

Europe drafts a sovereignty law as US firms still hold 70% of the cloud.

+

Europe writes rules for infrastructure it does not own. US hyperscalers add €10 billion of European capacity every quarter — more than Gaia-X spent in a decade. The servers stay in Texas. The AI models stay in California. The law changes neither.

+
European Commission · Brussels
+
12 / 12
+
+ +
+

How Fenja AI addresses this

+
+

For regulated environments

Fenja AI — Secure & Sovereign, hosted where it belongs. @@ -148,6 +175,7 @@

The Fenja AI platform in four steps.

+ 1 / 4

The AI

An open-source model, running on your own hardware.

@@ -155,6 +183,7 @@
+ 2 / 4

The Knowledge

The business context that makes AI understand your world.

@@ -162,6 +191,7 @@
+ 3 / 4

The Tools

How AI acts — not just what it knows.

@@ -169,6 +199,7 @@
+ 4 / 4

The Agents

Specialized AI agents working together around real tasks.

@@ -176,13 +207,54 @@
- +
-

Introducing

-

Project Bifrost

-

- The bridge between an industrial-grade AI platform and the realities of regulated organisations — built with them, not just for them. -

+ +
+

Introducing

+

Project Bifrost

+

+ The bridge between an industrial-grade AI platform and the realities of regulated organisations — built with them, not just for them. +

+
@@ -196,6 +268,7 @@

+

Be part of a

Community

Shape the future together

@@ -203,6 +276,7 @@
+

Be part of an

Advisory Council

Turn insight into influence

@@ -210,6 +284,7 @@
+

Be part of

Pilot Projects

Access the platform before others

diff --git a/protected/mobile/mobile.css b/protected/mobile/mobile.css index cfe2437..ef9bbbb 100644 --- a/protected/mobile/mobile.css +++ b/protected/mobile/mobile.css @@ -12,6 +12,7 @@ :root { --paper: #faf6ee; --paper-2: #f3efe4; + --paper-3: #ece4d1; --ink: #2e2e28; --ink-soft: #5f5e5e; --ink-dim: #8a887f; @@ -35,6 +36,9 @@ html, body { font-size: 17px; line-height: 1.55; -webkit-text-size-adjust: 100%; + overflow-x: hidden; /* belt-and-suspenders — the arc + carousel both + rely on horizontal overflow, so we make sure + the page itself never horizontally scrolls. */ } /* ─── Masthead ───────────────────────────────────────────── */ @@ -66,13 +70,12 @@ html, body { /* ─── Main layout ────────────────────────────────────────── */ .m-main { - padding-bottom: 32px; + padding-bottom: 48px; } +/* Default section = generous vertical rhythm. Individual sections + override this where they need their own breathing. */ .m-section { - padding: 40px 22px; -} -.m-section + .m-section { - border-top: 1px solid var(--line-soft); + padding: 56px 22px; } /* ─── Shared type ────────────────────────────────────────── */ @@ -121,17 +124,57 @@ html, body { .m-body--accent em { color: var(--crimson); } /* ─── Intro ──────────────────────────────────────────────── */ -.m-intro { padding-top: 28px; } +.m-intro { + padding: 44px 22px 48px; +} -/* ─── Timeline events ────────────────────────────────────── */ +/* ─── Timeline carousel ──────────────────────────────────── */ .m-timeline { background: var(--paper-2); + padding: 56px 0 64px; /* track bleeds edge-to-edge; use inner padding */ } +.m-timeline-intro { + padding: 0 22px 18px; +} +.m-swipe-hint { + margin: 0; + font-family: "Manrope", system-ui, -apple-system, sans-serif; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-dim); + display: inline-flex; + align-items: baseline; + gap: 8px; +} +.m-swipe-hint span { letter-spacing: 0.22em; } + +.m-timeline-track { + display: flex; + flex-direction: row; + gap: 14px; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-padding-inline-start: 22px; + padding: 6px 22px 10px; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} +.m-timeline-track::-webkit-scrollbar { display: none; } + .m-event { - padding: 20px 0; - border-bottom: 1px solid var(--line); + flex: 0 0 84vw; + max-width: 340px; + scroll-snap-align: start; + scroll-snap-stop: always; + padding: 22px 20px 18px; + background: #fffdf6; + border: 1px solid var(--line); + border-radius: 8px; + position: relative; + box-shadow: 0 10px 22px -18px rgba(46, 46, 40, 0.28); } -.m-event:last-child { border-bottom: none; } .m-event-meta { display: flex; gap: 10px; @@ -157,42 +200,79 @@ html, body { font-size: 20px; line-height: 1.22; letter-spacing: -0.01em; - margin: 0 0 8px 0; + margin: 0 0 10px 0; color: var(--ink); text-wrap: pretty; } .m-event-hed em { font-style: italic; font-weight: 700; } .m-event-body { - margin: 0 0 10px 0; - font-size: 16px; + margin: 0 0 12px 0; + font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } .m-event-source { font-family: "Manrope", system-ui, -apple-system, sans-serif; - font-size: 11px; + font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } +.m-event-index { + position: absolute; + top: 14px; + right: 16px; + font-family: "Newsreader", Georgia, serif; + font-size: 13px; + color: var(--ink-dim); + font-variant-numeric: tabular-nums; +} +.m-event-index span { + color: var(--accent); + font-weight: 600; +} /* ─── Transition strip ───────────────────────────────────── */ .m-transition { - padding-top: 56px; - padding-bottom: 16px; + padding: 88px 22px; text-align: center; } +.m-rule-top, +.m-rule-bottom { + display: block; + width: 44px; + height: 1px; + margin: 0 auto 20px; + background: var(--ink-dim); +} +.m-rule-bottom { margin: 20px auto 0; } .m-transition-eyebrow { font-family: "Newsreader", Georgia, serif; - font-size: 22px; + font-size: 24px; line-height: 1.25; margin: 0; color: var(--ink); } -.m-transition-eyebrow em { font-style: italic; font-weight: 700; } +.m-transition-eyebrow em { font-style: italic; font-weight: 700; color: var(--accent); } /* ─── Hero ───────────────────────────────────────────────── */ -.m-hero { padding-top: 24px; padding-bottom: 52px; } +.m-hero { + background: var(--paper-2); + padding: 72px 22px 80px; + text-align: center; + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} +.m-hero-mark { + margin: 0 0 28px 0; + line-height: 0; +} +.m-hero-mark img { + height: 36px; + width: auto; + display: inline-block; + opacity: 0.95; +} .m-eyebrow { font-family: "Manrope", system-ui, -apple-system, sans-serif; font-size: 11px; @@ -200,7 +280,7 @@ html, body { letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); - margin: 0 0 16px 0; + margin: 0 0 20px 0; } .m-hero-title { font-family: "Newsreader", Georgia, serif; @@ -208,21 +288,22 @@ html, body { font-size: 34px; line-height: 1.08; letter-spacing: -0.018em; - margin: 0 0 20px 0; + margin: 0 0 22px 0; text-wrap: pretty; } .m-hero-title em { font-style: italic; font-weight: 700; color: var(--accent); } .m-hero-lede { - margin: 0 0 28px 0; + margin: 0 auto 32px; font-size: 18px; line-height: 1.55; color: var(--ink); + max-width: 44ch; } .m-support { - display: flex; + display: inline-flex; align-items: baseline; gap: 8px; - padding-top: 16px; + padding: 14px 18px 0; border-top: 1px solid var(--line); } .m-support-label { @@ -241,22 +322,45 @@ html, body { } /* ─── Capabilities ───────────────────────────────────────── */ +.m-caps { + padding: 88px 22px 88px; +} .m-cap { - padding: 22px 20px; + position: relative; + padding: 24px 22px 24px; margin: 0 0 18px 0; background: #fffdf6; border: 1px solid var(--line); - border-radius: 6px; + border-radius: 8px; + box-shadow: 0 12px 22px -18px rgba(46, 46, 40, 0.24); + /* reserve space on the right for the icon so long titles wrap + instead of running under it. */ + padding-right: 96px; + min-height: 104px; } .m-cap:last-child { margin-bottom: 0; } +.m-cap-icon { + position: absolute; + top: 14px; + right: 14px; + width: 72px; + height: 72px; + object-fit: contain; + object-position: center; + /* PNGs are illustrative — let the image rest rather than tinting + it, which the PNGs aren't authored to tolerate. */ + opacity: 0.98; + pointer-events: none; +} .m-cap-num { display: inline-block; font-family: "Newsreader", Georgia, serif; font-weight: 500; - font-size: 14px; + font-size: 13.5px; color: var(--accent); margin-bottom: 10px; font-variant-numeric: tabular-nums; + letter-spacing: 0.02em; } .m-cap-eyebrow { font-family: "Manrope", system-ui, sans-serif; @@ -270,12 +374,15 @@ html, body { .m-cap-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; - font-size: 21px; - line-height: 1.2; + font-size: 20px; + line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 10px 0; color: var(--ink); text-wrap: pretty; + /* allow title to relax into the icon column once the icon ends, + which lives only in the top-right 86px. */ + padding-right: 0; } .m-cap-title b { font-weight: 700; @@ -288,18 +395,58 @@ html, body { } .m-cap-body { margin: 0; - font-size: 16px; + padding-right: 0; + font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } +/* Reclaim the right padding for the body copy once the text flows + below the icon area (icon is ~72px tall + 14px top = 86px). */ +.m-cap { + padding-right: 22px; +} +.m-cap-num, +.m-cap-eyebrow, +.m-cap-title { + /* These rows sit beside the icon — keep clear of it. */ + padding-right: 92px; +} +.m-cap-body { + /* Body sits below the icon — use the whole card width. */ + padding-right: 0; +} -/* ─── Bifrost reveal ─────────────────────────────────────── */ +/* ─── Project Bifrost reveal ─────────────────────────────── */ .m-bifrost { - padding-top: 56px; - padding-bottom: 56px; - text-align: center; + position: relative; + overflow: hidden; + padding: 120px 22px 110px; background: linear-gradient(to bottom, - var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%); + var(--paper) 0%, var(--paper-2) 40%, var(--paper-2) 60%, var(--paper) 100%); + text-align: center; +} +/* The arc is drawn in an SVG that's wider than the viewport so the + gradient ends are always cropped at the screen edges — the bridge + runs off the sides instead of shrinking into a thin ribbon. */ +.m-bifrost-arc { + position: absolute; + left: 50%; + top: 48%; + transform: translate(-50%, -50%); + width: 190%; + max-width: 900px; + pointer-events: none; + z-index: 1; + opacity: 0.98; +} +.m-bifrost-arc svg { + display: block; + width: 100%; + height: auto; +} +.m-bifrost-content { + position: relative; + z-index: 2; } .m-bifrost-eyebrow { font-family: "Manrope", system-ui, sans-serif; @@ -308,15 +455,15 @@ html, body { letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); - margin: 0 0 18px 0; + margin: 0 0 20px 0; } .m-bifrost-name { font-family: "Newsreader", Georgia, serif; font-weight: 400; - font-size: 44px; + font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; - margin: 0 0 22px 0; + margin: 0 0 26px 0; } .m-bifrost-name em { font-style: italic; @@ -327,24 +474,36 @@ html, body { margin: 0 auto; font-size: 17px; line-height: 1.55; - color: var(--ink-soft); + color: var(--ink); max-width: 38ch; } -.m-bifrost-sub em { font-style: italic; font-weight: 700; color: var(--ink); } +.m-bifrost-sub em { font-style: italic; font-weight: 700; color: var(--accent); } /* ─── What Bifrost means ─────────────────────────────────── */ +.m-meaning { + padding: 80px 22px 72px; +} .m-meaning-lede { - margin: 0 0 28px 0; + margin: 0 0 40px 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); } .m-meaning-lede em { font-style: italic; font-weight: 700; color: var(--ink); } .m-stop { - padding: 22px 0; + padding: 32px 0; border-top: 1px solid var(--line); } -.m-stop:first-of-type { border-top: none; padding-top: 6px; } +.m-stop:first-of-type { border-top: none; padding-top: 8px; } +.m-stop-illust { + display: block; + width: 100%; + max-width: 220px; + height: auto; + margin: 0 0 20px 0; + /* SVG illustrations have white-ish backgrounds; let them sit on + paper without a frame. */ +} .m-stop-eyebrow { font-family: "Manrope", system-ui, sans-serif; font-size: 10.5px; @@ -357,14 +516,14 @@ html, body { .m-stop-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; - font-size: 26px; + font-size: 28px; line-height: 1.1; letter-spacing: -0.012em; - margin: 0 0 6px 0; + margin: 0 0 8px 0; } .m-stop-title em { font-style: italic; font-weight: 700; color: var(--accent); } .m-stop-sub { - margin: 0 0 12px 0; + margin: 0 0 14px 0; font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--ink-soft); @@ -377,30 +536,48 @@ html, body { color: var(--ink); } -/* ─── Join CTA ───────────────────────────────────────────── */ +/* ─── Join CTA — the most emphatic section on the page ───── */ .m-join { - background: var(--paper-2); + padding: 100px 22px 120px; + background: var(--paper-3); + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); } .m-join-panel { text-align: center; - padding: 8px 0; + padding: 40px 24px 36px; + background: #fffdf6; + border: 1.5px solid var(--ink); + border-radius: 10px; + box-shadow: + 0 30px 50px -24px rgba(46, 46, 40, 0.28), + 0 8px 18px -10px rgba(46, 46, 40, 0.14); + position: relative; +} +.m-join-panel::before { + content: ""; + position: absolute; + top: -8px; left: 50%; + transform: translateX(-50%); + width: 48px; height: 1.5px; + background: var(--accent); } .m-join-eyebrow { font-family: "Manrope", system-ui, sans-serif; - font-size: 11px; - font-weight: 600; - letter-spacing: 0.18em; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); - margin: 0 0 14px 0; + margin: 0 0 16px 0; } .m-join-headline { font-family: "Newsreader", Georgia, serif; font-weight: 400; - font-size: 28px; - line-height: 1.12; - letter-spacing: -0.012em; - margin: 0 0 24px 0; + font-size: 30px; + line-height: 1.1; + letter-spacing: -0.014em; + margin: 0 0 28px 0; text-wrap: pretty; } .m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); } @@ -410,17 +587,23 @@ html, body { background: var(--ink); color: var(--paper); font-family: "Newsreader", Georgia, serif; - font-size: 18px; + font-size: 20px; + font-weight: 500; letter-spacing: 0.01em; - padding: 14px 26px; - border-radius: 4px; + padding: 18px 34px; + border-radius: 6px; cursor: pointer; - box-shadow: 0 6px 14px -8px rgba(46,46,40,0.35); + box-shadow: + 0 14px 26px -14px rgba(46, 46, 40, 0.55), + 0 4px 10px -6px rgba(46, 46, 40, 0.3); +} +.m-join-button:active { + background: #000; + transform: translateY(1px); } -.m-join-button:active { background: #000; transform: translateY(1px); } .m-join-button:disabled { opacity: 0.55; cursor: progress; } .m-join-subtext { - margin: 20px 0 0 0; + margin: 24px 0 0 0; font-family: "Manrope", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em; @@ -435,7 +618,7 @@ html, body { } .m-confirm-list li { position: relative; - padding: 12px 0 12px 28px; + padding: 14px 0 14px 30px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; @@ -446,7 +629,7 @@ html, body { content: ""; position: absolute; left: 0; - top: 19px; + top: 22px; width: 14px; height: 8px; border-left: 2px solid var(--accent);