/* ===================================================================== Native Markets — Colors & Type Canonical source: lookbook/src/layouts/Layout.astro Reference this file in every artifact to stay on-brand. ===================================================================== */ /* ---------- Fonts ---------- */ @font-face { font-family: 'HEX Franklin'; src: url('fonts/HEX-Franklin-v.0.2-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Tiempos Text'; src: url('fonts/TestTiemposTextVF-Roman.ttf') format('truetype-variations'); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Tiempos Text'; src: url('fonts/TestTiemposTextVF-Italic.ttf') format('truetype-variations'); font-style: italic; font-weight: 100 900; font-display: swap; } /* JetBrains Mono loaded from Google Fonts where needed: */ :root { /* ---------- Base color tokens (canonical palette) ---------- */ --dark-green: #1B3123; /* primary brand — headlines, dark surfaces */ --medium-green: #4AA16B; /* action / accent / progress markers */ --dark-slate: #333C45; /* body copy on cream */ --light-gray: #D1D5D9; --ice-white: #F1FEFF; --near-black: #0B0B0B; --usdh-green: #4AFFC6; /* USDH sub-brand only */ --usdh-dark: #042F22; /* USDH sub-brand only */ --brown: #BFAB93; /* warm neutral — captions, dots, rules */ --cream: #F2ECE4; /* canvas — DEFAULT page background */ --white-card: rgba(255, 255, 255, 0.5); /* translucent card surface */ /* ---------- Semantic aliases ---------- */ --bg: var(--cream); --fg: var(--dark-green); /* primary text on cream */ --fg-body: var(--dark-slate); /* secondary body text */ --fg-muted: var(--brown); /* captions, eyebrow, rules */ --fg-invert: var(--cream); /* text on dark surfaces */ --accent: var(--medium-green); --surface-card: var(--white-card); --surface-dark: var(--dark-green); --rule: rgba(191, 171, 147, 0.35); --rule-strong: var(--dark-green); /* ---------- Type families ---------- */ --font-sans: 'HEX Franklin', system-ui, -apple-system, sans-serif; --font-serif: 'Tiempos Text', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; /* ---------- Layout ---------- */ --max-width: 920px; /* ---------- Radii ---------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* canonical — cards, tables, stats, callouts */ /* ---------- Shadows ---------- */ --shadow-card: 0 1px 3px rgba(27, 49, 35, 0.06); /* ---------- Dot-grid background (used on ) ---------- */ --bg-dot: radial-gradient(circle, rgba(191, 171, 147, 0.45) 0.8px, transparent 0.8px); --bg-dot-size: 20px 20px; /* ---------- Spacing (informal scale, px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 56px; --space-16: 80px; } /* ---------- Page base (apply to to mirror Lookbook) ---------- */ html, body { margin: 0; padding: 0; background-color: var(--bg); background-image: var(--bg-dot); background-size: var(--bg-dot-size); color: var(--fg); font-family: var(--font-serif); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: border-box; } /* ---------- Semantic type roles ---------- */ /* h1 — hero (serif, display). Paired with a top logo row + bottom green rule. */ .t-h1, h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 6vw, 64px); line-height: 1.1; letter-spacing: -0.025em; color: var(--fg); margin: 0; } /* h2 — section header (serif). Always preceded by a tiny sans counter (01, 02, …). */ .t-h2, h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); margin: 80px 0 20px; } /* h3 — card/subsection title (sans, bold) */ .t-h3, h3 { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--fg); margin: 0 0 6px; } /* Eyebrow / counter / uppercase label (CONFIDENTIAL, section counters, table heads) */ .t-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } /* Kicker — small uppercase label inside dark surfaces (stat labels) */ .t-kicker { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); line-height: 1.3; } /* Body copy */ .t-p, p { font-family: var(--font-serif); font-size: 17px; line-height: 1.75; color: var(--fg-body); margin: 0 0 16px; } /* Small body — inside dense components (table cells, feature bullets) */ .t-small { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--fg-body); } /* Display number — the big serif value inside */ .t-display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1; color: var(--cream); } /* Statement — mid-page hero quote */ .t-statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 4.5vw, 42px); line-height: 1.25; letter-spacing: -0.02em; color: var(--fg); } /* Inline code */ .t-code, code { font-family: var(--font-mono); font-size: 0.88em; background: rgba(74, 161, 107, 0.10); color: var(--fg); padding: 1px 6px; border-radius: var(--radius-sm); } /* Code block */ pre { font-family: var(--font-mono); background: var(--dark-green); color: var(--cream); padding: 20px 24px; border-radius: var(--radius-lg); overflow-x: auto; font-size: 13px; line-height: 1.55; } /* Link */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Emphasis */ strong { color: var(--fg); font-weight: 600; } em { font-style: italic; color: var(--fg); } /* Section counter (pairs with h2) — use via ::before */ .t-h2.with-counter { counter-increment: section; } .t-h2.with-counter::before { content: counter(section, decimal-leading-zero); display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--brown); margin-bottom: 8px; } /* ---------- Animation tokens ---------- */ @keyframes drift { from { background-position: 0 0; } to { background-position: 400px -400px; } } .anim-drift { animation: drift 100s linear infinite; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .anim-fade-up { animation: fadeUp 0.6s ease both; }