/* ============================================================ Base reset + typography foundations Font: Creato Display (with safe fallback stack) ============================================================ */ /* Inter: fallback only — shown while Creato Display loads (font-display:swap) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* ── Creato Display — self-hosted Files expected in assets/font/: CreatoDisplay-Light.woff2 (weight 300) CreatoDisplay-Regular.woff2 (weight 400) CreatoDisplay-Medium.woff2 (weight 500) local() checked first — zero-cost on machines that already have it installed. url() is the guaranteed path for every other machine. ── */ @font-face { font-family: "Creato Display"; src: local("Creato Display Light"), local("CreatoDisplay-Light"), url('../assets/font/CreatoDisplay-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Creato Display"; src: local("Creato Display"), local("CreatoDisplay-Regular"), url('../assets/font/CreatoDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Creato Display"; src: local("Creato Display Medium"), local("CreatoDisplay-Medium"), url('../assets/font/CreatoDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Creato Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--t-18); line-height: 1.22; letter-spacing: var(--tr-tight); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* overflow-x: clip on html — clips horizontal overflow (incl. leogarcia.work) without creating a scroll container, so position:sticky works correctly. overflow:hidden on html would break sticky; clip does not. */ html { overflow-x: clip; } body { min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; } h1,h2,h3,h4,h5,h6,p { margin: 0; } img, svg, video { display: block; max-width: 100%; } /* ============================================================ i18n — toggle visibility via Default lang="en". PT-BR mode: html[lang^="pt"]. ============================================================ */ [data-lang] { display: none; } html[lang^="en"] [data-lang="en"], html[lang^="pt"] [data-lang="pt"] { display: inline; } /* When the lang span sits alone inside a flex/block container, treat as inline-block */ [data-lang] { white-space: inherit; } ::selection { background: var(--ink); color: var(--bg); } /* ============================================================ Typography utilities (semantic, reusable) ============================================================ */ .t-meta { /* 18 medium */ font-size: var(--t-18); font-weight: 500; line-height: calc(22 / 18); letter-spacing: var(--tr-tight); color: var(--mute-2); } .t-meta-sm { /* 16 medium */ font-size: var(--t-16); font-weight: 500; line-height: 1; letter-spacing: var(--tr-tight); } .t-body { /* 18 regular description */ font-size: var(--t-18); font-weight: 400; line-height: calc(24 / 18); letter-spacing: -0.01em; color: var(--ink); } .t-eyebrow { /* 48 regular */ font-size: var(--t-48); font-weight: 400; line-height: 1; letter-spacing: var(--tr-tighter); color: var(--ink-2); } .t-display { /* 88 regular */ font-size: var(--t-88); font-weight: 400; line-height: calc(92 / 88); letter-spacing: var(--tr-tightest); } .t-hero { /* 212 regular */ font-size: var(--t-212); font-weight: 400; line-height: calc(200 / 212); letter-spacing: var(--tr-tightest); } /* ============================================================ 12-column grid container ============================================================ */ .grid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gutter); padding-left: var(--grid-margin); padding-right: var(--grid-margin); } .col-span-12 { grid-column: span 12; } .col-span-11 { grid-column: span 11; } .col-span-10 { grid-column: span 10; } .col-span-9 { grid-column: span 9; } .col-span-8 { grid-column: span 8; } .col-span-7 { grid-column: span 7; } .col-span-6 { grid-column: span 6; } .col-span-5 { grid-column: span 5; } .col-span-4 { grid-column: span 4; } .col-span-3 { grid-column: span 3; } .col-span-2 { grid-column: span 2; } /* Visible grid overlay (toggle for debug) */ .grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter); padding: 0 var(--grid-margin); opacity: 0; transition: opacity .2s; } .grid-overlay.is-on { opacity: 1; } .grid-overlay span { background: rgba(98,98,98,.10); height: 100%; }