9103ccaf9d
Future stages now render as preview-only "look ahead" cards instead of being hidden. A user at stage 2 can see headers and contents for stages 3, 4, 5, but those sections are visibly locked and uneditable. Locked-card treatment: - Dashed-rule border, paper-2 fill, no shadow — visually quieter than active cards - "Upcoming" pill in the header with a small lock glyph - Muted stage rank mark (dashed badge, low-opacity icon) - Panel content wrapped in fieldset[disabled] so every form control inside is natively non-interactive, with an opacity tweak for affordance - "A look ahead" banner explaining that fields will become editable when the co-op reaches this stage Section visibleWhen is still consulted on submit, so locked-stage values never get written back to CiviCRM even if data is prefilled. Journey rail: - Vertical rail (md+) in a new left gutter; each card carries an aligned marker. Past stages = filled leaf circle with check; current = filled leaf disc with rank number, leaf-100 halo ring, and a subtle rail-pulse box-shadow animation (motion-safe). A "Now" pill sits beneath the current marker. Future stages = dashed hollow ring with lock glyph. - Connector segments between markers are solid leaf when the next stage is past-or-current, dashed muted when future — so the transition from "traveled" to "ahead" reads at the right place in the journey. - Mobile fallback: a small vertical stem in the gap between adjacent cards, styled the same way (solid vs dashed) so the progression cue still reads on narrow viewports.
186 lines
6.2 KiB
CSS
186 lines
6.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
* Theme — "Field Almanac"
|
|
*
|
|
* Inspiration: 1970s ecological-movement print, agricultural cooperative
|
|
* publications, hand-bound field journals. Warm cream paper, deep
|
|
* botanical green ink, sparing terracotta accent for emphasis.
|
|
*
|
|
* The palette is built in OKLCH for perceptual uniformity. Every neutral
|
|
* is tinted toward the leaf hue (h≈130) so cream and green feel like they
|
|
* came from the same press run.
|
|
* ─────────────────────────────────────────────────────────────────────── */
|
|
|
|
@theme {
|
|
/* Typography */
|
|
--font-display: var(--font-display), ui-serif, Georgia, "Times New Roman", serif;
|
|
--font-body: var(--font-body), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
|
|
/* Custom utility names */
|
|
--color-paper: oklch(97.5% 0.012 95); /* warm cream */
|
|
--color-paper-2: oklch(95.5% 0.018 90); /* deeper cream — section bands */
|
|
--color-ink: oklch(20% 0.02 130); /* near-black, slight green tint */
|
|
--color-ink-soft: oklch(35% 0.018 130);
|
|
--color-ink-mute: oklch(55% 0.014 120);
|
|
--color-rule: oklch(82% 0.025 100); /* hairline rules — like ink on cream */
|
|
--color-rule-soft: oklch(89% 0.02 100);
|
|
|
|
/* Botanical green — primary */
|
|
--color-leaf-50: oklch(97% 0.025 135);
|
|
--color-leaf-100: oklch(93% 0.05 135);
|
|
--color-leaf-200: oklch(87% 0.085 135);
|
|
--color-leaf-300: oklch(78% 0.115 135);
|
|
--color-leaf-400: oklch(68% 0.13 135);
|
|
--color-leaf-500: oklch(57% 0.135 135);
|
|
--color-leaf-600: oklch(47% 0.13 135);
|
|
--color-leaf-700: oklch(38% 0.115 135);
|
|
--color-leaf-800: oklch(30% 0.09 135);
|
|
--color-leaf-900: oklch(22% 0.06 135);
|
|
|
|
/* Terracotta — accent. Used sparingly: current-stage marker, key CTAs. */
|
|
--color-clay-100: oklch(94% 0.04 50);
|
|
--color-clay-200: oklch(86% 0.075 50);
|
|
--color-clay-400: oklch(70% 0.13 45);
|
|
--color-clay-500: oklch(63% 0.15 42);
|
|
--color-clay-600: oklch(54% 0.155 40);
|
|
--color-clay-700: oklch(45% 0.135 38);
|
|
|
|
/* Stone — kept as a familiar alias mapping to our warm neutrals so any
|
|
* earlier `text-stone-*` / `border-stone-*` references stay readable. */
|
|
--color-stone-50: var(--color-paper);
|
|
--color-stone-100: var(--color-paper-2);
|
|
--color-stone-200: var(--color-rule-soft);
|
|
--color-stone-300: var(--color-rule);
|
|
--color-stone-400: oklch(70% 0.018 110);
|
|
--color-stone-500: var(--color-ink-mute);
|
|
--color-stone-600: oklch(48% 0.015 120);
|
|
--color-stone-700: var(--color-ink-soft);
|
|
--color-stone-800: oklch(28% 0.018 130);
|
|
--color-stone-900: var(--color-ink);
|
|
}
|
|
|
|
/* Base — paper texture and ink defaults */
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
font-feature-settings: "kern", "liga", "calt", "ss01";
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-paper);
|
|
color: var(--color-ink);
|
|
/* Subtle paper grain — two diagonal repeating linear gradients combined
|
|
* with a soft radial overlay. No external image. Survives dark mode if
|
|
* we ever add one. */
|
|
background-image:
|
|
radial-gradient(ellipse 90% 60% at 50% 0%, oklch(99% 0.01 95 / 0.7), transparent 60%),
|
|
repeating-linear-gradient(
|
|
105deg,
|
|
oklch(96% 0.02 95 / 0.4) 0,
|
|
oklch(96% 0.02 95 / 0.4) 1px,
|
|
transparent 1px,
|
|
transparent 6px
|
|
),
|
|
repeating-linear-gradient(
|
|
15deg,
|
|
oklch(94% 0.02 95 / 0.25) 0,
|
|
oklch(94% 0.02 95 / 0.25) 1px,
|
|
transparent 1px,
|
|
transparent 9px
|
|
);
|
|
}
|
|
|
|
/* Typography defaults */
|
|
.font-display { font-family: var(--font-display); font-feature-settings: "ss01", "cv01"; }
|
|
.font-body { font-family: var(--font-body); }
|
|
|
|
/* Long-form headings get optical-size tuning for richer letterforms */
|
|
h1.font-display, h2.font-display, h3.font-display {
|
|
font-variation-settings: "opsz" 144, "SOFT" 50;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
/* Forms: shared input rhythm */
|
|
input, select, textarea, button {
|
|
font: inherit;
|
|
}
|
|
|
|
/* A more deliberate focus ring — uses the leaf token */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--color-leaf-500);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Date input chevron styled to match */
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
filter: hue-rotate(70deg);
|
|
}
|
|
|
|
/* Print: lay it out like a real field-journal page when a user hits Cmd+P */
|
|
@media print {
|
|
body { background: white; color: black; }
|
|
body { background-image: none; }
|
|
details { display: block !important; }
|
|
details > div[role="region"] { display: block !important; }
|
|
.no-print { display: none !important; }
|
|
}
|
|
|
|
/* Reduced motion: defer to user preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Journey rail — gentle "you are here" pulse on the current stage marker.
|
|
* Animates the ring shadow only; the marker disc stays at full opacity so
|
|
* the cue reads as a halo rather than a fade. Reduced-motion users get the
|
|
* static state thanks to the global override above. */
|
|
@keyframes rail-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 oklch(72% 0.14 135 / 0.55);
|
|
}
|
|
60% {
|
|
box-shadow: 0 0 0 8px oklch(72% 0.14 135 / 0);
|
|
}
|
|
}
|
|
|
|
/* A small cohort of utility classes — rule lines, rough underlines, etc. */
|
|
.rule-soft {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
var(--color-rule) 12%,
|
|
var(--color-rule) 88%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* Ink-bloom focus — used on text inputs to feel handwritten */
|
|
.input-ink {
|
|
background-image: linear-gradient(
|
|
to top,
|
|
var(--color-leaf-200) 0%,
|
|
var(--color-leaf-200) 1px,
|
|
transparent 1px,
|
|
transparent 100%
|
|
);
|
|
background-size: 0% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 100%;
|
|
transition: background-size 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.input-ink:focus {
|
|
background-size: 100% 100%;
|
|
}
|