Joel Brock
5e7774795b
Body-copy mailto links ("Chris @ FCI") and the chrome nav link
were rendering as plain text, hard to spot. Added an @layer base
rule that gives every `a[href]` a 1px underline at 2px offset and
the FCI Seed Grant green, with a subtle hover thicken. Tailwind
utilities still win on a per-element basis (the nav link keeps its
`text-ink-soft` color, the brand-image wrapper opts out via
`no-underline`).
200 lines
6.9 KiB
CSS
200 lines
6.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
* Theme — FCI Brand
|
|
*
|
|
* Aligned with the Food Co-op Initiative brand guidelines (12.2022).
|
|
* Primary palette: Eggplant (#801d7f), Spring Pea (#96bc33), Squash
|
|
* (#c9ad2d). Secondary neutrals: FCI Dark Gray (#4b5657), FCI Beige
|
|
* (#D2C9B0), Seed Grant Green (#679038). Type: Open Sans (FCI's free
|
|
* substitute for Museo Sans, per the guidelines).
|
|
*
|
|
* Semantic token names from the previous theme are preserved so existing
|
|
* component class names continue to apply:
|
|
* - leaf-* → Spring Pea / Seed Grant green family
|
|
* - clay-* → Eggplant purple family (brand primary accent)
|
|
* - squash-*→ FCI yellow accent (new)
|
|
* - paper/ink → clean neutrals tuned to brand gray
|
|
* ─────────────────────────────────────────────────────────────────────── */
|
|
|
|
@theme {
|
|
/* Typography
|
|
* Headings: existing display serif (Fraunces) retained for editorial voice.
|
|
* Body: Open Sans — FCI brand's free fallback for Museo Sans. */
|
|
--font-display: var(--font-display), ui-serif, Georgia, "Times New Roman", serif;
|
|
--font-body: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
/* Neutrals — anchored on FCI Dark Gray #4b5657 with FCI Beige #D2C9B0
|
|
* peeking through in tinted surfaces. */
|
|
--color-paper: #ffffff; /* clean white */
|
|
--color-paper-2: #f7f4ec; /* tinted band — FCI beige, very light */
|
|
--color-ink: #2d3536; /* near-black, brand-aligned */
|
|
--color-ink-soft: #4b5657; /* FCI Dark Gray (exact) */
|
|
--color-ink-mute: #7a8384;
|
|
--color-rule: #d7d3c7; /* FCI beige, desaturated */
|
|
--color-rule-soft: #ebe7dc;
|
|
|
|
/* Leaf — Spring Pea #96bc33 + Seed Grant #679038 (FCI brand greens). */
|
|
--color-leaf-50: #f3f8e8;
|
|
--color-leaf-100: #e6f2cd;
|
|
--color-leaf-200: #d0e5a6;
|
|
--color-leaf-300: #b8d97c;
|
|
--color-leaf-400: #a4cf57;
|
|
--color-leaf-500: #96bc33; /* FCI Spring Pea (exact) */
|
|
--color-leaf-600: #7faa2a;
|
|
--color-leaf-700: #679038; /* FCI Seed Grant (exact) */
|
|
--color-leaf-800: #4f7029;
|
|
--color-leaf-900: #344f1a;
|
|
|
|
/* Clay — repurposed as FCI Eggplant #801d7f (brand primary accent). */
|
|
--color-clay-100: #f5e6f4;
|
|
--color-clay-200: #e3c1e1;
|
|
--color-clay-400: #b34db1;
|
|
--color-clay-500: #9f2d9d;
|
|
--color-clay-600: #801d7f; /* FCI Eggplant (exact) */
|
|
--color-clay-700: #6a1869;
|
|
|
|
/* Squash — FCI yellow #c9ad2d. Reserved for warning glyphs and small
|
|
* highlights; not currently consumed by components but available. */
|
|
--color-squash-100: #faf3d0;
|
|
--color-squash-300: #e6d066;
|
|
--color-squash-500: #c9ad2d; /* FCI Squash (exact) */
|
|
--color-squash-700: #9a8623;
|
|
|
|
/* Stone alias — mapped to FCI neutrals for any lingering text-stone-* refs. */
|
|
--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: #a8aeae;
|
|
--color-stone-500: var(--color-ink-mute);
|
|
--color-stone-600: #5e6868;
|
|
--color-stone-700: var(--color-ink-soft);
|
|
--color-stone-800: #353c3d;
|
|
--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);
|
|
}
|
|
|
|
/* Typography defaults. Display serif keeps optical-size tuning (Fraunces);
|
|
* body switches to Open Sans (FCI brand fallback for Museo Sans). */
|
|
.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;
|
|
}
|
|
|
|
/* Anchor defaults. Body links (in copy and chrome) read as interactive
|
|
* affordances: FCI leaf color + a 1px underline with a small offset.
|
|
* Lives in @layer base so Tailwind utility classes (text-*, no-underline)
|
|
* still win on elements that opt out individually. */
|
|
@layer base {
|
|
a[href] {
|
|
color: var(--color-leaf-700);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
|
|
}
|
|
a[href]:hover {
|
|
color: var(--color-leaf-800);
|
|
text-decoration-thickness: 1.5px;
|
|
}
|
|
}
|
|
|
|
/* 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 6px 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%;
|
|
}
|