/* ============================================================= GLOBAL.CSS — Magnus Mídias / site-portfolio Reset · Tokens · Tipografia · Utilitários ============================================================= */ /* Google Fonts carregado via no de cada HTML para evitar render-blocking */ /* ── Tokens da marca ──────────────────────────────────────── */ :root { /* Cores */ --color-bg: #F4F4F9; --color-surface: #FFFFFF; --color-surface-alt: #EAEAF2; --color-primary: #00002B; --color-primary-hover: #000014; --color-black: #000000; --color-text: #00002B; --color-text-muted: rgba(0, 0, 43, 0.6); --color-text-inverse: #F4F4F9; --color-border: rgba(0, 0, 42, 0.08); --color-border-strong: rgba(0, 0, 42, 0.15); /* Tipografia */ --font-body: 'Sora', system-ui, -apple-system, sans-serif; --font-display: 'Sora', system-ui, -apple-system, sans-serif; /* Border radius — escala Magnus: 6 / 12 / 24 px */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; /* Easing canônico Magnus */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Espaçamentos (múltiplos de 4px) */ --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: 48px; --space-16: 64px; --space-20: 80px; } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } /* ── Tipografia base ──────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; } h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 800; max-width: 18ch; } h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1.0625rem; font-weight: 600; } p { line-height: 1.65; } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); opacity: 0.7; margin-bottom: 1rem; } /* ── Skip link (acessibilidade) ───────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 1rem; background-color: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; z-index: 9999; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0.75rem; } /* ── Layout utilitários ───────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .container--narrow { max-width: 860px; } .section { padding-block: clamp(4rem, 8vw, 8rem); } .section-alt { background-color: var(--color-surface-alt); } .section-dark { background-color: var(--color-primary); color: var(--color-text-inverse); } .section-dark .eyebrow { color: var(--color-text-inverse); opacity: 0.7; } .section-dark h2, .section-dark h3 { color: var(--color-text-inverse); } .section-dark :focus-visible { outline-color: var(--color-text-inverse); } .section__header { margin-bottom: 3rem; max-width: 820px; } .section__header h2 { margin-top: var(--space-2); } .section-closer { margin-top: var(--space-8); text-align: center; font-size: 1.125rem; opacity: 0.8; max-width: 640px; margin-inline: auto; } .prose { display: flex; flex-direction: column; gap: var(--space-4); margin-top: 2rem; } .prose p { font-size: 1.0625rem; opacity: 0.8; line-height: 1.65; } .prose strong { opacity: 1; } /* ── Acessibilidade ───────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ── Animação de entrada (IntersectionObserver) ───────────── */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }