Jonathan Hvid
9703d47407
Rework the supporter credits ("Backed by" / "Part of") into a
three-tier lockup — a small uppercase label over an upright Newsreader
serif name, with the parent body / issuing authority in a quieter
serif beneath — so the credits read in the deck's editorial voice
instead of as a foreign sans-serif caption. Applied consistently
across all three views:
- Entrance welcome screen: replaced three separately position:fixed
blocks (with hand-tuned top offsets) with one centred .welcome-credits
lockup; drops the brittle magic-number stacking.
- Timeline hero ("Fenja introduction"): left-aligned .support-credit
stack in place of the old .support / .support-bii lines.
- Mobile hero: matching .m-credit stack replacing .m-support / .m-backer.
Credits now read: Backed by Innofounder (Innovationsfonden); Part of
AI Lab (BioInnovation Institute); Part of The AI Regulatory Sandbox
(Datatilsynet & Digitaliseringsstyrelsen).
Also brings the mobile view to parity with the customer-facing desktop
deck: updated hero copy, platform-question framing, architecture layers,
Wiki deep-dive, deployment cards, and implementation roadmap; removes the
old "Join Project Bifrost" CTA + footer (mobile.js loses the join
handler, keeps the session check).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
912 lines
23 KiB
CSS
912 lines
23 KiB
CSS
/* ─────────────────────────────────────────────────────────────
|
||
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;
|
||
--paper-3: #ece4d1;
|
||
--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%;
|
||
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 ───────────────────────────────────────────── */
|
||
.m-masthead {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 28px 18px 26px;
|
||
background: var(--paper);
|
||
border-bottom: 1px solid var(--line-soft);
|
||
}
|
||
.m-logo,
|
||
.m-logo:link,
|
||
.m-logo:visited,
|
||
.m-logo:hover,
|
||
.m-logo:active {
|
||
display: inline-block;
|
||
line-height: 0;
|
||
text-decoration: none;
|
||
border-bottom: 0;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.m-logo img {
|
||
height: 48px;
|
||
width: auto;
|
||
display: block;
|
||
border: 0;
|
||
}
|
||
|
||
/* ─── Main layout ────────────────────────────────────────── */
|
||
.m-main {
|
||
padding-bottom: 48px;
|
||
}
|
||
/* Default section = generous vertical rhythm. Individual sections
|
||
override this where they need their own breathing. */
|
||
.m-section {
|
||
padding: 56px 22px;
|
||
}
|
||
|
||
/* ─── 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: 44px 22px 48px;
|
||
}
|
||
|
||
/* ─── 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 {
|
||
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-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 10px 0;
|
||
color: var(--ink);
|
||
text-wrap: pretty;
|
||
}
|
||
.m-event-hed em { font-style: italic; font-weight: 700; }
|
||
.m-event-body {
|
||
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: 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: 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: 24px;
|
||
line-height: 1.25;
|
||
margin: 0;
|
||
color: var(--ink);
|
||
}
|
||
.m-transition-eyebrow em { font-style: italic; font-weight: 700; color: var(--accent); }
|
||
|
||
/* ─── Hero ───────────────────────────────────────────────── */
|
||
.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;
|
||
font-weight: 600;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 0 0 20px 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 22px 0;
|
||
text-wrap: pretty;
|
||
}
|
||
.m-hero-title em { font-style: italic; font-weight: 700; color: var(--accent); }
|
||
.m-hero-lede {
|
||
margin: 0 auto 32px;
|
||
font-size: 18px;
|
||
line-height: 1.55;
|
||
color: var(--ink);
|
||
max-width: 44ch;
|
||
}
|
||
/* Backer credits — funder + affiliations, in the deck's editorial
|
||
voice: a small uppercase Manrope label over each entity name set in
|
||
upright Newsreader serif, with the parent body / issuing authority
|
||
in a quieter serif beneath. Mirrors the desktop hero's left-aligned
|
||
.support-credit stack and the entrance page's .welcome-credits. */
|
||
.m-credits {
|
||
margin-top: 24px;
|
||
padding-top: 22px;
|
||
border-top: 1px solid var(--line);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.m-credit {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
.m-credit-label {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
}
|
||
.m-credit-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-size: 19px;
|
||
line-height: 1.2;
|
||
letter-spacing: 0.005em;
|
||
color: var(--ink);
|
||
}
|
||
.m-credit-auth {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: normal;
|
||
font-size: 13.5px;
|
||
line-height: 1.3;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
/* ─── Platform question (framing) ────────────────────────── */
|
||
.m-pq {
|
||
padding: 80px 22px 64px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.m-pq-title {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: 25px;
|
||
line-height: 1.18;
|
||
letter-spacing: -0.012em;
|
||
margin: 0 0 20px 0;
|
||
text-wrap: pretty;
|
||
}
|
||
.m-pq-body {
|
||
margin: 0;
|
||
font-size: 17px;
|
||
line-height: 1.6;
|
||
color: var(--ink-soft);
|
||
}
|
||
.m-pq-body em { font-style: italic; font-weight: 700; color: var(--ink); }
|
||
|
||
/* ─── Architecture ───────────────────────────────────────── */
|
||
.m-arch {
|
||
padding: 72px 22px 80px;
|
||
}
|
||
/* Narrative beats — colored cards, paper text. Palette mirrors the
|
||
desktop layer story (sage, slate, clay, plum), with a dark ink
|
||
"full picture" summary card to close the sequence. */
|
||
.m-arch-beat {
|
||
position: relative;
|
||
padding: 24px 22px;
|
||
margin: 0 0 14px 0;
|
||
border-radius: 10px;
|
||
background: #7a8c70;
|
||
color: #fbf6e9;
|
||
box-shadow:
|
||
0 16px 28px -22px rgba(46, 46, 40, 0.45),
|
||
0 4px 10px -6px rgba(46, 46, 40, 0.18);
|
||
}
|
||
.m-arch-beat:nth-of-type(1) { background: #7a8c70; } /* sage — model */
|
||
.m-arch-beat:nth-of-type(2) { background: #7b9399; } /* slate — knowledge */
|
||
.m-arch-beat:nth-of-type(3) { background: #b07556; } /* clay — tools */
|
||
.m-arch-beat:nth-of-type(4) { background: #8a7a92; } /* plum — agents */
|
||
.m-arch-beat--summary { background: var(--ink); margin-bottom: 0; }
|
||
.m-arch-eyebrow {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: rgba(251, 246, 233, 0.8);
|
||
margin: 0 0 10px 0;
|
||
}
|
||
.m-arch-headline {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: 21px;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.01em;
|
||
margin: 0 0 12px 0;
|
||
color: #fbf6e9;
|
||
text-wrap: pretty;
|
||
}
|
||
.m-arch-headline em { font-style: italic; font-weight: 700; color: #fff9ea; }
|
||
.m-arch-body {
|
||
margin: 0;
|
||
font-size: 15.5px;
|
||
line-height: 1.55;
|
||
color: rgba(251, 246, 233, 0.88);
|
||
}
|
||
.m-arch-body em { font-style: italic; font-weight: 700; color: #fff9ea; }
|
||
|
||
/* Component grid — light cards on paper, grouped under a labeled
|
||
"client-managed" frame. */
|
||
.m-arch-frame {
|
||
margin-top: 32px;
|
||
padding: 16px 14px 18px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: var(--paper-2);
|
||
}
|
||
.m-arch-frame-label {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
text-align: center;
|
||
margin: 0 0 16px 0;
|
||
}
|
||
.m-arch-group { margin: 0 0 18px 0; }
|
||
.m-arch-group:last-child { margin-bottom: 0; }
|
||
.m-arch-group-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.m-arch-group-label {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--ink);
|
||
}
|
||
.m-arch-group-caption {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 13.5px;
|
||
color: var(--ink-soft);
|
||
}
|
||
.m-arch-cards {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
}
|
||
.m-arch-card {
|
||
padding: 12px 12px 13px;
|
||
border-radius: 8px;
|
||
background: #fffdf6;
|
||
border: 1px solid var(--line);
|
||
}
|
||
.m-arch-card-name {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
line-height: 1.25;
|
||
color: var(--ink);
|
||
margin: 0 0 4px 0;
|
||
}
|
||
.m-arch-card-italic {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 13px;
|
||
line-height: 1.3;
|
||
color: var(--ink-soft);
|
||
margin: 0 0 6px 0;
|
||
}
|
||
.m-arch-card-mono {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ─── Project Bifrost reveal ─────────────────────────────── */
|
||
.m-bifrost {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 120px 22px 110px;
|
||
background: linear-gradient(to bottom,
|
||
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;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 0 0 20px 0;
|
||
}
|
||
.m-bifrost-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
margin: 0 0 26px 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);
|
||
max-width: 38ch;
|
||
}
|
||
.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 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: 32px 0;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.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;
|
||
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: 28px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.012em;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.m-stop-title em { font-style: italic; font-weight: 700; color: var(--accent); }
|
||
.m-stop-sub {
|
||
margin: 0 0 14px 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);
|
||
}
|
||
|
||
/* ─── Advisory board — 2-up portrait grid ────────────────── */
|
||
.m-board {
|
||
padding: 80px 22px 72px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.m-board-sub {
|
||
margin: 6px 0 36px 0;
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 17px;
|
||
color: var(--ink-soft);
|
||
}
|
||
.m-board-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32px 18px;
|
||
}
|
||
.m-board-member { margin: 0; }
|
||
.m-board-portrait {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background: #efeadc;
|
||
}
|
||
.m-board-portrait img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.m-bm-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
line-height: 1.18;
|
||
letter-spacing: -0.01em;
|
||
color: var(--ink);
|
||
margin: 12px 0 4px 0;
|
||
}
|
||
.m-bm-title {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-weight: 600;
|
||
font-size: 12.5px;
|
||
line-height: 1.3;
|
||
color: var(--ink);
|
||
margin: 0;
|
||
}
|
||
.m-bm-company {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-weight: 400;
|
||
font-size: 12.5px;
|
||
line-height: 1.3;
|
||
color: var(--ink-dim);
|
||
margin: 2px 0 0 0;
|
||
}
|
||
|
||
/* ─── Wiki deep-dive — scattered → compiler → structured ─── */
|
||
.m-wiki {
|
||
padding: 72px 22px 80px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.m-wiki-zone {
|
||
padding: 22px 20px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line);
|
||
background: #fffdf6;
|
||
}
|
||
/* Top zone reads "unsettled": muted surface, dashed edge. */
|
||
.m-wiki-zone--scatter {
|
||
background: var(--paper-2);
|
||
border-style: dashed;
|
||
border-color: var(--ink-dim);
|
||
}
|
||
/* Compiler is the only element carrying the accent — mirrors the
|
||
desktop's single walnut highlight. */
|
||
.m-wiki-zone--compiler {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
}
|
||
.m-wiki-zone--compiler .m-wiki-eyebrow { color: rgba(255, 249, 234, 0.85); }
|
||
.m-wiki-zone--compiler .m-wiki-name { color: #fff9ea; }
|
||
.m-wiki-zone--compiler .m-wiki-sub { color: rgba(255, 249, 234, 0.92); }
|
||
.m-wiki-eyebrow {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.m-wiki-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: 23px;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.012em;
|
||
color: var(--ink);
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.m-wiki-sub {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
color: var(--ink-soft);
|
||
}
|
||
/* Down-chevron connector between zones. */
|
||
.m-wiki-arrow {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin: 14px auto;
|
||
border-right: 2px solid var(--ink-dim);
|
||
border-bottom: 2px solid var(--ink-dim);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
/* ─── Deployment options ─────────────────────────────────── */
|
||
.m-deploy {
|
||
padding: 72px 22px 80px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.m-deploy-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
.m-deploy-card {
|
||
padding: 22px 20px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line);
|
||
background: #fffdf6;
|
||
}
|
||
.m-deploy-card--dark {
|
||
background: var(--ink);
|
||
border-color: var(--ink);
|
||
}
|
||
.m-deploy-card--dark .m-deploy-name { color: #fbf6e9; }
|
||
.m-deploy-card--dark .m-deploy-name em { color: var(--accent); }
|
||
.m-deploy-card--dark .m-deploy-tier { color: rgba(251, 246, 233, 0.7); }
|
||
.m-deploy-card--dark .m-deploy-body { color: rgba(251, 246, 233, 0.9); }
|
||
.m-deploy-card--dark .m-deploy-includes { color: rgba(251, 246, 233, 0.6); }
|
||
.m-deploy-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.012em;
|
||
color: var(--ink);
|
||
margin: 0 0 6px 0;
|
||
}
|
||
.m-deploy-name em { font-style: italic; font-weight: 700; color: var(--accent); }
|
||
.m-deploy-tier {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
margin: 0 0 12px 0;
|
||
}
|
||
.m-deploy-body {
|
||
margin: 0;
|
||
font-size: 15.5px;
|
||
line-height: 1.55;
|
||
color: var(--ink);
|
||
}
|
||
.m-deploy-includes {
|
||
margin: 12px 0 0 0;
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
color: var(--ink-dim);
|
||
}
|
||
|
||
/* ─── Implementation roadmap ─────────────────────────────── */
|
||
.m-roadmap {
|
||
padding: 72px 22px 88px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.m-rm-card {
|
||
margin: 0 0 12px 0;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line);
|
||
background: #fffdf6;
|
||
overflow: hidden;
|
||
}
|
||
.m-rm-summary {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 18px 44px 18px 20px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
}
|
||
.m-rm-summary::-webkit-details-marker { display: none; }
|
||
/* +/− toggle chevron, top-right of the summary. */
|
||
.m-rm-summary::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 22px;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-right: 2px solid var(--ink-dim);
|
||
border-bottom: 2px solid var(--ink-dim);
|
||
transform: rotate(45deg);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.m-rm-card[open] .m-rm-summary::after {
|
||
transform: rotate(-135deg);
|
||
top: 26px;
|
||
}
|
||
.m-rm-name {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.01em;
|
||
color: var(--ink);
|
||
}
|
||
.m-rm-italic {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 15px;
|
||
color: var(--ink-soft);
|
||
}
|
||
.m-rm-detail {
|
||
padding: 0 20px 20px;
|
||
}
|
||
.m-rm-intro {
|
||
margin: 0 0 16px 0;
|
||
font-size: 15.5px;
|
||
line-height: 1.55;
|
||
color: var(--ink);
|
||
}
|
||
.m-rm-label {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.m-rm-list {
|
||
margin: 0;
|
||
padding: 0 0 0 18px;
|
||
}
|
||
.m-rm-list li {
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
color: var(--ink-soft);
|
||
margin: 0 0 6px 0;
|
||
}
|
||
.m-rm-list li:last-child { margin-bottom: 0; }
|
||
/* Cross-cutting band — neutral surface so it reads as "always on",
|
||
not as a fifth deliverable. */
|
||
.m-rm-band {
|
||
margin-top: 20px;
|
||
padding: 18px 20px;
|
||
border-radius: 10px;
|
||
background: var(--paper-3);
|
||
border: 1px solid var(--line);
|
||
}
|
||
.m-rm-band-name {
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--ink);
|
||
margin: 0 0 6px 0;
|
||
}
|
||
.m-rm-band-italic {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 14.5px;
|
||
line-height: 1.4;
|
||
color: var(--ink-soft);
|
||
margin: 0;
|
||
}
|
||
.m-rm-foot {
|
||
margin: 22px 0 0 0;
|
||
text-align: center;
|
||
font-family: "Manrope", system-ui, sans-serif;
|
||
font-size: 11.5px;
|
||
letter-spacing: 0.04em;
|
||
color: var(--ink-dim);
|
||
}
|