500 lines
11 KiB
CSS
500 lines
11 KiB
CSS
/* 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;
|
||
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);
|
||
}
|