joh/customer-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
customer-presentation/protected/mobile/mobile.css
Arlind Ukshini 72590b08bc add mobile view at protected/mobile/ (UA-dispatched) 
Desktop is a GSAP/Lenis/d3 animated experience that doesn't hold up
on phones. Rather than retrofitting media queries across 1200+ lines
of scroll-trigger code, add a completely isolated static mobile tree:

- protected/mobile/index.html — one-page static flow covering the
  intro, 12 timeline events, hero, 4 capability cards, Bifrost
  reveal, 3 participation stops, and Join CTA. All copy duplicated
  from the desktop HTML on purpose — a shared data module would
  re-couple the two trees.
- protected/mobile/mobile.css — paper/ink palette, all m-prefixed,
  zero cascade overlap with the desktop CSS.
- protected/mobile/mobile.js — 60-line client: /auth/me check,
  /api/bifrost-join POST + panel swap, /auth/logout. No GSAP, no
  Lenis, no d3.

Routing (server.js):
- GET /timeline now UA-dispatches via MOBILE_UA_RE. Phone UAs get
  the mobile page; everything else gets the desktop page.
- ?view=mobile and ?view=desktop query overrides take precedence
  over the UA sniff — for bad guesses or previewing the other
  version.
- Gating is unchanged: protected/mobile/ is inside protected/ so
  the existing requireAuth + express.static gate covers it.

Docs:
- CLAUDE.md §routing now lists the UA dispatch as step 4.
- PROJECT.md gets a new "Mobile view" section explaining the
  isolation rules (no shared JS/CSS, content duplicated manually).
- CHECKLIST.md gains section H0 with dispatch curl checks, render
  verification on a phone, and an isolation audit that fails if
  mobile classes leak into the desktop HTML or vice versa.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 10:03:13 +02:00

482 lines
13 KiB
CSS
Raw Blame History

/* ─────────────────────────────────────────────────────────────
protected/mobile/mobile.css — minimal mobile view.
Design intent: the desktop site is an animated editorial
experience; this file is the legible fallback. Zero animations,
zero dependencies beyond /fenja/colors_and_type.css (loaded
first for the font-face declarations). Every class here is
`m-`-prefixed so there is no accidental cascade overlap with
the desktop CSS in protected/index.html.
───────────────────────────────────────────────────────────── */
:root {
--paper: #faf6ee;
--paper-2: #f3efe4;
--ink: #2e2e28;
--ink-soft: #5f5e5e;
--ink-dim: #8a887f;
--line: rgba(46, 46, 40, 0.12);
--line-soft: rgba(46, 46, 40, 0.06);
--crimson: #8a3a2f;
--copper: #6d8c7c;
--ochre: #c29d59;
--terracotta: #b96b58;
--accent: #b96b58;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--paper);
color: var(--ink);
font-family: "Newsreader", Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.55;
-webkit-text-size-adjust: 100%;
}
/* ─── Masthead ───────────────────────────────────────────── */
.m-masthead {
position: sticky;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: var(--paper);
border-bottom: 1px solid var(--line-soft);
}
.m-logo { display: inline-block; line-height: 0; }
.m-logo img { height: 22px; width: auto; display: block; }
.m-logout {
all: unset;
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 6px 10px;
cursor: pointer;
}
.m-logout:active { color: var(--ink); }
/* ─── Main layout ────────────────────────────────────────── */
.m-main {
padding-bottom: 32px;
}
.m-section {
padding: 40px 22px;
}
.m-section + .m-section {
border-top: 1px solid var(--line-soft);
}
/* ─── Shared type ────────────────────────────────────────── */
.m-title {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 22px 0;
text-wrap: pretty;
}
.m-title em { font-style: italic; font-weight: 700; }
.m-section-head {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.012em;
margin: 0 0 18px 0;
text-wrap: pretty;
}
.m-section-head em { font-style: italic; font-weight: 700; }
.m-section-eyebrow {
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-soft);
margin: 0 0 10px 0;
}
.m-body {
margin: 0 0 14px 0;
font-size: 17px;
line-height: 1.6;
color: var(--ink);
}
.m-body em { font-style: italic; font-weight: 700; color: var(--ink); }
/* Crimson bottom paragraph — consistent with the desktop intro */
.m-body--accent,
.m-body--accent em { color: var(--crimson); }
/* ─── Intro ──────────────────────────────────────────────── */
.m-intro { padding-top: 28px; }
/* ─── Timeline events ────────────────────────────────────── */
.m-timeline {
background: var(--paper-2);
}
.m-event {
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.m-event:last-child { border-bottom: none; }
.m-event-meta {
display: flex;
gap: 10px;
align-items: baseline;
margin-bottom: 8px;
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.m-event-kind {
font-weight: 700;
color: var(--ink);
}
.m-event[data-accent="crimson"] .m-event-kind { color: var(--crimson); }
.m-event[data-accent="copper"] .m-event-kind { color: var(--copper); }
.m-event[data-accent="ochre"] .m-event-kind { color: var(--ochre); }
.m-event[data-accent="terracotta"] .m-event-kind { color: var(--terracotta); }
.m-event-date { color: var(--ink-dim); font-weight: 500; }
.m-event-hed {
font-family: "Newsreader", Georgia, serif;
font-weight: 500;
font-size: 20px;
line-height: 1.22;
letter-spacing: -0.01em;
margin: 0 0 8px 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;
line-height: 1.55;
color: var(--ink-soft);
}
.m-event-source {
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-dim);
}
/* ─── Transition strip ───────────────────────────────────── */
.m-transition {
padding-top: 56px;
padding-bottom: 16px;
text-align: center;
}
.m-transition-eyebrow {
font-family: "Newsreader", Georgia, serif;
font-size: 22px;
line-height: 1.25;
margin: 0;
color: var(--ink);
}
.m-transition-eyebrow em { font-style: italic; font-weight: 700; }
/* ─── Hero ───────────────────────────────────────────────── */
.m-hero { padding-top: 24px; padding-bottom: 52px; }
.m-eyebrow {
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 16px 0;
}
.m-hero-title {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 34px;
line-height: 1.08;
letter-spacing: -0.018em;
margin: 0 0 20px 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;
font-size: 18px;
line-height: 1.55;
color: var(--ink);
}
.m-support {
display: flex;
align-items: baseline;
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.m-support-label {
font-family: "Manrope", system-ui, sans-serif;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-dim);
}
.m-support-name {
font-family: "Manrope", system-ui, sans-serif;
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.05em;
color: #3c6b6b;
}
/* ─── Capabilities ───────────────────────────────────────── */
.m-cap {
padding: 22px 20px;
margin: 0 0 18px 0;
background: #fffdf6;
border: 1px solid var(--line);
border-radius: 6px;
}
.m-cap:last-child { margin-bottom: 0; }
.m-cap-num {
display: inline-block;
font-family: "Newsreader", Georgia, serif;
font-weight: 500;
font-size: 14px;
color: var(--accent);
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}
.m-cap-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 10px 0;
}
.m-cap-title {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 21px;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 10px 0;
color: var(--ink);
text-wrap: pretty;
}
.m-cap-title b {
font-weight: 700;
font-style: normal;
}
.m-cap-title em {
font-style: italic;
font-weight: 700;
color: var(--accent);
}
.m-cap-body {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--ink-soft);
}
/* ─── Bifrost reveal ─────────────────────────────────────── */
.m-bifrost {
padding-top: 56px;
padding-bottom: 56px;
text-align: center;
background: linear-gradient(to bottom,
var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%);
}
.m-bifrost-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 18px 0;
}
.m-bifrost-name {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 44px;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 22px 0;
}
.m-bifrost-name em {
font-style: italic;
font-weight: 700;
color: var(--accent);
}
.m-bifrost-sub {
margin: 0 auto;
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 38ch;
}
.m-bifrost-sub em { font-style: italic; font-weight: 700; color: var(--ink); }
/* ─── What Bifrost means ─────────────────────────────────── */
.m-meaning-lede {
margin: 0 0 28px 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;
border-top: 1px solid var(--line);
}
.m-stop:first-of-type { border-top: none; padding-top: 6px; }
.m-stop-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-dim);
margin: 0 0 8px 0;
}
.m-stop-title {
font-family: "Newsreader", Georgia, serif;
font-weight: 400;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.012em;
margin: 0 0 6px 0;
}
.m-stop-title em { font-style: italic; font-weight: 700; color: var(--accent); }
.m-stop-sub {
margin: 0 0 12px 0;
font-family: "Newsreader", Georgia, serif;
font-style: italic;
color: var(--ink-soft);
font-size: 16px;
}
.m-stop-body {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
}
/* ─── Join CTA ───────────────────────────────────────────── */
.m-join {
background: var(--paper-2);
}
.m-join-panel {
text-align: center;
padding: 8px 0;
}
.m-join-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 14px 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;
text-wrap: pretty;
}
.m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); }
.m-join-button {
all: unset;
display: inline-block;
background: var(--ink);
color: var(--paper);
font-family: "Newsreader", Georgia, serif;
font-size: 18px;
letter-spacing: 0.01em;
padding: 14px 26px;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 6px 14px -8px rgba(46,46,40,0.35);
}
.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;
font-family: "Manrope", system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-dim);
}
.m-confirm-list {
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.m-confirm-list li {
position: relative;
padding: 12px 0 12px 28px;
border-top: 1px solid var(--line);
font-size: 16px;
line-height: 1.5;
color: var(--ink);
}
.m-confirm-list li:first-child { border-top: none; }
.m-confirm-list li::before {
content: "";
position: absolute;
left: 0;
top: 19px;
width: 14px;
height: 8px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
.m-confirm-list em { font-style: italic; font-weight: 700; color: var(--accent); }
/* ─── Footer ─────────────────────────────────────────────── */
.m-foot {
padding: 26px 22px 40px;
border-top: 1px solid var(--line);
}
.m-foot-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.m-foot-project {
font-family: "Newsreader", Georgia, serif;
font-size: 16px;
color: var(--ink);
}
.m-foot-project em { font-style: italic; font-weight: 700; color: var(--accent); }
.m-foot-fenja { height: 18px; width: auto; display: block; opacity: 0.85; }
.m-foot-note {
margin: 0;
font-family: "Manrope", system-ui, sans-serif;
font-size: 12px;
color: var(--ink-dim);
}
.m-foot-note a { color: var(--ink-soft); }
Reference in a new issue View git blame Copy permalink