/* ════════════════════════════════════════════════════════════════════ jonatanzyl — design system · base (compartilhado por todas as páginas) Sistema full-bleed de cartazes: sem page-frame, sem side rules. O é um canvas único cujo fundo morpha via scroll. Tokens em tokens.css; movimento em motion.js; cada página adiciona seu case.css bespoke. Anti-padrões e regras: ver referencias-design-system/ jonatanzyl-nova-proposta-ds/DESIGN-SYSTEM.md ════════════════════════════════════════════════════════════════════ */ /* ── Fontes self-hosted (paths relativos a este arquivo) ───────────── */ @font-face { font-family: "Switzer"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/switzer-variable.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html.lenis { scroll-behavior: auto; } [id] { scroll-margin-top: 6rem; } body { font-family: var(--font-sans); font-weight: var(--weight-body); background: var(--bg-light); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; letter-spacing: var(--track-body); overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } figure video { max-width: 100%; width: 100%; height: auto; display: block; } ul, ol { list-style: none; } a { color: inherit; } ::selection { background: var(--ink); color: var(--bg-light); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(115, 117, 124, 0.4); border-radius: 3px; } /* Mono = voz de legenda/artefato. Componentes de conteúdo usam Switzer. Cada case adiciona seus próprios elementos mono no case.css. */ .font-mono, code, pre, .kicker, .meta-label, .fig-caption, .breadcrumb-link, .next-case-meta, .site-footer, .press-link { font-family: var(--font-mono); letter-spacing: 0.01em; } /* ── Acessibilidade ────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 200; background: var(--ink); color: var(--bg-light); border-radius: var(--radius-pill); padding: 0.6rem 1.1rem; font: 500 0.8125rem var(--font-mono); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* ── Canvas único: os três chãos e os fallbacks ──────────────────── Com JS + motion, o body interpola entre os fundos e as seções são transparentes. Sem JS (ou reduced-motion), cada fold pinta o próprio fundo, full-bleed. data-bg="light|dark|close" nas folds conduz o morph (motion.js) e o fallback. */ html:not(.js) .fold--dark, html.static-bg .fold--dark { background: var(--bg-dark); } html:not(.js) .act-close, html.static-bg .act-close { background: var(--bg-close); } .fold--dark { color: var(--paper); } .fold--dark ::selection { background: var(--paper); color: var(--bg-dark); } .act-close { color: var(--ink-close); } .act-close ::selection { background: var(--ink-close); color: var(--bg-close); } /* ── Anti-FOUC (universal) ───────────────────────────────────────── Com JS (html.js setado no , antes do body pintar), o que anima entra escondido — nunca há frame visível antes do GSAP esconder (o "pisca antes de surgir"). motion.js revela com .fromTo() a partir daqui; sem clearProps no transform. Cada case pré-esconde seus próprios elementos animados no case.css. Sem JS / reduced-motion: tudo visível. */ html.js .reveal, html.js .reveal-plate, html.js .breadcrumb, html.js .hero .kicker, html.js .hero-support, html.js .hero-figure, html.js .hero-meta { opacity: 0; } html.js .reveal { transform: translateY(30px); } html.js .reveal-plate { transform: translateY(30px) scale(0.975); } html.js .hero-line { transform: translateY(110%); } @media (max-width: 767px) { html.js .hero-headline { opacity: 0; } html.js .hero-line { transform: none; } } @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal-plate, html.js .breadcrumb, html.js .hero .kicker, html.js .hero-support, html.js .hero-figure, html.js .hero-meta, html.js .hero-line, html.js .hero-headline { opacity: 1; transform: none; } } /* ── Nav: fixa, glass, sobrevive aos três chãos ──────────────────── Alpha alto de propósito: o blur é enhancement — o scrim segura a leitura sozinho onde backdrop-filter não renderiza. */ :root { --nav-ink: var(--ink); --nav-ink-soft: var(--ink-3); --nav-glass: rgba(255, 255, 255, 0.88); } html[data-theme="dark"] { --nav-ink: var(--paper); --nav-ink-soft: var(--paper-2); --nav-glass: rgba(12, 13, 16, 0.82); } html[data-theme="close"] { --nav-ink: var(--ink-close); --nav-ink-soft: var(--ink-close-3); --nav-glass: rgba(255, 255, 255, 0.88); } .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.5s ease; } .site-nav::before { content: ""; position: absolute; inset: 0; background: var(--nav-glass); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); opacity: 0; transition: opacity 0.4s ease, background 0.5s ease; } .site-nav.is-scrolled::before { opacity: 1; } .site-nav-inner { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem var(--page-pad); } .site-nav-links { display: flex; align-items: center; gap: 2rem; } .site-nav a { font: 400 var(--text-kicker) var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--nav-ink-soft); text-decoration: none; transition: color 0.4s ease; } .site-nav a:hover { color: var(--nav-ink); } .site-nav .site-wordmark { position: absolute; left: 50%; transform: translateX(-50%); font: var(--weight-display) 0.9375rem var(--font-sans); letter-spacing: -0.02em; color: var(--nav-ink); text-transform: none; } .nav-about { display: none; } @media (min-width: 768px) { .nav-about { display: block; } } /* Sem JS não há troca de tema (o data-theme é setado pelo motion.js), então a nav ficaria dark-on-dark sobre folds escuras. mix-blend difference com branco lê em ambos os chãos (near-black vs near-white). Só no-JS. */ html:not(.js) .site-nav a, html:not(.js) .site-nav .site-wordmark { color: #fff; mix-blend-mode: difference; } /* ── Grade de conteúdo: medida, não moldura ────────────────────────── */ .wrap { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--page-pad); } /* Dentro do hero (flex column) o .wrap colapsaria para a largura do conteúdo e centralizaria; forçar 100% mantém a mesma medida das demais folds (conteúdo alinhado à esquerda, não centralizado por acidente). */ .hero > .wrap { width: 100%; } .wrap-narrow { max-width: 52rem; } .breadcrumb { margin-bottom: var(--space-gap); } .breadcrumb-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-kicker); color: var(--ink-3); text-decoration: none; text-transform: uppercase; letter-spacing: var(--track-kicker); transition: color 0.2s ease; } .breadcrumb-link:hover { color: var(--ink); } .fold--dark .breadcrumb-link { color: var(--paper-3); } .fold--dark .breadcrumb-link:hover { color: var(--paper); } /* ── Gramática de fold: cada dobra é um cartaz ─────────────────────── */ .fold { padding-block: var(--space-fold); } .kicker { font-family: var(--font-mono); font-size: var(--text-kicker); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--ink-3); margin-bottom: var(--space-beat); } .fold--dark .kicker { color: var(--paper-3); } .act-close .kicker { color: var(--ink-close-3); } .fold-heading { font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: var(--track-display); line-height: 1.04; max-width: 19ch; margin-bottom: var(--space-gap); text-wrap: balance; } .fold-copy { font-size: var(--text-body); line-height: 1.72; color: var(--ink-2); max-width: var(--measure-copy); } .fold-copy + .fold-copy { margin-top: 1.5rem; } .fold--dark .fold-copy { color: var(--paper-2); } .fold-copy code { font-size: 0.85em; padding: 0.1em 0.4em; background: rgba(16, 17, 20, 0.06); border-radius: 6px; } .fold--dark .fold-copy code { background: rgba(244, 244, 242, 0.1); } .fig-caption { font-size: var(--text-caption); line-height: 1.7; color: var(--ink-3); } .fold--dark .fig-caption { color: var(--paper-3); } .act-close .fig-caption { color: var(--ink-close-3); } figcaption.fig-caption { margin-top: 1.1rem; } .press-link { font-size: var(--text-caption); line-height: 1.8; color: var(--ink-3); max-width: 28rem; } .press-anchor { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(16, 17, 20, 0.25); text-underline-offset: 3px; white-space: nowrap; transition: text-decoration-color 0.2s ease; } .press-anchor:hover { text-decoration-color: currentColor; } .act-close .press-link { color: var(--ink-close-3); } .act-close .press-anchor { color: var(--ink-close); text-decoration-color: rgba(23, 21, 18, 0.25); } .press-sep { color: var(--ink-3); padding: 0 0.35rem; } /* ── Tratamento de mídia por natureza do asset ───────────────────── plate = artefato-janela com fundo baked: radius + sombra, sem borda. phones = composição transparente: drop-shadow, nunca caixa. phone-crop = vídeo de phone com fundo baked: crop no raio do bezel. */ .plate { border-radius: var(--radius-media); box-shadow: var(--edge-inset), var(--shadow-plate); } .fold--dark .plate { box-shadow: var(--shadow-plate-dark); } .act-close .plate { box-shadow: var(--edge-inset), var(--shadow-plate); } .phones { filter: var(--shadow-phone); } .fold--dark .phones { filter: var(--shadow-phone-dark); } .phone-crop { border-radius: 18.2% / 8.8%; overflow: hidden; filter: var(--shadow-phone); } .phone-crop video { transform: scale(1.035); } /* ── Hero: padrão compartilhado (todas as páginas têm um) ──────────── */ .hero { min-height: max(96svh, 44rem); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 9rem; padding-bottom: 4rem; } .hero-grid { display: flex; flex-direction: column; gap: var(--space-gap); } .hero-headline { font-size: var(--text-hero); font-weight: var(--weight-display); letter-spacing: var(--track-hero); line-height: 0.98; color: var(--ink); } .mask { display: block; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; } .hero-line { display: block; will-change: transform; } .hero-support { margin-top: var(--space-beat); font-size: var(--text-sub); font-weight: var(--weight-body); letter-spacing: var(--track-sub); line-height: 1.5; color: var(--ink-2); max-width: 34rem; text-wrap: balance; } .hero-figure { max-width: 36rem; } .hero-figure img { width: 100%; } .hero-meta { margin-top: var(--space-gap); display: flex; flex-wrap: wrap; gap: 2rem 4.5rem; border-top: 1px solid var(--line-soft); padding-top: 2rem; } .meta-label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-3); margin-bottom: 0.45rem; } .meta-value { font-size: 0.9375rem; color: var(--ink-2); } /* Hero escuro (padrão reutilizável — páginas que abrem no chão dark) */ .hero.fold--dark .hero-headline { color: var(--paper); } .hero.fold--dark .hero-support { color: var(--paper-2); } .hero.fold--dark .hero-meta { border-color: var(--line-dark-soft); } .hero.fold--dark .meta-label { color: var(--paper-3); } .hero.fold--dark .meta-value { color: var(--paper-2); } @media (max-width: 767px) { .hero-headline .mask, .hero-headline .hero-line { display: inline; } .hero-headline { text-wrap: balance; } } /* Linhas mascaradas nunca quebram no desktop: a máscara clipa vertical, e uma linha que quebrasse estragaria o reveal + deixaria órfãos. */ @media (min-width: 768px) { .hero .hero-line { white-space: nowrap; } } @media (min-width: 1100px) { .hero-grid { flex-direction: row; align-items: flex-end; gap: 4.5rem; } .hero-top { flex: 1.15; } .hero-figure { flex: 1; max-width: 35rem; } } /* ── Closer + footer (padrão compartilhado) ────────────────────────── */ .next-case { padding-block: var(--space-fold); } .next-case-inner { border-top: 1px solid var(--line-close); padding-top: 3rem; } .next-case-inner .kicker { margin-bottom: 1.75rem; display: block; } .next-case-link { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; text-decoration: none; } .next-case-title { display: block; font-size: var(--text-title); font-weight: var(--weight-display); letter-spacing: var(--track-title); color: var(--ink-close); margin-bottom: 0.4rem; transition: transform 0.4s var(--ease-out-expo); } .next-case-meta { font-size: var(--text-kicker); color: var(--ink-close-3); } .next-case-link svg { color: var(--ink-close-3); margin-top: 0.6rem; transition: color 0.2s ease, transform 0.3s var(--ease-out); flex-shrink: 0; } .next-case-link:hover .next-case-title { transform: translateX(6px); } .next-case-link:hover svg { color: var(--ink-close); transform: translate(3px,-3px); } .site-footer { padding: 2rem var(--page-pad) 2.5rem; display: flex; justify-content: flex-end; font-size: var(--text-kicker); color: var(--ink-close-3); } /* ── Reduced motion (global) ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }