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

mobile: match desktop card palette, add stacked supporter footer

Browse source 
Capability cards now carry the desktop's per-layer colours —
sage / slate / clay / plum — with paper-toned text for contrast.
Icon, num, eyebrow, title, body all flipped to paper with per-
element alpha so the hierarchy still reads on the coloured tile.

Footer reintroduced as a stacked column of three supporter marks:
"Project Bifrost" serif lockup, Fenja AI wordmark, Innovationsfonden
mark. Centered, 26px gap, paper background, 44/56 top/bottom padding.
No "view desktop" link — the ?view=desktop query override still
works for anyone who needs it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 10:26:42 +02:00
parent 21d4b23470
commit 1144095715
2 changed files with 98 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
protected/mobile/index.html
View file

@ -317,6 +317,21 @@
</div>
</section>
<footer class="m-foot" aria-label="Supporters">
<div class="m-foot-mark m-foot-mark--project">
Project <em>Bifrost</em>
</div>
<img class="m-foot-mark m-foot-mark--fenja"
src="/fenja/fenja-wordmark-black.svg"
alt="Fenja AI" />
<div class="m-foot-mark m-foot-mark--innov" aria-label="Innovationsfonden">
<svg class="m-innov-mark" viewBox="0 0 60 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M 22 4 L 55 4 L 38 96 L 5 96 Z" fill="currentColor"/>
</svg>
<span class="m-innov-word">nnovationsfonden</span>
</div>
</footer>
</main>
<script src="/mobile/mobile.js" defer></script>

118
protected/mobile/mobile.css
View file

@ -329,16 +329,22 @@ html, body {
position: relative;
padding: 24px 22px 24px;
margin: 0 0 18px 0;
background: #fffdf6;
border: 1px solid var(--line);
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;
border-radius: 10px;
box-shadow:
0 16px 28px -22px rgba(46, 46, 40, 0.45),
0 4px 10px -6px rgba(46, 46, 40, 0.18);
min-height: 108px;
/* Per-layer backgrounds match the desktop palette: sage, slate,
clay, plum. Text is flipped to paper for contrast. */
background: #7a8c70; /* default = layer 0, overridden below */
color: #fbf6e9;
}
.m-cap:last-child { margin-bottom: 0; }
.m-cap:nth-of-type(1) { background: #7a8c70; } /* sage — The AI */
.m-cap:nth-of-type(2) { background: #7b9399; } /* slate — The Knowledge */
.m-cap:nth-of-type(3) { background: #b07556; } /* clay — The Tools */
.m-cap:nth-of-type(4) { background: #8a7a92; } /* plum — The Agents */
.m-cap-icon {
position: absolute;
top: 14px;
@ -347,29 +353,30 @@ html, body {
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-weight: 600;
font-size: 13.5px;
color: var(--accent);
color: rgba(251, 246, 233, 0.85);
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
/* Keep clear of the icon in the top-right. */
padding-right: 92px;
}
.m-cap-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
color: rgba(251, 246, 233, 0.8);
margin: 0 0 10px 0;
padding-right: 92px;
}
.m-cap-title {
font-family: "Newsreader", Georgia, serif;
@ -377,12 +384,10 @@ html, body {
font-size: 20px;
line-height: 1.22;
letter-spacing: -0.01em;
margin: 0 0 10px 0;
color: var(--ink);
margin: 0 0 12px 0;
color: #fbf6e9;
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;
padding-right: 92px;
}
.m-cap-title b {
font-weight: 700;
@ -391,29 +396,19 @@ html, body {
.m-cap-title em {
font-style: italic;
font-weight: 700;
color: var(--accent);
color: #fff9ea;
}
.m-cap-body {
margin: 0;
padding-right: 0;
font-size: 15.5px;
line-height: 1.55;
color: var(--ink-soft);
color: rgba(251, 246, 233, 0.88);
}
/* 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;
.m-cap-body em {
font-style: italic;
font-weight: 700;
color: #fff9ea;
}
/* ─── Project Bifrost reveal ─────────────────────────────── */
@ -637,3 +632,56 @@ html, body {
transform: rotate(-45deg);
}
.m-confirm-list em { font-style: italic; font-weight: 700; color: var(--accent); }
/* ─── Footer (stacked brand marks) ───────────────────────── */
.m-foot {
padding: 44px 22px 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.m-foot-mark {
line-height: 0;
color: var(--ink);
}
.m-foot-mark--project {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 18px;
line-height: 1;
letter-spacing: -0.005em;
color: var(--ink);
}
.m-foot-mark--project em {
font-style: italic;
font-weight: 700;
color: var(--accent);
}
.m-foot-mark--fenja {
height: 22px;
width: auto;
display: block;
opacity: 0.92;
}
.m-foot-mark--innov {
display: inline-flex;
align-items: center;
gap: 4px;
color: #3c6b6b;
line-height: 1;
}
.m-innov-mark {
width: 9px;
height: 16px;
display: block;
}
.m-innov-word {
font-family: "Manrope", system-ui, sans-serif;
font-weight: 600;
font-size: 14.5px;
letter-spacing: 0.04em;
color: #3c6b6b;
}