/* ========================================================================== Rhizomea — Foundations Colors, type, spacing, motion ========================================================================== */ /* Fonts are loaded via a in each page's (with preconnect) so they don't block CSS parsing the way an @import does. */ :root { /* ---------- Color · Primary ---------- */ --verde: #485828; /* Verde Rhizomea — núcleo da marca */ --bege: #EEE8D9; /* Bege Areia — fundo principal */ --dourado: #8A7B4C; /* Dourado Terra — acento, sofisticação */ /* ---------- Color · Support ---------- */ --preto: #1a1a18; /* Preto Orgânico */ --branco: #FAFAF7; /* Branco Quente */ --verde-light: #6a7c3f; /* Verde Claro — hover, interacção */ --bege-dark: #d4ccb8; /* Bege Escuro — bordas, divisores */ /* ---------- Color · Semantic ---------- */ --bg: var(--branco); --bg-alt: var(--bege); --bg-deep: var(--preto); --bg-brand: var(--verde); --fg: var(--preto); --fg-muted: #4a4a44; --fg-soft: #7a786f; --fg-on-dark: var(--bege); --fg-on-brand: var(--branco); --accent: var(--verde); --accent-hover: var(--verde-light); --accent-soft: var(--dourado); --border: var(--bege-dark); --border-strong: rgba(26, 26, 24, 0.18); --divider: rgba(26, 26, 24, 0.08); --focus-ring: var(--verde); /* ---------- Typography · Families ---------- */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Jost', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Typography · Scale ---------- */ --fs-hero: clamp(3rem, 7vw, 6.5rem); /* H1 */ --fs-h2: clamp(1.8rem, 3.5vw, 3rem); /* Section */ --fs-h3: clamp(1.4rem, 2.2vw, 2rem); /* Subsection */ --fs-display-it: clamp(2rem, 4vw, 3.5rem); /* Italic display, quote */ --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.75rem; --fs-cta: 0.8rem; /* ---------- Typography · Tracking & Leading ---------- */ --lh-display: 1.08; --lh-tight: 1.15; --lh-snug: 1.4; --lh-body: 1.85; --ls-hero: -0.02em; --ls-body: 0.02em; --ls-label: 0.18em; /* uppercase labels */ --ls-button: 0.14em; /* ---------- Spacing (8pt base, occasional 4pt) ---------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.5rem; /* 24px */ --s-6: 2rem; /* 32px */ --s-7: 3rem; /* 48px */ --s-8: 4rem; /* 64px */ --s-9: 6rem; /* 96px */ --s-10: 8rem; /* 128px */ /* ---------- Layout ---------- */ --max-width: 1280px; --max-prose: 62ch; --gutter: clamp(1.5rem, 4vw, 3rem); /* ---------- Radii — restrained ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; /* ---------- Borders ---------- */ --border-hair: 1px; --border-thin: 1px; /* ---------- Shadow — soft, low ---------- */ --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.06); --shadow-md: 0 4px 18px rgba(26, 26, 24, 0.08); --shadow-lg: 0 18px 48px rgba(26, 26, 24, 0.12); --shadow-image: 0 24px 60px -20px rgba(26, 26, 24, 0.35); /* ---------- Motion — slow, eased ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --transition: 0.4s var(--ease); --transition-slow: 0.7s var(--ease); } /* ========================================================================== Semantic element styles ========================================================================== */ html { font-family: var(--font-body); font-size: 16px; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--fg); background: var(--bg); margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; color: var(--fg); margin: 0 0 var(--s-4) 0; } h1, .h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--ls-hero); } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; } h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-tight); } .display-italic { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: var(--fs-display-it); line-height: var(--lh-tight); color: var(--fg-muted); } .lead { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-muted); max-width: var(--max-prose); } p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--max-prose); margin: 0 0 var(--s-5) 0; } .label, .caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-soft); } .scientific { font-family: var(--font-display); font-style: italic; font-weight: 400; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); } a:hover { border-bottom-color: var(--accent); color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } hr { border: 0; border-top: 1px solid var(--divider); margin: var(--s-7) 0; } ::selection { background: var(--verde); color: var(--bege); }