/* ===================================================================== Amazon Field Notes — Colors & Type tokens Drop into via ===================================================================== */ /* --------------------------------------------------------------------- Webfonts --------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); :root { /* ------------------------------------------------------------------- COLOR — Primary jungle / paper / clay palette Names match the names called out across the variation boards. ------------------------------------------------------------------- */ --c-deep-jungle: #1F3A2E; /* deepest brand green — covers, footers, hero panels */ --c-moss: #3F5944; /* mid green — buttons, headers, accent type */ --c-sage: #A5B59E; /* muted sage — chips, dividers, soft fills */ --c-fern: #6A7F62; /* between moss and sage */ --c-eucalyptus: #B8C4B0; /* lightest green — backgrounds, hover tints */ --c-parchment: #EBE1CB; /* warm off-cream — primary surface */ --c-bone: #F4EFE6; /* cooler cream — secondary surface */ --c-stone: #E9E2D6; /* tertiary cream */ --c-paper: #FBF7EE; /* almost-white surface (cards on parchment) */ --c-clay: #C16A4A; /* terracotta accent — primary highlight */ --c-rust: #A34832; /* deeper clay for emphasis */ --c-earth: #6F4E37; /* leather brown — borders, frames */ --c-gold: #D9B45F; /* expedition gold — stamps, highlights */ --c-ink: #1A1A1A; /* body type */ --c-ink-soft: #2A2A28; /* softened ink for long form */ --c-graphite: #4A4A47; /* secondary type */ --c-fog: #8A8479; /* tertiary type, captions */ /* ------------------------------------------------------------------- COLOR — Semantic foreground / background Use these everywhere instead of raw values. ------------------------------------------------------------------- */ --fg-1: var(--c-ink); /* body text */ --fg-2: var(--c-graphite); /* secondary */ --fg-3: var(--c-fog); /* captions, meta */ --fg-on-jungle: var(--c-parchment); /* type on deep-green */ --fg-on-clay: var(--c-paper); /* type on terracotta */ --fg-link: var(--c-rust); /* links default to rust */ --fg-link-hover: var(--c-deep-jungle); --bg-parchment: var(--c-parchment); /* primary page bg */ --bg-bone: var(--c-bone); /* secondary surface */ --bg-paper: var(--c-paper); /* card surface */ --bg-stone: var(--c-stone); /* tertiary */ --bg-jungle: var(--c-deep-jungle); /* hero / footer */ --bg-moss: var(--c-moss); /* ------------------------------------------------------------------- COLOR — Data viz scale (categorical) ------------------------------------------------------------------- */ --data-1: var(--c-deep-jungle); --data-2: var(--c-moss); --data-3: var(--c-sage); --data-4: var(--c-clay); --data-5: var(--c-gold); --data-6: var(--c-earth); /* ------------------------------------------------------------------- COLOR — Status / semantic ------------------------------------------------------------------- */ --status-positive: #4F7A4F; /* growth, on-target */ --status-warning: #C8923E; /* watch */ --status-negative: #A34832; /* decline, alert */ --status-info: #4A6A6A; /* informational */ /* ------------------------------------------------------------------- BORDERS ------------------------------------------------------------------- */ --border-hairline: 1px solid rgba(40, 30, 20, 0.12); --border-soft: 1px solid rgba(40, 30, 20, 0.08); --border-strong: 1px solid rgba(40, 30, 20, 0.22); --border-jungle: 1px solid rgba(31, 58, 46, 0.5); /* ------------------------------------------------------------------- RADII — small + tactile, no balloon shapes ------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; /* ------------------------------------------------------------------- SHADOWS — warm earth, never pure black ------------------------------------------------------------------- */ --shadow-paper: 0 1px 2px rgba(40, 30, 20, 0.08), 0 6px 18px rgba(40, 30, 20, 0.10); --shadow-paper-lg: 0 2px 4px rgba(40, 30, 20, 0.10), 0 18px 40px rgba(40, 30, 20, 0.14); --shadow-stamp: inset 0 0 0 1.5px var(--c-ink), 0 1px 2px rgba(40, 30, 20, 0.10); --shadow-emboss: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.06); --shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.16); /* ------------------------------------------------------------------- SPACING — 8pt base ------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ------------------------------------------------------------------- MOTION ------------------------------------------------------------------- */ --ease-natural: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); --dur-quick: 200ms; --dur-base: 350ms; --dur-slow: 650ms; --dur-page: 900ms; /* ------------------------------------------------------------------- TYPE — Font families ------------------------------------------------------------------- */ --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif; --font-condensed: 'Oswald', 'Benton Sans Condensed', 'HelveticaNeue-CondensedBold', 'Impact', sans-serif; --font-body: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; --font-hand: 'Caveat', 'Bradley Hand', cursive; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ------------------------------------------------------------------- TYPE — Sizes ------------------------------------------------------------------- */ --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 40px; --fs-4xl: 56px; --fs-5xl: 72px; --fs-6xl: 96px; } /* ===================================================================== SEMANTIC TYPE STYLES ===================================================================== */ html, body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; color: var(--fg-1); background: var(--bg-parchment); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 88px); line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.1; letter-spacing: -0.01em; color: var(--fg-1); text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; color: var(--fg-1); } h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; color: var(--fg-1); } p, .body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; color: var(--fg-1); text-wrap: pretty; } .lead { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.55; color: var(--fg-1); font-weight: 400; } small, .caption { font-family: var(--font-body); font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-3); } /* Stamp / eyebrow — UPPERCASE letter-spaced label */ .eyebrow, .stamp-label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); } /* Condensed cover / poster headline */ .headline-condensed { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--fg-1); } /* Hand-written annotation */ .annotation, .handwritten { font-family: var(--font-hand); font-weight: 500; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-rust); transform: rotate(-2deg); display: inline-block; } /* Mono / data */ code, kbd, .mono, .data-num { font-family: var(--font-mono); font-size: 0.95em; font-feature-settings: 'tnum' 1; } .metric-number { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -0.01em; font-feature-settings: 'tnum' 1, 'lnum' 1; color: var(--fg-1); } /* Links */ a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-quick) var(--ease-natural), border-color var(--dur-quick) var(--ease-natural); } a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; } ::selection { background: var(--c-gold); color: var(--c-ink); } /* ===================================================================== UTILITY — common surface treatments ===================================================================== */ .surface-parchment { background: var(--bg-parchment); } .surface-bone { background: var(--bg-bone); } .surface-paper { background: var(--bg-paper); } .surface-jungle { background: var(--bg-jungle); color: var(--fg-on-jungle); } .surface-moss { background: var(--bg-moss); color: var(--fg-on-jungle); } .card-paper { background: var(--bg-paper); border: var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-paper); } /* Subtle paper-fiber noise overlay — apply to a ::before pseudo */ .paper-noise { position: relative; isolation: isolate; } .paper-noise::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(60, 40, 20, 0.025) 1px, transparent 1px), radial-gradient(rgba(60, 40, 20, 0.02) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 1px; mix-blend-mode: multiply; z-index: -1; border-radius: inherit; }