joh/customer-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: carousel timeline, hero wordmark, arc + illustrations

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 10:20:29 +02:00
parent 2cfbebf61f
commit 21d4b23470
2 changed files with 403 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

235
protected/mobile/index.html
View file

@ -33,102 +33,129 @@
</p> </p>
</section> </section>
<!-- ─── Vertical timeline ─── --> <!-- ─── Timeline carousel (horizontal scroll-snap) ───
Twelve events become a single swipeable deck; each tile snaps
to the left edge so the user moves through one story at a
time instead of scrolling an endless vertical list. -->
<section class="m-section m-timeline" aria-label="Timeline of events"> <section class="m-section m-timeline" aria-label="Timeline of events">
<h2 class="m-section-head">The last 18 months, in twelve <em>moments.</em></h2> <div class="m-timeline-intro">
<h2 class="m-section-head">The last 18 months, in twelve <em>moments.</em></h2>
<p class="m-swipe-hint" aria-hidden="true"><span>Swipe</span> &rarr;</p>
</div>
<article class="m-event" data-accent="copper"> <div class="m-timeline-track" role="list">
<div class="m-event-meta"><span class="m-event-kind">Editorial</span><span class="m-event-date">September 2024</span></div>
<h3 class="m-event-hed">Three American firms run 70% of Europe&rsquo;s cloud &mdash; and almost all of its <em>AI.</em></h3>
<p class="m-event-body">Mario Draghi&rsquo;s verdict to the European Parliament: only four of the world&rsquo;s top fifty tech companies are European. &ldquo;It is too late,&rdquo; he writes, to challenge American cloud providers. Without radical reform, the EU faces &ldquo;slow agony.&rdquo;</p>
<div class="m-event-source">The Draghi Report &middot; Brussels</div>
</article>
<article class="m-event" data-accent="copper"> <article class="m-event" data-accent="copper" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">December 2024</span></div> <div class="m-event-meta"><span class="m-event-kind">Editorial</span><span class="m-event-date">September 2024</span></div>
<h3 class="m-event-hed">Denmark warns: digital society is now &ldquo;extremely <em>vulnerable.</em>&rdquo;</h3> <h3 class="m-event-hed">Three American firms run 70% of Europe&rsquo;s cloud &mdash; and almost all of its <em>AI.</em></h3>
<p class="m-event-body">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: &ldquo;we need to fence in the tech giants.&rdquo;</p> <p class="m-event-body">Mario Draghi&rsquo;s verdict to the European Parliament: only four of the world&rsquo;s top fifty tech companies are European. &ldquo;It is too late,&rdquo; he writes, to challenge American cloud providers. Without radical reform, the EU faces &ldquo;slow agony.&rdquo;</p>
<div class="m-event-source">Danish Expert Group &middot; Copenhagen</div> <div class="m-event-source">The Draghi Report &middot; Brussels</div>
</article> <div class="m-event-index"><span>01</span> / 12</div>
</article>
<article class="m-event" data-accent="crimson"> <article class="m-event" data-accent="copper" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">December 2024</span></div>
<h3 class="m-event-hed">Trump refuses to rule out military force against <em>Greenland.</em></h3> <h3 class="m-event-hed">Denmark warns: digital society is now &ldquo;extremely <em>vulnerable.</em>&rdquo;</h3>
<p class="m-event-body">Two weeks before inauguration, the president-elect threatens &ldquo;very high tariffs&rdquo; on Denmark. The shock in Copenhagen is total.</p> <p class="m-event-body">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: &ldquo;we need to fence in the tech giants.&rdquo;</p>
<div class="m-event-source">Mar-a-Lago &middot; Press Conference</div> <div class="m-event-source">Danish Expert Group &middot; Copenhagen</div>
</article> <div class="m-event-index"><span>02</span> / 12</div>
</article>
<article class="m-event" data-accent="crimson"> <article class="m-event" data-accent="crimson" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">May 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2025</span></div>
<h3 class="m-event-hed">Microsoft cuts off the ICC chief prosecutor&rsquo;s <em>email.</em></h3> <h3 class="m-event-hed">Trump refuses to rule out military force against <em>Greenland.</em></h3>
<p class="m-event-body">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 &ldquo;kill switch&rdquo; stops being theoretical.</p> <p class="m-event-body">Two weeks before inauguration, the president-elect threatens &ldquo;very high tariffs&rdquo; on Denmark. The shock in Copenhagen is total.</p>
<div class="m-event-source">Associated Press &middot; The Hague</div> <div class="m-event-source">Mar-a-Lago &middot; Press Conference</div>
</article> <div class="m-event-index"><span>03</span> / 12</div>
</article>
<article class="m-event" data-accent="copper"> <article class="m-event" data-accent="crimson" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">June 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">May 2025</span></div>
<h3 class="m-event-hed">Microsoft admits under oath: it cannot guarantee European <em>sovereignty.</em></h3> <h3 class="m-event-hed">Microsoft cuts off the ICC chief prosecutor&rsquo;s <em>email.</em></h3>
<p class="m-event-body">Even data on European soil, with European staff, encrypted with European keys &mdash; US authorities can compel disclosure under the CLOUD Act. The legal fiction collapses.</p> <p class="m-event-body">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 &ldquo;kill switch&rdquo; stops being theoretical.</p>
<div class="m-event-source">French Senate Hearing &middot; Paris</div> <div class="m-event-source">Associated Press &middot; The Hague</div>
</article> <div class="m-event-index"><span>04</span> / 12</div>
</article>
<article class="m-event" data-accent="ochre"> <article class="m-event" data-accent="copper" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">June 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">June 2025</span></div>
<h3 class="m-event-hed">Copenhagen&rsquo;s Microsoft bill jumps <em>72% in five years.</em></h3> <h3 class="m-event-hed">Microsoft admits under oath: it cannot guarantee European <em>sovereignty.</em></h3>
<p class="m-event-body">From 313 to 538 million Danish kroner. Copenhagen and Aarhus announce they will leave Microsoft entirely. The minister of emergency tells companies: &ldquo;create exit plans for cloud services.&rdquo;</p> <p class="m-event-body">Even data on European soil, with European staff, encrypted with European keys &mdash; US authorities can compel disclosure under the CLOUD Act. The legal fiction collapses.</p>
<div class="m-event-source">Copenhagen Municipality &middot; Finance Report</div> <div class="m-event-source">French Senate Hearing &middot; Paris</div>
</article> <div class="m-event-index"><span>05</span> / 12</div>
</article>
<article class="m-event" data-accent="copper"> <article class="m-event" data-accent="ochre" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Summer 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">June 2025</span></div>
<h3 class="m-event-hed">A Danish minister tells industry: prepare your exit plans for <em>cloud services.</em></h3> <h3 class="m-event-hed">Copenhagen&rsquo;s Microsoft bill jumps <em>72% in five years.</em></h3>
<p class="m-event-body">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.</p> <p class="m-event-body">From 313 to 538 million Danish kroner. Copenhagen and Aarhus announce they will leave Microsoft entirely. The minister of emergency tells companies: &ldquo;create exit plans for cloud services.&rdquo;</p>
<div class="m-event-source">Danish Ministry of Digital Affairs</div> <div class="m-event-source">Copenhagen Municipality &middot; Finance Report</div>
</article> <div class="m-event-index"><span>06</span> / 12</div>
</article>
<article class="m-event" data-accent="crimson"> <article class="m-event" data-accent="copper" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">August 2025</span></div> <div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Summer 2025</span></div>
<h3 class="m-event-hed">Trump threatens tariffs against any country with digital <em>regulations.</em></h3> <h3 class="m-event-hed">A Danish minister tells industry: prepare your exit plans for <em>cloud services.</em></h3>
<p class="m-event-body">&ldquo;American technology is not the world&rsquo;s piggy bank.&rdquo; The DSA, the DMA, the AI Act &mdash; all reframed as discriminatory trade barriers. Chip export restrictions are added to the list of consequences.</p> <p class="m-event-body">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.</p>
<div class="m-event-source">Truth Social &middot; Washington</div> <div class="m-event-source">Danish Ministry of Digital Affairs</div>
</article> <div class="m-event-index"><span>07</span> / 12</div>
</article>
<article class="m-event" data-accent="crimson"> <article class="m-event" data-accent="crimson" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div> <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">August 2025</span></div>
<h3 class="m-event-hed">Trump imposes tariffs on Denmark and seven <em>European nations.</em></h3> <h3 class="m-event-hed">Trump threatens tariffs against any country with digital <em>regulations.</em></h3>
<p class="m-event-body">10% in February. 25% from June &mdash; until Denmark cedes Greenland. Denmark, Norway, Sweden, Finland, France, Germany, Netherlands, UK. The post-war alliance, weaponised.</p> <p class="m-event-body">&ldquo;American technology is not the world&rsquo;s piggy bank.&rdquo; The DSA, the DMA, the AI Act &mdash; all reframed as discriminatory trade barriers. Chip export restrictions are added to the list of consequences.</p>
<div class="m-event-source">Presidential Executive Order</div> <div class="m-event-source">Truth Social &middot; Washington</div>
</article> <div class="m-event-index"><span>08</span> / 12</div>
</article>
<article class="m-event" data-accent="crimson"> <article class="m-event" data-accent="crimson" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div> <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div>
<h3 class="m-event-hed">Denmark names the United States as a national security <em>threat.</em></h3> <h3 class="m-event-hed">Trump imposes tariffs on Denmark and seven <em>European nations.</em></h3>
<p class="m-event-body">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: &ldquo;You are the threat. Not them.&rdquo;</p> <p class="m-event-body">10% in February. 25% from June &mdash; until Denmark cedes Greenland. Denmark, Norway, Sweden, Finland, France, Germany, Netherlands, UK. The post-war alliance, weaponised.</p>
<div class="m-event-source">Danish Defence Intelligence &middot; FE</div> <div class="m-event-source">Presidential Executive Order</div>
</article> <div class="m-event-index"><span>09</span> / 12</div>
</article>
<article class="m-event" data-accent="terracotta"> <article class="m-event" data-accent="crimson" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Product</span><span class="m-event-date">February 2026</span></div> <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div>
<h3 class="m-event-hed">The court that prosecutes war crimes can no longer use American <em>software.</em></h3> <h3 class="m-event-hed">Denmark names the United States as a national security <em>threat.</em></h3>
<p class="m-event-body">The ICC migrates to OpenDesk &mdash; 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.</p> <p class="m-event-body">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: &ldquo;You are the threat. Not them.&rdquo;</p>
<div class="m-event-source">Handelsblatt &middot; The Hague</div> <div class="m-event-source">Danish Defence Intelligence &middot; FE</div>
</article> <div class="m-event-index"><span>10</span> / 12</div>
</article>
<article class="m-event" data-accent="copper"> <article class="m-event" data-accent="terracotta" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Q1 2026</span></div> <div class="m-event-meta"><span class="m-event-kind">Product</span><span class="m-event-date">February 2026</span></div>
<h3 class="m-event-hed">Europe drafts a sovereignty law as US firms still hold 70% of the <em>cloud.</em></h3> <h3 class="m-event-hed">The court that prosecutes war crimes can no longer use American <em>software.</em></h3>
<p class="m-event-body">Europe writes rules for infrastructure it does not own. US hyperscalers add &euro;10 billion of European capacity every quarter &mdash; more than Gaia-X spent in a decade. The servers stay in Texas. The AI models stay in California. The law changes neither.</p> <p class="m-event-body">The ICC migrates to OpenDesk &mdash; 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.</p>
<div class="m-event-source">European Commission &middot; Brussels</div> <div class="m-event-source">Handelsblatt &middot; The Hague</div>
</article> <div class="m-event-index"><span>11</span> / 12</div>
</article>
<article class="m-event" data-accent="copper" role="listitem">
<div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Q1 2026</span></div>
<h3 class="m-event-hed">Europe drafts a sovereignty law as US firms still hold 70% of the <em>cloud.</em></h3>
<p class="m-event-body">Europe writes rules for infrastructure it does not own. US hyperscalers add &euro;10 billion of European capacity every quarter &mdash; more than Gaia-X spent in a decade. The servers stay in Texas. The AI models stay in California. The law changes neither.</p>
<div class="m-event-source">European Commission &middot; Brussels</div>
<div class="m-event-index"><span>12</span> / 12</div>
</article>
</div>
</section> </section>
<!-- ─── Transition ─── --> <!-- ─── Transition ─── -->
<section class="m-section m-transition"> <section class="m-section m-transition">
<span class="m-rule-top" aria-hidden="true"></span>
<p class="m-transition-eyebrow">How Fenja AI <em>addresses</em> this</p> <p class="m-transition-eyebrow">How Fenja AI <em>addresses</em> this</p>
<span class="m-rule-bottom" aria-hidden="true"></span>
</section> </section>
<!-- ─── Hero ─── --> <!-- ─── Hero ─── -->
<section class="m-section m-hero"> <section class="m-section m-hero">
<div class="m-hero-mark" aria-hidden="true">
<img src="/fenja/fenja-wordmark-black.svg" alt="" />
</div>
<p class="m-eyebrow">For regulated environments</p> <p class="m-eyebrow">For regulated environments</p>
<h2 class="m-hero-title"> <h2 class="m-hero-title">
Fenja AI &mdash; Secure &amp; <em>Sovereign,</em> hosted where it <em>belongs.</em> Fenja AI &mdash; Secure &amp; <em>Sovereign,</em> hosted where it <em>belongs.</em>
@ -148,6 +175,7 @@
<h2 id="m-caps-head" class="m-section-head">The Fenja AI platform in <em>four steps.</em></h2> <h2 id="m-caps-head" class="m-section-head">The Fenja AI platform in <em>four steps.</em></h2>
<article class="m-cap"> <article class="m-cap">
<img class="m-cap-icon" src="/fenja/illustrations/ai.png" alt="" aria-hidden="true" />
<span class="m-cap-num">1 / 4</span> <span class="m-cap-num">1 / 4</span>
<p class="m-cap-eyebrow">The AI</p> <p class="m-cap-eyebrow">The AI</p>
<h3 class="m-cap-title">An <b>open-source</b> model, running on your <em>own hardware.</em></h3> <h3 class="m-cap-title">An <b>open-source</b> model, running on your <em>own hardware.</em></h3>
@ -155,6 +183,7 @@
</article> </article>
<article class="m-cap"> <article class="m-cap">
<img class="m-cap-icon" src="/fenja/illustrations/lightbulb%20-%20knowledge.png" alt="" aria-hidden="true" />
<span class="m-cap-num">2 / 4</span> <span class="m-cap-num">2 / 4</span>
<p class="m-cap-eyebrow">The Knowledge</p> <p class="m-cap-eyebrow">The Knowledge</p>
<h3 class="m-cap-title">The business context that makes <em>AI understand your world.</em></h3> <h3 class="m-cap-title">The business context that makes <em>AI understand your world.</em></h3>
@ -162,6 +191,7 @@
</article> </article>
<article class="m-cap"> <article class="m-cap">
<img class="m-cap-icon" src="/fenja/illustrations/blocs%20tools.png" alt="" aria-hidden="true" />
<span class="m-cap-num">3 / 4</span> <span class="m-cap-num">3 / 4</span>
<p class="m-cap-eyebrow">The Tools</p> <p class="m-cap-eyebrow">The Tools</p>
<h3 class="m-cap-title">How AI <b>acts</b> &mdash; not just what it <em>knows.</em></h3> <h3 class="m-cap-title">How AI <b>acts</b> &mdash; not just what it <em>knows.</em></h3>
@ -169,6 +199,7 @@
</article> </article>
<article class="m-cap"> <article class="m-cap">
<img class="m-cap-icon" src="/fenja/illustrations/agents.png" alt="" aria-hidden="true" />
<span class="m-cap-num">4 / 4</span> <span class="m-cap-num">4 / 4</span>
<p class="m-cap-eyebrow">The Agents</p> <p class="m-cap-eyebrow">The Agents</p>
<h3 class="m-cap-title">Specialized AI agents <b>working together</b> around <em>real tasks.</em></h3> <h3 class="m-cap-title">Specialized AI agents <b>working together</b> around <em>real tasks.</em></h3>
@ -176,13 +207,54 @@
</article> </article>
</section> </section>
<!-- ─── Project Bifrost reveal ─── --> <!-- ─── Project Bifrost reveal ───
The aurora arc from the desktop hero, held still as a cropped
backdrop. Sized wider than the viewport so the arc runs off
both edges rather than shrinking into a thin ribbon. Drawn
once, static — no GSAP, no scrub. -->
<section class="m-section m-bifrost"> <section class="m-section m-bifrost">
<p class="m-bifrost-eyebrow">Introducing</p> <div class="m-bifrost-arc" aria-hidden="true">
<h2 class="m-bifrost-name">Project <em>Bifrost</em></h2> <svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<p class="m-bifrost-sub"> <defs>
The bridge <em>between</em> an industrial-grade AI platform and the realities of regulated organisations &mdash; built <em>with</em> them, not just for them. <linearGradient id="mAurora" x1="0" x2="1" y1="0" y2="0">
</p> <stop offset="0%" stop-color="#b48755" stop-opacity="0"/>
<stop offset="15%" stop-color="#b48755" stop-opacity="0.95"/>
<stop offset="40%" stop-color="#a4553b" stop-opacity="0.95"/>
<stop offset="65%" stop-color="#5c7b8e" stop-opacity="0.95"/>
<stop offset="85%" stop-color="#6e5a86" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#6e5a86" stop-opacity="0"/>
</linearGradient>
<linearGradient id="mAuroraSoft" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#b48755" stop-opacity="0"/>
<stop offset="15%" stop-color="#b48755" stop-opacity="0.28"/>
<stop offset="40%" stop-color="#a4553b" stop-opacity="0.28"/>
<stop offset="65%" stop-color="#5c7b8e" stop-opacity="0.28"/>
<stop offset="85%" stop-color="#6e5a86" stop-opacity="0.28"/>
<stop offset="100%" stop-color="#6e5a86" stop-opacity="0"/>
</linearGradient>
<filter id="mSoftGlow" x="-20%" y="-50%" width="140%" height="200%">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
<path d="M 60 420 Q 700 -40 1340 420"
fill="none" stroke="url(#mAuroraSoft)"
stroke-width="28" stroke-linecap="round"
filter="url(#mSoftGlow)"/>
<path d="M 60 420 Q 700 -40 1340 420"
fill="none" stroke="url(#mAurora)"
stroke-width="3" stroke-linecap="round"/>
<path d="M 80 420 Q 700 -20 1320 420"
fill="none" stroke="url(#mAurora)"
stroke-width="1" stroke-linecap="round" opacity="0.6"/>
</svg>
</div>
<div class="m-bifrost-content">
<p class="m-bifrost-eyebrow">Introducing</p>
<h2 class="m-bifrost-name">Project <em>Bifrost</em></h2>
<p class="m-bifrost-sub">
The bridge <em>between</em> an industrial-grade AI platform and the realities of regulated organisations &mdash; built <em>with</em> them, not just for them.
</p>
</div>
</section> </section>
<!-- ─── What Project Bifrost means ─── --> <!-- ─── What Project Bifrost means ─── -->
@ -196,6 +268,7 @@
</p> </p>
<article class="m-stop"> <article class="m-stop">
<img class="m-stop-illust" src="/fenja/illustrations/community.svg" alt="" aria-hidden="true" />
<p class="m-stop-eyebrow">Be part of a</p> <p class="m-stop-eyebrow">Be part of a</p>
<h3 class="m-stop-title"><em>Community</em></h3> <h3 class="m-stop-title"><em>Community</em></h3>
<p class="m-stop-sub">Shape the future together</p> <p class="m-stop-sub">Shape the future together</p>
@ -203,6 +276,7 @@
</article> </article>
<article class="m-stop"> <article class="m-stop">
<img class="m-stop-illust" src="/fenja/illustrations/council.svg" alt="" aria-hidden="true" />
<p class="m-stop-eyebrow">Be part of an</p> <p class="m-stop-eyebrow">Be part of an</p>
<h3 class="m-stop-title"><em>Advisory Council</em></h3> <h3 class="m-stop-title"><em>Advisory Council</em></h3>
<p class="m-stop-sub">Turn insight into influence</p> <p class="m-stop-sub">Turn insight into influence</p>
@ -210,6 +284,7 @@
</article> </article>
<article class="m-stop"> <article class="m-stop">
<img class="m-stop-illust" src="/fenja/illustrations/pilot.svg" alt="" aria-hidden="true" />
<p class="m-stop-eyebrow">Be part of</p> <p class="m-stop-eyebrow">Be part of</p>
<h3 class="m-stop-title"><em>Pilot Projects</em></h3> <h3 class="m-stop-title"><em>Pilot Projects</em></h3>
<p class="m-stop-sub">Access the platform before others</p> <p class="m-stop-sub">Access the platform before others</p>

313
protected/mobile/mobile.css
View file

@ -12,6 +12,7 @@
:root { :root {
--paper: #faf6ee; --paper: #faf6ee;
--paper-2: #f3efe4; --paper-2: #f3efe4;
--paper-3: #ece4d1;
--ink: #2e2e28; --ink: #2e2e28;
--ink-soft: #5f5e5e; --ink-soft: #5f5e5e;
--ink-dim: #8a887f; --ink-dim: #8a887f;
@ -35,6 +36,9 @@ html, body {
font-size: 17px; font-size: 17px;
line-height: 1.55; line-height: 1.55;
-webkit-text-size-adjust: 100%; -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 ───────────────────────────────────────────── */ /* ─── Masthead ───────────────────────────────────────────── */
@ -66,13 +70,12 @@ html, body {
/* ─── Main layout ────────────────────────────────────────── */ /* ─── Main layout ────────────────────────────────────────── */
.m-main { .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 { .m-section {
padding: 40px 22px; padding: 56px 22px;
}
.m-section + .m-section {
border-top: 1px solid var(--line-soft);
} }
/* ─── Shared type ────────────────────────────────────────── */ /* ─── Shared type ────────────────────────────────────────── */
@ -121,17 +124,57 @@ html, body {
.m-body--accent em { color: var(--crimson); } .m-body--accent em { color: var(--crimson); }
/* ─── Intro ──────────────────────────────────────────────── */ /* ─── Intro ──────────────────────────────────────────────── */
.m-intro { padding-top: 28px; } .m-intro {
padding: 44px 22px 48px;
}
/* ─── Timeline events ────────────────────────────────────── */ /* ─── Timeline carousel ──────────────────────────────────── */
.m-timeline { .m-timeline {
background: var(--paper-2); 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 { .m-event {
padding: 20px 0; flex: 0 0 84vw;
border-bottom: 1px solid var(--line); 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 { .m-event-meta {
display: flex; display: flex;
gap: 10px; gap: 10px;
@ -157,42 +200,79 @@ html, body {
font-size: 20px; font-size: 20px;
line-height: 1.22; line-height: 1.22;
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin: 0 0 8px 0; margin: 0 0 10px 0;
color: var(--ink); color: var(--ink);
text-wrap: pretty; text-wrap: pretty;
} }
.m-event-hed em { font-style: italic; font-weight: 700; } .m-event-hed em { font-style: italic; font-weight: 700; }
.m-event-body { .m-event-body {
margin: 0 0 10px 0; margin: 0 0 12px 0;
font-size: 16px; font-size: 15.5px;
line-height: 1.55; line-height: 1.55;
color: var(--ink-soft); color: var(--ink-soft);
} }
.m-event-source { .m-event-source {
font-family: "Manrope", system-ui, -apple-system, sans-serif; font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 11px; font-size: 10.5px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); 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 ───────────────────────────────────── */ /* ─── Transition strip ───────────────────────────────────── */
.m-transition { .m-transition {
padding-top: 56px; padding: 88px 22px;
padding-bottom: 16px;
text-align: center; 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 { .m-transition-eyebrow {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-size: 22px; font-size: 24px;
line-height: 1.25; line-height: 1.25;
margin: 0; margin: 0;
color: var(--ink); 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 ───────────────────────────────────────────────── */ /* ─── 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 { .m-eyebrow {
font-family: "Manrope", system-ui, -apple-system, sans-serif; font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 11px; font-size: 11px;
@ -200,7 +280,7 @@ html, body {
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent); color: var(--accent);
margin: 0 0 16px 0; margin: 0 0 20px 0;
} }
.m-hero-title { .m-hero-title {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
@ -208,21 +288,22 @@ html, body {
font-size: 34px; font-size: 34px;
line-height: 1.08; line-height: 1.08;
letter-spacing: -0.018em; letter-spacing: -0.018em;
margin: 0 0 20px 0; margin: 0 0 22px 0;
text-wrap: pretty; text-wrap: pretty;
} }
.m-hero-title em { font-style: italic; font-weight: 700; color: var(--accent); } .m-hero-title em { font-style: italic; font-weight: 700; color: var(--accent); }
.m-hero-lede { .m-hero-lede {
margin: 0 0 28px 0; margin: 0 auto 32px;
font-size: 18px; font-size: 18px;
line-height: 1.55; line-height: 1.55;
color: var(--ink); color: var(--ink);
max-width: 44ch;
} }
.m-support { .m-support {
display: flex; display: inline-flex;
align-items: baseline; align-items: baseline;
gap: 8px; gap: 8px;
padding-top: 16px; padding: 14px 18px 0;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
} }
.m-support-label { .m-support-label {
@ -241,22 +322,45 @@ html, body {
} }
/* ─── Capabilities ───────────────────────────────────────── */ /* ─── Capabilities ───────────────────────────────────────── */
.m-caps {
padding: 88px 22px 88px;
}
.m-cap { .m-cap {
padding: 22px 20px; position: relative;
padding: 24px 22px 24px;
margin: 0 0 18px 0; margin: 0 0 18px 0;
background: #fffdf6; background: #fffdf6;
border: 1px solid var(--line); 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: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 { .m-cap-num {
display: inline-block; display: inline-block;
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 13.5px;
color: var(--accent); color: var(--accent);
margin-bottom: 10px; margin-bottom: 10px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
} }
.m-cap-eyebrow { .m-cap-eyebrow {
font-family: "Manrope", system-ui, sans-serif; font-family: "Manrope", system-ui, sans-serif;
@ -270,12 +374,15 @@ html, body {
.m-cap-title { .m-cap-title {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-weight: 400; font-weight: 400;
font-size: 21px; font-size: 20px;
line-height: 1.2; line-height: 1.22;
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: var(--ink); color: var(--ink);
text-wrap: pretty; 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 { .m-cap-title b {
font-weight: 700; font-weight: 700;
@ -288,18 +395,58 @@ html, body {
} }
.m-cap-body { .m-cap-body {
margin: 0; margin: 0;
font-size: 16px; padding-right: 0;
font-size: 15.5px;
line-height: 1.55; line-height: 1.55;
color: var(--ink-soft); 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 { .m-bifrost {
padding-top: 56px; position: relative;
padding-bottom: 56px; overflow: hidden;
text-align: center; padding: 120px 22px 110px;
background: linear-gradient(to bottom, 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 { .m-bifrost-eyebrow {
font-family: "Manrope", system-ui, sans-serif; font-family: "Manrope", system-ui, sans-serif;
@ -308,15 +455,15 @@ html, body {
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent); color: var(--accent);
margin: 0 0 18px 0; margin: 0 0 20px 0;
} }
.m-bifrost-name { .m-bifrost-name {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-weight: 400; font-weight: 400;
font-size: 44px; font-size: 48px;
line-height: 1.05; line-height: 1.05;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin: 0 0 22px 0; margin: 0 0 26px 0;
} }
.m-bifrost-name em { .m-bifrost-name em {
font-style: italic; font-style: italic;
@ -327,24 +474,36 @@ html, body {
margin: 0 auto; margin: 0 auto;
font-size: 17px; font-size: 17px;
line-height: 1.55; line-height: 1.55;
color: var(--ink-soft); color: var(--ink);
max-width: 38ch; 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 ─────────────────────────────────── */ /* ─── What Bifrost means ─────────────────────────────────── */
.m-meaning {
padding: 80px 22px 72px;
}
.m-meaning-lede { .m-meaning-lede {
margin: 0 0 28px 0; margin: 0 0 40px 0;
font-size: 17px; font-size: 17px;
line-height: 1.55; line-height: 1.55;
color: var(--ink-soft); color: var(--ink-soft);
} }
.m-meaning-lede em { font-style: italic; font-weight: 700; color: var(--ink); } .m-meaning-lede em { font-style: italic; font-weight: 700; color: var(--ink); }
.m-stop { .m-stop {
padding: 22px 0; padding: 32px 0;
border-top: 1px solid var(--line); 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 { .m-stop-eyebrow {
font-family: "Manrope", system-ui, sans-serif; font-family: "Manrope", system-ui, sans-serif;
font-size: 10.5px; font-size: 10.5px;
@ -357,14 +516,14 @@ html, body {
.m-stop-title { .m-stop-title {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-weight: 400; font-weight: 400;
font-size: 26px; font-size: 28px;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.012em; 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-title em { font-style: italic; font-weight: 700; color: var(--accent); }
.m-stop-sub { .m-stop-sub {
margin: 0 0 12px 0; margin: 0 0 14px 0;
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-style: italic; font-style: italic;
color: var(--ink-soft); color: var(--ink-soft);
@ -377,30 +536,48 @@ html, body {
color: var(--ink); color: var(--ink);
} }
/* ─── Join CTA ───────────────────────────────────────────── */ /* ─── Join CTA — the most emphatic section on the page ───── */
.m-join { .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 { .m-join-panel {
text-align: center; 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 { .m-join-eyebrow {
font-family: "Manrope", system-ui, sans-serif; font-family: "Manrope", system-ui, sans-serif;
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent); color: var(--accent);
margin: 0 0 14px 0; margin: 0 0 16px 0;
} }
.m-join-headline { .m-join-headline {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 30px;
line-height: 1.12; line-height: 1.1;
letter-spacing: -0.012em; letter-spacing: -0.014em;
margin: 0 0 24px 0; margin: 0 0 28px 0;
text-wrap: pretty; text-wrap: pretty;
} }
.m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); } .m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); }
@ -410,17 +587,23 @@ html, body {
background: var(--ink); background: var(--ink);
color: var(--paper); color: var(--paper);
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-size: 18px; font-size: 20px;
font-weight: 500;
letter-spacing: 0.01em; letter-spacing: 0.01em;
padding: 14px 26px; padding: 18px 34px;
border-radius: 4px; border-radius: 6px;
cursor: pointer; 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-button:disabled { opacity: 0.55; cursor: progress; }
.m-join-subtext { .m-join-subtext {
margin: 20px 0 0 0; margin: 24px 0 0 0;
font-family: "Manrope", system-ui, sans-serif; font-family: "Manrope", system-ui, sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@ -435,7 +618,7 @@ html, body {
} }
.m-confirm-list li { .m-confirm-list li {
position: relative; position: relative;
padding: 12px 0 12px 28px; padding: 14px 0 14px 30px;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
@ -446,7 +629,7 @@ html, body {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 19px; top: 22px;
width: 14px; width: 14px;
height: 8px; height: 8px;
border-left: 2px solid var(--accent); border-left: 2px solid var(--accent);