/* ============================================ Typography — Inter + JetBrains Mono ============================================ */ /* Fonts loaded via Google Fonts CDN in HTML */ /* ── Base ── */ body { font-family: var(--font-primary); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--color-text-primary); background-color: var(--color-bg-primary); } /* ── Headings ── */ h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-text-primary); } h1 { font-size: var(--fs-3xl); font-weight: var(--fw-black); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); font-weight: var(--fw-bold); } h5 { font-size: var(--fs-md); font-weight: var(--fw-bold); } h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); } /* ── Paragraph ── */ p { margin-bottom: var(--space-md); color: var(--color-text-secondary); } p:last-child { margin-bottom: 0; } /* ── Links ── */ a { transition: color var(--transition-fast); } .link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .link:hover { color: var(--color-accent-light); } /* ── Emphasis & Strong ── */ strong, b { font-weight: var(--fw-bold); color: var(--color-text-primary); } em, i { font-style: italic; } /* ── Small & Captions ── */ small, .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .caption { font-size: var(--fs-sm); color: var(--color-text-muted); letter-spacing: var(--ls-wide); } /* ── KPI / Data Numbers ── */ .kpi-number { font-family: var(--font-mono); font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-tight); color: var(--color-accent); } .data-number { font-family: var(--font-mono); font-weight: var(--fw-bold); line-height: 1; } /* ── Monospace / Code ── */ code, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* ── Section Tag (label sopra titolo sezione) ── */ .section-tag { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-accent); margin-bottom: var(--space-sm); } /* ── Section Title ── */ .section-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); margin-bottom: var(--space-md); } .section-subtitle { font-size: var(--fs-md); color: var(--color-text-primary); max-width: 700px; line-height: var(--lh-relaxed); } /* ── Hero Typography ── */ .hero-title { font-size: var(--fs-hero); font-weight: var(--fw-black); line-height: 1; letter-spacing: -0.04em; } .hero-subtitle { font-size: var(--fs-lg); font-weight: var(--fw-regular); color: var(--color-text-primary); line-height: var(--lh-snug); max-width: 600px; } /* ── Highlight Text ── */ .text-accent { color: var(--color-accent); } .text-highlight { position: relative; display: inline; } .text-highlight::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background-color: var(--color-accent-glow); z-index: -1; } /* ── Lists ── */ .list-check li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); color: var(--color-text-secondary); } .list-check li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; border: 2px solid var(--color-accent); border-radius: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300B67A'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } /* ── Blockquote ── */ blockquote { border-left: var(--border-accent); padding-left: var(--space-lg); margin: var(--space-xl) 0; font-size: var(--fs-md); font-style: italic; color: var(--color-text-secondary); }