This commit is contained in:
Lumen Stage1
parent
8e71537d57
commit
fcc18ddcc8
96 changed files with 8074 additions and 214 deletions
527
.shots/light-check.html
Normal file
527
.shots/light-check.html
Normal file
|
|
@ -0,0 +1,527 @@
|
|||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>/* Lumen — shell styles
|
||||
Phone-first, high contrast, large touch targets, one-handed, outdoor, night, reduced-motion
|
||||
Trace: IMPLEMENTATION-CONTRACT.md §7, ARCHITECTURE-DESIGN.md:783
|
||||
|
||||
Theme — "SolLunar deck" (copied from https://sollunar.aiolabs.dev, 2026-08-31):
|
||||
- Warm off-white paper (#f6f9f7) with a deep green-black ink (#172621)
|
||||
- Ambient radial washes: mint (#bce6d9) top-right, apricot (#f9dbb8) bottom-left
|
||||
- Serif display type (Georgia) for headings, tracked-uppercase eyebrows
|
||||
- Hairline borders (rgba ink) over translucent surfaces, 1rem rounded cards
|
||||
- Nature palette: pine #1f7a5f, indigo #683ecc, rose #d3224b, clay #bf4622,
|
||||
amber #b8610a — each with a lifted dark-mode counterpart (#75c7a9,
|
||||
#af97f7, #fc88ab, #e47958, #fcc669) and near-black on-accent text
|
||||
- Dark mode: near-black green (#0b1411) with cream ink (#ede9de)
|
||||
- Emergency stays functional and "red": rose #d3224b light / #fc88ab dark
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* SolLunar deck palette — light */
|
||||
--deck-bg: #f6f9f7;
|
||||
--deck-fg: #172621;
|
||||
--deck-fg-muted: #576b63;
|
||||
--deck-surface: rgba(20, 30, 25, 0.04);
|
||||
--deck-surface-2: rgba(20, 30, 25, 0.06);
|
||||
--deck-line: rgba(20, 30, 25, 0.12);
|
||||
--deck-line-2: rgba(20, 30, 25, 0.2);
|
||||
--deck-pine: #1f7a5f;
|
||||
--deck-indigo: #683ecc;
|
||||
--deck-rose: #d3224b;
|
||||
--deck-clay: #bf4622;
|
||||
--deck-amber: #b8610a;
|
||||
--deck-on-accent: #0f1411;
|
||||
|
||||
--bg: var(--deck-bg);
|
||||
--fg: var(--deck-fg);
|
||||
--muted: var(--deck-fg-muted);
|
||||
--accent: var(--deck-pine);
|
||||
--accent-contrast: #f6f9f7;
|
||||
--accent-soft: rgba(31, 122, 95, 0.09);
|
||||
--surface: var(--deck-surface);
|
||||
--border: var(--deck-line);
|
||||
--border-accent: rgba(31, 122, 95, 0.32);
|
||||
--highlight-bg: rgba(184, 97, 10, 0.07);
|
||||
--highlight-border: rgba(184, 97, 10, 0.3);
|
||||
--chip-pink-bg: rgba(211, 34, 75, 0.08);
|
||||
--chip-pink-fg: #b5244a;
|
||||
--chip-green-bg: rgba(31, 122, 95, 0.09);
|
||||
--chip-green-fg: #1f7a5f;
|
||||
--chip-indigo-bg: rgba(104, 62, 204, 0.08);
|
||||
--chip-indigo-fg: #683ecc;
|
||||
--chip-amber-bg: rgba(184, 97, 10, 0.09);
|
||||
--chip-amber-fg: #96500a;
|
||||
--focus: var(--deck-pine);
|
||||
--emergency: #d3224b; /* rose (light) */
|
||||
--emergency-contrast: #ffffff;
|
||||
|
||||
--font-display: Georgia, "Times New Roman", serif;
|
||||
--radius: 1rem;
|
||||
--radius-sm: 0.75rem;
|
||||
--nav-h: 64px;
|
||||
--header-h: 56px;
|
||||
--content-max: 48rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
color: var(--fg);
|
||||
line-height: 1.6;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background:
|
||||
radial-gradient(120% 80% at 80% -10%, rgba(188, 230, 217, 0.7), transparent 60%),
|
||||
radial-gradient(90% 70% at -10% 110%, rgba(249, 219, 184, 0.6), transparent 55%), var(--bg);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Type — SolLunar serif display + tracked eyebrows */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.eyebrow {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.summit-card {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-accent);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.summit-card a {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.summit-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 1.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.summit-card img[role="button"] {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.map-viewer {
|
||||
width: min(96vw, 1100px);
|
||||
height: min(96vh, 900px);
|
||||
padding: 0.75rem;
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.map-viewer::backdrop {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.map-viewer__close {
|
||||
display: block;
|
||||
min-height: 48px;
|
||||
margin-left: auto;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
.map-viewer img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 0.75rem;
|
||||
object-fit: contain;
|
||||
overflow: auto;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.schedule-item + .schedule-item {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.schedule-item h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.schedule-item p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Skip link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.skip-link:focus {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: var(--bg);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid var(--focus);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* App shell */
|
||||
#app {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-h);
|
||||
padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
|
||||
background: color-mix(in srgb, var(--bg) 78%, transparent);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.app-header__brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 40px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
.app-header__brand:hover {
|
||||
background: var(--deck-surface-2);
|
||||
border-color: var(--deck-line-2);
|
||||
}
|
||||
/* On destination pages the brand becomes an explicit back/home affordance. */
|
||||
.app-header__brand--back {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.app-header__brand--back::before {
|
||||
content: "←";
|
||||
font-weight: 800;
|
||||
font-size: 1.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
.app-header__status {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.3125rem 0.625rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
.app-main {
|
||||
flex: 1;
|
||||
max-width: none;
|
||||
padding: 1.5rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left));
|
||||
}
|
||||
.app-main h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 0.875rem;
|
||||
}
|
||||
.app-main p {
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.side-nav__link {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 600;
|
||||
font-size: 0.8125rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.app-main {
|
||||
max-width: var(--content-max);
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-bottom: var(--nav-h);
|
||||
padding-bottom: calc(var(--nav-h) + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Increase tap size on coarse pointers */
|
||||
@media (pointer: coarse) {
|
||||
}
|
||||
|
||||
/* Emergency Ring-0 presentation */
|
||||
.emergency-view section {
|
||||
margin-block: 1.25rem;
|
||||
}
|
||||
.emergency-view h2 {
|
||||
font-size: 1.375rem;
|
||||
margin: 0 0 0.625rem;
|
||||
}
|
||||
.emergency-view h3 {
|
||||
font-size: 1.0625rem;
|
||||
margin: 0.75rem 0 0.25rem;
|
||||
}
|
||||
.emergency-view ul {
|
||||
margin: 0.25rem 0 0;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
.emergency-provenance {
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.emergency-alert {
|
||||
background: var(--emergency);
|
||||
border: 1px solid var(--emergency);
|
||||
border-radius: var(--radius);
|
||||
color: var(--emergency-contrast);
|
||||
padding: 1rem;
|
||||
}
|
||||
.emergency-alert h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.emergency-service p {
|
||||
margin: 0;
|
||||
}
|
||||
.emergency-call {
|
||||
align-items: center;
|
||||
background: var(--emergency-contrast);
|
||||
border-radius: 999px;
|
||||
color: var(--emergency);
|
||||
display: inline-flex;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
justify-content: center;
|
||||
margin-top: 0.75rem;
|
||||
min-height: 48px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.emergency-view > section {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Home launcher — 2×2 grid of centered destination tiles */
|
||||
.home-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60dvh;
|
||||
text-align: center;
|
||||
}
|
||||
.home-view h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
.home-view__subtitle {
|
||||
color: var(--muted);
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
.home-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
width: min(100%, 28rem);
|
||||
}
|
||||
.home-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
padding: 1.25rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 700;
|
||||
font-size: 1.0625rem;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
.home-tile:hover {
|
||||
background: var(--deck-surface-2);
|
||||
border-color: var(--deck-line-2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.home-tile:focus-visible {
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.home-tile--emergency {
|
||||
background: var(--emergency);
|
||||
border-color: var(--emergency);
|
||||
color: var(--emergency-contrast);
|
||||
}
|
||||
.home-tile--emergency:hover {
|
||||
background: var(--emergency);
|
||||
border-color: var(--emergency);
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.home-tile {
|
||||
min-height: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards — translucent surface, hairline border, 1rem radius (SolLunar signature) */
|
||||
.view-placeholder {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
/* Amber status callout card */
|
||||
.status-card {
|
||||
background: var(--highlight-bg);
|
||||
border: 1px solid var(--highlight-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.875rem 1rem;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
/* Status chips — tinted pills */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.chip--pink {
|
||||
background: var(--chip-pink-bg);
|
||||
color: var(--chip-pink-fg);
|
||||
}
|
||||
.chip--green {
|
||||
background: var(--chip-green-bg);
|
||||
color: var(--chip-green-fg);
|
||||
}
|
||||
.chip--blue {
|
||||
background: var(--chip-green-bg);
|
||||
color: var(--chip-green-fg);
|
||||
}
|
||||
.chip--indigo {
|
||||
background: var(--chip-indigo-bg);
|
||||
color: var(--chip-indigo-fg);
|
||||
}
|
||||
.chip--amber {
|
||||
background: var(--chip-amber-bg);
|
||||
color: var(--chip-amber-fg);
|
||||
}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="app"><div id="lumen-shell">
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header class="app-header" role="banner">
|
||||
<a href="/" class="app-header__brand" aria-label="Lumen — home">LUMEN</a>
|
||||
<div class="app-header__status" role="status">Shell</div>
|
||||
</header>
|
||||
<main id="main-content" class="app-main" tabindex="-1">
|
||||
<section class="view" aria-labelledby="home-heading">
|
||||
<h1 id="home-heading">Home</h1>
|
||||
<p class="view-placeholder">Offline-first festival companion — shell is live.</p>
|
||||
</section>
|
||||
</main>
|
||||
<nav class="side-nav" aria-label="Primary navigation">
|
||||
<a class="side-nav__link" aria-current="page" href="/">Home</a>
|
||||
<a class="side-nav__link side-nav__link--emergency" href="/emergency">Emergency</a>
|
||||
<a class="side-nav__link" href="/schedule">Schedule</a>
|
||||
<a class="side-nav__link" href="/map">Map</a>
|
||||
<a class="side-nav__link" href="/festival">Information</a>
|
||||
</nav>
|
||||
</div></div>
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue