*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 56px; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; border: none; background: none; outline: none; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background-color: var(--gray-700); color: var(--gray-100); } ::-moz-selection { background-color: var(--gray-700); color: var(--gray-100); } hr { border: none; border-top: 0.5px solid var(--gray-300); margin: 32px 0; } @media (max-width: 1024px) { hr { display: none; } } :root { --gray-100: oklch(0.99 0 0); --gray-100-80: oklch(0.99 0 0 / 80%); --gray-200: oklch(0.975 0 0); --gray-300: oklch(0.9 0 0); --gray-400: oklch(0.82 0 0); --gray-500: oklch(0.68 0 0); --gray-600: oklch(0.55 0 0); --gray-700: oklch(0.44 0 0); --gray-800: oklch(0.22 0 0); --gray-800-80: oklch(0.22 0 0 / 80%); --max-width: 1512px; --padding-h-desktop: 32px; --padding-h-mobile: 16px; --transition-base: 200ms ease; --transition-slow: 400ms ease; --text-measure: 70ch; } @font-face { font-family: 'Erode'; src: url('/media/fonts/Erode-Variable.woff2') format('woff2-variations'); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Erode'; src: url('/media/fonts/Erode-VariableItalic.woff2') format('woff2-variations'); font-weight: 300 600; font-style: italic; font-display: swap; } body { font-family: 'Erode', Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 400; color: var(--gray-800); background-color: var(--gray-100); } strong { font-weight: 500; } .title-large { font-size: 3rem; font-weight: 500; line-height: 1.25em; letter-spacing: -0.02em; } .title-medium { font-size: 2rem; font-weight: 500; line-height: 1.3em; letter-spacing: -0.01em; } .title-small { font-size: 1.5rem; font-weight: 500; line-height: 1.35em; letter-spacing: -0.005em; } .body-project { font-size: 1.375rem; font-weight: 400; line-height: 1.45em; letter-spacing: 0; } .body-title { font-size: 1.25rem; font-weight: 500; line-height: 1.45em; letter-spacing: 0; } .body-large { font-size: 1.25rem; font-weight: 400; line-height: 1.45em; letter-spacing: 0; } .body-medium { font-size: 1rem; font-weight: 400; line-height: 1.45em; letter-spacing: 0; } p, li { max-width: var(--text-measure); } @media (min-width: 1920px) { .title-large { font-size: 3.5rem; } .title-medium { font-size: 2.5rem; } .title-small { font-size: 2rem; } .body-title { font-size: 1.625rem; } .body-project { font-size: 1.625rem; } .body-large { font-size: 1.5rem; } .body-medium { font-size: 1.25rem; } } @media (max-width: 1024px) { .body-project { font-size: 1.25rem; } } @media (max-width: 576px) { .title-large { font-size: 2.5rem; } .title-medium { font-size: 1.5rem; } .title-small { font-size: 1.25rem; } .body-title { font-size: 1.125rem; } .body-project { font-size: 1rem; } .body-large { font-size: 1rem; } .body-medium { font-size: 0.875rem; } } .page { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-h-desktop); } .section { width: 100%; } .section--intro { padding-top: 96px; padding-bottom: 24px; } .intro__label { color: var(--gray-800); margin-bottom: 16px; } .intro__description { max-width: 856px; } .section--projects { padding-bottom: 160px; } .section--projects .project-filter { margin-bottom: 32px; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } @media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 32px; } } @media (max-width: 768px) { .container { padding-inline: var(--padding-h-mobile); } .projects-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; } .section--intro { padding-top: 56px; padding-bottom: 0px; } .section--projects { padding-bottom: 64px; } .intro__description { max-width: 100%; } .section--projects .project-filter { margin-bottom: 24px; } } [data-lang="pt"] .lang-en { display: none; } [data-lang="en"] .lang-pt { display: none; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 56px; background-color: var(--gray-100-80); backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--gray-300); transition: background-color 0.4s ease, border-color 0.4s ease, opacity 0.5s ease, transform 0.5s ease; } .site-header--hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; } .site-header--hidden.site-header--visible { opacity: 1; transform: translateY(0); pointer-events: all; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 32px; max-width: 1512px; margin: 0 auto; } .site-header__left { display: flex; align-items: center; gap: 32px; } .site-header__logo { color: var(--gray-800); } .site-header__logo:hover { color: var(--gray-600); } .site-header__divider { display: block; width: 0.5px; height: 56px; background-color: var(--gray-300); flex-shrink: 0; } .site-header--no-transition { transition: none !important; } .site-header__contact { color: var(--gray-800); display: flex; align-items: center; gap: 32px; } .site-header__contact a:hover { color: var(--gray-600); } .site-header__right { display: flex; align-items: center; } .lang-switcher { display: flex; align-items: center; gap: 8px; } .lang-switcher__item { color: var(--gray-600); background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s ease; } .lang-switcher__item.is-active { color: var(--gray-800); } .lang-switcher__item:hover { color: var(--gray-800); } .lang-switcher__sep { font-size: 1rem; color: var(--gray-400); user-select: none; } @media (max-width: 768px) { .site-header__inner { padding: 0 16px; } .site-header__contact { display: none; } .site-header__divider { display: none; } } .project-hero { position: relative; width: 100%; overflow: hidden; margin-top: -56px; } .project-hero__img { --hero-position-desktop: center center; --hero-position-mobile: center center; display: block; width: 100%; margin-left: auto; margin-right: auto; height: 100vh; max-height: 1080px; min-height: 650px; object-fit: cover; position: relative; z-index: 1; object-position: var(--hero-position-desktop); } .project-content { width: 100%; display: flex; flex-direction: column; gap: 32px; padding-top: 64px; padding-bottom: 120px; } .project-info { display: flex; flex-direction: row; justify-content: space-between; gap: 32px; } .project-about { display: flex; flex-direction: column; width: auto; min-width: 150px; gap: 4px; } .project-description { display: flex; flex-direction: column; gap: 24px; width: fit-content; max-width: 70%; } .project-showcase { width: 100%; display: flex; flex-direction: column; gap: 40px; } .project-video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .section-other-projects { width: 100%; margin-inline: auto; padding-top: 96px; padding-bottom: 96px; background-color: var(--gray-200); border-top: 0.5px solid var(--gray-300); } [class^="image-grid-"] > p { grid-column: 1 / -1; } .image-grid-1 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 40px 24px; grid-column: 1 / -1; } .image-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; grid-column: 1 / -1; } .image-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; grid-column: 1 / -1; } .image-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; grid-column: 1 / -1; } .image-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 24px; grid-column: 1 / -1; } .image-figure { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; } .image-figure img { display: block; width: 100%; } .image-caption { color: var(--gray-700); } @media (max-width: 1024px) { .project-content { gap: 64px; } .project-info { flex-direction: column; gap: 24px; } .project-about { width: 100%; min-width: 0; } .project-description { width: fit-content; max-width: 100%; } .image-grid-4 { grid-template-columns: repeat(3, 1fr); } .image-grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .project-hero__img { height: 60vh; min-height: 520px; object-position: var(--hero-position-mobile); } .project-content { gap: 24px; padding-top: 32px; padding-bottom: 64px; } .project-description { gap: 16px; } .project-showcase { gap: 24px; margin-top: 24px; } .section-other-projects { padding-top: 48px; padding-bottom: 48px; } .image-grid-1, .image-grid-2, .image-grid-3 { grid-template-columns: repeat(1, 1fr); gap: 24px 8px; } .image-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px 8px; } .image-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 24px 8px; } .image-figure { gap: 4px; } } .project-card { display: flex; flex-direction: column; gap: 8px; min-width: 280px; max-width: 600px; width: 100%; cursor: pointer; } .project-card__cover { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background-color: var(--gray-300); } .project-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .project-card:hover .project-card__cover img { transform: scale(1.03); } .project-card__info { display: flex; flex-direction: column; gap: 2px; } .project-card__title { color: var(--gray-800); } .project-card__meta { color: var(--gray-700); }