/* ============================================================ Little Bend Flower Farm — Design Tokens Source of truth for color, type, spacing, motion. Every page imports this first. ============================================================ */ :root { /* ── Color ────────────────────────────────────────────── */ /* Paper — the cream base. All backgrounds derive from here. */ --paper: #F4EFE2; /* cream, a touch yellower */ --paper-2: #EAE3D0; /* slightly deeper band / secondary surface */ /* Ink — near-black text, primary borders */ --ink: #1C1A15; --ink-2: #3A352B; /* softer body copy color */ /* Primary accent — deep warm ink. Named `--brick` for history only. The original rose-red read as too bold on the hero / feature card and the palette has been simplified to ink + marigold. All rules that previously used brick now resolve to this deep charcoal. */ --brick: #2A221C; --brick-d:#1C1A15; /* same as ink — used for hover states, link accents */ /* Warm tertiaries — marigold is the one warm accent. `--olive` is kept defined for design-guide reference but repointed to marigold so any lingering home-page use stays on-palette. */ --marigold: #D4944A; /* the one warm accent — badge circles, CTA highlights */ --olive: #D4944A; /* retired green; mapped to marigold */ --moss: #8A966A; /* softer fieldy green, reserve for illustrative use */ --taupe: #8A7A64; /* muted caption text, mono labels */ --sand: #D9CCAA; /* signup strip background, warm band */ /* Structural */ --line: rgba(28, 26, 21, .18); /* solid dividers */ --hair: rgba(28, 26, 21, .42); /* dashed rules, subtle text */ /* ── Layout ───────────────────────────────────────────── */ --maxw: 1120px; --gutter: clamp(22px, 4vw, 40px); /* ── Type family stack ────────────────────────────────── */ /* Vollkorn — display / heading serif. Warm transitional serif with real weights (400–700) and a real italic cut. Used on every h1–h6 and display headline. */ --serif: 'Vollkorn', Georgia, serif; /* DM Sans — body copy. Neutral geometric sans that pairs cleanly with Vollkorn's editorial serif. Weights 400/500/600, real italic. */ --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Handwritten accent — retired site-wide in favor of italic body serif. Caveat is now only used on polaroid figcaptions (hard-coded there). Keeping this token so `.hand` / `.script` / component rules that referenced it still cascade to the italic serif fallback. */ --hand: 'Source Serif 4', Georgia, serif; /* DM Mono — labels, specs, small caps. Typewriter-feeling. */ --mono: 'DM Mono', ui-monospace, Menlo, monospace; /* ── Type scale ───────────────────────────────────────── */ --fs-xs: 13px; /* eyebrows, small caps */ --fs-sm: 14px; /* mono buttons */ --fs-body: 17.5px; /* base paragraph */ --fs-lg: 19px; /* FAQ summaries, list items */ --fs-h3: clamp(24px, 2.8vw, 32px); --fs-h2: clamp(26px, 3.2vw, 38px); --fs-h1: clamp(26px, 3.6vw, 42px); /* ── Motion ───────────────────────────────────────────── */ --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: .15s; --dur-mid: .18s; } /* ── Font imports ───────────────────────────────────────── Loaded via in each page's from Google Fonts: Fraunces (display, variable) Source Serif 4 (body, variable) Caveat (handwritten) DM Mono (labels) See page for the full Google Fonts URL. ──────────────────────────────────────────────────────── */ /* ── Global reset + base ─────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Sticky footer: body is the flex container. Main grows to fill the viewport so the footer pins to the bottom on short pages. */ min-height: 100vh; display: flex; flex-direction: column; } /* Main column takes whatever height is left after nav + footer. */ main { flex: 1 0 auto; } /* Subtle paper grain — fixed overlay, two radial dot layers, multiplied. Shows on every page for texture consistency. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background-image: radial-gradient(rgba(28,26,21,.035) 1px, transparent 1px), radial-gradient(rgba(28,26,21,.025) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 2px 2px; mix-blend-mode: multiply; opacity: .5; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── Type utility classes ───────────────────────────────── Use these when you need a one-off type style that shouldn't inherit from the nearest component context. */ .mono { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; } /* `.hand` was the handwritten Caveat accent — now an italic serif pop instead. Caveat is reserved for polaroid figcaptions only. */ .hand { font-family: var(--body); font-style: italic; font-weight: 500; } .serif { font-family: var(--serif); } /* Eyebrow — small mono uppercase label used above headlines. */ .eyebrow { font-family: var(--mono); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); } /* Layout wrapper — constrains every section to --maxw with gutter padding. */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ── Respect reduced motion everywhere ───────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }